/*
 * cw-design-system.css — Tarek-v2 redesign shared component layer.
 * Version: 1.1.5
 *
 * Holds ONLY what every redesigned page (homepage, solutions, modules, FAQ)
 * repeats: layout, type, buttons, eyebrow, cards, grid, frame, motion.
 * Page-unique CSS (.cw-hero, .cw-portal-*, .cw-sol-*, .cw-mod-*, .cw-faq-*)
 * stays embedded in each page's generator/shortcode.
 *
 * COLOR RULE: never raw hex — all colors come from the theme's --color-*
 * tokens (style.css). NON-COLOR tokens are namespaced --cw-* below because
 * the theme already defines --radius-md/lg with DIFFERENT values; reusing
 * those names would re-radius existing live components.
 */

:root{
  /* non-color tokens (mockup-derived; namespaced to avoid clobbering theme --radius-*) */
  --cw-radius-sm: 8px;
  --cw-radius-md: 14px;
  --cw-radius-lg: 20px;
  --cw-radius-pill: 999px;
  --cw-shadow-sm: 0 2px 10px rgba(15,23,42,.07);
  --cw-shadow-md: 0 14px 36px rgba(15,23,42,.12);
  --cw-container: 1240px;
  --cw-container-narrow: 760px;

  /* type families (Outfit/Inter already enqueued in functions.php) */
  --cw-display: 'Outfit', sans-serif;
  --cw-sans: 'Inter', sans-serif;
}

/* ── Layout ─────────────────────────────────── */
.cw-container{ max-width: var(--cw-container); margin:0 auto; padding:0 24px; }
.cw-container--narrow{ max-width: var(--cw-container-narrow); }
.cw-section{ padding: 5rem 0; }
.cw-section--tight{ padding: 2.75rem 0; }
@media (max-width:768px){
  .cw-section{ padding: 3.25rem 0; }
}

/* ── Type ───────────────────────────────────── */
.cw-h1,.cw-h2,.cw-h3,.cw-h4{
  font-family: var(--cw-display); color: var(--color-ink);
  font-weight:700; line-height:1.2; margin:0;
}
.cw-h1{ font-size: clamp(2.1rem, 3.6vw, 3.25rem); letter-spacing:-0.01em; }
.cw-h2{ font-size: clamp(1.7rem, 2.6vw, 2.35rem); letter-spacing:-0.01em; }
.cw-h3{ font-size: 1.2rem; font-weight:600; }
.cw-lede{ font-size:1.08rem; color: var(--color-muted); line-height:1.7; }

.cw-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--cw-display); font-size:.78rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color: var(--color-teal-700);
  margin-bottom:.85rem;
}
.cw-eyebrow::before{ content:""; width:18px; height:2px; background: var(--color-accent); border-radius:2px; }

.cw-section-head{ max-width:640px; margin:0 auto 2.75rem; text-align:center; }
.cw-section-head.is-left{ margin:0 0 2.75rem; text-align:left; }

/* ── Buttons + links ────────────────────────── */
.cw-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.85rem; border-radius: var(--cw-radius-pill);
  font-family: var(--cw-display); font-weight:600; font-size:.95rem;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
/* Hover/focus states set text-decoration + colour explicitly so Astra's a:hover
   (underline + link-hover colour) can't leak in — the standalone mockup relied
   on a .cw-home-root reset that doesn't exist in the theme. */
.cw-btn:hover, .cw-btn:focus{ text-decoration:none; }
.cw-btn--primary{ background: var(--color-accent); color:#fff; }
.cw-btn--primary:hover, .cw-btn--primary:focus{ background: var(--color-accent-700); color:#fff !important; transform: translateY(-1px); box-shadow: var(--cw-shadow-sm); }
.cw-btn--outline-light{ background:transparent; color:#fff; border-color: rgba(255,255,255,.55); }
.cw-btn--outline-light:hover, .cw-btn--outline-light:focus{ border-color:#fff; background: rgba(255,255,255,.08); color:#fff !important; }
.cw-btn--ghost{ background:transparent; color: var(--color-secondary); border-color: var(--color-border); }
.cw-btn--ghost:hover, .cw-btn--ghost:focus{ border-color: var(--color-secondary); color: var(--color-secondary) !important; background:transparent; }
.cw-btn--sm{ padding:.6rem 1.3rem; font-size:.85rem; }

.cw-link{ font-family: var(--cw-display); font-weight:600; font-size:.92rem; color: var(--color-teal-700); display:inline-flex; align-items:center; gap:.4rem; }
.cw-link:hover{ color: var(--color-secondary); }

/* ── Surfaces: cards + grid ─────────────────── */
.cw-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.cw-card{ background: var(--color-bg); border:1px solid var(--color-border); border-radius: var(--cw-radius-md); padding:1.85rem; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cw-card:hover{ border-color: var(--color-primary); box-shadow: var(--cw-shadow-sm); transform: translateY(-2px); }
.cw-card-icon{ width:46px; height:46px; border-radius:12px; background: var(--color-bg-alt-2); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.cw-card-icon svg{ stroke: var(--color-secondary); }
/* explicit size/font so card titles don't inherit Astra's large h3 default
   (the mockup relied on a base h1–h4 reset that doesn't exist in the theme) */
.cw-card h3{ font-family: var(--cw-display); color: var(--color-ink); font-size:1.15rem; font-weight:700; line-height:1.3; margin:0 0 .4rem; }
.cw-card p{ margin:0; font-size:.92rem; color: var(--color-muted); }

/* ── Product screenshot frame ───────────────── */
.cw-frame{ border-radius: var(--cw-radius-lg); overflow:hidden; background: var(--color-bg); border:1px solid var(--color-border); box-shadow: var(--cw-shadow-md); }
.cw-shot-img{ width:100%; display:block; background: var(--color-bg-alt-2); }

/* ── Icon helper ────────────────────────────── */
.cw-icon{ width:26px; height:26px; stroke: currentColor; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ── Global chrome: announcement carousel (cw-announce) ──
   Rendered by [collect_announcements]; driven by assets/js/cw-announce.js.
   Hardened against Astra/Elementor global <button> + link styles (padding,
   min-width, line-height) that would otherwise balloon the nav buttons and
   inflate the bar height. */
.cw-announce, .cw-announce *{ box-sizing:border-box; }
.cw-announce{ background: var(--color-primary); position:relative; overflow:hidden; }
.cw-announce-track{ display:flex; transition: transform .4s ease; }
.cw-announce-slide{ min-width:100%; display:flex; align-items:center; justify-content:center; gap:.6rem; padding:.7rem 3.25rem; text-align:center; }
.cw-announce-slide a{ color:#fff; font-family: var(--cw-display); font-weight:600; font-size:.95rem; line-height:1.35; display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:center; }
.cw-announce-tag{ background: var(--color-secondary); color:#fff; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:.15rem .55rem; border-radius:3px; }
.cw-announce .cw-announce-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:2; /* above .cw-announce-track — its transform creates a stacking context that would otherwise eat arrow clicks */
  -webkit-appearance:none; appearance:none;
  width:26px !important; height:26px !important;
  min-width:0 !important; min-height:0 !important;
  padding:0 !important; margin:0 !important;
  background:rgba(255,255,255,.22); border:0; box-shadow:none; color:#fff;
  border-radius:50%; cursor:pointer;
  font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.cw-announce .cw-announce-nav:hover{ background:rgba(255,255,255,.4); }
.cw-announce-prev{ left:.85rem; }
.cw-announce-next{ right:.85rem; }

/* Full-bleed the bar when it renders inside an Elementor section (the
   [collect_announcements] shortcode widget). Without this, Elementor's boxed
   container insets the teal bar instead of spanning edge-to-edge. Harmless
   when the bar renders outside Elementor (e.g. the global header hook). */
.elementor-section:has(.cw-announce),
.elementor-section:has(.cw-announce) > .elementor-container,
.elementor-section:has(.cw-announce) .elementor-column,
.elementor-section:has(.cw-announce) .elementor-widget-wrap,
.elementor-section:has(.cw-announce) .elementor-widget,
.elementor-section:has(.cw-announce) .elementor-widget .elementor-widget-container{
  max-width:100% !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

/* ── Motion: reveal-on-scroll ───────────────── */
.cw-reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.cw-reveal.is-visible{ opacity:1; transform:none; }
.cw-reveal-d1{ transition-delay:.08s; }
.cw-reveal-d2{ transition-delay:.16s; }
.cw-reveal-d3{ transition-delay:.24s; }
@media (prefers-reduced-motion: reduce){
  .cw-reveal{ opacity:1; transform:none; transition:none; }
}

/* ── Shared responsive ──────────────────────── */
@media (max-width:920px){
  .cw-grid-3{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .cw-grid-3{ grid-template-columns:1fr; }
}