/* =======================================================================
   YOCTO 2026 — Design System (shared tokens, base, primitives)
   Loaded only on redesign template pages. Safe to use global element
   selectors here because these pages are canvas-style (no parent theme CSS).
   ========================================================================== */

:root {
  /* Brand */
  --brand-green:       #4ecb71;
  --brand-green-hover: #28b54f;
  --brand-green-muted: rgba(78, 203, 113, 0.12);
  --brand-forest:      #3d9f59;
  --brand-lime:        #b1eb21;

  /* Ink / surfaces (dark default) */
  --ink:         #000401;
  --bg:          #000401;
  --bg-card:     #091c0e;
  --bg-elevated: #0d2614;
  --bg-glass:    rgba(4, 14, 7, 0.85);

  /* Text */
  --fg1:      #ffffff;
  --fg2:      #f2f2f2;
  --fg3:      #a1a1a1;
  --fg-muted: #636965;

  /* Borders */
  --border-whisper:     rgba(255, 255, 255, 0.04);
  --border-subtle:      rgba(255, 255, 255, 0.06);
  --border-accent:      rgba(78, 203, 113, 0.10);
  --border-accent-loud: rgba(78, 203, 113, 0.25);

  /* Motion */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms;
  --t-base: 250ms;
  --t-slow: 400ms;

  /* Type families */
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-sans:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;
  --font-serif:   'Playfair Display', Georgia, serif;

  /* Radii */
  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;  --r-pill: 100px;

  /* Layout */
  --maxw: 1340px;
  --edge: clamp(18px, 4vw, 48px);
}

/* ----- Base reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; }
::selection { background: rgba(78, 203, 113, 0.25); color: #fff; }

/* ----- Layout primitives ----- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--edge); }
/* Defensive: the parent theme / Elementor ship a global `.container{display:flex}`
   that leaks onto our canvas templates and collapses our grids (the video rail
   shrank to ~9px wide). Force our containers back to a plain block on YOCTO 2026 pages. */
body.yocto26 .container { display: block !important; }

/* ----- Eyebrow / tick labels ----- */
.eyebrow-row {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--brand-green); letter-spacing: 0.12em; text-transform: uppercase;
}
.eyebrow-row::before {
  content: ''; width: 10px; height: 10px;
  background: var(--brand-green); transform: rotate(45deg); flex: none;
}
.tick {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ----- Section title (fluid) ----- */
.section-title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(34px, 6vw, 64px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 18px 0 0; text-transform: uppercase;
}
.section-title .green { color: var(--brand-green); }

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border: 0; border-radius: var(--r-sm); cursor: pointer;
  font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 180ms var(--ease);
}
.btn-xl { padding: 18px 32px; font-size: 13px; }
.btn-primary { background: var(--brand-green); color: var(--ink); }
.btn-primary:hover { background: var(--brand-green-hover); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--fg1); border: 1px solid var(--border-accent-loud); }
.btn-outline:hover { background: var(--brand-green-muted); border-color: var(--brand-green); }
.btn .arrow { transition: transform 180ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ----- Accessibility / motion ----- */
:focus-visible { outline: 2px solid rgba(78, 203, 113, 0.5); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ----- Scroll-reveal helper (progressive enhancement) -----
   IMPORTANT: the hidden state is NOT set in CSS. shell.js applies opacity:0 +
   transform INLINE on below-the-fold elements and clears it to reveal. This is
   deliberate: Perfmatters Remove-Unused-CSS strips class-based reveal rules
   (`.reveal.in` isn't in the static HTML), which left `.reveal{opacity:0}` in
   place but deleted `.reveal.in{opacity:1}` → content stuck invisible = the
   "white screen until you scroll" bug. With no CSS hide, content is always
   visible if JS is blocked, and shell.js animates it (via inline styles RUCSS
   can't touch) when JS runs. */
.reveal { transition: opacity 600ms var(--ease), transform 600ms var(--ease); will-change: opacity, transform; }

/* ----- Mobile tap targets ----- */
@media (max-width: 640px) {
  .btn { width: 100%; }
}


/* ----- Header: single YOCTO wordmark (replaces the redundant circle badge) ----- */
body.yocto26 .brand .mark{display:none !important}
body.yocto26 .brand{gap:0 !important}
body.yocto26 .brand span:not(.mark){display:inline-block !important;width:90px;height:24px;overflow:hidden;text-indent:-999px;white-space:nowrap;background:url(/wp-content/themes/yocto-child/assets/img/logo-wordmark-white.svg) left center/contain no-repeat}

/* ======================================================================
   YOCTO 2026 — CONTENT VIEWS (blog index + single post + case studies)
   Scoped under .yocto26-content so nothing leaks onto homepage/money pages.
   Shared primitives (.container/.btn/.kicker/.reveal/.bg-field) come from
   design-system.css + shell.css; only the view-specific styles live here.
   ====================================================================== */

/* shared content hero (blog index + case-study archive) */
.yocto26-content .cv-hero { position: relative; padding: 150px 0 64px; text-align: center; border-bottom: 1px solid var(--border-subtle); }
.yocto26-content .cv-hero .kicker { display: inline-flex; }
.yocto26-content .cv-hero h1 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(40px, 6.2vw, 76px); line-height: 0.96; letter-spacing: -0.03em; margin: 20px 0 0; text-transform: uppercase; text-wrap: balance; }
.yocto26-content .cv-hero h1 .green { color: var(--brand-green); }
.yocto26-content .cv-hero .sub { margin: 24px auto 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: var(--fg2); }
.yocto26-content .cv-search { margin: 40px auto 0; max-width: 620px; display: flex; gap: 10px; }
.yocto26-content .cv-search .field { flex: 1; position: relative; }
.yocto26-content .cv-search .field svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--fg-muted); }
.yocto26-content .cv-search input { width: 100%; padding: 16px 20px 16px 48px; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--fg1); border-radius: 6px; font-family: var(--font-sans); font-size: 14px; transition: border-color 180ms; }
.yocto26-content .cv-search input::placeholder { color: var(--fg-muted); }
.yocto26-content .cv-search input:focus { outline: none; border-color: var(--brand-green); }

/* list + result meta */
.yocto26-content .cv-list { padding: 56px 0 100px; }
.yocto26-content .result-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 30px; }
.yocto26-content .result-meta b { color: var(--brand-green); font-weight: 500; }
.yocto26-content .cv-empty { color: var(--fg2); font-size: 15px; padding: 28px 0; }

/* blog grid */
.yocto26-content .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.yocto26-content .post { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 10px; padding: 32px 34px 28px; overflow: hidden; transition: transform 250ms var(--ease), border-color 250ms var(--ease), box-shadow 250ms var(--ease); min-height: 280px; color: var(--fg1); }
.yocto26-content .post::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-green) 50%, transparent); opacity: 0; transition: opacity 300ms; }
.yocto26-content .post:hover { transform: translateY(-4px); border-color: var(--brand-green); box-shadow: 0 20px 44px rgba(0,0,0,0.4); }
.yocto26-content .post:hover::before { opacity: 0.55; }
.yocto26-content .post .meta-row { display: flex; align-items: center; margin-bottom: 22px; }
.yocto26-content .post .date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.yocto26-content .post h3 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; line-height: 1.08; letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 16px; color: var(--fg1); transition: color 200ms; }
.yocto26-content .post:hover h3 { color: var(--brand-green); }
.yocto26-content .post .excerpt { font-size: 14px; line-height: 1.65; color: var(--fg2); margin: 0; }
.yocto26-content .post .read { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-green); }
.yocto26-content .post .read .arrow { transition: transform 200ms var(--ease); }
.yocto26-content .post:hover .read .arrow { transform: translateX(5px); }
.yocto26-content .post.hide { display: none; }

/* featured (first) post — full-width inverted green */
.yocto26-content .post.featured { grid-column: 1 / -1; background: var(--brand-green); border-color: var(--brand-green); min-height: 0; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; padding: 44px 48px; }
.yocto26-content .post.featured::before { display: none; }
.yocto26-content .post.featured:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(78,203,113,0.25); }
.yocto26-content .post.featured .date, .yocto26-content .post.featured .read { color: var(--ink); }
.yocto26-content .post.featured .read { opacity: 0.82; margin-top: 26px; padding-top: 0; }
.yocto26-content .post.featured h3 { font-size: clamp(30px, 4vw, 44px); line-height: 1; color: var(--ink); margin: 0; }
.yocto26-content .post.featured:hover h3 { color: var(--ink); }
.yocto26-content .post.featured .excerpt { color: var(--ink); opacity: 0.82; font-size: 15px; }
.yocto26-content .post.featured .f-left { display: flex; flex-direction: column; }
.yocto26-content .post.featured .f-left .meta-row { margin-bottom: 18px; }

/* numbered pagination */
.yocto26-content .cv-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.yocto26-content .cv-pagination .pg { min-width: 42px; height: 42px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--border-subtle); background: transparent; color: var(--fg2); font-family: var(--font-heading); font-weight: 700; font-size: 14px; transition: all 180ms var(--ease); }
.yocto26-content .cv-pagination a.pg:hover { border-color: var(--brand-green); color: var(--brand-green); }
.yocto26-content .cv-pagination .pg.active { background: var(--brand-green); color: var(--ink); border-color: var(--brand-green); }
.yocto26-content .cv-pagination .pg.dots { border: 0; }
.yocto26-content .cv-pagination .pg.nav { gap: 6px; }

/* content-view final CTA band */
.yocto26-content .final-cta { padding: 130px 0; text-align: center; position: relative; overflow: hidden; border-top: 1px solid var(--border-subtle); }
.yocto26-content .final-cta .bg-rings { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 940px; height: 940px; max-width: 150vw; pointer-events: none; opacity: 0.4; }
.yocto26-content .final-cta .bg-rings circle { fill: none; stroke: rgba(78,203,113,0.12); }
.yocto26-content .final-cta .inner { position: relative; z-index: 2; }
.yocto26-content .final-cta .kicker { display: inline-flex; }
.yocto26-content .final-cta h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(44px, 7vw, 84px); line-height: 0.94; letter-spacing: -0.03em; margin: 24px 0 0; text-transform: uppercase; }
.yocto26-content .final-cta h2 .green { color: var(--brand-green); }
.yocto26-content .final-cta .sub { max-width: 660px; margin: 26px auto 0; font-size: 17px; line-height: 1.6; color: var(--fg2); }
.yocto26-content .final-cta .ctas { margin-top: 44px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* responsive */
@media (max-width: 1000px) {
  .yocto26-content .blog-grid { grid-template-columns: 1fr; }
  .yocto26-content .post.featured { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
  .yocto26-content .cv-hero { padding: 124px 0 48px; }
  .yocto26-content .cv-search { flex-direction: column; }
  .yocto26-content .post { padding: 26px 24px; min-height: 0; }
  .yocto26-content .post.featured { padding: 30px 26px; }
}