/* dark scanner CSS */

/* scan text wrappers sit in the same stacking context as the buttons */

.dark-scanner .scan-text {
    position: relative;
    width: 100%;
    pointer-events: none;
    text-align: center;
}

.nest-col-btn {
    cursor: pointer;
}


/* disable the opacity transition when we hide the previous item */
.dark-scanner .no-fade {
    transition: none !important;
}

/* top text block */

.dark-scanner .scan-text--top {
    margin-bottom: 18px;
}

/* bottom text block */

.dark-scanner .scan-text--bottom {
    margin-top: 18px;
}

/* titles smoothly follow the active button horizontally */

.dark-scanner .scan-title {
    display: inline-block;
    transition: transform 220ms ease, opacity 180ms ease;
    will-change: transform;
}

/* eyebrow and footnote inherit theme typography */

.dark-scanner .scan-eyebrow,
.dark-scanner .scan-footnote {
    opacity: 0.88;

}

/* the row that contains your existing .nest-col-btn columns */

.dark-scanner .scan-buttons-row {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: stretch;
}

/* accessibility hint for focus-visible on the actual columns */

.dark-scanner .nest-col-btn:focus-visible {
    outline: 2px dashed currentColor;
    outline-offset: 4px;
}

/* active highlight hook only (no colors/styles here; inherits your theme) */

.dark-scanner .nest-col-btn.is-active {
    /* add any state styles in your theme if you want */
}

/* subtle fade for title changes */

.dark-scanner .scan-title.is-swapping {
    opacity: 0.001;
}



.dark-scanner .scan-top.is-active,
.dark-scanner .scan-bottom.is-active {
    display: block;
}

.scan-top h4,
.scan-top h6,
.scan-bottom h4,
.scan-bottom h6 {
    color: #ffffff !important;

}

.scan-bottom {
    margin-top: 30px;
}

.dark-scanner h4 {
    text-transform: none !important;
}

.dark-scanner h6 {
    text-align: center !important;
}

/* Stack all instances and fade them; no display toggling, no transform animation */
.dark-scanner .scan-top-group,
.dark-scanner .scan-bottom-group {
    position: relative;
    /* lets children be absolutely stacked */
}

/* every instance sits on top of each other and fades */
.dark-scanner .scan-top,
.dark-scanner .scan-bottom {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    transition: opacity 1s ease;
    /* 1s fade in/out */
    pointer-events: none;
    /* avoid clicks on hidden */
}

/* active one becomes visible */
.dark-scanner .scan-top.is-active,
.dark-scanner .scan-bottom.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* headings stay put — NO transform transitions */
.dark-scanner .scan-top .fusion-title-heading,
.dark-scanner .scan-bottom .fusion-title-heading {
    display: inline-block;
    /* allow transform positioning if JS sets it instantly */
    transition: none;
    /* kill slide; we only fade now */
}


.fusion-title-size-six {
    margin-bottom: 10px !important;
}

.fusion-title-size-four {
    margin-bottom: 10px !important;
}

.fusion-title-size-six h6,
.fusion-title-size-four h4 {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

.nest-col-btn>div .fusion-title {
    margin-bottom: 0px !important;
}

/* 546m */


/* B) Card (inner) hover / focus / active styles */
.dark-scanner .nest-col-btn>div {
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

@media screen and (min-width: 601px) {
    .dark-scanner .nest-col-btn>div {
        height: 80px !important;
    }

}

@media screen and (max-width: 601px) {
    .dark-scanner .nest-col-btn>div {
        height: 44px !important;
        margin-bottom: 9px;
    }

    .dark-scanner .scan-bottom-group {
        margin-top: 10px;
    }

    .dark-scanner .scan-top-group {
        margin-bottom: 10px;
    }

    .dark-scanner.edge-left .scan-top .fusion-title-heading,
    .dark-scanner.edge-left .scan-bottom .fusion-title-heading,
    .dark-scanner.edge-right .scan-top .fusion-title-heading,
    .dark-scanner.edge-right .scan-bottom .fusion-title-heading {
        text-align: center !important;
        transform: translateX(0) !important;
        /* stop the JS offset so it centers */
    }

}

.dark-scanner .nest-col-btn>div:hover h6,
.dark-scanner .nest-col-btn>div:focus h6,
.dark-scanner .nest-col-btn>div:active h6,
.dark-scanner .nest-col-btn>div.is-active h6 {
    color: #181a1e !important;
}

.dark-scanner .nest-col-btn>div:hover,
.dark-scanner .nest-col-btn>div:focus,
.dark-scanner .nest-col-btn>div:active,
.dark-scanner .nest-col-btn>div.is-active {
    background: #ffffff !important;
}

/* optional: clearer keyboard focus */
.dark-scanner .nest-col-btn>div:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}


/* from chat */

/* Stack all instances and fade them; no display toggling, no transform animation */
.dark-scanner .scan-top-group,
.dark-scanner .scan-bottom-group {
    position: relative;
    /* lets children be absolutely stacked */
}

/* every instance sits on top of each other and fades */
.dark-scanner .scan-top,
.dark-scanner .scan-bottom {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    /* 1s fade in/out */
    pointer-events: none;
    /* avoid clicks on hidden */
}

/* active one becomes visible */
.dark-scanner .scan-top.is-active,
.dark-scanner .scan-bottom.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* headings stay put — NO transform transitions */
.dark-scanner .scan-top .fusion-title-heading,
.dark-scanner .scan-bottom .fusion-title-heading {
    display: inline-block;
    /* allow transform positioning if JS sets it instantly */
    transition: none;
    /* kill slide; we only fade now */
}

/* A) Left-align H4/H6 when the active card is the 1st or 6th */
.dark-scanner.edge-left .scan-top .fusion-title-heading,
.dark-scanner.edge-left .scan-bottom .fusion-title-heading,
.dark-scanner.edge-right .scan-top .fusion-title-heading,
.dark-scanner.edge-right .scan-bottom .fusion-title-heading {
    text-align: left !important;
}

/* B) Card (inner) hover / focus / active styles */
.dark-scanner .nest-col-btn>div {
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.dark-scanner .nest-col-btn>div:hover,
.dark-scanner .nest-col-btn>div:focus,
.dark-scanner .nest-col-btn>div:active,
.dark-scanner .nest-col-btn>div.is-active {
    background: #ffffff !important;
    color: #181a1e !important;
}

/* optional: clearer keyboard focus */
.dark-scanner .nest-col-btn>div:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* tweakable gaps above/below the cards */
:root {
    --scan-gap-top: 40px;
    /* space between TOP text and buttons */
    --scan-gap-bottom: 40px;
    /* space between buttons and BOTTOM text */
}

.dark-scanner .scan-top-group {
    margin-bottom: var(--scan-gap-top);
}

.dark-scanner .scan-bottom-group {
    margin-top: var(--scan-gap-bottom);
}

/* --- Glow image that follows the active card --- */
.dark-scanner {
    position: relative;
    overflow: hidden !important;
}

/* Put the glow above the section bg but behind all content */
.dark-scanner::before {
    content: "";
    position: absolute;
    z-index: 2;
    /* behind content below */
    width: var(--glow-size, 1120px);
    /* tweak size if needed */
    height: var(--glow-size, 474px);
    left: var(--hover-x, 50%);
    /* set by JS */
    top: var(--hover-y, 50%);
    /* set by JS */
    transform: translate(-50%, -50%);
    background-image: url("https://citemed.dream.press/wp-content/uploads/2025/10/hover-no-line-1.webp");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0;
    /* hidden by default */
    pointer-events: none;
    transition: opacity 350ms ease;
    /* fade in/out for the glow only */
}

/* ensure real content sits above the pseudo-element */
.dark-scanner>* {
    position: relative;
    /* z-index: 1; */
}

/* show the glow when a card is active */
.dark-scanner.has-glow::before {
    opacity: 1;
}

/* ensure bg image is under text and buttons  */
.dark-scanner>div * {
    z-index: 3;
}

/* 3:21 */

/* scanner bar */
/* ─────────────────────────────────────────────────────────────
   Dark scanner module: stacking + knobs
   ───────────────────────────────────────────────────────────── */
/* neutralize any old outer pseudo */
.dark-scanner::before{ content:none !important; }

.dark-scanner { position: relative; overflow: hidden; }

/* The real visual host is the first child wrapper */
.dark-scanner > div { 
  position: relative; 
  isolation: isolate;     /* keeps all z-index math inside */
  overflow: hidden;       /* so the glow/sweeper clip correctly */
}

/* ----- Glow (behind content, above bg) ----- */
.dark-scanner > div::before{
  content:"";
  position:absolute;
  z-index:2;                       /* glow layer */
  width: var(--glow-size, 1120px);
  height: var(--glow-size, 474px);
  left: var(--hover-x, 50%);       /* set by JS on the host */
  top:  var(--hover-y, 50%);
  transform: translate(-50%, -50%);
  background-image:url("https://citemed.dream.press/wp-content/uploads/2025/10/hover-no-line-1.webp");
  background-repeat:no-repeat;
  background-size:cover;
  opacity:0;
  pointer-events:none;
  transition: opacity 350ms ease;
}
.dark-scanner > div.has-glow::before{ opacity:1; }

/* ----- Scanner bar (between glow and content) ----- */
.dark-scanner{
  --scan-bar-w: 2px;      /* solid 2px line */
  --scan-c: #3578FF;      /* brand blue */
  --scan-height: 320px;
  --scan-fade: 160px;     /* feather length */
  --scan-speed: 2.8s;     /* sweep duration */
}
.dark-scanner > div .scan-sweeper{
  position:absolute;
  z-index:3;                          /* above glow, below content */
  left: var(--sweep-left, 0px);       /* set by JS on the host */
  top:50%;
  width: var(--scan-bar-w);
  height: var(--scan-height);
  transform: translateX(0) translateY(-50%);
  pointer-events:none;
  opacity:0;

  /* single solid line */
  background-image: linear-gradient(var(--scan-c), var(--scan-c));
  background-repeat:no-repeat;
  background-size:100% 100%;

  /* feather at top/bottom */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 var(--scan-fade),
    #000 calc(100% - var(--scan-fade)),
    transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0,
    #000 var(--scan-fade),
    #000 calc(100% - var(--scan-fade)),
    transparent 100%);
}
.dark-scanner > div.has-sweep .scan-sweeper{
  opacity:1;
  animation: sweepX var(--scan-speed) linear infinite alternate both;
  will-change: transform;
}
@keyframes sweepX{
  from { transform: translateX(0) translateY(-50%); }
  to   { transform: translateX(var(--sweep-range, 0px)) translateY(-50%); }
}

/* ----- Ensure REAL content is above the bar ----- */
.dark-scanner > div .scan-top-group,
.dark-scanner > div .scan-bottom-group,
.dark-scanner > div .nest-col-btn,
.dark-scanner > div .nest-col-btn > div,
.dark-scanner > div .fusion-title,
.dark-scanner > div [class*="fusion-title"]{
  position: relative;
  z-index: 4;   /* content layer */
}

/* IMPORTANT: delete this blanket z-index, it breaks stacking!
.dark-scanner > div * { z-index: 3; }
*/