/* Brand Color Definitions */
/* https://www.tints.dev/ */
/* The light and dark shades are picked after plugging the medium shade into tints.dev. */
/* Generally use -50, -400, -500, -600 and -800 shades from that site. */
/* In cases where the -ult color is wonky just pick something that looks nice. */

:root {
    --color-primary-ult: #e7e7f6;
    --color-primary-lt: #4647b1;
    --color-primary: #262770;
    --color-primary-dk: #1f1f5e;
    --color-primary-udk: #11123d;
    --color-secondary-ult: #feeded;
    --color-secondary-lt: #f84e51;
    --color-secondary: #de1f26;
    --color-secondary-dk: #de1f26;
    --color-secondary-udk: #61070b;
}

/* Auto Scaling Font Sizes (fs = font size, lh = line height */
/* https://www.fluid-type-scale.com/ */
/* NOTE: Scales based on the font size defined on the HTML element. */

:root {
    /* Body Text */
    --fs-sm: clamp(0.889rem, 0.18vi + 0.802rem, 0.938rem);
    --lh-sm: 1.6;
    --fs-md: clamp(1rem, 0.463vi + 0.778rem, 1.125rem);
    --lh-md: 1.6;
    --fs-lg: clamp(1.125rem, 0.833vi + 0.725rem, 1.35rem);
    --lh-lg: 1.6;
    /* Headings */
    --fs-h6: clamp(0.889rem, 0.18vi + 0.802rem, 0.938rem);
    --lh-h6: 1.6;
    --fs-h5: clamp(1rem, 0.463vi + 0.778rem, 1.125rem);
    --lh-h5: 1.6;
    --fs-h4: clamp(1.125rem, 0.833vi + 0.725rem, 1.35rem);
    --lh-h4: 1.6;
    --fs-h3: clamp(1.266rem, 1.312vi + 0.636rem, 1.62rem);
    --lh-h3: 1.5;
    --fs-h2: clamp(1.424rem, 1.927vi + 0.499rem, 1.944rem);
    --lh-h2: 1.4;
    --fs-h1: clamp(1.602rem, 2.707vi + 0.302rem, 2.333rem);
    --lh-h1: 1.3;
}

/* General Stuff */

html {
    height: 100%;
    min-height: 100%;
    min-height: 100vh;
    font-size: 16px;
    line-height: 1.6;
}

body {
    height: 100%;
    min-height: 100%;
    min-height: 100vh;
    margin: 0 0;
    padding: 0 0;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: var(--fs-md);
    font-weight: normal;
    line-height: var(--lh-md);
    color: #000000;
    background-color: #FFFFFF;
}

#frmMaster {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-height: 100vh;
}

/* Some Bootstrap Fixes */

.container-xl {
    max-width: 1366px;
}

hr {
    opacity: 1;
}

.modal {
    z-index: 99990;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px) !important;
}

textarea {
    resize: none;
}

.card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);

    .card-body {
        padding: 1.25rem 1.25rem;
    }
}

.shadow {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.33) !important;
}

figure {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 0.75rem;

    figcaption {
        display: none;
    }

    img {
        position: relative;
        object-fit: cover;
        object-position: center center;
        width: 100%;
        height: 100%;
    }
}

.caption {
    margin-bottom: 0;
}

.btn {
    &.btn-lg {
        font-size: var(--fs-md);
        line-height: var(--lh-md);
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

.ratio {
    &.ratio-google-map {
        padding-bottom: 35%;

        @media (max-width : 991px) {
            padding-bottom: 50%;
        }

        @media (max-width : 767px) {
            padding-bottom: 75%;
        }
    }
}

/* ADA Skip Links */

.skip_links {
    text-align: left;
    position: fixed;
    z-index: 99999;

    a {
        position: absolute;
        left: -10000px;
        width: 1px;
        height: 1px;
        overflow: hidden;

        &:focus, &:active {
            position: static;
            left: 5px;
            top: 5px;
            width: auto;
            height: auto;
            padding: 1rem 1rem;
            overflow: visible;
            text-decoration: none;
            color: #000000;
            border: 1px solid #FFFFFF;
            background-color: #FCFCFC;
        }
    }
}


/* Header */

header {
    flex-grow: 0;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    z-index: 9995;
    font-size: var(--fs-md);
    line-height: var(--lh-md);
    color: #FFFFFF;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.33) 170px, rgba(0, 0, 0, 0) 220px), url('/images/layout/header-bg-grayscale.webp');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    &:has(.hero.bg-color) {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.66), rgba(0, 0, 0, 0.33) 170px, rgba(0, 0, 0, 0) 220px), url('/images/layout/header-bg-color.webp');
        background-size: cover;
        background-position: center top;
        background-repeat: no-repeat;
    }

    a:not(.btn) {
        color: #FFFFFF;
        text-decoration: none;

        &:hover {
            color: #FFFFCC;
        }
    }

    .header-logo {
        width: 100%;
        max-width: 144px;
        height: auto;

        @media (max-width : 767px) {
            max-width: 256px;
        }
    }

    .header-links {
        margin-bottom: 0;

        li.list-inline-item {
            text-align: center;

            &:not(:last-child) {
                margin-right: 2rem;
            }

            i {
                font-size: var(--fs-h1);
                line-height: var(--lh-h1);
            }
        }
    }

    .hero {
        padding-top: 1.25rem;

        @media (max-width : 991px) {
            padding-top: 0;
        }
    }

    @media (max-width : 991px) {
        padding-bottom: 0;
        background-size: initial !important;
        background-position: center top;
        background-repeat: no-repeat;

        .container-xl {
            padding-left: 0;
            padding-right: 0;
        }
    }
}

/* Navbar */

nav {
    flex-grow: 0;
    z-index: 9990;
    color: #FFFFFF;
    background-color: transparent;
}

/* Main Content */

main {
    flex-grow: 1;
    color: #000000;
    background-color: #FFFFFF;

    section {

        .container-xl,
        .container-fluid {
            padding: 3rem 1rem;
        }

    }

    a:not(.btn) {
        &, &:visited {
            color: #FF3333;
            text-decoration: none;
        }

            &:hover {
                color: #3333FF;
                text-decoration: none;
            }
    }

    p, ul, ol {
        margin-bottom: 1.5rem;
        text-wrap: pretty;
    }

    ul, ol {
        padding-left: 1.5rem;
    }

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-bottom: 1.5rem;
        font-weight: 500;
        color: #303030;
        text-wrap: balance;
    }

    h1, .h1 {
        font-size: var(--fs-h1);
        font-weight: bold;
        line-height: var(--lh-h1);

        .subtitle {
            display: block;
            color: var(--color-primary);
        }
    }

    h2, .h2 {
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
    }

    h3, .h3 {
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
    }

    h4, .h4 {
        font-size: var(--fs-h4);
        line-height: var(--lh-h4);
    }

    h5, .h5 {
        font-size: var(--fs-h5);
        line-height: var(--lh-h5);
    }

    h6, .h6 {
        font-size: var(--fs-h6);
        line-height: var(--lh-h6);
    }

    small, .small-text {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
    }

    .large-text {
        font-size: var(--fs-lg);
        line-height: var(--lh-lg);
    }
}

/* Footer */

footer {
    flex-grow: 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-sm);
    color: #FFFFFF;
    background-color: #404040;
    background: linear-gradient(to bottom, #202020 0%,#303030 100%);

    .footer-main {
        padding: 3rem 1rem;
    }

    .footer-copyright {
        padding: 2rem 1rem;
        text-align: center;
        background-color: #202020;
        border-top: 1px solid transparent;
        border-image-source: linear-gradient(to right, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.33) 50%, rgba(255,255,255,0.0) 100%);
        border-image-slice: 5;
    }

    h2, .h2 {
        margin-bottom: 0.25rem;
        font-size: var(--fs-h4);
        font-weight: bold;
        line-height: var(--lh-h4);
    }

    hr {
        margin-top: 0;
        margin-bottom: 0.75rem;
        border-width: 2px;
        color: #FFFFFF;
    }

    a:not(.btn) {
        &, &:visited {
            color: #FFFFFF;
            text-decoration: none;
        }

            &:hover {
                color: #FFFF00;
                text-decoration: none;
            }
    }

    ul.fa-ul {
        margin-left: 2rem;

        span.fa-li {
            width: 2rem;
        }
    }
}

/* Back to Top Button */

.back-to-top {
    z-index: 9999;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
}

/* Swiper */

.swiper-container {
    position: relative;
    width: 100%;
    height: auto;
    background-color: transparent;

    .swiper-slide {
        position: relative;

        &:not(.swiper-slide-active) {
            opacity: 0 !important;
        }

        .img-fluid {
            width: 100%;
            height: auto;
        }

        .slide-title {
            position: absolute;
            bottom: 60px;
            right: 0;
            display: flex;
            justify-content: center;
            flex-direction: column;
            font-size: var(--fs-h1);
            font-weight: bold;
            color: #FFFFFF;
            line-height: var(--lh-h1);
            text-align: center;

            .slide-title-text {
                align-self: center;
                padding: 1rem 1.5rem 1.25rem 8rem;
                background-color: rgba(0,0,0,0.75);
                background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 20%,rgba(0,0,0,0.75) 100%);
            }
        }
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: rgba(255,255,255,0.75);
    }

    .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
        background-color: #000000;
        opacity: 0.5;
    }

    .swiper-pagination-bullet-active {
        background-color: #FFFFFF;
        opacity: 0.9;
    }

    @media (max-width : 767px) {

        .swiper-button-next,
        .swiper-button-prev,
        .swiper-pagination {
            display: none;
        }

        .swiper-slide {
            position: relative;
            display: flex;
            flex-direction: column;

            img {
                position: relative;
            }

            .slide-title {
                position: relative;
                top: initial;
                right: inherit;
                bottom: inherit;
                left: initial;
                font-size: var(--font-h4);
                line-height: 1.5;
                background-color: #404040;

                .slide-title-text {
                    margin-bottom: 0;
                    padding: 16px 16px;
                    background-color: transparent;
                    background: none;
                    -webkit-border-radius: 0px;
                    -moz-border-radius: 0px;
                    border-radius: 0px;
                }
            }
        }
    }
}

/* Colored Sections */

section {
    &.bg-red-grid {
        color: #FFFFFF;
        background-color: var(--color-secondary);
        background: url('/images/layout/bg-red-grid.webp');
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;

        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            color: #FFFFFF;
        }
    }

    &.bg-gray {
        color: #FFFFFF;
        background-color: #202020;

        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            color: #FFFFFF;
        }

        .card {
            color: #000000;
            background-color: #FFFFFF;
        }
    }

    &.bg-blue {
        color: #FFFFFF;
        background-color: var(--color-primary);

        h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
            color: #FFFFFF;
        }

        a:not(.btn) {
            &,&:visited {
                color: #FFFFCC;
            }
            &:hover {
                color: #FFFF00;
            }
        }

        .table-dark {
            border: 1px solid rgba(0,0,0,0.50);

            tr {
                th {
                    background-color: rgba(0,0,0,0.33);
                }

                td {
                    background-color: rgba(0,0,0,0.25);
                }

                &:nth-child(2n+1) {
                    td {
                        background-color: rgba(0,0,0,0.125);
                    }
                }
            }
        }
    }
}

/* Contact Page */

.ratio {
    &.google-map {
        padding-bottom: 33%;
        border-top: 4px solid #FFFFFF;
        background-color: #FFFFFF;

        @media (max-width : 767px) {
            padding-bottom: 75%;
        }
    }
}

/* Fuel Prices */

.fuel-prices {
    text-align: center;

    table {
        margin: 0 auto;
    }

        table td {
            padding: 0 20px;
        }

    .fuel-price {
        font-size: 180%;
        line-height: 100%;
        text-align: center;

        sup {
            top: -0.45em;
            margin-left: 2px;
            font-size: 60%;
        }

        @media only screen and (max-width: 768px) {
            font-size: 120%;
            line-height: 100%;
            text-align: center;
        }
    }

    .fuel-name {
        font-size: 90%;
        line-height: 150%;
        text-align: center;

        @media only screen and (max-width: 768px) {
            font-size: 70%;
            line-height: 150%;
            text-align: center;
        }
    }
}

/* Service Plans */

.plans {
    .plan {
        padding: 1.25rem 1.25rem;
        background-color: #F0F0F0;
        border: 1px solid #CCCCCC;
        border-radius: 0.25rem;

        &:nth-child(2n) {
            background-color: #F8F8F8;
        }

        &:not(:last-child) {
            margin-bottom: 1.5rem;
        }
    }
}

/* Forms */

fieldset {
    margin: 0 0 25px;
    padding: 20px;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    border-radius: 4px;

    h2 {
        margin-top: 0;
        font-weight: bold;
        text-align: center;
    }

    h3 {
        margin-top: 0;
        font-weight: normal;
        text-align: center;
    }

    .checkbox input[type="checkbox"] {
        position: relative;
        top: 0;
        margin-right: 12px;
    }

    .checkbox label {
        font-weight: normal !important;
    }

    hr {
        border-color: #CCCCCC;
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }

    textarea {
        resize: none;
    }

    label {
        font-size: 16px;
        line-height: 150%;
    }

    .form-group {
        margin-bottom: 15px;
    }

    label {
        font-size: 16px;
        line-height: 150%;
        max-width: 100%;
        margin-bottom: 5px;
        font-weight: bold;
    }
}

/* Privacy Policy */

h2.priv-heading {
    text-decoration: underline;
}