:root {
    
    /* Colors */
    --color-primary: hsla(15, 71%, 46%, 1);
    --black-1: var(--bs-black);
    --black-2: var(--bs-gray-900);
    --gray-1: var(--bs-gray-800);
    --gray-2: var(--bs-gray-700);
    --gray-3: var(--bs-gray-600);
    --gray-4: var(--bs-gray-500);
    --orange-1: var(--bs-orange);

    /* Fonts */
    --ff-1: "countach", sans-serif;
    --ff-2: "bebas-neue-pro-expanded", sans-serif;

    /* Font Sizes */
    --fs-base: 20px;
    
    /* FS 900: 46.00px → 86.00px */
    --fs-900: clamp(46px, calc(2rem + 4.00vw), 86px);
    
    /* FS 800: 40.00px → 60.00px */
    --fs-800: clamp(40px, calc(1.8rem + 2.00vw), 60px);
    
    /* FS 700: 36.00px → 46.00px */
    --fs-700: clamp(36px, calc(1.6rem + 1.50vw), 46px);

    /* FS 600: 24.00px → 34.00px */
    --fs-600: clamp(24px, calc(1.3rem + 1.00vw), 34px);
    
    /* FS 500: 24.00px → 28.00px */
    --fs-500: clamp(24px, calc(1.2rem + 0.40vw), 28px);

    /* FS 400: 24.00px → 26.00px */
    --fs-400: clamp(20px, calc(1.1rem + 0.20vw), 24px);

    /* FS 350: 18.00px → 22.00px */
    --fs-350: clamp(20px, calc(18px + 0.40vw), 22px);

    /* FS 300: 20.00px */
    --fs-300: 1rem;

    --fs-h1: var(--fs-900);
    --fs-h2: var(--fs-800);
    --fs-h3: var(--fs-700);
    --fs-h4: var(--fs-600);
    --fs-h5: var(--fs-500);
    --fs-h6: var(--fs-400);
    --fs-body: var(--fs-300);
    --fs-small: calc(.85 * var(--fs-body));
    --fs-extra-small: calc(.75 * var(--fs-body));

    /* Font Weights */
    --fw-400: 400; /* Normal */
    --fw-500: 500; /* Medium */
    --fw-600: 600; /* Semibold */
    --fw-700: 700; /* Bold */
    --fw-light: var(--fw-300);
    --fw-regular: var(--fw-400);
    --fw-medium: var(--fw-500);
    --fw-semibold: var(--fw-600);
    --fw-bold: var(--fw-700);

    /* Letter Spacing */
    --letter-spacing-paragraph: auto;
    --letter-spacing-140: 0.14em;
    --letter-spacing-180: 0.18em;
    --letter-spacing-320: 0.32em;
    --letter-spacing-440: 0.44em;
    --letter-spacing-1900: 1.9em;

    /* Section Padding */
    --section-padding-y: 3rem;

    /* Images */
    --background-pattern-location: url('../images/grain.png');
    --rock-decoration-location: url('../images/rock-path.png');
    --rock-svg-decoration-location: url('../images/rock-path.svg');
}

@media (min-width: 992px) {
    :root {
        --section-padding-y: 4rem;
    }
}

/* Mini Reset */

img, picture, svg, video {
    max-width: 100%;
}

/* Base Section Styles */

::selection {
    background-color:var(--bs-info);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    color: var(--bs-white);
}

html, body {
    font-size: var(--fs-base);
    color: var(--bs-gray-600);
}

body {
    min-width: 320px;
}

/* Makes the footer always display at bottom of page */
.page-grid {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    overflow-x: hidden;
    min-height: 100vh;
}

header { }

main { }

footer { }

footer > .container {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 2rem;
}

footer ul li {
    margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
    footer > .container {
        display: flex;
        flex-flow: row nowrap;
        align-items: start;
        gap: 5rem;
        justify-content: space-between;
    }
    
}

@media (min-width: 992px) {
    .footer-info {
        display: flex;
        flex-flow: row wrap;
        gap: 2rem;
        justify-content: start;
    }
}

@media (min-width: 1480px) {
    .container {
        max-width: 1440px;
    }
}


/* Logos */
.footer-logo-link {
    display: block;
    max-width: 240px;
}

article,
section,
footer {   
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
}

article.decoration-top,
section.decoration-top {
    position: relative;
    isolation: isolate;
}

article.decoration-top::before,
section.decoration-top::before {
    /* content */
    content: '';
    background: var(--rock-decoration-location);
    background-size: auto 100%;
    background-repeat: repeat-x;

    /* Opacity */
    opacity: 0%;
    
    /* sizing */
    width: 100%;
    padding-bottom: 34px;
    
    /* positioning */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Address */

address.contact-address {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.5rem;
    justify-content: center;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
}

address.contact-address .address-line {
    color: var(--bs-white);
    margin: 0;
    display: flex;
    gap: 1rem;
    align-items: center;
}

address.contact-address .address-line a {
    color: var(--bs-white);
}


/* Headers */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    text-wrap: balance;
}

h1, .h1 {
    font-family: var(--ff-1);
    font-size: var(--fs-h1);
    font-weight: var(--fw-regular);
    font-style: italic;
    color: var(--heading-color, inherit);
    line-height: 1.023em;  
    margin-bottom: 1rem; 
}

h2, .h2 {
    font-family: var(--ff-1);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    font-style: italic;
    color: var(--heading-color, inherit);
}

h3, .h3 {
    font-family: var(--ff-1);
    font-size: var(--fs-h3);
    font-weight: var(--fw-regular);
    font-style: italic;
    color: var(--heading-color, inherit);
}

h4, .h4 {
    font-family: var(--ff-2);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    font-style: normal;
    color: var(--body-color, inherit);
}

h5, .h5 {
    font-family: var(--ff-2);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    font-style: normal;
    color: var(--body-color, inherit);
}

h6, .h6 {
    font-family: var(--ff-2);
    font-size: var(--fs-h6);
    font-weight: var(--fw-semibold);
    font-size: 1.2rem;
    font-style: normal;
    color: var(--body-color, inherit);
}

p, li {
    font-family: var(--ff-2);
    color: var(--body-color, inherit);
}

li {
    margin-bottom: 0.5rem;
}

/* ul - First level style */
ul {
    list-style-type: square;
}

/* ul - Second level style */
ul > li ul {
    list-style-type: disc;
}

/* ul - Third level style */
ul > li ul > li ul {
    list-style-type: circle;
}

ul li::marker {
    color: var(--bs-primary);
    font-size: 1rem;
}

/* Figure / Images */

figure {
    position: relative;
}

.splide figcaption {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.5rem 1rem;
    background: var(--background-pattern-location) var(--bs-gray-800);
    color: var(--bs-white);    
}


/* Typography Colors */

.text-white {
    color: var(--bs-gray-500) !important;
}


/* Backgrounds */

.bg-primary {
    --heading-color: var(--bs-white);
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-primary);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

.bg-secondary {
    --heading-color: var(--bs-primary);
    --body-color: var(--bs-white);

    /* Background Styles */
    background-color: var(--bs-gray-600);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Black */
.bg-black-1, .bg-black {
    --heading-color: var(--bs-primary);
    --body-color: var(--bs-white);

    /* Background Styles */
    background-color: var(--bs-black);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Gray - 900 */
.bg-gray-900, .bg-black-2 {
    --heading-color: var(--bs-primary);
    --body-color: var(--bs-gray-600);
    
    /* Background Styles */
    background-color: var(--bs-gray-900);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Gray - 800 */
.bg-gray-800, .bg-gray-1 {
    --heading-color: var(--bs-white);
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-gray-800);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Gray - 700 */
.bg-gray-700, .bg-gray-2 {
    --heading-color: var(--bs-white);
    --body-color: var(--bs-white);

    /* Background Styles */
    background-color: var(--bs-gray-700);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Gray - 600 */
.bg-gray-600, .bg-gray-3 {
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-gray-600);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}



/* Gray - 500 */
.bg-gray-500, .bg-gray-4 {
    --header-color: var(--bs-primary);
    --body-color: var(--bs-gray-700);

    /* Background Styles */
    background-color: var(--bs-gray-500);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* White */
.bg-white {
    --header-color: var(--bs-primary);
    --body-color: var(--bs-gray-700);

    /* Background Styles */
    background-color: var(--bs-white);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Orange */
.bg-orange, .bg-orange-1 {
    --header-color: var(--bs-white);
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-orange);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Success */
.bg-success {
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-success);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Info */
.bg-info {
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-info);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Warning */
.bg-warning {
    --body-color: var(--bs-gray-700);
    
    /* Background Styles */
    background-color: var(--bs-warning);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Danger */
.bg-danger {
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-danger);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Dark */
.bg-dark {
    --body-color: var(--bs-white);
    
    /* Background Styles */
    background-color: var(--bs-dark);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Light */
.bg-light {
    --header-color: var(--bs-gray-700);
    --body-color: var(--bs-gray-700);
    
    /* Background Styles */
    background-color: var(--bs-light);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

.bg-body-tertiary {
    --header-color: var(--bs-white);
    --body-color: var(--bs-white);

    /* Background Styles */
    background-color: var(--bs-gray-900);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    
    /* Default Text Color */
    color: var(--body-color);
}

/* Text Colors */

.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.text-orange {
    color: var(--bs-orange) !important;
}

.text-success {
    color: var(--bs-success) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

.text-gray-500 {
    color: var(--bs-gray-500) !important;
}

.text-gray-600 {
    color: var(--bs-gray-600) !important;
}

.text-gray-700 {
    color: var(--bs-gray-700) !important;
}

.text-gray-800 {
    color: var(--bs-gray-800) !important;
}

.text-gray-900 {
    color: var(--bs-gray-800) !important;
}

.text-black {
    color: var(--bs-black) !important;
}

.text-white {
    color: var(--bs-white) !important;
}

/* Form Styles */

/* Bootstrap overrides */

.form-control {
    padding:1rem 1rem;
    border-radius: 0;
}

input:-internal-autofill-selected {
    appearance: none;
    background-image: none !important;
    background-color: transparent !important;
    color: var(--color-white) !important;
}

input.form-control, 
input.form-control:focus, 
textarea.form-control,
textarea.form-control:focus {
    color: var(--bs-gray-800);
    background-color: transparent;
    border: 2px solid var(--bs-secondary);
    border-radius: none;
    transition: border-color .2s linear;
}

input.form-control:focus,
input.form-control:focus-visible,
textarea.form-control:focus {
    outline: none;
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-gray-500);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    box-shadow: none;
}

.input-group-wrapper {
    --transition-timing: .3s;
    border-radius: 5px;
    margin: 1rem calc(-.5 * var(--bs-gutter-x));
    background-color: transparent;
    transition: 
        padding var(--transition-timing) linear, 
        background-color var(--transition-timing) linear;
}

.input-group-wrapper:focus-within {
    background-color: rgba(var(--bs-gray-900-rgb), .1);
}

.submit-btn {
    background-color: var(--bs-primary);
    background-image: var(--background-pattern-location);
    background-repeat: repeat;
    color: var(--bs-white);
    text-decoration: none !important;
    
    padding: 1rem 2.5rem;
    outline: none;
    
    text-wrap: balance;
    border: 2px solid var(--bs-primary);
    border-radius: var(--bs-border-radius);
    transition: all .2s linear, color .2s linear;

    position: relative;
    isolation: isolate;
}

.submit-btn-wrapper:hover .submit-btn,
.submit-btn:focus-visible {
    padding: 1rem 4rem 1rem 1rem;
    color: var(--bs-white);
    font-weight: 600;
    text-shadow: 0px 1px 5px rgba(var(--bs-primary-rgb), 1);
    border: 2px solid transparent;
}

.submit-btn:focus-visible {
    outline: 4px solid var(--bs-info);
}

.submit-btn-wrapper {
    overflow: hidden;
}

.submit-btn-wrapper::after {
    font: var(--fa-font-light);
    color: var(--bs-white);
    content: '\e20a';
    position: absolute;
    top: 50%;
    right: -1.5rem;
    transform: translateY(-50%);
    z-index: 1;
    
    opacity: 0;
    user-select: none;

    transition: all .2s linear;
}

.submit-btn-wrapper:hover::after,
.submit-btn-wrapper:focus-within::after {
    right: 1.75rem;
    opacity: 1;
}

.reset-btn {
    background-color: transparent;
    color: var(--bs-gray-700);
    padding: 1rem 2.5rem;
    border: 2px solid var(--bs-gray-600);
    border-radius: var(--bs-border-radius);
    font-weight: var(--fw-medium);
    transition: color .2s linear, border-color .2s linear;
}

.reset-btn:hover {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.reset-btn:focus-visible {
    background-color: transparent;
    color: var(--color-primary);
    padding: 1rem 2.5rem;
    font-weight: var(--fw-medium);
    transition: color .2s linear;
    border: 2px solid var(--color-primary);
    border-radius: var(--bs-border-radius);
    outline: none;
}


/* Color Samples */
.color-sample {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-flow: column;
    width: 100%;
    --webkit-aspect-ratio: 1 /1;
    aspect-ratio: 1 / 1;
    padding:1rem;
}