/*
Theme Name:   A Plus Home Inspections — Divi 5 Child
Theme URI:    https://www.aplushomesga.com/
Description:  Child theme for Divi 5 carrying the A Plus Home Inspections brand (built on the HSH Advisor Design System). Maps brand colors, Oswald/Open Sans typography, button and form styling onto Divi module selectors. Includes the fluid clamp() type + spacing scale and CSS-grid row classes (grid-row, grid-2/3/4, grid-step). Safe place for all custom CSS and PHP overrides.
Author:       A Plus Home Inspections
Author URI:   https://www.aplushomesga.com/
Template:     Divi
Version:      2.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  aplus-divi5-child
*/

/* CHANGELOG
   2.0.0 — Full brand refresh anchored to the real logo colors: refined coral
            (#E85F35, was #EB5A3A) and a new trust blue (#1D4F8C) from the
            logo roofline. Warm espresso replaces charcoal/black, warm cream
            replaces stark white, for a softer premium feel.
   1.5.1 — Reverted navy (#001537): headings, header/footer, and hero overlay
            back to original charcoal/black. Navy is not in use.
   1.5.0 — New brand orange (#EB5A3A, was #EC6A26); added --color-navy (#001537)
            wired into headings, header/footer bands, plus .section-navy,
            .hero-navy-overlay, and .icon-navy utility classes.
   1.4.0 — Tightened fluid spacing scale (section/tight/gap/block) to match layouts.
   1.3.0 — Larger heading scale (H1 ≤4.6rem) for two-tone hero headlines.
   1.2.0 — Added CSS-grid row classes (grid-row, grid-2/3/4, grid-step) — real grid, no block stacking.
   1.1.0 — Added fluid clamp() type + spacing variables, wired into Divi selectors.
   1.0.0 — Initial brand layer (colors, type, buttons, cards, Fluent Forms, shortcodes).
*/

/* =====================================================================
   A PLUS HOME INSPECTIONS — Divi 5 child theme
   Brand layer on top of Divi. Edit tokens in :root, everything cascades.
   Fonts are loaded from Google Fonts (see functions.php enqueue).
   ===================================================================== */

/* ---------- 1. BRAND TOKENS ---------- */
:root {
  --color-ink:        #2B2622;   /* warm espresso — headings, structural dark */
  --color-ink-700:    #1F1B18;
  --color-ink-500:    #5B534D;
  --color-brand:      #E85F35;   /* refined coral, from logo — primary CTA + accent */
  --color-brand-600:  #D14F27;
  --color-brand-700:  #C94117;   /* pressed / hover-darken */
  --color-brand-50:   #FBE9E1;
  --color-trust:       #1D4F8C;  /* logo blue — trust badges, secondary accents */
  --color-trust-700:   #143762;  /* pressed / hover-darken */
  --color-trust-50:    #E6EDF6;
  --color-link:       #1D4F8C;   /* inline links now use trust blue */
  --color-link-hover: #143762;

  --color-paper:      #FAF6F1;
  --color-surface:    #FFFDFB;
  --color-line:       #E6DFD6;
  --color-line-strong:#C9BFB2;
  --color-text:       #3A332D;
  --color-muted:      #6B6259;

  --font-head:   'Oswald', 'Arial Narrow', sans-serif;
  --font-body:   'Open Sans', system-ui, -apple-system, sans-serif;
  --font-accent: 'Adamina', Georgia, serif;

  --radius-sm: 3px;     /* HSH controls */
  --radius:    10px;    /* HSH cards */

  --shadow-sm: rgba(0, 0, 0, .1) 0 2px 5px;
  --shadow-lg: rgba(57, 57, 57, .45) 0 12px 18px -8px;

  --transition: .2s ease-in-out;

  /* ---- FLUID TYPE SCALE (clamp) — mirrors Divi 5 Design Variables ---- */
  --fs-eyebrow: clamp(0.8rem, 0.76rem + 0.18vw, 0.875rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --fs-lead:    clamp(1.15rem, 1rem + 0.7vw, 1.4rem);
  --fs-h5:      clamp(1.15rem, 1.05rem + 0.5vw, 1.3rem);
  --fs-h4:      clamp(1.3rem, 1.08rem + 1.05vw, 1.7rem);
  --fs-h3:      clamp(1.55rem, 1.2rem + 1.7vw, 2.2rem);
  --fs-h2:      clamp(2.2rem, 1.55rem + 3.2vw, 3.5rem);
  --fs-h1:      clamp(2.85rem, 1.8rem + 5vw, 4.6rem);
  --fs-stat:    clamp(2.4rem, 1.6rem + 2.4vw, 3.2rem);

  /* ---- FLUID SPACING SCALE (clamp) ---- */
  --space-section: clamp(46px, 2.4vw + 30px, 84px);   /* section padding */
  --space-tight:   clamp(34px, 1.8vw + 22px, 56px);   /* tight bands */
  --space-gap:     clamp(16px, 1vw + 9px, 26px);      /* card gaps / pad */
  --space-block:   clamp(9px, 0.5vw + 6px, 15px);     /* stacked rhythm */
}

/* ---------- 2. TYPOGRAPHY ---------- */
body,
.et_pb_text,
.et_pb_module {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3,
.et_pb_module h4, .et_pb_module h5, .et_pb_module h6 {
  font-family: var(--font-head);
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: 0.01em;
}

/* H1/H2 are uppercase per brand voice */
h1, h2,
.et_pb_module h1, .et_pb_module h2 {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Fluid type — single source of truth, so even modules without an explicit
   clamp inherit the fluid scale. Module inline clamps still win where set. */
h1, .et_pb_module h1 { font-size: var(--fs-h1); }
h2, .et_pb_module h2 { font-size: var(--fs-h2); }
h3, .et_pb_module h3 { font-size: var(--fs-h3); }
h4, .et_pb_module h4 { font-size: var(--fs-h4); }
h5, .et_pb_module h5 { font-size: var(--fs-h5); }
body, .et_pb_text, .et_pb_text p { font-size: var(--fs-body); }

/* Fluid vertical rhythm helpers — add these CSS classes to a Section in the
   Divi Builder (Advanced → CSS Class) to get fluid padding without fixed px. */
.section-fluid   { padding-top: var(--space-section) !important; padding-bottom: var(--space-section) !important; }
.section-tight   { padding-top: var(--space-tight) !important;   padding-bottom: var(--space-tight) !important; }
/* Fluid gap between stacked modules in a column */
.gap-fluid > .et_pb_module { margin-bottom: var(--space-block); }

/* Inline links — sky blue */
.et_pb_text a,
.et_pb_module a:not(.et_pb_button):not(.et_pb_promo_button) {
  color: var(--color-link);
  transition: color var(--transition);
}
.et_pb_text a:hover,
.et_pb_module a:not(.et_pb_button):not(.et_pb_promo_button):hover {
  color: var(--color-link-hover);
}

/* ---------- 2b. FLUID GRID ROWS (flex/grid, never block-stacked) ----------
   Added as CSS classes on Divi rows (module_class). Turns Divi's float-based
   columns into a real CSS grid with fluid gap + auto-fit reflow — no breakpoints,
   no block stacking. Equal-height cards via align-items:stretch. */
.et_pb_row.grid-row {
  display: grid !important;
  gap: var(--space-gap);
  align-items: stretch;
  width: 90%;
  max-width: 1200px;
}
/* neutralize Divi's clearfix pseudo-elements so they don't become grid cells */
.et_pb_row.grid-row::before,
.et_pb_row.grid-row::after { content: none !important; display: none !important; }
.et_pb_row.grid-row > .et_pb_column {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  display: flex;
  flex-direction: column;
}
.et_pb_row.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.et_pb_row.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.et_pb_row.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* media-first split: keep image column second on narrow screens */
.et_pb_row.grid-2 > .et_pb_column { min-width: 0; }

/* Step row: fixed marker + fluid body, side by side via grid */
.et_pb_row.grid-step {
  display: grid !important;
  grid-template-columns: clamp(48px, 6vw, 64px) 1fr;
  gap: var(--space-gap);
  align-items: center;
  width: 90%;
  max-width: 1200px;
}
.et_pb_row.grid-step::before,
.et_pb_row.grid-step::after { content: none !important; display: none !important; }
.et_pb_row.grid-step > .et_pb_column {
  width: 100% !important; margin: 0 !important; float: none !important;
}
/* let cards/blurbs fill the column height in a grid */
.grid-row .et_pb_blurb,
.grid-row .et_pb_column > .et_pb_module:only-child { height: 100%; }

/* ---------- 3. BUTTONS (Divi .et_pb_button) ---------- */
.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button,
.et_pb_promo_button.et_pb_button {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: none;
  padding: 12px 26px !important;
  min-width: 168px;
  text-align: center;
  transition: background-color var(--transition), transform var(--transition);
}
.et_pb_button:after { display: none !important; }   /* kill Divi's arrow */

/* Force any column holding paired CTA buttons ("btn-inline" class) into a
   flex row so the buttons sit side by side instead of stacking in Divi's
   default box layout. Falls back gracefully without :has() support (stacks). */
.et_pb_column:has(> .et_pb_button_module_wrapper.btn-inline) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-block);
}
.et_pb_column:has(> .et_pb_button_module_wrapper.btn-inline) > .et_pb_button_module_wrapper {
  margin: 0 !important;
}

/* Primary = solid orange */
.et_pb_button {
  background-color: var(--color-brand);
  color: #fff !important;
}
.et_pb_button:hover {
  background-color: var(--color-brand-700) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

/* Dark / secondary variant — add CSS class "btn-dark" to a Divi button */
.btn-dark.et_pb_button {
  background-color: var(--color-ink);
  color: #fff !important;
}
.btn-dark.et_pb_button:hover {
  background-color: var(--color-ink-700) !important;
}

/* Ghost on photo / dark backgrounds — add CSS class "btn-on-dark" */
.btn-on-dark.et_pb_button {
  background-color: transparent;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35);
}
.btn-on-dark.et_pb_button:hover {
  background-color: #fff;
  color: var(--color-ink) !important;
  border-color: #fff;
}

/* ---------- 4. CARDS / BLURBS ---------- */
.et_pb_blurb,
.et_pb_column .et_pb_module.card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* Alternating off-white section — add CSS class "section-paper" to a Section */
.section-paper {
  background-color: var(--color-paper) !important;
}

/* ---------- 5. FLUENT FORMS — brand match ---------- */
.fluentform .ff-el-input--label label,
.fluentform label {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="date"],
.fluentform select,
.fluentform textarea {
  font-family: var(--font-body);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.fluentform .ff-el-form-control:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(46,163,242,.45);
  outline: none;
}
.fluentform .ff-btn-submit,
.fluentform button[type="submit"] {
  background-color: var(--color-brand) !important;
  color: #fff !important;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 30px;
  transition: background-color var(--transition), transform var(--transition);
}
.fluentform .ff-btn-submit:hover,
.fluentform button[type="submit"]:hover {
  background-color: var(--color-brand-700) !important;
  transform: translateY(-2px);
}

/* ---------- 5b. ROW CENTERING FIX ---------- */
/* Divi 5's default row preset sets width/max-width but no auto margin,
   so capped rows sit flush-left instead of centering. Force it site-wide. */
.et_pb_section > .et_pb_row,
.et_pb_section > .et_pb_row_inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 5c. CONTRAST — cards must stand out from section backgrounds ---------- */
.et_pb_blurb,
.et_pb_column .et_pb_module.card,
.testimonial-card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-line-strong) !important;
  box-shadow: 0 2px 10px rgba(43,38,34,.08) !important;
}
.section-paper, .compare-table-wrap {
  background-color: #F0E9DF !important;
}

/* ---------- 5d. ICON BADGES — small colored square, not a bare oversized icon ---------- */
.et_pb_blurb .et-pb-icon,
.et_pb_main_blurb_image .et-pb-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  height: 48px !important;
  font-size: 22px !important;
  background: var(--color-brand-50);
  color: var(--color-brand) !important;
  border-radius: 10px;
}

/* ---------- 5e. FAQ open-state accent ---------- */
.faq-item[open] {
  border-color: var(--color-brand);
}
.faq-item[open] summary {
  background: var(--color-brand-50);
}
.faq-item[open] summary::after {
  color: var(--color-brand);
}

/* ---------- 6. ACCESSIBLE FOCUS RING ---------- */
a:focus-visible,
button:focus-visible,
.et_pb_button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46,163,242,.45);
}

/* ---------- 7. COMPARISON TABLE ---------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  background: var(--color-surface);
  margin-bottom: 8px;
}
.compare-table th, .compare-table td {
  padding: 16px 20px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.95rem;
}
.compare-table thead th {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 0.78rem;
  color: var(--color-muted);
  border-bottom: 2px solid var(--color-line-strong);
}
.compare-table td:first-child {
  color: var(--color-ink);
  font-weight: 600;
}
.compare-table td.typical { color: var(--color-muted); }
.compare-table th.brand-col, .compare-table td.brand-col {
  background: var(--color-trust-50);
  font-weight: 600;
  color: var(--color-trust-700);
}
.compare-table td.typical {
  color: var(--color-brand-700);
  font-style: italic;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 767px) {
  .compare-table { font-size: 0.85rem; }
  .compare-table th, .compare-table td { padding: 10px 8px; }
}

/* ---------- 8. TESTIMONIAL CARDS ---------- */
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-gap);
  box-shadow: var(--shadow-sm);
  height: 100%;
  box-sizing: border-box;
}
.testimonial-stars {
  color: var(--color-brand);
  letter-spacing: 2px;
  font-size: 1rem;
  margin-bottom: 10px;
}
.testimonial-quote {
  font-style: italic;
  color: var(--color-text);
  line-height: 1.6;
  margin: 0 0 18px;
  font-size: 0.95rem;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-head);
  flex-shrink: 0;
  font-size: 0.85rem;
}
.testimonial-name {
  font-weight: 700;
  color: var(--color-ink);
  font-size: 0.95rem;
}
.testimonial-role {
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* ---------- 10. FAQ ACCORDION (native <details>/<summary>) ---------- */
.faq-accordion { display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--color-ink);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--color-brand);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--color-line); }
.faq-item-body {
  padding: 4px 22px 20px;
  color: var(--color-muted);
  line-height: 1.6;
  font-size: 0.95rem;
}
.photo-frame {
  position: relative;
}
.badge-card {
  position: relative;
  margin: -30px 20px 0;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
}
.badge-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-trust-50);
  color: var(--color-trust);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.badge-card-title {
  font-weight: 700;
  color: var(--color-ink);
  font-size: 0.9rem;
  margin: 0;
}
.badge-card-sub {
  color: var(--color-muted);
  font-size: 0.8rem;
  margin: 0;
}