/*
Theme Name: Kaemmerlen Electric
Theme URI: https://kaemmerlen.com
Author: Kaemmerlen Electric
Description: Custom block theme for Kaemmerlen Electric — 100 years of electrical, communications, and service work in St. Louis.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
Text Domain: kaemmerlen
*/

/* ============================================================================
   DESIGN TOKENS (aliases of theme.json custom properties)
   ----------------------------------------------------------------------------
   All colors, font sizes, and fluid spacing come from theme.json. These shorter
   names are just readability aliases so templates stay scannable.

   Editors tweaking colors or spacing: do it in theme.json, not here.
   ============================================================================ */
:root {
  /* Brand colors */
  --kae-navy:          var(--wp--preset--color--navy);
  --kae-blue:          var(--wp--preset--color--bright-blue);
  --kae-ink:           var(--wp--preset--color--ink);
  --kae-muted:         var(--wp--preset--color--muted);
  --kae-text:          var(--wp--preset--color--text);
  --kae-surface:       var(--wp--preset--color--surface);
  --kae-surface-alt:   var(--wp--preset--color--surface-alt);
  --kae-surface-form:  var(--wp--preset--color--surface-form);
  --kae-border:        var(--wp--preset--color--border);
  --kae-border-cool:   var(--wp--preset--color--border-cool);
  --kae-gold-soft:     var(--wp--preset--color--gold-soft);
  --kae-gold-cream:    var(--wp--preset--color--gold-cream);
  --kae-div-gold:      var(--wp--preset--color--division-gold);
  --kae-div-blue:      var(--wp--preset--color--division-blue);
  --kae-div-lime:      var(--wp--preset--color--division-lime);
  --kae-lime-soft:     var(--wp--preset--color--lime-soft);

  /* Typography families */
  --kae-ff-display:    var(--wp--preset--font-family--display);
  --kae-ff-body:       var(--wp--preset--font-family--body);

  /* Fluid font sizes (all match Figma values at 1920 canvas) */
  --kae-fs-tiny:       var(--wp--preset--font-size--tiny);
  --kae-fs-small:      var(--wp--preset--font-size--small);
  --kae-fs-body:       var(--wp--preset--font-size--body);
  --kae-fs-body-lg:    var(--wp--preset--font-size--body-lg);
  --kae-fs-lead:       var(--wp--preset--font-size--lead);
  --kae-fs-intro:      var(--wp--preset--font-size--intro);
  --kae-fs-subtitle:   var(--wp--preset--font-size--subtitle);
  --kae-fs-title:      var(--wp--preset--font-size--title);
  --kae-fs-page:       var(--wp--preset--font-size--page-title);
  --kae-fs-hero:       var(--wp--preset--font-size--hero-title);
  --kae-fs-display:    var(--wp--preset--font-size--display);

  /* Layout — fluid spacing that scales with viewport */
  --kae-pad-x:         var(--wp--custom--layout--page-pad-x);
  --kae-hero-pad-y:    var(--wp--custom--layout--hero-pad-y);
  --kae-section-y:     var(--wp--custom--layout--section-y);
  --kae-stack:         var(--wp--custom--layout--stack-gap);
  --kae-grid:          var(--wp--custom--layout--grid-gap);

  /* Canvas */
  --kae-canvas-max:    var(--wp--custom--canvas--max);

  /* Line heights */
  --kae-lh-tight:      var(--wp--custom--line-height--tight);
  --kae-lh-snug:       var(--wp--custom--line-height--snug);
  --kae-lh-normal:     var(--wp--custom--line-height--normal);

  /* Shadows */
  --kae-shadow-card:   var(--wp--custom--shadow--card);
}

/* ============================================================================
   BASE
   ============================================================================ */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  background: var(--kae-surface-alt);
  /* Anchor jumps (e.g. clicking a dateline era) need to land BELOW the sticky
     header — otherwise the section's top scrolls under the bar. Matches the
     collapsed header height on desktop and the fixed bar height on mobile. */
  scroll-padding-top: min(3.65vw, 70px);
}
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  font-family: var(--kae-ff-body);
  color: var(--kae-ink);
  background: var(--kae-surface-alt);              /* gray fallback so any gap between sections doesn't flash white */
  line-height: var(--kae-lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;                        /* defensive: long URLs / unbroken words can't blow out the layout */
  --wp--style--block-gap: 0;                        /* nuke WP's default sibling margin-block-start at the body level */
}

/* Respect users who've requested reduced motion (iOS / macOS Accessibility). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Kill margin between <main> and <footer> — WP can inject margin-block-start
   on these via per-block style tags. */
main, footer { margin: 0 !important; }
img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }

/* Reset WP's default block margins inside our page containers.
   IMPORTANT: wrapped in :where() so specificity is (0,0,0). This means any single
   class (.kae-anniv__body, .kae-div__name, etc.) can override margin/padding
   without us having to escalate selectors. Without :where, this rule has
   specificity (0,1,1) and silently clobbers margins on inner classes. */
:where(.kae-home, .kae-elec, .kae-comms, .kae-serv, .kae-hist, .kae-contact)
  :where(h1, h2, h3, h4, p, li, figure, .wp-block-group) {
  margin: 0;
}

/* ============================================================================
   PAGE ROOT
   Every page sits in one of these wrappers — the max-width + auto-center
   guarantee content stays within the Figma 1920 canvas on wider viewports.
   ============================================================================ */
.kae-home, .kae-elec, .kae-comms, .kae-serv, .kae-hist, .kae-contact {
  /* No max-width cap — sections must extend edge-to-edge on >1920px monitors
     so their background colors (white / surface-alt / navy / etc.) fill the
     full viewport instead of leaving gray wings on either side. Internal
     positioning uses min(Xvw, Ypx) patterns that *cap* at the Figma 1920
     reference values, so content spacing stays identical past 1920px. */
  width: 100%;
  background: var(--kae-surface);
  /* Kill WordPress's default block-gap which sneaks margin-block-start onto
     sibling .wp-block-group elements. We set our own gaps explicitly via
     grid/flex `gap` properties. */
  --wp--style--block-gap: 0;
}
/* Theme.json sets contentSize=780px which makes WordPress's constrained-layout
   engine cap every direct child to 780px wide. Force every section back to
   full canvas width — internal padding is handled per-section via --kae-pad-x.
   Also kill any block-gap margin between sections so colored bands meet flush. */
.kae-home > *, .kae-home > .wp-block-group,
.kae-hist > *, .kae-hist > .wp-block-group,
.kae-elec > *, .kae-elec > .wp-block-group,
.kae-comms > *, .kae-comms > .wp-block-group,
.kae-serv > *, .kae-serv > .wp-block-group,
.kae-contact > *, .kae-contact > .wp-block-group {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
}
/* Hard-override sibling margin-TOP on every section block. WordPress's block
   library injects margin-block-start on adjacent .wp-block-group siblings via
   a per-page stylesheet that beats our :where() reset. We only kill the
   margin-top — internal margin-bottom (e.g. on .kae-anniv__body for paragraph
   spacing) is left intact. */
.kae-home > .wp-block-group,
.kae-home > main,
.kae-home > section,
.kae-hero, .kae-welcome, .kae-div, .kae-anniv, .kae-historical,
.kae-anniv__main, .kae-awards,
.kae-welcome__left, .kae-welcome__right, .kae-welcome__photo, .kae-welcome__logo,
.kae-welcome__testimonial, .kae-welcome__body-group, .kae-welcome__body, .kae-welcome__cta,
.kae-div__title, .kae-div__grid, .kae-div__item,
.kae-anniv__title,
.kae-historical__row {
  margin-top: 0 !important;
}
:where(.kae-home, .kae-elec, .kae-comms, .kae-serv, .kae-hist, .kae-contact) .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}