/* =========================================================================
   COMPATIBILITY LAYER for old .ihc-* classes embedded in page content.
   Page content lives in the WP database with old theme class names. This
   file maps those classes to v3 design tokens so 226 existing pages render
   reasonably without re-authoring their HTML.
   Added 2026-05-05 Phase 2 typography pass.
   ========================================================================= */

/* The page.php template renders its own v3 hero with the page title.
   Suppress the old in-content hero block so it does not duplicate. */
.page-content .ihc-hero-v2,
.page-content .ihc-hero-bg,
.page-content .ihc-hero-overlay,
.page-content .ihc-hero-inner,
.page-content .ihc-hero-trust-line { display: none !important; }

/* Old breadcrumbs: hide. Yoast still emits BreadcrumbList JSON-LD via wp_head. */
.page-content .ihc-breadcrumbs { display: none; }

/* CTA buttons embedded in page content -> match v3 button style */
.page-content .ihc-btn-primary,
.page-content .ihc-btn-secondary,
.page-content a.ihc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 28px;
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: all 0.25s ease;
  margin: 8px 8px 8px 0;
}
.page-content .ihc-btn-primary {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}
.page-content .ihc-btn-primary:hover {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
  transform: translateY(-1px);
}
.page-content .ihc-btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.page-content .ihc-btn-secondary:hover {
  background: var(--navy);
  color: var(--cream);
}

/* Eyebrow / labels */
.page-content .ihc-eyebrow,
.page-content .eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Cert badges + trust callouts */
.page-content .ihc-cert-badge {
  display: inline-block;
  max-width: 120px;
  height: auto;
  margin: 8px 12px 8px 0;
}
.page-content .ihc-check {
  color: var(--gold);
  font-weight: 700;
  margin-right: 6px;
}
.page-content .ihc-intro-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  margin-right: 24px;
}
.page-content .ihc-intro-badge-number {
  font-family: var(--display);
  font-weight: 900;
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
}

/* AEO Quick Answer blocks - load-bearing for AEO/GEO. v3 styling, structure unchanged. */
.page-content .ihc-aeo-answer,
.ihc-aeo-answer {
  background: var(--cream-warm);
  border-left: 3px solid var(--gold);
  padding: 32px 36px;
  margin: 48px 0;
}
.page-content .ihc-aeo-question,
.ihc-aeo-question {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.5vw, 28px);
  color: var(--navy);
  margin-bottom: 16px;
  line-height: 1.25;
}
.page-content .ihc-aeo-lead,
.ihc-aeo-lead {
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--char);
  margin-bottom: 16px;
}
.page-content .ihc-aeo-points,
.ihc-aeo-points {
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-content .ihc-aeo-points li,
.ihc-aeo-points li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-soft);
}
.page-content .ihc-aeo-points li::before,
.ihc-aeo-points li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 700;
}

/* Generic typography inside page content. !important needed to override
   GeneratePress + GenerateBlocks defaults which are loaded after via
   the parent theme stylesheet. */
.page-content,
.page-content p,
.page-content li,
.page-content blockquote {
  font-family: var(--body) !important;
}
.page-content { color: var(--char); line-height: 1.65; }
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  font-family: var(--display) !important;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.page-content h1,
.page-content h2 {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 64px 0 24px;
}
.page-content h1 { font-size: clamp(40px, 6vw, 80px); }
.page-content h2 { font-size: clamp(32px, 4.5vw, 60px); }
.page-content h3 {
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: -0.01em;
  margin: 48px 0 16px;
}
.page-content h4 {
  font-weight: 600;
  font-size: 20px;
  margin: 32px 0 12px;
}
/* Don't squash specific in-content components that already define their own h-styles */
.page-content .ihc-aeo-question,
.page-content .ihc-svc-faq-question,
.page-content .ihc-svc-bottom-cta h2,
.page-content .ihc-about-testimonial-author { text-transform: none; }

.page-content p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 24px;
  color: var(--char);
}
.page-content a:not(.ihc-btn-primary):not(.ihc-btn-secondary):not(.btn) {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.page-content a:not(.ihc-btn-primary):not(.ihc-btn-secondary):not(.btn):hover {
  color: var(--gold);
}
.page-content ul, .page-content ol { margin: 0 0 24px; padding-left: 24px; }
.page-content ul li, .page-content ol li { margin-bottom: 10px; line-height: 1.65; }
.page-content img { max-width: 100%; height: auto; display: block; margin: 24px 0; }
.page-content blockquote {
  border-left: 3px solid var(--gold);
  padding: 16px 24px;
  margin: 32px 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  color: var(--text-soft);
  background: var(--cream-warm);
}
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  font-size: 15px;
}
.page-content table th,
.page-content table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.page-content table th {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  background: var(--navy);
}

/* Old service / doors grids */
.page-content .ihc-doors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.page-content .ihc-intro-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 32px 0;
}

/* =========================================================================
   ABOUT PAGE patterns
   ========================================================================= */
.page-content .ihc-about-stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 4vw, 56px);
  padding: 48px 0;
  margin: 48px 0;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--rule);
}
.page-content .ihc-about-stat { text-align: center; }
.page-content .ihc-about-stat-number {
  display: block;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 8px;
}
.page-content .ihc-about-stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-content .ihc-about-bio-details { margin: 24px 0 32px; }
.page-content .ihc-about-testimonial {
  background: var(--cream-warm);
  padding: 40px clamp(24px, 4vw, 56px);
  margin: 48px 0;
  border-left: 3px solid var(--gold);
  position: relative;
}
.page-content .ihc-about-testimonial-stars {
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 4px;
  margin-bottom: 16px;
}
.page-content .ihc-about-testimonial-author {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  color: var(--navy);
  margin-top: 16px;
}
.page-content .ihc-about-testimonial-attribution {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.page-content .ihc-about-testimonial-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 12px 0 0;
  display: inline-block;
  vertical-align: middle;
}
.page-content .ihc-about-testimonial-logo {
  max-height: 32px;
  width: auto;
  margin: 0 8px;
  display: inline-block;
  vertical-align: middle;
}

/* =========================================================================
   FAQ patterns (both .ihc-faq-* and .ihc-svc-faq-*)
   ========================================================================= */
.page-content .ihc-faq-list,
.page-content .ihc-svc-faq-list {
  list-style: none;
  padding: 0;
  margin: 32px 0;
  border-top: 1px solid var(--rule-strong);
}
.page-content .ihc-faq-item,
.page-content .ihc-svc-faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.page-content .ihc-svc-faq-question {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--navy);
  margin-bottom: 12px;
  line-height: 1.3;
}
.page-content .ihc-svc-faq-answer {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-soft);
}

/* =========================================================================
   SERVICE PILLAR patterns
   ========================================================================= */
.page-content .ihc-svc-section { padding: clamp(48px, 6vw, 80px) 0; }
.page-content .ihc-svc-section-inner { max-width: 1200px; margin: 0 auto; }
.page-content .ihc-bg-warm { background: var(--cream-warm); }

.page-content .ihc-svc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 4vw, 56px);
  padding: 32px 0;
  margin: 32px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.page-content .ihc-svc-stat { text-align: center; }
.page-content .ihc-svc-stat-number {
  display: block;
  font-family: var(--display);
  font-weight: 200;
  font-size: clamp(32px, 4vw, 48px);
  letter-spacing: -0.04em;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.page-content .ihc-svc-stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.page-content .ihc-svc-process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 2vw, 32px);
  margin: 40px 0;
}
.page-content .ihc-svc-step {
  padding: 32px 24px;
  border-top: 2px solid var(--gold);
  background: var(--paper);
}
.page-content .ihc-svc-step-number {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.page-content .ihc-svc-bottom-cta,
.page-content .ihc-svc-bottom-cta-inner {
  background: var(--navy-deep);
  color: var(--cream);
  padding: clamp(48px, 8vw, 100px) clamp(20px, 4vw, 56px);
  text-align: center;
  margin: 64px 0 0;
}
.page-content .ihc-svc-bottom-cta h2,
.page-content .ihc-svc-bottom-cta-inner h2 {
  color: var(--cream) !important;
  margin-top: 0;
}
.page-content .ihc-svc-cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}
.page-content .ihc-svc-cta-row .ihc-btn-secondary {
  border-color: rgba(244,239,227,0.4);
  color: var(--cream);
}
.page-content .ihc-svc-cta-trust {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,227,0.6);
  margin-top: 24px;
}

.page-content .ihc-svc-table-wrap { overflow-x: auto; margin: 32px 0; }
.page-content .ihc-svc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.page-content .ihc-svc-table th,
.page-content .ihc-svc-table td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.page-content .ihc-svc-table th {
  background: var(--navy);
  color: var(--gold);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* WHY-SVC grid (sub-product highlights) */
.page-content .ihc-why-svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.page-content .ihc-why-svc-item {
  padding: 32px 24px;
  background: var(--paper);
  border-top: 2px solid var(--gold);
}

/* MATERIALS grid (Hardie / LP product cards) */
.page-content .ihc-materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.page-content .ihc-material-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.page-content .ihc-material-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin: 0;
  display: block;
}
.page-content .ihc-material-card-body {
  padding: 24px;
}

/* RELATED + SHOWROOM grids */
.page-content .ihc-related-grid,
.page-content .ihc-showroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.page-content .ihc-related-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 0;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.page-content .ihc-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,28,51,0.08);
}
.page-content .ihc-showroom-photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  margin: 0;
  display: block;
}

/* CONTENT-SPLIT pattern: text + image side-by-side */
.page-content .ihc-content-split,
.page-content .ihc-intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: 48px 0;
}
.page-content .ihc-content-img,
.page-content .ihc-content-img img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.page-content .ihc-content-text,
.page-content .ihc-intro-text { font-size: 17px; line-height: 1.7; }
.page-content .ihc-section-lead {
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  color: var(--text-soft);
  font-weight: 300;
  font-family: var(--display);
  margin: 0 0 32px;
}
@media (max-width: 768px) {
  .page-content .ihc-content-split,
  .page-content .ihc-intro-split { grid-template-columns: 1fr; }
}

/* TEAM grid (about page) */
.page-content .ihc-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin: 32px 0;
}
.page-content .ihc-team-card {
  text-align: center;
  background: var(--paper);
  padding: 24px;
  border-top: 2px solid var(--gold);
}
.page-content .ihc-team-card img,
.page-content .ihc-team-photo-placeholder {
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: var(--cream-warm);
  margin: 0 0 16px;
  display: block;
}
.page-content .ihc-team-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
}

/* Reveal animations — disable since v3 has its own animations */
.page-content .ihc-reveal,
.page-content .ihc-reveal-stagger { opacity: 1 !important; transform: none !important; }

/* Misc */
.page-content .ihc-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.page-content .ihc-star { color: var(--gold); }

/* Service-pillar trust bar (Andersen badge + reviews + years + BBB).
   Outer wrapper only carries the borders so the inner doesn't double-up. */
.page-content .ihc-svc-trust-bar {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
  margin: 24px 0 48px;
}
.page-content .ihc-svc-trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 0;
}
/* If the bar is rendered without the outer wrapper, fall back gracefully */
.page-content .ihc-svc-trust-bar-inner:only-child,
.page-content > .ihc-svc-trust-bar-inner {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
  margin: 24px 0 48px;
}
.page-content .ihc-svc-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
  line-height: 1.3;
  gap: 6px;
}
.page-content .ihc-svc-trust-item img {
  width: 56px;
  height: 48px;
  object-fit: contain;
  margin: 0;
}
.page-content .ihc-svc-trust-item span { display: block; }
.page-content .ihc-svc-trust-item br { display: none; }
.page-content .ihc-trust-check {
  font-size: 28px;
  color: var(--gold);
  line-height: 1;
  font-weight: 700;
}

/* Page-content top padding lives in v3-base.css now —
   `main.page-content.section-padding { padding-top: clamp(32px, 6vw, 80px); }`
   Removed an obsolete `padding-top: 80px !important` here that was beating
   the responsive clamp on mobile (caused 80px dead zone under the hero). */

@media (max-width: 768px) {
  .page-content article > h1 { font-size: clamp(32px, 8vw, 48px); }
  .page-content article > h2 { font-size: clamp(28px, 6vw, 40px); }
  .page-content .ihc-btn-primary,
  .page-content .ihc-btn-secondary {
    display: block;
    text-align: center;
    margin-bottom: 12px;
    width: 100%;
  }
}