/* ===================================================================
   Glassy Brook Chocolaterie – style.css
   Aesthetic: monochrome_sophisticated (black/white/gray, dramatic contrast, elegant type)
   Brand accents used subtly: #3A2313, #2F5B4E, #F5EFE6
   Layout: Mobile-first, Flexbox-only (no CSS Grid/Columns)
   =================================================================== */

/* -----------------------------
   0) CSS RESET & NORMALIZE
   ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2rem; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 2px solid #2F5B4E; outline-offset: 2px; }

/* -----------------------------
   1) THEME TOKENS
   ----------------------------- */
:root {
  /* Monochrome core */
  --ink: #0F0F0F;           /* primary text */
  --ink-2: #1A1A1A;         /* headers */
  --ink-3: #3A3A3A;         /* secondary text */
  --paper: #FFFFFF;         /* base background */
  --paper-alt: #F7F7F7;     /* section alternate */
  --paper-soft: #FAFAFA;    /* cards / testimonials */
  --line: #E6E6E6;          /* dividers */
  --line-strong: #BEBEBE;   /* stronger borders */
  --shadow: rgba(0,0,0,0.08);

  /* Brand accents – used subtly within monochrome */
  --brand-1: #3A2313; /* cocoa brown */
  --brand-2: #2F5B4E; /* deep green */
  --brand-accent: #F5EFE6;  /* warm off-white */

  /* Typography */
  --ff-display: Georgia, "Times New Roman", serif;
  --ff-body: Verdana, Geneva, sans-serif;

  /* Radii & elevation */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --elev-1: 0 6px 20px rgba(0,0,0,0.08);
  --elev-2: 0 10px 30px rgba(0,0,0,0.12);

  /* Sizing */
  --container-max: 1200px;
  --pad-x: 20px;
  --pad-y: 24px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 30px;
}

/* Selection */
::selection { background: var(--brand-accent); color: var(--ink); }

/* -----------------------------
   2) GLOBAL TYPOGRAPHY
   ----------------------------- */
body {
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); color: var(--ink-2); font-weight: 700; line-height: 1.2; }

h1 { font-size: 32px; letter-spacing: 0.2px; }
h2 { font-size: 24px; margin-bottom: 16px; }
h3 { font-size: 18px; margin-bottom: 10px; }

p { color: var(--ink); font-size: 16px; }

.eyebrow { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

ul { display: block; }
li { margin-bottom: 8px; }

/* Links */
a { color: var(--ink); border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
a:hover { color: var(--ink-2); border-color: var(--ink-3); }

/* -----------------------------
   3) LAYOUT PRIMITIVES (Flex only)
   ----------------------------- */
.container {
  display: flex;            /* Flex-only layout */
  flex-direction: column;   /* Mobile-first */
  align-items: center;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.content-wrapper {
  display: flex;            /* Flex-only */
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 32px 0;
}

/* Mandatory spacing patterns */
.section { margin-bottom: 60px; padding: 40px 20px; }
.card-container { display: flex; flex-wrap: wrap; gap: 24px; }
.card { margin-bottom: 20px; position: relative; }
.content-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.text-image-section { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.testimonial-card { display: flex; align-items: center; gap: 20px; padding: 20px; }
.feature-item { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }

/* Utility gaps */
.gap-20 { gap: 20px; }
.gap-30 { gap: 30px; }

/* -----------------------------
   4) HEADER & NAVIGATION
   ----------------------------- */
.site-header {
  position: relative;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.site-header .container {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px;
  gap: 12px;
}
.logo img { height: 34px; width: auto; }

/* Main nav – hidden on mobile */
.main-nav { display: none; align-items: center; gap: 16px; }
.main-nav a {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border-bottom: none;
}
.main-nav a:hover { background: var(--paper-alt); }

.header-cta { display: none; align-items: center; gap: 10px; }

/* Mobile hamburger */
.mobile-menu-toggle {
  font-size: 22px;
  line-height: 1;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--paper-alt);
  transition: background .2s ease, transform .2s ease;
}
.mobile-menu-toggle:hover { background: #EDEDED; transform: translateY(-1px); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
  padding: 20px;
  background: rgba(10,10,10,0.96);
  color: #fff;
  transform: translateX(100%);
  transition: transform .35s ease;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end;
  font-size: 22px; color: #fff; opacity: .9;
  padding: 6px 8px; border-radius: var(--radius-sm);
}
.mobile-nav { display: flex; flex-direction: column; gap: 14px; width: 100%; margin-top: 10px; }
.mobile-nav a {
  color: #fff;
  padding: 12px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.mobile-nav a:hover { background: rgba(255,255,255,0.08); }

/* -----------------------------
   5) BUTTONS
   ----------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--ink-2); text-decoration: none; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .1s ease; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover { background: #000; box-shadow: var(--elev-1); transform: translateY(-1px); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--ink-3); }
.btn.secondary:hover { background: var(--paper-alt); border-color: var(--ink-2); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; }

.cta-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* -----------------------------
   6) HERO & COMMON SECTION STYLES
   ----------------------------- */
.hero { background: var(--paper); }
.hero .content-wrapper { padding-top: 36px; padding-bottom: 14px; }
.hero h1 { font-size: 28px; }
.hero p { max-width: 70ch; color: var(--ink); }

/* Info rows */
.usp-list, .badge-row, .trust-badges, .category-teasers, .rating-summary, .testimonial-list, .trust-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.usp-list li { list-style: disc; margin-left: 16px; color: var(--ink-3); }
.badge-row span, .trust-badges span, .trust-row span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-soft);
}
.badge-row img, .trust-badges img, .trust-row img { width: 18px; height: 18px; filter: grayscale(100%); opacity: .9; }

.text-section { display: flex; flex-direction: column; gap: 10px; }

/* Alternating section backgrounds to add rhythm while staying monochrome */
.features, .collections, .filters, .gift-options, .craft, .sustainability, .experiences, .recognition, .contact-details, .help-topics, .customer-service, .policy, .gdpr-details, .cookie-info, .terms, .next-steps {
  background: var(--paper-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* -----------------------------
   7) TESTIMONIALS & QUOTES
   ----------------------------- */
.testimonials .content-wrapper { gap: 22px; }
.testimonial-list { gap: 16px; }
.testimonial-card {
  flex: 1 1 280px;
  background: #FFFFFF; /* CRITICAL: light background for readability */
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
}
.testimonial-card p { color: var(--ink); }
.testimonials .rating-summary p { color: var(--ink-3); }

.featured-quote {
  font-family: var(--ff-display);
  font-size: 18px;
  font-style: italic;
  color: var(--ink-2);
  padding: 16px 18px;
  border-left: 3px solid var(--ink);
  background: var(--paper-soft);
  border-radius: var(--radius-sm);
}

/* -----------------------------
   8) FOOTER
   ----------------------------- */
.site-footer { background: #e09947; color: #F3F3F3; border-top: 1px solid #111; }
.site-footer .content-wrapper {
  gap: 16px;
  padding-top: 28px; padding-bottom: 34px;
}
.site-footer a { color: #F3F3F3; border-bottom: 1px solid transparent; }
.site-footer a:hover { border-color: rgba(255,255,255,0.35); }
.footer-nav, .footer-menus { display: flex; flex-wrap: wrap; gap: 12px; }
.newsletter, .contact-snippet { display: flex; flex-direction: column; gap: 10px; }
.trust-row span { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
.trust-row img { filter: invert(1) grayscale(100%); }

/* -----------------------------
   9) PAGE-SPECIFIC TWEAKS
   ----------------------------- */
/* Shop hints */
.sorting-hint { color: var(--ink-3); font-size: 14px; }

/* Collections */
.collections .text-section h3 { font-size: 18px; }

/* Policy/Terms blocks */
.policy .text-section, .terms .text-section, .gdpr-details .text-section, .cookie-info .text-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

/* Contact details list emphasis */
.contact-details a, .contact-cta a { border-bottom: 1px solid var(--line-strong); }

/* Next steps bullet spacing */
.next-steps ul { padding-left: 1.2rem; }

/* -----------------------------
   10) CARDS / GENERIC ELEMENTS
   ----------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-1);
  transition: box-shadow .25s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }

/* -----------------------------
   11) MOBILE MENU & NAVIGATION (animation)
   ----------------------------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.hero .content-wrapper > * { animation: fadeInUp .6s ease both; }
.hero .content-wrapper > *:nth-child(1) { animation-delay: .05s; }
.hero .content-wrapper > *:nth-child(2) { animation-delay: .1s; }
.hero .content-wrapper > *:nth-child(3) { animation-delay: .15s; }

/* -----------------------------
   12) COOKIE CONSENT BANNER & MODAL
   ----------------------------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: none; /* hidden by default */
  padding: 14px;
  background: #141414;
  color: #fff;
  border-top: 1px solid #222;
}
.cookie-banner.show { display: flex; }
.cookie-banner .container { flex-direction: column; align-items: stretch; gap: 10px; }
.cookie-banner .cookie-text { color: #EDEDED; font-size: 14px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { border-color: rgba(255,255,255,0.25); }
.cookie-actions .btn.primary { background: #fff; color: #000; border-color: #fff; }
.cookie-actions .btn.secondary { background: transparent; color: #fff; }
.cookie-actions .btn.ghost { background: rgba(255,255,255,0.1); color: #fff; border-color: transparent; }
.cookie-actions .btn.ghost:hover { background: rgba(255,255,255,0.2); }

/* Cookie settings modal */
.cookie-modal {
  position: fixed; inset: 0; z-index: 1200; display: none;
  background: rgba(0,0,0,0.6);
  align-items: center; justify-content: center;
  padding: 20px;
}
.cookie-modal.open { display: flex; }
.cookie-modal .modal-content {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; max-width: 640px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--elev-2);
  padding: 18px;
}
.cookie-modal h3 { font-size: 20px; }
.cookie-categories { display: flex; flex-direction: column; gap: 12px; }
.cookie-category { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-soft); }
.cookie-category .label { display: flex; flex-direction: column; gap: 4px; }
.cookie-category .hint { font-size: 13px; color: var(--ink-3); }

/* Toggle switch (decorative pseudo-elements allowed) */
.toggle { position: relative; width: 44px; height: 24px; border-radius: 20px; background: #D0D0D0; transition: background .2s ease; }
.toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .2s ease; }
.toggle.on { background: var(--brand-2); }
.toggle.on::after { transform: translateX(20px); }

.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* -----------------------------
   13) ACCESSIBILITY & FORMS
   ----------------------------- */
:where(button, a).focus-ring:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* -----------------------------
   14) RESPONSIVE BEHAVIOR
   ----------------------------- */
@media (min-width: 480px) {
  h1 { font-size: 34px; }
}

@media (min-width: 768px) {
  .hero h1 { font-size: 40px; }

  /* Header */
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .mobile-menu-toggle { display: none; }

  /* Layout helpers */
  .content-wrapper { gap: 22px; padding-top: 40px; padding-bottom: 40px; }
  .text-image-section { flex-direction: row; align-items: center; }

  /* Flex rows for section blocks */
  .features .content-wrapper, .about .content-wrapper, .services .content-wrapper,
  .collections .content-wrapper, .filters .content-wrapper, .gift-options .content-wrapper,
  .craft .content-wrapper, .sustainability .content-wrapper, .experiences .content-wrapper,
  .recognition .content-wrapper, .policy .content-wrapper, .gdpr-details .content-wrapper,
  .cookie-info .content-wrapper, .terms .content-wrapper, .next-steps .content-wrapper,
  .contact-details .content-wrapper, .help-topics .content-wrapper, .customer-service .content-wrapper {
    /* stack by default but allow multi-block rows */
    gap: 22px;
  }

  .testimonial-list { gap: 20px; }
}

@media (min-width: 1024px) {
  h1 { font-size: 48px; }
  h2 { font-size: 32px; }
  h3 { font-size: 20px; }

  .site-header .container { padding-top: 16px; padding-bottom: 16px; }

  /* Footer layout as row */
  .site-footer .content-wrapper { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
  .newsletter, .contact-snippet, .footer-nav, .footer-menus, .trust-row { flex: 1 1 220px; }
}

/* -----------------------------
   15) MICRO INTERACTIONS & DETAILS
   ----------------------------- */
hr { border: none; height: 1px; background: var(--line); }
blockquote { margin: 0; }

/* Decorative top borders for section titles to hint brand subtly in monochrome */
.content-wrapper h2 { position: relative; padding-top: 6px; }
.content-wrapper h2::before { content: ""; display: block; width: 34px; height: 2px; background: var(--ink); opacity: .85; margin-bottom: 8px; }

/* Icon tint in light areas stays mono */
.badge-row img, .trust-badges img { filter: grayscale(100%) contrast(110%); }

/* Inputs (if any appear later) */
input, select, textarea { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(58,35,19,0.15); }

/* -----------------------------
   16) MANDATORY MARGINS BETWEEN CONTENT BLOCKS
   ----------------------------- */
.content-wrapper > * + * { margin-top: 0; } /* gaps already handled */
section + section { margin-top: 16px; }

/* Ensure adequate spacing in dense lists */
.text-section ul { display: flex; flex-direction: column; gap: 6px; }

/* -----------------------------
   17) SAFE IMAGE SIZING IN NAV/FOOTER BADGES
   ----------------------------- */
.trust-badges span, .trust-row span { white-space: nowrap; }

/* -----------------------------
   18) VISUAL HIERARCHY ENHANCERS
   ----------------------------- */
/* Subtle card stripe using brand accent while keeping mono dominance */
.card::before { content: ""; display: block; height: 3px; width: 100%; background: linear-gradient(to right, rgba(0,0,0,0.12), rgba(0,0,0,0)); border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }

/* -----------------------------
   19) PRINT SAFE (Optional light) */
@media print {
  .mobile-menu, .mobile-menu-toggle, .site-header .header-cta { display: none !important; }
  a { text-decoration: underline; border: none; }
}

/* -----------------------------
   20) ENSURE NO OVERLAP, FLEX-GAPS EVERYWHERE
   ----------------------------- */
/* All multi-item rows explicitly flex with gaps */
.footer-menus, .footer-nav, .cta-group, .badge-row, .usp-list, .testimonial-list, .trust-row, .category-teasers { gap: 14px; }

/* -----------------------------
   21) DARK MODE HOOK (optional user-agent)
   ----------------------------- */
@media (prefers-color-scheme: dark) {
  /* Keep monochrome character; do not invert brand accents heavily */
}