/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
.policy-page {
    min-height: 100vh;
    background: var(--color-gray-light);
    color: var(--color-black);
    font-family: var(--font-body);
}

.policy-main {
    padding-top: var(--navbar-height);
    background: var(--color-gray-light);
}

.policy-hero {
    display: flex;
    min-height: calc(100svh - var(--navbar-height));
    flex-direction: column;
    justify-content: flex-end;
    padding-top: var(--space-14);
    padding-bottom: var(--space-9);
}

.policy-heading h1 {
    margin: var(--space-0);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-3xl), 5.25vw, 4.75rem);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
}

.policy-lead {
    margin: var(--space-4) var(--space-0) var(--space-0);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: clamp(var(--text-base), 1.55vw, var(--text-xl));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body);
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
}

.policy-meta {
    align-self: flex-end;
    max-width: 24rem;
    margin-top: var(--space-8);
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: clamp(var(--text-sm), 1vw, var(--text-base));
    font-style: italic;
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-align: right;
}

.policy-meta p {
    margin: var(--space-0);
}

.policy-meta p + p {
    margin-top: var(--space-2);
}

.policy-meta a {
    color: var(--color-black);
    text-decoration-thickness: var(--border-width-sm);
    text-underline-offset: var(--space-1);
}

.policy-body {
    display: grid;
    gap: clamp(var(--space-7), 2.5vw, var(--space-10));
    padding-bottom: var(--space-15);
}

.policy-item {
    width: 100%;
}

.policy-item h2 {
    margin: var(--space-0);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-lg), 1.7vw, var(--text-xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-normal);
}

.policy-item p,
.policy-item li {
    color: var(--color-black);
    font-family: var(--font-body);
    font-size: clamp(var(--text-base), 1.05vw, var(--text-lg));
    font-weight: var(--font-weight-medium);
    line-height: 1.42;
    letter-spacing: var(--letter-spacing-normal);
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
}

.policy-item p {
    width: 100%;
    margin: var(--space-3) var(--space-0) var(--space-0);
}

.policy-item ul {
    display: grid;
    gap: var(--space-2);
    width: 100%;
    margin: var(--space-3) var(--space-0) var(--space-0);
    padding-left: var(--space-7);
}

.policy-contact {
    display: grid;
    grid-template-columns: minmax(var(--space-0), 1fr) auto;
    gap: var(--space-8);
    align-items: end;
    margin-top: var(--space-6);
    padding-top: var(--space-7);
    border-top: var(--border-width-md) solid var(--color-black);
}

.policy-contact h2 {
    margin: var(--space-0);
    color: var(--color-black);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
}

.policy-contact p {
    max-width: 42rem;
    margin: var(--space-3) var(--space-0) var(--space-0);
    color: var(--color-black);
    font-size: clamp(var(--text-base), 1.1vw, var(--text-lg));
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-body);
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
}

.policy-contact a {
    display: inline-flex;
    min-height: var(--space-11);
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-6);
    background: var(--color-black);
    color: var(--color-surface);
    font-family: var(--font-heading);
    font-size: clamp(var(--text-sm), 1vw, var(--text-base));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-none);
    text-decoration: none;
    text-transform: lowercase;
    transition:
        background var(--transition-fast) var(--easing-standard),
        color var(--transition-fast) var(--easing-standard),
        transform var(--transition-fast) var(--easing-standard);
}

.policy-contact a:hover,
.policy-contact a:focus-visible {
    background: var(--color-primary-dark);
    color: var(--color-surface);
    transform: translateY(calc(var(--space-1) * -1));
}

@media (max-width: 900px) {
    .policy-main {
        padding-top: var(--navbar-height-mobile);
    }

    .policy-hero {
        min-height: 0;
        padding-top: var(--space-13);
        padding-bottom: var(--space-9);
    }

    .policy-meta {
        align-self: flex-start;
        text-align: left;
    }

    .policy-contact {
        grid-template-columns: 1fr;
        align-items: start;
    }
}

@media (max-width: 620px) {
    .policy-hero {
        padding-top: var(--space-10);
    }

    .policy-heading h1 {
        font-size: clamp(var(--text-2xl), 11vw, var(--text-3xl));
    }

    .policy-body {
        gap: var(--space-8);
        padding-bottom: var(--space-13);
    }

    .policy-item ul {
        padding-left: var(--space-6);
    }

    .policy-contact a {
        width: 100%;
    }
}