/* ==========================================================================
   site-nav.css  -  ONE navigation for every page (replaces interior-nav.css)
   Home, About, Services, Contact, Terms all share the same layout, sizes,
   dropdown and phone side-menu. The ONLY difference is colour on the home
   page desktop header (white over the dark hero) - set in the variables below.
   Load it AFTER style.css and the page's own css.
   ========================================================================== */

/* Colours: default = light pages */
:is(body.services-page, body.contact-site, body.about-body, body.terms-site) {
  --nav-link:#262821;
  --nav-hover:#2D3B15;
  --nav-logo:#2D3B15;
  --nav-caret:#2D3B15;
  --nav-btn:#2D3B15;
  --nav-bar:#2D3B15;
  --nav-shadow:none;
}
/* Colours: home header sits on the dark hero */
body.home-page {
  --nav-link:#fff;
  --nav-hover:#e3e8d6;
  --nav-logo:#fff;
  --nav-caret:#c0c0c1;
  --nav-btn:#fcfcfc;
  --nav-bar:#fcfcfc;
  --nav-shadow:0 1px 3px #111,0 0 8px #111;
}

/* Header fit - same on every page (was only in contact.css) */
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .site-logo { flex:0 0 auto; min-width:max-content; }
@media(min-width:901px) {
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav { min-width:0; margin-left:auto; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-trigger { white-space:nowrap; }
}
@media(min-width:901px) and (max-width:1200px) {
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .site-header { gap:12px; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .site-logo { gap:7px; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .site-logo img { width:46px; height:46px; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .logo-name { font-size:15px; letter-spacing:.12em; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .logo-tagline { font-size:8px; letter-spacing:.22em; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav { gap:11px; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-trigger { font-size:12px; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .book-online-btn { min-height:38px; padding:8px 11px; }
}

/* Shared navigation for Services, Contact, About, and Terms */
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .site-header,
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .site-header.scrolled {
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav,
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav.open {
  gap:clamp(18px,2.3vw,34px);
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .logo-name,
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .logo-tagline {
  color:var(--nav-logo) !important;
  text-shadow:var(--nav-shadow) !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a,
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-trigger {
  color:var(--nav-link) !important;
  text-shadow:var(--nav-shadow) !important;
  font-family:"Gabie Sans Serif","Century Gothic",Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:.035em;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a:hover,
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-trigger:hover,
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a.active,
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-trigger.active {
  color:var(--nav-hover) !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a.active::after {
  background:var(--nav-hover) !important;
  box-shadow:none !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-trigger span {
  color:var(--nav-caret) !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-menu {
  background:#FCFCFC;
  border:1px solid rgba(45,59,21,.16);
  box-shadow:0 14px 30px rgba(38,40,33,.1);
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-menu a { color:#262821 !important; }
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-menu a:hover {
  color:#fff !important;
  background:#2D3B15 !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle {
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle span { background:var(--nav-bar) !important; }
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .book-online-btn {
  min-height:42px;
  padding:10px 18px;
  border:1px solid var(--nav-btn) !important;
  border-radius:3px;
  background:transparent !important;
  color:var(--nav-btn) !important;
  font-family:"Gabie Sans Serif","Century Gothic",Arial,sans-serif;
  line-height:1.2;
  text-decoration:none;
  text-shadow:none !important;
  cursor:pointer;
  box-shadow:none !important;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .book-online-btn:hover {
  border-color:#2D3B15 !important;
  background:#2D3B15 !important;
  color:#fff !important;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .skip-link {
  position:absolute;
  top:-80px;
  left:16px;
  z-index:2000;
  padding:10px 16px;
  background:#2D3B15;
  color:#fff;
}
:is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .skip-link:focus { top:12px; }
@media(max-width:900px) {
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav.open {
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .book-online-btn {
    align-self:flex-start;
    margin-top:10px;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-menu {
    background:transparent;
    border:0;
    border-left:1px solid #2D3B15;
    box-shadow:none;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-menu a { color:#262821 !important; }
}

@media(max-width:900px) {
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .dropdown-trigger {
    padding:11px 0;
    font-size:1.05rem;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav.open {
    gap:0;
  }
}

/* Reference-inspired mobile side menu shared by interior pages */
@media(max-width:900px) {
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav.open {
    position:fixed;
    inset:0 auto 0 0;
    width:min(78vw,390px);
    height:100dvh;
    max-height:100dvh;
    padding:clamp(92px,15vh,150px) 26px 34px;
    display:none;
    align-items:stretch;
    flex-direction:column;
    justify-content:flex-start;
    gap:4px;
    overflow-x:hidden;
    overflow-y:auto;
    border:0;
    border-right:1px solid rgba(45,59,21,.12);
    border-radius:0;
    background:#FCFCFC !important;
    box-shadow:18px 0 42px rgba(30,33,25,.12);
    z-index:2001;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav.open {
    display:flex;
    animation:mobile-menu-enter .24s ease-out both;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .nav-dropdown > .dropdown-trigger {
    min-height:48px;
    padding:12px 8px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0;
    border-radius:0;
    color:#696258 !important;
    font:500 .8rem/1.3 "Gabie Sans Serif","Century Gothic",Arial,sans-serif;
    letter-spacing:.1em;
    text-align:center;
    text-transform:uppercase;
    text-shadow:none !important;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a::before,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .nav-dropdown > .dropdown-trigger::before { content:none !important; display:none; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a:hover,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .nav-dropdown > .dropdown-trigger:hover,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a.active,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .nav-dropdown > .dropdown-trigger.active {
    background:transparent;
    color:#2D3B15 !important;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a.active { font-weight:700; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > a.active::after { display:none; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .nav-dropdown { width:100%; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .nav-dropdown > .dropdown-trigger { width:100%; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .nav-dropdown > .dropdown-trigger span { margin-left:8px; color:#2D3B15 !important; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav .dropdown-menu {
    position:static;
    margin:0 0 8px;
    padding:2px 0 8px;
    display:grid;
    justify-items:center;
    border:0;
    background:transparent !important;
    box-shadow:none;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav .dropdown-menu a {
    padding:6px 8px;
    color:#696258 !important;
    font:400 .66rem/1.35 "Gabie Sans Serif","Century Gothic",Arial,sans-serif;
    letter-spacing:.06em;
    text-align:center;
    text-transform:uppercase;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav .dropdown-menu a:hover,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav .dropdown-menu a:focus-visible { background:transparent !important; color:#2D3B15 !important; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .book-online-btn {
    min-height:44px;
    margin:12px 0 0;
    padding:12px;
    justify-content:center;
    border:1px solid rgba(45,59,21,.4) !important;
    border-radius:2px;
    background:transparent !important;
    color:#2D3B15 !important;
    font-size:.74rem;
    font-weight:700;
  }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .book-online-btn::before { content:none !important; display:none; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav > .book-online-btn:hover { background:#2D3B15 !important; color:#FCFCFC !important; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle { position:relative; z-index:2002; border:0 !important; background:transparent !important; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle span { background:var(--nav-bar) !important; transition:transform .2s ease,opacity .2s ease; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle[aria-expanded="true"] span,
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .site-header:has(.main-nav.open) .menu-toggle span { background:#2D3B15 !important; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(7px) rotate(45deg); }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-7px) rotate(-45deg); }
}
@keyframes mobile-menu-enter {
  from { opacity:0; transform:translateX(-14px); }
  to { opacity:1; transform:translateX(0); }
}
@media(prefers-reduced-motion:reduce) {
  :is(body.home-page, body.services-page, body.contact-site, body.about-body, body.terms-site) .main-nav.open { animation:none; }
}