/*
Theme Name: Alexandra Farms
Theme URI: https://www.alexandrafarms.com
Description: Official theme for Alexandra Farms — boutique Colombian garden rose grower
Version: 2.0
Author: Alexandra Farms
*/

/* ── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  --green:       #0D3727;
  --green-dark:  #0A2C20;  /* NOT a second brand color: the hover/pressed step under --green. Buttons and the directory bar only. Never for headings or body text — that was drift from the July palette and was cleaned up 2026-08-21. */
  --green-light: #E8F4EE;
  --gold:        #0D3727;
  --gold-light:  #C9A9B3;
  --fuchsia:     #0D3727;
  --fuchsia-deep:#0D3727;
  --forest:      #0D3727;
  --garnet:      #0D3727;
  --bordeaux:    #6E1F2A;  /* Jewel accent. Print/packaging + content links on light grounds. Not for UI chrome/layout fills. */
  --pine:        #0D3727;
  --cream:       #FAF7F2;
  --cream-dark:  #F2EDE4;
  --ivory:       #FDFAF6;
  --charcoal:    #1C1C1C;
  --text:        #2E2B26;
  --muted:       #6B6560;
  --body:        #1A1A1A;  /* canonical body-copy = whisper-black on screen; PRINT = 100% K black. Use for ALL reading text. */
  --border:      #DDD5C8;
  --border-light:#EDE8E0;
  --white:       #FFFFFF;

  --font-primary: 'Palatino', 'Palatino Linotype', 'EB Garamond', Georgia, serif;
  --font-body:    'Source Serif 4', 'Source Serif Pro', Georgia, serif;  /* reading text (chosen 2026-07-08): clean, confident, quiet under Palatino headings */
  --font-script:  'Palatino', 'Palatino Linotype', 'EB Garamond', Georgia, serif;
  --font-ui:      'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --fs-body: 15px;  /* single control for reading/body-copy size site-wide (Source Serif reads large; 15px ≈ 16px of most fonts). Change here to retune. */
  --fs-footer: 13px;  /* footer body copy: same face as body (Source Serif) but deliberately smaller than page body (Tea 2026-07-16). */
}

/* ── COLLECTION BRAND SYSTEMS ──────────────────────────────────── */
.collection-deluxe {
  --coll-primary:    #0D3727;
  --coll-bg:         #F0F8F4;
  --coll-font-name:  'Palatino', 'Palatino Linotype', Georgia, serif;
  --coll-font-script:'Palatino', 'Palatino Linotype', 'EB Garamond', Georgia, serif;
}
.collection-david-austin {
  --coll-primary:    #051C2C;
  --coll-bg:         #EEF0F2;
  --coll-font-name:  'EB Garamond', Georgia, serif;
  --coll-font-script:'White Garden', cursive;
}
.collection-princess {
  --coll-primary:    #A20067;
  --coll-bg:         #FAF0F6;
  --coll-font-name:  'Simonetta', Georgia, serif;
  --coll-font-script:'Brandon Grotesque', sans-serif;
}
.collection-wabara {
  --coll-primary:    #1F150A;
  --coll-bg:         #F5F2EE;
  --coll-font-name:  'Galano Grotesque', sans-serif;
  --coll-font-script:'Proxima Nova', sans-serif;
}

/* ── BASE RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--white); color: var(--text); line-height: 1.7; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── TYPOGRAPHY ────────────────────────────────────────────────── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-primary); font-weight: 400; line-height: 1.2; }
.script { font-family: var(--font-script);font-style:italic; }
.eyebrow {
  font-family: var(--font-ui);
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--green);
}
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green);
}

/* ── NAV ───────────────────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(253,250,246,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .875rem 2.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.site-logo img { height: 56px; width: auto; }
.main-nav { display: flex; gap: .125rem; }
.main-nav a {
  font-family: var(--font-primary);
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text); padding: .5rem .875rem;
  transition: color .2s; position: relative;
}
.main-nav a::after {
  content: ''; position: absolute; bottom: 0;
  left: .875rem; right: .875rem;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transition: transform .3s; transform-origin: left;
}
.main-nav a:hover::after, .main-nav a.current-menu-item::after { transform: scaleX(1); }
.main-nav a.current-menu-item { color: var(--charcoal); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.nav-toggle span {
  display: block; width: 24px; height: 1.5px;
  background: var(--text); margin: 5px 0; transition: all .3s;
}

/* ── HERO ──────────────────────────────────────────────────────── */
.hero {
  min-height: 60vh;
  padding-top: 80px;
  display: flex;
  align-items: center;
  background: var(--white);
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: none;
  background-size: 48px 48px; opacity: .06; pointer-events: none;
}
.hero-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 2.5rem;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  position: relative; z-index: 1;
}
.hero-eyebrow {
  font-family: var(--font-ui); font-size: .625rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--green); margin-bottom: 1rem; display: block;
}
.hero-script {
  font-family: var(--font-primary); font-style: italic; font-size: 1.75rem;
  color: var(--green); display: block; margin-bottom: 1.25rem; line-height: 1.2;
}
.hero-logo-wrap {
  width: clamp(260px, 34vw, 380px);
  max-width: 80%;
  margin: 0 auto 1.75rem;
}
.hero-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1395 / 1062;
}
@media (max-width: 640px) {
  .hero-logo-wrap { width: clamp(200px, 64vw, 300px); margin-bottom: 1.25rem; }
}
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--green); margin-bottom: 1.5rem; line-height: 1.05;
}
.hero-text { font-size: var(--fs-body); color: var(--muted); line-height: 1.8; max-width: 560px; margin: 0 auto 2.5rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero-image {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.hero-rose {
  width: 85%; height: auto;
  filter: drop-shadow(0 20px 60px rgba(12,71,51,.15));
}
.hero-rose-bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #EAF3EE 0%, #F5EDE4 100%);
}

/* ── BUTTONS ───────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-ui); font-size: .625rem;
  letter-spacing: .2em; text-transform: uppercase;
  padding: .875rem 2rem; border: 1px solid transparent;
  cursor: pointer; transition: all .3s; display: inline-flex; align-items: center; gap: .5rem;
}
.btn-primary { background: var(--green); color: var(--white); border-color: var(--green); }
.btn-primary:hover { background: var(--green-dark); border-color: var(--green-dark); }
.btn-outline { background: transparent; color: var(--green); border-color: var(--green); }
.btn-outline:hover { background: var(--green); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-gold:hover { background: var(--gold-light); }
.btn-white { background: var(--white); color: var(--green); border-color: var(--white); }
.btn-white:hover { background: transparent; color: var(--white); border-color: var(--white); }

/* ── LAYOUT UTILITIES ──────────────────────────────────────────── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
.section { padding: 4rem 0; }
.section-head { text-align: center; margin-bottom: 3rem; }
.section-head .script { font-size: 2.25rem; color: var(--gold); display: block; margin-bottom: .25rem; }

/* ── COLLECTION CARDS ──────────────────────────────────────────── */
.collections-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); }
.coll-card { background: var(--white); text-decoration: none; position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.coll-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,45,30,.14); z-index: 1; }
.coll-card-img { aspect-ratio: 3/4; overflow: hidden; }
.coll-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.coll-card:hover .coll-card-img img { transform: scale(1.05); }
.coll-card-body { padding: 1.5rem; }
.coll-card-label { font-family: var(--font-script);font-style:italic; font-size: 1.25rem; display: block; margin-bottom: .375rem; }
.coll-card-title { font-family: var(--font-ui); font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.coll-card-count { font-family: var(--font-ui); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: .25rem; }

/* ── VARIETY CARDS ─────────────────────────────────────────────── */
.variety-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); }
.vcard { background: var(--white); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.vcard:hover { transform: translateY(-4px); box-shadow: 0 10px 36px rgba(0,45,30,.11); z-index: 1; }
.vcard-img { aspect-ratio: 1; overflow: hidden; position: relative; }
.vcard-img img { width: 100%; height: 100%; object-fit: cover; }
/* No hover zoom on variety cards. The card photos are composed with the bloom
   filling the frame, so scaling in crops the sides of the bloom head: 7 of the
   90 cards were already losing petal, 6 more sat within 1.5% of it. The card
   still lifts and gains a shadow on hover, which is enough. */
.vcard-coll-dot { position: absolute; top: .75rem; right: .75rem; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.8); }
.vcard-body { padding: .875rem 1rem 1rem; }
.vcard-coll-label { font-family: var(--font-script);font-style:italic; font-size: .9375rem; margin-bottom: .125rem; line-height: 1.2; }
.vcard-name { font-family: var(--font-primary); font-size: .5625rem; letter-spacing: .02em; text-transform: none; color: var(--green); margin-bottom: .5rem; }
.vcard-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.vtag { font-family: var(--font-ui); font-size: .4375rem; letter-spacing: .1em; text-transform: uppercase; padding: .175rem .4rem; border: 1px solid var(--border-light); color: var(--muted); background: var(--cream); }
.vtag-frag { background: #F0F7F4; border-color: #C0DDD0; color: var(--green); }
.vtag-spray { background: #F9F5E8; border-color: var(--gold-light); color: #0D3727; }
.vtag-plain { font-family: var(--font-ui); font-size: .4375rem; letter-spacing: .12em; text-transform: uppercase; padding: 0; border: none; background: none; display: inline-flex; align-items: center; white-space: nowrap; }
.vtag-exclusive { font-family: var(--font-script);font-style:italic; font-size: .85rem; line-height: 1; color: var(--fuchsia); text-transform: none; letter-spacing: normal; padding: 0; border: none; background: none; }
.frag-icon { height: 1.6em; width: auto; vertical-align: middle; margin-right: .3em; }

/* ── VARIETY DETAIL ────────────────────────────────────────────── */
.variety-wrap { max-width: 1240px; margin: 0 auto; padding: 4rem 2.5rem; display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.variety-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.variety-gallery-main { grid-column: 1; grid-row: 1/3; aspect-ratio: 4/5; overflow: hidden; }
.variety-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.variety-gallery-thumb { aspect-ratio: 4/3; overflow: hidden; cursor: pointer; }
.variety-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.variety-gallery-thumb:hover img { opacity: .85; }
.variety-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); margin-bottom: 2rem; }
.variety-attr { padding: 1.125rem 1.25rem; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.variety-attr:nth-child(even) { border-right: none; }
.variety-attr:nth-last-child(-n+2) { border-bottom: none; }
.variety-attr-label { font-family: var(--font-ui); font-size: .5625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.variety-attr-value { font-family: var(--font-primary); font-size: 1rem; color: var(--text); }
.fragrance-dots { display: flex; gap: 4px; }
.fragrance-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.fragrance-dot.empty { background: var(--border); }

/* ── STATS BAR ─────────────────────────────────────────────────── */
.stats-bar { background: var(--pine); padding: 3rem 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); text-align: center; gap: 2px; }
.stat { padding: 1.5rem; }
.stat-number { font-family: var(--font-primary); font-size: 3rem; color: var(--white); line-height: 1; margin-bottom: .5rem; }
.stat-label { font-family: var(--font-ui); font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.6); }

/* ── PHOTO-HEADER variant for ivory hero sections ──────────────────
   Add class "af-imghero" to the hero <section>/<div> + an inline
   background-image. Flips the eyebrow + title to white over a dark
   overlay (gold script keeps its color, gains a shadow). ─────────── */
.af-imghero { padding: 4.5rem 1.25rem 5rem !important; }
.af-imghero::after { content:""; position:absolute; inset:0; background:linear-gradient(rgba(12,10,8,.40),rgba(12,10,8,.58)); z-index:0; }
.af-imghero > * { position:relative; z-index:1; }
.af-imghero > div[style*="radial-gradient"] { display:none; }
.af-imghero h1 { color:#fff !important; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.af-imghero span:not([style*="font-script"]) { color:#fff !important; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.af-imghero span[style*="font-script"] { color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.65) !important; }
.af-imghero p { color:#fff !important; text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* ── EDITORIAL SPLIT ───────────────────────────────────────────── */
.editorial { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; }
.editorial-image { position: relative; overflow: hidden; }
.editorial-image img { width: 100%; height: 100%; object-fit: cover; }
.editorial-content { background: var(--ivory); padding: 3rem 4rem; display: flex; flex-direction: column; justify-content: center; }
.editorial-content .script { font-size: 2rem; color: var(--gold); display: block; margin-bottom: .5rem; }
.editorial-content h2 { font-size: 2.5rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 1.5rem; }
.editorial-content p { font-size: var(--fs-body); color: var(--muted); line-height: 1.85; margin-bottom: 1.5rem; }

/* ── FOOTER ────────────────────────────────────────────────────── */
.site-footer { background: #1C1C1C; color: rgba(255,255,255,.75); padding: 5rem 0 2rem; position: relative; overflow: hidden; }
.footer-rose { position: absolute; right: -60px; bottom: -40px; width: 400px; pointer-events: none; opacity: .9; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1.5rem; }
.footer-logo img { height: 60px; width: auto; margin-bottom: 1.25rem; }
.footer-tagline { font-family: var(--font-primary); font-size: .9375rem; color: rgba(255,255,255,.5); line-height: 1.8; max-width: 280px; }
.footer-col-title { font-family: var(--font-ui); font-size: .5rem; letter-spacing: .24em; text-transform: uppercase; color: var(--cream); margin-bottom: 1.25rem; display: block; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { font-family: var(--font-primary); font-size: .9rem; color: rgba(255,255,255,.5); transition: color .2s; }
.footer-links a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-family: var(--font-ui); font-size: .5625rem; letter-spacing: .08em; color: rgba(255,255,255,.3); }

/* ── ARCHIVE / DATABASE ────────────────────────────────────────── */
.archive-wrap { max-width: 1400px; margin: 0 auto; padding: 2.5rem; display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; }
.filter-sidebar { position: sticky; top: 96px; background: var(--white); border: 1px solid var(--border); overflow: hidden; }
.filter-header { background: var(--green); padding: 1.125rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.filter-header h3 { font-family: var(--font-primary); font-size: .625rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.9); font-weight: 400; }
.filter-clear { font-family: var(--font-ui); font-size: .5rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); background: none; border: none; cursor: pointer; transition: color .2s; }
.filter-clear:hover { color: var(--white); }
.filter-group { border-bottom: 1px solid var(--border-light); }
.filter-group:last-child { border-bottom: none; }
.filter-group-head { padding: .875rem 1.5rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: background .15s; }
.filter-group-head:hover { background: var(--cream); }
.filter-group-label { font-family: var(--font-ui); font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text); font-weight: 500; }
.filter-group-arrow { font-size: .5rem; color: var(--muted); transition: transform .2s; }
.filter-group.open .filter-group-arrow { transform: rotate(180deg); }
.filter-options { display: none; padding: .375rem 0 .875rem; }
.filter-group.open .filter-options { display: block; }
.filter-option { display: flex; align-items: center; gap: .625rem; padding: .4rem 1.5rem; cursor: pointer; transition: background .15s; }
.filter-option:hover { background: var(--cream); }
.filter-option input { width: 13px; height: 13px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }
.filter-option-label { font-family: var(--font-primary); font-size: .875rem; color: var(--text); flex: 1; }
.filter-option-count { font-family: var(--font-ui); font-size: .5rem; color: var(--muted); background: var(--cream-dark); padding: .1rem .375rem; }
.filter-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.1); flex-shrink: 0; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-image { display: none; }
  .collections-grid { grid-template-columns: repeat(2,1fr); }
  .variety-grid { grid-template-columns: repeat(3,1fr); }
  .editorial { grid-template-columns: 1fr; }
  .archive-wrap { grid-template-columns: 220px 1fr; }
}
@media (max-width: 768px) {
  .collections-grid, .variety-grid { grid-template-columns: repeat(2,1fr); }
  .variety-wrap { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .archive-wrap { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }
  .main-nav { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 480px) {
  .collections-grid, .variety-grid { grid-template-columns: 1fr; }
  .hero-content { padding: 3rem 1.5rem; }
  .container { padding: 0 1.5rem; }
}

/* ════ ACCESSIBILITY ════════════════════════════════════════════════════════ */
/* Skip-to-content link: hidden until keyboard-focused */
.af-skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 100000;
  background: var(--green); color: #fff; padding: .6rem 1rem;
  font-family: var(--font-ui); font-size: .85rem; border-radius: 4px;
  text-decoration: none; transition: top .15s ease;
}
.af-skip-link:focus { top: 8px; }
#main { scroll-margin-top: 150px; }
#main:focus { outline: none; }
/* Visible keyboard focus ring on interactive elements (mouse clicks unaffected) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On dark backgrounds (footer, photo heroes) use a light ring so it stays visible */
.site-footer a:focus-visible, .site-footer button:focus-visible, .site-footer input:focus-visible,
.af-imghero a:focus-visible, .af-phero--img a:focus-visible {
  outline-color: #F7F2E9;
}
/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Brand refresh 2026: unify all page/hero titles to Pine (near-black green).
   !important so this one rule wins over the per-page inline <style> title rules
   (which load after style.css). Reverting = delete this block. */
.hero-title,.gr-title,.dl-title,.af-title,.dir-title,.mm-title,.wtb-hero h1{color:var(--pine) !important;}

/* Brand refresh Tier 2: dark Pine homepage hero (white logo/light text on deep green;
   designed so a video background can drop in later). Revert = remove this block + the
   hero--dark class + restore the white inline bg in front-page.php. */
.hero--dark{background:var(--pine) !important;}
.hero--dark::before{display:none;}
.hero--dark .hero-eyebrow{color:rgba(255,255,255,.8);}
.hero--dark .hero-script{color:#fff;}
.hero--dark .hero-title{color:#FFFFFF !important;}
.hero--dark .hero-text{color:rgba(255,255,255,.80);}
.hero--dark .btn-primary{background:#FFFFFF;color:var(--pine);border-color:#FFFFFF;}
.hero--dark .btn-primary:hover{background:transparent;color:#FFFFFF;border-color:#FFFFFF;}