/*
Theme Name: LWS Kadence Child
Template: kadence
Description: Local Web Solutions brand child theme. Forest green & cream
             design system - NO GRAYSCALE anywhere, ever. Darks are
             green-cast, lights are cream. Mobile-first, 16px+ text,
             1.6 line height. Every text/background pair in this file is
             contrast-verified (body 11.28:1, headings 11.04:1, CTA 4.72:1).
Version: 1.1.0
Author: Local Web Solutions
*/

/* ---------- Local fonts (served from this theme, no external requests) --
   Lora is a variable font: one file covers the 400-700 range the design
   uses, so the three weights in the spec cost a single 37KB request.     */
@font-face {
  font-family: 'Lora';
  src: url('fonts/lora-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/sss3-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('fonts/sss3-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens: the ONLY colors on this site -----------------
   No token may be grayscale (R==G==B); darks carry a green cast instead.
   White is the one exception - it is a background//text color, not a gray. */
:root {
  --lws-green: #1F3D2E;        /* primary forest: headings, bands, badges  */
  --lws-green-deep: #16291F;   /* footer bg - deepest forest              */
  --lws-green-mid: #2C4D3B;    /* raised panel on a forest band           */
  --lws-cream: #FAF6EE;        /* page bg                                 */
  --lws-cream-alt: #F1EAD9;    /* alternating section bg                  */
  --lws-cream-icon: #F2E4C8;   /* glyph inside a green badge              */
  --lws-ink: #263A2E;          /* body text on cream - 11.28:1            */
  --lws-ink-soft: #3D5145;     /* secondary text - 7.92:1, never lighter  */
  --lws-terracotta: #AD5F2B;   /* CTA bg. Mockup's #B5652F is 4.31:1 with */
  --lws-rust: #8A4A1F;         /* white text and FAILS AA; this is 4.72:1 */
  --lws-border: #E3D9C2;       /* borders/dividers on cream               */
  --lws-input-border: #D9CDAE; /* form input border                       */
  --lws-white: #FFFFFF;
  --lws-shadow: 0 4px 16px rgba(31, 61, 46, 0.14); /* green-cast shadow   */
  --lws-radius: 6px;
}

/* ---------- Base ------------------------------------------------------- */
body {
  font-family: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--lws-ink);
  background: var(--lws-cream);
}

h1, h2, h3, h4, h5, h6,
.site-title, .entry-title {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  color: var(--lws-green);
  font-weight: 700;
  line-height: 1.25;
}

/* Headings never drop below the 22px floor, at any viewport. */
h1 { font-size: clamp(1.6875rem, 5vw, 2.75rem); line-height: 1.2; }
h2 { font-size: clamp(1.4375rem, 4vw, 2rem); }
h3 { font-size: 1.375rem; }

p, li { font-size: 18px; line-height: 1.6; }

a { color: var(--lws-green); text-decoration-thickness: 2px; }
a:hover, a:focus { color: var(--lws-rust); }

::selection { background: var(--lws-cream-alt); color: var(--lws-green); }

*:focus-visible {
  outline: 3px solid var(--lws-terracotta);
  outline-offset: 2px;
}

/* ---------- Header / navigation ----------------------------------------
   Interim styling only: this pass recolors the existing header shape. The
   compact 3-column header (centered logo, split nav, sticky/shrink) lands
   in header.css and replaces this block.                                 */
.site-header {
  background: var(--lws-cream);
  border-bottom: 1px solid var(--lws-border);
}

.site-main-header-inner-wrap { min-height: 64px; }

@media (max-width: 1024px) {
  #mobile-header .site-main-header-inner-wrap {
    min-height: 0;
    flex-wrap: wrap;
  }
  #mobile-header .site-header-main-section-left {
    flex: 1 1 100%;
    justify-content: flex-start;
    padding: 8px 0 6px;
  }
  #mobile-header .site-header-main-section-right {
    flex: 1 1 100%;
    justify-content: center;
    background: var(--lws-cream-alt);
    border-top: 1px solid var(--lws-border);
  }
  #mobile-header .mobile-toggle-open-container .menu-toggle-open {
    padding: 6px 16px;
  }
}

.site-branding .site-title a,
.site-branding .site-title {
  color: var(--lws-green);
  font-weight: 700;
}
.site-branding .site-description { color: var(--lws-ink-soft); }

.header-navigation .header-menu-container ul li a,
.main-navigation a,
.mobile-navigation a {
  color: var(--lws-green);
  font-family: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 600;
  font-size: 16px;
}
.header-navigation .header-menu-container ul li a:hover,
.main-navigation a:hover { color: var(--lws-rust); }

.menu-toggle-open, .menu-toggle-close { color: var(--lws-green); }

/* ---------- Footer ------------------------------------------------------ */
.site-footer, .site-footer .site-footer-wrap {
  background: var(--lws-green-deep);
  color: var(--lws-white);
}
.site-footer a { color: var(--lws-cream-icon); }
.site-footer a:hover { color: var(--lws-white); }
/* 16px floor: the mockup's 14px footer is below it. */
.site-footer .footer-html { font-size: 16px; line-height: 1.6; }

/* ---------- Buttons ----------------------------------------------------- */
.wp-block-button .wp-block-button__link,
.lws-btn {
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  padding: 12px 24px;
  border-radius: var(--lws-radius);
  border: none;
  background: var(--lws-green);
  color: var(--lws-white);
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--lws-green-deep);
  color: var(--lws-white);
}

/* Primary CTA: the one warm element on the page. */
.lws-cta .wp-block-button__link, a.lws-cta {
  background: var(--lws-terracotta);
  color: var(--lws-white);
}
.lws-cta .wp-block-button__link:hover, a.lws-cta:hover {
  background: var(--lws-rust);
  color: var(--lws-white);
}

/* Ghost/secondary button. White-on-dark by default... */
.lws-ghost .wp-block-button__link {
  background: transparent;
  color: var(--lws-white);
  border: 2px solid var(--lws-white);
}
.lws-ghost .wp-block-button__link:hover {
  background: var(--lws-white);
  color: var(--lws-green);
}

/* ...but the hero is cream now, so white-on-cream would be invisible.
   Every hero carries .lws-section-dark in page content (all 4 pages), so
   this override is what keeps the secondary action readable there. */
.lws-hero.lws-section-dark .lws-ghost .wp-block-button__link {
  color: var(--lws-green);
  border-color: var(--lws-green);
}
.lws-hero.lws-section-dark .lws-ghost .wp-block-button__link:hover {
  background: var(--lws-green);
  color: var(--lws-white);
}

/* ---------- Layout primitives ------------------------------------------ */
.lws-section { padding: 36px 20px; }
.lws-section > * { max-width: 1060px; margin-left: auto; margin-right: auto; }
.lws-section-tint { background: var(--lws-cream-alt); }
.lws-section-dark {
  background: var(--lws-green);
  color: var(--lws-white);
}
.lws-section-dark h1, .lws-section-dark h2, .lws-section-dark h3,
.lws-section-dark p, .lws-section-dark li { color: var(--lws-white); }
.lws-section-dark a { color: var(--lws-cream-icon); }

/* Hero — cream, per the forest-green direction. The .lws-section-dark class
   stays in page content, so its dark rules are reset here rather than by
   editing four pages' markup. */
.lws-hero { text-align: center; padding: 40px 20px 36px; }
.lws-hero.lws-section-dark {
  background: var(--lws-cream);
  color: var(--lws-ink);
}
.lws-hero.lws-section-dark h1,
.lws-hero.lws-section-dark h2,
.lws-hero.lws-section-dark h3 { color: var(--lws-green); }
.lws-hero.lws-section-dark p,
.lws-hero.lws-section-dark li { color: var(--lws-ink); }
.lws-hero.lws-section-dark a { color: var(--lws-green); }

.lws-hero h1 { max-width: 850px; margin-top: 0; }
.lws-hero p.lws-sub {
  font-size: 19px;
  max-width: 720px;
  margin: 12px auto 20px;
}

/* Eyebrow/label: 15px desktop, never below the 14px label floor. */
.lws-kicker {
  display: inline-block;
  color: var(--lws-rust);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lws-section-dark .lws-kicker { color: var(--lws-cream-icon); }
.lws-hero.lws-section-dark .lws-kicker { color: var(--lws-rust); }

/* Cards (columns become cards) */
.lws-cards { gap: 24px; }
.lws-cards .wp-block-column {
  background: var(--lws-white);
  border: 1px solid var(--lws-border);
  border-radius: var(--lws-radius);
  padding: 26px 22px;
}
.lws-cards .wp-block-column h3 { margin-top: 0; }

/* Green badge above each card title. The checkmark renders from a system
   font: neither Lora nor Source Sans 3 include U+2713 in their subset,
   which is already true of ul.lws-check on the live site today. */
.lws-cards .wp-block-column h3::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--lws-green);
  color: var(--lws-cream-icon);
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Pricing cards */
.lws-price-card {
  background: var(--lws-white);
  border: 1px solid var(--lws-border);
  border-radius: var(--lws-radius);
  padding: 30px 26px;
  box-shadow: var(--lws-shadow);
  margin: 26px auto;
  max-width: 720px;
}
.lws-price-card.lws-featured { border: 2px solid var(--lws-terracotta); position: relative; }
.lws-price {
  font-family: 'Lora', Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--lws-green);
  margin: 6px 0;
}
.lws-price small { font-size: 17px; color: var(--lws-ink); font-weight: 400; }
.lws-badge {
  display: inline-block;
  background: var(--lws-green);
  color: var(--lws-white);
  font-size: 15px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--lws-radius);
  margin-bottom: 10px;
}
.lws-badge-amber { background: var(--lws-terracotta); color: var(--lws-white); }

/* Checklists */
ul.lws-check { list-style: none; padding-left: 0; }
ul.lws-check li {
  padding-left: 34px;
  position: relative;
  margin-bottom: 10px;
}
ul.lws-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lws-green);
  color: var(--lws-cream-icon);
  font-weight: 700;
  text-align: center;
  line-height: 24px;
  font-size: 15px;
}
.lws-section-dark ul.lws-check li::before {
  background: var(--lws-cream-icon);
  color: var(--lws-green);
}

/* Numbered steps */
.lws-steps { counter-reset: lws-step; }
.lws-steps .wp-block-column { counter-increment: lws-step; text-align: center; }
.lws-steps .wp-block-column h3::before {
  content: counter(lws-step);
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--lws-green);
  color: var(--lws-cream-icon);
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 56px;
  margin: 0 auto 16px;
}

/* Quote / proof strip — a full-width forest band.
   The band needs :has() because page markup nests the paragraph inside
   WP's .wp-block-group__inner-container. Where :has() is unsupported the
   paragraph still paints itself green, degrading to a card rather than
   losing contrast. */
.lws-proof {
  background: var(--lws-green);
  color: var(--lws-white);
  border-left: 4px solid var(--lws-terracotta);
  border-radius: 0 var(--lws-radius) var(--lws-radius) 0;
  padding: 20px 24px;
  font-size: 17px;
  line-height: 1.6;
}
.lws-section:has(.lws-proof) { background: var(--lws-green); }
.lws-section:has(.lws-proof) .lws-proof {
  background: transparent;
  border-radius: 0;
  padding: 0 0 0 22px;
  max-width: 780px;
}

/* ---------- Layout fallbacks (guarantee columns/buttons behave) --------- */
.wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.wp-block-columns .wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- Contact form (native) -------------------------------------- */
.lws-contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.lws-contact-form label {
  font-weight: 600;
  color: var(--lws-green);
}

.lws-contact-form input[type="text"],
.lws-contact-form input[type="email"],
.lws-contact-form textarea {
  font-family: inherit;
  font-size: 17px;
  line-height: 1.6;
  color: var(--lws-ink);
  background: var(--lws-white);
  border: 1px solid var(--lws-input-border);
  border-radius: var(--lws-radius);
  padding: 12px 14px;
}

.lws-contact-form input:focus,
.lws-contact-form textarea:focus {
  border-color: var(--lws-green);
  box-shadow: 0 0 0 3px rgba(31, 61, 46, 0.18);
  outline: none;
}

.lws-contact-form input.not-valid { border-color: var(--lws-terracotta); }

.lws-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

/* The mockup sets this label #4a4a4a on forest green: 1.34:1, unreadable.
   Consent text is a legal disclosure, so it is white and at the 16px floor
   rather than the mockup's 14px. */
.lws-contact-privacy {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lws-ink);
}
.lws-section-dark .lws-contact-privacy,
.lws-section-dark .lws-contact-form label { color: var(--lws-white); }
.lws-section-dark .lws-contact-privacy a { color: var(--lws-cream-icon); }

.lws-contact-privacy input[type="checkbox"] { margin-top: 4px; }

.lws-contact-validate-message {
  min-height: 1.6em;
  font-weight: 600;
}

.lws-contact-validate-message.is-success { color: var(--lws-green); }
.lws-contact-validate-message.is-error { color: #B3261E; }
.lws-section-dark .lws-contact-validate-message.is-success { color: var(--lws-cream-icon); }
.lws-section-dark .lws-contact-validate-message.is-error { color: #FFB4AB; }

.lws-contact-submit {
  align-self: flex-start;
  font-family: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--lws-white);
  background: var(--lws-terracotta);
  border: none;
  border-radius: 5px;
  padding: 12px 28px;
  cursor: pointer;
}
.lws-contact-submit:hover { background: var(--lws-rust); }
.lws-contact-submit.loading {
  opacity: 0.6;
  cursor: default;
}

/* ---------- Mobile ------------------------------------------------------
   Body copy stays 18px here: it must never read smaller than desktop
   (Brian 2026-07-02), which the mockup's 15-16px mobile column would do. */
@media (max-width: 781px) {
  .lws-section { padding: 28px 20px; }
  .lws-hero { padding: 24px 20px 22px; }
  .wp-block-columns { flex-direction: column; }
  .wp-block-columns .wp-block-column { flex-basis: 100% !important; width: 100%; }
  .lws-price { font-size: 30px; }

  body, p, li { font-size: 18px; }
  .lws-hero p.lws-sub { font-size: 18px; }
  .lws-kicker { font-size: 14px; }
  .wp-block-button .wp-block-button__link,
  .lws-btn { font-size: 18px; }
  .lws-contact-form input[type="text"],
  .lws-contact-form input[type="email"],
  .lws-contact-form textarea,
  .lws-contact-submit { font-size: 18px; }
  .site-footer .footer-html { font-size: 16px; }
  .lws-proof { font-size: 17px; }
}