/* ================================================================
   WinMYR site chrome: header, footer and buttons on every page, in
   the design system's type and logo gold. Loaded after styles.css.
   ================================================================ */
:root {
  --color-brand: #f8a000;
  --color-brand-light: #ffc23d;
  --color-brand-dark: #d48a00;
  --color-text: #1a1409;
  --color-text-muted: #6e6253;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --wm-amber: #8a5600;
  --wm-sand: #faf8f4;
  --wm-cream: #fff8ee;
  --wm-line: rgba(180, 140, 60, 0.22);
}
body { font-family: var(--font-body); }
:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; border-radius: 6px; }

/* Buttons (header, mobile menu and any theme template) */
.btn {
  position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 12px; font: 600 .95rem/1 var(--font-body);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background-color .2s, border-color .2s, color .2s;
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.55) 45%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.55) 55%, transparent 75%);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:hover::after, .btn:focus-visible::after { transition: transform .7s cubic-bezier(.4,0,.2,1); transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-primary { background: linear-gradient(180deg, var(--color-brand-light), var(--color-brand)); color: var(--color-text); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 16px -8px rgba(212,138,0,.9); }
.btn-primary:hover { background: linear-gradient(180deg, var(--color-brand-light), var(--color-brand)); color: var(--color-text); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px -10px rgba(212,138,0,.95); }
.btn-ghost { background: #fff; color: var(--color-text); border: 0; box-shadow: inset 0 0 0 1.5px var(--wm-line); }
.btn-ghost:hover { background: #fff; color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-brand), 0 10px 20px -14px rgba(26,20,9,.45); }
.btn-glow, .btn-glow:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px -10px rgba(212,138,0,.9); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 1.02rem; }

/* Header */
.site-header { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--wm-line); }
.header-inner { min-height: 72px; padding-top: 10px; padding-bottom: 10px; }
.main-nav { gap: 26px; }
.main-nav a { color: var(--color-text); font: 500 .95rem var(--font-body); }
.main-nav a:hover, .main-nav .nav-item:hover > a { color: var(--wm-amber); }
.main-nav a::after { height: 2px; bottom: -4px; background: linear-gradient(90deg, var(--color-brand-light), var(--color-brand-dark)); }
.nav-item > a .nav-caret { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.nav-dropdown {
  border: 1px solid var(--wm-line); border-radius: 14px; padding: 8px; background: #fff;
  box-shadow: 0 24px 40px -24px rgba(26,20,9,.45);
}
.nav-dropdown a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--color-text); }
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--wm-cream); color: var(--wm-amber); }
@media (min-width: 901px) {
  .nav-dropdown { opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s cubic-bezier(.2,.8,.2,1), visibility .2s; visibility: hidden; display: block !important; }
  .nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; transform: none; visibility: visible; }
}
.nav-toggle span { background: var(--color-text); }

/* Footer */
.site-footer { background: var(--wm-sand); border-top: 1px solid var(--wm-line); }
.footer-col h4 { color: var(--color-text); font: 700 1rem var(--font-display); letter-spacing: -.01em; text-transform: none; }
.footer-col a, .footer-col ul li { color: var(--color-text-muted); font-size: .92rem; }
.footer-col a:hover { color: var(--wm-amber); }
.footer-brand-desc, .footer-rg-note, .footer-copyright { color: var(--color-text-muted); }
.social-icon {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--wm-line); color: var(--color-text);
  transition: background .2s, color .2s, transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
.social-icon:hover { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-text); transform: translateY(-2px); }
.footer-divider { border-color: var(--wm-line); }
.footer-age-badge { background: linear-gradient(180deg, var(--color-brand-light), var(--color-brand)); color: var(--color-text); }

@media (max-width: 900px) {
  .main-nav.is-open { background: #fff; }
}

/* The last dropdown (Info) opens towards the left so it never runs off the screen */
@media (min-width: 901px) {
  .main-nav .nav-item:last-of-type .nav-dropdown { left: auto; right: 0; }
  .nav-dropdown a { white-space: nowrap; }
}