/* =========================================================
   ARGUS HEADER + HERO
   Navy utility bar, logo lockup, nav tools, slide-in panel,
   and the photo-background hero with its glass form card.
   Colour tokens all come from style.css :root.
========================================================= */

/* Align header content to a 1280px container. Both edges are guttered: in the
   reference design the top-bar CTA stops at the container's right edge, it does
   not bleed to the viewport. */
:root { --argus-gutter: max(1.25rem, calc((100% - 1280px) / 2)); }

.argus-ico { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

/* ---------------------------------------------------------
   1. TOP UTILITY BAR
--------------------------------------------------------- */
.argus-topbar {
  background: var(--argus-navy);
  color: #fff;
  font-size: 0.86rem;
}
.argus-topbar__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1.5rem;
  padding-left: var(--argus-gutter);
  padding-right: var(--argus-gutter);
}
.argus-topbar__left,
.argus-topbar__right { display: flex; gap: 1.1rem; }
.argus-topbar__left { align-items: center; }
/* The CTA is a full-bleed block that defines the bar height, so this side
   stretches; .argus-social re-centres its own icons inside that height. */
.argus-topbar__right { align-items: stretch; }
.argus-topbar__left { min-height: 52px; }

/* style.css colours every bare <span> with --argus-slate. That element-level
   rule beats INHERITED white from .argus-topbar, so the labels must be set
   explicitly or they render dark-on-navy and disappear. */
.argus-topbar,
.argus-topbar span,
.argus-topbar a,
.argus-topbar__cta,
.argus-topbar__cta span { color: #fff; }

.argus-topbar__item,
.argus-topbar__item span {
  color: #DCE1F2;
}
.argus-topbar__item {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; white-space: nowrap;
}
.argus-topbar__item:hover,
.argus-topbar__item:hover span { color: #fff; }
.argus-topbar__item .argus-ico { color: var(--argus-blue); }
.argus-topbar__rule { width: 1px; align-self: stretch; background: rgba(255,255,255,.18); margin: 0.55rem 0.35rem; }

.argus-social { display: flex; align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.argus-social a { color: #fff; display: block; line-height: 0; opacity: .9; }
.argus-social a:hover { opacity: 1; color: var(--argus-gold); }
.argus-social .argus-ico { width: 1.1rem; height: 1.1rem; }

/* A solid sage block running the full height of the navy bar, as in the
   reference design - NOT a short pill floating in the middle of it. The
   stretch is what fills the bar; the min-height on .argus-topbar__left is what
   sets that height, so the two must stay in step. */
.argus-topbar__cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  align-self: stretch;
  background: var(--argus-sage);
  color: #fff;
  padding: 0 2rem;
  line-height: 1;
  font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease;
}
.argus-topbar__cta:hover { background: var(--argus-sage-hover); color: #fff; }

@media (max-width: 1000px) {
  /* Wrapped onto its own row there is no sibling to set the height, so the
     block has to carry its own vertical padding. */
  .argus-topbar__inner { flex-wrap: wrap; }
  .argus-topbar__cta { padding: 1.05rem 1.6rem; }
}
@media (max-width: 700px) {
  .argus-topbar { font-size: 0.8rem; }
  .argus-topbar__rule, .argus-social { display: none; }
  .argus-topbar__inner { justify-content: center; text-align: center; gap: .6rem; padding: .5rem 1rem; }

  /* The location and the email sit side by side in a flex row that cannot
     wrap, so the pair sets a 367px min-content width on .argus-topbar__left
     and drags the whole PAGE into horizontal scroll on any handset narrower
     than that - measured at 320, 360 and 375px. Letting the group wrap keeps
     both facts visible and simply stacks them.

     min-height has to go with it: on desktop that 52px floor is what gives the
     bar its height (the CTA stretches to fill it), but once the group wraps
     there is no single row for a floor to describe, and below 1000px the CTA
     already carries its own vertical padding. */
  .argus-topbar__left {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .3rem;
    min-height: 0;
  }
  .argus-topbar__left,
  .argus-topbar__item,
  .argus-topbar__item span { min-width: 0; }
  .argus-topbar__item span { overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------
   2. HEADER BAR + LOGO LOCKUP
--------------------------------------------------------- */
.site-header { background: #fff; box-shadow: 0 2px 18px rgba(14, 26, 73, .07); }
.site-header .inside-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}

/* Real brand mark (WP custom logo). Source art is 408x120 @2x, so a 204px
   display width renders it at native retina density. */
.site-logo { display: block; line-height: 0; }
.site-logo img.header-image {
  width: 204px;
  height: auto;
  max-width: 100%;
}
@media (max-width: 768px) { .site-logo img.header-image { width: 168px; } }

/* Fallback typographic lockup - only rendered if the custom logo is removed. */
.argus-logo__link { display: inline-block; text-decoration: none; line-height: 1; }
.argus-logo__row { display: flex; align-items: center; gap: .5rem; }
.argus-logo__mark { width: 34px; height: 29px; flex: 0 0 auto; }
.argus-logo__name {
  font-family: var(--argus-font-heading);
  font-weight: 800; font-size: 2rem; letter-spacing: .06em;
  color: var(--argus-navy);
}
.argus-logo__sub {
  display: flex; align-items: center; gap: .5rem;
  margin-top: .3rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .3em;
  text-transform: uppercase; color: var(--argus-navy);
}
.argus-logo__sub i { flex: 1 1 auto; height: 1px; background: var(--argus-navy); opacity: .55; }

/* ---------------------------------------------------------
   3. NAV TOOLS (search / panel / call)
--------------------------------------------------------- */
.argus-navtools { display: flex; align-items: center; gap: 1rem; margin-left: 1.25rem; }

.argus-navtool {
  background: none; border: 0; padding: .35rem; cursor: pointer;
  color: var(--argus-navy); line-height: 0; border-radius: 6px;
}
.argus-navtool:hover { color: var(--argus-blue); background: rgba(62,89,246,.08); }
.argus-navtool .argus-ico { width: 1.3rem; height: 1.3rem; }

.argus-call { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.argus-call__badge {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--argus-gold); color: var(--argus-navy);
  display: flex; align-items: center; justify-content: center;
}
.argus-call__badge .argus-ico { width: 1.2rem; height: 1.2rem; }
.argus-call__text { display: flex; flex-direction: column; line-height: 1.25; }
.argus-call__text small { font-size: .72rem; color: var(--argus-slate); }
.argus-call__text strong { font-size: 1.02rem; color: var(--argus-navy); letter-spacing: .01em; }

@media (max-width: 768px) { .argus-navtools { margin-left: .5rem; gap: .5rem; } }

/* ---------------------------------------------------------
   3b. KEEP THE HEADER ROW ON ONE LINE
   Logo + SIX nav items + tools overflow GP's default
   container and wrap onto a second line. Widen the
   container and tighten every element in the row.
--------------------------------------------------------- */
.site-header .inside-header {
  max-width: 1440px;
  flex-wrap: nowrap;
  padding-top: .7rem;
  padding-bottom: .7rem;
  gap: .75rem;
}

/* Logo must not be squeezed by the nav; everything else may shrink. */
.site-header .site-logo { flex: 0 0 auto; }
.site-header .main-navigation { min-width: 0; }
.site-logo img.header-image { width: 172px; }

/* Nav items: single line, tighter tracking than GP's default. */
.main-navigation .main-nav > ul { flex-wrap: nowrap; }
.main-navigation .main-nav > ul > li > a {
  padding-left: .62rem;
  padding-right: .62rem;
  font-size: .92rem;
  white-space: nowrap;
}
/* Room for GP's dropdown chevron on parent items. */
.main-navigation .main-nav > ul > li.menu-item-has-children > a { padding-right: 1.35rem; }

.argus-navtools { margin-left: .6rem; gap: .55rem; }
.argus-call__badge { width: 38px; height: 38px; }
.argus-call__badge .argus-ico { width: 1.05rem; height: 1.05rem; }
.argus-call__text strong { font-size: .92rem; }
.argus-call__text small { font-size: .67rem; }

/* ARGUS_CALL_CLUSTER_ROW_V1
   .argus-call is an <a> inside GeneratePress's nav, and GP styles nav
   anchors as display:block with a multi-class selector that outranks the
   bare `.argus-call { display: inline-flex }` above. The element therefore
   rendered as a block and its two children stacked: the gold badge sat on
   its own line with the phone number underneath, on every viewport wider
   than 1400px (measured at 1401, 1440 and 1500). !important for the same
   reason .menu-toggle below needs it - GP wins on specificity otherwise. */
.argus-navtools .argus-call {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
}
.argus-navtools .argus-call__text { flex: 0 0 auto; }
.argus-navtools .argus-call__text small,
.argus-navtools .argus-call__text strong { white-space: nowrap; }

/* Shed the call number's text label first - it is the widest optional item. */
@media (max-width: 1400px) { .argus-call__text { display: none; } }

@media (max-width: 1250px) {
  .main-navigation .main-nav > ul > li > a { padding-left: .45rem; padding-right: .45rem; font-size: .87rem; }
  .main-navigation .main-nav > ul > li.menu-item-has-children > a { padding-right: 1.15rem; }
  .site-logo img.header-image { width: 150px; }
  .argus-navtools { gap: .4rem; margin-left: .4rem; }
}

/* ---------------------------------------------------------
   3c. MOBILE MENU HANDOVER (1150px - see argus-header.php)
--------------------------------------------------------- */

/* Our slide-in panel button already opens the full primary menu, so hide
   GeneratePress's own toggle - otherwise two hamburgers sit side by side.
   GP prints display:block for it from an inline <style> at equal specificity,
   hence !important. */
.main-navigation .menu-toggle { display: none !important; }

/* Once the nav collapses to the panel button there is room for the phone
   number again, so the label hidden at 1400px comes back. */
@media (max-width: 1250px) and (min-width: 769px) {
  .argus-call__text { display: flex; }
  .site-logo img.header-image { width: 172px; }
}

/* Below GP's own mobile breakpoint the row legitimately stacks again. */
@media (max-width: 768px) {
  .site-header .inside-header { flex-wrap: wrap; }
  .site-logo img.header-image { width: 168px; }
}

/* ---------------------------------------------------------
   4. SEARCH DRAWER + SLIDE-IN PANEL
--------------------------------------------------------- */
.argus-search { background: var(--argus-navy); padding: 1.25rem var(--argus-gutter); }
.argus-search form { display: flex; gap: .5rem; max-width: 640px; }
.argus-search input[type="search"] {
  flex: 1 1 auto; padding: .8em 1.1em; border-radius: var(--argus-radius-pill);
  border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff;
}
.argus-search input[type="search"]::placeholder { color: rgba(255,255,255,.7); }
.argus-search input[type="submit"], .argus-search button {
  background: var(--argus-gold); color: var(--argus-navy); border: 0;
  padding: .8em 1.6em; border-radius: var(--argus-radius-pill); font-weight: 700; cursor: pointer;
}
.argus-search label { flex: 1 1 auto; }
.argus-search .screen-reader-text { position: absolute; left: -9999px; }

.argus-panel { position: fixed; inset: 0; z-index: 9999; background: rgba(14,26,73,.55); }
body.argus-panel-open { overflow: hidden; }
.argus-panel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 88vw);
  background: #fff; padding: 2rem 1.75rem; overflow-y: auto;
  box-shadow: -10px 0 40px rgba(14,26,73,.25);
}
.argus-panel__close {
  background: none; border: 0; cursor: pointer; color: var(--argus-navy);
  line-height: 0; padding: .4rem; margin-bottom: 1rem;
}
.argus-panel__close .argus-ico { width: 1.4rem; height: 1.4rem; }
.argus-panel__menu, .argus-panel__menu ul { list-style: none; margin: 0; padding: 0; }
.argus-panel__menu li a {
  display: block; padding: .7rem 0; color: var(--argus-navy);
  font-weight: 600; border-bottom: 1px solid #EDF0F8; text-decoration: none;
}
.argus-panel__menu li a:hover { color: var(--argus-blue); }
.argus-panel__menu .sub-menu a { padding-left: 1rem; font-weight: 400; font-size: .92rem; }
.argus-panel__contact { display: flex; flex-direction: column; gap: .6rem; margin: 1.5rem 0; }
.argus-panel__contact a { display: inline-flex; align-items: center; gap: .6rem; color: var(--argus-slate); text-decoration: none; }
.argus-panel__cta { width: 100%; justify-content: center; }

/* ---------------------------------------------------------
   5. HERO — photo background + glass form card
--------------------------------------------------------- */
.argus-hero { padding: 5.5rem 0; }
.argus-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 4rem; align-items: center;
  max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
}
.argus-hero__content h1 {
  font-size: clamp(2.1rem, 3.9vw, 3.35rem);
  line-height: 1.16; margin: 0 0 1.4rem; color: #fff;
}
.argus-hero__content p { font-size: 1.06rem; line-height: 1.7; margin: 0 0 2rem; color: #E4E8F8; max-width: 46ch; }
.argus-hero .btn-fused__arrow .argus-ico { width: 1.1rem; height: 1.1rem; }

@media (max-width: 980px) {
  .argus-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .argus-hero { padding: 3.5rem 0; }
}

/* --- glass form card --------------------------------------------------- */
.argus-glass-card h3 {
  text-align: center; font-size: 1.5rem; margin: 0 0 1.5rem; color: #fff;
}
.argus-glass-card .argus-field { margin-bottom: 1rem; }
.argus-glass-card .argus-field--submit { margin-bottom: 0; margin-top: 1.4rem; }

/* CF7 renders its controls inside our .argus-field wrappers. */
.argus-glass-card .wpcf7-form-control-wrap { display: block; }

/* CF7 6.x wraps its hidden inputs in <fieldset class="hidden-fields-container">.
   A bare fieldset carries a default browser border and padding, so it paints an
   empty bordered bar across the top of every form. The fields inside are all
   type="hidden", so the wrapper has nothing to show. */
.wpcf7-form .hidden-fields-container {
  display: none !important;
}
.argus-glass-card input[type="text"],
.argus-glass-card input[type="email"],
.argus-glass-card input[type="tel"],
.argus-glass-card select {
  width: 100%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 10px;
  padding: 1em 1.15em;
  color: #fff;
  font-size: .97rem;
  margin: 0;
  appearance: none; -webkit-appearance: none;
}
.argus-glass-card input::placeholder { color: rgba(255,255,255,.78); }
.argus-glass-card input:focus,
.argus-glass-card select:focus {
  outline: 2px solid var(--argus-gold); outline-offset: 1px;
  background: rgba(255,255,255,.22);
}
/* Native option lists render on the OS layer - keep them readable. */
.argus-glass-card select option { color: var(--argus-navy); background: #fff; }
.argus-glass-card select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}
.argus-glass-card input[type="submit"],
.argus-glass-card .wpcf7-submit {
  width: 100%;
  background: var(--argus-gold);
  color: var(--argus-navy);
  border: 0;
  border-radius: 10px;
  padding: 1.05em 1.5em;
  font-weight: 700; font-size: .95rem;
  letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.argus-glass-card input[type="submit"]:hover { background: var(--argus-gold-hover); }

/* CF7 status + validation messages, legible on the dark card */
.argus-glass-card .wpcf7-not-valid-tip { color: #FFD9D9; font-size: .82rem; margin-top: .35rem; }
.argus-glass-card .wpcf7-response-output {
  color: #fff; border-color: rgba(255,255,255,.45) !important;
  margin: 1rem 0 0; padding: .8em 1em; border-radius: 8px; font-size: .9rem;
}
.argus-glass-card .wpcf7-spinner { filter: brightness(2); }


/* ---------------------------------------------------------
   3d. STICKY HEADER + NAV CTA          ARGUS_STICKY_HEADER_V1
   Client feedback: "Lets make the menu a sticky menu, so we can
   still see the CTA, etc no matter where we scroll."

   position:sticky, NOT fixed. Fixed would take the header out of
   flow and the hero would slide underneath it on first paint.
   Checked before writing this: no ancestor of .site-header has
   overflow, transform, filter or perspective set - the only
   overflow:hidden rules in style.css are .btn-fused and
   .argus-card - so sticky actually engages.

   The navy .argus-topbar is deliberately NOT sticky. It is
   utility text (address, email, social), and letting it scroll
   away returns ~52px of vertical space on a phone. The CTA the
   feedback wants kept in view now lives in this row instead.

   z-index 500 sits above page content but below .argus-panel
   (9999), so the off-canvas menu still covers the header.
--------------------------------------------------------- */
/* `body .site-header`, not `.site-header`: GeneratePress ships
   `.site-header{position:relative}` in assets/css/main.min.css, which the
   theme enqueues AFTER this file (position 9 vs 7 in <head>). Same
   specificity means the later rule wins, so a bare .site-header here was
   silently overwritten and the header measured position:relative. The
   descendant selector is (0,1,1) and outranks GP's (0,1,0) at any order. */
body .site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: #fff;
}

/* The WP admin bar is fixed at >=783px, 46px tall to 782px, and scrolls
   away entirely below 600px - so the offset has to change three times. */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .site-header { top: 0; } }

/* Any in-page jump target must clear the sticky header, or the heading it
   lands on sits behind it. Pages here use anchors like "Jump to the full
   version table" and "Where GP usually breaks". */
[id] { scroll-margin-top: 104px; }

/* The Free Assessment button that replaced the phone cluster.
   .argus-navcta is an <a> inside GeneratePress's nav, and GP styles nav
   anchors display:block with a multi-class selector that outranks a bare
   class - the same trap that made .argus-call stack its badge above its
   label. Hence the scoped selector and !important. */
.argus-navtools .argus-navcta {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  background: var(--argus-gold);
  color: var(--argus-navy);
  font-family: var(--argus-font-heading, inherit);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  padding: .78rem 1.15rem;
  border-radius: var(--argus-radius-pill);
  white-space: nowrap;
  text-decoration: none;
}
.argus-navtools .argus-navcta:hover,
.argus-navtools .argus-navcta:focus {
  background: var(--argus-gold-hover);
  color: var(--argus-navy);
}
.argus-navtools .argus-navcta .argus-ico { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* Phone widths: the label is the whole point of the button, so the icon is
   what gets dropped first, then the padding tightens. */
@media (max-width: 700px) {
  .argus-navtools .argus-navcta { font-size: .72rem; padding: .68rem .85rem; gap: .35rem; }
  .argus-navtools .argus-navcta .argus-ico { display: none; }
}
@media (max-width: 430px) {
  .argus-navtools .argus-navcta { font-size: .67rem; padding: .62rem .7rem; }
}


/* ---------------------------------------------------------
   3e. PHONE HEADER STAYS ON ONE ROW   ARGUS_MOBILE_ONE_ROW_V1
   The header is sticky now, so a wrapped two-row header would
   hold 128px of a ~660px phone screen for the whole visit.
   One row brings that to ~64px. The logo is the elastic item;
   the CTA is the thing the client asked to keep visible, so it
   is the last thing that gives.
--------------------------------------------------------- */
@media (max-width: 768px) {
  .site-header .inside-header {
    flex-wrap: nowrap;
    gap: .5rem;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
  .site-header .site-logo { flex: 0 1 auto; min-width: 0; }
  .site-logo img.header-image { width: 140px; }
  .argus-navtools { margin-left: auto; gap: .4rem; flex: 0 0 auto; }
}

@media (max-width: 430px) {
  .site-logo img.header-image { width: 124px; }
  .argus-navtools { gap: .3rem; }
  .argus-navtools .argus-navcta { font-size: .64rem; padding: .58rem .66rem; }
}

/* Below ~360px there is no longer room for the search control alongside the
   logo, the menu button and the CTA. Search is the least-used of the three on
   a phone and the only one with no second entry point cost - the menu button
   still opens the full navigation, and the CTA is the point of the exercise. */
@media (max-width: 360px) {
  .site-logo img.header-image { width: 112px; }
  .argus-navtools [data-argus-toggle="search"] { display: none; }
}


/* Phone gutters: 30px each side is a desktop value that left the 375px header
   7px short of fitting on one row (logo 124 + gap 8 + tools 190 = 322 against
   315 usable). 16px gutters give 343. ARGUS_PHONE_GUTTER_V1 */
@media (max-width: 480px) {
  .site-header .inside-header {
    padding-left: 16px;
    padding-right: 16px;
  }
}