/* ==========================================================================
   Familia Zuccardi Extra Virgin Olive Oil - Design System & Custom Styles
   Seven Pyramid 七銘企業 頂級特級初榨橄欖油專屬樣式
   ========================================================================== */

:root {
  /* Color Palette - Olive Heritage & Terroir */
  --oo-primary: #2D4A3E;          /* Deep Andean Olive Forest */
  --oo-primary-dark: #172B23;     /* Obsidian Emerald */
  --oo-primary-light: #446959;    /* Fresh Olive Leaf */
  --oo-accent-gold: #C5A059;      /* Golden Olive Oil Nectar — surfaces/borders, not body text on light */
  --oo-accent-gold-dark: #876620; /* Burnished Olive Gold — 5.31:1 on #FFF (was #9D7B38 @ 3.9:1) */
  --oo-accent-gold-light: #E8D4A8;/* Warm Sunlight Gold */
  --oo-burgundy: #722F37;         /* Wine Heritage Burgundy */
  
  /* Light Theme Tokens */
  --oo-bg-page: #FAF8F5;
  --oo-bg-surface: #FFFFFF;
  --oo-bg-surface-alt: #F3EFEA;
  --oo-bg-card: #FFFFFF;
  --oo-text-main: #14211A;
  --oo-text-muted: #536259;
  --oo-text-light: #5D6F66;      /* 5.34:1 on #FFF, 5.04:1 on #FAF8F5 (was #7A8D83 @ 3.5:1) */
  --oo-gold-text: #886518;       /* gold legible as text on light surfaces: 5.36:1 on #FFF */
  --oo-border: #E5DFC5;
  --oo-border-soft: #EDE8DE;
  --oo-border-gold: rgba(197, 160, 89, 0.4);
  --oo-shadow-sm: 0 4px 12px rgba(20, 33, 26, 0.04);
  --oo-shadow-md: 0 12px 30px rgba(20, 33, 26, 0.08);
  --oo-shadow-lg: 0 24px 50px rgba(20, 33, 26, 0.12);
  --oo-badge-bg: rgba(45, 74, 62, 0.08);
  --oo-badge-text: #2D4A3E;
  --oo-hero-gradient: linear-gradient(180deg, rgba(20, 33, 26, 0.75) 0%, rgba(20, 33, 26, 0.92) 100%);
}

html.dark {
  /* Dark Luxury Theme Tokens */
  --oo-bg-page: #0B110E;
  --oo-bg-surface: #121A15;
  --oo-bg-surface-alt: #18231D;
  --oo-bg-card: #15201A;
  --oo-text-main: #F4F6F4;
  --oo-text-muted: #A8B8AF;
  --oo-text-light: #7E9287;
  --oo-gold-text: #C5A059;       /* on dark surfaces the original gold already clears AA */
  --oo-border: #24352B;
  --oo-border-soft: #1B2921;
  --oo-border-gold: rgba(197, 160, 89, 0.35);
  --oo-shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.3);
  --oo-shadow-md: 0 14px 36px rgba(0, 0, 0, 0.45);
  --oo-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
  --oo-badge-bg: rgba(197, 160, 89, 0.15);
  --oo-badge-text: #E8D4A8;
  --oo-hero-gradient: linear-gradient(180deg, rgba(11, 17, 14, 0.7) 0%, rgba(11, 17, 14, 0.95) 100%);
}

/* Base resets & typography */
.oo-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 1024px) {
  .oo-container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

/* Section title eyebrow */
.oo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oo-accent-gold-dark);
  margin-bottom: 0.75rem;
}

html.dark .oo-eyebrow {
  color: var(--oo-accent-gold);
}

.oo-heading {
  font-family: 'Cinzel', 'Playfair Display', 'Noto Serif TC', serif;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Glass & Texture Accents */
.oo-glass-card {
  background: var(--oo-bg-card);
  border: 1px solid var(--oo-border);
  border-radius: 12px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.oo-glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--oo-shadow-md);
  border-color: var(--oo-accent-gold);
}

/* Gold Accent Border Button */
.oo-btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.875rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #14211A;
  background: linear-gradient(135deg, #E0C078 0%, #C5A059 100%);
  border: 1px solid #DFBE72;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.25);
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

.oo-btn-gold:hover {
  background: linear-gradient(135deg, #EAD092 0%, #D4AF37 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(197, 160, 89, 0.35);
  color: #0E1712;
}

.oo-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.875rem 1.875rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: transparent;
  border-width: 1px;
  border-style: solid;
  border-radius: 6px;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
}

/* Colour defaults live at zero specificity so per-instance utilities win.
   The hero sits on a dark photo in BOTH themes and sets `text-white
   border-white/30`; without :where() the token below (near-black in the light
   theme) overrode it and rendered those buttons at 1.15:1 — invisible. */
:where(.oo-btn-outline) {
  color: var(--oo-text-main);
  border-color: var(--oo-border);
}

:where(.oo-btn-outline:hover) {
  border-color: var(--oo-accent-gold);
  color: var(--oo-accent-gold-dark);
  background: var(--oo-badge-bg);
}

:where(html.dark .oo-btn-outline:hover) {
  color: var(--oo-accent-gold-light);
}

/* Process Timeline & Infographic Interactive Cards */
.oo-process-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .oo-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .oo-process-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.oo-process-card {
  position: relative;
  background: var(--oo-bg-card);
  border: 1px solid var(--oo-border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
}

.oo-process-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: transparent;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transition: background 0.3s ease;
}

.oo-process-card:hover::before {
  background: linear-gradient(90deg, var(--oo-accent-gold), var(--oo-primary-light));
}

.oo-process-num {
  font-family: 'Cinzel', serif;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--oo-gold-text);
  line-height: 1;
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.oo-process-num span {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--oo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Varietal Tab Switcher */
.oo-tab-btn {
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--oo-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.oo-tab-btn:hover {
  color: var(--oo-text-main);
  border-bottom-color: var(--oo-border);
}

.oo-tab-btn.active {
  color: var(--oo-gold-text);
  border-bottom-color: var(--oo-accent-gold);
}

/* Sensory Meter / Bar */
.oo-meter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
}

/* Allow both the label and the bar+value group to shrink; without this the
   fixed 140px bar pushed the row past the viewport at 320px. */
.oo-meter-row > * {
  min-width: 0;
}

.oo-meter-bar-wrap {
  flex: 0 1 140px;
  width: 140px;
  min-width: 56px;
  height: 8px;
  background: var(--oo-border-soft);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.oo-meter-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--oo-primary-light), var(--oo-accent-gold));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Infographic Image Viewer / Lightbox modal */
.oo-infographic-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--oo-border);
  cursor: zoom-in;
  transition: box-shadow 0.3s ease;
}

.oo-infographic-preview:hover {
  box-shadow: var(--oo-shadow-lg);
}

.oo-zoom-hint {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  background: rgba(20, 33, 26, 0.85);
  color: #FFFFFF;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  font-size: 0.8125rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Interactive Food Pairing Cards */
.oo-pairing-card {
  background: var(--oo-bg-card);
  border: 1px solid var(--oo-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.oo-pairing-card:hover {
  border-color: var(--oo-accent-gold);
  transform: translateY(-4px);
  box-shadow: var(--oo-shadow-md);
}

.oo-pairing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  background: var(--oo-badge-bg);
  color: var(--oo-badge-text);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Myth vs Fact Flip Card */
.oo-fact-card {
  background: var(--oo-bg-card);
  border: 1px solid var(--oo-border);
  border-radius: 12px;
  padding: 1.75rem;
  position: relative;
}

.oo-fact-card.featured {
  border-color: var(--oo-accent-gold);
  background: linear-gradient(180deg, var(--oo-bg-card) 0%, var(--oo-bg-surface-alt) 100%);
}

/* Lightbox Modal */
#oo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#oo-lightbox.open {
  opacity: 1;
  visibility: visible;
}

#oo-lightbox img {
  max-width: 95vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
}

#oo-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

#oo-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Sticky Quick Nav */
.oo-subnav {
  position: sticky;
  top: 72px;
  z-index: 40;
  background: var(--oo-bg-surface);
  border-bottom: 1px solid var(--oo-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.oo-subnav-links {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0.75rem 0;
}

.oo-subnav-links::-webkit-scrollbar {
  display: none;
}

.oo-subnav-link {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oo-text-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.oo-subnav-link:hover,
.oo-subnav-link.active {
  color: var(--oo-accent-gold-dark);
  border-bottom-color: var(--oo-accent-gold);
}

html.dark .oo-subnav-link:hover,
html.dark .oo-subnav-link.active {
  color: var(--oo-accent-gold-light);
}

/* Responsive tweaks */
@media (max-width: 767px) {
  .oo-heading {
    font-size: 1.75rem !important;
  }
}

/* ==========================================================================
   Light-theme contrast corrections

   The markup hard-codes two palette values as Tailwind arbitrary utilities:
   #C5A059 (gold) and #7A8D83 (soft sage). Both were picked against the dark
   theme, where they pass; on the light theme's white / #FAF8F5 surfaces they
   land at 2.3-3.5:1 and fail WCAG AA (4.5:1). 84 text nodes were affected.

   These retarget the utilities to the accessible tokens in the light theme
   only. The three containers that stay dark in BOTH themes (announcement bar,
   hero, footer) carry .oo-on-dark and keep the original values.
   ========================================================================== */
html:not(.dark) .text-\[\#C5A059\] { color: var(--oo-gold-text); }
html:not(.dark) .text-\[\#7A8D83\] { color: var(--oo-text-light); }

/* Sage also fell short on the darkest surfaces (3.7-4.2:1 on the gold-tinted
   panels), so lift it there too rather than restoring the original. */
html.dark .text-\[\#7A8D83\] { color: #8C9F95; }

/* The three containers that stay dark in BOTH themes. These selectors must
   out-specify the html:not(.dark) rules above, hence the leading `html`. */
html :is(.oo-on-dark, .oo-on-dark *).text-\[\#C5A059\] { color: #C5A059; }
html :is(.oo-on-dark, .oo-on-dark *).text-\[\#7A8D83\] { color: #8C9F95; }

/* red-500 is 3.76:1 on white; nudge to a darker red that keeps the hue */
html:not(.dark) .text-red-500 { color: #D1202A; }

/* emerald-600 is 3.55:1 on the light page and 4.3:1 on dark cards */
html:not(.dark) .text-emerald-600 { color: #007C51; }
html.dark .text-emerald-600 { color: #179C6F; }

/* ==========================================================================
   Typography: even line breaks

   Several CJK headings orphaned a 1-2 character last line at desktop
   (the pull quote dropped 「液」 alone onto line 2).
   ========================================================================== */
.oo-heading,
h1, h2, h3 {
  text-wrap: balance;
}

.oo-process-card p,
.oo-pairing-card p {
  text-wrap: pretty;
}

/* ==========================================================================
   Focus visibility

   This page loaded no :focus-visible rules at all, so keyboard users had no
   indicator on any of its links, buttons or tabs.
   ========================================================================== */
.oo-btn-gold:focus-visible,
.oo-btn-outline:focus-visible,
.oo-tab-btn:focus-visible,
.oo-subnav-link:focus-visible,
.oo-pairing-filter-btn:focus-visible,
.oo-infographic-preview:focus-visible,
#oo-lightbox-close:focus-visible {
  outline: 2px solid var(--oo-accent-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.oo-on-dark a:focus-visible,
.oo-on-dark button:focus-visible {
  outline: 2px solid var(--oo-accent-gold-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .oo-glass-card,
  .oo-process-card,
  .oo-pairing-card,
  .oo-btn-gold,
  .oo-btn-outline,
  .oo-meter-fill {
    transition: none;
  }

  .oo-glass-card:hover,
  .oo-pairing-card:hover {
    transform: none;
  }
}