/*
Theme Name: SAVD
Theme URI: https://savd.ai
Author: SAVD
Author URI: https://savd.ai
Description: Custom classic theme for SAVD — a system-level consultancy for AI-driven marketing organizations. Faithful production implementation of the 2026 claude.ai/design redesign.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: savd
*/

/* ---------- globals (from design helmet) ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0B0C0E; }

/* Balance headline wrapping so lines split evenly (no lone orphan words like "keys."). */
#app h1, #app h2, #app h3 { text-wrap: balance; }

/* ---------- keyframes (union across all pages) ---------- */
@keyframes blink    { 0%,100% { opacity:1; } 50% { opacity:.25; } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes flowdash { to { stroke-dashoffset: -28; } }
@keyframes pulse    { 0%,100% { opacity:.3; transform:scale(1); } 50% { opacity:.9; transform:scale(1.06); } }
@keyframes grow     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sweep    { 0% { left:-35%; } 100% { left:135%; } }
@keyframes drift    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes heroglow { 0%,100% { transform: translate(0,0) scale(1); opacity:.8; } 50% { transform: translate(40px,-24px) scale(1.12); opacity:1; } }
@keyframes drawline { to { stroke-dashoffset: 0; } }

/* ---------- "How we help" expanding worlds (pinned to data-active) ---------- */
[data-world] [data-role="wa"] { transition: opacity .55s ease .12s, transform .55s ease .12s; }
[data-world][data-active="0"] [data-role="wa"] { opacity:0 !important; pointer-events:none; transform:translateY(14px); }
[data-world][data-active="1"] [data-role="wa"] { opacity:1 !important; transform:none; }
[data-world] [data-role="wc"] { transition: opacity .4s ease; }
[data-world][data-active="1"] [data-role="wc"] { opacity:0 !important; pointer-events:none; }
[data-world][data-active="0"] [data-role="wsig"] { opacity:0.18 !important; }

/* ---------- card hover (design used a custom style-hover attr; reproduce in CSS) ---------- */
.savd-hovercard { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease; }
.savd-hovercard:hover { transform: translateY(-6px); box-shadow: 0 42px 72px -30px rgba(4,191,157,0.4) !important; border-color: rgba(4,191,157,0.5) !important; }
.savd-worldcard:hover { box-shadow: 0 36px 90px -30px rgba(4,191,157,0.3) !important; }

/* ---------- hero video: reframe so the source's bottom-right corner mark clips off ---------- */
[data-hero-video] { transform: scale(1.2); transform-origin: top left; }

/* ---------- article body links (migrated post content) ---------- */
.savd-article a {
  color: #04BF9D;
  text-decoration: underline;
  text-decoration-color: rgba(4,191,157,0.45);
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.savd-article a:hover {
  color: #5FE3CD;
  text-decoration-color: #5FE3CD;
}

/* ---------- contact form fields (from Contact helmet) ---------- */
#app ::placeholder { color: #6E7177; }
#app input, #app textarea, #app select { font-family: 'Hanken Grotesk', sans-serif; }
#app input:focus, #app textarea:focus, #app select:focus { outline: none; border-color: #04BF9D !important; box-shadow: 0 0 0 3px rgba(4,191,157,0.15); }
.savd-submit:hover { background: transparent !important; border: 1px solid #04BF9D !important; color: #F5F5F3 !important; }

/* ---------- mobile nav ---------- */
.savd-burger { display:none; }
.savd-mobile-menu { display:none; }

@media (max-width: 860px) {
  .savd-nav { padding:16px 22px !important; }
  .savd-nav-links { display:none !important; }
  .savd-nav-cta { display:none !important; }
  .savd-burger {
    display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
  }
  .savd-burger span { display:block; width:24px; height:2px; background:#F5F5F3; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
  .savd-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .savd-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .savd-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .savd-mobile-menu {
    display:flex; position:fixed; inset:0; z-index:899; flex-direction:column; justify-content:center; gap:8px;
    padding:40px; background:rgba(8,9,11,0.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    transform:translateY(-100%); transition:transform .42s cubic-bezier(.2,.7,.2,1); pointer-events:none;
  }
  .savd-mobile-menu[data-open="1"] { transform:translateY(0); pointer-events:auto; }
  .savd-mobile-menu a { color:#F5F5F3; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:30px; padding:10px 0; }
  .savd-mobile-menu a.savd-mm-cta { color:#04BF9D; }
}

/* ---------- responsive layout overrides (desktop layout untouched above breakpoints) ---------- */
@media (max-width: 1100px) {
  .savd-cards-4 { grid-template-columns:repeat(2,1fr) !important; }
  .savd-grid-3  { grid-template-columns:repeat(2,1fr) !important; }
  .savd-grid-6  { grid-template-columns:repeat(2,1fr) !important; }
  .savd-worlds  { flex-direction:column !important; }
  /* Each card sizes to whichever content layer is visible; layers flow normally (no fixed height, no top crop). */
  .savd-worlds [data-world] { height:auto !important; min-height:0 !important; flex:none !important; }
  .savd-worlds [data-world] [data-role="wc"],
  .savd-worlds [data-world] [data-role="wa"] { position:relative !important; inset:auto !important; }
  .savd-worlds [data-world][data-active="0"] [data-role="wa"] { display:none !important; }
  .savd-worlds [data-world][data-active="1"] [data-role="wc"] { display:none !important; }
  .savd-worlds [data-world][data-active="1"] [data-role="wa"] { justify-content:flex-start !important; }
}

@media (max-width: 860px) {
  .savd-pad { padding-left:22px !important; padding-right:22px !important; }
  .savd-pad-y { padding-top:84px !important; padding-bottom:84px !important; }
  .savd-split { grid-template-columns:1fr !important; }
  .savd-hero-pad { padding-left:22px !important; padding-right:22px !important; }
  .savd-mission { grid-template-columns:1fr !important; }
  .savd-approach { grid-template-columns:1fr !important; }
  .savd-approach > div { border-left:0 !important; padding-left:0 !important; padding-right:0 !important; }
}

@media (max-width: 600px) {
  .savd-cards-4 { grid-template-columns:1fr !important; }
  .savd-grid-3  { grid-template-columns:1fr !important; }
  .savd-grid-6  { grid-template-columns:1fr !important; }
}

/* ---------- mobile rendering fixes ---------- */
/* global backstop against any stray horizontal overflow on phones */
@media (max-width: 860px) { html, body { overflow-x: hidden; max-width: 100%; } }

.savd-cap-mobile { display: none; }

@media (max-width: 860px) {
  /* Contact form: shrink the card and stack its input pairs so it fits the screen */
  .savd-form-card { padding: 28px 22px !important; min-height: 0 !important; }
  .savd-form-row  { grid-template-columns: 1fr !important; }

  /* Services: the positioned node plot can't shrink legibly — swap it for a chip list */
  .savd-plot-graphic { display: none !important; }
  .savd-cap-mobile {
    display: flex !important; flex-wrap: wrap; gap: 10px;
  }
  .savd-cap-mobile span {
    border: 1px solid rgba(4,191,157,0.30); background: rgba(4,191,157,0.06);
    color: #C9CCD1; border-radius: 100px; padding: 8px 14px; font-size: 13px;
  }

  /* Blog: hide the featured card's decorative SVG (its sliced geometry overflows) */
  .savd-featured-svg { display: none !important; }
  /* Blog: let the featured card text use the full width instead of 62% */
  .savd-featured-body { max-width: 100% !important; padding: 32px 24px !important; }

  /* Home "worlds": collapsed-card labels read horizontally instead of rotated */
  .savd-world-label { writing-mode: horizontal-tb !important; transform: none !important; align-self: flex-start !important; }

  /* Migrated article content stays within the viewport */
  .savd-article img, .savd-article iframe, .savd-article video { max-width: 100% !important; height: auto !important; }
  .savd-article table { display: block; width: 100%; overflow-x: auto; }
  .savd-article pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }
}