/*
Theme Name:   Latchford (Blocksy Child)
Template:     blocksy
Version:      1.1.0
Text Domain:  latchford
Description:  Brand tokens for Latchford Hardware. The OWNER of these values is
              site-build-spec-woocommerce.md Section 6.0. Do not invent a
              seventh colour here; change 6.0 first, then mirror it.
*/

/* ---------------------------------------------------------------------------
   6.0a TOKENS. Ratios are measured against white unless stated otherwise.
   These names are ours and collide with nothing, so plain :root is safe.
   --------------------------------------------------------------------------- */
:root {
  --latch-ink:     #15181C;  /* 17.81:1 on white. Type and every primary action. */
  --latch-steel:   #5C666E;  /*  5.86:1 on white. Secondary text only.           */
  --latch-line:    #E8EAEC;  /* Hairlines and dividers. Never text.              */
  --latch-control: #8A9298;  /*  3.16:1. Control borders, WCAG 1.4.11.           */
  --latch-surface: #F5F6F7;  /* Panel fill on the white ground.                  */
  --latch-bronze:  #A17236;  /*  4.22:1 on white AND on ink. The only accent.    */
  --latch-panel:   #101418;  /* Dark panel: utility bar, hero, footer. 6.0d.     */
  --latch-panel-text:  #E6E9EB;
  --latch-panel-muted: #9AA3AA;
  --latch-instock:     #146B45;
  --latch-backorder:   #A32117;
}

/* ---------------------------------------------------------------------------
   BLOCKSY PALETTE OVERRIDE.
   Blocksy prints its own palette into an INLINE <style> on :root, which loads
   after this file and therefore wins a specificity tie. `html:root` is 0,1,1
   against its 0,1,0, so this wins without a single !important.
   --------------------------------------------------------------------------- */
html:root {
  --theme-palette-color-1: var(--latch-ink);      /* primary action */
  --theme-palette-color-2: var(--latch-bronze);   /* accent, sparing */
  --theme-palette-color-3: var(--latch-ink);      /* headings */
  --theme-palette-color-4: var(--latch-steel);    /* secondary text */
  --theme-palette-color-5: var(--latch-line);     /* borders */
  --theme-palette-color-6: var(--latch-surface);  /* panel fill */
  --theme-palette-color-7: #FFFFFF;               /* ground */
  /* SLOT 8 STAYS WHITE. Blocksy uses palettes 7 AND 8 as BACKGROUNDS, and the
     header takes 8. Pointing it at the dark panel turned the masthead black
     with a black logo on it. The dark panel is applied directly where it is
     wanted (.ct-footer below), never through a shared palette slot. */
  --theme-palette-color-8: #FFFFFF;

  --theme-text-color:            var(--latch-ink);
  --theme-link-initial-color:    var(--latch-ink);
  --theme-link-hover-color:      var(--latch-bronze);
  --theme-headings-color:        var(--latch-ink);
  --theme-border-color:          var(--latch-line);
  --theme-button-background-initial-color: var(--latch-ink);
  --theme-button-background-hover-color:   var(--latch-panel);
  --theme-button-text-initial-color: #FFFFFF;
  --theme-button-text-hover-color:   #FFFFFF;
  --theme-content-background-color:  #FFFFFF;
}

/* 6.0d: the page ground is WHITE. Dark is a panel device, nothing else. */
html:root body { background-color: #FFFFFF; }

/* ---------------------------------------------------------------------------
   LINKS. B7: colour is never the only carrier of meaning, so links underline.
   --------------------------------------------------------------------------- */
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ct-menu-link):not(.latch-btn):not(.lx-btn) {
  color: var(--latch-ink);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--latch-bronze);
}
.entry-content a:not(.wp-block-button__link):not(.wp-element-button):not(.ct-menu-link):not(.latch-btn):not(.lx-btn):hover {
  color: var(--latch-bronze);
}

/* ---------------------------------------------------------------------------
   BUTTONS. Primary action is INK, never bronze: B4 keeps the accent from
   ever sitting behind text.
   --------------------------------------------------------------------------- */
.wp-block-button__link, .wp-element-button,
input[type="submit"], button[type="submit"] {
  background-color: var(--latch-ink);
  color: #FFFFFF;
  border: 1px solid var(--latch-ink);
  border-radius: 2px;
}
.wp-block-button__link:hover, .wp-element-button:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
  background-color: var(--latch-panel);
  border-color: var(--latch-panel);
  color: #FFFFFF;
}
/* Outline variant: Blocksy paints this with its own link colour, which was
   its default blue. Matching its selector depth beats it without !important. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
  background-color: transparent;
  color: var(--latch-ink);
  border: 1px solid var(--latch-control);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--latch-surface);
  color: var(--latch-ink);
  border-color: var(--latch-ink);
}

/* ---------------------------------------------------------------------------
   CONTROLS. B3 / WCAG 1.4.11: 3:1 boundary on anything clickable or typable.
   #8A9298 measures 3.16:1. The old #C9CFD3 measured 1.57 and failed.
   --------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="date"], input[type="search"], input[type="password"],
select, textarea {
  border: 1px solid var(--latch-control);
  border-radius: 2px;
  padding: 0.6em 0.7em;
  background: #FFFFFF;
  color: var(--latch-ink);
  width: 100%;
  max-width: 34rem;
  font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--latch-bronze);
  outline-offset: 2px;
}

/* Quote form: label above field, radios stacked, upload reads as a drop area. */
.wpcf7 label { display: block; margin-bottom: 1.1rem; font-weight: 500; color: var(--latch-ink); }
.wpcf7 .wpcf7-list-item { display: block; margin: 0.35rem 0 0 0; font-weight: 400; }
.wpcf7 input[type="file"] { border: 1px dashed var(--latch-control); background: var(--latch-surface); padding: 0.55em; }
.wpcf7 .wpcf7-submit { width: auto; max-width: none; cursor: pointer; }
.wpcf7-not-valid-tip { color: var(--latch-backorder); font-weight: 500; }
.wpcf7 form .wpcf7-response-output { border-width: 1px; border-radius: 2px; padding: 0.8em 1em; }

/* ---------------------------------------------------------------------------
   MASTHEAD. The lockup already reads LATCHFORD HARDWARE, so the theme's
   site-title text beside it is the same words twice.
   200px desktop / 160px mobile. 160 is the MEASURED minimum (6.0h), a floor.
   --------------------------------------------------------------------------- */
.site-branding .site-title-container { display: none; }
.site-logo-container img { max-width: 200px; height: auto; }
@media (max-width: 782px) { .site-logo-container img { max-width: 160px; } }

/* Front page prints the PAGE title as a second h1 above the real headline.
   Hidden here as a belt to the braces of has_hero_section=disabled. */
.home .hero-section { display: none; }

/* ---------------------------------------------------------------------------
   FOOTER. One of the four places 6.0d allows a dark panel.
   --------------------------------------------------------------------------- */
html:root .ct-footer,
html:root .ct-footer [data-row="bottom"] { background-color: var(--latch-panel); }
.ct-footer-copyright { color: var(--latch-panel-muted); font-size: 0.875rem; line-height: 1.9; }
.ct-footer-copyright a { color: var(--latch-panel-text); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--latch-bronze); }
.ct-footer-copyright a:hover { color: var(--latch-bronze); }
.latch-foot-nav { display: block; }
.latch-foot-sep { color: var(--latch-panel-muted); padding: 0 .5rem; }
.latch-foot-legal { display: block; margin-top: .6rem; color: var(--latch-panel-muted); max-width: 70ch; }

/* Separators are full-width hairlines, not short centred rules. */
.wp-block-separator { border: 0; border-top: 1px solid var(--latch-line); opacity: 1; width: 100%; max-width: none; margin: 2.5rem 0; }

/* --- UTILITY BAR ------------------------------------------------------
   6.0d allows the dark panel in exactly four places and the utility bar
   is one of them. Text is --latch-panel-text on --latch-panel: 12.6:1.  */
.latch-utility { background: var(--latch-panel); color: var(--latch-panel-muted); font-size: 0.8125rem; }
.latch-utility__inner {
  max-width: var(--theme-normal-container-max-width, 1290px);
  margin: 0 auto; padding: 0.5rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.latch-utility__claim { color: var(--latch-panel-muted); }
.latch-utility__contact a { color: var(--latch-panel-text); text-decoration: underline; text-underline-offset: .18em; text-decoration-color: var(--latch-bronze); }
.latch-utility__contact a:hover { color: var(--latch-bronze); }
@media (max-width: 600px) { .latch-utility__claim { display: none; } .latch-utility__inner { justify-content: center; } }

/* Four-up columns must not squash to unreadable widths on tablet. */
@media (max-width: 900px) { .wp-block-columns { flex-wrap: wrap; } .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 1rem) !important; } }
@media (max-width: 560px) { .wp-block-columns > .wp-block-column { flex-basis: 100% !important; } }


/* The front page opens on a full-bleed dark band. Blocksy's default content
   padding left a white gap between the masthead and that band, which read as
   a rendering fault rather than as space. */
/* The class was renamed .latch-bleed -> .lx when the design layer was rewritten,
   and this rule was left pointing at the old name, so ~100px of dead white sat
   between the masthead and the hero band on every load. */
.home .entry-content > .lx:first-child,
.home .entry-content > .latch-bleed:first-child { margin-top: 0; }
.home .entry-content, .home article > .entry-content { margin-top: 0 !important; padding-top: 0 !important; }
.home .ct-container-full, .home #main { padding-top: 0 !important; }
/* Interior pages: the dark page header is also the first thing after the
   masthead, so it gets the same treatment. */
body:not(.home) .entry-content > .lx-pagehead:first-child { margin-top: calc(-1 * var(--gutter)); }
.home #main { padding-top: 0; }
.home .ct-container-full > article > .entry-content { margin-top: 0; }