/* =========================================
   WEDDING RSVP
   ========================================= */


/* =========================================
   FONTS
   ========================================= */

   @font-face {

    font-family: "Breathing";

    src:
        url("fonts/breathing.ttf")
        format("truetype");

    font-weight:
        normal;

    font-style:
        normal;

    font-display:
        swap;
}


@font-face {

    font-family: "Typewriter";

    src:
        url("fonts/typewriter.ttf")
        format("truetype");

    font-weight:
        normal;

    font-style:
        normal;

    font-display:
        swap;
}


/* =========================================
   VARIABLES
   ========================================= */

:root {

    --cream:
        #f5f0e7;

    --black:
        #171614;

    --gray:
        #6f6a62;

    --border:
        rgba(
            23,
            22,
            20,
            0.25
        );

    /*
        Space between the browser edge
        and the invitation border.
    */

    --page-margin:
        24px;

}


/* =========================================
   RESET
   ========================================= */

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    background:
        var(--cream);

    color:
        var(--black);

    font-family:
        "Typewriter",
        monospace;

    -webkit-font-smoothing:
        antialiased;

}


/* =========================================
   PAGE
   ========================================= */

/*
    The RSVP page itself is now the
    bordered invitation.

    The border is attached to the actual
    page rather than the browser viewport.

    This means it grows naturally with
    the form and scrolls with the content.
*/

.rsvp-page {

    /*
        Make the page at least as tall as
        the visible browser window while
        allowing it to grow naturally when
        the content becomes taller.
    */

    min-height:
        calc(
            100vh -
            (var(--page-margin) * 2)
        );


    /*
        Keep the invitation inset from
        the browser edges.
    */

    width:
        calc(
            100% -
            (var(--page-margin) * 2)
        );


    /*
        Center the invitation horizontally.
    */

    margin:
        var(--page-margin)
        auto;


    /*
        The border belongs to the actual
        RSVP page.
    */

    border:
        1px solid
        rgba(
            23,
            22,
            20,
            0.08
        );


    /*
        Internal invitation spacing.
    */

    padding:
        8vh
        24px
        8vh;


    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

}


/* =========================================
   HEADER
   ========================================= */

.rsvp-header {

    width:
        100%;

    max-width:
        700px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


/* =========================================
   HEADLINE
   ========================================= */

.headline {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

    font-size:
        clamp(
            2rem,
            5vw,
            3.6rem
        );

    font-weight:
        500;

    line-height:
        0.9;

    letter-spacing:
        0.15em;

}


/* =========================================
   SCRIPT
   ========================================= */

.script {

    display:
        block;

    margin-top:
        30px;

    font-family:
        "Breathing",
        cursive;

    font-size:
        1em;

    font-weight:
        normal;

    line-height:
        0.7;

    letter-spacing:
        0;

}


/* =========================================
   INTRO
   ========================================= */

.intro {

    max-width:
        450px;

    margin:
        45px
        auto
        0;

    font-size:
        1rem;

    line-height:
        1.7;

    letter-spacing:
        0.04em;

}


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

.form-container {

    width:
        100%;

    max-width:
        650px;

    margin-top:
        65px;

}


form {

    width:
        100%;

}


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

.form-section {

    padding:
        0
        0
        45px;

    margin-bottom:
        45px;

    border-bottom:
        1px solid
        rgba(
            23,
            22,
            20,
            0.12
        );

}


.form-section:last-of-type {

    border-bottom:
        none;

}


.form-section h2 {

    margin:
        0
        0
        28px;

    font-family:
        "Typewriter",
        monospace;

    font-size:
        1rem;

    font-weight:
        normal;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;

}


/* =========================================
   FIELDS
   ========================================= */

.field {

    display:
        flex;

    flex-direction:
        column;

    width:
        100%;

}


.field-row {

    display:
        flex;

    gap:
        20px;

    width:
        100%;

    margin-bottom:
        24px;

}


.field-row:last-child {

    margin-bottom:
        0;

}


.field + .field {

    margin-top:
        24px;

}


.field-row .field + .field {

    margin-top:
        0;

}


label {

    margin-bottom:
        9px;

    font-size:
        0.8rem;

    letter-spacing:
        0.06em;

}


/* =========================================
   INPUTS
   ========================================= */

input,
textarea {

    width:
        100%;

    padding:
        13px
        12px;

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

    border-radius:
        0;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );

    color:
        var(--black);

    font-family:
        "Typewriter",
        monospace;

    font-size:
        0.9rem;

    outline:
        none;

    transition:
        border-color
        0.25s ease,

        background-color
        0.25s ease;

}


textarea {

    resize:
        vertical;

    min-height:
        130px;

    line-height:
        1.5;

}


input:focus,
textarea:focus {

    border-color:
        var(--black);

    background:
        rgba(
            255,
            255,
            255,
            0.35
        );

}


input::placeholder,
textarea::placeholder {

    color:
        var(--gray);

    opacity:
        0.7;

}


/* =========================================
   CHOICES
   ========================================= */

.choice-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}


.choice {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        0;

    cursor:
        pointer;

    font-size:
        0.9rem;

}


/*
    Hide native radio.
*/

.choice input {

    position:
        absolute;

    opacity:
        0;

    pointer-events:
        none;

}


.choice-box {

    width:
        18px;

    height:
        18px;

    flex-shrink:
        0;

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

    border-radius:
        50%;

    position:
        relative;

}


/*
    Selected state
*/

.choice input:checked
+ .choice-box::after {

    content:
        "";

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    top:
        4px;

    left:
        4px;

    border-radius:
        50%;

    background:
        var(--black);

}


/* =========================================
   GUEST FIELD
   ========================================= */

.guest-name {

    max-height:
        0;

    opacity:
        0;

    overflow:
        hidden;

    transition:
        max-height
        0.4s ease,

        opacity
        0.4s ease,

        margin-top
        0.4s ease;

}


.guest-name.visible {

    max-height:
        200px;

    opacity:
        1;

    margin-top:
        28px;

}


/* =========================================
   SUBMIT
   ========================================= */

.submit-section {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        10px;

}


.submit-button {

    min-width:
        220px;

    padding:
        15px
        30px;

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

    background:
        transparent;

    color:
        var(--black);

    font-family:
        "Typewriter",
        monospace;

    font-size:
        0.9rem;

    letter-spacing:
        0.1em;

    cursor:
        pointer;

    transition:
        background-color
        0.35s ease,

        color
        0.35s ease,

        transform
        0.35s ease;

}


.submit-button:hover {

    background:
        var(--black);

    color:
        var(--cream);

    transform:
        translateY(-2px);

}


.submit-button:active {

    transform:
        translateY(0);

}


.submit-button:disabled {

    opacity:
        0.5;

    cursor:
        wait;

    transform:
        none;

}


/* =========================================
   SUCCESS
   ========================================= */

.success-message {

    text-align:
        center;

    padding:
        40px
        20px;

}


.success-message p {

    max-width:
        450px;

    margin:
        45px
        auto
        0;

    font-size:
        1rem;

    line-height:
        1.7;

    letter-spacing:
        0.04em;

}


/* =========================================
   BACK LINK
   ========================================= */

.back-link {

    margin-top:
        60px;

    color:
        var(--black);

    font-family:
        "Typewriter",
        monospace;

    font-size:
        0.8rem;

    letter-spacing:
        0.06em;

    text-decoration:
        none;

    border-bottom:
        1px solid
        transparent;

    transition:
        border-color
        0.25s ease;

}


.back-link:hover {

    border-bottom-color:
        var(--black);

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    /*
        Smaller border inset on phones.
    */

    :root {

        --page-margin:
            14px;

    }


    .rsvp-page {

        /*
            Recalculate the minimum height
            using the smaller mobile margin.
        */

        min-height:
            calc(
                100vh -
                (var(--page-margin) * 2)
            );


        /*
            Preserve the original mobile
            vertical spacing.
        */

        padding-top:
            9vh;

        padding-bottom:
            8vh;


        /*
            Slightly tighter horizontal
            breathing room inside the border.
        */

        padding-left:
            18px;

        padding-right:
            18px;

    }


    /* ================================
       HEADLINE
       ================================ */

    .headline {

        font-size:
            clamp(
                1.8rem,
                9vw,
                2.7rem
            );

    }


    /* ================================
       INTRO
       ================================ */

    .intro {

        margin-top:
            40px;

        font-size:
            0.9rem;

    }


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

    .form-container {

        margin-top:
            55px;

    }


    .field-row {

        flex-direction:
            column;

        gap:
            24px;

    }


    .field-row
    .field + .field {

        margin-top:
            0;

    }


    .small-field {

        width:
            100%;

    }

}


/* =========================================
   REDUCED MOTION
   ========================================= */

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

    .guest-name {

        transition:
            none;

    }


    .submit-button {

        transition:
            none;

    }

}