/* ============ Globals (from prototype <style>) ============ */
:root {
  /* Brand type, confirmed with Rachel 8/31.
     Print = Poppins (loaded from Google Fonts).
     Script = "Local Market Script" — a LICENSED face, not on Google Fonts. Load
     its web kit in index.html and it takes over here with no other edits; until
     then Sacramento stands in. */
  --font-print: 'Poppins', sans-serif;
  --font-script: 'Local Market', 'Local Market Script', 'Sacramento', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-print);
  color: #2A2C42;
  background: #FFFBF4;
  -webkit-font-smoothing: antialiased;
}
section { scroll-margin-top: 76px; }
a { -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-family: var(--font-print); }
input:focus, textarea:focus, select:focus {
  outline: 2px solid #E97A6E;
  outline-offset: 1px;
  border-color: #E97A6E !important;
}

@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes floaty2 { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-20px) rotate(10deg)} }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes wiggle { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }

/* ============ Hover states (replacing the design tool's style-hover) ============ */
.nav-link:hover { background: #F7D4CD; }
.btn-lift:hover { transform: translateY(-2px); }
.btn-lift3:hover { transform: translateY(-3px); }
.btn-outline-dark:hover { background: #2A2C42; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* Full-bleed hero */
/* !important because .hero-badge carries an inline display:flex to center the mark. */
@media (max-width: 900px) { .hero-badge { display: none !important; } }

/* Mobile nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 9px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: #2A2C42;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 8px 16px 16px;
    background: #FFFBF4;
    border-bottom: 1px solid #F2E2D9;
    box-shadow: 0 18px 30px rgba(42,44,66,.10);
  }
  .nav-links.open { display: flex !important; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
  .nav-links a:last-child { margin: 8px 0 0; text-align: center; }
}