/* ==========================================================================
   Author: Samuel Gratts
   File: styles.css
   Date: 05/26/2025
   ========================================================================== */

/* Google Fonts Fallback */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Rubik:wght@400;700&display=swap');

/* ==========================================================================
   Root Variables
   ========================================================================== */
:root {
    /* Font Families */
    --font-heading: "futura-pt", "Rubik", "Segoe UI", Roboto, sans-serif;
    --font-body: "proxima-nova", "Inter", "Segoe UI", Roboto, sans-serif;

    /* Font Sizes */
    --fs-xs: 0.75rem;
    --fs-sm: 1rem;
    --fs-md: 1.15rem;
    --fs-lg: 1.35rem;
    --fs-xl: 1.61rem;
    --fs-2xl: 2.05rem;
    --fs-3xl: 2.75rem;
    --fs-display: 1.75rem;

    /* Padding */
    --pad-sm: 1%;
    --pad-md: 2%;

    /* Dot Background */
    --dot-bg: #1e2025;
    --dot-color: #d89828;
    --dot-size: 1px;
    --dot-space: 22px;

    /* Colors */
    --clr-body-bg: #37383c;
    --clr-nav-bg: #9a9da0;
    --clr-link: #fc9d2a;
    --clr-link-hover: #ffac46;
    --clr-text: #f2f2f2;
    --clr-heading: #e8e8e8;
    --clr-tooltip-bg: #333;
    --clr-tooltip-text: #fff;
    --clr-table-bg: #f2f2f2;
    --clr-card-bg: #eb9833;
    --clr-border: #2b2b2b;
    --clr-active-bg: #222327;
    --clr-btn: #393939;
    --clr-shadow: #232323;
}

/* ==========================================================================
   Body and Main Layout
   ========================================================================== */
body {
    font-family: var(--font-body);
    background:
        linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
        linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
        var(--dot-color);
    overflow-x: hidden;
}

main {
    padding: var(--pad-md);
    font-size: var(--fs-md);
    font-family: var(--font-body);
}

.main-body {
    background-color: var(--clr-body-bg);
}

.lead-main {
    font-size: var(--fs-lg);
    font-weight: 300;
}

/* ==========================================================================
   Typography: Headings, Paragraphs, Lists, Links
   ========================================================================== */
h1 {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);
    color: var(--clr-heading);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

h2 {
    font-family: var(--font-heading);
    font-size: var(--fs-2xl);
    color: var(--clr-text);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

h3 {
    font-family: var(--font-heading);
    font-size: var(--fs-xl);
    color: var(--clr-text);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

h4 {
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    color: var(--clr-text);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

h5 {
    color: var(--clr-text);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

p,
li {
    font-size: var(--fs-md);
    color: var(--clr-text);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

a {
    color: var(--clr-link);
    text-decoration: none;
}

.contact-email-link:hover {
    color: var(--clr-link-hover) !important;
}

.web-title-clr {
    color: var(--clr-link);
}

.display-custom {
    font-size: var(--fs-display);
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */
.navbar {
    top: 20px;
    background-color: var(--clr-body-bg);
}

.nav-bg {
    background-color: var(--clr-nav-bg);
}

.nav-item a {
    color: var(--clr-link);
    font-size: var(--fs-md);
}

.navbar-nav .nav-link.active {
    color: var(--clr-link);
    background-color: var(--clr-active-bg);
}

.navbar-toggler {
    background-color: var(--clr-nav-bg);
}

.nav-link:focus,
.nav-link:hover {
    color: var(--clr-text);
}

.nav-mobile {
    margin: 1rem 0;
    color: #6c6f76;
    border: 0;
    border-top: 1px solid;
}

/* ==========================================================================
   Badges and Tooltips
   ========================================================================== */
.badge-sz {
    height: 100px;
    width: 100px;
    padding: 18px;
}

.no-scrolling {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 100%;
}

.badge-container {
    flex: 0 0 auto;
    position: relative;
}

.tooltip-text {
    position: absolute;
    top: -1.5rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100vw;
    background-color: var(--clr-tooltip-bg);
    color: var(--clr-tooltip-text);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: var(--fs-xs);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.badge-container:hover .tooltip-text {
    opacity: 1;
}

@media (max-width: 500px) {
    .tooltip-text {
        left: 0;
        transform: none;
    }

    .no-scrolling {
        overflow-x: hidden;
    }
}

/* ==========================================================================
   Buttons, Cards, and Tables
   ========================================================================== */
button {
    color: var(--clr-btn);
}

.button-primary {
    background-color: var(--clr-btn) !important;
}

.card {
    --bs-card-bg: var(--clr-card-bg);
}

.bg-border {
    border: solid 1px var(--clr-card-bg) !important;
    border-radius: 5px;
}

th {
    background-color: var(--clr-body-bg) !important;
}

.fancy-border-table {
    box-shadow: 0 0 10px 0 var(--clr-shadow) !important;
}

.border-secondary {
    border-color: var(--clr-border) !important;
    border: 2px solid;
}

.table {
    background-color: var(--clr-table-bg);
    --bs-table-striped-color: var(--clr-body-bg);
    --bs-table-hover-color: var(--clr-table-bg);
    --bs-table-hover-bg: var(--clr-body-bg);
    color: var(--clr-body-bg);
}

.table-heading {
    font-size: var(--fs-md);
}

.table>:not(caption)>*>* {
    background-color: var(--clr-table-bg);
}

/* ==========================================================================
   Form Styles
   ========================================================================== */
#form {
    background-color: var(--clr-body-bg);
    color: var(--clr-text);
    padding: var(--pad-md);
}

.form-control {
    background-color: var(--clr-table-bg);
}

#form h2 {
    text-align: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
    background-color: var(--clr-body-bg);
}

footer p,
footer a {
    font-size: var(--fs-sm);
    color: #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   Back-to-Top Button
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    width: 35px;
    height: 35px;
    margin-right: 20px;
    --icon-opacity: 1;
    transition: right 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s, background-color 0.25s ease-in-out;
    display: none;
}

.back-to-top.show {
    display: block;
}

/* ==========================================================================
   Animations
   ========================================================================== */
.fade-image {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.fade-in {
    opacity: 1;
}

@keyframes slideInLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-left,
.slide-in-right,
.slide-in-up {
    opacity: 0;
    transform: translateX(0);
    transition: all 0.8s ease-out;
}

.slide-in-left-active {
    animation: slideInLeft 0.8s forwards;
}

.slide-in-right-active {
    animation: slideInRight 0.8s forwards;
}

.slide-in-up-active {
    animation: slideInUp 0.8s forwards;
}

/* ==========================================================================
   Hover Effects
   ========================================================================== */
.btn:hover,
img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease-in-out;
}