/* =========================================================================
   HEADER COMPONENT STYLES
   Styles for partials/header.html (the <header id="siteHeader"> markup
   loaded on every page by js/header.js).

   NOTE: these rules were extracted from css/site-styles.css so the header
   can be reused/loaded independently. They still depend on the shared
   design tokens (--blue-*, --cyan-*, --red-*, --ink, --line, --ease, etc.) and a couple of
   generic helpers (.container, .btn) defined in css/site-styles.css, so
   keep that stylesheet linked on every page as well:

     <link rel="stylesheet" href="css/site-styles.css">
     <link rel="stylesheet" href="css/header.css">

   The rules below are also still present inside site-styles.css (left there
   on purpose so nothing on the live pages breaks). The duplication is
   harmless — identical rules simply overwrite themselves — so you can
   remove them from site-styles.css later once every page has been switched
   over to the shared header include, if you'd like a single source of
   truth.
   ========================================================================= */

      /* ---------------- HEADER ---------------- */
      /* Fixed (not sticky) so the header can overlay the hero banner instead
         of sitting in its own block above it — the hero image extends
         behind the whole header area, exactly like the reference site.
         Pages that don't have a full-bleed hero (anything without
         body.has-hero) get body padding equal to the header's real height
         (see the rule near the bottom of this file) so content is never
         hidden underneath — the visible result on those pages is identical
         to the old sticky-in-flow layout, just implemented with `fixed` so
         hero pages can opt out of that reserved space instead. */
      header.site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 900;
        background: transparent;
        /* iPhone notch / landscape safe area (needs viewport-fit=cover) */
        padding-top: env(safe-area-inset-top, 0px);
        border-bottom: 1px solid rgba(61, 148, 214, 0.16);
        transition:
          box-shadow 0.35s var(--ease),
          border-color 0.35s var(--ease);
        /* Smooth page-load entrance for the header itself, mirroring the
           hero content's own fade/rise-in (see heroFadeUp in
           site-styles.css) so both pieces arrive together. */
        /* `backwards` (not `both`): with `both` the final transform stays applied
           forever, which makes the header the containing block of the fixed
           mobile nav (Safari especially) and breaks its height/position. */
        animation: headerFadeIn 0.8s var(--ease) backwards;
      }
      @keyframes headerFadeIn {
        from {
          opacity: 0;
          transform: translateY(-14px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      /* The frosted-glass effect lives on a ::before layer rather than on
         header.site-header itself. backdrop-filter (like transform/filter)
         creates a new containing block for any position:fixed descendant —
         if it sat on the header, the mobile nav panel (which is fixed and
         lives inside the header markup) would be sized/positioned relative
         to the header's own small box instead of the viewport, which is
         what caused the mobile nav height to look broken. Putting the
         filter on a non-ancestor pseudo-element keeps the same visual
         effect without that side effect. */
      header.site-header::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        transition:
          background 0.45s var(--ease),
          backdrop-filter 0.45s var(--ease);
      }
      header.site-header.scrolled {
        box-shadow: 0 12px 30px -20px rgba(40, 72, 136, 0.35);
      }
      header.site-header.scrolled::before {
        background: rgba(255, 255, 255, 0.9);
      }
      @media (prefers-reduced-motion: reduce) {
        header.site-header {
          animation: none;
        }
      }

      /* ---- Hero-overlay mode ----
         On pages with a full-bleed hero (body.has-hero, set on index.html),
         the header starts fully transparent with light text so the hero
         image reads through it uninterrupted — contrast comes from the
         hero's own top-down darkening gradient (.hero-overlay). Once the
         page scrolls (the same .scrolled class used above), it smoothly
         crossfades into the standard frosted, dark-text header so the site
         still gets a clean, readable sticky bar for the rest of the page. */
      body.has-hero header.site-header:not(.scrolled) {
        border-bottom-color: transparent;
      }
      body.has-hero header.site-header:not(.scrolled)::before {
        background: rgba(255, 255, 255, 0);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }
      body.has-hero header.site-header:not(.scrolled) .brand,
      body.has-hero header.site-header:not(.scrolled) .nav-link {
        color: #fff;
        text-shadow: 0 2px 10px rgba(30, 20, 44, 0.45);
      }
      body.has-hero header.site-header:not(.scrolled) .brand small {
        color: rgba(255, 255, 255, 0.78);
      }
      body.has-hero header.site-header:not(.scrolled) .nav-link.active,
      body.has-hero header.site-header:not(.scrolled) .nav-link[aria-current="page"] {
        color: #fff;
      }
      body.has-hero header.site-header:not(.scrolled) .icon-btn {
        border-color: rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
      }
      body.has-hero header.site-header:not(.scrolled) .icon-btn:hover {
        background: rgba(255, 255, 255, 0.24);
      }
      /* Small frosted chip behind the NDIS badge so it stays legible
         whatever hero image sits behind it (some crops of the badge art are
         transparent). */
      body.has-hero header.site-header:not(.scrolled) .ndis-badge {
        background: rgba(255, 255, 255, 0.92);
        border-radius: 8px;
        padding: 4px 6px;
        transition: background 0.35s var(--ease);
      }
      body.has-hero header.site-header:not(.scrolled) .hamburger {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.55);
      }
      body.has-hero header.site-header:not(.scrolled) .hamburger span {
        background: #fff;
      }
      @media (prefers-reduced-motion: reduce) {
        body.has-hero header.site-header:not(.scrolled) .ndis-badge {
          transition: none;
        }
      }
      /* header.site-header used to be `position: sticky`, which reserved its
         own space in normal flow. Now that it's `fixed` (needed so it can
         overlay the hero on body.has-hero pages), every other page has to
         reserve that same space itself so content doesn't start underneath
         it — same visual result as before, just via padding instead of
         flow. --header-height is kept in sync with the header's real
         rendered height by js/header.js; 74px matches that script's own
         fallback for the split-second before it runs. Hero pages skip this
         because .hero-inner already reserves room for the overlaid header
         (see the HERO rules in site-styles.css). */
      body:not(.has-hero) {
        padding-top: var(--header-height, 74px);
      }
      .nav-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 0;
        gap: 1rem;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-width: 0;
        flex-shrink: 1;
        font-weight: 800;
        font-size: 1.2rem;
        color: var(--blue-navy);
        transition:
          color 0.35s var(--ease),
          text-shadow 0.35s var(--ease);
      }
      .brand .logo-mark {
        width: 44px;
        height: 44px;
        display: block;
        object-fit: contain;
        flex-shrink: 0;
        filter: drop-shadow(0 6px 14px rgba(40, 72, 136, 0.35));
      }
      .brand small {
        display: block;
        font-weight: 600;
        font-size: 0.62rem;
        color: var(--blue-mid);
        letter-spacing: 0.03em;
        transition: color 0.35s var(--ease);
      }
      .ndis-badge {
        width: 92px;
        height: auto;
        flex-shrink: 0;
        transition: background 0.35s var(--ease);
      }

      nav.main-nav > ul {
        display: flex;
        align-items: center;
        gap: 2.2rem;
      }
      .nav-link {
        position: relative;
        display: inline-block;
        padding: 0.6rem 0;
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--ink);
        /* Short ease-out so the active lift/colour glides in rather than snapping. */
        transition:
          transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
          color 0.3s ease-out;
      }
      .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 0%;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--cyan-strong), var(--blue-deep));
        transition: width 0.35s var(--ease);
      }
      .nav-link:hover::after,
      .nav-link.active::after {
        width: 100%;
      }
      /* Active page: brand blue + a slight upward lift. The class is set by
         js/header.js from the current page's filename each time the header
         loads, so it is there on every page (including direct opens and
         refreshes). */
      .nav-link.active,
      .nav-link[aria-current="page"] {
        color: var(--blue-mid);
        transform: translateY(-2px);
      }
      @media (prefers-reduced-motion: reduce) {
        .nav-link,
        .nav-link::after {
          transition: none;
        }
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 1.1rem;
      }
      .icon-btn {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--line);
        background: #fff;
        color: var(--blue-deep);
        transition:
          border-color 0.25s,
          transform 0.25s,
          background 0.25s;
      }
      .icon-btn:hover {
        border-color: var(--blue-mid);
        transform: translateY(-2px);
        background: var(--sky-50);
      }

      .hamburger {
        display: none;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1.5px solid var(--line);
        background: #fff;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        transition:
          background 0.35s var(--ease),
          border-color 0.35s var(--ease);
      }
      .hamburger span {
        width: 20px;
        height: 2px;
        background: var(--blue-deep);
        border-radius: 2px;
        transition:
          transform 0.3s var(--ease),
          opacity 0.3s var(--ease),
          background 0.35s var(--ease);
      }
      .hamburger.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hamburger.active span:nth-child(2) {
        opacity: 0;
      }
      .hamburger.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      @media (max-width: 860px) {
        nav.main-nav {
          position: fixed;
          /* Falls back to 74px if JS hasn't measured the header yet, but is
             kept in sync with the header's real rendered height via
             --header-height (set in the script at the bottom of the page)
             so the mobile menu never starts too high or leaves a gap. */
          top: var(--header-height, 74px);
          left: 0;
          right: 0;
          bottom: 0;
          background: #fff;
          transform: translateX(100%);
          visibility: hidden;
          transition:
            transform 0.4s var(--ease),
            visibility 0s linear 0.4s;
          padding: 1.5rem 8% calc(2rem + env(safe-area-inset-bottom, 0px));
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
          z-index: 800;
        }
        nav.main-nav.open {
          transform: translateX(0);
          visibility: visible;
          transition-delay: 0s;
        }
        nav.main-nav > ul {
          flex-direction: column;
          align-items: flex-start;
          gap: 0;
          width: 100%;
        }
        nav.main-nav > ul > li {
          width: 100%;
          border-bottom: 1px solid var(--line);
        }
        .nav-link {
          padding: 1rem 0;
          width: 100%;
        }
        .hamburger {
          display: flex;
        }
        .header-actions .search-desktop {
          display: none;
        }
        /* Hide the header's "Make an Enquiry" button on mobile so the header
           row stays a single, consistent height (it stayed available via the
           CTA banner and footer). */
        .header-actions .header-enquiry-btn {
          display: none;
        }
        .header-actions {
          gap: 0.6rem;
        }
        .header-actions .ndis-badge {
          width: 64px;
        }
      }

      @media (max-width: 380px) {
        .header-actions .ndis-badge {
          width: 52px;
        }
        .brand span {
          font-size: 1rem;
        }
      }

      /* ---- Services nav item + caret ---- */
      li.has-dropdown {
        position: relative;
      }
      .nav-link .caret {
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        display: inline-block;
        transform: rotate(45deg);
        margin-left: 0.4rem;
        margin-bottom: 1px;
        transition: transform 0.3s var(--ease);
      }
      li.has-dropdown:hover .caret,
      li.has-dropdown.open .caret {
        transform: rotate(-135deg);
        margin-bottom: -3px;
      }

      /* ---- Mega dropdown panel ---- */
      /* .mega-panel is a transparent hover "bridge" that touches the trigger link
     with no gap, so moving the cursor down into it never breaks :hover.
     The visible card (background, border, shadow, gap) lives on .mega-panel-inner. */
      .mega-panel {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: min(720px, 82vw);
        padding-top: 16px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
          opacity 0.3s var(--ease),
          visibility 0.3s;
        z-index: 60;
      }
      li.has-dropdown:hover .mega-panel,
      li.has-dropdown.open .mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
      }
      .mega-panel-inner {
        position: relative;
        background: #fff;
        border-radius: var(--radius-lg);
        box-shadow: 0 32px 60px -20px rgba(46, 33, 64, 0.35);
        border: 1px solid var(--line);
        padding: 1.6rem;
        transform: translateY(-10px);
        transition: transform 0.3s var(--ease);
      }
      li.has-dropdown:hover .mega-panel-inner,
      li.has-dropdown.open .mega-panel-inner {
        transform: translateY(0);
      }
      .mega-panel-inner::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 16px;
        height: 16px;
        background: #fff;
        border-left: 1px solid var(--line);
        border-top: 1px solid var(--line);
      }
      .mega-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        margin-bottom: 1rem;
        padding-bottom: 0.9rem;
        border-bottom: 1px solid var(--line);
      }
      .mega-head h4 {
        margin: 0;
        font-size: 1.02rem;
      }
      .mega-head a {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--blue-mid);
      }
      .mega-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.3rem 0.9rem;
      }
      .mega-grid a {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        padding: 0.6rem 0.55rem;
        border-radius: 10px;
        font-size: 0.86rem;
        font-weight: 600;
        color: var(--ink);
        transition:
          background 0.25s var(--ease),
          color 0.25s var(--ease),
          transform 0.25s var(--ease);
      }
      .mega-grid a .dot {
        width: 8px;
        height: 8px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--sky-200);
        transition:
          background 0.25s var(--ease),
          transform 0.25s var(--ease);
      }
      .mega-grid a:hover {
        background: var(--sky-50);
        color: var(--blue-mid);
        transform: translateX(3px);
      }
      .mega-grid a:hover .dot {
        background: var(--cyan-strong);
        transform: scale(1.3);
      }

      @media (max-width: 860px) {
        .mega-panel {
          position: static;
          transform: none;
          width: 100%;
          padding-top: 0;
          visibility: visible;
          opacity: 1;
          pointer-events: auto;
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.4s var(--ease);
        }
        .mega-panel-inner {
          box-shadow: none;
          border: none;
          transform: none;
          padding: 0.2rem 0 1rem;
        }
        .mega-panel-inner::before {
          display: none;
        }
        li.has-dropdown.open .mega-panel {
          max-height: 900px;
        }
        .mega-grid {
          grid-template-columns: 1fr;
        }
      }

      /* decorative leaves */


/* ---- Extra header-related fragments pulled from the shared
   "RESPONSIVE / TOUCH / DECORATIVE ENHANCEMENTS" section of
   site-styles.css (that section mixes many components together, so these
   were picked out individually rather than copied as one block). ---- */

.hamburger,
.nav-link,
.mega-grid a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.icon-btn:active,
.hamburger:active {
  transform: scale(0.9);
}

@media (hover: none) {
  .brand:hover .logo-mark {
    transform: none;
    box-shadow: 0 8px 18px -6px rgba(40, 72, 136, 0.5);
  }
}

@media (max-width: 600px) {
  .header-actions {
    gap: 0.7rem;
  }
}

@media (min-width: 861px) and (max-width: 1180px) {
  .mega-panel {
    left: 0;
    transform: none;
    width: min(640px, 64vw);
  }
}

@media (max-width: 400px) {
  .brand {
    font-size: 1.05rem;
  }
  .brand .logo-mark {
    width: 38px;
    height: 38px;
  }
}


      /* =====================================================================
         INNER-PAGE HERO SPACING
         The fixed header no longer takes up space in the page flow, so
         header.css used to reserve it with body padding — which left a plain
         white strip above each hero's coloured background and then stacked the
         hero's own top padding on top of that (a big gap).

         For inner pages (About, Careers, Contact, Referrals and every service
         page — anything whose first block in <main> is .acc-hero, .about-hero
         or .hero) we instead drop the body padding and let the hero's own
         background run up behind the frosted header. The hero pushes its
         content down by the header's real height (--header-height, kept in
         sync by js/header.js) plus one consistent breathing-room gap.
         The home page (.home-hero) is untouched.
         ===================================================================== */
      :root {
        --hero-gap-top: 44px;
      }
      body:has(> main > :is(.acc-hero, .about-hero, .hero):first-child) {
        padding-top: 0;
      }
      main > :is(.acc-hero, .about-hero, .hero):first-child {
        padding-top: calc(var(--header-height, 74px) + var(--hero-gap-top));
      }
      @media (max-width: 860px) {
        :root {
          --hero-gap-top: 32px;
        }
      }


      /* =====================================================================
         RESPONSIVE / SAFARI FIXES
         ===================================================================== */
      html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      /* Logo: sized by HEIGHT (width follows the artwork's ratio) so the
         header height is the same before and after the image loads, and
         --header-height is always measured correctly. Tweak --logo-h to
         make the logo bigger/smaller. */
      :root {
        --logo-h: 56px;
      }
      .brand img {
        display: block;
        height: var(--logo-h);
        width: auto;
        max-width: 100%;
        object-fit: contain;
      }
      .header-actions {
        flex-shrink: 0;
      }
      .nav-link {
        white-space: nowrap;
      }

      /* MacBook / small laptop / iPad landscape: keep one row, no overflow */
      @media (min-width: 861px) and (max-width: 1180px) {
        :root {
          --logo-h: 48px;
        }
        nav.main-nav > ul {
          gap: clamp(0.9rem, 2vw, 1.6rem);
        }
        .nav-link {
          font-size: 0.9rem;
        }
        .ndis-badge {
          width: 76px;
        }
      }

      /* Phones */
      @media (max-width: 860px) {
        :root {
          --logo-h: 44px;
        }
        .nav-wrap {
          padding: 0.65rem 0;
        }

        /* Menu open: solid header + dark icons/links (on hero pages the
           transparent-header rules made them white-on-white) */
        header.site-header:has(nav.main-nav.open)::before {
          background: #fff;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }
        header.site-header:has(nav.main-nav.open) {
          border-bottom-color: var(--line);
        }
        body.has-hero header.site-header:not(.scrolled) nav.main-nav .nav-link {
          color: var(--ink);
          text-shadow: none;
        }
        body.has-hero header.site-header:not(.scrolled) nav.main-nav .nav-link.active,
        body.has-hero header.site-header:not(.scrolled) nav.main-nav .nav-link[aria-current="page"] {
          color: var(--blue-mid);
        }
        body.has-hero header.site-header:not(.scrolled):has(nav.main-nav.open) .hamburger {
          background: #fff;
          border-color: var(--line);
        }
        body.has-hero header.site-header:not(.scrolled):has(nav.main-nav.open) .hamburger span {
          background: var(--blue-deep);
        }

        /* stop the page scrolling behind the open menu */
        body:has(nav.main-nav.open) {
          overflow: hidden;
        }
      }

      @media (max-width: 380px) {
        :root {
          --logo-h: 38px;
        }
      }

      /* =====================================================================
         HOME HERO: tighter gap between text and image
         (selectors taken from the .home-hero / .hero-inner names used above;
         if the gap doesn't change, the class names in index.html differ)
         ===================================================================== */
      .home-hero .hero-inner {
        gap: clamp(1rem, 2.5vw, 2rem);
        justify-content: center;
        align-items: center;
      }
      .home-hero .hero-inner > * {
        flex: 0 1 auto;
        min-width: 0;
      }
      .home-hero .hero-inner img {
        max-width: 100%;
        height: auto;
        display: block;
      }
      @media (max-width: 860px) {
        .home-hero .hero-inner {
          flex-direction: column;
          gap: 1rem;
        }
      }