/* =============================================================================
   Visibility: Hide staging area and hidden banners/slots
   ============================================================================= */

#codegeek-banner-staging,
.codegeek-banner[hidden],
.codegeek-banner-slot[hidden] {
    display: none !important;
}

/* =============================================================================
   Slot: Full-width block container that holds the positioned banner
   ============================================================================= */

.codegeek-banner-slot {
    display: block;
    width: 100%;
}

/* =============================================================================
   Banner: Base layout and box model
   ============================================================================= */

.codegeek-banner {
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.codegeek-banner *,
.codegeek-banner *::before,
.codegeek-banner *::after {
    box-sizing: border-box;
}

/* =============================================================================
   Content: Remove default margins from first and last direct children
   ============================================================================= */

.codegeek-banner__content > :first-child {
    margin-top: 0;
}

.codegeek-banner__content > :last-child {
    margin-bottom: 0;
}

/*
 * Trim Spacing modifier: Remove top/bottom spacing from first and last text
 * elements at any nesting depth, overriding theme styles.
 */

.codegeek-banner--trim-spacing .codegeek-banner__content p:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h1:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h2:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h3:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h4:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h5:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h6:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content ul:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content ol:first-child,
.codegeek-banner--trim-spacing .codegeek-banner__content blockquote:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.codegeek-banner--trim-spacing .codegeek-banner__content p:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h1:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h2:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h3:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h4:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h5:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content h6:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content ul:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content ol:last-child,
.codegeek-banner--trim-spacing .codegeek-banner__content blockquote:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* =============================================================================
   Close button: Base positioning and reset
   ============================================================================= */

.codegeek-banner__close {
    position: absolute;
    z-index: 2;
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   Close button variants
   ============================================================================= */

/* x icon only — shared base */
.codegeek-banner__close--x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 999px;
}

.codegeek-banner__close--x.codegeek-banner__close--size-small {
    width: 1.5rem;
    height: 1.5rem;
}

.codegeek-banner__close--x.codegeek-banner__close--size-small svg {
    width: 0.9rem;
    height: 0.9rem;
}

.codegeek-banner__close--x.codegeek-banner__close--size-medium {
    width: 2rem;
    height: 2rem;
}

.codegeek-banner__close--x.codegeek-banner__close--size-medium svg {
    width: 1.25rem;
    height: 1.25rem;
}

.codegeek-banner__close--x.codegeek-banner__close--size-large {
    width: 2.25rem;
    height: 2.25rem;
}

.codegeek-banner__close--x.codegeek-banner__close--size-large svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Text label variants (Close, x Close, Dismiss) — shared base */
.codegeek-banner__close--close,
.codegeek-banner__close--x-close,
.codegeek-banner__close--dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 1.5rem;
    min-height: 1.5rem;
    border-radius: 999px;
}

.codegeek-banner__close--close.codegeek-banner__close--size-small,
.codegeek-banner__close--x-close.codegeek-banner__close--size-small,
.codegeek-banner__close--dismiss.codegeek-banner__close--size-small {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}

.codegeek-banner__close--close.codegeek-banner__close--size-medium,
.codegeek-banner__close--x-close.codegeek-banner__close--size-medium,
.codegeek-banner__close--dismiss.codegeek-banner__close--size-medium {
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

.codegeek-banner__close--close.codegeek-banner__close--size-large,
.codegeek-banner__close--x-close.codegeek-banner__close--size-large,
.codegeek-banner__close--dismiss.codegeek-banner__close--size-large {
    font-size: 1.25rem;
    padding: 0.5rem 1rem;
}

/* x Close icon scales with font size */
.codegeek-banner__close--x-close.codegeek-banner__close--size-small svg {
    width: 0.875rem;
    height: 0.875rem;
}

.codegeek-banner__close--x-close.codegeek-banner__close--size-medium svg {
    width: 1rem;
    height: 1rem;
}

.codegeek-banner__close--x-close.codegeek-banner__close--size-large svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* =============================================================================
   Close button: Focus indicator
   ============================================================================= */

.codegeek-banner__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* =============================================================================
   Close button: Hover state
   ============================================================================= */

.codegeek-banner__close:hover {
    filter: brightness(0.95);
}