/* ============================================================================
   Outer Reef 2026 redesign — global header / mega menu / footer
   Loaded after the generated theme stylesheet (see StyleSheets.cshtml).

   On !important: the uSkinned theme targets the nav through very high-specificity
   selectors (body:not(.header-03-lg):not(...)x8 nav.main ul>li:hover>ul). Matching
   that specificity here would mean copying the whole :not() chain, which breaks the
   moment a header layout changes. !important is used only on the handful of layout
   properties that genuinely collide, and only inside the .has-mega / .mega scope.
   ========================================================================== */

:root{
  --or26-navy:#0B2436;
  --or26-navy-2:#123249;
  --or26-teal:#1D6B6B;
  --or26-coral:#ff9933;
  --or26-sand:#F3ECDD;
  --or26-ink:#16232B;
  --or26-muted:#5B6670;
  --or26-line:#DCD3BE;
}

/* ============================================================================
   MEGA MENU — desktop only (theme header breakpoint is 1300px)
   ========================================================================== */
@media screen and (min-width:1300px){

  /* The panel is positioned against the nav element so it can never overflow
     the viewport, regardless of where the logo pushes the nav to. */
  nav.main{ position:relative; }

  nav.main > ul > li.has-mega{ position:static !important; }

  nav.main > ul > li.has-mega > ul.mega{
    left:0 !important;
    right:auto !important;
    /* wider than the nav itself so link text doesn't wrap; capped against the
       viewport so it can never overflow at the 1300px breakpoint */
    width:min(880px, calc(100vw - 48px)) !important;
    padding:26px 28px !important;
    background:#fff !important;
    border-radius:10px !important;
    box-shadow:0 18px 44px rgba(0,0,0,.20) !important;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:4px 26px;
  }

  html.no-touch nav.main > ul > li.has-mega:hover > ul.mega,
  nav.main > ul > li.has-mega.open-child > ul.mega{
    display:grid !important;
  }

  /* Second level = column heading -------------------------------------- */
  nav.main > ul > li.has-mega > ul.mega > li{
    flex:none !important;
    max-width:none !important;
    position:static !important;
    margin:0 0 16px;
    break-inside:avoid;
  }
  nav.main > ul > li.has-mega > ul.mega > li > span > a{
    display:block;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--or26-coral) !important;
    padding:0 0 8px !important;
    background:none !important;
  }
  nav.main > ul > li.has-mega > ul.mega > li > span > a:hover{
    color:var(--or26-navy) !important;
  }
  /* the theme paints a hover bar behind each dropdown item — not wanted on headings */
  nav.main > ul > li.has-mega > ul.mega > li > span::before,
  nav.main > ul > li.has-mega > ul.mega > li > span::after{ display:none !important; }

  /* Third level = the actual links, rendered inline rather than as a flyout */
  nav.main > ul > li.has-mega > ul.mega > li > ul{
    display:block !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:auto !important;
    opacity:1 !important;
    background:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    z-index:auto !important;
  }
  nav.main > ul > li.has-mega > ul.mega > li > ul > li{ margin:0; }
  nav.main > ul > li.has-mega > ul.mega > li > ul > li > span > a{
    display:block;
    font-size:13px;
    line-height:1.4;
    font-weight:500;
    color:var(--or26-ink) !important;
    padding:5px 0 !important;
    background:none !important;
  }
  nav.main > ul > li.has-mega > ul.mega > li > ul > li > span > a:hover{
    color:var(--or26-coral) !important;
  }
  nav.main > ul > li.has-mega > ul.mega > li > ul > li > span::before,
  nav.main > ul > li.has-mega > ul.mega > li > ul > li > span::after{ display:none !important; }

  /* no expand carets anywhere inside the mega panel */
  nav.main > ul > li.has-mega > ul.mega .expand-subpages{ display:none !important; }

  /* Simple dropdowns (Salty Sisters / Surf Travel / Instructor Courses / Store) */
  nav.main > ul > li.has-child:not(.has-mega) > ul{
    background:#fff !important;
    border-radius:10px !important;
    box-shadow:0 18px 44px rgba(0,0,0,.20) !important;
    padding:14px 6px !important;
    min-width:260px;
  }
  nav.main > ul > li.has-child:not(.has-mega) > ul > li > span > a{
    font-size:13.5px;
    font-weight:500;
    color:var(--or26-ink) !important;
    padding:7px 16px !important;
  }
  nav.main > ul > li.has-child:not(.has-mega) > ul > li > span > a:hover{
    color:var(--or26-coral) !important;
  }

  /* The right-most dropdown opens leftwards so a long label can never push it
     off-screen at the 1300px breakpoint. */
  html.no-touch nav.main > ul > li.has-child:not(.has-mega):last-child:hover > ul,
  nav.main > ul > li.has-child:not(.has-mega):last-child.open-child > ul{
    left:auto !important;
    right:0 !important;
  }
}

/* ============================================================================
   FOOTER — centred, dark treatment per the wireframe.

   Deliberately a restyle of the existing footer rather than a content rebuild:
   the search-links block carries sitewide internal links that the wireframe
   drops, and removing them would weaken crawlability on all ~400 pages. They
   are kept here but made compact.
   ========================================================================== */

#site-footer{
  background:var(--or26-navy) !important;
  color:#DCE7EA;
  text-align:center;
}
#site-footer .footer-item{ text-align:center; }

#site-footer h1, #site-footer h2, #site-footer h3,
#site-footer h4, #site-footer h5, #site-footer .heading,
#site-footer .secondary-heading{
  color:#fff !important;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}
#site-footer p, #site-footer li, #site-footer .text{ color:#B9CBD1; }
#site-footer a{ color:#DCE7EA; }
#site-footer a:hover{ color:var(--or26-coral); }

/* logo strips (Supported By / Accredited By) — tighten and centre */
#site-footer .usn_pod_sociallinks ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 14px;
  padding:0;
  margin:0;
  list-style:none;
}
#site-footer .usn_pod_sociallinks img{
  max-height:34px;
  width:auto;
  filter:brightness(0) invert(1);
  opacity:.75;
  transition:opacity .2s ease;
}
#site-footer .usn_pod_sociallinks a:hover img{ opacity:1; }

/* search links row — kept for crawlability, laid out as a compact centred list */
#site-footer .usn_pod_searchlinks ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 18px;
  padding:0;
  margin:0;
  list-style:none;
}
#site-footer .usn_pod_searchlinks li{ margin:0; }
#site-footer .usn_pod_searchlinks a{ font-size:13px; }

/* legal bar */
#site-footer .footer-bottom,
#site-footer .copyright{
  border-top:1px solid rgba(255,255,255,.14);
  margin-top:26px;
  padding-top:18px;
  font-size:12.5px;
  color:#8FA6B2;
}

@media screen and (max-width:767px){
  #site-footer .usn_pod_sociallinks img{ max-height:28px; }
}

/* ============================================================================
   SPONSOR LOGO MARQUEE (.logo-bar)
   Behaviour is set in /scripts/custom/outer-reef-2026.js — this handles the
   uniform sizing the wireframe asks for ("all logos, uniform size").
   ========================================================================== */

.logo-bar .slick-track{
  display:flex;
  align-items:center;
}
.logo-bar .slick-slide{
  height:auto;
}
.logo-bar .item{
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:0 18px;
}
/* every logo occupies the same box regardless of its native aspect ratio */
.logo-bar .item img{
  max-height:52px;
  width:auto;
  max-width:140px;
  object-fit:contain;
  opacity:.85;
  transition:opacity .2s ease;
}
.logo-bar .item a:hover img{ opacity:1; }

/* the marquee is decorative motion — hold it still if the visitor asked for that */
@media (prefers-reduced-motion:reduce){
  .logo-bar .slick-track{ transition:none !important; transform:none !important; }
}

@media screen and (max-width:767px){
  .logo-bar .item img{ max-height:40px; max-width:110px; }
  .logo-bar .item{ padding:0 12px; }
}

/* arrows are meaningless on a continuously-scrolling marquee */
.logo-bar.or26-marquee-ready .slick-arrow{ display:none !important; }

/* The new footer lives in a single code pod; the theme gives pods a grid column
   class (col-lg-3), so force it to span the full footer width. */
#site-footer .item.usn_pod_code{
  flex:0 0 100% !important;
  max-width:100% !important;
  width:100% !important;
}

/* Hidden footer pods still emit their column wrapper, leaving ~30px of dead
   space each. Collapse only genuinely empty ones, so re-enabling a pod in the
   backoffice brings it straight back without a CSS change. */
#site-footer .footer-item:empty,
#site-footer .footer-item:not(:has(*)){ display:none !important; }

/* ============================================================================
   HEADER CHROME — match the wireframe's navy bar, DM Sans nav and coral CTA.
   Values taken directly from the wireframe stylesheet.
   ========================================================================== */

#site-header{
  background:var(--or26-navy) !important;
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
/* the theme paints its gradient on a pseudo-element / bg layer too */
#site-header.header-bg,
#site-header.header-bg-linear{
  background:var(--or26-navy) !important;
}

/* top-level nav links */
nav.main > ul > li > span > a{
  font-family:'DM Sans','Helvetica Neue',Arial,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:#DCE7EA !important;
  letter-spacing:normal !important;
}
nav.main > ul > li > span > a:hover,
nav.main > ul > li:hover > span > a,
nav.main > ul > li.active > span > a{
  color:#fff !important;
}

/* Book now CTA */
nav.cta-links .btn{
  background:var(--or26-coral) !important;
  color:#3A2100 !important;
  border-color:var(--or26-coral) !important;
  font-family:'DM Sans','Helvetica Neue',Arial,sans-serif !important;
  font-size:13px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  border-radius:4px !important;
  padding:9px 18px !important;
}
nav.cta-links .btn:hover{
  background:#ffab57 !important;
  border-color:#ffab57 !important;
  color:#3A2100 !important;
}

/* ============================================================================
   MOBILE MENU — wireframe accordion treatment.
   uSkinned already renders an accordion; this restyles it to match.
   Scoped below the theme's 1300px header breakpoint.
   ========================================================================== */
@media screen and (max-width:1299px){

  nav.main{
    background:var(--or26-navy-2) !important;
    border-top:1px solid rgba(255,255,255,.12);
  }
  nav.main > ul > li{
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  /* level 1 = accordion row */
  nav.main > ul > li > span > a{
    font-family:'League Spartan','Helvetica Neue',Arial,sans-serif !important;
    font-size:15px !important;
    font-weight:700 !important;
    color:#fff !important;
    padding:16px 22px !important;
  }
  /* level 2 inside the mega = group heading */
  nav.main > ul > li > ul > li > span > a{
    font-family:'DM Sans','Helvetica Neue',Arial,sans-serif !important;
    font-size:11px !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    color:#F3B597 !important;
    padding:12px 22px 4px !important;
  }
  /* level 3 = the links */
  nav.main > ul > li > ul > li > ul > li > span > a{
    font-family:'DM Sans','Helvetica Neue',Arial,sans-serif !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    text-transform:none !important;
    color:#C7D6DB !important;
    padding:7px 22px !important;
  }
  /* simple dropdowns (no third level) keep the link treatment */
  nav.main > ul > li:not(.has-mega) > ul > li > span > a{
    font-size:13.5px !important;
    font-weight:500 !important;
    text-transform:none !important;
    color:#C7D6DB !important;
    letter-spacing:normal !important;
    padding:7px 22px !important;
  }

  /* expand/collapse indicator */
  nav.main .expand-subpages{ color:var(--or26-coral) !important; }

  /* Book now, full width like the wireframe */
  nav.cta-links{ padding:0 22px 18px; }
  nav.cta-links .btn{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    padding:14px !important;
    font-size:14px !important;
    border-radius:5px !important;
  }
}

/* the theme leaves 120px of empty space below the footer's legal bar */
#site-footer{ padding-bottom:36px !important; }