/* Custom Properties */
:root {
    --bg-main: #F7F9F9;
    --bg-dark: #0f0f0f;
    --text-main: #1a1a1a;
    --text-light: #ffffff;
    --accent: rgb(255, 131, 0);
    --font-primary: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --container-width: 1400px;
    --container-narrow: 800px;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
    max-width: 100%; 
    overflow-x: hidden; /* Stops horizontal panning */
    scroll-behavior: smooth; 
}
body {
    font-family: var(--font-primary);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Utility */
.container { width: 92%; max-width: var(--container-width); margin: 0 auto; }
.container-narrow { max-width: var(--container-narrow); }
.section-padding { padding: 6rem 0; }
.dark-bg { background-color: var(--bg-dark); color: var(--text-light); }
.text-center { text-align: center; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
.large-text { font-size: 1.5rem; font-weight: 500; margin-bottom: 1rem; }


/* Header Container */
.site-header {
    position: fixed;
    top: auto;
    bottom: 0;
    right: 0;
    width: auto;
    z-index: 1000;
    background: transparent;
}

.header-inner {
    position: relative; 
    background-color: rgba(19, 19, 19, 0.865); 
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    
    /* FIX: Top and bottom padding are now equal (1.25rem) */
    padding: 1.25rem 4rem 1.25rem 140px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3.5rem; 
    
    clip-path: polygon(100px 0, 100% 0, 100% 100%, 0 100%);
}

/* Tikand Pattern Overlay */
.header-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='14' height='14'%3E%3Cpath fill='%23000' d='M0 0h1v1h-1ZM2 0h1v1h-1ZM4 0h7v1h-7ZM12 0h1v1h-1ZM1 1h1v1h-1ZM3 1h1v1h-1ZM5 1h5v1h-5ZM11 1h1v1h-1ZM13 1h1v1h-1ZM0 2h1v1h-1ZM2 2h2v1h-2ZM6 2h3v1h-3ZM11 2h2v1h-2ZM1 3h3v1h-3ZM7 3h1v1h-1ZM11 3h3v1h-3ZM0 4h1v1h-1ZM4 4h1v1h-1ZM7 4h1v1h-1ZM10 4h1v1h-1ZM0 5h2v1h-2ZM5 5h1v1h-1ZM7 5h1v1h-1ZM9 5h1v1h-1ZM13 5h1v1h-1ZM0 6h3v1h-3ZM6 6h3v1h-3ZM12 6h2v1h-2ZM0 7h14v1h-14ZM0 8h3v1h-3ZM6 8h3v1h-3ZM12 8h2v1h-2ZM0 9h2v1h-2ZM5 9h1v1h-1ZM7 9h1v1h-1ZM9 9h1v1h-1ZM13 9h1v1h-1ZM0 10h1v1h-1ZM4 10h1v1h-1ZM7 10h1v1h-1ZM10 10h1v1h-1ZM1 11h3v1h-3ZM7 11h1v1h-1ZM11 11h3v1h-3ZM0 12h1v1h-1ZM2 12h2v1h-2ZM6 12h3v1h-3ZM11 12h2v1h-2ZM1 13h1v1h-1ZM3 13h1v1h-1ZM5 13h5v1h-5ZM11 13h1v1h-1ZM13 13h1v1h-1Z'/%3E%3C/svg%3E");
    background-size: 70px; 
    background-repeat: repeat;
    opacity: 0.10; 
    mix-blend-mode: color-burn; 
    pointer-events: none; 
    z-index: 0; 
}

.header-inner > * {
    position: relative;
    z-index: 1;
}

/* Logo Link Wrapper */
.header-logo {
    display: block;
    flex-shrink: 0;
    color: #ffffff; /* Sets the default color for the logo mask */
    transition: color 0.2s ease;
}

/* Optional: Easy recoloring on hover */
.header-logo:hover {
    color: var(--accent, #EF8A33); 
}

/* LOGO */
.gj-logo {
    --logo-color: currentColor;
    display: block;
    height: 30px;
    aspect-ratio: 1 / 1;
    background-color: var(--logo-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201080%201080%22%20width%3D%221080%22%20height%3D%221080%22%3E%20%3Cstyle%3E%20.s0%20%7B%20fill%3A%20%23000000%20%7D%20%3C%2Fstyle%3E%20%3Cg%20id%3D%22Layer%201%22%3E%20%3Cpath%20id%3D%22%26lt%3BCompound%20Path%26gt%3B%22%20class%3D%22s0%22%20d%3D%22m1020.28%20245.69q-3.7-7.37-6.84-13.77c-14.36-29.04-27.85-56.29-58-75.12-30.85-19.23-65.55-20.8-104.44-20.8h-622.84c-38.88%200-73.58%201.57-104.42%2020.8-30.21%2018.85-43.68%2046.13-57.95%2075.01-2.17%204.38-4.41%208.93-6.89%2013.82-19.01%2037.65-31.41%2064.87-30.88%2099.48%200.57%2037.53%2017.26%2068.76%2037.35%20102.81%2024.36%2041.24%20281.66%20417.2%20283.9%20420.38%2027.21%2038.55%2059.45%2076.13%20127.92%2076.13h124.79c68.47%200%20100.71-37.58%20127.86-76.06%2035.79-50.73%20224.37-328.44%20282.34-417.87%2024.72-38.13%2040.03-69.18%2039.93-106.09-0.1-35.94-14.81-65.03-31.83-98.72zm-32.79%20188.8c-57.85%2089.25-245.99%20366.31-281.7%20416.92-24.54%2034.79-49.3%2063.59-103.81%2063.59h-124.79c-54.51%200-79.27-28.8-103.83-63.59-2.24-3.19-259.41-379.11-282.64-418.45-21.75-36.82-32.86-60.58-33.28-88.29-0.42-27.94%2010.18-51.02%2027.69-85.71%202.55-5%204.83-9.64%206.96-13.94%2013.52-27.36%2024.12-48.84%2047.22-63.25%2022.15-13.82%2047.3-16.34%2088.85-16.34h622.84c41.56%200%2066.71%202.52%2088.85%2016.34%2023.08%2014.39%2033.68%2035.85%2047.12%2063.01%202.27%204.59%204.55%209.22%207.05%2014.19%2015.97%2031.59%2028.58%2056.56%2028.66%2085.51%200.08%2029.76-12.85%2055.54-35.19%2090.01zm-454.97%20268.34l167.22-249.72-49.3-80.85h-322.94l71.53%20111.75%20131-0.06c-9.26%2017.27-34.58%2057.51-44.5%2073.64-10.5%2017.05-17.91%2017.79-36.24%2017.79q-2.62-0.01-5.54-0.01h-3.73c-15.53%200-25.72-0.57-36.65-16.54-27.99-40.86-88.61-130.65-118.06-178.29-14.11-22.84-2.78-45.62%2024-45.62h248.4l-69.63-126.05h-260.13c-76.29%200-73.65%209.14-104.24%2069.68-30.4%2060.19-31.3%2069.62%204.2%20132.32%209.31%2016.42%20108.59%20164.13%20178.71%20265.85%2010.75%2015.59%2021.65%2026.11%2048.08%2026.11zm318.27-493.96h-316.46l69.63%20126.05h163.07c26.77%200%2040.17%2022.37%2026.06%2045.21-29.44%2047.64-202.6%20300.82-230.58%20341.68-10.96%2016-24.8%2016.57-37.5%2016.57q-1.46%200-2.89-0.01c-13.46%200-174.41%200-174.41%200%2028.16%2040.92%2051.75%2074.95%2060.95%2087.98%2023.7%2033.59%2036.9%2045.21%2068.31%2045.21%2031.41%200%2030.99%200%2062.4%200%2031.42%200%2030.97%200%2062.4%200%2031.41%200%2044.61-11.62%2068.32-45.21%2033.89-48.04%20221.82-324.6%20280.73-415.48%2039.2-60.47%2034.63-72.13%204.21-132.32-30.58-60.54-27.95-69.68-104.24-69.68z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20version%3D%221.2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201080%201080%22%20width%3D%221080%22%20height%3D%221080%22%3E%20%3Cstyle%3E%20.s0%20%7B%20fill%3A%20%23000000%20%7D%20%3C%2Fstyle%3E%20%3Cg%20id%3D%22Layer%201%22%3E%20%3Cpath%20id%3D%22%26lt%3BCompound%20Path%26gt%3B%22%20class%3D%22s0%22%20d%3D%22m1020.28%20245.69q-3.7-7.37-6.84-13.77c-14.36-29.04-27.85-56.29-58-75.12-30.85-19.23-65.55-20.8-104.44-20.8h-622.84c-38.88%200-73.58%201.57-104.42%2020.8-30.21%2018.85-43.68%2046.13-57.95%2075.01-2.17%204.38-4.41%208.93-6.89%2013.82-19.01%2037.65-31.41%2064.87-30.88%2099.48%200.57%2037.53%2017.26%2068.76%2037.35%20102.81%2024.36%2041.24%20281.66%20417.2%20283.9%20420.38%2027.21%2038.55%2059.45%2076.13%20127.92%2076.13h124.79c68.47%200%20100.71-37.58%20127.86-76.06%2035.79-50.73%20224.37-328.44%20282.34-417.87%2024.72-38.13%2040.03-69.18%2039.93-106.09-0.1-35.94-14.81-65.03-31.83-98.72zm-32.79%20188.8c-57.85%2089.25-245.99%20366.31-281.7%20416.92-24.54%2034.79-49.3%2063.59-103.81%2063.59h-124.79c-54.51%200-79.27-28.8-103.83-63.59-2.24-3.19-259.41-379.11-282.64-418.45-21.75-36.82-32.86-60.58-33.28-88.29-0.42-27.94%2010.18-51.02%2027.69-85.71%202.55-5%204.83-9.64%206.96-13.94%2013.52-27.36%2024.12-48.84%2047.22-63.25%2022.15-13.82%2047.3-16.34%2088.85-16.34h622.84c41.56%200%2066.71%202.52%2088.85%2016.34%2023.08%2014.39%2033.68%2035.85%2047.12%2063.01%202.27%204.59%204.55%209.22%207.05%2014.19%2015.97%2031.59%2028.58%2056.56%2028.66%2085.51%200.08%2029.76-12.85%2055.54-35.19%2090.01zm-454.97%20268.34l167.22-249.72-49.3-80.85h-322.94l71.53%20111.75%20131-0.06c-9.26%2017.27-34.58%2057.51-44.5%2073.64-10.5%2017.05-17.91%2017.79-36.24%2017.79q-2.62-0.01-5.54-0.01h-3.73c-15.53%200-25.72-0.57-36.65-16.54-27.99-40.86-88.61-130.65-118.06-178.29-14.11-22.84-2.78-45.62%2024-45.62h248.4l-69.63-126.05h-260.13c-76.29%200-73.65%209.14-104.24%2069.68-30.4%2060.19-31.3%2069.62%204.2%20132.32%209.31%2016.42%20108.59%20164.13%20178.71%20265.85%2010.75%2015.59%2021.65%2026.11%2048.08%2026.11zm318.27-493.96h-316.46l69.63%20126.05h163.07c26.77%200%2040.17%2022.37%2026.06%2045.21-29.44%2047.64-202.6%20300.82-230.58%20341.68-10.96%2016-24.8%2016.57-37.5%2016.57q-1.46%200-2.89-0.01c-13.46%200-174.41%200-174.41%200%2028.16%2040.92%2051.75%2074.95%2060.95%2087.98%2023.7%2033.59%2036.9%2045.21%2068.31%2045.21%2031.41%200%2030.99%200%2062.4%200%2031.42%200%2030.97%200%2062.4%200%2031.41%200%2044.61-11.62%2068.32-45.21%2033.89-48.04%20221.82-324.6%20280.73-415.48%2039.2-60.47%2034.63-72.13%204.21-132.32-30.58-60.54-27.95-69.68-104.24-69.68z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Menu Layout Fixes */
.main-navigation {
    display: block;
}
.menu {
    display: flex;
    gap: 2.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap; /* Prevents links from breaking to a second line */
}
.menu li {
    display: block;
    white-space: nowrap; /* Stops long links from breaking words */
}
.menu a {
    color: var(--text-light)   ; 
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}
.menu a:hover {
    color: var(--accent); 
}
.menu-toggle {
    display: none;
}


/* Buttons */
.btn-outline, .btn-solid {
    display: inline-block;
    padding: 0.8rem 2rem;
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-outline { border: 2px solid currentColor; background: transparent; }
.btn-outline:hover { background: var(--text-main); color: var(--bg-main); }
.btn-solid { background: var(--text-light); color: var(--bg-dark); border: none; }
.btn-solid:hover { background: var(--accent); color: var(--text-light); }

/* Typography */
.section-title {
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 3rem;
    font-weight: 800;
}

/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding-top: 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-content { 
    padding: 0 4%; 
    text-align: left; 
}
.hero-content h1 {
    font-size: clamp(3.5rem, 10vw, 8rem);
    line-height: 0.9;
    font-weight: 900;
    text-transform: uppercase;
}
.hero-content p {
    font-size: 1.2rem;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* Grid Layouts */
.grid-races {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.race-card {
    border-top: 2px solid var(--text-main);
    padding-top: 1rem;
}
.race-date { font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }
.race-title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.race-location { margin-bottom: 1.5rem; font-size: 0.9rem; }

.grid-series {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
}
.series-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.series-number { font-size: 4rem; font-weight: 800; color: var(--accent); line-height: 1; display: block; }
.series-content h3 { font-size: 2rem; margin-bottom: 1rem; }
.series-details { margin-bottom: 2rem; }

/* Form */
.form-row { display: flex; gap: 1.5rem; margin-bottom: 1.5rem; }
.form-col { flex: 1; display: flex; flex-direction: column; }
label { font-size: 0.85rem; text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem; }
input, select, textarea {
    width: 100%;
    padding: 1rem;
    background: transparent;
    border: 1px solid #555;
    color: var(--text-light);
    font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text-light); }

/* Footer */
.site-footer {
    background: var(--bg-dark);
    color: var(--text-light);
    padding: 4rem 0 2rem;
    border-top: 1px solid #333;
}
.footer-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
}
.footer-brand h3 { font-size: 2rem; margin-bottom: 0.5rem; }
.footer-nav ul { display: flex; gap: 1.5rem; }
.footer-nav a { text-transform: uppercase; font-size: 0.85rem; font-weight: 600; }
.footer-bottom { border-top: 1px solid #333; padding-top: 2rem; font-size: 0.8rem; color: #888; text-align: center; }

/* Mobile HEADER */
@media (max-width: 900px) {
    .site-header {
        width: 100%;
        left: 0;
        right: 0;
    }
    .header-inner {
        padding: 1.2rem 1.5rem; 
        width: 100%;
        clip-path: none; 
        gap: 1.5rem;
        justify-content: space-between;
    }
    
    .gj-logo {
        height: 30px;
    }
    .main-navigation {
    flex: 1;
    min-width: 0; 
    display: flex;        /* Added */
    justify-content: center; /* Added */
}
    .menu {
        gap: 1.5rem; 
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .menu::-webkit-scrollbar {
        display: none;
    }
    .menu a {
        font-size: 0.65rem; 
        letter-spacing: 1px;
        white-space: nowrap; 
    }
    .menu-toggle {
        display: none !important;
    }
    .section-title {
        font-size: 1.8rem; 
    }
}

.series-featured-image img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
    border-bottom: 4px solid var(--accent);
}

.entry-content {
    line-height: 1.8;
}

.entry-content p {
    margin-bottom: 1.5rem;
}

/* Instagram Grid Section */
.grid-instagram {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}
.instagram-card {
    background-color: #000000;
    overflow: hidden;
    position: relative;
    border: 1px solid #222;
    aspect-ratio: 1 / 1;
}

/* Base Image/Video styles */
.instagram-card img,
.instagram-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.instagram-card:hover img,
.instagram-card:hover video {
    transform: scale(1.03);
}

/* Native CSS Carousel */
.carousel-container {
    position: absolute; /* Added to force full height */
    top: 0;            /* Added */
    left: 0;           /* Added */
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    /* Hide scrollbars for clean UI */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}
.carousel-container::-webkit-scrollbar {
    display: none; 
}

.carousel-slide {
    flex: 0 0 100%;
    height: 100%;
    scroll-snap-align: start;
    position: relative;
}

.carousel-slide img,
.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 900px) {
    .grid-instagram {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 1rem;
    }
}