/* Splash page layout — nav, footer, and each section in sections/*.njk.
   Sections alternate dark/light down the page (.bg-dark / .bg-light,
   applied per section in each sections/*.njk file); nav and footer sit
   outside <main> and stay on the page's base dark background. */

.site-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 0.5px solid var(--border); }
.nav-brand { font-family: var(--font-logo); font-size: 20px; color: var(--ivory); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { color: var(--ivory); text-decoration: none; font-size: 13px; }
.nav-shop { background: var(--ivory); color: var(--dark) !important; padding: 6px 14px; border-radius: 14px; }
.nav-lang { font-size: 12px; color: var(--taupe); text-decoration: none; }

main { max-width: 960px; margin: 0 auto; padding: 0 24px; }
main section { padding: 64px 0; }
main h2 { font-family: var(--font-display); font-size: 28px; font-weight: 400; margin-bottom: 16px; }

/* Full-bleed alternating backgrounds: box-shadow paints the color out to
   the viewport edge, clip-path stops it from also bleeding vertically
   into the next section. */
.bg-dark, .bg-light { clip-path: inset(0 -100vmax); }
.bg-dark  { background: var(--dark);  color: var(--ivory); box-shadow: 0 0 0 100vmax var(--dark); }
.bg-light { background: var(--ivory); color: var(--dark);  box-shadow: 0 0 0 100vmax var(--ivory); }

.hero { text-align: center; padding: 96px 0 64px; }
.hero-logo { width: 100%; max-width: 500px; height: auto; margin-bottom: 24px; }
.hero-tag { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.hero-sub { color: var(--taupe); font-size: 16px; max-width: 480px; margin: 0 auto 28px; }

.bg-dark .section-intro  { color: var(--taupe); }
.bg-light .section-intro { color: rgba(69, 67, 61, 0.6); }
.section-intro { max-width: 640px; margin-bottom: 24px; }

.teas-cta { display: inline-block; background: var(--dark); color: var(--ivory); text-decoration: none; padding: 12px 28px; border-radius: 20px; font-size: 14px; }

.tea-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-bottom: 24px; }
.tea-tile { display: block; text-decoration: none; color: var(--dark); text-align: center; }
.tea-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: rgba(69, 67, 61, 0.12); margin-bottom: 8px; }
.tea-tile-name { display: block; font-size: 13px; }
.tea-tile-sub { display: block; font-size: 11px; color: rgba(69, 67, 61, 0.6); margin-top: 2px; }

.wa-btn { display: inline-block; background: var(--save); color: #fff; text-decoration: none; padding: 12px 28px; border-radius: 20px; font-size: 14px; }

.site-footer { display: flex; justify-content: space-between; padding: 24px; font-size: 12px; color: var(--taupe); border-top: 0.5px solid var(--border); }

@media (max-width: 640px) {
  .site-nav { flex-wrap: wrap; gap: 10px; }
  .nav-links { order: 3; width: 100%; justify-content: center; }
  .site-footer { flex-direction: column; gap: 6px; text-align: center; }
}