/*
Theme Name: Handicap Remodeling
Theme URI: https://handicapremodeling.com/
Description: Custom TT5 child theme for Handicap Remodeling - accessible home modification contractor (walk-in showers, wheelchair ramps, ADA-informed kitchens & baths).
Author: BuyerGain
Author URI: https://buyergain.com
Template: twentytwentyfive
Version: 1.1.5
*/

@layer base, components, utilities;

/* =====================================================================
   BASE
   ===================================================================== */
@layer base {

:root {
  /* Brand palette (derived from logo) */
  --primary: #0056B8;
  --primary-rgb: 0,86,184;
  --primary-light: color-mix(in srgb, var(--primary) 12%, white);
  --primary-dark: #00408c;

  --accent: #13C7C3;
  --accent-rgb: 19,199,195;
  --accent-dark: #0a7d7a;        /* darkened teal, passes white-on-accent */
  --accent-text: #0a6b68;        /* teal text: 5.72:1 on the #eef4fb tint, 6.53:1 on white */

  --tertiary: #FF8A00;           /* warm orange - hero/overlay warmth */
  --tertiary-rgb: 255,138,0;

  --energy: #FF8A00;             /* conversion orange */
  --energy-rgb: 255,138,0;
  --energy-dark: #c96a00;
  --charcoal: #2D2D2D;           /* dark text on orange buttons */

  --dark-bg: #0b2238;            /* deep navy footer */
  --light-bg: #eef4fb;           /* ~5% blue tint over white */
  --text: #15171C;
  --text-muted: rgba(21,23,28,0.68);
  --white: #FFFFFF;
  --surface: #FFFFFF;
  --border: rgba(0,86,184,0.10);

  --shadow-sm:   0 1px 2px rgba(15,20,35,0.04), 0 1px 3px rgba(15,20,35,0.06);
  --shadow-md:   0 4px 6px rgba(15,20,35,0.04), 0 10px 20px rgba(15,20,35,0.08);
  --shadow-lg:   0 10px 15px rgba(15,20,35,0.05), 0 24px 48px rgba(15,20,35,0.12);
  --shadow-glow: 0 0 0 1px rgba(var(--primary-rgb),0.06), 0 20px 40px rgba(var(--primary-rgb),0.18);

  --space-xs:  8px;   --space-sm: 16px;   --space-md: 24px;
  --space-lg: 40px;   --space-xl: 72px;
  --space-2xl: 112px; --space-3xl: 160px;

  --container-width: 1240px;
  --reading-width: 700px;        /* 760px measured 82-83 chars at 19px; 700 lands at ~75 */
  --section-padding: var(--space-2xl) var(--space-md);
  --card-padding: var(--space-lg) var(--space-md);
  --card-radius: 16px;
  --btn-radius: 10px;

  --text-base: clamp(1.02rem, 0.97rem + 0.25vw, 1.16rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --text-2xl:  clamp(1.875rem, 1.45rem + 1.75vw, 2.75rem);
  --text-3xl:  clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --text-hero: clamp(2.6rem, 1.9rem + 3vw, 4.4rem);

  --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);

  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body:    'Nunito', system-ui, -apple-system, sans-serif;
  --font-reading: var(--font-body);
}

html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text); font-weight: 700; }
h1 { font-size: var(--text-hero); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: var(--space-lg); }
h3 { font-size: var(--text-xl); line-height: 1.35; margin-bottom: var(--space-sm); }

/* Touch targets - 44px on interactive elements, not inline body links */
a, button, .wp-block-button__link, input[type="submit"] { min-height: 44px; }
p a, li a, .breadcrumbs a, .footer-credits a, .post-author-box a { min-height: 0; display: inline; }

/* ---- Container & width consistency (ALL templates) ---- */
.handicap_remodeling-container,
.wp-block-group.handicap_remodeling-container,
.site-main > .wp-block-post-content,
.site-main > .wp-block-query,
.site-main > article,
.site-main > .page-wrap,
.site-main > .post-wrap,
.site-main > .archive-wrap,
.site-main > .author-wrap,
.site-main > .error-wrap {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.entry-content img,
.wp-block-post-content img { max-width: 100%; height: auto; border-radius: var(--card-radius); }

/* Homepage breaks free of the constrained main so sections go edge-to-edge */
.home main.wp-block-group { max-width: none; padding: 0; }
.home .wp-block-post-content { max-width: none; margin-inline: 0; padding-inline: 0; }
.home .wp-block-post-content > * { max-width: none; }

/* Post-title styling */
.single-post .wp-block-post-title,
.page .wp-block-post-title {
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--text);
  margin: var(--space-lg) 0 2rem;
  max-width: var(--container-width);
}

}  /* end @layer base */


/* =====================================================================
   COMPONENTS
   ===================================================================== */
@layer components {

/* ---- HEADER (v16 - full-width frosted bar, 1240 inner row) ---- */
.site-header,
header.wp-block-template-part .site-header,
.wp-site-blocks > .site-header {
  position: sticky; top: 0; z-index: 100; width: 100%;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
  transition: padding var(--transition), box-shadow var(--transition);
  padding: 0;
}
.site-header.scrolled { box-shadow: var(--shadow-md); }

.site-header-inner,
.site-header > .site-header-inner,
.site-header .site-header-inner > .wp-block-group__inner-container {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  max-width: var(--container-width);
  margin-inline: auto;
  padding: var(--space-sm) var(--space-md);
  width: 100%;
  transition: padding var(--transition);
}
.site-header.scrolled .site-header-inner { padding-top: 6px; padding-bottom: 6px; }

.site-logo,
.site-header .site-logo { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0; }
.site-logo img { height: 64px; width: auto; display: block; margin: 0; transition: height var(--transition); }
.site-header.scrolled .site-logo img { height: 50px; }
@media (max-width: 600px) {
  .site-logo img { height: 50px; }
  .site-header.scrolled .site-logo img { height: 44px; }
}

/* Nav block - right-aligned, restore gap (undoes blockGap:0) */
.site-header .wp-block-navigation { --wp--style--block-gap: var(--space-md) !important; }
.site-header .wp-block-navigation__container {
  display: flex; align-items: center;
  gap: var(--space-md) !important; column-gap: var(--space-md) !important; row-gap: 8px !important;
  justify-content: flex-end !important; flex-wrap: wrap;
}
.site-header .wp-block-navigation-item { position: relative; }
.site-header .wp-block-navigation-item a {
  color: var(--text); font-family: var(--font-body); font-weight: 600;
  font-size: 0.95rem; padding: 10px 4px; position: relative; text-decoration: none;
}
.site-header .wp-block-navigation-item a::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px;
  background: var(--accent); transition: width var(--transition), left var(--transition);
}
.site-header .wp-block-navigation-item a:hover::after { width: 100%; left: 0; }

/* CTA pill in nav */
.site-header .wp-block-navigation-item.header-cta a,
.site-header .header-cta > a {
  background: var(--accent-dark); color: var(--white);
  padding: 10px 22px; border-radius: var(--btn-radius);
  font-family: var(--font-heading); font-weight: 700;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.site-header .wp-block-navigation-item.header-cta a:hover,
.site-header .header-cta > a:hover {
  background: var(--accent); color: var(--white); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.32);
}
.site-header .wp-block-navigation-item.header-cta a::after,
.site-header .header-cta > a::after { display: none; }

/* Submenu styling - supports nested mega-menus */
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--white); border: 1px solid var(--border); border-top: 2px solid var(--accent);
  border-radius: var(--card-radius); box-shadow: var(--shadow-lg); padding: var(--space-sm); min-width: 260px;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a {
  padding: 9px 14px; border-radius: 8px; font-size: 0.92rem; font-weight: 600;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a::after { display: none; }
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover {
  background: var(--light-bg); color: var(--accent-dark);
}

/* ---- BUTTONS (v16 forced contrast) ---- */
.wp-block-button .wp-block-button__link.has-primary-background-color,
.wp-block-button .wp-block-button__link.has-accent-background-color,
.wp-block-button .wp-block-button__link.has-tertiary-background-color,
.wp-block-button .wp-block-button__link.has-dark-bg-background-color {
  color: #ffffff !important;
  font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.22);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition);
  position: relative; overflow: hidden; border-radius: var(--btn-radius);
}
.wp-block-button .wp-block-button__link.has-primary-background-color {
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 80%, var(--accent)) 100%) !important;
}
.wp-block-button .wp-block-button__link.has-primary-background-color:hover {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, var(--accent)) 0%, var(--accent-dark) 100%) !important;
  color: #ffffff !important; transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--primary-rgb), 0.40);
}
.wp-block-button .wp-block-button__link.has-accent-background-color { background: var(--accent-dark) !important; }
.wp-block-button .wp-block-button__link.has-accent-background-color:hover {
  background: var(--accent) !important; color: #ffffff !important; transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.40);
}

/* Energy (orange) conversion button - dark text for AA contrast on light orange */
.wp-block-button .wp-block-button__link.has-energy-background-color {
  color: var(--charcoal) !important;
  background: var(--energy) !important;
  font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(var(--energy-rgb), 0.30);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  position: relative; overflow: hidden; border-radius: var(--btn-radius);
}
.wp-block-button .wp-block-button__link.has-energy-background-color:hover {
  background: #ff9c26 !important; color: var(--charcoal) !important; transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(var(--energy-rgb), 0.45);
}

/* Shimmer sweep on colored buttons */
.wp-block-button .wp-block-button__link.has-primary-background-color::after,
.wp-block-button .wp-block-button__link.has-accent-background-color::after,
.wp-block-button .wp-block-button__link.has-energy-background-color::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.30), transparent);
  transition: left 0.6s ease; pointer-events: none;
}
.wp-block-button .wp-block-button__link.has-primary-background-color:hover::after,
.wp-block-button .wp-block-button__link.has-accent-background-color:hover::after,
.wp-block-button .wp-block-button__link.has-energy-background-color:hover::after { left: 100%; }

/* Legacy / homepage button classes */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem; padding: 15px 30px;
  border-radius: var(--btn-radius); border: none; cursor: pointer; min-height: 48px;
  position: relative; overflow: hidden; text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition), color var(--transition); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(var(--primary-rgb),0.35); color:#fff; }
.btn-cta { background: var(--energy); color: var(--charcoal); }
.btn-cta:hover { background: #ff9c26; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(var(--energy-rgb),0.45); color: var(--charcoal); }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0,0,0,0.22); }
.btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); }
.btn:hover::after { animation: hr-shimmer .9s ease; }
@keyframes hr-shimmer { to { left: 140%; } }

.text-link { font-weight: 700; color: var(--accent-text); display: inline-flex; align-items: center; gap: .4em; text-decoration: none; min-height: 0; }
.text-link .arw { transition: transform .3s ease; }
.text-link:hover .arw { transform: translateX(6px); }

/* ---- BREADCRUMBS ---- */
.breadcrumbs {
  font-size: 0.875rem; color: var(--text-muted); padding: var(--space-md) var(--space-md) 0;
  margin-bottom: var(--space-md); max-width: var(--container-width); margin-inline: auto;
}
.breadcrumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--text-muted); }
.breadcrumbs a { color: var(--text-muted); text-decoration: none; min-height: 0; }
.breadcrumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ---- POST TOP META - reading-time badge only ---- */
.post-top-meta { max-width: var(--container-width); margin: 0 0 5rem; padding: var(--space-sm) 0 0; }
.reading-time-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--white); padding: 9px 20px 9px 16px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25); line-height: 1;
}
.reading-time-badge svg { width: 16px; height: 16px; flex-shrink: 0; color: rgba(255, 255, 255, 0.92); }

/* =====================================================================
   ENTRY CONTENT - vertical rhythm (v16 non-negotiable, blockGap:0 escape)
   ===================================================================== */
.single-post .entry-content,
.page .wp-block-post-content,
.single-post .wp-block-post-content,
.entry-content,
body .wp-block-post-content {
  font-family: var(--font-reading) !important;
  font-size: 1.1875rem; line-height: 1.85; color: var(--text);
}

.entry-content p,
.entry-content .wp-block-paragraph,
.wp-block-post-content p,
.wp-block-post-content .wp-block-paragraph {
  margin-top: 0 !important; margin-bottom: 1.75em !important; font-family: var(--font-reading) !important;
}
.entry-content p:last-child,
.wp-block-post-content p:last-child { margin-bottom: 0 !important; }

.entry-content h2,
.entry-content h2.wp-block-heading,
.wp-block-post-content h2,
.wp-block-post-content h2.wp-block-heading {
  font-size: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem) !important; line-height: 1.2 !important;
  letter-spacing: -0.01em; font-family: var(--font-heading) !important; font-weight: 700 !important;
  color: var(--text) !important; margin-top: 5rem !important; margin-bottom: 1.75rem !important;
  padding-top: 2.5rem !important; border-top: 1px solid var(--border) !important;
}
/* Only the article's FIRST heading drops the top separator.
   Scoped to direct children plus the first <section>: these posts wrap every
   block in its own <section>, so the old unscoped `h2:first-child` matched
   EVERY section heading and collapsed all section gaps from 5rem to 2.5rem
   (40px live, under the 48px minimum) while removing every separator rule. */
.entry-content > h2:first-child,
.entry-content > h2.wp-block-heading:first-of-type,
.entry-content > article > h2:first-child,
.entry-content > article > section:first-of-type > h2:first-child,
.wp-block-post-content > h2:first-child,
.wp-block-post-content > h2.wp-block-heading:first-of-type,
.wp-block-post-content > article > h2:first-child,
.wp-block-post-content > article > section:first-of-type > h2:first-child {
  margin-top: 2.5rem !important; padding-top: 0 !important; border-top: none !important;
}

.entry-content h3,
.entry-content h3.wp-block-heading,
.wp-block-post-content h3,
.wp-block-post-content h3.wp-block-heading {
  font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.7rem) !important; line-height: 1.3 !important;
  font-family: var(--font-heading) !important; font-weight: 700 !important; color: var(--text) !important;
  margin-top: 3.5rem !important; margin-bottom: 1.25rem !important;
}

.entry-content h4,
.entry-content h4.wp-block-heading,
.wp-block-post-content h4,
.wp-block-post-content h4.wp-block-heading {
  font-size: 1.25rem !important; line-height: 1.4 !important; font-family: var(--font-heading) !important;
  font-weight: 600 !important; color: var(--text) !important; margin-top: 2.75rem !important; margin-bottom: 1rem !important;
}

.entry-content h2 + h3,
.entry-content h2.wp-block-heading + h3.wp-block-heading,
.entry-content h3 + h4,
.wp-block-post-content h2 + h3,
.wp-block-post-content h3 + h4 { margin-top: 1.75rem !important; }

.entry-content ul,
.entry-content ol,
.entry-content .wp-block-list,
.wp-block-post-content ul,
.wp-block-post-content ol,
.wp-block-post-content .wp-block-list {
  margin-top: 0 !important; margin-bottom: 2rem !important; padding-left: 1.5em; font-family: var(--font-reading) !important;
}
.entry-content li,
.wp-block-post-content li { margin-bottom: 0.85rem !important; line-height: 1.75; }
.entry-content li > p,
.wp-block-post-content li > p { margin-bottom: 0.5rem !important; }
.entry-content li > ul,
.entry-content li > ol,
.wp-block-post-content li > ul,
.wp-block-post-content li > ol { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }

.entry-content figure,
.entry-content .wp-block-image,
.wp-block-post-content figure,
.wp-block-post-content .wp-block-image {
  margin-top: 4rem !important; margin-bottom: 4rem !important; margin-left: auto !important; margin-right: auto !important; display: block;
}
.entry-content figure img,
.entry-content .wp-block-image img,
.wp-block-post-content figure img,
.wp-block-post-content .wp-block-image img { border-radius: var(--card-radius); box-shadow: var(--shadow-sm); }
.entry-content figcaption,
.wp-block-post-content figcaption {
  text-align: center; color: var(--text-muted); font-size: 0.95rem; margin-top: 1rem !important;
  font-style: italic; font-family: var(--font-reading);
}

.entry-content blockquote,
.entry-content .wp-block-quote,
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
  margin-top: 4rem !important; margin-bottom: 4rem !important; padding: 2rem 2.5rem !important;
  border-left: 4px solid var(--accent) !important; background: var(--light-bg) !important;
  border-radius: 0 var(--card-radius) var(--card-radius) 0 !important; font-style: italic;
  font-size: 1.25rem; line-height: 1.7; font-family: var(--font-reading) !important;
}
.entry-content blockquote p,
.wp-block-post-content blockquote p { margin-bottom: 0.75rem !important; }
.entry-content blockquote p:last-child,
.wp-block-post-content blockquote p:last-child { margin-bottom: 0 !important; }

.entry-content table,
.entry-content .wp-block-table,
.entry-content .wp-block-table table,
.wp-block-post-content table,
.wp-block-post-content .wp-block-table,
.wp-block-post-content .wp-block-table table {
  margin-top: 4rem !important; margin-bottom: 4rem !important; width: 100%;
  border-collapse: collapse; font-size: 0.975rem; font-family: var(--font-body) !important;
}
.entry-content .wp-block-table,
.wp-block-post-content .wp-block-table {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--card-radius);
  overflow: hidden; box-shadow: var(--shadow-sm); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.entry-content .wp-block-table table,
.wp-block-post-content .wp-block-table table { margin-top: 0 !important; margin-bottom: 0 !important; border: none; box-shadow: none; border-radius: 0; }
.entry-content table th,
.entry-content table td,
.wp-block-post-content table th,
.wp-block-post-content table td {
  padding: 18px 22px !important; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.6;
}
.entry-content table th,
.wp-block-post-content table th {
  background: var(--light-bg); color: var(--text); font-family: var(--font-heading) !important;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
}
.entry-content table tr:last-child td,
.wp-block-post-content table tr:last-child td { border-bottom: none; }
.entry-content table tr:hover td,
.wp-block-post-content table tr:hover td { background: rgba(var(--primary-rgb), 0.02); }

.entry-content pre,
.entry-content .wp-block-code,
.wp-block-post-content pre,
.wp-block-post-content .wp-block-code {
  margin-top: 3rem !important; margin-bottom: 3rem !important; padding: 1.75rem !important;
  background: var(--dark-bg); color: rgba(255, 255, 255, 0.92); border-radius: var(--card-radius);
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important; font-size: 0.95rem;
  line-height: 1.65; overflow-x: auto; box-shadow: var(--shadow-sm);
}
.entry-content code,
.wp-block-post-content code {
  background: rgba(var(--primary-rgb), 0.06); padding: 2px 7px; border-radius: 6px; font-size: 0.9em;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace !important; color: var(--text);
}
.entry-content pre code,
.wp-block-post-content pre code { background: transparent; padding: 0; border-radius: 0; color: inherit; font-size: inherit; }

.entry-content hr,
.entry-content .wp-block-separator,
.wp-block-post-content hr,
.wp-block-post-content .wp-block-separator {
  margin-top: 5rem !important; margin-bottom: 5rem !important; border: none; height: 1px;
  background: var(--border); max-width: 200px; margin-left: auto !important; margin-right: auto !important;
}

.entry-content p a,
.entry-content li a,
.entry-content td a,
.wp-block-post-content p a,
.wp-block-post-content li a,
.wp-block-post-content td a {
  color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; transition: color var(--transition);
}
.entry-content p a:hover,
.entry-content li a:hover,
.entry-content td a:hover,
.wp-block-post-content p a:hover,
.wp-block-post-content li a:hover,
.wp-block-post-content td a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }

/* Override Gutenberg's :where(.is-layout-flow) > * margin resets */
.entry-content.is-layout-flow > *,
.wp-block-post-content.is-layout-flow > *,
.single-post .entry-content.is-layout-flow > *,
.page .wp-block-post-content.is-layout-flow > * { margin-block-start: revert; margin-block-end: revert; }

/* Heading anchor links */
.entry-content h2, .entry-content h3 { position: relative; scroll-margin-top: 120px; }
.entry-content h2 .heading-anchor,
.entry-content h3 .heading-anchor {
  position: absolute; left: -1.5em; top: 50%; transform: translateY(-50%); opacity: 0;
  text-decoration: none; color: var(--accent-text); font-weight: 400; transition: opacity var(--transition); min-height: 0;
}
.entry-content h2:hover .heading-anchor,
.entry-content h3:hover .heading-anchor,
.entry-content .heading-anchor:focus-visible { opacity: 1; }
@media (max-width: 900px) { .entry-content .heading-anchor { display: none; } }

/* ---- AUTHOR BOX ---- */
.post-author-box {
  background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: var(--space-lg); margin: var(--space-2xl) auto var(--space-lg); max-width: var(--container-width);
  display: grid; grid-template-columns: 72px 1fr; gap: var(--space-md); align-items: center; box-shadow: var(--shadow-sm);
}
.post-author-box .wp-block-avatar img { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: var(--shadow-sm); }
.post-author-box__content { display: flex; flex-direction: column; gap: 4px; }
.post-author-box__label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--text-muted); font-weight: 700; margin: 0; }
.post-author-box .wp-block-post-author-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0; }
.post-author-box .wp-block-post-author-name a { color: inherit; text-decoration: none; }
.post-author-box .wp-block-post-author-name a:hover { color: var(--accent-text); }
.post-author-box__dates { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-sm); }
.post-author-box__field { display: flex; flex-direction: column; gap: 2px; }
.post-author-box__field-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; color: var(--text-muted); font-weight: 700; }
.post-author-box__field-value { font-size: 0.9375rem; color: var(--text); font-weight: 600; }
.post-author-box__field-value a { color: var(--accent-text); text-decoration: none; }
.post-author-box__field-value a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .post-author-box { grid-template-columns: 1fr; text-align: center; }
  .post-author-box .wp-block-avatar { margin: 0 auto; }
  .post-author-box__dates { justify-content: center; }
}

/* ---- RELATED POSTS ---- */
.related-posts { max-width: var(--container-width); margin: var(--space-2xl) auto var(--space-xl); padding: 0 var(--space-md); }
.related-posts h2 { font-size: var(--text-2xl); margin-bottom: var(--space-lg); text-align: center; line-height: 1.15; letter-spacing: -0.01em; }
.related-posts__grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.related-posts__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius); padding: var(--space-lg); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); box-shadow: var(--shadow-sm); display: block; min-height: 0; }
.related-posts__card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; color: inherit; }
.related-posts__card h3 { font-size: 1.25rem; line-height: 1.35; margin: 0 0 var(--space-sm); color: var(--text); }
.related-posts__card time { font-size: 0.8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- BLOG INDEX / ARCHIVE / AUTHOR query loop styling ---- */
.archive-wrap .wp-block-query, .author-wrap .wp-block-query {
  display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: var(--space-xl);
}
.archive-wrap .wp-block-post-template, .author-wrap .wp-block-post-template {
  display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); list-style: none; padding: 0;
}
.archive-wrap .wp-block-post-template > li, .author-wrap .wp-block-post-template > li {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: var(--space-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
}
.archive-wrap .wp-block-post-template > li:hover, .author-wrap .wp-block-post-template > li:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.archive-wrap .wp-block-post-title, .author-wrap .wp-block-post-title { font-size: 1.3rem; margin-bottom: var(--space-sm); }
.archive-wrap .wp-block-post-title a, .author-wrap .wp-block-post-title a { color: var(--text); text-decoration: none; }
.archive-wrap .wp-block-post-title a:hover, .author-wrap .wp-block-post-title a:hover { color: var(--accent-text); }
.archive-wrap .wp-block-post-date, .author-wrap .wp-block-post-date { font-size: 0.8125rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: var(--space-sm); }
.wp-block-query-pagination { margin-top: var(--space-xl); display: flex; gap: var(--space-sm); justify-content: center; }
.author-hero { gap: var(--space-md); margin-bottom: var(--space-lg); }
.author-hero .wp-block-avatar img { border-radius: 50%; box-shadow: var(--shadow-md); }
.error-wrap { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); text-align: center; }
.error-wrap .wp-block-search { max-width: 480px; margin: var(--space-lg) auto; }

/* ---- Generic section helpers ---- */
.section-label { display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: var(--space-sm); }
.section-subtitle { color: var(--text-muted); font-size: var(--text-lg); max-width: 60ch; }
.fade-in-section { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; }
.fade-in-section.is-visible { opacity: 1; transform: translateY(0); }
.section-header { text-align: center; margin-bottom: var(--space-2xl); }

.section-services, .section-blog { content-visibility: auto; contain-intrinsic-size: auto 600px; }

/* =====================================================================
   HOMEPAGE SECTIONS (ported from index.html design)
   ===================================================================== */

/* Section eyebrow / heads */
.hr-section { padding: var(--section-padding); }
.section-head { max-width: 760px; margin-bottom: var(--space-xl); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { display: inline-block; font-family: var(--font-heading); font-weight: 700;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: var(--space-sm); }
.section-head h2 { margin-bottom: var(--space-md); }
.section-head p { color: var(--text-muted); font-size: var(--text-lg); }
.section-head.center p { margin-inline: auto; }

/* Full-bleed helper for colored sections inside constrained main */
.full-bleed { width: 100vw; margin-left: calc(50% - 50vw); }

/* HERO */
.hr-hero { position: relative; color: #fff; overflow: hidden; isolation: isolate;
  padding: clamp(140px,16vh,220px) var(--space-md) clamp(110px,12vh,170px); }
.hr-hero .hero-bg { position: absolute; inset: 0; z-index: -3; background-color: var(--primary);
  background-size: cover; background-position: center 30%; }
.hr-hero .hero-overlay { position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(120deg, rgba(var(--primary-rgb),0.92) 0%, rgba(0,40,90,0.78) 55%, rgba(11,34,56,0.7) 100%); }
.hr-hero .hero-mesh { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px 420px at 80% 18%, rgba(var(--accent-rgb),0.22), transparent 70%),
              radial-gradient(360px 360px at 12% 90%, rgba(var(--energy-rgb),0.16), transparent 70%); }
.hr-hero .hero-content { max-width: var(--container-width); margin: 0 auto; padding: 0; }
.hr-hero .hero-inner { max-width: 760px; }
.hr-hero .badge { display: inline-flex; align-items: center; gap: .5em; background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28); padding: 8px 16px; border-radius: 50px;
  font-family: var(--font-heading); font-weight: 600; font-size: .85rem; letter-spacing: .03em;
  margin-bottom: var(--space-md); backdrop-filter: blur(4px); }
.hr-hero .badge svg { width: 17px; height: 17px; }
.hr-hero h1 { font-size: var(--text-hero); line-height: 1.05; letter-spacing: -0.02em; color: #fff;
  margin-bottom: var(--space-md); max-width: 16ch; }
.hr-hero h1 .hl { color: var(--accent); }
.hr-hero .hero-sub { font-size: var(--text-lg); color: rgba(255,255,255,0.92); max-width: 54ch; margin-bottom: var(--space-lg); }
.hr-hero .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.hr-hero .hero-actions .text-link { color: #fff; }
.hr-hero .hero-actions .text-link .arw { color: var(--accent); }
.hr-hero .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255,255,255,0.8);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }
.hr-hero .scroll-cue .mouse { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,0.6); border-radius: 14px; position: relative; }
.hr-hero .scroll-cue .mouse::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 7px;
  background: #fff; border-radius: 3px; transform: translateX(-50%); animation: hr-wheel 1.6s ease-in-out infinite; }
@keyframes hr-wheel { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,12px)} }
.shape-divider { position: absolute; left: 0; width: 100%; line-height: 0; overflow: hidden; z-index: 1; }
.shape-divider.bottom { bottom: -1px; }
.shape-divider svg { display: block; width: 100%; height: 70px; }

/* TRUST BAR */
.hr-trust { background: #fff; padding: var(--space-xl) var(--space-md); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: var(--space-md); }
.trust-item { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 14px; background: var(--light-bg); border: 1px solid var(--border); }
.trust-item .ic { flex-shrink: 0; width: 46px; height: 46px; border-radius: 11px; background: #fff; display: grid; place-items: center; color: var(--primary); box-shadow: var(--shadow-sm); }
.trust-item .ic svg { width: 24px; height: 24px; }
.trust-item b { font-family: var(--font-heading); font-size: 1.02rem; display: block; line-height: 1.2; }
.trust-item span { font-size: .86rem; color: var(--text-muted); }

/* SERVICES */
.hr-services { background: #fff; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: var(--space-lg); padding-top: var(--space-md); }
.service-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius);
  padding: var(--card-padding); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); will-change: transform; }
.service-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-card:hover::before { transform: scaleX(1); }
.service-icon { width: 60px; height: 60px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--primary-rgb),0.10), rgba(var(--accent-rgb),0.14)); color: var(--primary); margin-bottom: var(--space-md); transition: transform .4s ease; }
.service-card:hover .service-icon { transform: scale(1.08) rotate(3deg); }
.service-icon svg { width: 30px; height: 30px; }
.service-card h3 { font-size: var(--text-xl); }
.service-card p { color: var(--text-muted); font-size: .98rem; margin-bottom: var(--space-md); flex-grow: 1; }

/* WHY */
.hr-why { background: var(--light-bg); }
.why-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; }
@media (min-width: 980px) { .why-layout { grid-template-columns: 0.9fr 1.1fr; } }
.value-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: var(--space-md); padding-top: var(--space-md); }
.value-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px; position: relative;
  border-left: 3px solid transparent; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.value-card:hover { transform: translateY(-5px); border-left-color: var(--accent); box-shadow: var(--shadow-md); }
.value-card .ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--primary-rgb),0.08); color: var(--primary); margin-bottom: 14px; }
.value-card .ic svg { width: 25px; height: 25px; }
.value-card h3 { font-size: 1.12rem; }
.value-card p { font-size: .92rem; color: var(--text-muted); }
.why-cta { margin-top: var(--space-lg) !important; }

/* FUNDING BAND */
.hr-funding { padding: var(--space-xl) var(--space-md); background: linear-gradient(120deg, var(--primary) 0%, #013a7a 100%); color: #fff; overflow: hidden; position: relative; }
.funding-inner { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; position: relative; z-index: 1; }
@media (min-width: 860px) { .funding-inner { grid-template-columns: 1fr auto; } }
.hr-funding h2 { color: #fff; margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.hr-funding p { color: rgba(255,255,255,0.9); max-width: 60ch; }
.hr-funding .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hr-funding .pills span { background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.25); padding: 6px 14px; border-radius: 50px; font-size: .85rem; font-weight: 700; font-family: var(--font-heading); }
.funding-mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(300px 300px at 90% 10%, rgba(var(--accent-rgb),0.25), transparent 70%); }

/* PROCESS */
/* Carries the white -> light-bg shape divider that used to sit on the
   testimonials section (removed in v1.1.4). position:relative gives the
   absolutely positioned divider its containing block, and the extra bottom
   padding keeps the 70px curve clear of the last step. */
.hr-process { background: #fff; position: relative; padding-bottom: calc(var(--space-2xl) + 40px); }
.steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: var(--space-lg); padding-top: var(--space-md); }
.step { position: relative; padding-top: 8px; }
.step .num { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--accent-dark)); margin-bottom: 18px; box-shadow: 0 8px 18px rgba(var(--primary-rgb),0.28); }
.step h3 { font-size: 1.08rem; }
.step p { font-size: .92rem; color: var(--text-muted); }
.step:not(:last-child)::after { content: ""; position: absolute; top: 34px; left: 64px; right: -20px; height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0 8px, transparent 8px 16px); }
@media (max-width: 768px) { .step:not(:last-child)::after { display: none; } }

/* BLOG TEASERS */
.hr-blog { background: var(--light-bg); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: var(--space-lg); padding-top: var(--space-md); }
.blog-card { background: #fff; border: 1px solid var(--border); border-radius: var(--card-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); will-change: transform; }
.blog-card .stripe { height: 6px; background: linear-gradient(90deg, var(--accent), var(--primary)); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-body { padding: 26px 24px; display: flex; flex-direction: column; flex-grow: 1; }
.date-badge { align-self: flex-start; font-family: var(--font-heading); font-weight: 700; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); background: rgba(var(--accent-rgb),0.12); padding: 5px 12px; border-radius: 50px; margin-bottom: 14px; }
.blog-card h3 { font-size: 1.16rem; }
.blog-card p { font-size: .92rem; color: var(--text-muted); margin-bottom: 18px; flex-grow: 1; }

/* FINAL CTA */
.hr-cta { position: relative; background: linear-gradient(120deg, var(--primary), #013a7a); color: #fff; padding: var(--space-2xl) var(--space-md); text-align: center; overflow: hidden; }
.hr-cta .cta-mesh { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px 360px at 18% 30%, rgba(var(--accent-rgb),0.22), transparent 70%), radial-gradient(320px 320px at 85% 80%, rgba(var(--energy-rgb),0.18), transparent 70%); }
.hr-cta .cta-inner { position: relative; z-index: 1; max-width: var(--container-width); margin: 0 auto; }
.hr-cta h2 { color: #fff; max-width: 18ch; margin-inline: auto; }
.hr-cta p { color: rgba(255,255,255,0.92); font-size: var(--text-lg); max-width: 52ch; margin: 0 auto var(--space-lg); }

/* ---- FOOTER (v16) ---- */
.site-footer { background: var(--dark-bg) !important; color: rgba(255,255,255,0.82); padding: var(--space-xl) 0 0 !important; margin: 60px 0 0 !important; width: 100%; }
.site-footer h4 { color: rgba(255,255,255,0.88) !important; font-family: var(--font-heading); font-size: 1rem; margin-bottom: var(--space-md); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-xl); max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-md) var(--space-xl); }
.footer-col p { color: rgba(255,255,255,0.70); font-size: 0.92rem; line-height: 1.65; max-width: 36ch; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col li a { color: rgba(255,255,255,0.72); font-size: 0.92rem; transition: color var(--transition), transform var(--transition); display: inline-block; min-height: 0; }
.footer-col li a:hover { color: var(--accent); transform: translateX(3px); }
.footer-contact a { color: rgba(255,255,255,0.82); display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 0.92rem; min-height: 0; }
.footer-contact a:hover { color: var(--accent); }
.footer-contact svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.footer-credits { border-top: 1px solid rgba(255,255,255,0.10); padding: var(--space-md); text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.55); max-width: var(--container-width); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer-credits .tag { display: inline-flex; align-items: center; gap: 7px; }
.footer-credits .tag svg { width: 15px; height: 15px; color: var(--accent); }

/* Footer logo - colorful logo.webp in a white rounded card */
.footer-logo { display: inline-flex; align-items: center; justify-content: center; background: var(--white); padding: 14px 22px; border-radius: 14px; margin-bottom: var(--space-md); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); transition: transform var(--transition), box-shadow var(--transition); min-height: 0; }
.footer-logo:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32); }
.footer-logo img { height: 60px; width: auto; display: block; margin: 0; border-radius: 0; }

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } :root { --section-padding: var(--space-xl) var(--space-md); } }

}  /* end @layer components */


/* =====================================================================
   UTILITIES
   ===================================================================== */
@layer utilities {

a:focus-visible, button:focus-visible, .wp-block-button__link:focus-visible,
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: inherit; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--primary); color: #fff; padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 700; }
.skip-link:focus { left: 0; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .fade-in-section { opacity: 1 !important; transform: none !important; }
  .hr-hero .scroll-cue .mouse::after { animation: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

}  /* end @layer utilities */

/* =====================================================================
   UNLAYERED OVERRIDES (v1.1.0)

   Everything below sits OUTSIDE @layer on purpose. The parent TT5 global
   styles and LiteSpeed's optimizer both emit UNLAYERED rules, and an
   unlayered rule beats any layered one regardless of specificity. Rules
   that must not lose live here. Do not wrap this block in a layer.
   ===================================================================== */

/* ---- Typography -----------------------------------------------------
   The parent's unlayered body rule pointed at a font preset this child
   replaced, so every route rendered in Times New Roman. theme.json now
   sets the family unlayered too; these are the belt-and-braces pass for
   surfaces the global styles do not reach. */
body,
.wp-site-blocks {
  font-family: var(--font-body) !important;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
}

/* ---- Section visibility ---------------------------------------------
   Never gate visibility on JS. LiteSpeed combines and delays the theme's
   script, which left all 8 homepage sections stuck at opacity:0 for
   logged-out visitors (the homepage was blank below the hero). These
   sections are now visible by default and the reveal is gone.
   content-visibility:auto is dropped for the same reason: it blanks
   non-scrolling renders. */
.fade-in-section {
  opacity: 1 !important;
  transform: none !important;
}
.section-services,
.section-blog {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
}

/* ---- Button text colour ---------------------------------------------
   The layered .btn rules lost to the parent's unlayered element rules, so
   buttons INHERITED the surrounding text colour: the orange CTA came out
   white-on-orange (2.36:1) and the blue button dark-on-blue (2.58:1).
   Literal hex, never a preset var (LiteSpeed UCSS strips the vars). */
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus            { color: #ffffff !important; }   /* on #0056B8 = 6.95:1 */
.btn.btn-cta,
.btn.btn-cta:hover,
.btn.btn-cta:focus                { color: #2D2D2D !important; }   /* on #FF8A00 = 5.83:1 */
.btn.btn-light,
.btn.btn-light:hover,
.btn.btn-light:focus              { color: #0056B8 !important; }
.site-header .header-cta > a,
.site-header .wp-block-navigation-item.header-cta a,
.site-header .header-cta > a:hover,
.site-header .wp-block-navigation-item.header-cta a:hover {
  color: #ffffff !important;                                        /* on #0a7d7a = 4.97:1 */
}

/* ---- Reading measure -------------------------------------------------
   Body copy ran the full 1240px container: ~130 chars per line against a 90
   hard limit. These must be DESCENDANT selectors, not direct-child ones: the
   posts wrap their copy in <article><section>, so a `> p` rule only reached
   the couple of intro paragraphs and left the whole article body full width.
   Text gets the reading column; figures, images, tables and embeds keep the
   full container so media still reads as media. */
.entry-content :is(p, h2, h3, h4, h5, ul, ol, blockquote, dl),
.wp-block-post-content :is(p, h2, h3, h4, h5, ul, ol, blockquote, dl) {
  max-width: var(--reading-width) !important;   /* 760px ~= 80 chars at 19px */
  margin-inline: auto !important;
}
/* Media, tables and cards keep their own width: never inherit the text cap. */
.entry-content :is(figure, img, table, .wp-block-table, .wp-block-embed, .related-posts, .post-author-box),
.wp-block-post-content :is(figure, img, table, .wp-block-table, .wp-block-embed, .related-posts, .post-author-box) {
  max-width: 100% !important;
}
/* Text nested inside those wide blocks must not be re-capped or re-centred. */
.entry-content :is(figure, table, .related-posts, .post-author-box) :is(p, h2, h3, h4, ul, ol),
.wp-block-post-content :is(figure, table, .related-posts, .post-author-box) :is(p, h2, h3, h4, ul, ol) {
  max-width: none !important;
  margin-inline: 0 !important;
}

/* ---- Touch targets (WCAG 2.2 SC 2.5.8, 24px minimum) -----------------
   Breadcrumb links computed 19px tall and the author-box category link 20px:
   the theme sets `display:inline` + `min-height:0` on both, and min-height
   does nothing on an inline box. Standalone links, so the SC 2.5.8 "inline
   in a sentence" exception does not apply. */
.breadcrumbs a,
.breadcrumbs li[aria-current="page"],
.post-author-box a {
  display: inline-block !important;
  min-height: 24px !important;
  line-height: 24px !important;
}

/* ---- Accent text contrast -------------------------------------------
   #0a7d7a on the #eef4fb tint measured 4.49:1, a hair under AA. */
.section-label,
.section-head .eyebrow {
  color: var(--accent-text) !important;   /* #0a6b68 on #eef4fb = 5.72:1 */
}

/* ---- Logo layout shift (CLS) ----------------------------------------
   LiteSpeed Lazy Load swaps the real src for a 1x1 base64 GIF. The width and
   height attributes only reserve the right box until a file LOADS, and that
   1x1 placeholder then supplies its OWN 1:1 natural ratio, which wins: the
   footer logo laid out 60x60 and jumped to 226x60 on swap. A declared
   aspect-ratio is not overridden by the placeholder, so the correct box is
   held from first paint. Both logos are the same 564x150 asset. */
.site-logo img,
.footer-logo img {
  aspect-ratio: 564 / 150;
}

/* =====================================================================
   v1.1.5 - override block, deliberately inside @layer components.

   NOT unlayered, and that distinction is load-bearing. For !important
   declarations the cascade INVERTS the layer order: a layered !important
   beats an unlayered one, and an earlier layer beats a later one. The rules
   these overrides have to defeat are this theme's own
     @layer components  .entry-content h2 { color: var(--text) !important }
     @layer utilities   .entry-content :is(p,h2,...) { max-width: ... !important }
   so an unlayered !important LOST to them. Shipping in @layer components,
   after the offending rule, wins on layer order (components precedes
   utilities) and on source order within the layer. Verified with --css
   against the live DOM, not assumed.

   The parent's unlayered NORMAL declarations (a{color:currentcolor}) are
   still beaten here, because !important outranks normal in every layer.
   Nothing in @layer base uses !important, so nothing can outrank this.
   ===================================================================== */
@layer components {
/* --- Dark bands ---------------------------------------------------------
   The funding and final-CTA headings rendered near-black (#15171C) on the
   blue gradient: 1.61:1 at the dark end of the gradient, 2.58:1 at the
   light end. White is 11.13:1 and 6.95:1. These are the most visible
   defects on the site, not a walker artifact: confirmed in a screenshot. */
.hr-funding :is(h2, h3, p, li, span, strong),
.hr-cta :is(h2, h3, p, li, span, strong) {
  color: #fff !important;
}
.hr-funding p,
.hr-cta p {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* --- Skip link ----------------------------------------------------------
   Rendered black on primary at 3.02:1 when focused. White is 6.95:1. */
.skip-link {
  color: #fff !important;
  background: var(--primary) !important;
}

/* --- Mobile nav overlay -------------------------------------------------
   backdrop-filter (like transform/filter/contain) makes .site-header a
   containing block for position:fixed descendants, and core's overlay lives
   inside the header. Measured 82px tall in an 844px viewport: the menu
   opened as a sliver in the top-right showing only "Services". Drop the
   filter only while the menu is open. */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--dark-bg) !important;
  padding-top: var(--space-md) !important;
  --navigation-layout-justify: flex-start !important;
}
/* justifyContent:flex-end on the desktop nav leaks --navigation-layout-justify
   into the overlay and right-aligns every row. Each level that stacks in a
   column is its own flex container, so the ul, the submenu container and each
   li all need this: setting the custom property alone does not reach them. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: flex-start !important;
  text-align: left !important;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 4px !important;
}
.wp-block-navigation__responsive-container.is-menu-open a {
  color: #fff !important;
  font-size: 1.15rem !important;
}
/* The desktop white dropdown card also matches inside the dark overlay, so
   each submenu floated as a light card. Flatten it to an indented list. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding: 0 0 var(--space-xs) var(--space-md) !important;
}
/* The header CTA is a solid teal pill; keep its label white inside the
   overlay rather than letting the generic white-link rule restyle the pill. */
.wp-block-navigation__responsive-container.is-menu-open .header-cta a {
  color: #fff !important;
}
/* The chevron stacks as its own row in the column overlay; pull it back to
   the label's left edge instead of letting it float centred. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  align-self: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* --- WCAG 2.2 SC 2.5.8: 24px on BOTH axes -------------------------------
   axe measured the Services and Blog chevrons at 10.8px wide. */
.wp-block-navigation__submenu-icon {
  min-width: 24px !important;
  min-height: 24px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* --- Nav anchors --------------------------------------------------------
   WP renders top-level nav anchors display:block, which defeats inline-flex
   centring and leaves the label sitting high in its box. */
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: inline-flex !important;
  align-items: center !important;
}
.site-header .header-cta > .wp-block-navigation-item__content {
  min-height: 46px !important;
  padding-block: 0 !important;
}

/* --- One reading column per page and post -------------------------------
   The reading-measure package caps everything inside .entry-content to the
   reading width, but the H1 lives OUTSIDE it in .page-wrap, so it ran the
   full 1240px container while the copy sat centred at 760: two different
   left edges on every page. Put the title in the same column. */
.page-wrap > .wp-block-post-title,
.post-wrap > .wp-block-post-title {
  max-width: var(--reading-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: var(--space-lg) !important;
  margin-bottom: var(--space-md) !important;
}

/* --- Section spacing on interior templates ------------------------------
   Measured 24px between the breadcrumbs part and the content, and 0px top
   and bottom padding. CLAUDE.md hard rule: 48px+ desktop, 32px+ mobile. */
.page-wrap,
.post-wrap,
.author-wrap {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-2xl) !important;
}
.breadcrumbs {
  padding-top: var(--space-lg) !important;
}
@media (max-width: 782px) {
  .page-wrap,
  .post-wrap,
  .author-wrap {
    padding-top: var(--space-lg) !important;
    padding-bottom: var(--space-xl) !important;
  }
  /* 32px exactly, the mobile floor. No token sits between 24 and 40. */
  .breadcrumbs {
    padding-top: 32px !important;
  }
}

/* --- Archive, search and 404 --------------------------------------------
   blockGap:0 emits an unlayered `.is-layout-flow > *` margin-block:0, so the
   H1's margin measured 0 and "Category: Remodeling" sat ON TOP of the first
   row of cards. On the 404 the same reset dropped the button onto the search
   row, and the button was left-aligned inside an otherwise centred block. */
.archive-wrap > h1,
.archive-wrap > .wp-block-query-title,
.author-wrap > h1,
.error-wrap > h1 {
  margin-bottom: var(--space-lg) !important;
}
.archive-wrap .wp-block-post-template,
.author-wrap .wp-block-post-template {
  margin-block: var(--space-lg) !important;
}
.error-wrap > p {
  margin-bottom: var(--space-lg) !important;
}
.error-wrap .wp-block-search {
  margin-block: var(--space-lg) !important;
}
.error-wrap .wp-block-buttons {
  margin-top: var(--space-lg) !important;
  justify-content: center !important;
}

/* --- Contact Form 7 -----------------------------------------------------
   CF7 ships no CSS by design, so /contact/ was rendering raw browser default
   inputs. Font-size stays >= 1rem so iOS Safari does not zoom on focus. */
.wpcf7 {
  max-width: var(--reading-width);
  margin: var(--space-md) auto 0;
}
.wpcf7 form > p,
.wpcf7 .wpcf7-form > p {
  margin: 0 0 20px !important;
  max-width: none !important;
}
.wpcf7 label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 6px;
}
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="date"], input[type="number"], select, textarea) {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(var(--primary-rgb), 0.28);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 48px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.wpcf7 textarea {
  min-height: 150px;
  resize: vertical;
}
.wpcf7 :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.24);
}
.wpcf7 :is(input, select, textarea)::placeholder {
  color: rgba(0, 0, 0, 0.5);
}
.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
  background: var(--accent-dark);
  color: #fff;
  border: 0;
  border-radius: var(--btn-radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 14px 32px;
  min-height: 48px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.wpcf7 .wpcf7-not-valid-tip {
  color: #B3261E;
  font-size: 0.9rem;
  margin-top: 6px;
}
.wpcf7 .wpcf7-response-output {
  border-radius: 10px;
  border-width: 1px !important;
  padding: 14px 16px !important;
  margin: 8px 0 0 !important;
  font-size: 0.95rem;
}

} /* end @layer components (v1.1.5) */