/* ==========================================================================
   WSKF Australia — header.css (Version 2)
   Floating bar retained. Dropdowns rebuilt as ONE unified panel system:
   every panel shares the same left edge, the same internal 12-column grid,
   the same padding, the same red indicator and the same utility row.
   Only the column SPAN changes between small / medium / large menus, so the
   panels read as members of one family instead of arbitrary boxes.
   ========================================================================== */

.header{ position:fixed; top:0; left:0; right:0; z-index:200; padding:14px var(--gutter) 0; }
.header__bar{
  position:relative; max-width:var(--w-wide); margin-inline:auto;
  min-height:var(--header-h); display:flex; align-items:center; gap:1rem;
  padding:8px 8px 8px 16px;
  background:rgba(244,243,241,.92);
  -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(0,0,0,.06); border-radius:6px;
  box-shadow:0 10px 34px rgba(0,0,0,.22);
  transition:background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.header.stuck .header__bar{ background:var(--paper); box-shadow:0 12px 32px rgba(0,0,0,.3); }

.brand{ display:flex; align-items:center; gap:.7rem; min-height:46px; text-decoration:none; color:var(--ink); flex:none; }
.brand__mark{ width:46px; height:46px; border-radius:50%; background:var(--white); padding:2px; box-shadow:0 1px 5px rgba(0,0,0,.22); }
.brand__mark img{ width:100%; height:100%; border-radius:50%; }
.brand__text{ display:grid; line-height:1; }
.brand__name{ font-family:var(--display); font-weight:700; font-size:.98rem; letter-spacing:.02em; text-transform:uppercase; }
.brand__sub{ font-family:var(--display); font-weight:500; font-size:.56rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
@media (max-width:1180px){ .brand__sub{ display:none; } }
@media (min-width:1421px){ .brand__sub{ display:block; } }
@media (max-width:400px){ .brand__name{ font-size:1.12rem; } .brand__mark{ width:38px; height:38px; } }

.nav{ display:none; }
.nav__list{ display:flex; align-items:center; gap:.1rem; margin:0; }
.nav__item{ position:static; }
.nav__link,.nav__toggle{
  font-family:var(--display); font-weight:600; font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  display:inline-flex; align-items:center; height:46px; padding:0 .5rem;
  border:0; background:none; cursor:pointer; border-radius:3px; white-space:nowrap;
}
.nav__group{ display:flex; align-items:center; border-radius:3px; position:relative; }
.nav__group::after{
  content:""; position:absolute; left:.55rem; right:.4rem; bottom:6px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease);
}
.nav__group:hover::after,.nav__group:focus-within::after,
.nav__group:has(.nav__toggle[aria-expanded="true"])::after{ transform:scaleX(1); }
.nav__link:hover{ color:var(--red); }
.nav__toggle{ padding:0 .35rem 0 .1rem; }
.nav__toggle .i{ width:.68em; height:.68em; transition:transform .25s var(--ease); }
.nav__toggle[aria-expanded="true"] .i{ transform:rotate(180deg); }
.nav__item--current > .nav__group > .nav__link{ color:var(--red); }

/* -------- Unified panel system --------------------------------------------
   All panels are absolutely positioned against .header__bar, share one left
   edge and one width band, and use a 12-column internal grid.               */
.panel{
  position:absolute; top:calc(100% + 10px); left:0; right:0;
  z-index:30; overflow:hidden;
  background:var(--paper);
  border:1px solid rgba(0,0,0,.07); border-radius:6px;
  box-shadow:0 26px 64px rgba(0,0,0,.28);
}
.panel[hidden]{ display:none !important; }
.panel__top{ height:3px; background:var(--red); }
.panel__grid{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 clamp(1.5rem,2.6vw,3rem);
  padding:1.6rem clamp(1.4rem,2.4vw,2.4rem) 0;
  align-items:start;
}
/* column spans — the ONLY thing that varies between menu sizes */
.panel--sm .panel__grid{ grid-template-columns:repeat(12,minmax(0,1fr)); }
.sp-3{ grid-column:span 3; } .sp-4{ grid-column:span 4; }
.sp-5{ grid-column:span 5; } .sp-6{ grid-column:span 6; }
.sp-7{ grid-column:span 7; } .sp-8{ grid-column:span 8; }

.pgroup{ min-width:0; padding-bottom:1.5rem; }
.pgroup + .pgroup{ margin-top:1.3rem; }
.pgroup__title{
  font-family:var(--display); font-weight:700; font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:.55rem; margin-bottom:.5rem; border-bottom:1px solid rgba(162,161,161,.6);
}
.pgroup__title a{ text-decoration:none; }
.pgroup__title a:hover{ color:var(--red); }
.plinks{ display:grid; }
.plinks a{
  display:block; text-decoration:none; color:var(--ink);
  font-size:.83rem; line-height:1.3; padding:.5rem .55rem; margin-left:-.55rem;
  border-radius:3px; min-height:44px; display:flex; align-items:center;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.plinks a:hover{ background:var(--white); color:var(--red); }
.plinks--sub{ margin-left:.6rem; padding-left:.75rem; border-left:1px solid rgba(0,0,0,.15); }
.plinks--sub a{ font-size:.78rem; color:var(--muted); min-height:40px; padding-block:.4rem; }
.plinks--sub a:hover{ color:var(--red); }

/* Feature panel — gives small menus a reason to exist at the shared width,
   instead of a narrow orphan box or a stretched empty one. */
.pfeature{
  align-self:stretch; margin-bottom:0; position:relative;
  border-radius:4px; overflow:hidden; background:var(--ink);
  min-height:210px; display:flex; flex-direction:column; justify-content:flex-end;
}
.pfeature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; }
.pfeature__body{ position:relative; padding:1.1rem 1.2rem; background:linear-gradient(to top,rgba(0,0,0,.94) 30%,rgba(0,0,0,0)); }
.pfeature__body p{ color:var(--on-ink); font-size:.85rem; line-height:1.45; margin-top:.35rem; }
.pfeature__body .display--md{ color:var(--paper); font-size:1.25rem; }

.panel__foot{
  display:flex; flex-wrap:wrap; gap:.9rem 1.8rem; align-items:center;
  padding:.9rem clamp(1.4rem,2.4vw,2.4rem);
  background:var(--paper-2); border-top:1px solid rgba(0,0,0,.09);
}
.panel__foot .ln{ font-size:.74rem; }
.panel__foot .pf-note{ margin-left:auto; font-size:.83rem; color:var(--muted); }
@media (max-width:1250px){ .panel__foot .pf-note{ display:none; } }

.header__actions{ margin-left:auto; display:flex; align-items:center; gap:.5rem; flex:none; }
.header__phone{
  display:none; font-family:var(--display); font-weight:700; font-size:.78rem;
  letter-spacing:.05em; text-transform:uppercase; text-decoration:none; color:var(--ink);
  align-items:center; gap:.4rem; height:46px; padding:0 .7rem; border-radius:3px; white-space:nowrap;
}
.header__phone:hover{ background:rgba(0,0,0,.055); color:var(--red); }
.header__phone .i{ width:.92em; height:.92em; color:var(--red); }
.menu-btn{
  display:inline-flex; align-items:center; gap:.45rem; min-height:46px; padding:0 1rem;
  font-family:var(--display); font-weight:600; font-size:.78rem; letter-spacing:.09em;
  text-transform:uppercase; background:var(--ink); color:var(--paper);
  border:0; border-radius:3px; cursor:pointer;
}
.menu-btn .i{ width:1.15em; height:1.15em; }
/* V2.6 — a true three-zone navbar. The nav is geometrically centred in the
   whole bar, not merely placed after the brand, so the old dead space before
   the Enquire button disappears. */
@media (min-width:1280px){
  .header__bar{
    display:grid; grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
    align-items:center; column-gap:1rem;
    /* Symmetric inline padding, or the centred zone lands off the bar's own
       centre by the difference between the two paddings. */
    padding:8px 12px;
  }
  .brand{ justify-self:start; }
  .nav{ display:block; margin-left:0; justify-self:center; }
  .header__actions{ justify-self:end; }
  .menu-btn{ display:none; }
}
/* The enrol label already carries the phone number, so the standalone phone
   item is the first thing to go at intermediate desktop widths. */
@media (min-width:1500px){ .header__phone{ display:inline-flex; } }
/* 1280-1420: tighten gaps modestly rather than shrinking the labels. */
@media (min-width:1280px) and (max-width:1440px){
  .nav__link,.nav__toggle{ padding-inline:.3rem; }
  .nav__toggle{ padding-right:.18rem; }
  .brand__sub{ display:none; }
  .header__bar{ column-gap:.6rem; grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr); }
}

/* -------- Mobile drawer -------- */
.drawer{ position:fixed; inset:0; z-index:300; display:grid; grid-template-columns:1fr min(430px,100%); }
.drawer[hidden]{ display:none !important; }
.drawer__scrim{ background:rgba(0,0,0,.6); border:0; padding:0; cursor:pointer; }
.drawer__sheet{ background:var(--paper); display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; box-shadow:-16px 0 44px rgba(0,0,0,.35); }
@media (max-width:480px){ .drawer{ grid-template-columns:0 1fr; } }
.drawer__top{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:.75rem; padding:.85rem 1rem; background:var(--paper); border-bottom:1px solid rgba(162,161,161,.6); }
.drawer__top .brand__name{ font-size:1.14rem; }
.drawer__close{ margin-left:auto; width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(0,0,0,.2); background:var(--white); border-radius:50%; cursor:pointer; }
.drawer__close .i{ width:1.25rem; height:1.25rem; }
.drawer__body{ padding:.5rem 1rem 1.5rem; }
.dnav{ display:grid; }
.dnav__row{ display:flex; align-items:stretch; border-bottom:1px solid rgba(162,161,161,.6); }
.dnav__link{ flex:1; min-width:0; display:flex; align-items:center; min-height:56px; padding:.55rem .25rem; font-family:var(--display); font-weight:700; font-size:.98rem; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--ink); }
.dnav__disc{ flex:none; width:56px; display:grid; place-items:center; background:none; border:0; border-left:1px solid rgba(162,161,161,.6); cursor:pointer; color:var(--ink); }
.dnav__disc .i{ width:1.05rem; height:1.05rem; transition:transform .22s var(--ease); }
.dnav__disc[aria-expanded="true"] .i{ transform:rotate(180deg); }
.dnav__disc[aria-expanded="true"]{ color:var(--red); }
.dnav__sub{ padding:.35rem 0 .9rem .85rem; border-bottom:1px solid rgba(162,161,161,.6); }
.dnav__sub[hidden]{ display:none !important; }
.dnav__sub a{ display:flex; align-items:center; text-decoration:none; color:var(--ink); font-size:.88rem; line-height:1.35; padding:.6rem .5rem; border-radius:3px; min-height:46px; }
.dnav__sub a:hover,.dnav__sub a:focus-visible{ background:var(--white); color:var(--red); }
.dnav__subtitle{ font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); margin:.9rem 0 .15rem .5rem; }
.dnav__sub--deep{ margin-left:.55rem; padding-left:.75rem; border-left:1px solid rgba(0,0,0,.15); border-bottom:0; padding-bottom:.2rem; }
.dnav__sub--deep a{ font-size:.93rem; color:var(--muted); }
.drawer__cta{ display:grid; gap:.6rem; margin-top:1.5rem; }
.drawer__note{ font-size:.86rem; color:var(--muted); margin-top:.9rem; }
.drawer__social{ display:flex; gap:1.1rem; margin-top:1rem; }
.drawer__social a{ font-family:var(--display); font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--muted); min-height:46px; display:inline-flex; align-items:center; }
.drawer__social a:hover{ color:var(--red); }
body.locked{ overflow:hidden; }

/* Small screens: the header keeps brand + Menu only. Enquire is available in
   the hero, in the drawer and in the sticky bottom bar, so a third copy here
   just forces the bar to overflow. */
@media (max-width:899px){
  .header__actions .btn--red{ display:none; }
  .header__bar{ padding-left:12px; }
}

/* Very narrow / heavily zoomed: the bar must stay inside the viewport. */
@media (max-width:430px){
  .brand__name{ font-size:.86rem; }
  .brand__mark{ width:36px; height:36px; }
  .menu-btn{ padding:0 .75rem; font-size:.72rem; }
  .header{ padding-inline:.65rem; }
}
.header__bar{ flex-wrap:wrap; row-gap:.4rem; min-width:0; }
.brand{ min-width:0; }
.brand__text{ min-width:0; overflow:hidden; }
.brand__name{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* V2.4 — below the desktop nav breakpoint the bar is brand + menu only, so it
   must never wrap into a second row. The brand name truncates instead. */
@media (max-width:1279px){
  .header__bar{ flex-wrap:nowrap; row-gap:0; }
  .brand__name{ font-size:.92rem; }
  .brand{ flex:1 1 auto; min-width:0; }
  .header__actions{ flex:none; margin-left:auto; }
}