/* ============================================================
   KODENZO SHARED SUBPAGE COMPONENTS
   Components needed by more than one standalone subpage template
   (page-{slug}.php / archive-{cpt}.php), so they get written once here
   instead of copy-pasted per page. First extracted 2026-07-28 from
   services.css when the Products Landing Page needed the exact same
   FAQ accordion — a third copy would have been the signal to stop
   duplicating. Enqueue this file wherever the component is used;
   don't paste its rules into a page-specific stylesheet again.

   Currently contains: the FAQ accordion (search input, expand/collapse
   list, ported originally from product-platform.css), the labeled
   dt/dd "case fields" list (Industry/Challenge/Solution/Outcome on
   Services' Featured Work cards; Stage/Sprint/Milestone/Release on
   the Products page's Featured Product spotlight), the breadcrumb +
   hero trust row (both originally built for Services, then found
   missing — i.e. rendering unstyled — on the Products page's hero once
   a real cross-page class-usage audit was run during the Case Studies
   build), and chip grids (Industries/Highlights on Services, Related
   Services/Products on Case Studies). Also the quick-comparison row
   list, the technology icon/badge grid, and the ecosystem product-card
   grid (all three originally built for Services, moved here 2026-07-28
   once the About page needed the identical components — same "a
   second page needs it" signal as everything else in this file). Add
   future cross-page components here, not to a single page's own CSS
   file.
   ============================================================ */

/* ---------- Breadcrumb ----------
   Lives INSIDE .kodenzo-hero__content (not above the hero) on purpose:
   .kodenzo-header is position:fixed and transparent until scrolled,
   expecting a dark hero background directly behind it (see style.css).
   Placing the breadcrumb above the hero put a plain white strip behind
   the fixed header instead, washing out the light-colored nav text and
   visually colliding with the logo. Styled for the dark hero it now
   sits inside. */
.kodenzo-breadcrumb {
  font-size: 12.5px; color: rgba(255,255,255,.55); margin-bottom: 20px;
}
.kodenzo-breadcrumb a { color: rgba(255,255,255,.55); }
.kodenzo-breadcrumb a:hover { color: #fff; }
.kodenzo-breadcrumb span[aria-current] { color: #fff; font-weight: 600; }

/* ---------- Hero trust row ----------
   Sized up slightly (2026-07-28, About page round 3) per Lata's
   "badges look a little small relative to the hero" feedback — this
   is the same shared component every subpage hero uses, so the bump
   in prominence applies consistently site-wide rather than just here. */
.kodenzo-hero-trust {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px;
}
.kodenzo-hero-trust__item {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: #E5E9EF;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 11px 20px;
}
.kodenzo-hero-trust__item svg { color: var(--kz-coral); flex-shrink: 0; width: 15px; height: 15px; }

/* ---------- Chip grids ---------- */
.kodenzo-chip-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.kodenzo-chip {
  font-size: 13.5px; font-weight: 600; color: var(--kz-navy); background: #fff; border: 1.5px solid var(--kz-border);
  border-radius: 999px; padding: 10px 20px; transition: border-color .2s ease, color .2s ease;
}
.kodenzo-chip:hover { border-color: var(--kz-blue); color: var(--kz-blue); }
.is-dark .kodenzo-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }
.is-dark .kodenzo-chip:hover { border-color: var(--kz-coral); color: var(--kz-coral); }

/* ---------- Labeled field list (dt/dd rows inside a card) ---------- */
.kodenzo-case-fields { margin: 4px 0 16px; }
.kodenzo-case-field { margin-bottom: 10px; }
.kodenzo-case-field dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #7EB6FF; margin-bottom: 2px; }
/* Body value: #8892A4 (--kz-hint) → #C7D0DA (round 4) → #ffffffc9
   (round 5, 2026-08-26 — Lata's exact CSS). Same reasoning as round 4:
   this is the actual answer to each field (Industry/Challenge/
   Solution/Outcome), so it needs to read as primary content, not a
   caption. */
.kodenzo-case-field dd { font-size: 13px; color: #ffffffc9; line-height: 1.5; }
/* Default (above) is tuned for a dark section — matches Services'
   dark Featured Work cards and the Products page's dark Featured
   Product spotlight. Only override to navy/muted if this component is
   ever placed on a light background. */
.is-light .kodenzo-case-field dt { color: var(--kz-blue); }
.is-light .kodenzo-case-field dd { color: var(--kz-muted); }

.kodenzo-faq__search {
  display: block; width: 100%; max-width: 480px; margin: 0 auto 40px; padding: 14px 20px; border-radius: 999px;
  border: 1.5px solid var(--kz-border); font-size: 14px; font-family: var(--kz-font-body); color: var(--kz-navy);
}
.kodenzo-faq__search:focus-visible { outline: 3px solid rgba(11,71,124,.25); border-color: var(--kz-blue); }
.kodenzo-faq__list { max-width: 760px; margin: 0 auto; }
.kodenzo-faq__item { border-bottom: 1px solid var(--kz-border); }
.kodenzo-faq__question {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px;
  background: none; border: none; text-align: left; font-family: var(--kz-font-body); font-size: 15.5px;
  font-weight: 600; color: var(--kz-navy); cursor: pointer;
}
/* The accordion toggle button itself had no explicit focus style —
   used on every FAQ section sitewide (Services, Products, Case
   Studies, Contact, Resources, every Service pillar page), so this is
   the single highest-reach focus-state fix available (SEO audit
   Finding 6.2). */
.kodenzo-faq__question:focus-visible { outline: 3px solid var(--kz-blue); outline-offset: -2px; }
.kodenzo-faq__chevron { transition: transform .2s ease; color: var(--kz-hint); flex-shrink: 0; margin-left: 16px; }
.kodenzo-faq__item.is-open .kodenzo-faq__chevron { transform: rotate(180deg); }
.kodenzo-faq__answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.kodenzo-faq__item.is-open .kodenzo-faq__answer { max-height: 240px; }
.kodenzo-faq__answer-inner { padding: 0 4px 20px; font-size: 14px; color: var(--kz-muted); }
.kodenzo-faq__empty { text-align: center; color: var(--kz-muted); padding: 40px; display: none; }
.kodenzo-faq__empty.is-visible { display: block; }

/* ---------- Quick comparison row list (Typical Freelancer vs KODENZO
   on Services; Traditional Development vs KODENZO on About). KODENZO
   column redesigned 2026-08-26 per dev feedback — was plain right-
   aligned text, now individual pill-style cards (light coral fill,
   coral left-border accent, bold dark text) so the KODENZO answer
   reads as a distinct, elevated callout instead of the same plain
   text as the "before" column. Same shared component on both pages —
   one redesign covers both. ---------- */
.kodenzo-vs-list { max-width: 640px; margin: 0 auto; }
.kodenzo-vs-list__head {
  display: grid; grid-template-columns: 1fr 20px 1fr; gap: 16px; margin-bottom: 12px; padding: 0 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--kz-hint);
}
.kodenzo-vs-list__head span:last-child { color: var(--kz-coral-text); text-align: left; padding-left: 16px; }
.kodenzo-vs-row {
  display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center; gap: 16px;
  padding: 10px 4px; border-bottom: 1px solid var(--kz-border);
}
.kodenzo-vs-row__before { font-size: 15px; color: var(--kz-muted); }
.kodenzo-vs-row__arrow { color: var(--kz-coral); justify-self: center; }
.kodenzo-vs-row__after {
  font-size: 14.5px; font-weight: 700; color: var(--kz-navy); text-align: left; line-height: 1.35;
  background: rgba(255,107,90,.08); border-left: 3px solid var(--kz-coral); border-radius: 8px;
  padding: 12px 16px;
}
@media (max-width: 560px) {
  .kodenzo-vs-list__head, .kodenzo-vs-row { grid-template-columns: 1fr; gap: 8px; text-align: left; }
  .kodenzo-vs-list__head span:last-child, .kodenzo-vs-row__after { text-align: left; }
  .kodenzo-vs-row__arrow { display: none; }
}

/* ---------- Technology stack — icon/badge grid ---------- */
.kodenzo-tech-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; max-width: 880px; margin: 0 auto;
}
.kodenzo-tech-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 12px;
  border: 1.5px solid var(--kz-border); border-radius: 14px; transition: border-color .2s ease, transform .2s ease;
}
.kodenzo-tech-card:hover { border-color: var(--kz-blue); transform: translateY(-3px); }
.kodenzo-tech-card__badge {
  width: 44px; height: 44px; border-radius: 12px; background: var(--kz-light); color: var(--kz-blue);
  display: flex; align-items: center; justify-content: center; font-family: var(--kz-font-head);
  font-size: 13px; font-weight: 400; letter-spacing: .2px;
}
.kodenzo-tech-card:hover .kodenzo-tech-card__badge { background: var(--kz-blue); color: #fff; }
.kodenzo-tech-card__label { font-size: 12px; font-weight: 600; color: var(--kz-muted); text-align: center; }
@media (max-width: 960px) { .kodenzo-tech-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { .kodenzo-tech-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
/* Flex-wrap variant for pages whose tech list isn't a clean multiple of
   6 (e.g. About's 15 items would leave a lopsided 3-item last row in
   the fixed grid above — the same lopsided-grid bug class already
   fixed twice elsewhere on the site). */
.kodenzo-tech-grid--flex { display: flex; flex-wrap: wrap; justify-content: center; }
.kodenzo-tech-grid--flex .kodenzo-tech-card { flex: 1 1 120px; max-width: 140px; }

/* ---------- Technology category label (groups a .kodenzo-tech-grid
   under a heading — About's Platform/Development/Infrastructure,
   Case Studies hub's Commerce/Backend/Frontend/Infrastructure).

   Left-labeled layout — dev feedback 2026-08-26, Lata's chosen
   alternative over the centered-above-each-row layout this replaces
   (label ran full-width above its grid before). Now the category name
   sits in a fixed-width left column with the tech-card grid alongside
   it, so multiple categories read as labeled rows rather than
   repeated centered headings. Reverts to the original stacked
   (label-above-grid) layout under 760px — a left column that narrow
   would crush both the label and the grid. ---------- */
.kodenzo-tech-category { display: flex; align-items: flex-start; gap: 28px; margin-bottom: 32px; }
.kodenzo-tech-category:last-child { margin-bottom: 0; }
.kodenzo-tech-category__label {
  flex: 0 0 130px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--kz-blue); padding-top: 12px;
}
.kodenzo-tech-category > .kodenzo-tech-grid { flex: 1; justify-content: flex-start; min-width: 0; }
@media (max-width: 760px) {
  .kodenzo-tech-category { flex-direction: column; gap: 16px; }
  .kodenzo-tech-category__label { flex-basis: auto; text-align: center; padding-top: 0; width: 100%; }
  .kodenzo-tech-category > .kodenzo-tech-grid { justify-content: center; width: 100%; }
}

/* ---------- Ecosystem / product-card grid (Featured Products on
   Services; Our Vision on About) — flex-wrap, not a fixed grid, since
   ecosystem_flow's real item count (currently 5) doesn't divide evenly
   into any small fixed column count.

   Round 3 (2026-07-28, About page review): Lata asked for the one
   live product to visually stand out — "filled card with accent
   color" — against the rest, which should read as lighter/outlined
   future modules. Previously .is-live only got a subtle border +
   faint gradient tint; not a strong enough contrast. Now .is-live is a
   solid navy fill (matches the site's dark-card convention, e.g.
   .kodenzo-cs-card) while the default (future/coming-soon) card is
   thinned down further — a lighter border, no shadow until hover. ---------- */
.kodenzo-product-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.kodenzo-product-card {
  background: #fff; border: 1px solid var(--kz-border); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 10px; transition: transform .25s ease, box-shadow .25s ease, border-color .2s ease;
  flex: 1 1 300px; max-width: 340px;
}
.kodenzo-product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(11,71,124,.08); border-color: var(--kz-blue); }
.kodenzo-product-card.is-live {
  /* Blue, not black — dev feedback 2026-08-26: the LIVE card's navy
     fill was read as "black" and flagged on Home/Products/Services/
     About/Resources (same shared component, one fix clears all). */
  background: var(--kz-blue); border-color: var(--kz-blue);
  box-shadow: 0 20px 50px rgba(11,71,124,.18);
}
.kodenzo-product-card.is-live:hover { border-color: var(--kz-coral); }
.kodenzo-product-card__status {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; padding: 5px 12px; border-radius: 999px;
  background: var(--kz-light); color: var(--kz-muted);
}
/* Status badge stays dark-gray-on-white even on the LIVE card — orange
   is reserved for numbers/titles/CTA links only (dev feedback A3), not
   status/tag badges. Previously coral-filled here. */
.kodenzo-product-card.is-live .kodenzo-product-card__status { background: rgba(255,255,255,.14); color: #fff; }
.kodenzo-product-card__title { font-family: var(--kz-font-head); font-size: 19px; color: var(--kz-navy); }
.kodenzo-product-card.is-live .kodenzo-product-card__title { color: #fff; }
.kodenzo-product-card.is-live .kodenzo-product-card__desc { color: #C2CAD4; }
.kodenzo-product-card.is-live .kodenzo-product-card__link { color: #fff; font-weight: 700; }
.kodenzo-product-card.is-live .kodenzo-product-card__link:hover { color: var(--kz-coral); }
.kodenzo-product-card__desc { font-size: 13.5px; line-height: 1.55; color: var(--kz-muted); flex: 1; }
.kodenzo-product-card__link { font-size: 13px; font-weight: 600; color: var(--kz-blue); margin-top: 4px; }
.kodenzo-product-card__link:hover { color: var(--kz-coral); }