/* ===========================================================================
 * CLH REDESIGN — shared stylesheet
 * ---------------------------------------------------------------------------
 * Loaded ONCE per page by the clh-perf mu-plugin, and only on pages that
 * actually contain redesign markup (any [class*="clh-"] element).
 *
 * Replaces three things that used to be duplicated in every single block:
 *   1. the Google Fonts <link>  (was one request per block, up to 9 per page)
 *   2. the design tokens        (were copy-pasted into ~50 <style> blocks)
 *   3. the theme guard          (was injected as an extra Elementor section)
 *
 * CASCADE ORDER MATTERS. clh-perf injects this at the END of <head>, so:
 *      theme + Bootstrap CSS  ->  this file  ->  each block's inline <style>
 * That is exactly right: the guard beats the theme's bare element rules, and
 * every block's own class rules still beat the guard.
 * ======================================================================== */


/* --- 1. Self-hosted fonts -------------------------------------------------
 * Latin subset only, matching how clh-perf already self-hosts Roboto for the
 * Houzez pages. Both faces are VARIABLE, so a single file covers every weight
 * the design uses and the weight range is declared rather than one face per
 * weight. Archivo 35 KB, Newsreader 132 KB.
 * Roboto stays self-hosted separately: the un-redesigned Houzez pages still
 * need it, so the two font sets coexist until the rollout finishes.
 * ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --- 2. Design tokens -----------------------------------------------------
 * The single source of truth for the redesign. Change a colour here rather
 * than in fifty block files. Blocks may keep their literal hex values for now;
 * these exist so new work has somewhere correct to point.
 * ------------------------------------------------------------------------ */
:root {
  /* brand */
  --clh-navy:        #0C3A5C;
  --clh-blue:        #1487C4;
  --clh-blue-dark:   #0F6FA6;
  --clh-green:       #83C341;
  --clh-green-dark:  #74b232;

  /* ink + surfaces */
  --clh-ink:         #16232E;
  --clh-muted:       #5a6b78;
  --clh-faint:       #9aa7b0;
  --clh-line:        #eaeef2;
  --clh-line-soft:   #eef1f4;
  --clh-surface:     #f9fbfc;
  --clh-surface-2:   #f6f8fa;
  --clh-white:       #ffffff;

  /* type */
  --clh-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --clh-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* layout: every block shares one 1280px column and one gutter */
  --clh-measure:  1280px;
  --clh-gutter:   clamp(24px, 5vw, 56px);
  --clh-section:  clamp(40px, 6vw, 72px);
  --clh-prose:    68ch;
  --clh-radius:   16px;
  --clh-radius-lg: 20px;
  --clh-pill:     40px;
}


/* --- 3. Theme guard -------------------------------------------------------
 * Undoes the Houzez and Bootstrap bare-element rules that reach into the
 * blocks. Every selector is wrapped in :where(), which contributes ZERO
 * specificity, so these rules land at exactly bare-element weight:
 *   - they BEAT the theme's `h1 {}` / `a {}` (equal weight, later in cascade)
 *   - they LOSE to any block's own `.clh-* {}` rule (class weight)
 * The guard can only ever fill in where a block is silent.
 * Scoped to [class*="clh-"], so nothing else on the site is affected.
 * ------------------------------------------------------------------------ */

/* Houzez sets text-transform:capitalize on headings, which Title Cases every
   headline ("Your Home Journey, All Under One Roof."). It also forces its own
   heading line-heights, fighting the fluid clamp() type scale. */
:where([class*="clh-"]) h1,
:where([class*="clh-"]) h2,
:where([class*="clh-"]) h3,
:where([class*="clh-"]) h4,
:where([class*="clh-"]) h5,
:where([class*="clh-"]) h6 {
  text-transform: none;
  line-height: normal;
  letter-spacing: normal;
}

/* Theme link colour (#00aeff) and underlines override the design's links. */
:where([class*="clh-"]) a {
  color: inherit;
  text-decoration: none;
}

/* The theme body rule (Roboto 15px / 25px / #222) inherits into anything a
   block does not style. Re-assert the baseline on block ROOTS only: a BEM root
   is `.clh-name`, children are `.clh-name__part`, variants `.clh-name--mod`.
   Applying this to descendants repaints inherited values and broke the hero
   headline (navy text on a dark photo), so the :not() guards are load-bearing. */
:where([class*="clh-"]:not([class*="__"]):not([class*="--"])) {
  font-size: 16px;
  line-height: normal;
  color: var(--clh-navy);
}

/* Bootstrap's inline image baseline adds descender gaps under logo strips. */
:where([class*="clh-"]) img {
  vertical-align: middle;
}

/* Houzez adds bullets and padding that footer and feature lists do not want. */
:where([class*="clh-"]) ul,
:where([class*="clh-"]) ol {
  margin: 0;
  padding: 0;
  list-style: none;
}


/* --- 4. Mobile tap-target floor ------------------------------------------
 * Apple's guideline is 44x44, Google's is 48x48. These are the standalone
 * controls that measured under 44px on a phone. Deliberately NOT wrapped in
 * :where(): this is an accessibility floor and it is meant to win over the
 * block's own sizing.
 *
 * Inline links inside a paragraph are intentionally excluded. The guideline
 * covers discrete controls, and padding mid-sentence links would wreck the
 * line rhythm of the prose pages.
 * ------------------------------------------------------------------------ */
@media (max-width: 1024px) {

  /* footer social icons: were 38x38 */
  .clh-foot__social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Gallery filter pills: were 40px. Two classes deep on purpose — the block
     sets `height:40px` at single-class weight and its <style> sits later in
     the document, so a single-class rule here would lose the tie. */
  .clh-gal__tabs .clh-gal__tab {
    height: 44px;
  }

  /* Footer column links: 16px line boxes, standalone navigation rather than
     prose, so they get the full floor. */
  .clh-foot__col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* standalone "read more" style CTAs that sit on their own line */
  .clh-svc__all,
  .clh-pprog__link,
  .clh-fprog__btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* the logo is a link home: give it a full-height hit area rather than
     just the image box, without changing how the image itself renders */
  .clh-nav__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Phone and email in the lender cards and the LA Fire contact line. These
     are discrete contact controls, not links inside a sentence, so unlike
     prose links they do get the full floor. They measured 16-17px.

     Both halves put the floor on the ANCHOR, because the anchor is the thing
     being tapped. See the note on .clh-prose__contact-row below before changing
     either: targeting the row instead is a mistake this file has already made. */
  .clh-lend__v a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The floor goes on the ANCHOR, which is the thing being tapped. Putting it on
     the row looked right and was not: the row measured 44px while the anchors
     inside it stayed 26px tall, because `align-items:center` centres a flex item
     at its natural height rather than stretching it. Measuring the row rather than
     the target is how that got missed the first time. The label beside it still
     centres, and the row inherits the 44px from its tallest item. */
  .clh-prose__contact-row a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}




/* --- 5. Colour contrast ---------------------------------------------------
 * WCAG AA: 4.5:1 for text under 18pt. Every class below was MEASURED as
 * failing on the rendered pages across all 11 previews, and every selector is
 * listed because it failed, not because it looked like it might.
 *
 * Three things are deliberately NOT changed:
 *   - the brand green as a FILL. Navy on green and green on the navy band both
 *     measure 5.55:1.
 *   - the eyebrows that sit ON the navy band (svchead, faqhead, galhead,
 *     finhead, abouthero). Green on navy already passes; darkening those would
 *     put dark green on dark navy and make them far worse.
 *   - .clh-cta__btn, which is the GREEN button on the blue CTA band. It passes.
 *
 * Every selector is prefixed with `html` to add one element of specificity.
 * The per-block <style> sits LATER in the document than this file, so at equal
 * specificity the block wins the tie and none of this applies.
 * ------------------------------------------------------------------------ */
:root {
  --clh-green-text: #4A7A1C;   /* green for small text on LIGHT only */
  --clh-blue-text:  #0F6FA6;   /* blue for small text on LIGHT only */
  --clh-blue-fill:  #127BB3;   /* blue that carries white text */
}

/* A. Brand green as small text on light: 2.05-2.13:1 -> 5.13:1 (4.94 on #f9fbfc) */
html .clh-svc__eyebrow,
html .clh-svc__tag,
html .clh-fl__eyebrow,
html .clh-fsteps__eyebrow,
html .clh-steps__eyebrow,
html .clh-pprog__eyebrow,
html .clh-pprog__tag,
html .clh-fprog__tag,
html .clh-types__eyebrow,
html .clh-gal__eyebrow,
html .clh-reg__eyebrow,
html .clh-lp__eyebrow,
html .clh-kf__eyebrow,
html .clh-prose__eyebrow {
  color: var(--clh-green-text);
}

/* B. Pale greys: 2.46-3.45:1 -> 5.51:1. Not a new colour, #5a6b78 is already
      the body-copy token. .clh-calc__note is the estimator's "not a lending
      offer" disclaimer, i.e. the one string here with legal weight. */
html .clh-partners__label,
html .clh-calc__note,
html .clh-cinfo__label,
html .clh-reg__note,
html .clh-stats__label {
  color: #5a6b78;
}

/* C1. White text ON a blue fill: 3.97:1 -> 4.66:1 */
html .clh-nav__book,
html .clh-faqcta__btn,
html .clh-btn-primary,
html .clh-gpa__btn--primary,
html .clh-prose2__btn--primary {
  background-color: var(--clh-blue-fill);
}

/* C1b. The CTA BANDS, not the paragraphs inside them.
   An earlier pass put this background on .clh-cta__text and .clh-aducta__text,
   which are <p> elements, not buttons. That painted a darker blue rectangle
   behind just the lines of text on an already-blue band: visible, and it did
   not fix the contrast, because the band around it stayed #1487C4.

   The band is what has to darken. White on #1487C4 measures 3.92:1, which fails
   AA for small text even at full opacity, so the band moves to #127BB3 (4.60:1)
   and the paragraph gives up its 85% alpha. At .85 over the darker band the
   text still only reaches 3.79:1, so the alpha had to go regardless.

   .clh-aducta was a second, near-identical CTA component used only on ADU. It
   carried pre-restore wording and drifted from the ten identical bands, so ADU now
   uses the same .clh-cta band as everything else and those selectors are gone. */
html .clh-cta {
  background-color: var(--clh-blue-fill);
}
html .clh-cta__text {
  color: #fff;
}
html .clh-nav__book:hover,
html .clh-faqcta__btn:hover,
html .clh-btn-primary:hover {
  background-color: #0F6FA6;
}

/* C2. Blue AS text on light: 3.58-3.97:1 -> 5.46:1 on white */
/* Gallery pills: only the ACTIVE tab carries white text on blue. Recolouring
   the base class painted the inactive pills blue too, dropping their dark text
   to 2.19:1. Match the same :checked selectors the block uses instead. */
html #clh-gal-all:checked ~ .clh-gal__tabs [for="clh-gal-all"],
html #clh-gal-ext:checked ~ .clh-gal__tabs [for="clh-gal-ext"],
html #clh-gal-int:checked ~ .clh-gal__tabs [for="clh-gal-int"],
html #clh-gal-inst:checked ~ .clh-gal__tabs [for="clh-gal-inst"] {
  background: var(--clh-blue-fill);
  border-color: var(--clh-blue-fill);
}

html .clh-svc__all,
html .clh-svc__link,
html .clh-fprog__btn,
html .clh-pprog__link,
html .clh-prose__contact a {
  color: var(--clh-blue-text);
}

/* C3. The ADU size table emphasises its figures with a bare <b>, coloured by
   `.clh-reg__value b`. Brand blue at 15px on the #f9fbfc surface measures
   3.82:1. The first contrast pass missed these because it walked classed
   elements only, and these <b> tags carry no class of their own. */
html .clh-reg__value b {
  color: var(--clh-blue-text);
}

/* C4. Footer bottom bar: the copyright line and the Privacy Policy link, at
   rgba(255,255,255,.5) on the #0C3A5C footer, measure 4.17:1 at 13px. A near
   miss rather than a glaring one, which is why it survived the first pass.
   .62 lands around 5.5:1 and stays visibly dimmer than the .72 the rest of the
   footer body uses, so the hierarchy the design wanted is preserved. */
html .clh-foot__bottom,
html .clh-foot__bottom a {
  color: rgba(255, 255, 255, .62);
}
html .clh-foot__bottom a:hover {
  color: #fff;
}


/* C5. The label column in the lender cards, #8598a4 at 14.5px: 2.99:1.
   A new component, so it was never in the measured baseline. #5a6b78 is the
   body-copy token and reaches 5.51:1 while staying clearly secondary to the
   value beside it. */
html .clh-lend__k {
  color: #5a6b78;
}
