/* ================================================
   Pages
   Styles specific to individual pages.
   Global layout and component styles live in
   style.css and components.css respectively.
   ================================================ */


/* ================================================
   Index — Subscribe Success Message
   ================================================ */

#subscribe-success {
    border-left: var(--border-width-rg) solid var(--tertiary-500);
    padding-left: var(--spacing-16);
}

#subscribe-success h6 {
    color: var(--text-default-heading);
    margin-bottom: var(--spacing-8);
}

#subscribe-success p {
    color: var(--text-default-body);
}


/* ================================================
   Transactional Pages — Confirm, Unsubscribe
   ================================================ */

.transactional {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-24);
    padding: var(--space-1280)
             clamp(var(--space-320), 5vw, var(--space-960));
    max-width: 560px;
    margin: 0 auto;
}

.transactional__divider {
    width: 100%;
    height: var(--border-width-sm);
    background-color: var(--tertiary-500);
    margin-bottom: var(--spacing-8);
}


/* ================================================
   Policy Page
   ================================================ */

.policy {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--space-1280)
             clamp(var(--space-320), 5vw, var(--space-960))
             var(--space-960);
}

.policy__header {
    margin-bottom: var(--spacing-48);
    padding-bottom: var(--spacing-32);
    border-bottom: var(--border-width-sm) solid var(--tertiary-500);
}

.policy__overline {
    color: var(--text-default-caption);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: var(--spacing-12);
}

.policy__date {
    color: var(--text-default-caption);
    margin-top: var(--spacing-12);
}

.policy__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
}

.policy__section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.policy__section a {
    color: var(--text-primary-default);
    border-bottom: var(--border-width-sm) solid var(--borders-primary-default);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.policy__section a:hover {
    color: var(--text-primary-hover);
    border-color: var(--borders-primary-hover);
}


/* ================================================
   Entreat — Contact Page
   ================================================ */

.entreat {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
    padding: var(--space-1280)
             clamp(var(--space-320), 5vw, var(--space-960))
             clamp(var(--space-640), 6vw, var(--space-1120));
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
}

.entreat__header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.entreat__definition {
    color: var(--text-default-body);
}

.entreat__name-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
}

.entreat__subscribe {
    display: flex;
    align-items: center;
    gap: var(--space-80);
}

.entreat__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-80);
    cursor: pointer;
    color: var(--text-default-body);
}

.entreat__checkbox-label input[type="checkbox"] {
    width: var(--space-160);
    height: var(--space-160);
    cursor: pointer;
    accent-color: var(--lapis-glaze-500);
}

.field--textarea {
    height: auto;
    align-items: flex-start;
    padding: var(--space-120) var(--space-160);
}

.field--textarea textarea {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    resize: vertical;
    color: inherit;
    font: inherit;
}

.field--textarea textarea::placeholder {
    color: var(--text-default-placeholder);
}

.field select {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    color: var(--text-default-body);
    font: inherit;
    cursor: pointer;
}

.field select option {
    color: var(--diorite-800);
}

#entreat-success {
    border-left: var(--border-width-rg) solid var(--tertiary-500);
    padding-left: var(--spacing-16);
}

@media (min-width: 1120px) {
    .entreat {
        max-width: 640px;
    }

    .entreat__name-row {
        flex-direction: row;
        gap: var(--spacing-16);
    }

    .entreat__name-row .input-wrapper {
        flex: 1;
    }
}