/* SoundBoss — base component styles */

/* ══ GLOBAL CONTRAST FIXES ══════════════════════════════════
   Ensure readable text everywhere on the site.
   Dark section rules: any element with a dark background must
   have light text. Light section rules: text must be dark. */

/* Product cards — white background, text must be dark */
.product-card .p-4 h3,
.product-card .p-4 p,
.product-card .p-4 a { color: #111827 !important; }
.product-card .p-4 .text-gray-400 { color: #6b7280 !important; }
.product-card .price-tag { color: #d97706 !important; }

/* Chip tags — enough contrast on light bg */
.chip { color: #374151 !important; background: #e5e7eb !important; }

/* Product image area (dark bg) — badge text must be white */
.product-img .product-badge { color: #fff !important; }
.product-badge.badge-flagship { color: #1c1c28 !important; }

/* Shop hero (dark #1c1c28) — ensure all text is light */
.shop-hero h1,
.shop-hero h2,
.shop-hero p,
.shop-hero div,
.shop-hero span { color: #f9fafb; }
.shop-hero .text-amber-400,
.shop-hero .font-bold.text-amber-400 { color: #fbbf24 !important; }
.shop-hero .text-gray-300 { color: #d1d5db !important; }
.shop-hero .text-white { color: #ffffff !important; }

/* ── Contrast fix: readable text insivan all dark sections ── */
.bg-gray-900 .text-gray-400,
.bg-gray-900 .text-gray-500,
[style*="background:#1c1c28"] .text-gray-400,
[style*="background:#1c1c28"] .text-gray-500,
[style*="background: #1c1c28"] .text-gray-400,
[style*="background: #1c1c28"] .text-gray-500 {
    color: #d1d5db !important; /* gray-300 — passes WCAG AA on dark bg */
}
.bg-gray-900 .text-gray-600,
[style*="background:#1c1c28"] .text-gray-600 {
    color: #9ca3af !important;
}
/* Footer base text — overrivan Tailwind default gray-400 → gray-300 */
footer.bg-gray-900 { color: #d1d5db !important; }
footer.bg-gray-900 a { color: #d1d5db !important; }
footer.bg-gray-900 a:hover { color: #fff !important; }
/* Section headings stay white */
.bg-gray-900 .text-gray-200,
[style*="background:#1c1c28"] .text-gray-200 { color: #f3f4f6 !important; }
/* ────────────────────────────────────────────────────── */

/* ── Mobile touch targets: all interactive elements ≥ 44px ── */
button, [type="submit"], [type="button"],
.btn-amber, .qty-btn {
    min-height: 44px;
}
/* Hamburger menu buttons */
#mobileMenuBtn {
    min-height: 44px;
    min-width: 44px;
}

/* ── Sticky CTA bar: safe-area for iPhone notch / home indicator ── */
.sticky-cta {
    padding-bottom: calc(.875rem + env(safe-area-inset-bottom, 0px));
}

/* ── Cookie banner: safe-area ── */
#cookieBanner {
    padding-bottom: max(.75rem, env(safe-area-inset-bottom, .75rem));
}

/* ── Artikel pagina: space for sticky CTA ── */
body:has(.sticky-cta) main {
    padding-bottom: 5rem;
}

/* ══ GLOBAL TYPOGRAPHY STANDARD ════════════════════════════════
   Enforce consistent heading sizes across the entire site.
   Syne font-black (900) is too wivan — cap at font-bold (700). */

/* Artikel pagina H1 — max 1.875rem (30px) on vansktop */
main > .max-w-3xl h1,
main > article h1,
artikel h1 {
    font-size: clamp(1.35rem, 3vw, 1.875rem) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Section pagina H1 (boutique, legal paginas) — max 2.25rem (36px) */
.shop-hero h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    font-weight: 700 !important;
}

/* Product pagina H1 (short product name) — max 1.875rem */
.grid.lg\\:grid-cols-2 h1 {
    font-size: clamp(1.35rem, 3vw, 1.875rem) !important;
    font-weight: 700 !important;
}

/* Never use font-weight 900 in body content */
.font-black {
    font-weight: 700 !important;
}

/* CTA box (dark bg #111827) — all text must be light */
.cta-box { color: #f9fafb !important; }
.cta-box h3 { color: #ffffff !important; }
.cta-box p  { color: #d1d5db !important; }
/* ────────────────────────────────────────────────────────────── */

/* ── Spec label on product paginas: wrap on very small screens ── */
@media(max-width:400px){
    .spec-row { flex-direction: column !important; gap: .25rem; }
    .spec-label { width: auto !important; }
}

/* ── Product card names/prices: smaller on mobile ── */
@media(max-width:480px){
    .prod-name  { font-size: 1.1rem !important; }
    .prod-price { font-size: 1.35rem !important; }
}

/* ── Shop & artikel hero headings: scale down on mobile ── */
@media(max-width:640px){
    .font-syne.text-4xl  { font-size: 1.75rem !important; }
    .font-syne.text-5xl  { font-size: 2rem !important; }
}

/* ── Nieuwsbrief form on homepagina: stack on mobile ── */
@media(max-width:420px){
    #newsletterForm .flex { flex-direction: column; }
    #newsletterForm .flex button { width: 100%; }
}

/* ─────────────────────────────────────────────────────── */
body{font-family:'Inter',system-ui,sans-serif;}
.font-serif{font-family:'Playfair Display',Georgia,serif;}
.prose h2{font-family:'Playfair Display',Georgia,serif;font-size:1.375rem;font-weight:700;color:#111827;margin:1.75rem 0 .6rem;}
.prose h3{font-size:1.05rem;font-weight:700;color:#1f2937;margin:1.25rem 0 .4rem;}
.prose p{line-height:1.8;color:#374151;margin-bottom:1rem;}
.prose ul,.prose ol{color:#374151;margin-bottom:1rem;padding-left:1.5rem;}
.prose li{line-height:1.7;margin-bottom:.3rem;}
.prose ul li{list-style-type:disc;}
.prose ol li{list-style-type:decimal;}
.prose a{color:#e11d48;text-decoration:underline;}
.prose strong{color:#111827;font-weight:700;}