/* ═══════════════════════════════════════════════
   play all day — shared styles (nav, footer, mobile menu)
   Loaded on every page via <link rel="stylesheet" href="shared.css">
   Brand palette lives here — single source of truth.
   ═══════════════════════════════════════════════ */

:root {
  color-scheme: light only;
  --gold: #DC9126;
  --teal: #014F51;
  --pink: #FCC9B8;
  --cream: #F7F3EE;
  --pale-yellow: #FFFACA;
  --pistachio: #C8D8A8;
}

/* Keyboard focus visibility (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.announce { background: var(--pink); color: var(--teal); text-align: center; padding: 8px 20px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.03em; }
.nav-links { display: flex; gap: 40px; list-style: none; align-items: center; }
.stripe { height: 14px; background: repeating-linear-gradient(90deg, var(--pink) 0px, var(--pink) 20px, var(--gold) 20px, var(--gold) 40px); }
.checker { background-color: #C8D8A8; }
.footer-inner { padding: 52px 80px 36px; display: grid; grid-template-columns: 1fr 1fr 220px; gap: 48px; align-items: start; max-width: 1000px; margin: 0 auto; }
@media (max-width: 768px) {
  nav a[aria-label="Wishlist"] { width: 44px !important; height: 44px !important; }
  nav a[href="cart.html"] { min-height: 44px !important; }
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr !important; gap: 28px !important; padding: 40px 24px 28px !important; }
}
.fcol h4 { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #2D5016; margin-bottom: 14px; }
.fcol ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.fcol ul li a { text-decoration: none; color: rgba(45,80,22,0.75); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fsub h4 { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #2D5016; margin-bottom: 14px; }
.fsub input { display: block; width: 100%; padding: 9px 14px; border: 1.5px solid rgba(45,80,22,0.2); border-radius: 6px; font-family: Poppins,sans-serif; font-size: 12px; background: rgba(255,255,255,0.55); color: #2D5016; margin-bottom: 10px; outline: none; }
.fsub button { display: block; width: 100%; padding: 9px; background: #2D5016; color: #FFFACA; border: none; border-radius: 6px; font-family: Poppins,sans-serif; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.footer-bar { padding: 12px 80px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(45,80,22,0.6); background: rgba(45,80,22,0.08); }
@media (max-width: 768px) {
  nav { padding: 12px 20px 0 !important; }
}
@media (max-width: 768px) {
  .nav-links { display: none !important; }
}
@media (max-width: 768px) {
  .nav-search-btn { display: none !important; }
}
@media (max-width: 768px) {
  #hamburger-btn { display: flex !important; }
}
#hamburger-btn { display: none; width: 36px; height: 36px; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; flex-shrink: 0; }
#hamburger-btn span { display: block; width: 22px; height: 2px; background: #014F51; border-radius: 2px; transition: all 0.3s ease; }
#hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger-btn.open span:nth-child(2) { opacity: 0; }
#hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#mobile-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #FFFACA; border-top: 1px solid rgba(1,79,81,0.1); border-bottom: 3px solid #DC9126; z-index: 200; padding: 8px 0 16px; }
#mobile-nav.open { display: block; }
#mobile-nav a { display: block; padding: 13px 24px; font-family: Poppins, sans-serif; font-size: 14px; font-weight: 700; color: #014F51; text-decoration: none; letter-spacing: 0.08em; text-transform: lowercase; border-bottom: 1px solid rgba(1,79,81,0.06); }
#mobile-nav a:last-child { border-bottom: none; }
#mobile-nav a.active { color: #DC9126; }
@media (max-width: 768px) {
  nav { padding-bottom: 4px !important; }
}
@media (max-width: 768px) {
  nav > div:not(#mobile-nav) { padding-bottom: 18px !important; }
}

/* Accessibility: skip to content */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--teal); color: var(--pale-yellow); padding: 10px 18px; z-index: 500; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 700; border-radius: 0 0 8px 0; text-decoration: none; }
.skip-link:focus { left: 0; }