/* ============================================================================
   PRESERVE-CORE.CSS — shared brand base for the Preserve family of child themes
   v1.1.0 (2026-06-05) — added §9 Accessibility baseline (focus-visible, skip-link,
   sr-only, reduced-motion, forced-colors). v1.0.0 = palette/tokens/no-blue/plugins.
   ----------------------------------------------------------------------------
   ONE base, many skins. Every Preserve child theme (Sporting Shoppe, Academy,
   Equestrian, Hilltop Spa, DoubleBarrel, Range, Gift Shop, Famars, Hunts,
   Finest Gun Room, Clays4Charity) imports THIS file first, then layers its own
   personality skin on top.

   WHAT LIVES HERE (shared, brand-wide — change once, every theme inherits):
     • the locked five-color palette + brand fonts, as CSS variables
     • SEMANTIC role tokens (--p-accent, --p-link, --p-page…) a skin overrides
       to shift personality WITHOUT touching a single rule below
     • the no-blue guards: links, buttons, form fields, focus rings
     • baseline plugin neutralisers: WooCommerce, Gravity Forms, GravityView,
       Modern Events Calendar — all pulled off default-blue onto brand tokens

   WHAT DOES *NOT* LIVE HERE (per-theme skin files own these):
     • headers, footers, navs, hero/section layouts
     • page-template & PDP specifics
     • a theme's individual density / imagery / personality overrides

   ── PALETTE IS LOCKED ──────────────────────────────────────────────────────
   Five colours only: oxblood #8f2418 · ink #1c1a17 · paper #faf6ed ·
   bone #f4ede0 · gold #c9a159. A skin expresses personality by (a) which
   tokens dominate, (b) type weight/scale, (c) spacing & whitespace, (d) which
   semantic role each colour fills — NOT by inventing new hues. On dark grounds
   the accent is GOLD or paper, never a brightened oxblood.

   ── HOW A SKIN RE-THEMES ───────────────────────────────────────────────────
   Override the semantic tokens in the skin file, e.g. a lighter, airier theme:
       :root{ --p-page:var(--p-paper); --p-accent:var(--p-oxblood);
              --p-link:var(--p-ink); }
   Every button/link/form rule below follows automatically.

   Enqueue order (in the child theme's functions.php):
       1) divi-parent   2) <theme>-style   3) preserve-core   4) <theme>-skin
   so the skin always wins and core's tokens resolve first.
   ============================================================================ */

:root{
  /* ── Brand palette — the locked five (+ working tints) ──────────────────── */
  --p-ink:#1c1a17;
  --p-ground:#16140f;        /* deepest dark ground (mastheads, footers) */
  --p-oxblood:#8f2418;
  --p-oxblood-deep:#741b12;  /* oxblood hover/pressed */
  --p-gold:#c9a159;
  --p-paper:#faf6ed;
  --p-bone:#f4ede0;          /* cards/panels on paper */
  --p-rule:#e3d8c2;          /* hairlines/borders on light */
  --p-quiet:#6f665c;         /* muted ink for meta/labels */

  /* ── Brand fonts ────────────────────────────────────────────────────────── */
  --p-disp:'Playfair Display',Georgia,serif;
  --p-serif:'Cormorant Garamond',Georgia,serif;
  --p-sans:'Montserrat',-apple-system,system-ui,sans-serif;
  --p-mono:'JetBrains Mono',ui-monospace,monospace;

  /* ── SEMANTIC ROLES — a skin overrides THESE to change personality ──────────
     Defaults below = the Sporting Shoppe / Academy editorial direction. */
  --p-page:var(--p-paper);            /* page background */
  --p-accent:var(--p-oxblood);        /* primary accent: buttons, key UI */
  --p-accent-ink:var(--p-paper);      /* text/icon sitting ON the accent */
  --p-accent-hover:var(--p-ink);      /* accent background on hover */
  --p-accent-on-dark:var(--p-gold);   /* accent when over a dark ground */
  --p-link:var(--p-oxblood);          /* inline link colour on light */
  --p-link-hover:var(--p-ink);
  --p-focus-ring:rgba(143,36,24,.12); /* keyboard/focus glow (oxblood @ 12%) */
  --p-focus-outline:2px solid var(--p-oxblood); /* keyboard focus OUTLINE (a11y §9) */

  /* ── LEGACY ALIASES ─────────────────────────────────────────────────────────
     Preserve Academy's ironsights.css references --ir-* throughout; alias them
     onto the brand tokens so it keeps working unchanged once core loads first.
     New themes/skins should use --p-* directly. */
  --ir-ink:var(--p-ink);
  --ir-ground:var(--p-ground);
  --ir-oxblood:var(--p-oxblood);
  --ir-oxblood-deep:var(--p-oxblood-deep);
  --ir-gold:var(--p-gold);
  --ir-paper:var(--p-paper);
  --ir-bone:var(--p-bone);
  --ir-rule:var(--p-rule);
  --ir-quiet:var(--p-quiet);
  --ir-disp:var(--p-disp);
  --ir-serif:var(--p-serif);
  --ir-sans:var(--p-sans);
  --ir-mono:var(--p-mono);
}

/* ── 1 · LINKS — never default-blue; accent with hover ────────────────────── */
a, a:visited{ color:var(--p-link); transition:color .15s ease; }
a:hover, a:focus{ color:var(--p-link-hover); }
/* On dark grounds, links/hover go gold (set via a wrapper/section class). */
.p-on-dark a, .p-on-dark a:visited,
.ir-on-dark a, .ir-on-dark a:visited{ color:var(--p-paper); }
.p-on-dark a:hover, .p-on-dark a:focus,
.ir-on-dark a:hover, .ir-on-dark a:focus{ color:var(--p-accent-on-dark); }

/* ── 2 · BUTTONS — Divi .et_pb_button + WooCommerce + core ────────────────── */
.et_pb_button,
.et_pb_button:visited,
a.button, button.button, input.button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wp-block-button__link, input[type="submit"]{
  background:var(--p-accent) !important;
  color:var(--p-accent-ink) !important;
  border:1px solid var(--p-accent) !important;
  border-radius:0 !important;
  font-family:var(--p-mono) !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease !important;
}
.et_pb_button:hover, .et_pb_button:focus,
a.button:hover, button.button:hover, input.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce #respond input#submit:hover, .wp-block-button__link:hover, input[type="submit"]:hover{
  background:var(--p-accent-hover) !important;
  border-color:var(--p-accent-hover) !important;
  color:var(--p-accent-ink) !important;
}
/* Divi adds an arrow on hover via :after — keep it on-brand, never blue. */
.et_pb_button:after{ color:var(--p-accent-ink) !important; }

/* Ghost / secondary button (accent outline on light). */
.p-btn-ghost, .p-btn-ghost:visited,
.ir-btn-ghost, .ir-btn-ghost:visited{
  background:transparent !important; color:var(--p-accent) !important;
  border:1px solid var(--p-accent) !important;
}
.p-btn-ghost:hover, .ir-btn-ghost:hover{ background:var(--p-accent) !important; color:var(--p-accent-ink) !important; }

/* ── 3 · FORM FIELDS (Gravity Forms / Woo / core) ─────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select, .gfield input, .gfield textarea, .gfield select{
  border:1px solid var(--p-rule) !important;
  border-radius:0 !important;
  background:var(--p-paper) !important;
  color:var(--p-ink) !important;
  font-family:var(--p-sans) !important;
  outline:none;
}
input:focus, textarea:focus, select:focus,
.gfield input:focus, .gfield textarea:focus, .gfield select:focus{
  border-color:var(--p-accent) !important;
  box-shadow:0 0 0 2px var(--p-focus-ring) !important;
}
::selection{ background:var(--p-gold); color:var(--p-ink); }

/* ── 4 · CONSISTENCY GUARDS — kill any stray default-blue ─────────────────── */
.et_pb_module a.more, .read-more a, .entry-content a{ color:var(--p-link); }
.et_pb_module a.more:hover, .read-more a:hover, .entry-content a:hover{ color:var(--p-link-hover); }

/* ── 5 · GRAVITY FORMS — buttons, required marks, validation, page steps ──── */
.gform_wrapper .gform_button, .gform_wrapper button, .gform_wrapper input[type="submit"]{
  background:var(--p-accent) !important; color:var(--p-accent-ink) !important;
  border:1px solid var(--p-accent) !important; border-radius:0 !important;
  font-family:var(--p-mono) !important; letter-spacing:.12em !important; text-transform:uppercase !important;
}
.gform_wrapper .gform_button:hover, .gform_wrapper input[type="submit"]:hover{ background:var(--p-accent-hover) !important; border-color:var(--p-accent-hover) !important; }
.gform_wrapper .gfield_required{ color:var(--p-accent) !important; }
.gform_wrapper .gfield_error, .gform_wrapper .validation_message,
.gform_wrapper .gform_validation_errors{ border-color:var(--p-accent) !important; color:var(--p-accent) !important; }
.gform_wrapper .gf_progressbar_percentage, .gform_wrapper .gf_step_active .gf_step_number{ background:var(--p-accent) !important; color:var(--p-accent-ink) !important; }
.gform_wrapper a{ color:var(--p-link) !important; }

/* ── 6 · GRAVITYVIEW — table headers, search submit, A-Z filters ──────────── */
.gv-table-view thead th, .gv-table-multiple-container thead th{ background:var(--p-ink) !important; color:var(--p-paper) !important; }
.gv-search-button, .gv-widget-search input[type="submit"]{ background:var(--p-accent) !important; color:var(--p-accent-ink) !important; border:0 !important; }
.gv-az-filter a.gv-az-active, .gv-az-filter a:hover{ color:var(--p-accent) !important; }

/* ── 7 · WOOCOMMERCE — notices, price, account nav, stars, bookings ───────── */
.woocommerce-message, .woocommerce-info{ border-top-color:var(--p-accent) !important; }
.woocommerce-error{ border-top-color:var(--p-accent) !important; }
.woocommerce div.product p.price, .woocommerce ul.products li.product .price, .woocommerce .price{ color:var(--p-ink) !important; }
.woocommerce .star-rating span::before, .woocommerce p.stars a{ color:var(--p-gold) !important; }
.woocommerce-MyAccount-navigation li.is-active a{ color:var(--p-accent) !important; border-color:var(--p-accent) !important; }
.wc-bookings-booking-form .block.bookable.available, .wc-bookings-date-picker .ui-state-active{ background:var(--p-accent) !important; color:var(--p-accent-ink) !important; }

/* ── 8 · MODERN EVENTS CALENDAR (MEC) — neutralise skin-blue to brand ─────── */
.mec-event-color, .mec-color, .mec-color-hover:hover,
.mec-events-meta-group .mec-booking .mec-book-form-price,
.mec-wrap .mec-totalcal-box .mec-totalcal-view span.mec-color{ color:var(--p-accent) !important; }
.mec-wrap .mec-event-article .mec-booking-button,
.mec-wrap .mec-booking button[type="submit"], .mec-book-form-gateway-checkout button{
  background:var(--p-accent) !important; color:var(--p-accent-ink) !important; border:0 !important; border-radius:0 !important;
}
.mec-calendar .mec-calendar-day.mec-has-event-for-days,
.mec-calendar .mec-selected-day, .mec-calendar dl dt.mec-today{ background:var(--p-accent) !important; color:var(--p-accent-ink) !important; }
.mec-wrap a{ color:var(--p-link) !important; }
.mec-wrap a:hover{ color:var(--p-link-hover) !important; }

/* ── 9 · ACCESSIBILITY BASELINE (added preserve-core 1.1.0) ──────────────────
   Family-wide a11y floor — every Preserve child theme inherits this. Replaces
   the (cancelled) AllAccessible overlay with REAL accessibility in the markup/CSS.
   Skins may restyle the focus ring colour via --p-focus-outline but should never
   remove the keyboard outline. See /preserve-core/accessibility.md.
   ──────────────────────────────────────────────────────────────────────────── */

/* 9.1 — Visible keyboard focus on EVERY interactive element.
   :focus-visible shows the ring for keyboard/AT users only; mouse clicks don't
   get the ring (so the editorial look is preserved for pointer users). The form
   fields keep their own accent box-shadow ring from §3; this covers links,
   buttons, menu items, summary, [tabindex], and any control. */
:where(a, button, [role="button"], summary, [tabindex], .et_pb_button,
  input, select, textarea, .quadmenu-link, .ssmob-trigger):focus-visible{
  outline:var(--p-focus-outline, 2px solid var(--p-accent)) !important;
  outline-offset:2px !important;
  border-radius:1px;
}
/* Remove the legacy ring for mouse users where a UA still draws :focus. */
:where(a, button, [role="button"], summary, [tabindex]):focus:not(:focus-visible){ outline:none; }
/* On dark grounds the ring is gold so it stays visible. */
.p-on-dark :focus-visible, .ir-on-dark :focus-visible,
.p-on-dark .et_pb_button:focus-visible{ outline-color:var(--p-gold) !important; }

/* 9.2 — Skip-to-content link. Add once near <body> top:
   <a class="p-skip-link" href="#content">Skip to content</a>
   (give the main content wrapper id="content"). Hidden until focused. */
.p-skip-link{
  position:absolute; left:-9999px; top:0; z-index:100000;
  background:var(--p-ink); color:var(--p-paper) !important;
  font-family:var(--p-sans); font-size:14px; font-weight:600; letter-spacing:.04em;
  padding:14px 20px; text-decoration:none; border-bottom:2px solid var(--p-gold);
}
.p-skip-link:focus{ left:8px; top:8px; outline:2px solid var(--p-gold); outline-offset:2px; }

/* 9.3 — Screen-reader-only utility (visually hidden, still announced). */
.p-sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Becomes visible when focused (e.g. an sr-only link). */
.p-sr-only-focusable:focus, .p-sr-only-focusable:focus-within{
  position:static !important; width:auto; height:auto; margin:0; overflow:visible;
  clip:auto; clip-path:none; white-space:normal;
}

/* 9.4 — Respect reduced-motion: damp transitions/animations for users who ask.
   Scoped to not fully break essential motion, but kills decorative animation. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* 9.5 — Honour forced-colors / Windows High Contrast: keep focus visible. */
@media (forced-colors: active){
  :where(a, button, [role="button"], .et_pb_button):focus-visible{ outline:2px solid CanvasText !important; }
}
