/* ============ SOS27 THEME · Proof · v15.30, 29 Sep 2026 · replace this whole block for SOS28 ============ */

/* A · The colours. Every other rule on the site reads these. */
:root{
  color-scheme:light;        /* the site is light only (decided 24 Sep 2026): keeps form controls,
                                scrollbars and the checkout light on a phone set to dark mode */
  --sos-ink:#243F5C;          /* navy: text, buttons, reverse sections */
  --sos-deep:#16273A;         /* deep navy: text on the accent, the mobile bar */
  --sos-accent:#7DC296;       /* green: used sparingly, only where it adds value */
  --sos-accent-hover:#5FAE7C;
  --sos-ground:#D9D9D9;       /* paper: the page background (option A, confirmed 24 Sep 2026) */
  --sos-card:#EFEFEF;         /* card: receipts, photo mounts, alternate sections */
  --sos-caption:#3F566F;      /* caption grey: small labels and captions only */
  --sos-shadow:rgba(36,63,92,.18);
  --sos-leader:rgba(36,63,92,.40);
  --sos-on-dark:#FFFFFF;      /* text on navy and on the mobile bar */
  --sos-field:#FFFFFF;        /* form fields and choice cards */
  --sos-alert:#A8254A;        /* alert crimson: required markers and form errors only (v15.13) */
}

/* B · The photo treatment (v14, 28 Sep 2026, Meg: "things should only change for a reason").
   Soft greyscale everywhere. Only a photo that is a link changes on hover: colour, the 6px accent
   rule and the pointer. A photo that goes nowhere never changes, so nothing promises a click it
   cannot keep. */
.sos-duo,
.sos-duo .wp-block-image,
.sos-duo .kb-gallery-item,
.sos-duo .kadence-blocks-gallery-item{
  position:relative;
  background:#9AA0A6;
  line-height:0;
  overflow:hidden;
}
.sos-duo img{
  display:block;
  transition:filter .4s ease, opacity .4s ease;
}
/* B1 · Colour on the hero photos only (row w-34, 28 Sep 2026): the photo at the top of a page shows
   full colour, every other photo stays soft greyscale. :where keeps the hover rules below in charge. */
.sos-duo:not(:where(.sos-hero) .sos-duo) img{
  filter:grayscale(1) contrast(.94);
  opacity:.86;
}
a:hover .sos-duo img,a:focus-visible .sos-duo img,
.sos-duo a:hover img,.sos-duo a:focus-visible img{
  filter:none;
  opacity:1;
}
a .sos-duo::after,
.sos-duo:has(a)::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:6px;
  background:var(--sos-accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease;
}
a:hover .sos-duo::after,a:focus-visible .sos-duo::after,
.sos-duo:has(a:hover)::after,.sos-duo:has(a:focus-visible)::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){a .sos-duo::after,.sos-duo:has(a)::after{transition:none}}

/* B2 · Where the colour hover stays but the green rule comes off: the Speakers page
   and the Insights cards. Put sos-nogreen on the page's root Row Layout (Speakers)
   or on the card row (Insights). Focus ring and colour on hover are unchanged. */
.sos-nogreen .sos-duo::after{display:none}

/* C · The receipt skin on the core card: torn edges and dotted leaders */
.sos-docket{--sos-behind:var(--sos-ground);margin:9px 0}
.sos-docket.on-card{--sos-behind:var(--sos-card)}
.sos-docket.on-navy{--sos-behind:var(--sos-ink)}
.sos-docket::before,
.sos-docket::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:9px;
  background-color:var(--sos-card);
  background-size:14px 9px;
  background-repeat:repeat-x;
}
.sos-docket::before{
  top:-9px;
  background-image:radial-gradient(circle at 50% 0,var(--sos-behind) 4.5px,transparent 5px);
}
.sos-docket::after{
  bottom:-9px;
  background-image:radial-gradient(circle at 50% 100%,var(--sos-behind) 4.5px,transparent 5px);
}
/* forms keep the paper, never the torn edges */
.sos-docket.sos-form::before,
.sos-docket.sos-form::after{display:none}
/* the dotted leaders on receipt rows are set once in the core (17m) */
.sos-toc li{border-bottom:1px dotted var(--sos-leader)}

/* C2 · The torn paper band (v15, Meg 28 Sep): the darker card sections get the receipt's perforated
   edge, top and bottom, drawn as a mask so it works whatever colour sits next to it */
.sos-section.sos-oncard{position:relative}
.sos-section.sos-oncard::before,
.sos-section.sos-oncard::after{content:"";position:absolute;left:0;right:0;height:9px;z-index:1;background:var(--sos-card);pointer-events:none}
.sos-section.sos-oncard::before{top:-9px;-webkit-mask:radial-gradient(circle at 50% 0,transparent 4.5px,#000 5px) 0 0/14px 9px repeat-x;mask:radial-gradient(circle at 50% 0,transparent 4.5px,#000 5px) 0 0/14px 9px repeat-x}
.sos-section.sos-oncard::after{bottom:-9px;-webkit-mask:radial-gradient(circle at 50% 100%,transparent 4.5px,#000 5px) 0 0/14px 9px repeat-x;mask:radial-gradient(circle at 50% 100%,transparent 4.5px,#000 5px) 0 0/14px 9px repeat-x}

/* D · The print animation, on receipts that carry sos-feed. Whole run stays under 600ms. */
@media (prefers-reduced-motion:no-preference){
  .sos-feed tr{animation:sos-print-in .3s ease both}
  .sos-feed tr:nth-child(1){animation-delay:.03s}
  .sos-feed tr:nth-child(2){animation-delay:.06s}
  .sos-feed tr:nth-child(3){animation-delay:.09s}
  .sos-feed tr:nth-child(4){animation-delay:.12s}
  .sos-feed tr:nth-child(5){animation-delay:.15s}
  .sos-feed tr:nth-child(6){animation-delay:.18s}
  .sos-feed tr:nth-child(7){animation-delay:.21s}
  .sos-feed tr:nth-child(8){animation-delay:.24s}
  .sos-feed tr:nth-child(9){animation-delay:.27s}
  .sos-feed tr:nth-child(10){animation-delay:.3s}
}
@keyframes sos-print-in{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* E · The stamp, the one thing in the CSS that tilts */
.sos-stamp{
  display:inline-block;
  background:var(--sos-accent);
  color:var(--sos-deep);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:8px;
  transform:rotate(2deg);
}
/* F · The recap film pop-up. Kadence Blocks Pro's video popup (Image or Button block,
   YouTube URL, lightbox on) brings its own lightbox and needs none of this.
   These rules are the Hustle fallback only: put sos-modal on the Hustle pop-up's
   main container, with one Custom HTML block holding the youtube-nocookie iframe. */
.sos-modal{background:var(--sos-deep);padding:16px;width:min(960px,calc(100vw - 48px))}
.sos-modal iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
/* ============ end of SOS27 THEME ============ */