/* =====================================================================
   darrenargyle.com  DARK TEXTURED HERO + AS FEATURED IN TICKER  v8 (2026-10-09)
   Shared by every page with a non-photo hero (index.html and speaking.html
   keep their photo heroes). Link it BEFORE nav.css so nav.css stays last
   in <head> and keeps winning the cascade. No nav rules live here.
   Approved on the assessment test, 8 Oct 2026.
   ===================================================================== */
:root{
  --dh-peek:102px;           /* same peek as the homepage press bar */
  --dh-brown:#2c2924;        /* site charcoal brown (nav.css / --charcoal) */
  --dh-brown-mid:#5c4630;    /* site dark brown (homepage ticker text) */
  --dh-cream:#F5E8C7;        /* brand cream: headline connectors */
  --dh-gold:#F2C14E;         /* brand gold: punch words, accents */
  --dh-soft:rgba(245,232,199,.78);
  --dh-texture:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.13'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(245,232,199,.014) 0 1px, transparent 1px 3px, rgba(0,0,0,.03) 3px 4px, transparent 4px 7px),
    repeating-linear-gradient(0deg, rgba(245,232,199,.010) 0 1px, transparent 1px 4px, rgba(0,0,0,.025) 4px 5px, transparent 5px 9px),
    radial-gradient(ellipse 70% 85% at 22% 40%, rgba(92,70,48,.78) 0%, rgba(92,70,48,.28) 45%, rgba(92,70,48,0) 75%),
    linear-gradient(155deg, #3a3129 0%, #2c2924 55%, #231f1b 100%);
}

/* Texture surface: grain + linen + warm glow + diagonal fade */
.dh-surface{
  background-color:var(--dh-brown) !important;
  background-image:var(--dh-texture) !important;
}

/* ---------------------------------------------------------------------
   FOLD LAYOUT
   .dh-top wraps hero, ticker and the cream band that follows it.
   Desktop: text column + optional visual column over a full-bleed .dh-bg.
   Tablet/phone: one column; hero fills the screen less the peek, then
   ticker, then band, then the visual (unless .dh-visual-before-band).
   --------------------------------------------------------------------- */
.dh-top{
  --dh-col1:640px; --dh-col2:480px; --dh-gutter:40px;
  display:grid;
  grid-template-columns:minmax(var(--dh-gutter),1fr) minmax(0,var(--dh-col1)) minmax(0,var(--dh-col2)) minmax(var(--dh-gutter),1fr);
}
.dh-top > .dh-bg{
  grid-row:1; grid-column:1 / -1;
  min-height:calc(100vh - var(--dh-peek));
  min-height:calc(100svh - var(--dh-peek));
}
.dh-top > .dh-hero{
  grid-row:1; grid-column:2;
  align-self:center; position:relative; z-index:1;
  padding:92px 64px 32px 0;
  color:var(--dh-cream);
}
.dh-top > .dh-hero{ background:none; }
.dh-top.dh-single > .dh-hero{ grid-column:2 / 4; padding-right:0; }
.dh-top.dh-flip{ grid-template-columns:minmax(var(--dh-gutter),1fr) minmax(0,var(--dh-col2)) minmax(0,var(--dh-col1)) minmax(var(--dh-gutter),1fr); }
.dh-top.dh-flip > .dh-visual{ grid-column:2; }
.dh-top.dh-flip > .dh-hero{ grid-column:3; padding:92px 0 32px 64px; }
.dh-top.dh-center > .dh-hero{ text-align:center; justify-self:center; max-width:900px; width:100%; }
.dh-top > .dh-visual{
  grid-row:1; grid-column:3;
  align-self:center; justify-self:center; position:relative; z-index:1;
  margin-top:68px; width:100%;
}
.dh-top > .dh-press{ grid-row:2; grid-column:1 / -1; }
.dh-top > .dh-band{ grid-row:3; grid-column:1 / -1; }

/* Headline treatment on dark: cream connectors, gold punch words */
.dh-hero h1{ color:var(--dh-cream) !important; }
.dh-hero h1 em, .dh-hero h1 .dh-gold{ color:var(--dh-gold) !important; }

/* Cream band after the ticker (holds items moved out of the hero) */
.dh-band{ background:var(--cream, #f5f0e8); padding:56px 40px 64px; }
.dh-band-inner{ max-width:1120px; margin:0 auto; }

/* ---- As Featured In ticker: copied from index.html press bar ---- */
.dh-press{
  background:#f5f0e8;
  padding:20px 0;
  text-align:center;
  overflow:hidden;
}
.dh-press p{
  font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
  color:#7a5f3b; margin:0 0 20px;   /* v6: was #8b6f47 (4.15:1 on #f5f0e8, AA fail); #7a5f3b is 5.25:1 */
}
.dh-press-track{
  display:flex; align-items:center; gap:56px; width:max-content;
  animation:dh-ticker 60s linear infinite;
}
.dh-press-track span,
.dh-press-track a{
  font-family:'Playfair Display', Georgia, serif;
  font-size:24px; font-weight:700; color:#5c4630; letter-spacing:.5px;
  white-space:nowrap; text-decoration:none; transition:color .2s;
}
.dh-press-track a:hover{ color:#2c2924; }
@keyframes dh-ticker{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@media (max-width:600px){
  .dh-press-track{ gap:32px; }
  .dh-press-track span, .dh-press-track a{ font-size:16px; }
}
@media (max-width:480px){
  .dh-press{ padding:20px 0; }
  .dh-press-track{ gap:24px; }
  .dh-press-track span{ font-size:14px; }
}

/* ---- Tablet / phone ---- */
@media (max-width:900px){
  .dh-top{ display:flex; flex-direction:column; }
  .dh-top > .dh-bg{ display:none; }
  .dh-top > .dh-hero{
    order:1;
    min-height:calc(100vh - var(--dh-peek));
    min-height:calc(100svh - var(--dh-peek));
    min-height:calc(100dvh - var(--dh-peek));
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:92px 20px 28px;
    background-color:var(--dh-brown);
    background-image:var(--dh-texture);
  }
  .dh-top.dh-center > .dh-hero{ align-items:center; max-width:none; }
  .dh-top > .dh-hero > *{ max-width:100%; }
  .dh-top.dh-single > .dh-hero, .dh-top.dh-flip > .dh-hero{ padding:92px 20px 28px; }
  .dh-top > .dh-press{ order:2; }
  .dh-top > .dh-band{ order:3; padding:44px 20px 32px; }
  .dh-top > .dh-visual{ order:4; margin:0 20px 48px; width:auto; }
  .dh-top.dh-visual-before-band > .dh-visual{ order:3; margin-top:40px; }
  .dh-top.dh-visual-before-band > .dh-band{ order:4; }
}
@media (max-width:640px){
  .dh-top > .dh-hero,
  .dh-top.dh-single > .dh-hero, .dh-top.dh-flip > .dh-hero{ padding:88px 20px 24px; }
}
/* Short phones (iPhone SE class): tighten so the ticker still peeks */
@media (max-width:640px) and (max-height:700px){
  .dh-top > .dh-hero,
  .dh-top.dh-single > .dh-hero, .dh-top.dh-flip > .dh-hero{ padding-top:80px; padding-bottom:14px; }
  .dh-top > .dh-hero h1{ font-size:36px !important; margin-bottom:12px !important; }
}

/* =====================================================================
   RESTYLE v2 (2026-10-09, preview). Two site-wide additions:
   1. .dh-sec-dark: any below-fold section that used to be solid charcoal
      or chocolate gets the SAME texture as the dark top (var(--dh-texture))
      and the above-fold palette: cream headings, soft cream body, gold
      labels, accents and emphasised headline words.
   2. Retro gold buttons: the colour of the above-fold "Get My Free Exit
      Readiness Score" button (--warm-brown-light #a6845a) with near-black
      charcoal text (Cheryl's ruling, v3). Applied with .dh-btn,
      .dh-btn-icon and every form submit button, on cream and brown alike.
   Every page that links this file must link it BEFORE nav.css.
   ===================================================================== */
:root{
  /* v7 (Darren via Cheryl, 9 Oct 2026): brighter, warmer vintage gold. Was #a6845a / hover #b5946a. */
  --dh-btn-gold:#DAB054;         /* vintage gold: ink 8.77:1; 3.40:1 against the lightest texture pixel */
  --dh-btn-gold-hover:#E4BF66;   /* a touch lighter on hover: ink 9.7:1; 3.7:1 against the texture */
  --dh-btn-edge:#8a6a2c;         /* v7 hard edge colour; no longer drawn by v8 (kept for reference) */
  /* v8 soft glow (approved by Darren via Cheryl, 9 Oct 2026): the hard 1px edge becomes a tight, soft glow.
     Cream/light: a warm darker-gold hairline + 8px halo so the button still reads as a button.
     Brown texture: a gentle gold halo. Blur <=10px, spread <=2px. */
  --dh-btn-glow:0 0 0 1px rgba(138,106,44,.30), 0 0 8px 1px rgba(138,106,44,.35);
  --dh-btn-glow-hover:0 0 0 1px rgba(138,106,44,.36), 0 0 10px 2px rgba(138,106,44,.40);
  --dh-btn-glow-dark:0 0 0 1px rgba(242,193,78,.30), 0 0 9px 1px rgba(242,193,78,.45);
  --dh-btn-glow-dark-hover:0 0 0 1px rgba(242,193,78,.38), 0 0 10px 2px rgba(242,193,78,.55);
  --dh-btn-ink:#1a1714;          /* near-black charcoal (v3 ruling) */
  --dh-focus-ring:0 0 0 3px #2c2924, 0 0 0 6px #F2C14E;  /* shows on cream and on brown */
  /* AA over the texture's lightest pixel (about rgb(100,84,66)), measured 2026-10-09:
     --dh-soft-aa 5.06:1, --dh-gold-text 5.04:1, --dh-cream 5.97:1, --dh-gold 4.33:1 (large text only) */
  --dh-soft-aa:rgba(245,232,199,.88);
  --dh-gold-text:#FFD166;        /* brand light yellow: small gold text on brown */
}

/* ---- 1. Textured brown sections below the fold ---- */
/* .dh-on-light marks a light card that sits inside a brown section (for
   example the cream kit stack on assessment); its text keeps page colours. */
.dh-sec-dark{
  background-color:var(--dh-brown) !important;
  background-image:var(--dh-texture) !important;
  color:var(--dh-cream);
}
.dh-sec-dark :is(h1,h2,h3,h4,h5,h6):not(.dh-on-light *){ color:var(--dh-cream) !important; }
/* emphasised headline words are large text: the hero gold passes 3:1 */
.dh-sec-dark :is(h1,h2,h3,h4,h5,h6) :is(em,.dh-gold):not(.dh-on-light *){ color:var(--dh-gold) !important; }
.dh-sec-dark .dh-label:not(.dh-on-light *){ border-color:rgba(242,193,78,.35) !important; }
.dh-sec-dark :is(p,li,blockquote,figcaption,dd,dt,small,cite,address):not(.dh-on-light *){ color:var(--dh-soft-aa) !important; }
.dh-sec-dark :is(p,li,blockquote) strong:not(.dh-on-light *){ color:var(--dh-cream) !important; }
/* inline links, and buttons styled as inline links, inside running text */
.dh-sec-dark :is(p,li,blockquote,figcaption) :is(a,button):not(.dh-btn):not(.dh-on-light *){ color:var(--dh-gold-text) !important; text-decoration:underline; text-underline-offset:3px; }
.dh-sec-dark :is(p,li,blockquote,figcaption) :is(a,button):not(.dh-btn):not(.dh-on-light *):hover{ color:var(--dh-cream) !important; }
/* footers: column titles are labels, links are soft cream */
footer.dh-sec-dark :is(h3,h4,h5):not(.dh-on-light *){ color:var(--dh-gold-text) !important; }
footer.dh-sec-dark a{ color:var(--dh-soft-aa) !important; text-decoration:none; }
footer.dh-sec-dark a:hover, footer.dh-sec-dark a:focus-visible{ color:var(--dh-gold-text) !important; }
footer.dh-sec-dark :is(div,p){ border-color:rgba(245,232,199,.14) !important; }

/* Small text on any brown surface (textured hero or section), opt-in:
   .dh-label = small gold label/accent/link (#FFD166, 4.5:1+ at the lightest
   texture pixel); .dh-body = body copy (cream .88). The hero gold #F2C14E
   stays for large text only. */
:is(.dh-top,.dh-hero,.dh-surface,.dh-sec-dark) .dh-label:not(.dh-on-light *){ color:var(--dh-gold-text) !important; }
:is(.dh-top,.dh-hero,.dh-surface,.dh-sec-dark) .dh-body:not(.dh-on-light *){ color:var(--dh-soft-aa) !important; }

/* ---- 2. Retro gold buttons ---- */
.dh-btn,
form button[type="submit"],
form input[type="submit"]{
  background:var(--dh-btn-gold) !important;
  background-image:none !important;
  color:var(--dh-btn-ink) !important;
  border-color:var(--dh-btn-gold) !important;
}
/* v8 soft glow: the v7 hard 1px inner outline is replaced by a tight soft glow (box-shadow,
   follows border-radius, no layout shift). The outline stays as a TRANSPARENT 1px line so
   Windows high-contrast / forced-colours mode still draws a button edge (box-shadow is
   dropped there). The focus ring below replaces the glow on keyboard focus.
   The glow carries no !important: the selectors already outrank every page button rule
   (audited on all 17 pages, 9 Oct 2026), and leaving it off lets the focus ring and any
   deliberate page-level override win cleanly. */
.dh-btn,
form button[type="submit"],
form input[type="submit"],
.dh-chip.active, .dh-chip[aria-pressed="true"],
.dh-btn-icon,
.nav-cta, .mobile-menu .mobile-cta{
  outline:1px solid transparent !important; outline-offset:-1px !important;
}
.dh-btn,
form button[type="submit"],
form input[type="submit"],
.dh-chip.active, .dh-chip[aria-pressed="true"]{
  box-shadow:var(--dh-btn-glow);
}
:is(.dh-top,.dh-hero,.dh-surface,.dh-sec-dark) :is(.dh-btn, form button[type="submit"], form input[type="submit"], .dh-chip.active, .dh-chip[aria-pressed="true"]):not(.dh-on-light *){
  box-shadow:var(--dh-btn-glow-dark);
}
.dh-btn *{ color:inherit !important; }
.dh-btn:hover, .dh-btn:active,
form button[type="submit"]:hover, form input[type="submit"]:hover{
  background:var(--dh-btn-gold-hover) !important;
  border-color:var(--dh-btn-gold-hover) !important;
  color:var(--dh-btn-ink) !important;
  box-shadow:var(--dh-btn-glow-hover);
}
:is(.dh-top,.dh-hero,.dh-surface,.dh-sec-dark) :is(.dh-btn:hover, .dh-btn:active, form button[type="submit"]:hover, form input[type="submit"]:hover):not(.dh-on-light *){
  box-shadow:var(--dh-btn-glow-dark-hover);
}
/* focus ring: the brown-context line carries the same :not() as the glow rule so the ring always wins */
.dh-btn:focus-visible,
form button[type="submit"]:focus-visible, form input[type="submit"]:focus-visible,
:is(.dh-top,.dh-hero,.dh-surface,.dh-sec-dark) :is(.dh-btn, form button[type="submit"], form input[type="submit"]):focus-visible:not(.dh-on-light *){
  outline:2px solid transparent !important; box-shadow:var(--dh-focus-ring) !important;
}
form button[type="submit"]:disabled{ opacity:.7; }
.dh-btn-icon{ background:var(--dh-btn-gold) !important; color:var(--dh-btn-ink) !important; }
.dh-btn-icon svg{ fill:var(--dh-btn-ink) !important; }  /* v7: a white glyph on the brighter gold would be 2.0:1; dark ink is 8.77:1 */
:hover > .dh-btn-icon{ background:var(--dh-btn-gold-hover) !important; }
:focus-visible > .dh-btn-icon{ box-shadow:var(--dh-focus-ring) !important; }

/* v8 CTA sizing (Darren, 9 Oct 2026): on tablet and desktop a hero CTA hugs its label instead
   of stretching across the text column (home hero; book and playbook heroes at 481-900px).
   Phones (480px and below) keep each page's full-width tap pattern. Buttons inside forms,
   modals and cards are left to their page rules. max-width keeps long labels inside the column. */
@media (min-width:481px){
  .dh-hero .dh-btn:not(form *), .hero > .hero-content .hero-cta.dh-btn{
    width:fit-content !important; max-width:100%;
  }
}

/* ---- 3. Filter chips (v4, hover fixed in v5): toggle buttons such as the blog categories.
   The selected chip is the retro gold button; unselected chips stay
   outlined so the current filter is still obvious, with a gold hover. ---- */
.dh-chip.active, .dh-chip[aria-pressed="true"]{
  background:var(--dh-btn-gold) !important; border-color:var(--dh-btn-gold) !important; color:var(--dh-btn-ink) !important;
}
.dh-chip:not(.active):not([aria-pressed="true"]):hover{ background:var(--dh-btn-gold-hover) !important; border-color:var(--dh-btn-gold-hover) !important; color:var(--dh-btn-ink) !important; }  /* v5: pages may set a dark hover background */
.dh-chip:focus-visible, :is(.dh-top,.dh-hero,.dh-surface,.dh-sec-dark) .dh-chip:focus-visible,
:is(.dh-top,.dh-hero,.dh-surface,.dh-sec-dark) :is(.dh-chip.active, .dh-chip[aria-pressed="true"]):focus-visible:not(.dh-on-light *){ outline:2px solid transparent !important; box-shadow:var(--dh-focus-ring) !important; }

/* ---- 4. Form fields inside brown sections (v6) ----
   Default only: specificity (0,2,0), no !important, so a page rule such as
   `.enquiry.dh-sec-dark .form-group input` still wins. Measured at the
   lightest texture pixel: typed text 8.0:1, placeholder 4.9:1, labels
   (soft cream) 5.0:1+, field edge 3.2:1 (non-text 3:1). */
.dh-sec-dark :where(input:not([type="submit"],[type="button"],[type="reset"],[type="checkbox"],[type="radio"],[type="hidden"],[type="range"],[type="color"],[type="file"],[type="image"]),select,textarea):not(.dh-on-light *){
  background-color:rgba(0,0,0,.2); border-color:rgba(245,232,199,.6); color:var(--dh-cream);
}
.dh-sec-dark :where(input,textarea):not(.dh-on-light *)::placeholder{ color:rgba(245,232,199,.7); opacity:1; }
.dh-sec-dark :where(input:not([type="submit"],[type="button"],[type="reset"],[type="checkbox"],[type="radio"],[type="hidden"]),select,textarea):not(.dh-on-light *):focus{ border-color:var(--dh-gold-text); }
.dh-sec-dark :where(select):not(.dh-on-light *) option{ color:#2c2924; background:#f5f0e8; }
.dh-sec-dark :where(input[type="date"],input[type="time"],input[type="datetime-local"],select):not(.dh-on-light *){ color-scheme:dark; }
.dh-sec-dark :where(label,legend):not(.dh-on-light *){ color:var(--dh-soft-aa); }

/* ---- 5. Dark panel card inside a brown section (v6, opt-in) ----
   A see-through LIGHT card (white wash) on the texture lifts the background
   and drops soft body copy under 4.5:1. Add .dh-panel to the card instead:
   a dark wash that keeps the card edge visible and only raises contrast. */
.dh-sec-dark .dh-panel:not(.dh-on-light *){
  background-color:rgba(26,23,20,.32) !important; background-image:none !important;
  border:1px solid rgba(245,232,199,.16) !important; box-shadow:none !important;
}