/**
 * ============================================================
 * SAHF NEWSLETTER SECTION
 * ============================================================
 *
 * Light institutional treatment.
 *
 * Visual direction:
 * - Warm light background
 * - Deep navy typography
 * - Gold accent
 * - Subtle dark decorative line work
 *
 * Functionality is handled by the existing newsletter JS.
 *
 * ============================================================
 */

.newsletter-section {

    --ns-bg: #F3EFE7;
    --ns-bg-soft: #ECE7DC;

    --ns-navy: #0B1F33;
    --ns-navy-deep: #071523;

    --ns-gold: #C9A24D;
    --ns-gold-dark: #9A7A34;

    --ns-text: #0B1F33;
    --ns-text-muted: #526170;

    --ns-border: rgba(11, 31, 51, 0.18);
    --ns-border-soft: rgba(11, 31, 51, 0.10);

    --ns-decoration: rgba(11, 31, 51, 0.07);

    --ns-danger: #A95F48;
    --ns-success: #526A4C;

    --ns-max: 680px;

    --ns-gutter: clamp(20px, 4vw, 48px);

    position: relative;

    overflow: hidden;

    padding:
        clamp(84px, 12vw, 148px)
        var(--ns-gutter);

    background: var(--ns-bg);

    color: var(--ns-text);

    font-family: 'Inter', sans-serif;

    text-align: center;

    -webkit-font-smoothing: antialiased;
}


/* ============================================================
   Box Sizing
   ============================================================ */

.newsletter-section,
.newsletter-section * {
    box-sizing: border-box;
}


/* ============================================================
   Links
   ============================================================ */

.newsletter-section a {
    color: inherit;
}


/* ============================================================
   Background Illustration / Grid
   ============================================================
 *
 * Previously this was a light grid designed for a navy
 * background.
 *
 * It is now a subtle dark line treatment designed for a
 * light background.
 *
 * ============================================================ */

.newsletter-section::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        repeating-linear-gradient(
            90deg,
            var(--ns-decoration) 0 1px,
            transparent 1px 140px
        );

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 22%,
            #000 78%,
            transparent
        );

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 22%,
            #000 78%,
            transparent
        );
}


/* ============================================================
   Content Wrapper
   ============================================================ */

.newsletter-section-wrap {

    position: relative;

    max-width: var(--ns-max);

    margin: 0 auto;

    z-index: 1;
}


/* ============================================================
   Decorative Rule
   ============================================================ */

.newsletter-section-rule {

    width: 44px;

    height: 1px;

    margin:
        0 auto
        clamp(28px, 4vw, 40px);

    background: var(--ns-gold);

    opacity: .8;
}


/* ============================================================
   Eyebrow
   ============================================================ */

.newsletter-section-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color: var(--ns-gold-dark);

    text-transform: uppercase;

    letter-spacing: .16em;

    font-size: .74rem;

    font-weight: 500;
}


.newsletter-section-eyebrow::before {

    content: "";

    width: 20px;

    height: 1px;

    background: var(--ns-gold);
}


/* ============================================================
   Heading
   ============================================================ */

.newsletter-section-heading {

    max-width: 20ch;

    margin: 0 auto;

    color: var(--ns-navy-deep);

    font-family: "Playfair Display", serif;

    font-size: clamp(1.9rem, 4vw, 2.7rem);

    font-weight: 600;

    line-height: 1.28;

    letter-spacing: -.01em;
}


/* ============================================================
   Description
   ============================================================ */

.newsletter-section-desc {

    max-width: 52ch;

    margin: 22px auto 0;

    color: var(--ns-text-muted);

    font-size: clamp(1rem, 1.4vw, 1.05rem);

    line-height: 1.8;
}


/* ============================================================
   FORM
   ============================================================ */

.newsletter-section-form {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    max-width: 480px;

    margin:
        clamp(36px, 5vw, 48px)
        auto 0;
}


.newsletter-section-field {

    position: relative;

    flex: 1;

    min-width: 0;

    text-align: left;
}


/* ============================================================
   Accessible Label
   ============================================================ */

.newsletter-section-label {

    position: absolute;

    width: 1px;

    height: 1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;
}


/* ============================================================
   Input Shell
   ============================================================ */

.newsletter-section-input-shell {

    display: flex;

    align-items: center;

    background: rgba(255, 255, 255, .55);

    border: 1px solid var(--ns-border);

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.newsletter-section-input-shell:focus-within {

    background: #FFFFFF;

    border-color: var(--ns-gold);

    box-shadow:
        0 0 0 3px rgba(201, 162, 77, .10);
}


.newsletter-section-form[data-invalid="true"]
.newsletter-section-input-shell {

    border-color: var(--ns-danger);
}


/* ============================================================
   Input
   ============================================================ */

.newsletter-section-input {

    width: 100%;

    min-height: 54px;

    padding: 0 18px;

    background: transparent;

    border: none;

    color: var(--ns-navy-deep);

    font-family: inherit;

    font-size: .96rem;
}


.newsletter-section-input::placeholder {

    color: #788493;

}


.newsletter-section-input:focus {

    outline: none;
}


.newsletter-section-input:disabled {

    opacity: .6;

}


/* ============================================================
   Submit Button
   ============================================================ */

.newsletter-section-submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 54px;

    padding: 0 30px;

    border: 1px solid var(--ns-gold);

    background: var(--ns-gold);

    color: var(--ns-navy-deep);

    cursor: pointer;

    font-family: inherit;

    font-size: .9rem;

    font-weight: 500;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.newsletter-section-submit:hover {

    background: #DCB769;

    border-color: #DCB769;

    transform: translateY(-1px);
}


.newsletter-section-submit:active {

    transform: translateY(0);
}


.newsletter-section-submit:disabled {

    opacity: .6;

    cursor: not-allowed;

}


/* ============================================================
   Loading
   ============================================================ */

.newsletter-section-spinner {

    display: none;

    width: 14px;

    height: 14px;

    border: 2px solid rgba(7, 21, 35, .25);

    border-top-color: var(--ns-navy-deep);

    border-radius: 50%;

    animation:
        newsletter-spinner .7s linear infinite;
}


.newsletter-section-submit[data-loading="true"]
.newsletter-section-spinner {

    display: inline-block;
}


.newsletter-section-submit[data-loading="true"]
.newsletter-section-submit-label {

    display: none;
}


@keyframes newsletter-spinner {

    to {

        transform: rotate(360deg);

    }

}


/* ============================================================
   Error
   ============================================================ */

.newsletter-section-error {

    display: block;

    min-height: 1.4em;

    margin-top: 8px;

    color: var(--ns-danger);

    font-size: .8rem;

    line-height: 1.4;
}


/* ============================================================
   Success
   ============================================================ */

.newsletter-section-success {

    display: none;

    align-items: center;

    justify-content: center;

    gap: 12px;

    max-width: 480px;

    margin:
        clamp(36px, 5vw, 48px)
        auto 0;

    padding: 20px 24px;

    background: rgba(255, 255, 255, .45);

    border: 1px solid var(--ns-border);
}


.newsletter-section-success[data-visible="true"] {

    display: flex;
}


.newsletter-section-success-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 20px;

    height: 20px;

    border: 1px solid var(--ns-success);

    border-radius: 50%;

    color: var(--ns-success);
}


.newsletter-section-success-icon svg {

    width: 11px;

    height: 11px;

}


.newsletter-section-success-text {

    color: var(--ns-navy-deep);

    font-size: .94rem;

    text-align: left;

}


/* ============================================================
   Trust
   ============================================================ */

.newsletter-section-trust {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;

    color: var(--ns-text-muted);

    font-size: .76rem;
}


.newsletter-section-trust-dot {

    opacity: .5;

}


/* ============================================================
   Honeypot
   ============================================================ */

.newsletter-section-hp {

    position: absolute;

    left: -9999px;

    top: -9999px;
}


/* ============================================================
   Accessibility
   ============================================================ */

.newsletter-section button:focus-visible,
.newsletter-section input:focus-visible {

    outline: 2px solid var(--ns-gold);

    outline-offset: 3px;

}


/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .newsletter-section *,
    .newsletter-section::before {

        animation: none !important;

        transition: none !important;

    }

}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 560px) {

    .newsletter-section-form {

        flex-direction: column;

    }


    .newsletter-section-submit {

        width: 100%;

    }


    .newsletter-section-success {

        flex-direction: column;

        text-align: center;

    }


    .newsletter-section-success-text {

        text-align: center;

    }

}