/*
 * Teatre site styles — layered on top of Bootstrap 5.3.x.
 * Loaded after bootstrap.min.css; overrides Bootstrap CSS variables to
 * apply the Tea palette and uses Cormorant Garamond for display headings.
 *
 * Google Fonts are loaded from _base.html with a preload + print/onload
 * stylesheet pattern so the third-party font CSS does not block first paint.
 */

:root {
  --tea-50:  #faf8f3;
  --tea-100: #f0ebd9;
  --tea-200: #d9cfa7;
  --tea-300: #b9a96d;
  --tea-500: #6b6233;
  --tea-700: #3d3a1f;
  --tea-900: #1f1d10;
  --clay-500: #8b4a2b;
  --puer-500: #4a2c1a;

  --bs-body-bg: var(--tea-50);
  --bs-body-color: var(--tea-900);
  --bs-emphasis-color: var(--tea-700);
  --bs-secondary-color: rgba(31, 29, 16, 0.6);
  --bs-tertiary-color: rgba(31, 29, 16, 0.45);
  --bs-primary: var(--tea-700);
  --bs-primary-rgb: 61, 58, 31;
  --bs-link-color: var(--tea-700);
  --bs-link-color-rgb: 61, 58, 31;
  --bs-link-hover-color: var(--clay-500);
  --bs-link-hover-color-rgb: 139, 74, 43;
  --bs-border-color: var(--tea-200);
  --bs-border-color-translucent: rgba(217, 207, 167, 0.5);
  --bs-font-sans-serif: "Inter", "Source Han Sans SC", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  font-family: var(--bs-font-sans-serif);
}

.font-display,
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: "Cormorant Garamond", "Source Han Serif SC", Georgia, serif;
  font-weight: 500;
}

.text-tea       { color: var(--tea-700); }
.text-tea-muted { color: var(--tea-500); }

.fs-7 { font-size: 0.875rem; }
.fs-8 { font-size: 0.75rem; }

.mw-prose { max-width: 65ch; }
.bg-tea-50  { background-color: var(--tea-50) !important; }
.bg-tea-100 { background-color: var(--tea-100) !important; }

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1100;
  transform: translateY(-150%);
  transition: transform 120ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--tea-700);
  border-radius: 0.375rem;
  background: #fff;
  color: var(--tea-700);
  box-shadow: 0 0.25rem 1rem rgba(31, 29, 16, 0.16);
}

.card-link {
  display: block;
  background-color: #fff;
  border: 1px solid var(--tea-200);
  border-radius: 0.5rem;
  padding: 1rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.card-link:hover,
.card-link:focus-visible {
  border-color: var(--tea-300);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  color: inherit;
}

/* Homepage — editorial atlas front door. */
.home-hero {
  min-height: min(720px, calc(100vh - 10rem));
}
.home-hero .display-2 {
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.home-eyebrow {
  letter-spacing: 0.08em;
}
.home-search {
  max-width: 38rem;
}
.home-proof-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--tea-700);
  font-size: 0.875rem;
  font-weight: 600;
}
.home-hero-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.home-hero-image,
.home-atlas-panel,
.home-featured-card {
  border: 1px solid var(--bs-border-color-translucent);
  background: #fff;
  box-shadow:
    rgba(31, 29, 16, 0.06) 0 18px 44px -24px,
    rgba(31, 29, 16, 0.04) 0 6px 18px -8px;
}
.home-section {
  scroll-margin-top: 6rem;
}
.home-path-card,
.home-stat-card,
.home-info-card {
  display: block;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--tea-200);
  border-radius: 1rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.home-path-card:hover,
.home-path-card:focus-visible,
.home-stat-card:hover,
.home-stat-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--tea-300);
  box-shadow: rgba(31, 29, 16, 0.08) 0 10px 26px -18px;
  color: inherit;
}
.home-path-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 1rem;
  border-radius: 9999px;
  background: var(--tea-100);
  color: var(--tea-700);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.home-atlas-panel {
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at top right, rgba(217, 207, 167, 0.35), transparent 34rem),
    #fff;
}
.home-stat-number {
  display: block;
  color: var(--clay-500);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.75rem, 6vw, 4.25rem);
  font-weight: 600;
  line-height: 0.9;
}
.home-featured-card {
  border-radius: 1.5rem;
}
@media (max-width: 767.98px) {
  .home-hero {
    min-height: 0;
  }
  .home-hero .display-2 {
    font-size: 3.25rem;
  }
}

.kv-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1rem;
  row-gap: 0.25rem;
}
.kv-grid dt { color: var(--bs-secondary-color); font-weight: 400; }
.kv-grid dd { margin: 0; }

/*
 * Lightweight typographic block for markdown-rendered content.
 * Replaces Tailwind's @tailwindcss/typography "prose" plugin.
 */
.content { max-width: 65ch; }
.content > * + * { margin-top: 0.75em; }
.content h2 { margin-top: 1.5em; font-size: 1.4rem; color: var(--tea-700); }
.content h3 { margin-top: 1.3em; font-size: 1.2rem; color: var(--tea-700); }
.content p { line-height: 1.65; }
.content ul, .content ol { padding-left: 1.5rem; line-height: 1.65; }
.content li + li { margin-top: 0.25em; }
.content code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9em; }
.content blockquote {
  border-left: 3px solid var(--tea-200);
  padding-left: 1rem;
  color: var(--bs-secondary-color);
}

/* Header / navbar */
.navbar.site-nav {
  background-color: #fff !important;
  border-bottom: 1px solid var(--tea-200);
}
.navbar.site-nav .navbar-brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  color: var(--tea-700);
  letter-spacing: -0.01em;
}
.navbar.site-nav .nav-link { color: var(--tea-900); }
.navbar.site-nav .nav-link:hover,
.navbar.site-nav .nav-link:focus { color: var(--tea-700); }

/* Footer */
.site-footer {
  background-color: #fff;
  border-top: 1px solid var(--tea-200);
  padding: 1.25rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

/* List markers in brewing/steps lists */
.steps-list { padding-left: 1.5rem; }
.steps-list li::marker { color: var(--tea-700); }

/* Tea hero / thumbnail helpers — used by tea list rows and tea detail page. */
.tea-thumb {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 0.375rem;
  object-fit: cover;
  background: var(--bs-tertiary-bg);
}
.tea-hero {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.tea-thumb-placeholder, .tea-hero-placeholder {
  background: linear-gradient(135deg, var(--bs-tertiary-bg) 0%, var(--bs-secondary-bg) 100%);
}
.tea-cat-green   { background: linear-gradient(135deg, #b9d7b1 0%, #6e9c5f 100%); }
.tea-cat-white   { background: linear-gradient(135deg, #f3efe6 0%, #d6cdb4 100%); }
.tea-cat-yellow  { background: linear-gradient(135deg, #f1e6a3 0%, #c9a84e 100%); }
.tea-cat-oolong  { background: linear-gradient(135deg, #d8b890 0%, #8b5a2b 100%); }
.tea-cat-red     { background: linear-gradient(135deg, #d99878 0%, #843a25 100%); }
.tea-cat-dark    { background: linear-gradient(135deg, #8a6c4f 0%, #3d2a1c 100%); }

.category-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(20rem, 38vw, 34rem);
  border: 1px solid var(--bs-border-color-translucent);
  border-radius: 1.5rem;
  background: #fff;
  box-shadow:
    rgba(31, 29, 16, 0.08) 0 24px 60px -30px,
    rgba(31, 29, 16, 0.05) 0 8px 20px -10px;
}
.category-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(250, 248, 243, 0.94) 0%, rgba(250, 248, 243, 0.78) 42%, rgba(250, 248, 243, 0.16) 72%);
  pointer-events: none;
}
.category-hero-copy {
  position: relative;
  z-index: 1;
  max-width: min(34rem, 82%);
  padding: clamp(2rem, 5vw, 4.5rem);
  color: var(--tea-900);
}
.category-hero-copy .display-3 {
  color: var(--tea-700);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.category-hero-green  .category-hero-copy .display-3 { color: #3d6b3a; }
.category-hero-white  .category-hero-copy .display-3 { color: #6f674f; }
.category-hero-yellow .category-hero-copy .display-3 { color: #8d6a18; }
.category-hero-oolong .category-hero-copy .display-3 { color: #6f3f22; }
.category-hero-red    .category-hero-copy .display-3 { color: #843a25; }
.category-hero-dark   .category-hero-copy .display-3 { color: #3d2a1c; }
@media (max-width: 767.98px) {
  .category-hero {
    min-height: 28rem;
  }
  .category-hero::after {
    background: linear-gradient(180deg, rgba(250, 248, 243, 0.96) 0%, rgba(250, 248, 243, 0.86) 56%, rgba(250, 248, 243, 0.26) 100%);
  }
  .category-hero-copy {
    max-width: 100%;
  }
}

/* Listing thumbnail (where-to-buy panel) */
.listing-thumb {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 0.375rem;
  object-fit: cover;
  background: var(--bs-tertiary-bg);
}
.listing-thumb-placeholder {
  background: linear-gradient(135deg, var(--bs-tertiary-bg) 0%, var(--bs-secondary-bg) 100%);
}

/* Listing price-history sparkline (rendered inline by listing_sparkline tag) */
.listing-sparkline {
  vertical-align: middle;
  opacity: 0.85;
}
.listing-sparkline--up   { color: #b04a2a; }  /* warmer red — price up */
.listing-sparkline--down { color: #5a7d3a; }  /* tea-green — price down */
.listing-sparkline--flat { color: var(--bs-secondary-color); }

/* Shared faceted filters */
.filters-desktop.sticky-md-top {
  top: 5rem;
  z-index: 10;
}
.filter-accordion .accordion-item {
  background: transparent;
  border-color: var(--bs-border-color-translucent);
}
.filter-accordion .accordion-button::after {
  width: 0.9rem;
  height: 0.9rem;
  background-size: 0.9rem;
}
.filter-option-list {
  max-height: 14rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.filters-offcanvas {
  --bs-offcanvas-width: min(22rem, 92vw);
}

/* Region map (apps/regions/templates/regions/map.html) */
.region-map {
  width: 100%;
  height: auto;
  display: block;
  background: var(--tea-50);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
}
.region-map-bg {
  fill: var(--tea-50);
}
.region-map-axis {
  stroke: var(--bs-border-color);
  stroke-width: 1;
}
.region-map-axis-label {
  fill: var(--bs-secondary-color);
  font-size: 11px;
  font-family: var(--bs-font-sans-serif);
}
.region-map-marker circle {
  fill: var(--tea-700);
  stroke: var(--tea-50);
  stroke-width: 2;
  transition: r 120ms ease, fill 120ms ease;
}
.region-map-marker text {
  fill: var(--tea-900);
  font-size: 12px;
  font-family: var(--bs-font-sans-serif);
  font-weight: 500;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--tea-50);
  stroke-width: 3;
  stroke-linejoin: round;
}
.region-map-marker:hover circle,
.region-map-marker:focus circle {
  fill: var(--clay-500);
  /* SVG attribute, not a CSS prop in older Safari — set both */
  r: 8;
}
.region-map-marker:focus {
  outline: 2px solid var(--clay-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Tea-recommendation quiz (apps/pages/templates/pages/quiz.html) */
.quiz-form fieldset {
  border: 0;
  padding: 0;
}
.quiz-form legend {
  margin-bottom: 0.75rem;
}
.quiz-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  background: var(--tea-50);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  font-size: 0.95rem;
}
.quiz-option:hover {
  background: var(--tea-100);
  border-color: var(--tea-300);
}
.quiz-option input[type="radio"] {
  accent-color: var(--tea-700);
}
.quiz-option:has(input:checked) {
  background: var(--tea-100);
  border-color: var(--tea-700);
  font-weight: 500;
}