/* ============================================
   Mile High Halo 3 - Neo-Brutalist Design
   ============================================ */

/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-black: #000000;
    --color-white: #FFFFFF;
    --color-yellow: #FFFF00;
    --color-red: #FF0000;
    --color-blue: #0000FF;
    --color-green: #00FF00;
}

/* Typography - Bold and Heavy */
body {
    font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    line-height: 1.5;
    background-color: var(--color-white);
    color: var(--color-black);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
}

h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Remove ALL animations and transitions */
*, *::before, *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

/* Navigation - Neo-Brutalist Style */
nav {
    background-color: var(--color-black);
    border-bottom: 4px solid var(--color-yellow);
    padding: 24px 0;
}

.nav-link {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 16px;
    border: 3px solid transparent;
}

.nav-link:hover {
    background-color: var(--color-yellow);
    color: var(--color-black);
    border: 3px solid var(--color-black);
}

.nav-underline {
    display: none;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    background-color: var(--color-yellow);
    color: var(--color-black);
    border: 3px solid var(--color-black);
    padding: 8px;
    cursor: pointer;
}

.mobile-menu-btn:hover {
    background-color: var(--color-white);
}

/* Mobile Menu */
.mobile-menu {
    display: none;
    background-color: var(--color-black);
    border-top: 4px solid var(--color-yellow);
    border-bottom: 4px solid var(--color-yellow);
    max-height: 0;
    overflow: hidden;
}

.mobile-menu.active {
    display: block;
    max-height: 500px;
}

.mobile-nav-link {
    display: block;
    width: 100%;
    text-align: center;
}

/* Show mobile menu on small screens */
@media (max-width: 768px) {
    nav {
        padding: 0;
    }
}

/* Hero Video Background */
#hero {
    position: relative;
    min-height: 70vh;
    background-color: var(--color-black);
}

#hero video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero Overlay - Solid Color */
#hero .absolute.inset-0.z-10 {
    background: rgba(0, 0, 0, .5) !important;
}

/* Hero Content */
#hero h1 {
    color: var(--color-yellow);
    text-shadow: 4px 4px 0 var(--color-black);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 768px) {
    h1 {
        font-size: 5rem;
    }
    
    #hero h1 {
        font-size: 6rem;
    }
}

/* Buttons - Chunky and Bold */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--color-yellow);
    color: var(--color-black);
    border: 4px solid var(--color-black);
    padding: 20px 40px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-size: 1.125rem;
}

.btn-primary:hover {
    background-color: var(--color-black);
    color: var(--color-yellow);
    border: 4px solid var(--color-yellow);
}

.btn-secondary,
a.btn-secondary {
    background-color: var(--color-red);
    color: var(--color-white);
    border: 4px solid var(--color-black);
    padding: 20px 40px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-size: 1.125rem;
}

.btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-black);
    border: 4px solid var(--color-black);
}

button {
    cursor: pointer;
}

/* Event Cards - Hard Edges and Borders */
.event-card {
    background-color: var(--color-black);
    border: 4px solid var(--color-yellow);
    padding: 40px;
    margin-bottom: 24px;
}

.event-card h3 {
    color: var(--color-yellow);
    margin-bottom: 16px;
}

.event-card p,
.event-card span {
    color: var(--color-white);
    font-weight: 600;
}

/* Events Section */
#events {
    position: relative;
    background-color: var(--color-white);
    padding: 80px 24px;
    border-top: 4px solid var(--color-black);
    border-bottom: 4px solid var(--color-black);
    overflow-x: clip;
}

#events h2 {
    color: var(--color-black);
    margin-bottom: 48px;
    border-bottom: 6px solid var(--color-red);
    padding-bottom: 16px;
    display: inline-block;
    font-size: 48px;
}

/* Community Section */
#community {
    position: relative;
    text-align: left;
    background-color: #7300FF;
    padding: 80px 24px;
    border-top: 4px solid var(--color-black);
    border-bottom: 4px solid var(--color-black);
    overflow-x: clip;
}

.community-bg-image {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: contain;
    object-position: right bottom;
    z-index: 1;
    opacity: 1.0;
    pointer-events: none;
}

#community h2 {
    color: var(--color-black);
    margin-bottom: 48px;
    border-bottom: 6px solid var(--color-red);
    padding-bottom: 16px;
    display: inline-block;
    font-size: 48px;
}

/* About Section */
#about {
    background-color: black;
    padding: 80px 24px;
    color: var(--color-white);
}

#about h2 {
    color: var(--color-yellow);
    margin-bottom: 48px;
    font-size: 48px;
    border-bottom: 6px solid var(--color-yellow);
    padding-bottom: 16px;
    display: inline-block;
}

#about .max-w-4xl > div {
    background-color: var(--color-black);
    border: 4px solid var(--color-yellow);
    padding: 48px;
}

#about p {
    color: var(--color-white);
    font-weight: 600;
    line-height: 1.7;
}

/* Feature Cards - Grid Layout */
.grid > div {
    background-color: var(--color-white);
    border: 4px solid var(--color-black);
    padding: 32px;
    color: var(--color-black);
}

.grid > div:hover {
    background-color: var(--color-yellow);
}

.grid h3 {
    color: var(--color-black);
}

.grid p {
    color: var(--color-black);
    font-weight: 600;
}

/* Footer */
footer {
    background-color: var(--color-black);
    border-top: 4px solid var(--color-red);
    padding: 32px 24px;
}

footer p {
    color: var(--color-white);
    font-weight: 700;
}

/* Remove Hex Grid Pattern */
.hex-grid-section {
    background-image: none !important;
}

.hex-grid-section::before {
    display: none;
}

.texture-overlay::after {
    display: none;
}

.mountain-pattern::before {
    display: none;
}

/* SVG Icons - Bold Colors */
svg {
    fill: currentColor;
    stroke: currentColor;
}

/* Links */
a {
    text-decoration: none;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Responsive Typography */
@media (max-width: 768px) {
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    #hero h1 {
        font-size: 3rem;
    }
    
    .btn-primary,
    .btn-secondary {
        padding: 16px 32px;
        font-size: 0.875rem;
        text-wrap: balance !important;
    }
    
    /* Hide background image on mobile */
    .community-bg-image {
        display: none;
    }
}

/* Additional Neo-Brutalist Utilities */
.border-brutalist {
    border: 3px solid var(--color-black);
}

.border-thick {
    border-width: 4px;
}

/* Remove fade-in animations */
.fade-in,
.fade-in-section {
    opacity: 1 !important;
    transform: none !important;
}

/* Social Link Buttons */
#about a {
    font-weight: 700;
    text-transform: uppercase;
}

/* Strong Accessibility */
strong {
    font-weight: 700;
}

/* Ensure high contrast */
::selection {
    background-color: var(--color-yellow);
    color: var(--color-black);
}

.halo-corners {
    position: relative;
}

.halo-corners::before,
.halo-corners::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
}

.halo-corners::before {
    top: -2px;
    left: -2px;
    border-top: 4px solid #FFFF00;
    border-left: 4px solid #FFFF00;
}

.halo-corners::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 4px solid #FFFF00;
    border-right: 4px solid #FFFF00;
}

.halo-corners-black {
    position: relative;
}

.halo-corners-black::before,
.halo-corners-black::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
}


.halo-corners-black::before {
    top: -2px;
    left: -2px;
    border-top: 4px solid black;
    border-left: 4px solid black;
}

.halo-corners-black::after {
    bottom: -2px;
    right: -2px;
    border-bottom: 4px solid black;
    border-right: 4px solid black;
}
/* Repeating Text Banner */
.text-banner {
    background-color: var(--color-yellow);
    border-top: 4px solid var(--color-red);
    border-bottom: 4px solid var(--color-red);
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
}

.text-banner-content {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: inline-block;
}

/* Events Section Background Pattern */
.events-pattern {
    position: relative;
    background-color: #F0F0F0;
    background-image: url('hex_grid_new.png');
    background-repeat: repeat;
    background-size: 200px auto;
    background-position: center;
}

/* Community Grid */
.community-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 16px;
    min-height: 600px;
}

.community-grid-large {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    border: 4px solid var(--color-black);
    overflow: hidden;
}

.community-grid-item {
    border: 4px solid var(--color-black);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.community-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive Typography for Mobile */
@media (max-width: 768px) {
    /* Event Card Titles */
    #events h2 {
        font-size: 1.75rem !important;
    }
    
    #events h3 {
        font-size: 1.25rem !important;
    }
    
    /* Community Section Titles */
    #community h2 {
        font-size: 1.75rem !important;
    }
    
    /* About Section Titles */
    #about h3 {
        font-size: 1.75rem !important;
    }
    
    /* Event Card Padding */
    .event-card {
        padding: 32px !important;
    }
    
    /* About Cards - reduce min-height and padding */
    #about .grid > div {
        min-height: 300px !important;
        padding: 32px 24px !important;
    }
    
    /* Text Banner */
    .text-banner-content {
        font-size: 1.5rem;
    }
    
    /* Community Grid - Stack on Mobile */
    .community-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: auto;
    }
    
    .community-grid-large {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 480px) {
    /* Even smaller for very small screens */
    #events h2 {
        font-size: 1.5rem !important;
    }
    
    #events h3 {
        font-size: 1.125rem !important;
    }
    
    #community h2 {
        font-size: 1.5rem !important;
    }
    
    #about h3 {
        font-size: 1.5rem !important;
    }
    
    .event-card {
        padding: 24px !important;
    }
    
    /* Text Banner */
    .text-banner-content {
        font-size: 1.125rem;
    }
}