/* ==========================================================================
   CX Guru  theme overrides / QA fixes (loaded last).
   Fixes header overlap, nav density, imported-content layout, tabs, forms.
   ========================================================================== */

/* --- ALIGNMENT: .container-wide / .container-narrow were used standalone, so
   they only inherited max-width  no centering, no side padding. That left the
   header, hero and footer flush to the left edge with empty space on the right.
   Give them the same gutters + centering as .container so everything lines up. --- */
.container-wide,
.container-narrow { margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

/* --- HEADER: keep it to a single row so its height stays == --header-h.
   The hero/.page-head reserve exactly --header-h of clearance; if the nav
   wraps, it grows taller and overlaps content. nowrap + tighter spacing keeps
   the menu on one line at desktop, and it collapses to the drawer < 860px. --- */
.site-header .nav { flex-wrap: nowrap; height: var(--header-h); }
.nav-links { flex-wrap: nowrap; gap: 0.05rem; min-width: 0; }
.nav-links a { padding: 0.5rem 0.55rem; font-size: 0.88rem; white-space: nowrap; }
@media (max-width: 1200px) {
  .nav-links a { padding: 0.45rem 0.4rem; font-size: 0.8rem; }
  .nav { gap: 0.9rem; }
}
.site-header { background: color-mix(in srgb, var(--bg) 90%, transparent); }

/* --- GLOBAL VERTICAL RHYTHM ---
   The stock --section-y (up to 8rem / 128px) left large dead gaps above every
   section on every page. Tighten it ONCE here so the whole site gets a tight,
   consistent, premium rhythm  instead of per-section patches. Because
   `.section + .section { padding-top: 0 }` keeps gaps single, the gap between
   any two sections now equals this value. --- */
:root { --section-y: clamp(2.5rem, 4.5vw, 4rem); }

/* Hero clears the fixed header with a tight top gap. */
.hero {
  padding-top: calc(var(--header-h) + clamp(0.4rem, 1.5vw, 1rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Centered section header (eyebrow + h2)  used where a section should read as a
   centered block (e.g. the implementation-process steps). The .cxg-section-pad
   class is intentionally NOT given extra padding: the tightened --section-y
   above already provides the correct, consistent gap (adding more would recreate
   the dead space we are removing). */
.section-head.cxg-center { text-align: center; margin-inline: auto; max-width: 46ch; }

/* --- HERO: cap the headline measure so the giant type doesn't run edge-to-edge
   and reads as a balanced block; tighten the lead width too. --- */
.hero h1 { max-width: 18ch; }
.hero .lead { max-width: 56ch; }
@media (max-width: 860px) { .hero h1 { max-width: 100%; } }

/* --- TAB / FILTER LIST VIEW (services, resources, portfolio) --- */
.cxg-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.cxg-tabs .filter-btn { cursor: pointer; }
.cxg-grid-min { min-height: 2rem; }
.cxg-empty-cat { color: var(--text-mute); }

/* --- IMPORTED CONTENT (about, methodology, service landings) ---
   Raw static markup is dropped into .entry-content. Guard against grid/flex
   tracks collapsing to min-content (the "one word per line" timeline bug) and
   stack 2-column splits on the editorial pages. --- */
.entry-content { width: 100%; }
.entry-content .timeline { width: 100%; max-width: 100%; }
.entry-content .tl-item { grid-template-columns: 20px minmax(0, 1fr); }
.entry-content .tl-item > * { min-width: 0; }
.entry-content .split { grid-template-columns: 1fr; gap: 1.5rem; }
.entry-content .grid > * ,
.entry-content .hero-grid > * { min-width: 0; }
.entry-content [class*="col-"] { min-width: 0; }
.entry-content img { border-radius: 8px; }

/* Spacing rhythm for imported sections so they don't butt together. */
.entry-content > section,
.entry-content > .section { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

/* --- NEWSLETTER band: compact + centered, consistent inline (homepage/resources)
   and in the footer. Single consolidated block (no duplicate rules). --- */
.newsletter-band {
  max-width: 680px;
  margin-inline: auto;
  padding: clamp(1.4rem, 3vw, 2rem);
  text-align: center;
}
.newsletter-band h3 { margin-bottom: 0.4rem; }
.newsletter-band .lead { margin: 0 auto 1.2rem; max-width: 48ch; }
.newsletter-band .newsletter-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  max-width: 520px;
  margin-inline: auto;
}
.newsletter-band .newsletter-form .form-control { min-width: 0; flex: 1 1 220px; }
.newsletter-band .newsletter-form .btn { white-space: nowrap; }
/* In the footer: tight top, modest bottom before the link columns. */
.site-footer { padding-top: clamp(1.5rem, 3vw, 2.25rem); margin-top: 0; }
.site-footer .newsletter-band { margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); }

/* --- Service / feature card grids: even gutters, equal heights, balanced
   rhythm before the section CTA. Applies to every page using these grids. --- */
.grid-3 { gap: clamp(1.25rem, 2vw, 1.75rem); }
.section .grid + .text-center,
.section .grid + .mt-4 { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.card.lift { display: flex; flex-direction: column; }
.card.lift .link-arrow { margin-top: auto; padding-top: 0.75rem; }

/* --- Form fields readable on the dark theme (covers native + Contact Form 7,
   overriding Bootstrap's white .form-control). --- */
.cxg-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.cxg-form select,
.cxg-form textarea,
.wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7-form select,
.wpcf7-form textarea,
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content input[type="tel"],
.entry-content select,
.entry-content textarea,
.newsletter-band input[type="email"],
.newsletter-band input[type="text"] {
  width: 100%;
  background: var(--surface, #14161c) !important;
  color: var(--text, #e9edf3) !important;
  border: 1px solid var(--line-strong, rgba(255,255,255,.15)) !important;
  border-radius: var(--r-sm, 8px);
  padding: 0.7rem 0.85rem;
}
.cxg-form input::placeholder,
.wpcf7-form input::placeholder,
.newsletter-band input::placeholder { color: var(--text-mute, #6d747f); }
/* CF7 layout: space rows, align labels like the native form */
.wpcf7-form p { margin-bottom: 1rem; }
.wpcf7-form label { color: var(--text-dim); font-size: 0.9rem; }
.wpcf7-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 600px) { .wpcf7-form .form-grid { grid-template-columns: 1fr; } }
.cxg-form label { display: block; font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.9rem; }
.cxg-form .form-grid label { margin-bottom: 0; }
.cxg-form .form-grid { margin-bottom: 1rem; }

/* --- Tighten the gap between the page head and the first content section --- */
.page-head { padding-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.page-head + .section,
.page-head + section,
.page-head + .entry-content { padding-top: 0; }
.page-head + .entry-content { margin-top: clamp(1rem, 2.5vw, 1.75rem); }

/* --- Founder section photo (homepage right column) --- */
.founder-split { align-items: center; }
.founder-media { display: flex; justify-content: center; }
.founder-media img {
  width: 100%;
  max-width: 360px;
  border-radius: 16px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.15));
  background: linear-gradient(180deg, rgba(110,133,255,.12), transparent);
}
@media (max-width: 860px) {
  .founder-media { margin-top: 1.5rem; }
  .founder-media img { max-width: 260px; }
}

/* Footer now has brand + 3 columns (Services / Company / Resources). */
.footer-grid { grid-template-columns: 1.8fr repeat(3, 1fr); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* Founder tag chips wrap cleanly with spacing */
.founder-split .card-tag, .flex.wrap .card-tag { margin-bottom: 0.4rem; }

/* Footer social row */
.footer-social a { font-size: 1.15rem; color: var(--text-dim); }
.footer-social a:hover { color: var(--text); }

/* --- RELIABILITY: never let scroll-reveal hide content. The IntersectionObserver
   leaves above-the-fold and tall elements stuck faded/shifted (grey hero, clipped
   cards, overlapping process steps, faded CTA). Force the final state so content
   is always visible and correctly positioned; the entrance motion is a non-
   essential enhancement. --- */
[data-reveal] { opacity: 1 !important; transform: none !important; }

/* Brand wordmark (logo is now plain text "CX Guru") */
.brand .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.brand { flex: none; }

/* Trim the dead space between the closing CTA and the footer.
   (Footer top padding + margin-top are set once in the newsletter block above.) */
main > .section:last-child { padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Card tag chips used on dynamic cards. Base chip styling + clean bottom spacing. */
.card-tag { display:inline-block; font-family: var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; padding:.2rem .5rem; border-radius:4px; border:1px solid var(--line); color: var(--text-mute); margin-bottom: 1.2rem; }
.card-tag.alt { color: var(--brand-bright, #9db0ff); border-color: var(--brand-line, rgba(110,133,255,.4)); }
/* Top breathing room ONLY when the tag is the card's first element (service /
   case-study cards). In resource cards the tags sit in a flex row, so they are
   not direct children and keep their own spacing  no double gap. */
.card > .card-tag:first-child { margin-top: 0.5rem; }

/* =========================================================================
   SITE CLEANUP  global design fixes (hero/page-head spacing, admin bar,
   dark FAQ, compact aside card). Applies to every page that uses these
   shared components.
   ========================================================================= */

/* 1. Interior page heads were starting ~halfway down the viewport. Reduce the
   top clearance to just below the fixed header (content-driven, not tall). */
.page-head {
  padding-top: calc(var(--header-h) + clamp(0.75rem, 2vw, 1.5rem));
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  min-height: 0;
}

/* 2. WordPress admin bar offset so the sticky header never hides under it. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* 3. FAQ  force the site's dark theme regardless of source (theme <details>,
   the design's .faq-q/.faq-a accordion, or a Bootstrap .accordion in imported
   content). Compact rows, subtle borders, right-aligned chevron. */
.faq-item,
details.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r, 14px);
  margin-bottom: 0.7rem;
  overflow: hidden;
}
details.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 1.2rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after { content: "+"; color: var(--text-mute); font-size: 1.15rem; line-height: 1; }
details.faq-item[open] summary::after { content: "\2212"; color: var(--brand-bright); }
details.faq-item .faq-answer { padding: 0 1.2rem 1.1rem; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; }
/* Bootstrap accordion in imported content → dark */
.entry-content .accordion,
.entry-content .accordion-item,
.entry-content .accordion-button,
.entry-content .accordion-body,
.entry-content .accordion-collapse {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
.entry-content .accordion-button:not(.collapsed) { color: var(--brand-bright) !important; box-shadow: none !important; }
.entry-content .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.5); }

/* 4. "Prefer to talk first?" aside  content-driven, not a tall empty panel. */
.cxg-aside { align-self: start; }
.cxg-aside .card { min-height: 0; }

/* 5. Spacing utilities used by templates (the theme lacked pt-0/pb-0). */
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }