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

html {
    font-size: var(--font-size-base);
    font-family: var(--sans-serif-font-family);
    line-height: var(--line-height-base);
}

body {
    background-color: var(--body-bg-color);
    color: var(--body-txt-color);
}

a {
    color: var(--body-lnk-color);
    transition: color 0.5s ease-in-out;
    text-decoration: none;
}
a:hover {
    color: var(--body-lnk-hov-color);
}

img {
    max-width: 100%;
}

#site-header {
    background-color: var(--body-bg-color);
}
#site-header .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-standard);
}
#site-header .container > .company {
    flex-grow: 1;
}
#site-header .container > .contact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--gap-small);
}
#site-header .container > .contact > div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gap-standard);
}
#site-header .logo {
    width: 100%; 
    height: 100%;
}
#site-header .company > .td1 {
    color: var(--body-lnk-hov-color);
}
/* 2. Small (sm) - Landscape Phones */
@media (min-width: 576px) {
    #site-header .logo {
        max-width: 75px;
    }
}

/* 3. Medium (md) - Tablets */
@media (min-width: 768px) {
    #site-header .logo {
        max-width: 75px;
    }
}

/* 4. Large (lg) - Laptops/Desktops */
@media (min-width: 992px) {
    #site-header .logo {
        max-width: 75px;
    }
}

/* 5. Extra Large (xl) - Large Desktops */
@media (min-width: 1200px) {
    #site-header .logo {
        max-width: 100px;
    }
}

/* 6. Extra Extra Large (xxl) - Massive Screens */
@media (min-width: 1400px) {
    #site-header .logo {
        max-width: 125px;
    }
}




/* CONTAINERS */
.container {
    width: 100%;
    margin: 0 auto;
    max-width: var(--container-max-width);
}
.container-fw {
    width: 100%;
    margin: 0 auto;
}
.grunge-texture {
    background-image: url('../images/grunge_texture.jpeg');
}
.grunge-texture-overlay-dark {
    background-image: linear-gradient(var(--body-bg-overlay-color), var(--body-bg-overlay-color)), url('../images/grunge_texture.jpeg');
}
.grunge-texture-overlay-light {
    background-image: linear-gradient(var(--body-bg-overlay-light-color), var(--body-bg-overlay-light-color)), url('../images/grunge_texture.jpeg');
}
.grunge-texture, .grunge-texture-overlay-dark, .grunge-texture-overlay-light {
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}
.blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

section.bgalt {
    background-color: var(--body-alt-bg-color);
}


/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--header-font-family);
    color: var(--body-txt-heading-color);
}

.td1, .td2, .td3, .td4, .td5, .td6 {
    font-family: var(--display-font-family);
}
.td1 { font-size: 2.00em; }
.td2 { font-size: 1.50em; }
.td3 { font-size: 1.17em; }
.td4 { font-size: 1.00em; }
.td5 { font-size: 0.83em; }
.td6 { font-size: 0.67em; }

.tt-upper {
    text-transform: uppercase;
}


p {
    margin: 0;
    margin-bottom: 0.5rem;
}
p:last-of-type {
    margin-bottom: 0;
}
hr {
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: 0;
    width: 100%;
    height: 1px;
    max-height: 1px;
    border: none;
    overflow: hidden;
    background-color: var(--body-txt-color);
    opacity: 0.75;
}
.t-pad {
    padding: var(--gap-small) var(--gap-standard);
}
.t-pad-standard {
    padding: var(--gap-standard);
}
.t-pad-small {
    padding: var(--gap-small);
}
.t-pad-large {
    padding: var(--gap-large);
}

/* FOOTER LEGAL */
#footer-legal > .container, #footer-legal .footer-legal-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: end;
}
#footer-legal > .container {
    padding: 1rem 2rem;
    gap: var(--lrg-gap);
}
#footer-legal .footer-legal-nav ul {
    margin: 0;
    gap: var(--med-gap);
    list-style: none;
    text-transform: uppercase;
    font-size: 0.8em;
}
#footer-legal .footer-copyright {
    flex-grow: 1;
}




/* PADDING */
.pad-1-2 {
    padding: 1rem 2rem;
}
.pad-1 {
    padding: 1rem;
}
.pad-2 {
    padding: 2rem;
}

/* COOKIE BANNER */
#cookie-site-wrap {
    transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}
#cookie-site-wrap.cookie-is-blurred {
    filter: blur(8px);
    -webkit-filter: blur(8px);
}
body:has(#cookie-site-wrap.cookie-is-blurred) {
    overflow: hidden;
}
.cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 99998;
}
.cookie-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 500px;
    padding: 1rem 2rem;
    z-index: 99999;
    background-color: var(--body-bg-color);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
}
.cookie-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--lrg-gap);
}
.cookie-button {
    display: flex;
    justify-content: flex-end;
}
.btn-accept {
    background: var(--button-primary-bg-color);
    color: var(--button-primary-txt-color);
    padding: 0.5rem 1rem;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
}
.btn-accept:hover {
    color: var(--button-primary-lnk-hov-color);
}