/* ============================================================
   CITANT.AI — components.css v1.1
   All reusable UI components. Source: file 10 Component Library.
   Depends on: reset.css, tokens.css, base.css, layout.css
   Load order: reset → tokens → base → layout → THIS FILE
   ============================================================ */

/*
 * BREAKPOINTS (reference — media queries use min-width mobile-first):
 *   640px  — large phones and small tablets
 *   900px  — tablets and small laptops
 *  1100px  — standard desktops
 */

/* ============================================================
   COMPONENT: NAVIGATION
   .nav / .nav__logo / .nav__menu / .nav__link / .nav-toggle
   ============================================================ */

.nav {
  position:              sticky;
  top:                   0;
  z-index:               var(--z-sticky);
  width:                 100%;
  height:                var(--nav-height);
  display:               flex;
  align-items:           center;
  background:            rgba(248,249,253,0.85);
  backdrop-filter:       blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:         1px solid var(--color-border-light);
  will-change:           background-color;
}

.nav .container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
}

.nav__logo {
  font-family:    var(--font-display);
  font-size:      var(--text-3xl);
  font-weight:    var(--weight-bold);
  color:          var(--color-text);
  text-decoration: none;
  letter-spacing: var(--tracking-tight);
}

.nav__menu {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  list-style:  none;
}

.nav__link {
  font-size:       var(--text-lg);
  font-weight:     var(--weight-medium);
  color:           var(--color-text-secondary);
  text-decoration: none;
  padding:         var(--space-2) var(--space-3);
  border-radius:   var(--radius-sm);
  transition:      color var(--transition-fast),
                   background var(--transition-fast);
}

.nav__link:hover {
  color:      var(--color-text);
  background: var(--color-bg-muted);
}

/* Active page indicator (set via aria-current="page" or .nav__link--active) */
.nav__link[aria-current="page"],
.nav__link--active {
  color:       var(--color-primary);
  font-weight: var(--weight-semibold);
  background:  var(--color-primary-light);
}

/* Active page underline (color is not the ONLY indicator — accessible) */
.nav__link[aria-current="page"]::after {
  content:       '';
  display:       block;
  height:        2px;
  background:    var(--color-primary);
  border-radius: 1px;
  margin-top:    3px;
}

/* Mobile: hamburger toggle (shown only on mobile via media query) */
.nav-toggle {
  display:    none;
  background: none;
  border:     none;
  padding:    var(--space-2);
  cursor:     pointer;
  color:      var(--color-text);
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; align-items: center; }

  .nav__menu {
    position:   absolute;
    top:        var(--nav-height);
    left:       0;
    right:      0;
    background: var(--color-bg-white);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    align-items:    flex-start;
    padding:        var(--space-4);
    gap:            var(--space-1);
    display:        none;  /* JS toggles to flex when open */
  }

  .nav__menu.is-open { display: flex; }

  .nav__link { width: 100%; padding: var(--space-3) var(--space-4); }
}

/* ============================================================
   COMPONENT: SECTION HEADER (label + heading + subheading)
   ============================================================ */

.label-section {
  display:        inline-block;
  font-family:    var(--font-body);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-primary);
  background:     var(--color-primary-light);
  padding:        var(--space-2) var(--space-4);
  border-radius:  var(--radius-full);
  margin-bottom:  var(--space-4);
}

.section-header { margin-bottom: var(--space-12); }
.section-header--center { text-align: center; }
.section-header--center .section-header__sub { margin-inline: auto; }

.section-header--white .section-header__heading { color: var(--color-text-white); }
.section-header--white .section-header__sub     { color: var(--color-text-white-muted); }
.section-header--white .label-section {
  background: rgba(255,255,255,0.12);
  color:      rgba(255,255,255,0.85);
}

.section-header__heading {
  font-size:      var(--text-h2);
  font-weight:    var(--weight-extrabold);
  color:          var(--color-text);
  line-height:    var(--leading-snug);
  max-width:      20ch;
  margin-bottom:  var(--space-5);
  letter-spacing: var(--tracking-tight);
}

.section-header__sub {
  font-size:   var(--text-2xl);
  color:       var(--color-text-secondary);
  max-width:   54ch;
  line-height: var(--leading-relaxed);
}

/* ============================================================
   COMPONENT: BUTTONS (5 variants + 2 size modifiers)
   Source: file 10 Component 3
   ============================================================ */

/* Base button */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  font-family:     var(--font-body);
  font-weight:     var(--weight-semibold);
  font-size:       var(--text-lg);
  padding:         var(--space-3) var(--space-6);
  border-radius:   var(--radius-full);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:      all var(--transition-normal);
  line-height:     1;
}

.btn:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Size modifiers */
.btn--lg {
  font-size: var(--text-xl);
  padding:   var(--space-4) var(--space-8);
}

.btn--sm {
  font-size: var(--text-md);
  padding:   var(--space-2) var(--space-4);
}

/* Variant 1: Primary (gradient) */
.btn--primary {
  background: var(--gradient-main);
  color:      var(--color-text-white);
  box-shadow: 0 4px 20px rgba(26,79,219,0.35);
  will-change: transform;
}
.btn--primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 8px 28px rgba(26,79,219,0.45);
  color:      var(--color-text-white);
}
.btn--primary:focus-visible {
  outline:        2px solid rgba(255,255,255,0.9);
  outline-offset: 3px;
}
.btn--primary:active {
  transform:  translateY(1px);
  box-shadow: 0 2px 8px rgba(26,79,219,0.3);
}
.btn--primary:visited { color: var(--color-text-white); }

/* Variant 2: Secondary (solid primary) */
.btn--secondary {
  background: var(--color-primary);
  color:      var(--color-text-white);
}
.btn--secondary:hover {
  background: var(--color-primary-dark);
  color:      var(--color-text-white);
}

/* Variant 3: Outline */
.btn--outline {
  background: transparent;
  border:     1.5px solid var(--color-border-strong);
  color:      var(--color-text);
}
.btn--outline:hover {
  border-color: var(--color-primary);
  color:        var(--color-primary);
}

/* Variant 4: Ghost White (dark backgrounds only) */
.btn--ghost-white {
  background: rgba(255,255,255,0.12);
  border:     1px solid rgba(255,255,255,0.25);
  color:      var(--color-text-white);
}
.btn--ghost-white:hover { background: rgba(255,255,255,0.20); }

/* Variant 5: Text link (lowest priority, no background) */
.btn--text {
  background:  transparent;
  color:       var(--color-primary);
  padding:     0;
  font-weight: var(--weight-medium);
}
.btn--text:hover { text-decoration: underline; }

/* ============================================================
   COMPONENT: SERVICE CARD
   Source: file 10 Component 4
   GPU-safe shadow pattern: file 01 §8.3
   ============================================================ */

.service-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  box-shadow:    var(--shadow-card);
  position:      relative;
  overflow:      hidden;
  transition:    transform var(--transition-normal);
  display:       flex;
  flex-direction: column;

  /* GPU layer pre-allocation for smooth hover */
  transform:          translateZ(0);
  backface-visibility: hidden;
}

/* Gradient top accent */
.service-card::before {
  content:    '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     3px;
  background: var(--gradient-main);
}

/* Pre-render hover shadow as pseudo-element (GPU-safe pattern) */
.service-card::after {
  content:       '';
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  box-shadow:    var(--shadow-hover);
  opacity:       0;
  transition:    opacity var(--transition-normal);
}

.service-card:hover { transform: translateY(-4px); }
.service-card:hover::after { opacity: 1; }

@media (max-width: 640px) {
  .service-card { padding: var(--space-6); }
}

.service-card__num {
  font-family:   var(--font-display);
  font-size:     var(--text-h2);
  font-weight:   var(--weight-extrabold);
  color:         var(--color-border);
  line-height:   1;
  margin-bottom: var(--space-4);
}

.service-card__icon {
  width:           48px;
  height:          48px;
  background:      var(--color-primary-light);
  border-radius:   var(--radius-md);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-bottom:   var(--space-6);
  color:           var(--color-primary);
}

.service-card__title {
  font-size:     var(--text-h3);
  font-weight:   var(--weight-bold);
  color:         var(--color-text);
  margin-bottom: var(--space-4);
}

.service-card__body {
  font-size:     var(--text-lg);
  color:         var(--color-text-secondary);
  line-height:   var(--leading-relaxed);
  margin-bottom: var(--space-6);
  flex-grow:     1;
}

.service-card__link { margin-top: auto; align-self: flex-start; }

/* ============================================================
   COMPONENT: TESTIMONIAL CARD
   Source: file 10 Component 5
   ============================================================ */

.testi {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  box-shadow:    var(--shadow-card);
  position:      relative;
  transition:    transform var(--transition-normal);
  transform:     translateZ(0);
}

.testi::after {
  content:       '';
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  box-shadow:    var(--shadow-hover);
  opacity:       0;
  transition:    opacity var(--transition-normal);
}
.testi:hover         { transform: translateY(-3px); }
.testi:hover::after  { opacity: 1; }

.testi__stars {
  color:         var(--color-warning);
  font-size:     var(--text-3xl);
  letter-spacing: 2px;
  margin-bottom: var(--space-4);
}

.testi__text {
  font-size:     var(--text-xl);
  color:         var(--color-text);
  line-height:   var(--leading-relaxed);
  margin-bottom: var(--space-6);
  font-style:    normal;
}

.testi__author {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.testi__avatar {
  width:         48px;
  height:        48px;
  border-radius: var(--radius-full);
  object-fit:    cover;
  flex-shrink:   0;
}

.testi__name {
  display:     block;
  font-style:  normal;
  font-weight: var(--weight-semibold);
  color:       var(--color-text);
  font-size:   var(--text-lg);
}

.testi__role {
  display:   block;
  font-size: var(--text-md);
  color:     var(--color-text-muted);
}

.testi__result-pill {
  margin-left:    auto;
  background:     var(--color-success-bg);
  color:          var(--color-success);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-semibold);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-full);
  white-space:    nowrap;
  flex-shrink:    0;
}

/* ============================================================
   COMPONENT: FAQ ACCORDION
   Source: file 10 Component 6
   ============================================================ */

.faq { display: flex; flex-direction: column; gap: var(--space-3); }

.faq__item {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:    var(--color-bg-card);
  overflow:      hidden;
}

.faq__item[open] { border-color: var(--color-border-primary); }

.faq__question {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         var(--space-6);
  cursor:          pointer;
  font-weight:     var(--weight-semibold);
  font-size:       var(--text-xl);
  color:           var(--color-text);
  list-style:      none;
  gap:             var(--space-4);
}

/* Remove default <details> marker in Chrome */
.faq__question::-webkit-details-marker { display: none; }
/* Remove in Firefox/others */
.faq__question::marker { display: none; }

.faq__icon {
  font-size:    var(--text-3xl);
  color:        var(--color-primary);
  transition:   transform var(--transition-fast);
  flex-shrink:  0;
  font-weight:  var(--weight-regular);
  line-height:  1;
}

.faq__item[open] .faq__icon { transform: rotate(45deg); }

.faq__answer {
  padding:   0 var(--space-6) var(--space-6);
  animation: faq-open 250ms ease;
}

.faq__answer p {
  color:       var(--color-text-secondary);
  font-size:   var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width:   none;
}

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   COMPONENT: STAT ITEM
   Source: file 10 Component 7
   ============================================================ */

.stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:                   var(--space-8);
}

.stat-item { text-align: center; }

.stat-item__num {
  display:                  block;
  font-family:              var(--font-display);
  font-size:                var(--text-h1);
  font-weight:              var(--weight-extrabold);
  background:               var(--gradient-text);
  -webkit-background-clip:  text;
  -webkit-text-fill-color:  transparent;
  background-clip:          text;
  line-height:              1;
  margin-bottom:            var(--space-2);
}

.stat-item__label {
  display:       block;
  font-size:     var(--text-lg);
  font-weight:   var(--weight-semibold);
  color:         var(--color-text);
  margin-bottom: var(--space-1);
}

.stat-item__context {
  display:   block;
  font-size: var(--text-md);
  color:     var(--color-text-muted);
}

/* ============================================================
   COMPONENT: PROCESS STEPS
   Source: file 10 Component 8
   ============================================================ */

.process-steps {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-8);
  list-style:     none;
}

.process-step {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-6);
}

.process-step__num {
  font-family:  var(--font-display);
  font-size:    var(--text-h2);
  font-weight:  var(--weight-extrabold);
  color:        var(--color-primary-light);
  line-height:  1;
  flex-shrink:  0;
  width:        60px;
  text-align:   right;

  /* Gradient text on step numbers */
  background:              var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip:         text;
}

.process-step__title {
  font-size:     var(--text-h3);
  font-weight:   var(--weight-bold);
  color:         var(--color-text);
  margin-bottom: var(--space-2);
}

.process-step__desc {
  font-size:   var(--text-lg);
  color:       var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width:   none;
}

/* ============================================================
   COMPONENT: CTA BANNER
   ============================================================ */

.cta-banner {
  background:    var(--gradient-main);
  border-radius: var(--radius-xl);
  padding:       var(--space-16) var(--space-12);
  text-align:    center;
  position:      relative;
  overflow:      hidden;
}

.cta-banner__heading {
  font-size:     var(--text-h2);
  font-weight:   var(--weight-extrabold);
  color:         var(--color-text-white);
  margin-bottom: var(--space-5);
  max-width:     none;
}

.cta-banner__sub {
  font-size:     var(--text-2xl);
  color:         var(--color-text-white-muted);
  max-width:     52ch;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  line-height:   var(--leading-relaxed);
}

.cta-banner__actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  flex-wrap:       wrap;
}

@media (max-width: 640px) {
  .cta-banner {
    padding:       var(--space-10) var(--space-6);
    border-radius: var(--radius-lg);
  }
  .cta-banner__actions { flex-direction: column; }
}

/* ============================================================
   COMPONENT: SITE FOOTER
   ============================================================ */

.site-footer {
  background:   var(--color-bg-dark);
  color:        var(--color-text-white-muted);
  padding:      var(--space-16) 0 var(--space-8);
  font-size:    var(--text-md);
}

.site-footer__logo {
  font-family:  var(--font-display);
  font-size:    var(--text-3xl);
  font-weight:  var(--weight-bold);
  color:        var(--color-text-white);
}

.site-footer a {
  color:      var(--color-text-white-muted);
  transition: color var(--transition-fast);
}
.site-footer a:hover { color: var(--color-text-white); }

.site-footer__bottom {
  border-top:  1px solid rgba(255,255,255,0.08);
  margin-top:  var(--space-12);
  padding-top: var(--space-6);
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  flex-wrap:   wrap;
}
/* ============================================================
   BREADCRUMB  (register in file 10 as a new component)
   ============================================================ */
.breadcrumb { padding-block: var(--space-8) 0; }
.breadcrumb__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  list-style: none; font-size: var(--text-md);
}
.breadcrumb__list li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb__list li + li::before { content: '/'; color: var(--color-text-muted); }
.breadcrumb__list a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumb__list a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb__current { color: var(--color-text); font-weight: var(--weight-medium); }

/* ============================================================
   FOUNDER HERO  (register in file 10 as a new component)
   ============================================================ */
.founder-hero { position: relative; overflow: hidden; }
.founder-hero::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gradient-hero-bg); z-index: var(--z-below);
}
.founder-hero__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-10);
  align-items: center;
}
.founder-hero__eyebrow { margin-bottom: var(--space-5); }
.founder-hero__title { margin-bottom: var(--space-6); max-width: 18ch; }
.founder-hero__intro {
  font-size: var(--text-2xl);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 60ch;
  margin-bottom: var(--space-8);
}
.founder-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.founder-hero__trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-3) var(--space-5);
  font-size: var(--text-md); color: var(--color-text-muted);
}
.founder-hero__trust-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.founder-hero__trust-item svg { color: var(--color-success); flex-shrink: 0; }

.founder-hero__media {
  justify-self: center; width: 100%;
  max-width: 420px;            /* intentional layout cap for the headshot column */
}
.founder-hero__figure { position: relative; margin: 0; }
.founder-hero__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;   /* matches 480x600 so CLS stays 0 */
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  background: var(--color-primary-light);
}
.founder-hero__badge {
  position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3);
}
.founder-hero__badge-icon {
  width: var(--space-9); height: var(--space-9);   /* 36px, token instead of magic number */
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--gradient-main); color: var(--color-text-white);
  display: flex; align-items: center; justify-content: center;
}
.founder-hero__badge-text {
  font-size: var(--text-md); font-weight: var(--weight-semibold);
  color: var(--color-text); line-height: var(--leading-snug);
}

@media (min-width: 900px) {
  .founder-hero__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-16);
  }
  .founder-hero__media { justify-self: end; max-width: 100%; }
}
/* ============================================================
   BUTTON HARDENING
   Wins over GeneratePress content link colour (.entry-content a),
   which otherwise repaints button text in the link colour.
   Scoping under .citant-block lifts specificity, no !important.
   ============================================================ */
.citant-block .btn { text-decoration: none; }

.citant-block .btn--primary,
.citant-block .btn--primary:visited {
  background: var(--gradient-main);
  color:      var(--color-text-white);
}

.citant-block .btn--secondary,
.citant-block .btn--secondary:visited {
  background: var(--color-primary);
  color:      var(--color-text-white);
}

.citant-block .btn--ghost-white,
.citant-block .btn--ghost-white:visited { color: var(--color-text-white); }

.citant-block .btn--text,
.citant-block .btn--text:visited { color: var(--color-primary); }