/* sts-chrome.css — shared site header + footer.
 *
 * Drop this file into any page that wants the standard STS nav and footer:
 *   <link rel="stylesheet" href="assets/css/sts-chrome.css">
 *   <script src="assets/js/sts-chrome.js"></script>
 *
 * Requires :root tokens on the host page: --forest, --gold, --gold-light.
 * (All STS pages already declare these.)
 */

/* ─── NAV (desktop) ─── */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px 52px;background:rgba(28,43,26,0.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all 0.4s ease}
nav.scrolled{background:rgba(28,43,26,0.97);padding:16px 52px}
.nav-logo{display:flex;align-items:center;text-decoration:none;line-height:0}
.nav-logo img{height:46px;width:auto;display:block;filter:brightness(0) invert(1);transition:opacity 0.2s}
.nav-logo:hover img{opacity:0.85}
nav.scrolled .nav-logo img{height:40px;transition:height 0.3s,opacity 0.2s}
.nav-links{display:flex;gap:38px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:13px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;color:rgba(250,250,247,0.65);text-decoration:none;transition:color 0.2s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--gold-light)}
.nav-links a.active::after{content:"";position:absolute;bottom:-8px;left:0;right:0;height:1px;background:var(--gold)}
.nav-cta{font-size:13px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-light);text-decoration:none;border:1px solid rgba(196,163,90,0.5);padding:10px 24px;transition:all 0.2s}
.nav-cta:hover{background:var(--gold);color:var(--forest);border-color:var(--gold)}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-social{display:inline-flex;align-items:center;justify-content:center;color:var(--gold-light);text-decoration:none;border:1px solid rgba(196,163,90,0.5);padding:12px 12px;transition:all 0.2s;line-height:0}
.nav-social:hover{background:var(--gold);color:var(--forest);border-color:var(--gold)}

/* ─── Hamburger button + subnav ─── */
.nav-toggle{display:none;background:transparent;border:1px solid rgba(196,163,90,0.5);color:var(--gold-light);width:40px;height:40px;padding:0;cursor:pointer;align-items:center;justify-content:center;transition:all 0.2s}
.nav-toggle:hover{background:var(--gold);color:var(--forest);border-color:var(--gold)}
.nav-toggle svg{width:18px;height:18px;display:block}
.nav-toggle .ico-close{display:none}
nav.menu-open .nav-toggle .ico-open{display:none}
nav.menu-open .nav-toggle .ico-close{display:block}

.nav-links .has-submenu{position:relative}
.nav-links .subnav{position:absolute;top:100%;left:-14px;list-style:none;margin:0;padding:8px 0;display:none;flex-direction:column;background:rgba(28,43,26,0.97);backdrop-filter:blur(10px);min-width:180px;border:1px solid rgba(196,163,90,0.18);z-index:110}
.nav-links .has-submenu:hover > .subnav,.nav-links .has-submenu:focus-within > .subnav{display:flex}
.nav-links .subnav a{display:block;padding:10px 20px;font-size:12px;font-weight:400;letter-spacing:0.14em;text-transform:uppercase;color:rgba(250,250,247,0.65);text-decoration:none;transition:color 0.2s;white-space:nowrap}
.nav-links .subnav a:hover{color:var(--gold-light)}

/* ─── FOOTER ─── */
footer{background:var(--forest);padding:64px 52px 40px;border-top:1px solid rgba(196,163,90,0.15)}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:60px}
.footer-proverb{font-family:"Cormorant Garamond",serif;font-size:22px;font-weight:300;color:rgba(250,250,247,0.85);font-style:italic;margin-bottom:6px;line-height:1.3}
.footer-sub{font-size:12px;color:rgba(250,250,247,0.3);line-height:1.8;font-weight:300;margin-top:12px}
.footer-nav-title{font-size:10px;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.footer-nav-links{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.footer-nav-links a{font-size:13px;font-weight:300;color:rgba(250,250,247,0.45);text-decoration:none;transition:color 0.2s}
.footer-nav-links a:hover{color:var(--gold-light)}
.footer-contact{font-size:13px;font-weight:300;color:rgba(250,250,247,0.45);line-height:1.85;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.footer-logo-mark{display:block;height:44px;width:auto;filter:brightness(0) invert(1);opacity:0.85;transition:opacity 0.2s}
.footer-logo-mark:hover{opacity:1}
.footer-social{display:inline-flex;align-items:center;gap:9px;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(250,250,247,0.6);border:1px solid rgba(196,163,90,0.35);padding:9px 16px;text-decoration:none;transition:all 0.2s}
.footer-social svg{width:13px;height:13px;fill:currentColor}
.footer-social:hover{color:var(--gold-light);border-color:var(--gold)}
.footer-contact a{color:var(--gold-light);text-decoration:none}
.footer-bottom{max-width:1200px;margin:40px auto 0;padding-top:24px;border-top:1px solid rgba(250,250,247,0.06);display:flex;justify-content:space-between;align-items:center}
.footer-legal{font-size:11px;color:rgba(250,250,247,0.2);letter-spacing:0.04em}
.footer-registry{display:flex;gap:12px}
.footer-registry a{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(250,250,247,0.25);text-decoration:none;border:1px solid rgba(250,250,247,0.08);padding:6px 14px;transition:all 0.2s}
.footer-registry a:hover{color:var(--gold-light);border-color:rgba(196,163,90,0.35)}

/* ─── Responsive ─── */
@media(max-width:860px){
  nav{padding:14px 20px}
  nav.scrolled{padding:12px 20px}
  .nav-logo img{height:34px}
  nav.scrolled .nav-logo img{height:30px}
  .nav-right{gap:8px}
  .nav-social{padding:12px 12px}
  .nav-toggle{display:inline-flex}
  .nav-links{display:flex;position:absolute;top:100%;left:0;right:0;background:rgba(28,43,26,0.97);backdrop-filter:blur(10px);flex-direction:column;gap:0;padding:0 20px;border-top:1px solid rgba(196,163,90,0.18);max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height 0.35s ease,opacity 0.2s ease,padding 0.3s ease}
  .nav-links > li{width:100%;border-bottom:1px solid rgba(196,163,90,0.08)}
  .nav-links > li:last-child{border-bottom:none}
  .nav-links > li > a{display:block;padding:18px 4px;font-size:14px;color:rgba(250,250,247,0.85)}
  nav.menu-open .nav-links{max-height:640px;opacity:1;pointer-events:auto;padding:8px 20px 20px}
  .nav-links .subnav{position:static;display:flex !important;background:transparent;backdrop-filter:none;border:none;padding:0 0 8px 16px;min-width:0;flex-direction:column}
  .nav-links .subnav li{border-bottom:none !important;width:100%}
  .nav-links .subnav a{display:block;padding:12px 4px;font-size:12px;color:rgba(250,250,247,0.62);letter-spacing:0.12em}

  .footer-inner{grid-template-columns:1fr;gap:40px;padding:0 4px}
  .footer-bottom{flex-direction:column;gap:16px;align-items:flex-start}
  footer{padding:48px 24px 32px}
}