/*
Theme Name:        FJ Storefront
Theme URI:         https://fjpackaging.com.au/
Description:       Storefront child theme for F&J Packaging & Cleaning Supplies. Brand tokens: Navy #16203F, Gold #B8893C, Royal #2B4C9B, Paper #F7F5F1. Type: system stack + Fraunces 700 display (T54). No page builders.
Author:            F&J Packaging (build lane)
Author URI:        https://fjpackaging.com.au/
Template:          storefront
Version:           1.0.75
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       fj-storefront
Tags:              e-commerce, woocommerce
*/

/* ==========================================================================
   F&J brand tokens (single source of truth for all child-theme CSS)
   Palette per FJ_DESIGN_BRAND_BRIEF.md ??? family anchors Navy + Gold.
   ========================================================================== */
:root {
  /* Core brand */
  --fj-navy:   #16203F;  /* primary / header / footer */
  --fj-gold:   #B8893C;  /* accent ??? fills/borders; dark text on gold for labels */
  --fj-royal:  #2B4C9B;  /* primary action / links */
  --fj-azure:  #3E76C9;  /* hover/active tint of royal */
  --fj-paper:  var(--paper);  /* page background ??? T54: now #F7F5F1, Fred 3/08 */
  --fj-slate:  #3F5A78;  /* secondary text / borders */
  --fj-teal:   #167C84;
  --fj-plum:   #6E4A7E;
  /* Product-line accents (PLP/PDP tinting per line) */
  --fj-planetwise-leaf:   #429321;
  --fj-planetwise-forest: #1E3D2A;
  --fj-jura-glacier:      #4A90C2;
  --fj-jura-navy:         #1F2A5A;
  /* Text */
  --fj-ink:        #16203F;
  --fj-ink-soft:   #3F5A78;
  --fj-text-max:   #1a1a1a;
  /* UI */
  --fj-radius:     6px;
  --fj-shadow:     0 1px 3px rgba(22, 32, 63, 0.12);
  --fj-focus-ring: 0 0 0 3px rgba(62, 118, 201, 0.45);
  /* Type ??? T54: system stack for body, Fraunces 700 for display only. */
  --fj-font: var(--font-body);
}

/* ==========================================================================
   T54 ??? DESIGN TOKENS & TYPOGRAPHY (control/T54_TOKENS_AND_TYPOGRAPHY.md)
   The canonical token set. The --fj-* names above are ALIASES onto these so
   the pre-T54 rules in this file keep working; new work uses the names below.
   ???? No hard-coded hex and no font-family anywhere in T55???T66. Everything
   comes from here. --font-display is h1???h3 and money display figures ONLY,
   and ONLY at weight 700 ??? no other weight is loaded, so any other weight is
   a faux weight (T54-D2/D3).
   ========================================================================== */
:root {
  /* Fonts ??? DECISION_LOG font decision, Fred 2/08. 367.1kB ??? 34.7kB. */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Fraunces, Georgia, "Times New Roman", serif;

  /* Brand ??? LOCKED, do not alter */
  --navy: #16203F;
  --gold: #B8893C;
  --gold-l: #D8AE6A;
  --royal: #2B4C9B;

  /* D5 accent ??? the collection/pickup colour from the Direction_D5 token set.
     Used only by the #121 shipment picker's pickup card. Added, not altered:
     the four brand values above are untouched. */
  --teal: #167C84;

  /* Surface */
  --paper: #F7F5F1;
  --line: #E7E3DA;
  --line-ctl: #948D7E;
  --ring: #767E8C; /* RETIRED FOR FOCUS 24/08 (#177-D item 13 / #179): the focus ring is 2px var(--royal) (var(--white) on dark bands). Value kept ONLY because deployed fj-components.css still consumes it for control borders -- migration owed, then delete. Never use for new focus styles. */
  --muted: #5A6272;
  /* --white: ALREADY REGISTERED below (13/08 R3-fix block, line ~408) -- the
     #179 MI-2 ruling's "no white token exists" premise was wrong; the T64
     front-page sheet consumes that existing registration (INT-3, 24/08). */

  /* Interface state ??? DECISION_LOG #29. NEVER on a brand surface: brand gold
     is 3.14:1 and cannot carry a warning in text. */
  --ok:   #1E7A3E;
  --warn: #8A5A12;  /* 5.91:1 on white */
  --err:  #A3251B;  /* 7.40:1 on white */

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px;

  /* Type scale */
  --text-xs: 13px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
  --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px;
  /* Display steps -- ratified 24/08 (#177-D item 4), T64 lane registration */
  --text-4xl: 48px; --text-5xl: 64px;

  /* Measured layout ??? the sticky sidebars depend on these */
  --hdr: 153px;
  --stick: 165px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .3, 1);

  /* T64 lane registrations -- ratified 24/08 (#177-D item 4 / T54 sec3
     amendments). Values VERBATIM from FJ_VISUAL_SYSTEM_MOTION_2026-08-17.md
     sec2.3 (radii/elevation) and sec3.2 (durations/easings/stagger). */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 240ms; --dur-4: 320ms; --dur-5: 480ms;
  --ease-settle: cubic-bezier(.25, .9, .3, 1);
  --ease-arrive: cubic-bezier(.2, .85, .25, 1);
  --ease-seat: cubic-bezier(.2, .8, .3, 1);
  --stagger: 60ms; --stagger-tight: 40ms;
  --radius-0: 0; --radius-1: 4px; --radius-2: 8px; --radius-3: 14px;
  --elev-1: 0 1px 2px rgba(22, 32, 63, .06);
  --elev-2: 0 4px 12px rgba(22, 32, 63, .10);
  --hdr-compact: 64px; /* ratified 24/08 (#177-D item 12); --stick re-measure owed when the <110px header lands */
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  background-color: var(--paper);
  color: var(--fj-text-max);
  font-family: var(--font-body);
}

/* T54: display face on h1???h3 only, and only at 700 ??? nothing else is loaded. */
h1, h2, h3 {
  color: var(--fj-ink);
  font-family: var(--font-display);
  font-weight: 700;
}

h4, h5, h6 {
  color: var(--fj-ink);
  font-family: var(--font-body);
}

/* T54-D1: the button element does not inherit font-family, so controls silently fell back
   to Arial while the rest of the page did not. Not optional ??? see the spec ??5.3. */
button, input, select, textarea {
  font-family: inherit;
}

/* T54-D3: b and strong inside a heavy parent resolve *bolder* ??? weight 900,
   which is not loaded and gets faked by the browser. Pin them to 700. */
b, strong {
  font-weight: 700;
}

/* T54-D4 (found porting T54 into the theme, 3/08): WooCommerce product-loop
   titles are h2, but Storefront pins them to weight 400 with higher specificity.
   Fraunces is loaded at 700 ONLY, so leaving them on the display face renders a
   SYNTHESISED weight on every product card ??? the same class of defect as
   T54-D2/D3. They are 16px scanning labels in a grid rather than display type,
   and the UX law puts scanability first, so they stay on the body font. */
.woocommerce-loop-product__title {
  font-family: var(--font-body);
}

/* T54 contrast close-out, measured 3/08 across 30 renders (5 templates x 6 widths).
   Storefront's CUSTOMIZER INLINE CSS paints breadcrumb links #727272 and
   pagination #6D6D6D. Both are (0,1,1) and load after our stylesheet, so they
   beat the a{} rule above ??? the same trap already documented for the tagline and
   the footer links. Measured: pagination 4.06:1 and breadcrumbs 4.42:1 against
   AA's 4.5 for normal text.
   ???? A/B PROVED WHICH IS OURS: with the pre-T54 paper (#FBFAF8) the category page
   failed 14 times, and on pure white also 14 ??? so 14 are PRE-EXISTING and fail on
   any light background. The new #F7F5F1 paper added exactly ONE (breadcrumbs,
   4.55 ??? 4.42). Both are fixed here by moving them onto --muted (#5A6272). */
body .woocommerce-breadcrumb a {
  color: var(--muted);
}
/* PAGINATION ??? RESOLVED 3/08 (evening) BY SAMPLING THE RENDERED PIXELS.
   History, kept deliberately: the 3/08 sweep reported 4.06:1 here, a (0,4,1)
   override was tried, it applied, and the measured ratio then got WORSE
   (4.06 ??? 3.42). That was correctly read as "the instrument cannot resolve the
   background for these elements" and correctly reverted rather than tuned.
   ???? ROOT CAUSE, now proven: `a.page-numbers` carries its OWN translucent
   background, `rgba(0,0,0,0.024)`, which the instrument never composited. The
   PAINTED background is not --paper #F7F5F1 (247,245,241) but (241,239,235).
   Measured off a PNG screenshot of the live category page, not computed:
     ?? a.page-numbers  #6D6D6D on rgb(241,239,235) = 4.506:1  ??? PASSES AA
     ?? span.current    #636363 on rgb(230,230,230) = 4.814:1  ??? PASSES AA
   The instrument???s 4.06 sits next to the 4.146 you get by wrongly resolving the
   background as the .current chip???s #E6E6E6 ??? which is what it was doing.
   ??? SO IT WAS NEVER A FAILURE. But 4.506 clears the 4.5 threshold by 0.006, so
   any future move in --paper silently breaks it. Moved onto --muted (#5A6272)
   ??? the SAME token the breadcrumbs above already use, so no new hex enters the
   build (T54 ??5) ??? which measures 5.339:1 on the same painted background.
   Specificity: Storefront???s inline rule is
   `.woocommerce-pagination .page-numbers li .page-numbers:not(.current)` = (0,4,0),
   so the (0,4,1) form below is required and is the form already proven to apply. */
body .woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
  color: var(--muted);
}

/* T54: motion honours the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

a {
  color: var(--fj-royal);
}
a:hover,
a:focus {
  color: var(--fj-azure);
}

/* Visible keyboard focus everywhere (WCAG 2.1 AA) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--fj-focus-ring);
  border-radius: var(--fj-radius);
}

/* ==========================================================================
   Header / navigation (Storefront hooks; templates arrive in T4)
   ========================================================================== */
.site-header,
.storefront-handheld-footer-bar {
  background-color: var(--fj-navy);
  color: #ffffff;
}
.site-header a,
.site-header .site-title a,
.main-navigation ul li a,
.site-header-cart .cart-contents {
  color: #ffffff;
}
.main-navigation ul li a:hover,
.site-header a:hover {
  color: var(--fj-gold);
}
.storefront-primary-navigation {
  background-color: var(--fj-navy);
}

/* T19 a11y: Storefront's customizer inline CSS paints the tagline #404040 on our
   navy header (1.54:1 ??? fails WCAG 1.4.3). Its selector `p.site-description` is
   (0,1,1); this (0,2,1) beats it. White @ .85 on navy ??? #DCDEE2 ??? 11.9:1. */
.site-header p.site-description {
  color: rgba(255, 255, 255, 0.85);
}

/* Sticky compact header is wired in T4 (js + template part); token hook here */
.fj-header--stuck {
  box-shadow: var(--fj-shadow);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button,
input[type="submit"],
.button,
.wp-block-button__link {
  background-color: var(--fj-royal);
  color: #ffffff;
  border-radius: var(--fj-radius);
}
button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover {
  background-color: var(--fj-azure);
  color: #ffffff;
}
.button.alt,
button.alt,
.single_add_to_cart_button {
  background-color: var(--fj-gold);
  color: var(--fj-navy); /* dark text on gold ??? contrast rule from the design brief */
}
.button.alt:hover,
button.alt:hover,
.single_add_to_cart_button:hover {
  background-color: #a67a33;
  color: #ffffff;
}

/* ==========================================================================
   WooCommerce essentials
   ========================================================================== */
.woocommerce-store-notice,
p.demo_store {
  background-color: var(--fj-gold);
  color: var(--fj-navy);
}
.onsale {
  background-color: var(--fj-gold);
  color: var(--fj-navy);
}
.price,
.woocommerce-Price-amount {
  color: var(--fj-ink);
}
/* PRE-EXISTING DEFECT, found by the T54 sweep 3/08 ??? NOT caused by T54.
   The rule above paints every price navy, including the cart total inside the
   navy primary-navigation bar, so the header cart figure rendered navy on navy
   at 1.00:1 ??? invisible to every visitor, on a money figure. The .cart-contents
   anchor already sets white; the inner spans have to stop overriding it. */
.site-header-cart .cart-contents .woocommerce-Price-amount,
.site-header-cart .cart-contents .woocommerce-Price-currencySymbol,
.site-header-cart .cart-contents .amount {
  color: inherit;
}
/* Per-unit price line (rendered by T6 snippet) */
.fj-per-unit {
  color: var(--fj-ink-soft);
  font-size: 0.875em;
  display: block;
}
/* Ctn Qty note on product cards */
.fj-ctn-qty {
  color: var(--fj-ink-soft);
  font-size: 0.8125em;
  display: block;
}
/* Volume-break table (PDP, T7) */
.fj-volume-breaks th {
  background-color: var(--fj-navy);
  color: #ffffff;
}
.fj-volume-breaks tr.fj-break--active td {
  background-color: rgba(184, 137, 60, 0.15); /* gold tint for the achieved break row */
}

/* Trust strip */
.fj-trust-strip {
  background-color: #ffffff;
  border-top: 1px solid rgba(63, 90, 120, 0.15);
  border-bottom: 1px solid rgba(63, 90, 120, 0.15);
  color: var(--fj-ink-soft);
}
.fj-trust-strip a {
  color: var(--fj-royal);
}

/* ==========================================================================
   Footer (dark; Reversed logo per design brief)
   ========================================================================== */
.site-footer {
  background-color: var(--fj-navy);
  color: rgba(255, 255, 255, 0.85);
}
.site-footer a {
  color: #ffffff;
}
.site-footer a:hover {
  color: var(--fj-gold);
}
/* T19 a11y: Storefront's customizer inline CSS sets
   `.site-footer a:not(.button):not(.components-button)` to #333333 on our navy
   footer (1.26:1 ??? fails WCAG 1.4.3) and outweighs `.site-footer a` (0,1,1 vs
   0,3,1). Match its specificity ??? the child sheet loads after the inline sheet,
   so these win by cascade order. #FFFFFF on #16203F = 16.0:1. */
.site-footer a:not(.button):not(.components-button) {
  color: #ffffff;
}
.site-footer a:not(.button):not(.components-button):hover {
  color: var(--fj-gold); /* gold on navy 5.05:1 ??? hover state, base state compliant */
}
.site-footer .fj-abn-line {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125em;
}

/* ==========================================================================
   Skip link (a11y)
   ========================================================================== */
.skip-link {
  background-color: var(--fj-navy);
  color: #ffffff;
}

/* ==========================================================================
   Product-line page tints (body classes added by T6/T7 templates)
   ========================================================================== */
.fj-line--planetwise .fj-line-accent { color: var(--fj-planetwise-leaf); }
.fj-line--jura       .fj-line-accent { color: var(--fj-jura-glacier); }

/* ==========================================================================
   T64 ??? signed-out home tokens (2026-08-13). ADDITIVE ONLY: the locked brand
   values above are untouched. No new raw hex enters the build ??? each tint is
   color-mix() of EXISTING tokens (own-brand bands tint only with that line's
   accent, per the design lane). Where color-mix is unsupported the consuming
   rule's fallback declaration (plain --paper) has already painted the box ???
   fj-home.css declares the fallback first on every use.
   ========================================================================== */
:root {
  --tint-planetwise: color-mix(in srgb, var(--fj-planetwise-leaf) 9%, var(--paper));
  --tint-jura:       color-mix(in srgb, var(--fj-jura-glacier) 12%, var(--paper));
  --tint-navy:       color-mix(in srgb, var(--navy) 4%, var(--paper));

  /* R3 fix D6 (2026-08-13), ADDITIVE ??? token purity for fj-home.css. The
     locked brand values are untouched; these name what the T64 sheet was
     using as raw values (white + its two on-navy alphas, the 10px card
     radius) so no raw colour ships in fj-home.css. */
  --white:        #FFFFFF; /* 24/08: also the #179 MI-2 registration for the T64 front-page sheet (dark-band ink + ring) -- SINGLE source of truth, do not redeclare */
  --white-92:     rgba(255, 255, 255, 0.92);
  --white-72:     rgba(255, 255, 255, 0.72);
  --fj-radius-lg: 10px;
}