/*
 * Spider-Man: Brand New Day — cinema-launch takeover styles.
 * Loaded only when ?promotion=spiderman is active.
 *
 * REQUIRED IMAGE ASSETS — drop these in:
 *   wp-content/themes/kvikmyndir/images/promo/spiderman/
 *
 *   bg.jpg        Wide key-art background (~2500x1000+), used as the hero bg.
 *   character.png Transparent cut-out of Spider-Man (portrait), hero focal art.
 *   logo.png      Transparent "SPIDER-MAN: BRAND NEW DAY" logo (light, on dark).
 *   poster.jpg    Key-art poster for the side card (portrait ~2:3).
 *
 * Background art (bg.jpg) is referenced with a path relative to THIS file,
 * so it resolves without knowing the theme URI.
 */

.sbnd {
    --sbnd-red: #e2231a;
    --sbnd-red-bright: #ff3b2e;
    --sbnd-blue: #1f45c4;
    --sbnd-blue-bright: #3a68ff;
    --sbnd-ink: #070b1a;
    --sbnd-cream: #eef2ff;
    font-family: "Open Sans", Arial, sans-serif;
    color: #fff;
    background: var(--sbnd-ink);
    line-height: 1.3;
}

/* ── Announcement strip ─────────────────────────────────────────── */
.sbnd__strip {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 16px;
    background: #050814;
    border-bottom: 1px solid rgba(31, 69, 196, .6);
    color: #fff;
    text-decoration: none;
    font-size: .82rem;
    letter-spacing: .02em;
    transition: background .15s ease;
}
.sbnd__strip:hover { background: #0a1330; }
.sbnd__strip-title {
    color: var(--sbnd-red-bright);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.sbnd__strip-sep { color: rgba(255, 255, 255, .35); }
.sbnd__strip-text { color: rgba(255, 255, 255, .85); }
.sbnd__strip-cta {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 2px solid var(--sbnd-red);
    padding-bottom: 1px;
}

/* ── Hero takeover ──────────────────────────────────────────────── */
.sbnd__hero {
    position: relative;
    overflow: hidden;
    min-height: 460px;
    background: var(--sbnd-ink) url(../images/promo/spiderman/bg.jpg) center 30% / cover no-repeat;
}

/* Darken left→right so headline/CTA stay legible over the art */
.sbnd__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(7, 11, 26, .93) 0%, rgba(7, 11, 26, .72) 34%, rgba(7, 11, 26, .10) 62%, rgba(7, 11, 26, .38) 100%),
        linear-gradient(0deg, rgba(7, 11, 26, .85) 0%, rgba(7, 11, 26, 0) 45%);
}

/* Spider-Man cut-out, bleeding off the bottom, centre-right */
.sbnd__character {
    position: absolute;
    z-index: 2;
    bottom: 0;
    right: 8%;
    height: 108%;
    width: auto;
    max-width: 55%;
    object-fit: contain;
    object-position: bottom center;
    pointer-events: none;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, .55));
}

.sbnd__inner {
    position: relative;
    z-index: 5;
    max-width: 1240px;
    margin: 0 auto;
    min-height: 460px;
    padding: 40px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.sbnd__content {
    max-width: 560px;
    flex: 1 1 auto;
}
.sbnd__logo {
    display: block;
    width: min(100%, 560px);
    height: auto;
    filter: drop-shadow(0 4px 22px rgba(31, 69, 196, .55));
}
.sbnd__date {
    margin: 18px 0 22px;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sbnd-cream);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
.sbnd__btn {
    display: inline-block;
    padding: 15px 40px;
    background: var(--sbnd-red);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(226, 35, 26, .5);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sbnd__btn:hover {
    background: var(--sbnd-red-bright);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 59, 46, .6);
    color: #fff;
}

/* Quiet secondary "before you watch" explainer link, under the CTA */
.sbnd__guide {
    display: inline-block;
    margin-top: 16px;
    font-size: .9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    padding-bottom: 2px;
    transition: color .15s ease, border-color .15s ease;
}
.sbnd__guide:hover {
    color: #fff;
    border-bottom-color: var(--sbnd-blue-bright, #3a68ff);
}

/* Side poster card */
.sbnd__poster {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    width: 210px;
    max-width: 30%;
    display: block;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
    transition: transform .18s ease;
}
.sbnd__poster:hover { transform: translateY(-4px) scale(1.02); }
.sbnd__poster img { display: block; width: 100%; height: auto; }

/* Hide the default front-page hero while the takeover is active */
body.has-promo-takeover .fp-promo-hero { display: none; }

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sbnd__character { right: 0; max-width: 62%; opacity: .85; }
    .sbnd__poster { display: none; }
    .sbnd__inner { justify-content: flex-start; }
}

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .sbnd__hero { min-height: 380px; background-position: center; }
    .sbnd__inner { min-height: 380px; padding: 28px 18px; text-align: center; justify-content: center; }
    .sbnd__character {
        max-width: 100%;
        height: 92%;
        right: 50%;
        transform: translateX(50%);
        opacity: .45;
    }
    .sbnd__content { max-width: 100%; margin: 0 auto; }
    .sbnd__logo { margin: 0 auto; width: min(88%, 420px); }
    .sbnd__date { font-size: 1rem; letter-spacing: .12em; }
    .sbnd__btn { padding: 14px 34px; }
    .sbnd__strip { font-size: .74rem; gap: 7px; }
    .sbnd__strip-text { flex-basis: 100%; text-align: center; order: 3; }
}

/* ══════════════════════════════════════════════════════════════════
 * Site header + nav restyle — ONLY while the takeover is active.
 * Scoped to body.promo-spiderman, so normal visitors see the usual
 * teal header. Single-day-campaign styling.
 * ════════════════════════════════════════════════════════════════ */

/* Nav bar: teal (#62b0ba) -> Spider-Man red. Scoped to the SITE header only
   (the one containing .top-holder) so it never touches article <header
   class="entry-header"> elements. */
body.promo-spiderman header:has(.top-holder),
body.promo-spiderman header #nav,
body.promo-spiderman .nav-wrapper {
    background: #c11119;
    background: linear-gradient(180deg, #e2231a 0%, #a50f16 100%);
}

/* Dropdown sub-menus inherit the red so they don't flash teal */
body.promo-spiderman header #nav li ul {
    background: #a50f16;
}

/* Blue web-accent edge where the nav meets the page content */
body.promo-spiderman .nav-wrapper {
    box-shadow: 0 2px 0 0 var(--sbnd-blue-bright, #3a68ff), 0 7px 20px rgba(31, 69, 196, .45);
    position: relative;
    z-index: 3;
}

/* Deep-navy top bar to carry the Spidey palette.
   NB: no `overflow: hidden` here — it would clip the search autocomplete
   dropdown, which overflows below the bar. */
body.promo-spiderman header .top-holder {
    position: relative;
    background-color: #070b1a;
    background-image: radial-gradient(120% 140% at 50% -40%, rgba(31, 69, 196, .38) 0%, rgba(7, 11, 26, 0) 60%);
}

/* Lift the logo + search row above the nav bar (3) so the search autocomplete
   dropdown (a descendant) stacks over it instead of being trapped behind. */
body.promo-spiderman header .top-holder .top.wrapper {
    position: relative;
    z-index: 30;
}

/* ── Header logo badge (replaces the app badge while the campaign runs) ── */
.sbnd-headbadge {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    text-decoration: none;
    padding: 4px 2px;
    transition: transform .15s ease;
}
.sbnd-headbadge:hover { transform: translateY(-1px); }
.sbnd-headbadge__logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 100%;
    filter: drop-shadow(0 2px 10px rgba(31, 69, 196, .6));
}
.sbnd-headbadge__cta {
    font-family: "Open Sans", Arial, sans-serif;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sbnd-red, #e2231a);
    padding: 2px 8px;
    border-radius: 3px;
}
.sbnd-headbadge:hover .sbnd-headbadge__cta { background: var(--sbnd-red-bright, #ff3b2e); }

@media (max-width: 960px) {
    .sbnd-headbadge__logo { height: 30px; }
    .sbnd-headbadge__cta { font-size: .62rem; }
}