:root {
    --color-primary: #cb1d32;
    /* Electric Red */
    --color-grey: #5a5a5a;
    --color-black: #000000;
    --color-dark-grey: #1a1a1a;
    --color-white: #ffffff;
    --color-teal: #00B0AD;
    /* Teal from playhockey */
    --skew-angle: -5deg;
    --font-heading: 'Barlow', sans-serif;
    /* Protipo alternative */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Barlow', sans-serif;
    /* Protipo alternative */
    --font-body: 'Inter', sans-serif;
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

/* Slanted Cards specific */
.card-slanted {
    position: relative;
    height: 100%;
    background: var(--color-black);
    color: var(--color-white);
    transform: skewX(var(--skew-angle));
    overflow: hidden;
    border: none;
    display: flex;
    flex-direction: column;
}

/* Container for image to maintain slant mask */
.card-image-wrapper {
    height: 200px;
    width: 120%;
    /* Extra width to cover skew edges */
    margin-left: -10%;
    position: relative;
    overflow: hidden;
}

/* Actual image unskewed to prevent distortion */
.card-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: skewX(calc(var(--skew-angle) * -1)) scale(1.1);
}

.card-event-logo {
    position: absolute;
    top: 170px;
    /* Overlap image boundary (200px height) */
    left: 20px;
    width: 60px;
    height: 60px;
    object-fit: contain;
    z-index: 10;
    transform: skewX(calc(var(--skew-angle) * -1));
    /* Unskew logo */
    background: white;
    /* Optional: background for transparent logos */
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Unskew text content */
    transform: skewX(calc(var(--skew-angle) * -1));
}

.card-body h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-bottom: 5px;
    margin-top: 10px;
}

.details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    font-size: 0.8rem;
    margin-top: 15px;
    border-top: 1px solid #333;
    padding-top: 15px;
    color: #ccc;
}

.detail-item strong {
    color: var(--color-primary);
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
}

.detail-icons {
    margin-top: auto;
    padding-top: 15px;
    font-size: 0.75rem;
    color: #999;
    border-top: 1px solid #333;
}

.btn-brush {
    display: block;
    width: 100%;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    margin-top: 20px;
    text-decoration: none;
    text-transform: uppercase;
    /* Brush styling simulation */
    clip-path: polygon(2% 0%, 98% 2%, 100% 95%, 0% 100%);
    transition: transform 0.2s ease, clip-path 0.2s ease;
}

.btn-brush:hover {
    transform: scale(1.02);
    clip-path: polygon(0% 0%, 100% 0%, 98% 100%, 2% 95%);
    background: #ff1e3c;
    /* Brighter red */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-black);
    color: var(--color-white);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.skew-container {
    transform: skewY(var(--skew-angle));
    transform-origin: 0;
}

.unskew {
    transform: skewY(calc(var(--skew-angle) * -1));
}

/* Horizontal Skew for elements */
.slant-x {
    transform: skewX(var(--skew-angle));
}

.unslant-x {
    transform: skewX(calc(var(--skew-angle) * -1));
}

/* Navigation & Header */
.main-header {
    background-color: var(--color-black);
    padding: 10px 0;
    /* Reduced padding */
    position: sticky;
    /* Make it sticky */
    top: 0;
    /* Stick to the top */
    z-index: 1000;
    /* High z-index */
    /* border-bottom: 5px solid var(--color-primary); Removed for custom slanted border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    /* Add shadow for depth */
}

/* Custom Slanted Border/Underline */
.main-header::after {
    content: '';
    position: absolute;
    bottom: -15px;
    /* Hangs below */
    left: 0;
    width: 100%;
    height: 20px;
    background: var(--color-primary);
    /* Solid Red */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 20%);
    /* Wedge shape */
    z-index: 999;
    transform-origin: left;
    transition: transform 0.1s linear;
    /* Prepared for scroll effect */
}

/* Three Column Top Bar */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px 0 50px;
    /* Added top padding, sides 50px */
    min-height: 80px;
    /* Allow growth */
    max-width: 1400px;
    margin: 0 auto;
}

.logo-container {
    flex: 0 0 auto;
    text-align: center;
    margin-top: 10px;
    /* Push down specifically */
}

.main-logo {
    height: 75px;
    /* Bigger logo */
    max-width: 100%;
    object-fit: contain;
}

.header-social-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* Vertical center */
}

.header-social-left a {
    color: var(--color-primary);
    /* Red IG Icon */
    font-size: 1.8rem;
    /* Slightly larger visibility */
    display: flex;
    /* Ensure icon renders */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    /* No underline */
    transition: transform 0.3s;
}

.header-social-left a:hover {
    transform: scale(1.2);
    color: var(--color-white);
    text-decoration: none;
    /* Ensure no underline on hover */
}

.header-login-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.btn-outline-sm {
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    /* Outline style */
    padding: 5px 15px;
    font-family: var(--font-heading);
    text-decoration: none;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.btn-outline-sm:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Nav Links Row */
.nav-links {
    display: flex;
    justify-content: center;
    gap: 5rem;
    /* Even wider spread */
    align-items: center;
    margin-top: 10px;
    /* Gap between logo row and nav row */
    height: 40px;
}

.nav-item {
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

/* Ensure visited links stay white */
.nav-item:visited,
.nav-item:active,
.nav-item:focus,
.dropbtn:visited,
.dropbtn:active,
.dropbtn:focus {
    color: var(--color-white) !important;
    text-decoration: none;
}

.nav-item:hover,
.dropbtn:hover {
    color: var(--color-primary);
}

.dropbtn {
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-black);
    /* Changed from --color-bg to --color-black as --color-bg is not defined */
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    top: 100%;
    left: 0;
    border-top: 2px solid var(--color-primary);
}

.dropdown-content a {
    color: var(--color-white);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: 600;
    text-align: left;
    transition: background 0.3s;
}

.dropdown-content a:visited,
.dropdown-content a:active,
.dropdown-content a:focus {
    color: var(--color-white);
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: var(--color-primary);
}

.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--color-primary);
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
}

.nav-item:hover::after {
    width: 100%;
}

.btn-login {
    border: 2px solid var(--color-primary);
    padding: 5px 20px;
    transform: skewX(var(--skew-angle));
}

.btn-login:hover {
    background: var(--color-primary);
    color: white;
}

.btn-login span {
    transform: skewX(calc(var(--skew-angle) * -1));
}

/* Hero Section */
.hero {
    height: 70vh;
    /* Reduced height since header takes space */
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%), url('../images/hero.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Removed padding-top since header is relative */
}

/* Dynamic stripe background */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: -20%;
    width: 60%;
    height: 100%;
    background: var(--color-primary);
    opacity: 0.1;
    transform: skewX(-20deg);
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 5rem;
    line-height: 0.9;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px var(--color-primary);
}

.hero p {
    font-size: 1.5rem;
    max-width: 600px;
    margin-bottom: 40px;
    color: #ccc;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 40px;
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: bold;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    cursor: pointer;

    /* Slanted shape */
    transform: skewX(var(--skew-angle));
}

.btn span {
    display: block;
    transform: skewX(calc(var(--skew-angle) * -1));
}

.btn:hover {
    background: var(--color-primary);
    box-shadow: 0 0 15px var(--color-primary);
}

.btn-filled {
    background: var(--color-primary);
}

/* Cards Section */
.programs {
    padding: 100px 0;
    position: relative;
    background: var(--color-dark-grey);

    /* Section slant - Increased Dynamic Feel */
    transform: skewY(-4deg);
    /* Increased from -2deg */
    margin: 50px 0;
}

.programs-content {
    transform: skewY(4deg);
    /* Unskew matching angle */
    opacity: 0;
    transform: skewY(4deg) translateY(20px);
    transition: all 0.8s ease-out;
}

.programs.in-view .programs-content {
    opacity: 1;
    transform: skewY(4deg) translateY(0);
}

/* Hero Bottom Rule (Opposite Slope) */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    /* Nice and thick */
    background: var(--color-primary);
    /* Opposite slope: Thick Left (Full), Bottom Anchored. Thin Right. */
    clip-path: polygon(0 0, 100% 75%, 100% 100%, 0 100%);
    z-index: 10;

    /* Scroll Reveal Effect */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.hero.in-view::after {
    transform: scaleX(1);
}

/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.news-card {
    background: var(--color-white);
    color: var(--color-black);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 20px;
}

.news-content h3 {
    font-size: 1.5rem;
    margin: 10px 0;
    font-family: var(--font-heading);
}

.news-content .date {
    color: var(--color-grey);
    font-size: 0.9rem;
    font-weight: bold;
}

.read-more {
    display: inline-block;
    margin-top: 15px;
    color: var(--color-primary);
    font-weight: bold;
    text-decoration: none;
}

/* Slanted Cards specific */
.card-slanted {
    position: relative;
    height: 100%;
    /* Ensure uniform height in slider */
}

/* Events Slider structure */
.events-slider-container {
    padding: 20px 0;
    overflow: hidden;
    /* Hide scrollbar if purely custom, or auto for native */
}

/* Mobile Default: Stacked (Inherits standard block behavior) */
.events-track {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Desktop: Horizontal Slider */
@media (min-width: 768px) {
    .events-slider-container {
        overflow-x: auto;
        padding-bottom: 20px;
        /* Space for scrollbar */
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;

        /* Feathered Edges */
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .events-track {
        display: flex;
        flex-direction: row;
        width: max-content;
        /* Allow track to expand */
        gap: 30px;
        padding: 0 40px;
        /* Padding inside scroll area */
    }

    .event-slide {
        width: 350px;
        /* Fixed width for slider items */
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    /* Hide scrollbar for cleaner look */
    .events-slider-container::-webkit-scrollbar {
        height: 8px;
    }

    .events-slider-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
    }

    .events-slider-container::-webkit-scrollbar-thumb {
        background: var(--color-primary);
        border-radius: 4px;
    }
}

.card-slanted h3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
}

.programs-content {
    transform: skewY(2deg);
    /* Unskew content */
}

/* Why Knights Sections */
.why-knights-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    /* Clips the 100vw rules vertically if needed */
    display: flex;
    align-items: center;
    width: 100%;
}

/* 
   DOUBLE RULES IMPLEMENTATION
   ::before = Primary Rule
   ::after  = Secondary Rule (Shadow/Double Layer)
*/

/* Base Rule Style (Shared) */
.why-knights-section::before,
.why-knights-section::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    /* Center anchor */
    margin-left: -50vw;
    /* Pull back to hit edge */
    width: 100vw;
    /* Force viewport width */
    height: 50px;
    /* Thicker on the right */

    /* 
       Geometry: Skinny Left, Thick Right.
       Triangle growing to the right.
       Updated to be more aggressive and ensure bottom coverage.
    */
    clip-path: polygon(0 85%, 100% 0, 100% 100%, 0 100%);

    z-index: 10;

    /* Animation: Dynamic Slash from Left */
    transform: translateX(-120%) skewX(-20deg);
    /* Start off screen with skew */
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy ease */
    will-change: transform;
}

.why-knights-section::before {
    z-index: 10;
}

.why-knights-section::after {
    z-index: 9;
    bottom: -5px;
}

/* Layered behind/below */

/* ANIMATIONS */
.why-knights-section.in-view::before {
    transform: translateX(0) skewX(0);
    /* Slam into place */
    transition-delay: 0s;
}

.why-knights-section.in-view::after {
    transform: translateX(0) skewX(0);
    transition-delay: 0.15s;
    /* Staggered effect */
}


/* COLOR VARIATIONS */

/* Jersey Section (Dark) -> Red Primary, Grey Shadow */
.bg-jersey.why-knights-section::before {
    background: var(--color-primary);
}

.bg-jersey.why-knights-section::after {
    background: #333;
    content: '';
    /* Ensure it renders */
    display: block;
    height: 60px;
    /* Larger backing */
    clip-path: polygon(0 80%, 100% -10%, 100% 100%, 0 100%);
}


/* Ice Section (Light) -> Grey Primary, Red Shadow */
.bg-ice.why-knights-section::before {
    background: #111;
}

.bg-ice.why-knights-section::after {
    background: var(--color-primary);
    content: '';
    display: block;
    height: 60px;
    clip-path: polygon(0 80%, 100% -10%, 100% 100%, 0 100%);
}

/* Texture Improvements */
.bg-jersey {
    background-color: #080808;
    /* High contrast dark mesh look */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), url('../images/jersey-mesh-v2.png');
    background-blend-mode: normal;
    background-repeat: repeat;
    color: var(--color-white);
}

.bg-ice {
    background-color: #f8f9fa;
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)), url('../images/ice-texture.png');
    background-blend-mode: multiply;
    background-repeat: repeat;
    background-size: 500px;
    color: var(--color-black);
}

.bg-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
    opacity: 0.9;
}

.bg-ice .bg-img-overlay {
    left: 0;
    right: auto;
    mask-image: linear-gradient(to left, transparent 0%, black 50%);
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 50%);
}

.why-content {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: 550px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Initial States for Scroll Reveal */
.why-content h2,
.why-content p,
.why-content .btn-skew {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out;
}

.why-knights-section.in-view .why-content h2 {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.why-knights-section.in-view .why-content p {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

.why-knights-section.in-view .why-content .btn-skew {
    transition-delay: 0.6s;
    opacity: 1;
    transform: translateY(0);
}



.why-knights-section h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    /* Reduced min/max to prevent busting */
    line-height: 0.95;
    margin-bottom: 20px;
    font-style: italic;
    text-transform: uppercase;
    font-weight: 800;
    word-break: break-word;
    hyphens: auto;
}

/* Adjust Copy Placement towards OUTER edges */
/* Jersey: Image Right. Content Left. Push Left towards Edge. */
.bg-jersey .container {
    display: flex;
    justify-content: flex-start;
}

.bg-jersey .why-content {
    margin-left: 0;
    max-width: 50%;
    /* Shift text right into the fade */
    margin-right: auto;
    padding-right: 50px;
    /* Buffer from image center */
}

/* Ice: Image Left. Content Right. Push Right towards Edge. */
.bg-ice .container {
    display: flex;
    justify-content: flex-end;
}

.bg-ice .why-content {
    max-width: 50%;
    margin-right: 0;
    margin-left: auto;
    text-align: right;
    padding-left: 50px;
    /* Buffer from image center */
}

.why-knights-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Events Slider Width Adjustment */
@media (min-width: 900px) {
    .programs-content {
        max-width: 85vw !important;
        /* Widen grid on desktop */
    }
}

/* Mobile Responsiveness for Why Sections */
@media (max-width: 900px) {
    .why-knights-section {
        flex-direction: column;
        padding: 0 0 50px 0;
        /* Mobile Fix: No top padding, 50px bottom */
        overflow: hidden;
    }

    /* Simplify separators on mobile */
    .why-knights-section::after,
    .why-knights-section::before {
        width: 150%;
        margin-left: -75%;
        transform: rotate(-3deg);
        bottom: -5px;
        height: 20px;
        /* Thinner on mobile */
    }

    .bg-img-overlay {
        position: relative;
        width: 100%;
        height: 250px;
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
        mask-image: none;
        -webkit-mask-image: none;
        order: -1;
        /* Image first */
    }

    .why-content {
        padding: 30px 20px;
        text-align: center !important;
        /* Center text */
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100%;
        max-width: 100%;
    }

    /* Center the button container */
    .why-content div {
        justify-content: center !important;
        width: 100%;
    }

    .bg-ice .why-content {
        margin-left: 0;
        max-width: 100%;
    }

    .bg-jersey .why-content {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    /* Mobile Typography - No Busting */
    .why-knights-section h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
        /* Tighter constraints */
        line-height: 1.1;
        hyphens: none;
        word-break: normal;
        /* Keep words intact */
    }
}



.bg-ice .bg-img-overlay {
    left: 0;
    right: auto;
    mask-image: linear-gradient(to left, transparent, black 20%);
    -webkit-mask-image: linear-gradient(to left, transparent, black 20%);
}






.bg-jersey h2 {
    text-shadow: 2px 2px 0 var(--color-primary);
}

.bg-ice h2 {
    color: var(--color-primary);
}

.why-knights-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.btn-skew {
    display: inline-block;
    padding: 12px 30px;
    background: var(--color-primary);
    color: white;
    font-family: var(--font-heading);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    transform: skewX(-10deg);
    transition: transform 0.3s;
}

.btn-skew span {
    display: block;
    transform: skewX(10deg);
}

.btn-skew:hover {
    transform: skewX(-10deg) scale(1.05);
}

/* Mobile Responsiveness for Why Sections */


/* Orphaned block removed */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.card {
    background: var(--color-grey);
    padding: 2rem;
    border-left: 5px solid var(--color-primary);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover {
    transform: skewX(var(--skew-angle)) translateY(-10px);
    /* Maintain skew on hover */
}

/* Slider Controls */
.slider-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.slider-btn {
    background: var(--color-black);
    color: var(--color-white);
    border: 2px solid var(--color-primary);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    transform: skewX(var(--skew-angle));
}

.slider-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.slider-btn i {
    transform: skewX(calc(var(--skew-angle) * -1));
    font-style: normal;
}

.card h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-white);
}

.card p {
    margin-bottom: 2rem;
    line-height: 1.6;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--color-primary);
    color: white;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    transform: skewX(-10deg);
}

/* News Card Design (Play Hockey Style) */
/* News Card Design (Play Hockey Style) - List/Row Layout */
.news-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 50px;
    max-width: 900px;
    /* Constrain width for readability in list view */
    margin-left: auto;
    margin-right: auto;
}

.news-card {
    background-color: var(--color-black);
    display: flex;
    flex-direction: column;
    /* Mobile first: Stacked */
    overflow: hidden;
    border: 1px solid #333;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

@media (min-width: 768px) {
    .news-card {
        flex-direction: row;
        /* Desktop: Side-by-side */
        align-items: stretch;
        height: 250px;
        /* Fixed height for consistency */
    }
}

.news-card:hover {
    transform: translateX(10px);
    /* Slide right instead of up */
    border-color: var(--color-primary);
    box-shadow: -10px 10px 30px rgba(255, 0, 51, 0.2);
    z-index: 10;
}

.news-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .news-card-image {
        width: 40%;
        height: 100%;
        aspect-ratio: auto;
        clip-path: polygon(0 0, 100% 0, 85% 100%, 0% 100%);
        /* Slanted separator */
    }
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.1);

}

/* Flash effect on image hover */
.news-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: skewX(-25deg);
    transition: none;
}

.news-card:hover .news-card-image::after {
    left: 100%;
    transition: left 0.7s ease;
}

.news-card-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-card h3 {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    /* Slightly bigger */
    color: var(--color-white);
    text-transform: uppercase;
    margin-bottom: 1rem;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.news-card:hover h3 {
    color: var(--color-primary);
}

.news-card p {
    color: #ccc;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-footer {
    padding: 0;
    /* Alignment handled by parent */
    margin-top: auto;
}

.btn-news {
    display: block;
    width: 100%;
    background-color: var(--color-primary);
    color: var(--color-white);
    text-align: center;
    padding: 12px 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    /* Technical corners */
    letter-spacing: 1px;
}

.btn-news:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    transform: skewX(-5deg);
    /* Dynamic skew on hover */
    box-shadow: 0 0 15px rgba(255, 0, 51, 0.6);
}

/* Footer */
.main-footer {
    background: var(--color-black);
    color: var(--color-white);
    padding-top: 100px;
    padding-bottom: 50px;
    position: relative;
    margin-top: 100px;
}

/* Slanted Top Edge */
.main-footer::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100px;
    background: var(--color-black);
    transform: skewY(-2deg);
    z-index: 10;
}

.footer-content {
    position: relative;
    z-index: 20;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    margin-bottom: 50px;
}

.footer-logo {
    max-width: 250px;
    margin-bottom: 20px;
}

.footer-brand p {
    color: #999;
    margin-bottom: 20px;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: var(--color-white);
    background: var(--color-dark-grey);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.social-links a:hover {
    background: var(--color-primary);
    transform: translateY(-5px);
}

.footer-nav h4,
.footer-newsletter h4 {
    color: var(--color-primary);
    margin-bottom: 25px;
    font-size: 1.2rem;
}

.footer-nav ul {
    list-style: none;
}

.footer-nav li {
    margin-bottom: 15px;
}

.footer-nav a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.footer-nav a:hover {
    color: var(--color-primary);
    padding-left: 5px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.newsletter-form input {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    /* Subtle transparency */
    border: none;
    border-bottom: 2px solid #555;
    color: white;
    font-family: var(--font-heading);
    /* Aggressive font */
    letter-spacing: 1px;
    font-size: 1rem;
    position: relative;
    transition: all 0.3s ease;

    /* Slanted look */
    transform: skewX(var(--skew-angle));
}

.newsletter-form input::placeholder {
    color: #555;
    font-style: italic;
    /* Speed */
}

.newsletter-form input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.newsletter-form button {
    /* Adjust button margins if needed */
    width: 100%;
    /* Full width on mobile */
}

@media (min-width: 1024px) {
    .newsletter-form {
        flex-direction: row;
        /* Side by side on desktop */
        align-items: stretch;
    }

    .newsletter-form input {
        flex: 1;
    }

    .newsletter-form button {
        width: auto;
    }
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #333;
    color: #666;
    font-size: 0.8rem;
}

/* Ensure ALL Nav Links ignored visited state */
a.nav-item:visited,
a.nav-item:active,
a.nav-item:focus,
.mobile-nav-item:visited,
.mobile-nav-item:active {
    color: var(--color-white);
}

a.nav-item:hover,
.mobile-nav-item:hover {
    color: var(--color-primary);
}

/* HIDE Mobile Elements on Desktop by Default */
.mobile-menu-toggle,
.mobile-nav-tray,
.mobile-nav-overlay {
    display: none !important;
}

/* Media Queries */
@media (max-width: 900px) {
    .desktop-only {
        display: none !important;
    }

    /* Show Mobile Elements */
    .header-social-left,
    .header-login-right {
        display: none !important;
    }

    .header-top {
        padding: 10px 0;
        /* Reduced padding on mobile */
        justify-content: center;
        /* Center logo */
        height: auto;
        position: relative;
        /* Ensure it stays relative for absolute children if any */
        width: 100%;
    }

    .logo-container {
        margin-top: 5px;
        /* Adjust top margin for mobile */
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-around;
        width: 40px;
        height: 35px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 1200;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) skewX(-10deg);
        transition: opacity 0.3s ease, visibility 0.3s ease;
        /* Add transition */
    }

    .mobile-menu-toggle.hidden {
        opacity: 0;
        visibility: hidden;
    }

    .mobile-nav-tray {
        display: flex !important;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        max-width: 400px;
        height: 100vh;
        background: linear-gradient(135deg, var(--color-black) 0%, #1a1a1a 100%);
        z-index: 1200;
        /* Higher than header (1000) */

        /* Hidden State */
        transform: translateX(120%) skewX(-20deg);
        opacity: 0;
        visibility: hidden;

        transform-origin: top right;
        transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        border-left: 4px solid var(--color-primary);
        box-shadow: -20px 0 50px rgba(0, 0, 0, 0.8);
        padding: 80px 40px;
        flex-direction: column;
    }

    .mobile-nav-overlay {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 15, 15, 0.9);
        backdrop-filter: blur(8px);
        z-index: 1100;
        /* Higher than header */
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
    }

    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* The active state override for Tray */
    .mobile-nav-tray.active {
        transform: translateX(0) skewX(0);
        opacity: 1;
        visibility: visible;
    }

    .mobile-menu-toggle .bar {
        width: 100%;
        height: 4px;
        background-color: var(--color-white);
        transition: all 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    /* Close Button */
    .mobile-close-btn {
        position: absolute;
        top: 25px;
        right: 25px;
        background: transparent;
        border: none;
        color: var(--color-primary);
        font-size: 2.5rem;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .mobile-close-btn:hover {
        transform: rotate(180deg) scale(1.2);
        text-shadow: 0 0 15px var(--color-primary);
    }

    /* Mobile Links */
    .mobile-nav-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 100%;
        overflow-y: auto;
    }

    .mobile-nav-item {
        font-family: var(--font-heading);
        font-size: 2rem;
        color: var(--color-white);
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 800;
        transition: all 0.3s ease;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 10px;
        background: transparent;
        border: none;
        text-align: left;
        width: 100%;
        cursor: pointer;
        position: relative;
    }

    .mobile-nav-item:hover {
        color: var(--color-primary);
        padding-left: 15px;
        /* Slide right */
        letter-spacing: 2px;
        text-shadow: 4px 4px 0px rgba(255, 0, 51, 0.2);
    }

    /* Mobile Dropdown */
    .mobile-dropdown-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-out;
        margin-left: 20px;
        border-left: 2px solid rgba(255, 255, 255, 0.1);
    }

    .mobile-dropdown-content a {
        display: block;
        padding: 12px 15px;
        color: #aaa;
        text-decoration: none;
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 600;
        transition: all 0.2s;
    }

    .mobile-dropdown-content a:hover {
        color: var(--color-white);
        background: rgba(255, 0, 51, 0.1);
        padding-left: 25px;
    }

    .mobile-dropdown-btn i {
        float: right;
        font-size: 1.5rem;
        transition: transform 0.3s;
    }

    .mobile-dropdown-btn.active {
        color: var(--color-primary);
        border-bottom-color: var(--color-primary);
    }

    .mobile-dropdown-btn.active i {
        transform: rotate(180deg);
    }

    .btn-login-mobile {
        margin-top: auto;
        border: 2px solid var(--color-primary);
        background: var(--color-primary);
        text-align: center;
        font-size: 1.5rem;
        color: white;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    }

    .btn-login-mobile:hover {
        background: transparent;
        color: var(--color-primary);
        box-shadow: 0 0 20px rgba(255, 0, 51, 0.4);
    }

    .main-header {
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-container {
        margin-bottom: 0;
        margin-right: auto;
        /* Push logo left */
    }

    /* Ensure only mobile button is visible on right */
    .mobile-menu-toggle {
        position: static;
        /* Let flex handle it */
        transform: skewX(-10deg);
        margin-left: 20px;
    }

    .main-logo {
        height: 50px;
        /* Smaller logo */
    }

    .nav-links {
        display: none;
        /* Double insurance */
    }
}

/* =========================================
   Content Styling (Training, Leagues, etc.)
   ========================================= */

/* Filter Bar (Training) */
.filter-bar {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-heading);
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.3s ease;
    transform: skewX(var(--skew-angle));
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 0 15px rgba(255, 0, 51, 0.4);
}

/* League Block (Leagues) */
.league-block {
    display: flex;
    background: var(--color-dark-grey);
    margin-bottom: 40px;
    border: 1px solid #333;
    overflow: hidden;
    flex-direction: column;
    /* Mobile first */
}

.league-info {
    padding: 30px;
    flex: 1;
}

.league-info h2 {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.league-image {
    flex: 1;
    min-height: 250px;
    overflow: hidden;
    position: relative;
}

.league-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.league-block:hover .league-image img {
    transform: scale(1.05);
}

@media (min-width: 768px) {
    .league-block {
        flex-direction: row;
    }

    .league-image {
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0% 100%);
    }
}

/* Buttons */
.btn-outline {
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-left: 10px;
    transform: skewX(var(--skew-angle));
}

.btn-outline:hover {
    background: var(--color-white);
    color: var(--color-black);
}

/* Content Grid Gap */
/* Content Grid Gap */
.content-grid {
    display: grid;
    /* Use auto-fill to prevent single items from stretching to full width */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* Animated Parallelogram CTA */
.btn-brush {
    display: inline-block;
    padding: 15px 40px;
    background: var(--color-primary);
    color: var(--color-white);
    text-transform: uppercase;
    font-family: var(--font-heading);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* For the fill effect */

    /* Initial Slant */
    transform: skewX(var(--skew-angle));
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 15px rgba(255, 0, 51, 0.3);
}

/* Text Counter-Skew */
/* Text Counter-Skew: Pending future implementation if spans required */

/* Fill Effect Pseudo-element */
.btn-brush::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    background: var(--color-white);
    transform: skewX(0) translateX(-50%);
    /* Start centered */
    z-index: -1;
    transition: width 0.4s ease;
}

.btn-brush:hover {
    /* Switch Slant Direction (e.g., -5deg to +5deg) */
    transform: skewX(calc(var(--skew-angle) * -1)) translateY(-3px);
    color: var(--color-primary);
    box-shadow: 0 10px 25px rgba(255, 0, 51, 0.5);
}

.btn-brush:hover::before {
    width: 102%;
    /* Fill completely */
}

/* Fix text readability if possible. 
   Since we don't have spans everywhere, let's try to keep the font legible 
   even if skewed, or use a trick.
   But to do the "switch slant", the text will slant with it unless counter-skewed.
   The user previously had spans in .btn. 
   Let's check if .btn-brush usage has spans. It was used in index.ejs line 99:
   <a href="..." class="btn-brush">LEARN MORE</a> -> No span.
   
   Okay, I will update index.ejs (and others) to wrap text in span, OR 
   I will accept that the text slants with the button (which is often acceptable for stylized buttons).
   
   However, "switch ways they slant" on the container usually implies the text stays relatively upright 
   or mirrors.
   
   Let's try to enforce a span in the CSS if it exists, but for now, 
   the skew switching on the parent is the main request.
*/

/* Unify Slant & Fix Mobile Bleed */
.event-card,
.card-slanted {
    transform: skewX(var(--skew-angle));
    padding: 0 !important;
    background: var(--color-grey);
    border-left: 5px solid var(--color-primary);
    overflow: hidden;
    margin: 0 auto;
}

/* Re-apply padding to content only */
.event-card .card-content,
.card-slanted .card-body {
    padding: 2rem 3.5rem; /* Increased padding */
    transform: skewX(calc(var(--skew-angle) * -1));
}

.event-card .card-image,
.card-slanted .card-image-wrapper {
    width: 100%;
    margin: 0;
    transform: skewX(calc(var(--skew-angle) * -1)) scale(1.1);
}

.card-bg-img,
.event-card img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* Mobile Specific Tweaks */
@media (max-width: 768px) {
    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .hero-content h1, .hero-content p {
        text-align: center;
    }
}

/* Align the session type badge */
.card-date-badge {
    padding: 10px 3.5rem;
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--color-primary);
}