/* ============================================================
   FGSC-MM — UNIFIED SITE NAVIGATION
   One consistent system used on every page:
     1. Fixed horizontal top bar with direct-click links (desktop)
        that becomes a horizontally-scrollable strip (mobile)
     2. A hamburger button that opens the full slide-in sidebar
        (kept, per request, as a secondary/complete menu)
   Loaded AFTER each page's own stylesheet so it always wins.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root{
  --brand-dark:#142a1c;
  --brand-mid:#1c3d28;
  --brand-accent:#6fcf87;
  --brand-gold:#d9a441;
  --brand-cream:#f8faf4;
}

/* ---------- TOP BAR ---------- */
.site-topbar{
  position:fixed; top:0; left:0; width:100%; z-index:9998;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(90deg, var(--brand-dark), var(--brand-mid));
  box-shadow:0 2px 18px rgba(0,0,0,0.25);
  padding:0 18px 0 74px; /* left padding clears the hamburger button */
  height:64px;
  font-family:'DM Sans', sans-serif;
}

.site-topbar .topbar-logo{
  display:flex; align-items:center; gap:10px; flex-shrink:0;
  text-decoration:none; color:#fff;
}
.site-topbar .topbar-logo img{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  border:2px solid var(--brand-accent);
}
.site-topbar .topbar-logo span{
  font-family:'Cormorant Garamond', serif;
  font-weight:700; font-size:1.15rem; letter-spacing:0.03em;
  white-space:nowrap;
  display:none;
}
@media (min-width:560px){
  .site-topbar .topbar-logo span{ display:inline; }
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

.topbar-links{
  list-style:none; display:flex; align-items:center; gap:4px;
  margin:0 0 0 auto; padding:0;
  flex: 1 1 auto;
  min-width: 0; /* critical: lets this flex child shrink & scroll instead of overflowing the bar */
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  height:100%;
}
.topbar-links::-webkit-scrollbar{ display:none; }

.topbar-links li{ flex-shrink:0; height:100%; display:flex; align-items:center; }

.topbar-links li a{
  display:flex; align-items:center; height:100%;
  padding:0 11px;
  color:rgba(255,255,255,0.78);
  text-decoration:none;
  font-size:0.85rem; font-weight:500; letter-spacing:0.02em;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.topbar-links li a:hover{
  color:#fff;
  background:rgba(255,255,255,0.06);
}
.topbar-links li a.active{
  color:#fff;
  border-bottom-color:var(--brand-gold);
  font-weight:600;
}

/* push page content below the fixed top bar */
body{ padding-top:64px; }
/* full-bleed hero headers should sit under the bar, not be pushed further */
body > .header:first-of-type,
body > header.header:first-of-type{
  margin-top:-64px;
}

/* ---------- HAMBURGER (repositioned to sit on the top bar) ---------- */
.menu-btn{
  position:fixed !important;
  top:9px !important; left:14px !important;
  width:46px !important; height:46px !important;
  padding:0 !important;
  display:flex !important; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.25) !important;
  border-radius:10px !important;
  cursor:pointer;
  z-index:10001 !important;
  font-size:0 !important; /* hide any text content e.g. "MENU" */
  color:transparent !important;
  transition:background 0.25s ease, transform 0.25s ease;
}
.menu-btn:hover{
  background:rgba(255,255,255,0.16) !important;
  transform:scale(1.05);
}
.menu-btn::before{
  content:'';
  position:absolute; top:50%; left:50%;
  width:20px; height:2px;
  background:var(--brand-accent);
  box-shadow:0 -6px 0 var(--brand-accent), 0 6px 0 var(--brand-accent);
  transform:translate(-50%,-50%);
}

/* ---------- SIDEBAR (kept; bigger touch targets) ---------- */
.sidebar{
  position:fixed !important; top:0 !important; left:-300px !important;
  width:min(300px, 84vw) !important; height:100vh !important;
  background:linear-gradient(180deg, var(--brand-dark), #0f2016) !important;
  z-index:10000 !important;
  transition:left 0.35s cubic-bezier(0.4,0,0.2,1) !important;
  display:flex !important; flex-direction:column !important;
  box-shadow:6px 0 30px rgba(0,0,0,0.35);
}
.sidebar.active{ left:0 !important; }

.sidebar-overlay{
  position:fixed !important; inset:0 !important;
  background:rgba(0,0,0,0.5) !important;
  opacity:0 !important; visibility:hidden !important;
  transition:opacity 0.3s ease !important;
  z-index:9999 !important;
}
.sidebar-overlay.active{ opacity:1 !important; visibility:visible !important; }

.sidebar-header{
  display:flex; align-items:center; gap:12px;
  padding:22px 18px 16px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.sidebar-logo{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:var(--brand-accent); color:var(--brand-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-family:'Cormorant Garamond', serif; font-size:1.1rem;
}
.sidebar-title{ display:flex; flex-direction:column; line-height:1.3; }
.sidebar-title span:first-child{ color:#fff; font-weight:700; font-size:1rem; letter-spacing:0.05em; }
.sidebar-title span:last-child{ color:rgba(255,255,255,0.5); font-size:0.65rem; letter-spacing:0.15em; }
.sidebar-footer{ padding:14px 18px; border-top:1px solid rgba(255,255,255,0.08); }
.sidebar-footer p{ color:rgba(255,255,255,0.4); font-size:0.7rem; }

.sidebar .nav-links{
  list-style:none; padding:12px 12px 24px; margin:0;
  flex:1; overflow-y:auto;
}
.sidebar .nav-links li{ margin:3px 0; }
.sidebar .nav-links li a{
  display:flex !important; align-items:center !important;
  min-height:50px !important; /* comfortable touch target */
  padding:13px 16px !important;
  font-size:15px !important;
  color:rgba(255,255,255,0.82) !important;
  text-decoration:none;
  border-radius:10px;
  transition:background 0.2s ease, color 0.2s ease;
}
.sidebar .nav-links li a:hover,
.sidebar .nav-links li a.active{
  background:rgba(111,207,135,0.15) !important;
  color:#fff !important;
}

.close-btn{
  min-width:44px !important; min-height:44px !important;
  display:flex !important; align-items:center; justify-content:center;
  font-size:20px !important;
  cursor:pointer;
  color:#fff;
  margin:10px 10px 0 auto;
}

/* ---------- TOPBAR DROPDOWN ---------- */
.topbar-links li.has-dropdown { position: relative; }
.topbar-links li.has-dropdown > a { cursor: pointer; }
.topbar-links li.has-dropdown > a .caret { font-size: 0.65em; margin-left: 5px; }
.topbar-links li.has-dropdown.dd-active > a {
  color: #fff; border-bottom-color: var(--brand-gold); font-weight: 600;
}
.dropdown-menu {
  list-style: none; margin: 0; padding: 8px;
  position: fixed; top: 0; left: 0; /* actual top/left set via JS so it isn't clipped by .topbar-links' overflow */
  min-width: 210px;
  background: var(--brand-dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 10002;
}
.topbar-links li.has-dropdown:hover .dropdown-menu,
.topbar-links li.has-dropdown:focus-within .dropdown-menu,
.topbar-links li.has-dropdown.dd-open .dropdown-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown-menu li a {
  display: block; padding: 10px 14px; border-radius: 6px;
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 0.85rem; white-space: nowrap;
}
.dropdown-menu li a:hover { background: rgba(111,207,135,0.15); color: #fff; }

/* ---------- SIDEBAR SUBMENU ---------- */
.sidebar .nav-links li.has-submenu > a {
  display: flex !important; justify-content: space-between; align-items: center !important;
}
.sidebar .nav-links li.has-submenu.open > a {
  background: rgba(111,207,135,0.1) !important;
  color: #fff !important;
}
.submenu-caret { transition: transform 0.25s ease; font-size: 0.8em; }
.sidebar .nav-links li.has-submenu.open .submenu-caret { transform: rotate(180deg); }
.sub-nav-links {
  list-style: none; margin: 0; padding: 0 0 0 14px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.sidebar .nav-links li.has-submenu.open .sub-nav-links { max-height: 220px; }
.sub-nav-links li a {
  min-height: 42px !important;
  font-size: 13.5px !important;
  color: rgba(255,255,255,0.65) !important;
}

/* ---------- MOBILE ---------- */
@media (max-width:768px){
  .site-topbar{ padding-left:66px; height:58px; }
  body{ padding-top:58px; }
  body > .header:first-of-type,
  body > header.header:first-of-type{ margin-top:-58px; }
  .menu-btn{ top:7px !important; left:10px !important; width:44px !important; height:44px !important; }
  .topbar-links li a{ padding:0 11px; font-size:0.8rem; }
}