/* ============================================
    TA — BASE
    Reset, universal element styles, containers and helpers.
============================================ */

/* ==========================================================================
   UNIVERSAL / BASE
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--ta-font);
    font-weight: var(--ta-fw-book);
    font-size: var(--ta-fs-16);
    line-height: 1.5;
    color: var(--ta-black);
    background: var(--ta-page-bg);
    background-color: var(--ta-page-bottom);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ta-font);
    font-weight: var(--ta-fw-bold);
    line-height: 1.2;
    color: inherit;
    margin: 0;
}

p {
    margin: 0 0 1em;
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ta-ease), background-color var(--ta-ease), border-color var(--ta-ease), opacity var(--ta-ease);
}
a:hover {
    color: inherit;
}

button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
label[for],
select,
summary {
    cursor: pointer;
}
button {
    font-family: inherit;
}
button:disabled,
.disabled {
    cursor: not-allowed;
}

input,
textarea,
select {
    font-family: inherit;
}

img,
svg,
video {
    max-width: 100%;
    vertical-align: middle;
}
img {
    height: auto;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

del {
    text-decoration-thickness: 1px;
}

:focus-visible {
    outline: 2px solid var(--ta-orange);
    outline-offset: 2px;
}

::selection {
    background: var(--ta-primary);
    color: var(--ta-white);
}

/* ---- Containers (like Bootstrap's, but sized to the design) ---- */
.ta-container,
.ta-container-wide,
.ta-container-xl {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--ta-gutter);
}
.ta-container      { max-width: var(--ta-container); }
.ta-container-wide { max-width: var(--ta-container-wide); }
.ta-container-xl   { max-width: var(--ta-container-xl); }

/* ---- Section spacing ---- */
.ta-section {
    padding-block: var(--ta-section-y);
}

/* ---- Helpers ---- */
.ta-text-primary { color: var(--ta-primary); }
.ta-text-navy    { color: var(--ta-navy); }
.ta-bg-dark      { background-color: var(--ta-dark); color: var(--ta-white); }
.ta-bg-black     { background-color: var(--ta-black); color: var(--ta-white); }
.ta-bg-mint      { background-color: var(--ta-mint); }
.ta-bg-cream     { background-color: var(--ta-cream); }

@media (max-width: 991.98px) {
    :root {
        --ta-section-y: 60px;
        --ta-fs-60: 2.875rem;
        --ta-fs-46: 2.25rem;
        --ta-fs-39: 2rem;
        --ta-fs-37: 2rem;
        --ta-fs-33: 1.75rem;
    }
}
@media (max-width: 575.98px) {
    :root {
        --ta-section-y: 48px;
        --ta-fs-60: 2.375rem;
        --ta-fs-46: 1.875rem;
        --ta-fs-39: 1.75rem;
        --ta-fs-37: 1.75rem;
        --ta-fs-33: 1.5rem;
        --ta-fs-30: 1.5rem;
        --ta-fs-27: 1.375rem;
    }
}