/*
Theme Name: JimiBOX
Theme URI: https://wwebdesign.co.uk/
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk/
Description: Lean custom theme for JimiBOX — code-registered ACF blocks, no page builder, no build step.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: jimibox
*/

/* ==========================================================================
   Design tokens — the ONLY place cross-block values live.
   Anything used by more than one block belongs here. Anything used by exactly
   one block belongs in that block's own style.css.
   ========================================================================== */

/* MODERNISATION PASS — 2026-08-24.
   The previous values were measured off the live Pinnacle site to the pixel.
   These are chosen. What makes that site read as dated is not its colours or
   its content, it is four things, and this is the whole brief:

     1. 14px/20px body copy set the full 1140px width. That is the single
        loudest "2014" signal on the page.
     2. 400-weight headings that barely out-rank the body text.
     3. Almost no vertical space — 20px section padding, 10px margins.
     4. No depth and no interaction: square corners, no shadow, no hover.

   Brand, content, page order, photography and the orange are unchanged. The
   parity build is preserved at ../theme-parity-20260824.tar.gz and its
   screenshots are shots/parity-*.png. */
:root {
  /* Brand — the orange is untouched. Added a darker step for hover and a warm
     tint for accents, because one flat colour is itself a dated look. */
  --jimibox-brand:        #f75a00;
  --jimibox-brand-tint:   #fff3ec;
  --jimibox-accent:       #f75a00;

  /* There is deliberately NO --jimibox-brand-dark. There was one (#d24c00), and
     it is exactly the trap it looks like the solution to: 4.40:1 on white, so
     it reads as "the safe darker orange" while still failing AA. Every use of
     it turned out to be a contrast bug. Use --brand-ink / --brand-ink-dark. */

  /* THE RULE: bright orange works on dark, and fails on light.
     Every combination below was measured, not picked.

       #f75a00 on white          3.27:1   fails AA under 24px
       #d24c00 on white          4.40:1   still fails — close enough to look
                                          fine and not be, the worst kind of wrong
       #c04500 on white          5.13:1   passes; 4.79:1 on --jimibox-band
       white   on #f75a00        3.27:1   fails — so a brand-orange BUTTON with
                                          a white label fails too
       white   on #c04500        5.13:1   passes
       #f75a00 on #1c2024        5.01:1   passes — bright orange is right on the
                                          dark chrome, and only there

     So: --brand-ink is the orange for anything involving small text on a light
     surface, whether the orange is the ink (a link, a label) or the FILL behind
     white ink (a button). --brand stays for large display type, for orange on
     the dark chrome, and for non-text graphics, where the 3:1 bar applies. */
  --jimibox-brand-ink:      #c04500;
  --jimibox-brand-ink-dark: #a53b00;   /* hover step; white on it is 6.51:1 */

  /* Surfaces. Page is white; the alternating band gives sections rhythm without
     needing borders. NEVER set a section background to #fff — leave sections
     transparent and use --jimibox-band on alternates. */
  --jimibox-bg:           #ffffff;
  --jimibox-band:         #f6f7f9;
  --jimibox-card-bg:      #ffffff;
  --jimibox-border:       #e5e8ec;
  --jimibox-border-soft:  #eef1f4;

  /* Chrome. #444 was the live grey; a near-black reads current and, with the
     lighter text below, clears 4.5:1 comfortably where #444/#d3d3d3 did not. */
  --jimibox-dark:         #1c2024;
  --jimibox-dark-2:       #262b31;
  --jimibox-dark-text:    #c9cfd6;
  --jimibox-dark-heading: #ffffff;

  /* Text — near-black rather than #333, and a muted grey with enough contrast
     to be legible rather than decorative. */
  --jimibox-text:         #23282e;
  --jimibox-heading:      #14181c;
  --jimibox-text-muted:   #5b636d;
  --jimibox-text-invert:  #ffffff;

  /* Type — Raleway throughout now. The live site's Helvetica body copy against
     Raleway headings was a mismatch, not a design decision; one family with a
     real weight range is both more current and one less thing to load. */
  --jimibox-font:         Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --jimibox-font-heading: Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale. Every step is clamp(min, preferred, max) so the page
     resizes smoothly instead of stepping at breakpoints. */
  --jimibox-fs-body:      clamp(1rem, .96rem + .18vw, 1.0625rem);   /* 16 → 17 */
  --jimibox-fs-lede:      clamp(1.125rem, 1.05rem + .32vw, 1.3125rem);
  --jimibox-fs-small:     .875rem;
  --jimibox-fs-h1:        clamp(2.25rem, 1.6rem + 2.7vw, 3.5rem);   /* 36 → 56 */
  --jimibox-fs-h2:        clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);   /* 28 → 40 */
  --jimibox-fs-h3:        clamp(1.375rem, 1.2rem + .75vw, 1.75rem); /* 22 → 28 */
  --jimibox-fs-h4:        clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --jimibox-fs-h5:        1.0625rem;

  /* Measure. Long lines are the other half of the readability problem — 1140px
     of 14px text is ~150 characters, roughly twice a comfortable line. */
  --jimibox-measure:      68ch;

  /* Layout */
  --jimibox-content-max:  1200px;
  --jimibox-gutter:       clamp(20px, 4vw, 32px);
  --jimibox-section-y:    clamp(44px, 5.2vw, 76px);
  --jimibox-row-gap:      clamp(28px, 3.4vw, 56px);
  --jimibox-header-height: 76px;
  --jimibox-topbar-height: 40px;

  /* Shape and depth */
  --jimibox-radius:       12px;
  --jimibox-radius-sm:    8px;
  --jimibox-radius-lg:    18px;
  --jimibox-shadow:       0 1px 2px rgba(16,24,40,.04), 0 10px 28px -12px rgba(16,24,40,.18);
  --jimibox-shadow-lift:  0 2px 4px rgba(16,24,40,.05), 0 20px 44px -16px rgba(16,24,40,.26);

  /* Motion */
  --jimibox-ease:         cubic-bezier(.22,.61,.36,1);
  --jimibox-dur:          .22s;
}

/* Everything below honours this: no transitions, no lift, no smooth scroll. */
@media (prefers-reduced-motion: reduce) {
  :root { --jimibox-dur: 0.01ms; }
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Full-bleed sections are `width: 100vw` + negative inline margins, and 100vw
   INCLUDES the scrollbar gutter — so on a browser with classic (non-overlay)
   scrollbars every band overruns the viewport by the scrollbar width and the
   page gains a horizontal scrollbar. `clip` rather than `hidden` on purpose:
   hidden would make this a scroll container and break `position: sticky`
   anywhere inside it. */
html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--jimibox-bg);
  color: var(--jimibox-text);
  font-family: var(--jimibox-font);
  font-size: var(--jimibox-fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Fluid scale, and headings now carry real weight. At 400 they barely
   out-ranked the body copy, which is why the old pages read as undifferentiated
   grey. `balance` is back on now that we are not matching the original's line
   breaks. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--jimibox-font-heading);
  color: var(--jimibox-heading);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--jimibox-fs-h1); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: var(--jimibox-fs-h2); line-height: 1.14; font-weight: 700; letter-spacing: -.015em; }
h3 { font-size: var(--jimibox-fs-h3); line-height: 1.22; font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: var(--jimibox-fs-h4); line-height: 1.3;  font-weight: 700; }
h5 { font-size: var(--jimibox-fs-h5); line-height: 1.45; font-weight: 600; }
h6 { font-size: 1rem;                 line-height: 1.5;  font-weight: 600; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.35em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

/* Prose links get a real affordance instead of a bare colour change. */
.jimibox-prose a,
.jimibox-wysiwyg__inner a,
.jimibox-columns__text a {
  color: var(--jimibox-brand-ink);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: .07em;
  transition: color var(--jimibox-dur) var(--jimibox-ease);
}
/* Hover goes DARKER, not lighter. I had this stepping to --brand-dark on the
   grounds that the underline carries the affordance — but --brand-dark is
   4.40:1, so hovering a link would have dropped it below AA. Contrast should
   not get worse when you interact with something. */
.jimibox-prose a:hover,
.jimibox-wysiwyg__inner a:hover,
.jimibox-columns__text a:hover { color: var(--jimibox-brand-ink-dark); }

/* One visible focus style for the whole site. The live site had none at all. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--jimibox-brand);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Shared layout primitives — used by chrome AND blocks.
   -------------------------------------------------------------------------- */

.jimibox-wrap {
  width: 100%;
  max-width: var(--jimibox-content-max);
  margin-inline: auto;
  padding-inline: var(--jimibox-gutter);
}

.jimibox-section { padding-block: var(--jimibox-section-y); }

/* Two stacked sections would otherwise put their bottom and top padding back to
   back — 152px of dead space between two rows of the same page. Collapse the
   second one's top so the gap between any two sections is exactly one rhythm
   unit, whatever nests them. */
.jimibox-section + .jimibox-section { padding-top: 0; }

/* A full-bleed band (hero, price band, feature band) is not a .jimibox-section
   and carries its own padding, so a section following one needs its top back. */
.jimibox-band-break + .jimibox-section { padding-top: var(--jimibox-section-y); }

.jimibox-section__head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.jimibox-section__head--center { margin-inline: auto; text-align: center; }

.jimibox-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* --brand-ink, not --accent: at 12–13px this is small text and needs 4.5:1. */
  color: var(--jimibox-brand-ink);
  margin-bottom: .75em;
}

.jimibox-lede {
  font-size: var(--jimibox-fs-lede);
  line-height: 1.55;
  color: var(--jimibox-text-muted);
}

/* Cap the line length of running text. 1140px of 16px copy is ~140 characters,
   about double a comfortable line — the other half of why the old pages were
   hard to read. Applied to prose containers, never to layout. */
.jimibox-measure { max-width: var(--jimibox-measure); }
.jimibox-measure--center { margin-inline: auto; }

/* Alternating band, for section rhythm without borders. */
.jimibox-band { background: var(--jimibox-band); }

/* A row of columns that collapses to one column at the same 780px breakpoint
   SiteOrigin Panels used, so the stack order matches the original on mobile. */
.jimibox-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--jimibox-row-gap);
  align-items: flex-start;
}
.jimibox-row > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 780px) {
  .jimibox-row { display: block; }
  .jimibox-row > * + * { margin-top: var(--jimibox-row-gap); }
}

/* Buttons. The originals were flat 20px/400 Raleway rectangles with a 4px
   radius — the weight and the sharpness are both part of what dated them. */
.jimibox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--jimibox-radius-sm);
  /* --brand-ink, not --brand. The label is 16px/700 — under the 18.66px bold
     boundary, so it is SMALL text and needs 4.5:1. White on #f75a00 is 3.27:1
     and fails; on #c04500 it is 5.13:1. The button stays orange either way. */
  background: var(--jimibox-brand-ink);
  color: var(--jimibox-text-invert);
  font-family: var(--jimibox-font-heading);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.06);
  transition: background var(--jimibox-dur) var(--jimibox-ease),
              box-shadow var(--jimibox-dur) var(--jimibox-ease),
              transform var(--jimibox-dur) var(--jimibox-ease);
}
.jimibox-btn:hover {
  background: var(--jimibox-brand-ink-dark);
  box-shadow: 0 6px 18px -6px rgba(192,69,0,.5);
  transform: translateY(-1px);
}
.jimibox-btn:active { transform: translateY(0); }

.jimibox-btn--lg { padding: 17px 34px; font-size: 1.0625rem; }

.jimibox-btn--ghost {
  background: transparent;
  color: var(--jimibox-text);
  border-color: var(--jimibox-border);
  box-shadow: none;
}
.jimibox-btn--ghost:hover {
  background: var(--jimibox-brand-tint);
  border-color: var(--jimibox-brand);   /* a border is a graphic: 3:1 applies */
  color: var(--jimibox-brand-ink);      /* the label is text: 4.71:1 on the tint */
  box-shadow: none;
}

/* On a photo. Solid white beats a translucent panel for legibility. */
.jimibox-btn--ondark {
  background: #fff;
  color: var(--jimibox-heading);
}
.jimibox-btn--ondark:hover {
  background: var(--jimibox-brand-ink);
  color: #fff;
}

/* Cards — the ONLY place --jimibox-card-bg should appear. */
.jimibox-card {
  background: var(--jimibox-card-bg);
  border: 1px solid var(--jimibox-border-soft);
  border-radius: var(--jimibox-radius);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--jimibox-shadow);
}

/* Content images. Square-cornered, shadowless photos sitting flat on the page
   is the other half of the dated look — this gives them a consistent shape and
   something to do on hover. */
.jimibox-media {
  border-radius: var(--jimibox-radius);
  overflow: hidden;
  background: var(--jimibox-band);
}
.jimibox-media img { width: 100%; }

a.jimibox-media,
.jimibox-media--hover {
  display: block;
  box-shadow: var(--jimibox-shadow);
  transition: box-shadow var(--jimibox-dur) var(--jimibox-ease),
              transform var(--jimibox-dur) var(--jimibox-ease);
}
a.jimibox-media:hover,
.jimibox-media--hover:hover {
  box-shadow: var(--jimibox-shadow-lift);
  transform: translateY(-2px);
}

/* Section heading with a short brand rule under it. Replaces the old theme's
   centred 60px hairline, which is a very recognisable 2014 Kadence tic. */
.jimibox-heading-rule::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: .6em;
  border-radius: 2px;
  background: var(--jimibox-brand);
}
.jimibox-heading-rule--center::after { margin-inline: auto; }

/* The white content panel Pinnacle put behind the body of a page on its default
   template (Compound Storage, Car Storage, Contact). It existed to match the
   original; now that the page background is white it would be an invisible
   white-on-white box, so it is a structural pass-through only.
   Kept rather than deleted because the per-page toggle still switches it, and
   a future section that wants a raised surface can turn it back into one — see
   the commented rule. Blocks constrain their own width via .jimibox-wrap, so
   this must NOT set a max-width or it would double-constrain them.

   .jimibox-page-card { background: var(--jimibox-card-bg);
                        border-radius: var(--jimibox-radius-lg);
                        box-shadow: var(--jimibox-shadow); } */
.jimibox-page-card { width: 100%; }

/* Screen-reader only */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* WP core alignment classes */
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.alignwide { max-width: calc(var(--jimibox-content-max) + 160px); margin-inline: auto; }
.aligncenter { margin-inline: auto; }