/* assets/css/solution2.css — SAP-833-P1. Scoped design layer for solution.servadra.com's 9 core pages.
   Loaded ONLY by pages that wrap their content in <div class="sol2">...</div> (each of the 9 pages does
   this in its own file — includes/header.php, includes/footer.php and includes/blocks/* are NEVER edited
   and stay byte-identical). Every selector is prefixed .sol2 so nothing here can affect the 47 /work/
   case-study pages or any other caller of the shared blocks. servadra.css is untouched.

   IMPORTANT — most block-rendered visual properties (background, padding, borders, card radius, CTA
   button styling, paragraph colour) are set as inline style="" attributes inside includes/blocks/*.php,
   which this phase may not edit and may not override with forced style overrides (none used anywhere in this file).
   This stylesheet only touches properties those blocks leave unset inline: the hero component (which
   carries almost no inline style), section headings, section-to-section margin rhythm, and new
   hover/focus states that no inline style or onmouse* handler already defines. See
   SAP-833-P1-basic9-execute.md §1 for the full per-element audit this file is built from. No
   fixed background attachment used anywhere (SAP-832 Chrome-compositor lesson). */

/* ---- 1. tokens ---- */
.sol2{
  --sol2-navy:#0f1b35;--sol2-blue:#315fbb;--sol2-sky:#5eaaf7;--sol2-ice:#a7d2ff;
  --sol2-soft:#f3f7fd;--sol2-line:#e2e9f4;--sol2-muted:#566176;
  --sol2-sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sol2-serif:'Newsreader',Georgia,serif;
  --sol2-s1:8px;--sol2-s2:16px;--sol2-s3:24px;--sol2-s4:40px;--sol2-s5:64px;--sol2-s6:88px;
  --sol2-t-h1:clamp(2.1rem,5vw,3.6rem);--sol2-t-h2:clamp(1.5rem,2.6vw,2.1rem);
  --sol2-radius:16px;--sol2-shadow:0 16px 40px rgba(15,27,53,.12);
  display:block;
  font-family:var(--sol2-sans);
}

/* ---- 2. section rhythm — blocks never set outer-<section> margin, only padding, so this is free ---- */
.sol2 > section{margin:0;}
.sol2 > section + section{margin-top:var(--sol2-s2);}
@media (min-width:760px){ .sol2 > section + section{margin-top:var(--sol2-s3);} }

/* ---- 3. headings — every block sets only font-size/margin inline on h2; colour/family/tracking are free ---- */
.sol2 h2{
  font-family:var(--sol2-sans);
  color:var(--sol2-navy);
  letter-spacing:-.01em;
  font-weight:700;
}
/* the one dark-band block (flowchain) already forces color:#fff inline on its own h2 — leave it. */

/* ---- 4. hero — carries almost no inline style, the single highest-impact free target ---- */
.sol2 .partner_hero{
  position:relative;
  isolation:isolate;
  color:#fff;
  overflow:hidden;
  background:var(--sol2-navy);
  padding:var(--sol2-s6) 0 var(--sol2-s5);
  box-sizing:border-box;
  display:flex;
  align-items:center;
}
.sol2 .partner_hero picture{ z-index:0; }
.sol2 .partner_hero picture img{
  filter:brightness(.72) contrast(1.05);
}
.sol2 .hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(15,27,53,.66) 0%,rgba(15,27,53,.22) 42%,rgba(15,27,53,.62) 80%,var(--sol2-navy) 100%);
  /* background stays default-attachment (no fixed positioning) — scroll only, per SAP-832 Chrome compositor lesson */
}
.sol2 .hero-inner{
  position:relative;
  z-index:2;
  padding:0 var(--sol2-s3);
}
.sol2 .hero-inner h1{
  margin:0 0 var(--sol2-s2);
  font-size:var(--sol2-t-h1);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.02em;
  color:#fff;
}
.sol2 .hero-inner .hero-sub{
  font-family:var(--sol2-serif);
  font-style:italic;
  font-size:1.2rem;
  line-height:1.5;
  color:rgba(255,255,255,.88);
  max-width:640px;
  margin:0 auto var(--sol2-s2);
}
.sol2 .solution-trust-strip{
  background:var(--sol2-soft);
  padding:var(--sol2-s3) 0;
  border-bottom:1px solid var(--sol2-line);
}

/* ---- 5. card / list-item hover polish — no block sets a :hover state inline, so this is entirely additive ---- */
.sol2 [id^="cl"] > li,
.sol2 [id^="ck"] > li{
  transition:transform .18s ease, box-shadow .18s ease;
}
.sol2 [id^="cl"] > li:hover,
.sol2 [id^="ck"] > li:hover{
  transform:translateY(-3px);
  box-shadow:var(--sol2-shadow);
}
.sol2 [id^="cl"] > li > a:focus-visible,
.sol2 details:focus-within{
  outline:2px solid var(--sol2-blue);
  outline-offset:2px;
}

/* ---- 6. FAQ hover/open polish — no inline hover/open state exists to conflict with ---- */
.sol2 details{
  transition:box-shadow .18s ease, border-color .18s ease;
}
.sol2 details:hover{
  box-shadow:var(--sol2-shadow);
  border-color:var(--sol2-line);
}
.sol2 details[open] summary{
  color:var(--sol2-blue);
}
.sol2 details summary::marker{
  color:var(--sol2-blue);
}

/* ---- 7. flowchain chain-step hover (dark band, no inline hover) ---- */
.sol2 div[role="list"][aria-label="Delivery chain"] > div[role="listitem"]{
  transition:background .18s ease, border-color .18s ease;
}
.sol2 div[role="list"][aria-label="Delivery chain"] > div[role="listitem"]:hover{
  background:rgba(255,255,255,.12);
  border-color:var(--sol2-sky);
}

/* ---- 8. start-a-project.php form panel (page-owned markup, not a shared block — safe, direct target) ---- */
.sol2 .start-project-form__fields{
  transition:box-shadow .18s ease;
}
.sol2 .sp-field label{
  color:var(--sol2-navy);
  font-weight:600;
}
.sol2 .sp-field input:focus,
.sol2 .sp-field textarea:focus,
.sol2 .sp-field select:focus{
  outline:2px solid var(--sol2-blue);
  outline-offset:1px;
}

/* ---- 9. responsive checkpoints ---- */
@media (max-width:600px){
  .sol2 .partner_hero{ padding:var(--sol2-s4) 0 var(--sol2-s3); }
  .sol2 .hero-inner h1{ font-size:clamp(1.7rem,8vw,2.3rem); }
  .sol2 .hero-inner .hero-sub{ font-size:1.05rem; }
}
@media (min-width:1200px){
  .sol2 > section + section{ margin-top:var(--sol2-s4); }
}

/* ==== SAP-833 P3 (WORKHF): shared header/footer shell + /work/ pages ====
   Header/footer (includes/header.php, includes/footer.php) now wrap themselves in <div class="sol2 sol2-shell">
   for every non-article page; /work/ pages wrap their body in <div class="sol2">. Articles (site/articles/*)
   get none of this markup (header/footer gate on SCRIPT_NAME) and stay byte-identical.
   Every selector below is scoped under .sol2; no forced overrides; no fixed background attachment. */

/* ---- 10. header shell ---- */
.sol2.sol2-shell .site-header{
  border-bottom:1px solid var(--sol2-line);
  box-shadow:0 1px 0 rgba(15,27,53,.04);
}
.sol2.sol2-shell .site-header .nav-link{
  font-family:var(--sol2-sans);
  color:var(--sol2-navy);
  font-weight:600;
  transition:color .18s ease;
}
.sol2.sol2-shell .site-header .nav-link:hover{ color:var(--sol2-blue); }
.sol2.sol2-shell .site-header .nav-cta-primary{
  background:var(--sol2-navy);
  color:#fff;
  border-radius:999px;
}
.sol2.sol2-shell .site-header .nav-cta-primary:hover{ background:var(--sol2-blue); color:#fff; }
.sol2.sol2-shell .site-header .nav-cta-secondary{
  border-radius:999px;
  border:1px solid var(--sol2-line);
}
.sol2.sol2-shell .site-header a:focus-visible,
.sol2.sol2-shell .site-footer a:focus-visible{
  outline:2px solid var(--sol2-blue);
  outline-offset:2px;
}

/* ---- 11. footer shell ---- */
.sol2.sol2-shell .site-footer{
  background:var(--sol2-navy);
  color:rgba(255,255,255,.86);
  font-family:var(--sol2-sans);
}
.sol2.sol2-shell .site-footer h4{
  color:var(--sol2-ice);
  letter-spacing:.04em;
}
.sol2.sol2-shell .site-footer a{
  color:rgba(255,255,255,.86);
  transition:color .18s ease;
}
.sol2.sol2-shell .site-footer a:hover{ color:var(--sol2-sky); }

/* ---- 12. /work/ pages (wrapper is <div class="sol2"> emitted by work/_case.php and work/index.php) ---- */
.sol2 .work-card{
  transition:transform .18s ease, box-shadow .18s ease;
}
.sol2 .work-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--sol2-shadow);
}
.sol2 .work-card a:focus-visible,
.sol2 .work-filters button:focus-visible{
  outline:2px solid var(--sol2-blue);
  outline-offset:2px;
}
.sol2 .work-filters button{ transition:background .18s ease, border-color .18s ease; }