/* ===================================
   FONT IMPORTS
   =================================== */

/* Bellissima Script Pro (your WOFF2 path) */
@font-face {
    font-family: 'bellissima-script-pro';
    src: url('../fonts/bellissima-pro/bellissima-script-pro.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Improves loading performance */
}

/* Engravers LH Bold */
@font-face {
    font-family: 'engravers-lh-bold';
    src: url('../fonts/engravers/engravers-lh-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Engravers LT Std Bold */
@font-face {
    font-family: 'engravers-lt-std-bold';
    src: url('../fonts/engravers/engravers-lt-std-bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ===================================
   ROOT VARIABLES
   =================================== */
:root {
    --hero-logo-size: 140px;        /* Logo size (increase to make larger) */
    --hero-padding-y: 2rem;         /* Top & bottom spacing for hero */
    --label-font-size: 2rem;        /* Size for 'Foreign' & 'Domestic' */
    --bar-height: 8px;              /* Thickness of the bars */
    --garage-title-size: 7rem;      /* Size of 'GARAGE' */
    --garage-subtitle-size: 2rem;   /* Size of subtitle text */
    --garage-mechanics-size: 3rem;  /* Size of mechanics text */
    --curators-size: 4rem;          /* Size of 'curators' script */
    --timeless-size: 4rem;          /* Size of timeless motorsport */
}

/* ===================================
   HERO SECTION
   =================================== */
.gomoto-hero {
    background-color: black;                  /* Hero background color */
    padding: var(--hero-padding-y) 0;         /* Vertical spacing for hero */
    text-align: center;
    color: #fff;
}

.hero-container {
    display: flex;                            /* Flex to align L, center, R */
    justify-content: space-between;           /* Spread left and right sides */
    align-items: center;                      /* Vertically align */
    width: 100%;
    max-width: 1600px;                        /* Limit total width */
    margin: 0 auto;                           /* Center horizontally */
    gap: 1rem;                                /* Gap between elements */
}

.hero-side {
    display: flex;
    flex-direction: column;                   /* Stack bars and label vertically */
    align-items: center;
    flex: 1;                                  /* Each side grows/shrinks equally */
}

.fluid-bars {
    width: 100%;                              /* Fill available width (fluid) */
    height: var(--bar-height);
    background: linear-gradient(
            to right,
            red 33%,
            white 33%,
            white 66%,
            blue 66%
    );
    /* Red-white-blue stripes */
}

.hero-label {
    font-family: 'bellissima-script-pro', cursive; /* Use Bellissima Script Pro */
    font-size: var(--label-font-size);
    margin-top: 0.5rem;                       /* Space below bar */
}

.hero-center {
    padding: 0 2rem;                          /* Horizontal spacing around logo */
}

.hero-logo {
    width: var(--hero-logo-size);
    height: auto;
}

/* ===================================
   GARAGE SECTION
   =================================== */
.garage-section {
    text-align: center;
    padding: 3rem 1rem;
    background-color: black;
    color: white;
}

.garage-title {
    font-family: 'engravers-lh-bold', serif;
    font-size: var(--garage-title-size);
}

.garage-subtitle {
    font-family: 'engravers-lt-std-bold', serif;
    font-size: var(--garage-subtitle-size);
}

.garage-mechanics {
    font-family: 'engravers-lt-std-bold', serif;
    font-size: var(--garage-mechanics-size);
}

.garage-curators {
    font-family: 'bellissima-script-pro', cursive;
    font-size: var(--curators-size);
    margin-top: 2rem;
}

/* ===================================
   LAND CRUISER SECTION
   =================================== */
.landcruiser-section {
    text-align: center;
    background-color: black;
    color: white;
    padding: 3rem 1rem;
}

.landcruiser-img {
    max-width: 600px;
    width: 80%;
    margin: 0 auto 2rem;
    display: block;
}

.landcruiser-script {
    font-family: 'bellissima-script-pro', cursive;
    font-size: var(--timeless-size);
}

.landcruiser-links p {
    font-family: 'engravers-lt-std-bold', serif;
    font-size: var(--garage-subtitle-size);
    margin: 1rem 0;
}

/* ===================================
   RESPONSIVENESS
   =================================== */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        gap: 1rem;
    }

    .fluid-bars {
        height: 5px;
    }

    .garage-title {
        font-size: 4rem;
    }
}