/*
Theme Name: SynkraLabs
Author: SynkraLabs
Description: Dark block theme for SynkraLabs. The page rises from the deep: every section one blue lighter than the last, white carries the structure, orange is the signal.
Version: 2.1.0
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: synkralabs
*/

:root{--sl-pad:24px;--sl-section:clamp(80px,10vw,140px)}
body{-webkit-font-smoothing:antialiased}
.wp-site-blocks > *{margin-block-start:0 !important}
.sl-front > *{margin-block-start:0 !important;margin-block-end:0 !important}
a:focus-visible,.wp-element-button:focus-visible{outline:3px solid var(--wp--preset--color--signal);outline-offset:3px}

/* ---------- Header ---------- */
.sl-header{background:var(--wp--preset--color--night);padding:28px var(--sl-pad) !important}
.sl-header-inner{max-width:1200px;margin:0 auto !important;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sl-logo img{display:block;height:26px !important;width:auto !important}
.sl-header-right{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.sl-nav{display:flex;gap:36px;margin:0;font-size:17px;font-weight:500}
.sl-nav a{color:#E8EEF1;text-decoration:none}
.sl-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
.sl-header .sl-btn .wp-block-button__link{font-size:17px;padding:12px 20px;min-height:44px;box-sizing:border-box}

/* ---------- Buttons ---------- */
.sl-actions{gap:16px;margin-top:8px !important}
.wp-block-button .wp-block-button__link{min-height:56px;box-sizing:border-box;display:inline-flex;align-items:center;text-decoration:none}
.sl-btn-ghost .wp-block-button__link{background:transparent !important;color:var(--wp--preset--color--snow) !important;border:1.5px solid rgba(245,246,244,.55)}
.sl-btn-ghost .wp-block-button__link:hover{background:rgba(255,255,255,.12) !important;color:#fff !important}
.sl-btn-ink .wp-block-button__link{background:var(--wp--preset--color--ink) !important;color:#fff !important;font-size:21px;padding:18px 30px;min-height:60px}
.sl-btn-ink .wp-block-button__link:hover{background:#26323B !important}

/* ---------- Hero: night over the fjord ---------- */
.sl-hero{position:relative;overflow:hidden;min-height:760px;padding:120px var(--sl-pad) 380px !important;box-sizing:border-box}
.sl-hero > *:not(.sl-ridges){position:relative;z-index:2}
.sl-h1{max-width:11ch;margin-block:0 !important;color:#fff}
.sl-lede{font-size:clamp(20px,2vw,24px);line-height:1.5;max-width:34ch;margin-top:32px !important}
.sl-ridges{position:absolute;left:0;right:0;bottom:0;width:100%;height:340px;z-index:1;display:block}
.sl-hero .wp-block-html,.sl-hero > svg{margin:0 !important}

/* ---------- One left edge for everything ----------
   Sections use WordPress' constrained layout (1200px). Elements with their own,
   narrower max-width would otherwise be centred; this pins every child to the
   left edge of the 1200px column instead. */
.sl-hero > *:not(.sl-ridges),.sl-section > *{margin-left:max(0px,calc((100% - 1200px) / 2)) !important;margin-right:auto !important}
.sl-ridges{max-width:none !important;width:100% !important;left:0 !important;right:0 !important;margin:0 !important}
.sl-hero + .sl-section{padding-top:clamp(48px,6vw,88px) !important}

/* ---------- Sections: each one step lighter ---------- */
.sl-section{padding:var(--sl-section) var(--sl-pad) !important}
.sl-section > h2{margin-block:0 !important}
.sl-narrow{max-width:16ch}
.sl-intro{font-size:22px;line-height:1.55;max-width:38ch;margin-top:20px !important}
.sl-cols{gap:48px 40px !important;margin-top:64px !important}
.sl-ruled > .wp-block-column{border-top:3px solid var(--wp--preset--color--snow);padding-top:28px}
.sl-cols h3{margin:0 0 12px !important}
.sl-cols p{margin:0}
.sl-num{font-size:64px !important;line-height:1 !important;font-weight:700;letter-spacing:-.04em;color:var(--wp--preset--color--steel);margin:0 0 12px !important}
#process p:not(.sl-num){color:#C9D6DD}

/* ---------- Lab ---------- */
.sl-lab{margin-top:0 !important;gap:56px !important}
.sl-lab .sl-intro{color:#D0DBE1}
.sl-more{margin-top:20px !important;font-size:19px;font-weight:600}
.sl-more a{text-decoration:underline;text-decoration-color:var(--wp--preset--color--signal);text-decoration-thickness:2px;text-underline-offset:6px}
.sl-card{border-radius:6px;overflow:hidden;padding:0 !important}
.sl-card > *{margin:0 !important}
.sl-photo{aspect-ratio:16/10;background:var(--wp--preset--color--night);display:flex;align-items:center;justify-content:center;color:#A9BBC5;font-size:17px}
.sl-photo img,.sl-card .wp-block-image img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.sl-card-title{padding:24px 28px 0;font-size:26px !important}
.sl-card-title a{color:#fff;text-decoration:none}
.sl-card-title a:hover{text-decoration:underline;text-underline-offset:6px}
.sl-card-text{padding:6px 28px 28px;font-size:18px}

/* ---------- Contact: the signal ---------- */
.sl-contact,.sl-contact h2,.sl-contact p{color:var(--wp--preset--color--ink) !important}
.sl-h2-xl{font-size:clamp(44px,6.4vw,88px) !important;line-height:1 !important;letter-spacing:-.035em;max-width:14ch}
.sl-contact .sl-intro{margin-top:28px !important}
.sl-contact .sl-actions{margin-top:36px !important}

/* ---------- Inner pages ---------- */
.sl-main{background:var(--wp--preset--color--deep);padding:clamp(64px,8vw,112px) var(--sl-pad) clamp(80px,10vw,140px) !important}
.sl-main .wp-block-post-title{font-size:var(--wp--preset--font-size--x-large);margin-bottom:32px}
.sl-main .wp-block-post-content a{text-decoration:underline;text-decoration-color:var(--wp--preset--color--signal);text-decoration-thickness:2px;text-underline-offset:5px}
.sl-main h2{font-size:32px;margin-top:56px}
.sl-facts{display:grid;grid-template-columns:10rem 1fr;gap:.6rem 1.25rem;margin:2rem 0}
.sl-facts dt{color:var(--wp--preset--color--steel)}
.sl-facts dd{margin:0}
.sl-shot{aspect-ratio:16/10;background:var(--wp--preset--color--night);display:flex !important;align-items:center;justify-content:center;border-radius:6px;margin:2.5rem 0 !important}
.sl-shot-note{color:#A9BBC5;margin:0}
.sl-lab-list .sl-lab-item{border-top:1px solid #2C4859;padding:1.75rem 0;margin:0 !important}
.sl-lab-item h2{margin:0 0 .35rem !important}
.sl-lab-item h2 a{color:#fff;text-decoration:none !important}
.sl-lab-item h2 a:hover{text-decoration:underline !important}

/* ---------- Footer ---------- */
.sl-footer{background:var(--wp--preset--color--night);padding:48px var(--sl-pad) !important;color:#A9BBC5}
.sl-footer-inner{max-width:1200px;margin:0 auto !important;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.sl-footer .sl-logo img{height:20px !important}
.sl-footer-nav{display:flex;flex-wrap:wrap;gap:12px 32px;margin:0;font-size:16px}
.sl-footer-nav a{color:#E8EEF1;text-decoration:none}
.sl-footer-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.sl-footer-place{margin:0;font-size:16px}

/* ---------- Tablet ---------- */
@media (max-width:1060px) and (min-width:761px){
  .sl-header-right,.sl-nav{gap:24px}
}

/* ---------- Phone: same design, scaled for a hand ---------- */
@media (max-width:760px){
  :root{--sl-pad:20px;--sl-section:56px}
  body{font-size:17px}

  /* Header: logo and button on one row, all links on the row below */
  .sl-header{padding:16px var(--sl-pad) 12px !important}
  .sl-header-inner{row-gap:12px}
  .sl-header-right{display:contents}
  .sl-header .sl-logo{order:1}
  .sl-header .wp-block-buttons{order:2;margin:0 !important}
  .sl-nav{order:3;flex-basis:100%;gap:12px;justify-content:space-between;font-size:15px;overflow-x:auto;white-space:nowrap;padding:10px 0 2px;border-top:1px solid #1B3445;scrollbar-width:none}
  .sl-nav::-webkit-scrollbar{display:none}
  .sl-nav a{padding:6px 0}
  .sl-logo img{height:20px !important}
  .sl-header .sl-btn .wp-block-button__link{font-size:15px;padding:10px 16px;min-height:44px}

  /* Hero */
  .sl-hero{min-height:0;padding:40px var(--sl-pad) 190px !important}
  .sl-h1{font-size:clamp(40px,11vw,52px) !important;max-width:none}
  .sl-lede{font-size:18px;margin-top:20px !important}
  .sl-ridges{height:170px}
  .sl-hero + .sl-section{padding-top:40px !important}

  /* Type */
  .sl-section h2,.sl-main h2{font-size:32px !important;line-height:1.1 !important}
  .sl-h2-xl{font-size:40px !important}
  h3,.sl-cols h3{font-size:22px !important}
  .sl-intro{font-size:18px;margin-top:14px !important}
  .sl-num{font-size:40px !important;margin-bottom:8px !important}
  .sl-cols{gap:32px !important;margin-top:36px !important}
  .sl-ruled > .wp-block-column{padding-top:20px;border-top-width:2px}
  .sl-lab{gap:32px !important}
  .sl-more{font-size:17px}
  .sl-card-title{padding:20px 20px 0;font-size:22px !important}
  .sl-card-text{padding:4px 20px 22px;font-size:16px}

  /* Buttons: full-width, easy to hit, not oversized */
  .sl-actions{flex-direction:column;align-items:stretch;gap:12px}
  .sl-actions .wp-block-button,.sl-actions .wp-block-button__link{width:100%;justify-content:center}
  .wp-block-button .wp-block-button__link{min-height:50px;font-size:17px;padding:12px 20px}
  .sl-btn-ink .wp-block-button__link{font-size:17px;padding:14px 20px;min-height:52px}
  .sl-contact .sl-actions{margin-top:24px !important}

  /* Inner pages */
  .sl-main{padding:40px var(--sl-pad) 64px !important}
  .sl-main .wp-block-post-title{font-size:36px !important;margin-bottom:20px}
  .sl-facts{grid-template-columns:1fr;gap:.15rem}
  .sl-facts dd{margin-bottom:.6rem}

  /* Footer */
  .sl-footer{padding:36px var(--sl-pad) !important}
  .sl-footer-inner{flex-direction:column;align-items:flex-start;gap:16px}
  .sl-footer .sl-logo{order:-1}
  .sl-footer-nav{gap:10px 20px;font-size:15px}
  .sl-footer-place{font-size:15px}
}

/* ---------- Motion: subtle, and off for anyone who prefers less ---------- */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}

  /* Page changes cross-fade (browsers without support simply load the page) */
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}

  /* Hero settles in on load */
  .sl-hero > *:not(.sl-ridges){animation:sl-in .7s cubic-bezier(.2,.7,.2,1) both}
  .sl-hero > .sl-lede{animation-delay:.08s}
  .sl-hero > .sl-actions{animation-delay:.16s}
  .sl-ridges{animation:sl-fade 1.4s ease both}

  /* Sections rise gently as they scroll into view (only where the browser supports it) */
  @supports (animation-timeline:view()){
    .sl-section > *,.sl-main .wp-block-post-content > *{animation:sl-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  }
}
@keyframes sl-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sl-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes sl-fade{from{opacity:0}to{opacity:1}}