/*
Theme Name: BeeCurious 2026
Theme URI: https://beecurious.tv/
Author: BeeCurious Honey Farm
Description: A radically simplified single-product storefront for BeeCurious Honey Farm. Photo-split homepage with an inline WooCommerce buy panel. Built to the "Modernist" design system: Archivo, zero radius, 2px rules, accent red.
Version: 1.0.3
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: beecurious-2026
Tags: e-commerce, one-column, custom-colors, custom-logo, editor-style, full-width-template
WC requires at least: 8.0
WC tested up to: 11.0
*/

/* ══════════════════════════════════════════════════════════════════════════
   1. TOKENS
   Ported from the design handoff's reference/styles.css. This block is the
   source of truth for the system's look. Retune here.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;

  /* 40% ink. rgba first so old browsers get something; color-mix wins where supported. */
  --color-divider: rgba(32, 30, 29, 0.4);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  /* Ink at fixed opacities — used constantly, so they get names. */
  --ink-78: rgba(32, 30, 29, 0.78);
  --ink-70: rgba(32, 30, 29, 0.70);
  --ink-55: rgba(32, 30, 29, 0.55);

  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Zero. Everywhere. Non-negotiable in this system. */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  --rule: 2px;

  --shadow-sm: 0 1px 2px rgba(45, 43, 43, 0.14);
  --shadow-md: 0 3px 10px rgba(45, 43, 43, 0.16);
  --shadow-lg: 0 12px 32px rgba(45, 43, 43, 0.22);
}

@supports (color: color-mix(in srgb, red 40%, transparent)) {
  :root {
    --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
    --ink-78: color-mix(in srgb, var(--color-text) 78%, transparent);
    --ink-70: color-mix(in srgb, var(--color-text) 70%, transparent);
    --ink-55: color-mix(in srgb, var(--color-text) 55%, transparent);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. RESET + BASE
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-text); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption { font-size: 11px; margin-top: var(--space-1); color: var(--ink-55); }

.text-muted { color: var(--ink-55); }

/* Focus: always the accent ring, never the browser default. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
::selection { background: rgba(236, 48, 19, 0.3); }

.screen-reader-text {
  border: 0; clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none; height: auto; width: auto; z-index: 100000;
  background: var(--color-bg); padding: 12px 20px;
  left: 6px; top: 6px; font-size: 14px;
  outline: 2px solid var(--color-accent); outline-offset: 2px;
}

.hr { height: var(--rule); border: 0; margin: var(--space-4) 0; background: var(--color-divider); }
hr { height: var(--rule); border: 0; background: var(--color-divider); }

/* ══════════════════════════════════════════════════════════════════════════
   3. BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn svg { display: block; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }

.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: rgba(32, 30, 29, 0.07); color: var(--color-text); }
.btn-secondary:active { background: rgba(32, 30, 29, 0.14); }

.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: rgba(236, 48, 19, 0.1); }

.btn-lg { font-size: 16px; padding: 14px 28px; }
.btn-block { width: 100%; justify-content: flex-start; text-align: left; }

/* ══════════════════════════════════════════════════════════════════════════
   4. FORMS
   ══════════════════════════════════════════════════════════════════════ */

.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--ink-70); }

.input,
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
  width: 100%; min-height: 36px; padding: 6px 10px;
  font-family: inherit; font-size: 14px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.input:hover, input:hover, textarea:hover, select:hover { border-color: rgba(32, 30, 29, 0.45); }
.input:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--color-accent); outline-offset: 0;
}
textarea, textarea.input { min-height: 90px; resize: vertical; }

/* ══════════════════════════════════════════════════════════════════════════
   5. HEADER / NAV
   ══════════════════════════════════════════════════════════════════════ */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border-bottom: var(--rule) solid var(--color-divider);
}

.site-brand {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.site-brand img { width: auto; }
.site-brand .brand-bee  { height: 40px; }
.site-brand .brand-text { height: 34px; }
/* Text fallback if the wordmark image is ever removed from the media library. */
.site-brand .brand-fallback {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; letter-spacing: -0.015em;
}

.site-header-links { display: flex; align-items: center; gap: var(--space-4); }
.site-header-links a { font-size: 14px; text-decoration: none; color: inherit; }
.site-header-links a:hover,
.site-header-links a[aria-current="page"] { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   6. HOMEPAGE — MOCKUP C, PHOTO SPLIT
   ══════════════════════════════════════════════════════════════════════ */

.site {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--color-bg); color: var(--color-text);
}
.site-main { flex: 1; display: flex; flex-direction: column; }
/* The split is meant to read full-height, so the grid takes the slack rather
   than leaving dead space between its bottom rule and the footer. */
.site-main > .split-grid { flex: 1; }

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-bottom: var(--rule) solid var(--color-divider);
}

.split-photo {
  margin: 0;
  position: relative;
  min-height: 420px;
  border-right: var(--rule) solid var(--color-divider);
  background: var(--color-surface);
}
.split-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Full colour. The handoff is explicit: do not desaturate. */
  filter: none;
}

.split-panel {
  padding: clamp(32px, 6vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
  gap: 28px;
}

.hero-kicker {
  display: block;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: 16px;
}

.hero-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Optical alignment — pulls the cap edge flush with the rules below. */
  margin: 0 0 0 -0.058em;
}

.hero-sub {
  font-size: 16px; line-height: 26px;
  max-width: 46ch;
  margin: 20px 0 0;
  color: var(--ink-78);
}

/* — format list — */
.format-list {
  display: flex; flex-direction: column;
  border-top: var(--rule) solid var(--color-divider);
}
.format-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px;
  border-bottom: var(--rule) solid var(--color-divider);
}
.format-name {
  flex: 1;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px;
}
.format-detail {
  display: block;
  font-family: var(--font-body); font-weight: 400;
  font-size: 13px; line-height: 1.4; margin-top: 2px;
  color: var(--ink-70);
}
.format-price {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px;
  color: var(--color-accent);
  font-feature-settings: 'tnum' 1;
}
.format-row.is-unavailable .format-price { color: var(--ink-55); }
.format-oos {
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-55);
}

/* — stepper — */
.stepper {
  display: flex; align-items: center; gap: 8px;
  margin-left: 10px;
}
.stepper-btn {
  width: 34px; height: 34px;
  flex: none;
  border: var(--rule) solid var(--color-divider);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.stepper-btn:hover:not(:disabled) {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
}
.stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* aria-disabled marks "already at zero" for assistive tech without dimming the
   control — the mockup shows all three steppers at full strength when idle. */
.stepper-btn[aria-disabled="true"] { opacity: 1; }
.stepper-qty {
  min-width: 22px; text-align: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px;
  font-feature-settings: 'tnum' 1;
  font-variant-numeric: tabular-nums;
}

/* — buy actions — */
.buy-actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.buy-summary {
  font-size: 13px;
  color: var(--ink-70);
}
.buy-actions .btn-primary { font-size: 16px; padding: 14px 28px; }

/* Busy state while the cart syncs — subtle, no layout shift. */
.buy-panel.is-syncing .stepper-qty { opacity: 0.55; }

.buy-notice {
  border: var(--rule) solid var(--color-accent);
  background: var(--color-accent-100);
  padding: 14px 16px;
  font-size: 14px;
}
.buy-notice strong { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

/* ══════════════════════════════════════════════════════════════════════════
   7. FOOTER
   ══════════════════════════════════════════════════════════════════════ */

.site-footer { border-top: var(--rule) solid var(--color-divider); }
/* The homepage grid already draws its own bottom rule, so the footer there
   would double it up. */
.home .site-footer, .bc-front .site-footer { border-top: 0; }

.site-footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 26px clamp(20px, 5vw, 64px);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-70);
}
.site-footer-inner a { color: inherit; }
.site-footer-inner a:hover { color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   8. INTERIOR PAGES
   ══════════════════════════════════════════════════════════════════════ */

.page-wrap {
  max-width: 780px; width: 100%; margin: 0 auto;
  padding: clamp(40px, 7vh, 88px) clamp(20px, 5vw, 64px);
}
.page-wrap.is-wide { max-width: 1200px; }

.entry-header { margin-bottom: var(--space-6); }
.entry-title { font-size: clamp(32px, 4vw, 48px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 0 -0.058em; }
.entry-meta { font-size: 13px; color: var(--ink-70); margin-top: var(--space-3); }

.entry-content { font-size: 16px; line-height: 27px; }
.entry-content > * + * { margin-top: var(--space-4); }
.entry-content a { color: var(--color-accent); }
.entry-content h2 { font-size: 28px; margin-top: var(--space-8); }
.entry-content h3 { font-size: 22px; margin-top: var(--space-6); }
.entry-content blockquote {
  margin: 0; padding-left: var(--space-4);
  border-left: var(--rule) solid var(--color-accent);
  color: var(--ink-78);
}
.entry-content img, .entry-content figure { margin-block: var(--space-6); }
.entry-content ul, .entry-content ol { padding-left: 1.2em; }
.entry-content li + li { margin-top: var(--space-1); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14px; }
.entry-content th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-55); padding: var(--space-2);
  border-bottom: var(--rule) solid var(--color-divider);
}
.entry-content td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }

.post-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--color-divider); }
.post-list li { border-bottom: var(--rule) solid var(--color-divider); }
.post-list a { display: block; padding: 22px 0; text-decoration: none; }
.post-list a:hover .post-list-title { color: var(--color-accent); }
.post-list-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 24px; letter-spacing: -0.01em; }
.post-list-meta { font-size: 13px; color: var(--ink-70); margin-top: 4px; }

.pagination { display: flex; gap: var(--space-3); margin-top: var(--space-8); font-size: 14px; }
.pagination .page-numbers { padding: 6px 12px; border: var(--rule) solid var(--color-divider); text-decoration: none; }
.pagination .page-numbers.current,
.pagination .page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   9. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .split-grid { grid-template-columns: 1fr; }
  .split-photo {
    border-right: 0;
    border-bottom: var(--rule) solid var(--color-divider);
    min-height: 320px;
  }
  .split-panel { gap: 24px; }
  /* Keep name / price / stepper on one line for as long as it fits — that is
     the desktop reading order. It only wraps if the name is genuinely long. */
  .format-row { flex-wrap: wrap; gap: 10px; }
  .format-name { flex: 1 1 auto; min-width: 0; }
  .stepper { margin-left: 0; }
  .buy-actions .btn-primary { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .site-header { padding: var(--space-3); }
  .site-brand .brand-bee  { height: 32px; }
  .site-brand .brand-text { height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Print — nobody prints a honey shop, but broken print CSS looks careless. */
@media print {
  .site-header-links, .stepper, .buy-actions { display: none; }
  .split-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. OPTIONAL AA CONTRAST MODE
   Off by default — the handoff calls the palette final, so the theme ships
   pixel-faithful. Turning this on (Customizer → BeeCurious → Accessibility)
   fixes the three pairs that miss WCAG 2.1 AA, with the smallest possible
   visual delta and without changing a single brand colour:

     · Button label 16px → 19px. At weight 800 that crosses WCAG's "large
       text" threshold (18.66px), so #f3f2f2 on #ec3013 needs 3:1, not 4.5:1
       — and it measures 3.76:1. The red is untouched.
     · Stepper/rule ink 40% → 55%. Interactive control boundaries need 3:1
       under WCAG 1.4.11; 40% ink measures 2.41:1, 55% measures 3.66:1.
     · .text-muted ink 55% → 65%, for 3.66:1 → 4.96:1.

   If you would rather keep 16px and darken the button instead, swap the
   button rule below for: background: var(--color-accent-700);
   ══════════════════════════════════════════════════════════════════════ */

body.bc-aa {
  --color-divider: rgba(32, 30, 29, 0.55);
  --ink-55: rgba(32, 30, 29, 0.65);
}

@supports (color: color-mix(in srgb, red 40%, transparent)) {
  body.bc-aa {
    --color-divider: color-mix(in srgb, #201e1d 55%, transparent);
    --ink-55: color-mix(in srgb, var(--color-text) 65%, transparent);
  }
}

body.bc-aa .buy-actions .btn-primary,
body.bc-aa .btn-primary.btn-lg {
  font-size: 19px;
}