/*
Theme Name: Cheshire Frame & Glass
Theme URI: https://cheshirefg.co.uk
Description: Bespoke, lightweight ACF-block theme for Cheshire Frame & Glass - windows, doors, conservatories & commercial glazing. Code-registered blocks, no page builder, no build step.
Author: WWeb Design
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: cheshirefg
*/

/* ==========================================================================
   Design tokens - dark, monochrome, editorial (Spitfire-inspired)
   ========================================================================== */
:root {
  /* Brand - dark slate-navy base, white text, restrained cool-silver accent */
  --cfg-bg:        #2F3946;   /* slate-navy page background */
  --cfg-surface:   #38434F;   /* raised cards / panels (lifts on dark) */
  --cfg-surface-2: #29323C;   /* recessed / alt section (darker than bg) */
  --cfg-ink:       #F4F6F7;   /* near-white primary text */
  --cfg-ink-soft:  #AAB6BF;   /* muted light-grey text */
  --cfg-line:      rgba(255,255,255,.14); /* hairline borders on dark */

  --cfg-primary:     #283139; /* dark emphasis bands / topbar (stays dark) */
  --cfg-primary-dk:  #1E252C; /* darkest - footer */
  --cfg-primary-ink: #FFFFFF;
  --cfg-accent:      #B6C2CB; /* cool brushed-silver - premium, monochrome */
  --cfg-accent-dk:   #DCE5EA; /* brighter silver for hover/emphasis on dark */

  /* Light surfaces - cool off-white, for breaking up all-dark pages (same monochrome family) */
  --cfg-surface-light:   #F1F3F4; /* section background */
  --cfg-surface-light-2: #E5E9EA; /* cards / chips on a light section */
  --cfg-ink-on-light:      #232B32; /* headings/body on a light section */
  --cfg-ink-soft-on-light: #5B6670; /* muted text on a light section */
  --cfg-line-on-light:     rgba(35,43,50,.12); /* hairline borders on light */
  /* A control's edge is not decoration. --cfg-line is tuned for hairlines
     between sections: on a light band it resolves to rgba(35,43,50,.12), which
     measured 1.25:1 against the band. That is fine for a divider and far below
     the 3:1 SC 1.4.11 requires for the boundary of an input -- the contact form
     read as four labels with empty space under them. Anything a user has to
     find and click or type into uses --cfg-line-ui, which like --cfg-line is
     light here and flips dark inside a light band.
     .55 is MEASURED as the lowest value clearing 3:1 on every ground
     the form can sit on: 3.27 on light, 3.48 on light-alt, 4.31 on
     dark. Do not lower it. */
  --cfg-line-ui:           rgba(255,255,255,.55);
  --cfg-line-ui-on-light:  rgba(35,43,50,.55);

  /* Type - geometric uppercase display + neutral sans body (no serif) */
  --cfg-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cfg-font-head: "Montserrat", "Inter", system-ui, Helvetica, Arial, sans-serif;

  /* Scale - architectural, near-square corners */
  --cfg-maxw: 1240px;
  --cfg-maxw-wide: 1480px;
  --cfg-gutter: clamp(1.25rem, 4vw, 3rem);
  --cfg-section-y: clamp(3.5rem, 8vw, 7rem);
  --cfg-radius: 4px;
  --cfg-radius-sm: 2px;
  --cfg-shadow: 0 1px 2px rgba(0,0,0,.25), 0 18px 44px rgba(0,0,0,.36);
  --cfg-shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.28);

  --cfg-header-h: 84px;
  --cfg-ease: cubic-bezier(.22,.61,.36,1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cfg-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--cfg-ink);
  background: var(--cfg-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--cfg-accent-dk); text-decoration-color: color-mix(in srgb, var(--cfg-accent-dk) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--cfg-font-head);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .005em;
  color: var(--cfg-ink);
  margin: 0 0 .5em;
}
/* Editorial uppercase display headings - the Spitfire signature */
h1, h2 { text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 600; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.cfg-container { max-width: var(--cfg-maxw); margin-inline: auto; padding-inline: var(--cfg-gutter); }
.cfg-container--wide { max-width: var(--cfg-maxw-wide); }
.cfg-section { padding-block: var(--cfg-section-y); }
.cfg-section--alt { background: var(--cfg-surface-2); }
.cfg-section--ink { background: var(--cfg-primary); color: #EAF1F4; }
.cfg-section--ink h1, .cfg-section--ink h2, .cfg-section--ink h3 { color: #fff; }

/* Light section — used to break up the dark pages so the site isn't wall-to-wall
   slate. Rather than restyling each block, this REMAPS THE TOKENS for anything
   inside it: every block draws its cards, borders, dividers and muted text from
   --cfg-surface / --cfg-line / --cfg-ink-soft, so one override flips the lot and
   any future block inherits the behaviour for free.
   Genuinely hardcoded #fff stays hardcoded on purpose — overlay tile labels sit
   on photography, not on the section background. Buttons are handled below. */
.cfg-section--light,
.cfg-section--light-alt {
  --cfg-surface:   var(--cfg-surface-light-2);
  --cfg-surface-2: #FFFFFF;
  --cfg-ink:       var(--cfg-ink-on-light);
  --cfg-ink-soft:  var(--cfg-ink-soft-on-light);
  --cfg-line:      var(--cfg-line-on-light);
  --cfg-line-ui:   var(--cfg-line-ui-on-light);
  /* The cool-silver accent (#B6C2CB) washes out completely on an off-white
     ground — it drives review stars, stat numerals, bullet ticks, process
     numbers and the icon chips (via color-mix). Darken it here so all of those
     stay legible; the colour-mixed tints just become light greys, which is
     exactly what's wanted on light. */
  --cfg-accent:    #4A5661;
  --cfg-accent-dk: var(--cfg-primary);
  --cfg-shadow:    0 1px 2px rgba(35,43,50,.06), 0 18px 44px rgba(35,43,50,.10);
  --cfg-shadow-sm: 0 1px 2px rgba(35,43,50,.06), 0 6px 18px rgba(35,43,50,.09);
  color: var(--cfg-ink-on-light);
}
.cfg-section--light { background: var(--cfg-surface-light); }
/* Second light tone, so two light bands can sit next to each other and still
   read as separate sections without dropping back to dark. Cards go pure white
   inside it so they keep lifting off the slightly deeper ground. */
.cfg-section--light-alt {
  background: var(--cfg-surface-light-2);
  --cfg-surface:   #FFFFFF;
  --cfg-surface-2: var(--cfg-surface-light);
}
:is(.cfg-section--light, .cfg-section--light-alt) :is(h1, h2, h3, h4) { color: var(--cfg-ink-on-light); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-lead { color: var(--cfg-ink-soft-on-light); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-eyebrow { color: var(--cfg-primary); }

/* The base .cfg-btn is white-outline-on-dark, so it vanishes on a light ground.
   Flip it here instead of asking every render.php to pick a button modifier. */
/* .55 not .4 -- measured. At .4 the border was 2.23:1 against the light band
   and 2.26:1 against the white cards inside light-alt, under the 3:1 SC
   1.4.11 needs. This 1px stroke is the whole affordance that separates a
   button from a line of small-caps text. */
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn { color: var(--cfg-primary); border-color: rgba(40,49,57,.55); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn:hover { background: var(--cfg-primary); color: #fff; border-color: var(--cfg-primary); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn--accent { background: var(--cfg-primary); color: #fff; border-color: var(--cfg-primary); }
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-btn--accent:hover { background: transparent; color: var(--cfg-primary); border-color: var(--cfg-primary); }
/* Big stat numerals want full emphasis, not the mid-slate accent. */
:is(.cfg-section--light, .cfg-section--light-alt) .cfg-stat__value { color: var(--cfg-primary); }

.cfg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-family: var(--cfg-font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cfg-accent-dk);
  margin-bottom: 1rem;
}
.cfg-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .6; }
.cfg-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cfg-ink-soft); max-width: 60ch; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.cfg-btn {
  display: inline-flex; align-items: center; gap: .65em;
  font-family: var(--cfg-font-body);
  font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1; text-decoration: none;
  padding: 1.15em 1.9em; border-radius: var(--cfg-radius-sm);
  background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.55);
  transition: background .3s var(--cfg-ease), color .3s var(--cfg-ease), border-color .3s var(--cfg-ease);
}
.cfg-btn:hover { background: #fff; border-color: #fff; color: var(--cfg-primary); }
/* Solid light - the prominent conversion CTA */
.cfg-btn--accent { background: #fff; color: var(--cfg-primary); border-color: #fff; }
.cfg-btn--accent:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
/* Outline on dark */
.cfg-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.cfg-btn--ghost:hover { background: #fff; color: var(--cfg-primary); border-color: #fff; }
.cfg-btn--light { background: #fff; color: var(--cfg-primary); border-color: #fff; }
.cfg-btn--light:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
/* Outline on light - for buttons placed on a .cfg-section--light background */
.cfg-btn--dark { background: transparent; color: var(--cfg-primary); border-color: var(--cfg-primary); }
.cfg-btn--dark:hover { background: var(--cfg-primary); color: #fff; border-color: var(--cfg-primary); }

/* ==========================================================================
   Scroll-reveal (progressive enhancement; no-JS shows everything)
   ========================================================================== */
.cfg-fade-up { opacity: 1; }
.js .cfg-fade-up { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--cfg-ease), transform .7s var(--cfg-ease); }
.js .cfg-fade-up.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .cfg-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Skip link */
.cfg-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; color: var(--cfg-ink); padding: .8em 1.2em; border-radius: 0 0 var(--cfg-radius-sm) 0; }
.cfg-skip:focus { left: 0; }

/* Focus ring.
 *
 * NOT wrapped in :where() -- that gives the rule zero specificity, so any
 * block stylesheet that touches `outline` on a focusable element silently
 * wins and the ring disappears with nothing to show it happened.
 *
 * `summary` and `select`/`textarea` are in the list because they are
 * focusable and were not covered: the FAQ accordion's <summary> is that
 * block's only keyboard control, and it appears on 16 pages. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible { outline: 3px solid var(--cfg-accent); outline-offset: 3px; border-radius: 3px; }