/* ============================================================
   Block: innovation-action-banner

   Outer wrapper styles (gradient, min-height, container, sticky
   menu) come from the compiled site stylesheet:
     scss/pages/_omnichannel.scss → .omnichannel-banner
     scss/pages/_innovation.scss  → .innovation-banner
     scss/globals/_global.scss    → .inner-sticky-menu / .scrollToSection

   This file only adds the new inner-content elements that the dev
   handoff introduced (eyebrow, Doxsona mark, ACE pill, h1, lede,
   primary/secondary CTAs). All scoped under .innovation-action-banner
   so they can't leak to other banners.
   ============================================================ */

/* ---- Re-anchor the sticky menu inside THIS banner when NOT pinned.

   Using `:not(.menuFixed)` means this rule is inert in the pinned
   state (so it can never break the fixed-to-top behavior wired up
   by app.js). It only activates *after* the unpin step removes
   `.menuFixed`, and re-asserts the bottom anchor in case any other
   CSS (WP's is-layout-constrained rules, etc.) has interfered. */

.innovation-action-banner .inner-sticky-menu:not(.menuFixed) {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

.innovation-action-banner .banner-content {
    color: var(--wp--preset--color--background, #fff);
    padding-bottom: 96px !important;
}

/* ---- Eyebrow ---- */

.innovation-action-banner .iab-eyebrow {
    display: inline-block;
    margin: 0 0 18px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px ;
    text-transform: uppercase;
    line-height: 1;
}

/* ---- Brand line: Doxsona mark + ACE pill ---- */

.innovation-action-banner .iab-brandline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 28px;
}

.innovation-action-banner .iab-doxsona-mark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--wp--preset--color--background, #fff);
}

.innovation-action-banner .iab-doxsona-svg {
    flex-shrink: 0;
    display: block;
}

.innovation-action-banner .iab-doxsona-name {
    color: var(--wp--preset--color--background, #fff);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}

.innovation-action-banner .iab-ace-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 8px;
    color: var(--wp--preset--color--background, #fff);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

/* ---- Headline ---- */

.innovation-action-banner .iab-h1 {
    margin: 0 0 22px !important;
    color: var(--wp--preset--color--background, #fff) !important;
    font-size: clamp(34px, 5vw, 54px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.022em;
    font-weight: 700;
}

/* ---- Lede paragraph ---- */

.innovation-action-banner .iab-lede {
    margin: 0 0 36px !important;
    max-width: 760px;
    color: var(--wp--preset--color--background, #fff) !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
}

.innovation-action-banner .iab-lede strong {
    color: var(--wp--preset--color--background, #fff);
    font-weight: 700;
}

/* ---- CTAs ---- */

.innovation-action-banner .iab-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 26px;
}

.innovation-action-banner .iab-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    background-color: var(--wp--preset--color--background, #fff);
    color: #016de1;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.innovation-action-banner .iab-cta-primary:hover,
.innovation-action-banner .iab-cta-primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
    color: var(--wp--preset--color--darkblue, #006ae1);
}

.innovation-action-banner .iab-cta-arrow {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.innovation-action-banner .iab-cta-primary:hover .iab-cta-arrow {
    transform: translateX(4px);
}

.innovation-action-banner .iab-cta-secondary {
    display: inline-block;
    padding-bottom: 2px;
    color: var(--wp--preset--color--background, #fff);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid white;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.innovation-action-banner .iab-cta-secondary:hover,
.innovation-action-banner .iab-cta-secondary:focus-visible {
    color: var(--wp--preset--color--light-pink, #f2dbee);
    border-bottom-color: var(--wp--preset--color--background, #fff);
}

/* ---- Responsive ---- */

@media (max-width: 991px) {
    .innovation-action-banner .banner-content {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
    }
    .innovation-action-banner .iab-h1 {
        font-size: clamp(28px, 6vw, 38px) !important;
    }
    .innovation-action-banner .iab-doxsona-name { font-size: 22px; }
    .innovation-action-banner .iab-ace-pill     { font-size: 18px; padding: 5px 12px; }
}

@media (max-width: 600px) {
    .innovation-action-banner .iab-ctas { gap: 14px; }
    .innovation-action-banner .iab-cta-primary {
        padding: 12px 20px;
        font-size: 14px;
        width: 100%;
        justify-content: center;
    }
}