/* AdFirst Media — modular ad system.
 *
 * Placement model (see templates/extras/ads/):
 *   - Top sticky slot:  #AFM_top_ad_container > #AFM_top_ad
 *   - Body in-page slot: #body-ad-2 > .incontent-ad-container > #AFM_inContent_ad
 *
 * Both outer containers carry .in-page-ad (Igor's full-bleed base + class
 * hook for AdFirst). The top container is intentionally re-constrained to
 * the content column (max-width 62.5em, centred) — site design decision.
 * The top container may additionally carry .top-ad-border for the optional
 * bordered frame. Do NOT re-add display:none, aspect-ratio hacks, .ad-box
 * rules or .drawBorder here — AdFirst asked for those to be removed (they
 * collapsed or squeezed creatives).
 */

.in-page-ad {
    width: 100vw;
    margin-bottom: 10px;
    margin-left: calc(50% - 50vw);
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
}

/* Top + body slots: constrained to the content column (NOT full-bleed) so
 * they line up with <main>, with reserved height so empty/unfilled slots
 * render as intentional placeholders instead of collapsing to stray border
 * lines. The `in-page-ad` class is kept (AdFirst targets it); only the
 * breakout geometry is overridden here. */
#AFM_top_ad_container,
#body-ad-2 {
    width: 100%;
    max-width: 45.5em;
    margin-left: auto;
    margin-right: auto;
    min-height: 100px;
    box-sizing: border-box;
    /* ID specificity beats .in-page-ad AND .top-ad-border (equal-specificity
     * classes where source order would otherwise let inline-block win and
     * kill centring). Border visuals from .top-ad-border are unaffected. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#AFM_top_ad_container {
    position: sticky;
    top: 0;
    z-index: 101;
}

/* Optional bordered frame for the top ad. Toggle via the ADFIRST_TOP_BORDER
 * setting (templates add/remove this class, no CSS edits needed). */
.top-ad-border {
    border-width: 5px;
    border-color: var(--brand-color-mid);
    border-style: solid;
    border-top: 0;
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.63);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.63);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.63);
    display: inline-block;
    background-color: white;
}

/* Inner creative wrappers — neutral pass-throughs. Sizing is owned by the
 * AdFirst bundle so creatives render at their natural dimensions. The
 * max-width guards stop fixed-size creatives overflowing on narrow screens. */
.incontent-ad-container,
#AFM_top_ad,
#AFM_inContent_ad {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* The AdFirst bundle injects wrapper divs with explicit pixel widths and
 * default (left-aligned) margins. Flex-center the slot interiors and
 * auto-margin the injected wrappers so creatives stay centred. */
#AFM_top_ad,
.incontent-ad-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

#AFM_top_ad > div,
.incontent-ad-container > div {
    margin-left: auto;
    margin-right: auto;
}

.in-page-ad iframe {
    max-width: 100%;
}

/* Hard containment: nothing inside a slot may exceed the slot width.
 * max-width constrains even inline pixel widths set by vendor bundles. */
#AFM_top_ad_container *,
#body-ad-2 * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile: pin slots exactly to the content box — no full-bleed remnants,
 * no negative margins, block-level so auto margins can't collapse. */
@media (max-width: 45.5em) {
    #AFM_top_ad_container,
    #body-ad-2 {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        display: block;
        text-align: center;
    }
}

/* Legacy class names kept as no-op aliases so old cached HTML / third-party
 * snippets referencing .top-ad keep working without reintroducing the
 * removed overrides. Intentionally minimal: no width, no max-width,
 * no display:none, no aspect-ratio. */
.top-ad {
    background: transparent;
}

body {
    overflow-x: clip;
}