/**
 * ==========================================================
 * Elite Fitness
 * Public Website - Global CSS
 * ==========================================================
 *
 * File:
 * /public_html/assets/css/global.css
 *
 * ==========================================================
 */


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

:root {

    --elite-black: #111111;
    --elite-black-soft: #171717;
    --elite-dark: #202020;

    --elite-white: #ffffff;
    --elite-off-white: #f7f7f7;

    --elite-text: #171717;
    --elite-text-soft: #5f5f5f;
    --elite-text-muted: #888888;

    --elite-border: #e6e6e6;
    --elite-border-dark: #292929;

    --elite-accent: #ff5a00;
    --elite-accent-dark: #d94800;
    --elite-accent-light: #fff1e8;

    --elite-success: #15803d;
    --elite-danger: #dc2626;

    --container-width: 1320px;

    --header-height: 76px;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    --shadow-sm:
        0 2px 10px rgba(0, 0, 0, .06);

    --shadow-md:
        0 8px 30px rgba(0, 0, 0, .10);

    --transition-fast:
        160ms ease;

    --transition-normal:
        240ms ease;

}


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

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    margin: 0;
    padding: 0;

    scroll-behavior: smooth;

    text-size-adjust: 100%;
}


body {
    margin: 0;
    padding: 0;

    background: var(--elite-white);
    color: var(--elite-text);

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

    font-size: 15px;
    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


img,
svg {
    display: block;
    max-width: 100%;
}


img {
    height: auto;
}


button,
input,
textarea,
select {
    font: inherit;
}


button {
    border: 0;
}


a {
    color: inherit;
    text-decoration: none;
}


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(255, 90, 0, .35);
    outline-offset: 3px;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

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

    white-space: nowrap;

    border: 0;
}


/* ==========================================================
   CONTAINER
========================================================== */

.site-container {
    width: min(
        calc(100% - 40px),
        var(--container-width)
    );

    margin-inline: auto;
}


/* ==========================================================
   MAIN
========================================================== */

.site-main {
    min-height: 60vh;
}


/* ==========================================================
   COMMON BUTTON FOUNDATION
========================================================== */

.elite-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding:
        0 22px;

    border-radius:
        var(--radius-sm);

    background:
        var(--elite-accent);

    color:
        var(--elite-white);

    font-weight: 700;

    cursor: pointer;

    transition:
        background var(--transition-fast),
        transform var(--transition-fast);
}


.elite-button:hover {
    background:
        var(--elite-accent-dark);

    transform:
        translateY(-1px);
}


/* ==========================================================
   RESPONSIVE CONTAINER
========================================================== */

@media (
    max-width: 767px
) {

    .site-container {
        width:
            min(
                calc(100% - 28px),
                var(--container-width)
            );
    }

}