/*
Theme Name: GirlfriendGPT Afterglow
Theme URI: https://girlfriendgpt.live
Author: GirlfriendGPT.live
Author URI: https://girlfriendgpt.live
Description: The "Afterglow" design for GirlfriendGPT.live — a teal/violet/coral gradient-mesh theme for the AI companion comparison site, built for the block editor. Includes selectable page templates for Homepage, About, Contact and Terms, an automatic Reviews custom post type, and editable CTA/newsletter block patterns.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: girlfriendgpt-afterglow
Tags: block-patterns, custom-colors, custom-menu, custom-logo, translation-ready
*/

/* ==========================================================================
   Concept 5 — "Afterglow"
   Vibrant gradient-mesh, bento-grid style. Teal / violet / coral on deep navy.
   ========================================================================== */

:root {
  --bg: #100f1f;
  --bg-alt: #171529;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-strong: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.14);
  --text: #f6f4ff;
  --text-muted: #b6b1d9;
  --teal: #2dd4bf;
  --violet: #8b5cf6;
  --coral: #fb7185;
  --radius-xl: 32px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --max-width: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
}

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; position: relative; }
.sr-only, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.screen-reader-text:focus { position: static; width: auto; height: auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 16px; color: var(--text); }
h1 { font-size: clamp(2.1rem, 4.2vw, 3rem); text-align: center; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 16px; color: var(--text-muted); }

a { color: inherit; }
.skip-link { position: absolute; left: 16px; top: -60px; background: var(--violet); color: #fff; padding: 10px 16px; border-radius: var(--radius-md); z-index: 200; transition: top .2s ease; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px; }

/* Header — floating capsule nav overlaying the hero */
.site-header { position: sticky; top: 14px; z-index: 100; }
/* Keep the sticky header clear of the WP admin toolbar for logged-in users. */
.admin-bar .site-header { top: calc(14px + 32px); }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: calc(14px + 46px); }
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 12px 10px 22px; margin-top: 10px;
  background: rgba(23, 21, 41, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 20px 50px -25px rgba(0,0,0,0.6);
}
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; }
.wordmark-logo-frame { display: inline-block; overflow: hidden; position: relative; top: 6px; width: 188px; height: 58px; vertical-align: middle; }
.wordmark-logo-frame .wordmark-logo { position: absolute; top: -57.5px; left: -30.2px; width: 258px; height: 172px; max-width: none; display: block; }
.wordmark-logo-frame-footer { width: 142px; height: 44px; }
.wordmark-logo-frame-footer .wordmark-logo { top: -43.6px; left: -22.9px; width: 195px; height: 130px; }

.main-nav ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.main-nav li { position: relative; }
.main-nav a { text-decoration: none; color: var(--text-muted); font-size: 0.88rem; font-weight: 500; }
.main-nav a:hover { color: var(--text); }
.main-nav .current-menu-item > a { color: var(--text); }
.main-nav li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.main-nav ul ul {
  display: none; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0;
  min-width: 220px; padding: 10px; margin-top: 12px; background: var(--bg-alt);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5); z-index: 50;
}
.main-nav li:hover > ul, .main-nav li:focus-within > ul { display: flex; }
.main-nav ul ul li { width: 100%; }
.main-nav ul ul a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); white-space: nowrap; }
.main-nav ul ul a:hover { background: var(--surface); }
.main-nav ul ul li.menu-item-has-children > a::after { transform: translateY(-2px) rotate(-45deg); float: right; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.search-toggle { background: none; border: 1px solid var(--border); color: var(--text); width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.search-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-toggle:hover { border-color: var(--teal); color: var(--teal); }
.search-form { margin-top: 8px; }
.search-form-inner { display: flex; gap: 10px; padding: 10px 14px; background: rgba(23,21,41,0.9); border: 1px solid var(--border); border-radius: 20px; backdrop-filter: blur(12px); }
.search-form input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 18px; color: var(--text); font-family: var(--font-body); font-size: 0.9rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 20px; height: 2px; background: var(--text); border-radius: 2px; display: block; }
.mobile-nav { display: none; }
.mobile-nav ul { list-style: none; margin: 8px 0 0; padding: 14px 22px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 20px; }
.mobile-nav a { color: var(--text); text-decoration: none; }
.mobile-nav ul ul { background: none; border: none; padding: 6px 0 0 18px; margin: 0; gap: 12px; border-radius: 0; }
.mobile-nav ul ul a { color: var(--text-muted); font-size: 0.94rem; }
.mobile-cta { margin: 10px 4px 0; }

/* Buttons — also mapped onto core/button so Button blocks in patterns match the design */
.btn, .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn-primary, .is-style-btn-primary .wp-block-button__link { background: linear-gradient(120deg, var(--teal), var(--violet)); color: #0f0e1a; box-shadow: 0 10px 26px -10px rgba(139,92,246,0.55); }
.btn-primary:hover, .is-style-btn-primary .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(251,113,133,0.45); }
.btn-glass, .is-style-btn-glass .wp-block-button__link { background: var(--surface); border-color: var(--border); color: var(--text); backdrop-filter: blur(8px); }
.btn-glass:hover, .is-style-btn-glass .wp-block-button__link:hover { background: var(--surface-strong); }
.btn-text, .is-style-btn-text .wp-block-button__link { background: none; padding: 6px 0; color: var(--teal); font-weight: 600; border: none; }
.btn-text:hover, .is-style-btn-text .wp-block-button__link:hover { color: var(--coral); }
.btn-lg { padding: 15px 28px; font-size: 1rem; }

/* Hero — full-width background image */
.hero { position: relative; height: 720px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: -78px; padding-top: 78px; }
.hero-bg { position: absolute; inset: 0; overflow: hidden; margin: 0; background: linear-gradient(160deg, #1c1a33, #241a2e 55%, #14121f); display: flex; align-items: center; justify-content: center; text-align: center; }
.placeholder-fill { display: block; width: 100%; height: auto; border-radius: inherit; }
.feature-image .placeholder-fill, .feature-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(45% 45% at 20% 25%, rgba(45,212,191,0.28), transparent 65%),
              radial-gradient(45% 45% at 82% 20%, rgba(139,92,246,0.28), transparent 65%),
              radial-gradient(50% 50% at 55% 90%, rgba(251,113,133,0.18), transparent 65%),
              linear-gradient(180deg, rgba(16,15,31,0.35) 0%, rgba(16,15,31,0.55) 55%, rgba(16,15,31,0.94) 100%);
}
.hero-inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.is-style-btn-hero-cta .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; padding: 20px 56px; border-radius: 999px; background: linear-gradient(120deg, var(--teal), var(--violet)); color: #0f0e1a; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.03em; text-decoration: none; box-shadow: 0 22px 55px -16px rgba(251,113,133,0.55); transition: transform .2s ease; }
.is-style-btn-hero-cta .wp-block-button__link:hover { transform: translateY(-3px) scale(1.02); }
.hero-note { margin: 18px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.hero-note-muted { opacity: 0.75; margin-top: 6px; font-size: 0.78rem; }
.visual-label { font-size: 0.78rem; color: var(--text-muted); text-align: center; padding: 0 12px; }

/* Intro */
.intro-section { padding: 88px 0 60px; text-align: center; }
.intro-inner { max-width: 720px; margin: 0 auto; }
.eyebrow { color: var(--teal); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.76rem; font-weight: 700; margin-bottom: 14px; }
.intro-actions { justify-content: center; margin: 26px 0 22px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.fine-print { font-size: 0.82rem; }
.trust-list { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; padding: 0; margin: 22px 0 0; font-size: 0.85rem; color: var(--text-muted); }
.trust-list li { position: relative; padding-left: 18px; }
.trust-list li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); }

/* Stats strip */
.stats-strip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 30px 24px; text-align: center; }
.stat-num { display: block; font-family: var(--font-display); font-size: 1.9rem; background: linear-gradient(120deg, var(--teal), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }

/* Sections */
.section { padding: 84px 0; position: relative; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 640px; margin-bottom: 40px; }
.section-cta { text-align: center; margin-top: 40px; }

/* Experience tile grid */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 20px; }
.feature-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.feature-image { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(150deg, #1c1a33, #241a2e); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; margin: 0 0 12px; font-size: 0.78rem; }
.feature-card h3 { font-size: 0.92rem; margin-bottom: 6px; }
.feature-card p { font-size: 0.82rem; margin-bottom: 0; }

.why-list { display: flex; flex-direction: column; gap: 16px; }
.why-row { display: flex; gap: 20px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); align-items: flex-start; }
.why-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-strong); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.why-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why-row h3 { font-size: 1.02rem; margin-bottom: 6px; }
.why-row p { margin-bottom: 0; font-size: 0.9rem; }

/* Featured platform panel */
.featured-section { overflow: hidden; }
.mesh-featured { position: absolute; inset: 0; background: radial-gradient(40% 50% at 85% 0%, rgba(139,92,246,0.18), transparent 70%), radial-gradient(40% 50% at 5% 100%, rgba(45,212,191,0.15), transparent 70%); z-index: 0; }
.featured-panel { position: relative; z-index: 1; display: grid; grid-template-columns: 0.85fr 1.15fr; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); }
.featured-image { background: linear-gradient(150deg, #1c1a33, #241a2e); display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; }
.featured-image .wp-block-image { margin: 0; width: 100%; }
.featured-image .wp-block-image img { display: block; width: 100%; height: auto; }
.featured-body { padding: 44px; }
.benefit-list { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 10px; }
.benefit-list li { position: relative; padding-left: 22px; font-size: 0.94rem; }
.benefit-list li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.limitation { font-size: 0.86rem; background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 16px; }
.affiliate-label { font-size: 0.74rem; color: var(--text-muted); opacity: 0.85; margin-top: 10px; margin-bottom: 0; }

.rec-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 22px; }
.faq-item summary { cursor: pointer; font-weight: 600; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--teal); font-size: 1.2rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin-top: 12px; margin-bottom: 0; }

/* Final CTA */
.final-cta { position: relative; padding: 90px 0; text-align: center; overflow: hidden; }
.mesh-alt { position: absolute; inset: -20% -10%; background: radial-gradient(40% 60% at 20% 30%, rgba(45,212,191,0.2), transparent 70%), radial-gradient(40% 60% at 80% 70%, rgba(139,92,246,0.2), transparent 70%); }
.final-cta-inner { max-width: 560px; margin: 0 auto; position: relative; }

/* Footer */
.site-footer { background: #0c0b18; border-top: 1px solid var(--border); padding-top: 56px; }
.footer-inner { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 40px; }
.footer-brand { max-width: 340px; }
.footer-brand p { font-size: 0.88rem; }
.footer-nav { display: flex; gap: 64px; }
.footer-nav h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-family: var(--font-body); }
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { text-decoration: none; color: var(--text-muted); font-size: 0.9rem; }
.footer-nav a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--border); padding: 20px 24px; }
.footer-bottom p { font-size: 0.78rem; margin: 0; }

/* Responsive */
@media (max-width: 960px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-panel { grid-template-columns: 1fr; }
  .featured-image { min-height: 180px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav[data-open="true"] { display: block; }
  .footer-inner { flex-direction: column; }
  .footer-nav { gap: 40px; }
  .hero { height: 600px; margin-top: -70px; padding-top: 70px; }
  .is-style-btn-hero-cta .wp-block-button__link { padding: 17px 44px; font-size: 1.15rem; }
  .feature-grid { grid-template-columns: 1fr; }

  /* The mobile slide-down menu already has its own full-width "Chat Now"
     button, so hide the header's inline copy here — keeping both was
     overflowing the header row on phones under ~400px wide. */
  .header-actions .btn-primary { display: none; }

  /* 44px is the generally-recommended minimum touch target size
     (WCAG 2.5.5 / Apple HIG); the desktop sizes below that are fine
     with a mouse cursor but too small to tap reliably. */
  .search-toggle { width: 44px; height: 44px; }
  .nav-toggle { padding: 12px; }
}

.choose-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.choose-steps { list-style: none; margin: 0; padding: 0; }
.choose-step { position: relative; display: flex; gap: 20px; padding: 22px; margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.choose-step-num { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(120deg, var(--teal), var(--violet)); color: #0f0e1a; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; }
.choose-step-body h3 { font-size: 1.05rem; margin-bottom: 12px; }
.choose-sublist { display: grid; gap: 12px; margin: 0; }
.choose-term { color: var(--text); font-weight: 700; font-size: 0.9rem; margin-bottom: 0; }
.choose-def { margin: 2px 0 0; font-size: 0.86rem; }
.choose-check-label { font-size: 0.82rem; color: var(--text); font-weight: 700; margin-bottom: 8px; }
.choose-checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.choose-checklist li { font-size: 0.86rem; position: relative; padding-left: 20px; }
.choose-checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.choose-image { overflow: hidden; max-width: 300px; margin: 0 0 0 auto; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(150deg, #1c1a33, #241a2e); position: sticky; top: 100px; }
.choose-image img { display: block; width: 100%; height: auto; }
.choose-closing { max-width: 720px; margin: 40px 0 0; font-size: 0.98rem; }

.types-list { display: flex; flex-direction: column; gap: 40px; }
.types-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.types-row-reverse .types-content { order: 2; }
.types-row-reverse .types-media { order: 1; }
.types-tag { display: inline-block; color: var(--teal); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; margin-bottom: 10px; }
.types-media { overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(150deg, #1c1a33, #241a2e); }
.types-media .wp-block-image { margin: 0; }
.types-media img { display: block; width: 100%; height: auto; }

.stage-grid { display: flex; align-items: stretch; gap: 0; margin-bottom: 40px; }
.stage { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.stage-num { display: inline-block; font-family: var(--font-display); font-size: 1.5rem; background: linear-gradient(120deg, var(--teal), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; }
.stage h3 { font-size: 1.02rem; }
.stage p { font-size: 0.88rem; margin-bottom: 0; }
.stage-connector { flex: 0 0 28px; align-self: center; height: 2px; background: linear-gradient(90deg, var(--teal), var(--violet)); }
.diagram-placeholder { overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(150deg, #1c1a33, #241a2e); margin: -5px 0 40px; }

.balance-box { margin: 24px 0 0; padding: 20px 24px; border-radius: var(--radius-lg); background: var(--surface-strong); border: 1px solid var(--border); font-size: 0.92rem; text-align: center; }

/* Reviews — populated automatically by the Query Loop block (see functions.php review CPT) */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card, .review-grid .wp-block-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s ease; list-style: none; }
.review-card:hover, .review-grid .wp-block-post:hover { transform: translateY(-5px); }
.review-card-link { display: flex; flex-direction: column; text-decoration: none; }
.review-image, .review-grid .wp-block-post-featured-image { height: 160px; margin: 0; background: linear-gradient(150deg, #1c1a33, #241a2e); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.review-image img, .review-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.review-cta, .review-grid .wp-block-post-title a { display: block; padding: 16px 20px; text-align: center; font-weight: 600; font-size: 0.92rem; color: var(--teal); text-decoration: none; }
.review-card:hover .review-cta, .review-grid .wp-block-post:hover .wp-block-post-title a { color: var(--coral); }

/* Homepage "Latest News" — compact cards, deliberately smaller than the /blog/ archive cards */
.home-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-blog-card, .home-blog-grid .wp-block-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease; list-style: none; }
.home-blog-card:hover, .home-blog-grid .wp-block-post:hover { transform: translateY(-5px); }
.home-blog-image, .home-blog-grid .wp-block-post-featured-image { height: 160px; margin: 0; background: linear-gradient(150deg, #1c1a33, #241a2e); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.home-blog-image img, .home-blog-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.home-blog-body { padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.home-blog-cat, .home-blog-grid .wp-block-post-terms { display: inline-block; font-size: 0.7rem; font-weight: 700; color: var(--teal); background: rgba(45,212,191,0.12); text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; padding: 4px 10px; margin: 14px 18px 0; }
.home-blog-cat a, .home-blog-grid .wp-block-post-terms a { color: inherit; text-decoration: none; }
.home-blog-title, .home-blog-grid .wp-block-post-title { margin: 0; padding: 4px 18px 16px; font-size: 0.95rem; line-height: 1.35; }
.home-blog-title a, .home-blog-grid .wp-block-post-title a { color: inherit; text-decoration: none; }
.home-blog-title a:hover, .home-blog-grid .wp-block-post-title a:hover { color: var(--teal); }

@media (max-width: 900px) {
  .home-blog-grid { grid-template-columns: 1fr; }
}

.framework-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.framework-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 22px; position: relative; }
.framework-col:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -16px; width: 16px; height: 2px; background: linear-gradient(90deg, var(--teal), var(--violet)); z-index: 1; }
.framework-num { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(120deg, var(--teal), var(--violet)); color: #0f0e1a; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; }
.framework-col h3 { font-size: 1rem; }
.framework-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.framework-col li { font-size: 0.82rem; color: var(--text-muted); }

.whatis-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.whatis-image { overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border); background: linear-gradient(150deg, #1c1a33, #241a2e); align-self: center; height: fit-content; }
.whatis-image .wp-block-image { margin: 0; }
.whatis-image img { display: block; width: 100%; height: auto; }

@media (max-width: 960px) {
  .choose-layout { grid-template-columns: 1fr; }
  .choose-image { position: static; min-height: 220px; }
  .types-row { grid-template-columns: 1fr; }
  .types-row-reverse .types-content, .types-row-reverse .types-media { order: initial; }
  .stage-grid { flex-direction: column; }
  .stage-connector { width: 2px; height: 24px; align-self: center; }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .framework-grid { grid-template-columns: repeat(2, 1fr); }
  .framework-col::after { display: none; }
  .whatis-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .choose-checklist { grid-template-columns: 1fr; }
  .types-row { padding: 22px; }
  .review-grid { grid-template-columns: 1fr; }
  .framework-grid { grid-template-columns: 1fr; }
  .footer-nav { flex-direction: column; gap: 32px; }
}

/* ==========================================================================
   Inner pages — Blog, Category, About, Contact, Terms, 404
   ========================================================================== */

.page-banner { padding: 68px 0 48px; text-align: center; border-bottom: 1px solid var(--border); background: radial-gradient(50% 100% at 50% 0%, rgba(139,92,246,0.12), transparent 70%); }
.page-banner .eyebrow { display: flex; justify-content: center; }
.page-banner h1 { margin-bottom: 14px; }
.page-banner .lede { max-width: 640px; margin: 0 auto; }

.breadcrumb { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; font-size: 0.82rem; color: var(--text-muted); }
.breadcrumb a { color: var(--teal); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li[aria-current] { color: var(--text-muted); }

.blog-layout { display: grid; grid-template-columns: 1fr 280px; gap: 40px; align-items: start; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-card, .blog-grid .wp-block-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease; list-style: none; }
.blog-card:hover, .blog-grid .wp-block-post:hover { transform: translateY(-5px); }
.blog-card-image, .blog-grid .wp-block-post-featured-image { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #1c1a33, #241a2e); margin: 0; }
.blog-card-image img, .blog-grid .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-cat { display: inline-block; align-self: flex-start; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); background: rgba(45,212,191,0.12); padding: 4px 10px; border-radius: 999px; }
.blog-card h3 { margin: 4px 0 0; font-size: 1.05rem; }
.blog-card p { font-size: 0.9rem; margin-bottom: 0; }
.blog-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: auto; padding-top: 10px; }
.blog-card-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.blog-card-featured .blog-card-image { aspect-ratio: auto; }
.blog-card-featured .blog-card-body { justify-content: center; }
.blog-card-featured h3 { font-size: 1.3rem; }

.blog-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 100px; }
.sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.sidebar-card h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 16px; }
.sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sidebar-list a { display: flex; justify-content: space-between; gap: 8px; color: var(--text); text-decoration: none; font-size: 0.9rem; }
.sidebar-list a:hover { color: var(--teal); }
.sidebar-list .count { color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sidebar-card p { font-size: 0.88rem; margin-bottom: 14px; }

.pagination, .wp-block-query-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span,
.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); text-decoration: none; font-size: 0.88rem; }
.pagination a:hover, .page-numbers:hover { border-color: var(--teal); color: var(--text); }
.pagination .current, .page-numbers.current { background: linear-gradient(120deg, var(--teal), var(--violet)); color: #0f0e1a; border-color: transparent; font-weight: 700; }

.article-wrap { max-width: 760px; margin: 0 auto; }
.article-meta { display: flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 32px; }
.article-meta .author { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.author-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(120deg, var(--teal), var(--violet)); flex-shrink: 0; }
.article-featured-image { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border); margin-bottom: 40px; aspect-ratio: 16 / 9; background: linear-gradient(150deg, #1c1a33, #241a2e); }
.article-featured-image img { width: 100%; height: 100%; object-fit: cover; }
.article-body h2 { margin-top: 44px; font-size: 1.5rem; }
.article-body h3 { margin-top: 28px; }
.article-body p, .article-body li { color: var(--text); font-size: 1.02rem; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 16px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote { margin: 32px 0; padding: 22px 26px; border-left: 3px solid var(--teal); background: var(--surface); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.article-body blockquote p { margin: 0; font-style: italic; font-size: 1.1rem; color: var(--text); }
.article-disclosure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; font-size: 0.85rem; margin: 32px 0; }
.article-disclosure p { margin: 0; color: var(--text-muted); }
.article-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0; }
.article-tags a { font-size: 0.78rem; color: var(--text-muted); border: 1px solid var(--border); padding: 5px 12px; border-radius: 999px; text-decoration: none; }
.article-tags a:hover { color: var(--teal); border-color: var(--teal); }
.author-box { display: flex; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin: 40px 0; align-items: flex-start; }
.author-box .author-avatar { width: 56px; height: 56px; }
.author-box h3 { margin-bottom: 6px; font-size: 1rem; }
.author-box p { margin-bottom: 0; font-size: 0.9rem; }
.related-heading { text-align: center; margin: 56px 0 24px; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.category-desc { max-width: 720px; margin: 0 auto 8px; text-align: center; }

.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.about-grid .choose-checklist { grid-template-columns: 1fr; }
.about-grid h3 { display: flex; align-items: center; gap: 10px; }
.about-grid h3 .about-mark { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
.about-mark.yes { background: rgba(45,212,191,0.16); color: var(--teal); }
.about-mark.no { background: rgba(251,113,133,0.16); color: var(--coral); }

.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.form-field input, .form-field select, .form-field textarea { background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--teal); outline-offset: 2px; border-color: var(--teal); }
.form-field textarea { resize: vertical; min-height: 140px; }
.form-note { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.contact-info-list { display: flex; flex-direction: column; gap: 20px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.contact-info-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-strong); color: var(--teal); display: flex; align-items: center; justify-content: center; }
.contact-info-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact-info-item h3 { font-size: 1rem; margin-bottom: 4px; }
.contact-info-item p { margin-bottom: 0; font-size: 0.9rem; }

/* WPForms — matched to the theme's own contact-form design above.
   WPForms' "Modern Markup" scopes its own styles to #wpforms-{id}, an ID
   selector that beats plain classes regardless of load order, so these
   overrides use !important — the accepted approach when a plugin's own
   CSS is specifically designed to always win by default. */
.wpforms-container { margin: 0 !important; }
.wpforms-container .wpforms-form { display: flex !important; flex-direction: column !important; gap: 16px !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 28px !important; }
.wpforms-container .wpforms-field { padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.wpforms-container .wpforms-field-label,
.wpforms-container legend.wpforms-field-label { font-size: 0.85rem !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 !important; padding: 0 !important; }
.wpforms-container .wpforms-field-sublabel { font-size: 0.78rem !important; color: var(--text-muted) !important; }
.wpforms-container .wpforms-required-label { color: var(--coral) !important; }
/* Force First/Last side-by-side: WPForms uses container queries to decide
   this based on the form's own rendered width, and stacks them when that's
   narrow — which it is here, since the form only takes half the page in
   our two-column contact layout. This overrides that regardless of width. */
.wpforms-container .wpforms-field-row { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; }
.wpforms-container .wpforms-field-row-block { width: 50% !important; flex: 1 1 50% !important; }
.wpforms-container .wpforms-field input[type="text"],
.wpforms-container .wpforms-field input[type="email"],
.wpforms-container .wpforms-field input[type="tel"],
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea { width: 100% !important; background: var(--bg-alt) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important; padding: 12px 14px !important; color: var(--text) !important; font-family: var(--font-body) !important; font-size: 0.95rem !important; height: auto !important; }
.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field select:focus,
.wpforms-container .wpforms-field textarea:focus { outline: 2px solid var(--teal) !important; outline-offset: 2px !important; border-color: var(--teal) !important; }
.wpforms-container .wpforms-field textarea { resize: vertical !important; min-height: 140px !important; }
.wpforms-container .wpforms-submit-container { margin: 0 !important; }
.wpforms-container .wpforms-submit { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 15px 28px !important; height: auto !important; border-radius: 999px !important; border: none !important; cursor: pointer !important; font-weight: 600 !important; font-size: 1rem !important; background: linear-gradient(120deg, var(--teal), var(--violet)) !important; color: #0f0e1a !important; box-shadow: 0 10px 26px -10px rgba(139,92,246,0.55) !important; transition: transform .18s ease, box-shadow .18s ease; }
.wpforms-container .wpforms-submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(251,113,133,0.45) !important; }

@media (max-width: 480px) {
  .wpforms-container .wpforms-field-row { flex-wrap: wrap !important; }
  .wpforms-container .wpforms-field-row-block { width: 100% !important; flex: 1 1 100% !important; }
}

.legal-content { max-width: 760px; margin: 0 auto; }
.legal-updated { text-align: center; font-size: 0.85rem; margin-bottom: 40px; }
.legal-content h2 { margin-top: 40px; font-size: 1.35rem; }
.legal-content p, .legal-content li { color: var(--text); }
.legal-content ul { padding-left: 22px; margin-bottom: 16px; }
.legal-content li { margin-bottom: 8px; }
.legal-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 40px; }
.legal-toc h2 { margin-top: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.legal-toc ol { margin: 0; padding-left: 20px; color: var(--text); }
.legal-toc li { margin-bottom: 6px; }
.legal-toc a { color: var(--teal); text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }

/* 404 */
.error-page { padding: 90px 0 120px; text-align: center; }
.error-code { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 7rem); font-weight: 800; background: linear-gradient(120deg, var(--teal), var(--violet), var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: 10px; }
.error-page p { max-width: 480px; margin: 0 auto 32px; }
.error-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 40px 0 48px; }
.error-search { max-width: 420px; margin: 0 auto; display: flex; gap: 8px; }
.error-search input { flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 12px 18px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; }
.error-search input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Newsletter pattern */
.newsletter-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 48px; text-align: center; }
.newsletter-form { display: flex; gap: 10px; max-width: 440px; margin: 20px auto 0; flex-wrap: wrap; justify-content: center; }
.newsletter-form input[type="email"] { flex: 1; min-width: 220px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: 12px 18px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; }
.newsletter-form input[type="email"]:focus { outline: 2px solid var(--teal); outline-offset: 2px; }

/* WordPress core block alignment helpers */
.alignwide { max-width: var(--max-width); margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }
.aligncenter { margin-left: auto; margin-right: auto; }

@media (max-width: 960px) {
  .blog-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-card-featured { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-layout { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .article-meta { flex-direction: column; gap: 8px; }
  .author-box { flex-direction: column; }
  .newsletter-box { padding: 32px 24px; }
}