/*
Theme Name: EHL Electrical Ltd
Theme URI: https://wwebdesign.co.uk/
Author: W Web Design & Hosting
Author URI: https://wwebdesign.co.uk/
Description: Lean custom theme for EHL Electrical Ltd — 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: ehlelectrical
*/

/* ==========================================================================
   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.
   ========================================================================== */

:root {
  /* Brand — read straight off the live Kadence global palette on 2026-08-14,
     so these are the site's real values rather than eyeballed ones.
     Kadence name -> ours:  palette1 brand, palette2 brand-dark, palette3 ink,
     palette4 text, palette8 bg. */
  --ehlelectrical-brand:        #2b6cb0;   /* primary button */
  --ehlelectrical-brand-dark:   #215387;   /* primary button hover */
  --ehlelectrical-ink:          #1a202c;   /* nav text, hero overlay */

  /* The secondary blue, used only by the small "learn more" button. Its hover
     goes LIGHTER, which is unusual but is what the live site does. */
  --ehlelectrical-accent:       #1872aa;
  --ehlelectrical-accent-light: #40b1f5;

  --ehlelectrical-heading:      #06468a;   /* split-section headings */
  --ehlelectrical-whatsapp:     #30b02b;
  --ehlelectrical-whatsapp-dark:#25901f;

  /* Surfaces.
     NEVER set a section background to #fff — leave sections transparent so
     they inherit --ehlelectrical-bg, and fill --ehlelectrical-card-bg on inner cards. */
  --ehlelectrical-bg:           #f7fafc;
  --ehlelectrical-card-bg:      #ffffff;
  --ehlelectrical-border:       #e2e8f0;
  --ehlelectrical-band:         #dcecff;   /* footer middle band */
  --ehlelectrical-band-soft:    #edf2f7;   /* the "you are in good hands" band */

  /* Text */
  --ehlelectrical-text:         #2d3748;
  --ehlelectrical-text-muted:   #4a5568;
  --ehlelectrical-text-invert:  #ffffff;

  /* Type — the live site runs the system stack at 17px/1.6, with Montserrat
     on card titles and Poppins on the tile captions. Those two are the only
     webfonts, and they are self-hosted in assets/fonts. */
  --ehlelectrical-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                                Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --ehlelectrical-font-heading: var(--ehlelectrical-font);
  --ehlelectrical-font-card:    "Montserrat", var(--ehlelectrical-font);
  --ehlelectrical-font-display: "Poppins", var(--ehlelectrical-font);

  /* Layout */
  --ehlelectrical-content-max:  1290px;   /* matches the live Kadence container */
  --ehlelectrical-gutter:       24px;
  --ehlelectrical-section-y:    clamp(48px, 7vw, 104px);
  --ehlelectrical-radius:       3px;       /* live buttons are 3px, not pill */
  --ehlelectrical-header-height: 171px;   /* live header is logo-height, no padding */

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

/* --------------------------------------------------------------------------
   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; } }

body {
  margin: 0;
  background: var(--ehlelectrical-bg);
  color: var(--ehlelectrical-text);
  font-family: var(--ehlelectrical-font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ehlelectrical-font-heading);
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }

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

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

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

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

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

.ehlelectrical-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ehlelectrical-accent);
  margin-bottom: .75em;
}

.ehlelectrical-lede { font-size: 1.1rem; color: var(--ehlelectrical-text-muted); }

/* Buttons — 18px/400 on 10px 15px padding with a 3px radius, matching the
   live Kadence buttons rather than the starter's chunkier default. */
.ehlelectrical-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: var(--ehlelectrical-radius);
  background: var(--ehlelectrical-brand);
  color: var(--ehlelectrical-text-invert);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ehlelectrical-ease), transform .25s var(--ehlelectrical-ease);
}
.ehlelectrical-btn:hover { background: var(--ehlelectrical-brand-dark); transform: translateY(-1px); }

/* The small secondary button — 12px/300, square, and its hover goes lighter. */
.ehlelectrical-btn--small {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 300;
  border-radius: 0;
  background: var(--ehlelectrical-accent);
}
.ehlelectrical-btn--small:hover { background: var(--ehlelectrical-accent-light); }

.ehlelectrical-btn:focus-visible {
  outline: 3px solid var(--ehlelectrical-brand-dark);
  outline-offset: 3px;
}

.ehlelectrical-btn--ghost {
  background: transparent;
  color: var(--ehlelectrical-text);
  border-color: var(--ehlelectrical-border);
}
.ehlelectrical-btn--ghost:hover { background: var(--ehlelectrical-card-bg); }

/* WhatsApp — the live site's second CTA. Green, with the glyph inline so it
   costs no extra request. */
.ehlelectrical-btn--whatsapp { background: var(--ehlelectrical-whatsapp); }
.ehlelectrical-btn--whatsapp:hover { background: var(--ehlelectrical-whatsapp-dark); }
.ehlelectrical-btn--whatsapp::after {
  content: "";
  width: 1.15em; height: 1.15em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--ehlelectrical-whatsapp-glyph) center / contain no-repeat;
          mask: var(--ehlelectrical-whatsapp-glyph) center / contain no-repeat;
}

:root {
  --ehlelectrical-whatsapp-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.75-.86-2.02-.96s-.47-.15-.67.15-.77.96-.94 1.16-.35.22-.64.08a8.1 8.1 0 0 1-2.38-1.47 8.9 8.9 0 0 1-1.65-2.05c-.17-.3 0-.45.13-.6s.3-.35.45-.52.2-.3.3-.5a.55.55 0 0 0 0-.52c-.08-.15-.67-1.6-.92-2.2s-.49-.5-.67-.51h-.57a1.1 1.1 0 0 0-.8.37 3.34 3.34 0 0 0-1.04 2.48 5.8 5.8 0 0 0 1.21 3.07 13.26 13.26 0 0 0 5.08 4.49c.71.3 1.26.49 1.69.63a4.06 4.06 0 0 0 1.87.12 3.06 3.06 0 0 0 2-1.41 2.48 2.48 0 0 0 .17-1.41c-.07-.13-.27-.2-.57-.35zM12.05 21.8h-.01a9.8 9.8 0 0 1-5-1.37l-.36-.21-3.72.98.99-3.63-.23-.37a9.82 9.82 0 1 1 8.33 4.6zM12.05 0A11.9 11.9 0 0 0 1.7 17.85L0 24l6.3-1.65a11.9 11.9 0 1 0 5.75-22.35z'/%3E%3C/svg%3E");
}

/* Scroll reveal lives in assets/animations.css — including the fade-right
   variant that replaces the old site's single AOS effect. Do not add a second
   reveal system here. */

/* Cards — the ONLY place --ehlelectrical-card-bg should appear. */
.ehlelectrical-card {
  background: var(--ehlelectrical-card-bg);
  border: 1px solid var(--ehlelectrical-border);
  border-radius: var(--ehlelectrical-radius);
  padding: clamp(20px, 2.5vw, 32px);
}

/* 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(--ehlelectrical-content-max) + 160px); margin-inline: auto; }
.aligncenter { margin-inline: auto; }