/*
 * i18n_geo_suggest.css — soft language-switch banner styles.
 *
 * Top-fixed slide-in. Doesn't block scroll/focus. Pushes content down via
 * its own height (it doesn't reflow body padding — keeps Phase 8.1 byte
 * count stable on non-checkout pages by only touching this asset).
 *
 * Namespace: .scgs- (SoundCreation Geo Suggest) — avoids collision with
 * .orb- (Orbit), .ap- (claude.css), .sim- (subscriber simulator), etc.
 *
 * Brand colors (match Orbit email scheme, deployed 2026-04-14):
 *   #D72680 — magenta (primary CTA)
 *   #201D33 — dark brand (headline text)
 *
 * Cache-bust: bump ?v=N in index.tpl on any change here.
 *
 * See: docs/i18n/geo_suggest_banner_implementation_plan.md §11.E
 */

/* Clip the document's horizontal overflow ONLY while the banner is showing.
 * The site has a pre-existing ~12px horizontal overflow (Bootstrap .row negative
 * margins). Without this rule, on mobile the visual viewport can pan, making the
 * banner appear to shift. Class is added/removed by the JS module so it doesn't
 * affect the page when the banner is dismissed.
 *
 * Three-layer defense:
 *   1. overflow-x: hidden on html (root scroller container) — most important
 *   2. overflow-x: hidden on body — secondary, in case html's transfer fails
 *   3. touch-action: pan-y — disables horizontal touch-pan gestures on mobile,
 *      even when the document technically has overflow.
 */
html.scgs-banner-active,
body.scgs-banner-active {
    overflow-x: hidden;
}
body.scgs-banner-active {
    touch-action: pan-y;
}

.scgs-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483600;               /* effectively max; beats any site sticky/fixed elements */
    background: #ffffff;
    border-bottom: 4px solid #D72680;  /* brand magenta — distinct visible boundary;
                                          replaces the box-shadow we removed below */
    /* box-shadow REMOVED 2026-05-14 evening: iOS Safari included the shadow's
     * 20px blur radius in document overflow calculations, causing a 12-20px
     * horizontal pan even with overflow-x:hidden on html+body. The magenta
     * border alone provides the visual separator. */
    transform: translateY(-100%);
    transition: transform 300ms ease-out;
    font-family: inherit;
    padding: 14px 24px;
    box-sizing: border-box;
    max-width: 100vw;                  /* defensive: ensure banner never exceeds visual viewport */
    overflow: hidden;                  /* clip any inner content that might overflow */
}

.scgs-banner.scgs-visible { transform: translateY(0); }
.scgs-banner.scgs-dismissing { transform: translateY(-100%); }

.scgs-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.scgs-text {
    flex: 1;
    min-width: 0;
}

.scgs-headline {
    display: block;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: #201D33;
    margin-bottom: 2px;
}

.scgs-subhead {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #666666;
}

.scgs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.scgs-btn {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    line-height: 1.4;
    font-family: inherit;
    white-space: nowrap;
}

.scgs-btn-primary {
    background: #D72680;
    color: #ffffff;
}

.scgs-btn-primary:hover,
.scgs-btn-primary:focus {
    background: #b51e6c;
    color: #ffffff;
    text-decoration: none;
}

.scgs-btn-secondary {
    background: transparent;
    color: #666666;
    border: 1px solid #dddddd;
}

.scgs-btn-secondary:hover,
.scgs-btn-secondary:focus {
    background: #f5f5f5;
    color: #333333;
}

.scgs-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #999999;
    padding: 4px 10px;
    cursor: pointer;
    font-family: inherit;
}

.scgs-close:hover,
.scgs-close:focus {
    color: #333333;
}

/* Stack vertically on narrow screens */
@media (max-width: 768px) {
    .scgs-banner {
        padding: 14px 16px 16px;       /* slightly more bottom-padding for breathing room */
    }
    .scgs-content {
        flex-direction: column;
        gap: 12px;                     /* slightly larger gap between text and actions */
        align-items: stretch;
    }
    .scgs-actions {
        justify-content: space-between;
        width: 100%;
        gap: 8px;
    }
    .scgs-btn {
        flex: 1;
        text-align: center;
        padding: 12px 20px;            /* taller tap target (was 8px) — meets ≥44px touch-target guideline */
        font-size: 14px;
        min-height: 44px;
    }
    .scgs-close {
        flex: 0 0 auto;
        font-size: 26px;               /* slightly larger × for easier tap */
        padding: 6px 14px;
        min-width: 44px;               /* min tap target */
    }
}

/* Reduce motion accessibility — skip slide animation */
@media (prefers-reduced-motion: reduce) {
    .scgs-banner {
        transition: none;
    }
}