/* =========================================================
   Weatherby Age Gate — age-gate.css
   Brand palette:
     Black:       #1a1a1a
     Off-white:   #f5f3f0
     Warm earth:  #8b7355
     Mid grey:    #4a4a4a
   Font: Oswald (already loaded by the theme)
   ========================================================= */

/* Overlay — full-screen dark curtain */
#wag-overlay {
    display: none; /* JS sets this to flex immediately on load */
    position: fixed;
    inset: 0;
    z-index: 999999;
    background-color: rgba(15, 15, 15, 0.96);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    animation: wag-fadein 0.25s ease;
}

@keyframes wag-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal card */
#wag-modal {
    background-color: #f5f3f0;
    max-width: 480px;
    width: 100%;
    padding: 3rem 2.5rem;
    text-align: center;
    box-sizing: border-box;
    /* Weatherby uses sharp corners (border-radius: 0) */
    border-top: 4px solid #1a1a1a;
}

/* Logo */
#wag-logo {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Heading */
#wag-modal h2#wag-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

/* Body copy */
#wag-modal p {
    font-family: sans-serif;
    font-size: 0.95rem;
    color: #4a4a4a;
    line-height: 1.6;
    margin: 0 0 1.75rem 0;
}

/* Button group */
#wag-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

/* Shared button base */
#wag-buttons button {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.75rem 1.75rem;
    border: 2px solid #1a1a1a;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    min-width: 140px;
    box-sizing: border-box;
}

/* Yes — primary / filled */
#wag-yes {
    background-color: #1a1a1a;
    color: #f5f3f0;
}
#wag-yes:hover,
#wag-yes:focus {
    background-color: #333;
    outline: none;
}

/* No — ghost */
#wag-no {
    background-color: transparent;
    color: #1a1a1a;
}
#wag-no:hover,
#wag-no:focus {
    background-color: #e8e4df;
    outline: none;
}


/* Prevent body scroll while gate is visible */
body.wag-active {
    overflow: hidden;
}

/* Denial state */
#wag-denied h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a1a1a;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 1rem 0;
    line-height: 1.2;
}

#wag-denied p {
    font-family: sans-serif;
    font-size: 0.95rem;
    color: #4a4a4a;
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
}

#wag-denied-sub {
    font-size: 0.85rem !important;
    color: #8b7355 !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    #wag-modal {
        padding: 2rem 1.5rem;
    }
    #wag-modal h2#wag-heading {
        font-size: 1.3rem;
    }
    #wag-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    #wag-buttons button {
        min-width: unset;
        width: 100%;
    }
}