:root {
  --primary:       #2d5a3d;
  --primary-light: #4a7c5f;
  --primary-dark:  #1a3a2a;
  --gold:          #c9a84c;
  --gold-dark:     #a07830;
  --gold-light:    #e8c97a;
  --cream:         #fafaf8;
  --bg:            #f5f4f1;
  --card:          #ffffff;
  --text-dark:     #1a1a1a;
  --text-mid:      #4b5563;
  --text-light:    #9ca3af;
  --border:        #e5e7eb;
  --shadow-sm:     0 2px 12px rgba(0,0,0,.06);
  --shadow-md:     0 6px 24px rgba(0,0,0,.09);
  --shadow-lg:     0 16px 48px rgba(0,0,0,.12);
  --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --nav-h: 60px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.6;
  transition: background .25s ease, color .25s ease;
}

/* DARK MODE */
body.dark-mode {
  --cream: #0e1411;
  --bg: #111915;
  --card: #161f1a;
  --text-dark: #e6eee9;
  --text-mid: #b8c4be;
  --text-light: #8ea096;
  --border: #27352d;
  background: #0b100d;
  color: var(--text-dark);
}
body.dark-mode .navbar { background: rgba(14,20,17,.97); border-bottom-color: #2b3931; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
body.dark-mode .nav-logo-name { color: #e6eee9; }
body.dark-mode .nav-link { color: #b8c4be; }
body.dark-mode .nav-link:hover, body.dark-mode .nav-item:hover > .nav-link { color: #f0d898; background: rgba(201,168,76,.1); }
body.dark-mode .nav-link.active { color: #f0d898; }
body.dark-mode .dropdown-menu, body.dark-mode .mega-dropdown { background: #18231e; border-color: #304238; }
body.dark-mode .dropdown-menu a { color: #c8d8ce; }
body.dark-mode .dropdown-menu a:hover { background: rgba(201,168,76,.1); color: #f0d898; }
body.dark-mode .btn-theme { border-color: #3a5446; color: #dce8e1; background: rgba(201,168,76,.08); }
body.dark-mode .btn-outline { border-color: #3a5446; color: #dce8e1; }
body.dark-mode .btn-outline:hover { background: #24342b; }
body.dark-mode .mobile-menu-panel { background: #111915; border-top-color: #27352d; }
body.dark-mode .mob-nav-link { color: #b8c4be; border-bottom-color: #1e2b24; }
body.dark-mode .mob-nav-link:hover { background: rgba(201,168,76,.08); color: #f0d898; }
body.dark-mode .mob-section-label { color: #8ea096; }
body.dark-mode .mob-sub-link { color: #9aaea3; }
body.dark-mode .mob-sub-link:hover { color: #f0d898; }
body.dark-mode .ham-line { background: #c8d8ce; }
body.dark-mode #site-footer .footer { background:#0a110d; }

/* TOP BAR — light strip (white mode); dark only when user toggles theme */
.topbar {
  background: #f3f2ef;
  border-bottom: 1px solid #e4e3df;
  padding: 8px 0;
  font-size: 0.73rem;
  color: #4a4945;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.topbar-inner { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.topbar-left { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar-left span { display: flex; align-items: center; gap: 5px; }
.topbar-right { display: flex; gap: 14px; align-items:center; }
.topbar-right a { color: #686660; text-decoration: none; display: flex; align-items: center; gap: 4px; transition: color .2s; }
.topbar-right a:hover { color: var(--gold-dark); }

body.dark-mode .topbar {
  background: linear-gradient(90deg, #050a07 0%, #0f1a13 45%, #050a07 100%);
  border-bottom-color: #1e2b24;
  color: rgba(255,255,255,.55);
}
body.dark-mode .topbar-right a { color: rgba(255,255,255,.55); }
body.dark-mode .topbar-right a:hover { color: var(--gold-light); }

/* NAVBAR — light by default; dark-mode overrides below */
.navbar {
  background: #ffffff;
  border-bottom: 1px solid rgba(26,58,42,.07);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 22px rgba(12,28,20,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.nav-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 16px;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 0;
}
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; margin-right: 20px; }
.nav-logo-img { width: 38px; height: 38px; border-radius: 8px; overflow: hidden; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 3px 12px rgba(45,90,61,.28); flex-shrink: 0; }
.nav-logo-img img { width:100%; height:100%; object-fit:cover; display:block; }
.nav-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
.nav-logo-name { font-family: 'Playfair Display', serif; font-size: 0.9rem; font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
.nav-logo-sub { font-size: 0.62rem; color: var(--text-light); font-weight: 400; white-space: nowrap; }
.nav-links-desktop { flex: 1; display: flex; align-items: center; list-style: none; gap: 2px; min-width: 0; overflow: visible; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; font-size: 0.82rem; font-weight: 500; color: var(--text-mid); text-decoration: none; border-radius: var(--r-sm); transition: all .18s; white-space: nowrap; }
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--primary); background: rgba(45,90,61,.07); }
.nav-link.active { color: var(--primary); box-shadow: inset 0 -2px 0 var(--gold); }
.caret { font-size: 0.55rem; color: var(--gold-dark); }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 36px rgba(0,0,0,.13); padding: 8px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 300; }
.dropdown-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 0.82rem; color: var(--text-mid); text-decoration: none; transition: all .15s; }
.dropdown-menu a:hover { background: rgba(45,90,61,.07); color: var(--primary); }
.item-icon { width: 18px; text-align: center; }
.nav-item:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-dropdown { left: auto; right: 0; min-width: min(640px, 92vw); max-width: 92vw; padding: 14px 16px; border-radius: 14px; }
.mega-dropdown .mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
@media (max-width: 1160px) {
  .mega-dropdown { min-width: 520px; }
  .mega-dropdown .mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mega-dropdown a { padding: 9px 10px; border-radius: 10px; }
.mega-dropdown a:hover { background: rgba(45,90,61,.09); transform: translateX(2px); }
body.dark-mode .mega-dropdown a:hover { background: rgba(201,168,76,.14); transform: translateX(2px); }
.nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
.btn-theme {
  border: 1.5px solid var(--border);
  background: rgba(45,90,61,.05);
  color: var(--primary-dark);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: all .2s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn-theme:hover { border-color: var(--primary); color: var(--primary); }
.btn-outline { border: 1.5px solid var(--primary); color: var(--primary); background: none; padding: 5px 12px; border-radius: 20px; font-size: 0.76rem; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all .2s; white-space: nowrap; }
.btn-outline:hover { background: var(--primary); color: white; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-dark)); color: white; border: none; padding: 9px 20px; border-radius: var(--r-lg); font-size: 0.84rem; font-weight: 700; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: transform .2s; white-space: nowrap; }
.btn-gold:hover { transform: translateY(-1px); }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: none;
  border: 1.5px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .2s;
}
.nav-hamburger:hover { border-color: var(--primary); }
.ham-line { width: 18px; height: 2px; border-radius: 2px; background: var(--text-mid); transition: all .3s; transform-origin: center; }
.navbar.open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar.open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* MOBILE SLIDE-IN PANEL */
.mobile-menu-panel {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 190;
  overflow-y: auto;
  border-top: 1px solid var(--border);
  padding: 0 0 60px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-100%);
  transition: opacity .25s ease, transform .3s ease, visibility .3s;
}
.mobile-menu-panel.open { opacity: 1; visibility: visible; transform: translateX(0); }
.mob-nav-item { border-bottom: 1px solid var(--border); }
.mob-nav-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-size: 0.92rem; font-weight: 600; color: var(--text-dark); text-decoration: none; cursor: pointer; transition: all .15s; background: none; border: none; width: 100%; text-align: left; font-family: 'DM Sans', sans-serif; }
.mob-nav-link:hover { background: rgba(45,90,61,.05); color: var(--primary); }
.mob-caret { font-size: 0.7rem; color: var(--text-light); transition: transform .2s; }
.mob-nav-item.open > .mob-nav-link .mob-caret { transform: rotate(90deg); }
.mob-sub-links { display: none; padding: 4px 0 10px; background: rgba(45,90,61,.025); }
.mob-nav-item.open > .mob-sub-links { display: block; }
.mob-section-label { padding: 8px 28px 4px; font-size: 0.68rem; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; }
.mob-sub-link { display: flex; align-items: center; gap: 9px; padding: 9px 28px; font-size: 0.84rem; color: var(--text-mid); text-decoration: none; transition: color .15s; }
.mob-sub-link:hover { color: var(--primary); }
.mob-sub-link .item-icon { font-size: 1rem; }
.mob-actions { padding: 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.mob-actions .btn-gold, .mob-actions .btn-outline { width: 100%; text-align: center; padding: 12px; font-size: 0.9rem; }

/* FOOTER — scoped to #site-footer so page-level CSS cannot break the injected layout */
#site-footer { width:100%; display:block; clear:both; }
/* Page-specific CSS often targets bare `footer { }`; reset alignment so grid columns stay visible */
#site-footer .footer {
  background:var(--primary-dark); color:rgba(255,255,255,.75);
  padding:52px 0 0; width:100%; box-sizing:border-box;
  text-align:start;
}
#site-footer .footer-inner {
  max-width:1240px; margin:0 auto; padding:0 28px;
  display:grid !important;
  grid-template-columns:minmax(220px,1.25fr) repeat(3,minmax(160px,1fr));
  gap:clamp(24px,4vw,48px);
  margin-bottom:40px;
  align-items:start;
  width:100%;
  box-sizing:border-box;
}
#site-footer .footer .footer-col { display:block !important; min-width:0; }
#site-footer .footer .footer-brand-col { max-width:380px; }
#site-footer .footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
#site-footer .footer-logo-icon { width:42px; height:42px; border-radius:var(--r-md); background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:1.2rem; overflow:hidden; flex-shrink:0; }
#site-footer .footer-logo-icon img { width:100%; height:100%; object-fit:cover; display:block; }
#site-footer .footer-brand-name { font-family:'Playfair Display',serif; font-size:1rem; font-weight:700; color:white; }
#site-footer .footer-desc { font-size:.82rem; line-height:1.75; max-width:340px; color:rgba(255,255,255,.72); }
#site-footer .footer-social { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; align-items:center; }
#site-footer .social-icon {
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all .2s; color:#fff; text-decoration:none;
  flex-shrink:0;
}
#site-footer .social-icon svg { width:17px; height:17px; display:block; }
#site-footer .social-icon:hover { background:var(--gold); border-color:var(--gold); color:var(--primary-dark); }
#site-footer .footer-col h4 { font-size:.78rem; font-weight:700; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
#site-footer .footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; margin:0; padding:0; }
#site-footer .footer-col ul li a { color:rgba(255,255,255,.72); font-size:.84rem; text-decoration:none; transition:color .2s; }
#site-footer .footer-col ul li a:hover { color:var(--gold-light); }
#site-footer .footer-bottom {
  border-top:1px solid rgba(255,255,255,.1); padding:18px 28px; max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:.73rem; color:rgba(255,255,255,.4); box-sizing:border-box;
}

/* Basic responsive downsizing */
@media (max-width: 1024px) {
  .nav-links-desktop { display: none; }
  .nav-hamburger { display: flex; }
  .nav-actions .btn-outline { display: none; }
  #site-footer .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  #site-footer .footer .footer-brand-col { max-width:none; }
}

@media (max-width: 768px) {
  :root { --nav-h: 56px; }
  .topbar { display: none; }
  .nav-inner { padding: 0 12px; }
  .nav-logo-sub { display: none; }
  .btn-theme { padding: 4px 8px; font-size: 0.65rem; border-radius: 16px; }
  #site-footer .footer-inner { grid-template-columns:1fr !important; gap:28px; padding:0 16px; }
  #site-footer .footer .footer-brand-col { grid-column:auto; }
  #site-footer .footer-bottom { flex-direction:column; justify-content:center; text-align:center; padding:16px; }
}