@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* =================================================================
   GLOBAL RESET AND BASE STYLES
   ================================================================= */
body {
    /* Removes the browser's default margin that causes gaps around the page */
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    /* Use a clean, readable font */
    background-color: #ece6db;
    /* Ensure the body background is white */
}

/* Ensure images scale correctly */
img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Helps manage image margins */
}

/* =================================================================
   HEADER STYLING
   ================================================================= */

header {
    /* Light, creamy background color from the PDF mock-up */
    background-color: #E0D9D5;
    width: 100%;
    box-sizing: border-box;
    /* Includes padding in the total width */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Add shadow for depth when sticky */
    transition: transform 0.3s ease-in-out;
    /* Smooth transition */
}

/* Class to hide header on scroll down */
.header-hidden {
    transform: translateY(-100%);
}

.header-content {
    /* Flexbox setup for logo (left) and navigation (right) */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Minimal vertical padding for a compact header */
    padding: 5px 40px;
}

/* Logo Sizing and Margin Fix */
.logo {
    margin: 0;
}

.alsa-logo {
    /* Adjusted height for a compact header */
    height: 8rem;
    padding-left: 3rem;
    width: auto;
    object-fit: contain;
    /* Ensures logo maintains aspect ratio */
}

/* Navigation List and Links */
.primary-nav ul {
    list-style: none;
    padding-right: 2rem;
    margin: 0;
    display: flex;
    align-items: center;
}

.primary-nav li {
    /* Setup for the vertical line separator */
    padding-left: 15px;
    padding-right: 7px;
    border-left: 4px solid #660000;
}

/* Remove the separator from the first item (HOME) */
.primary-nav li:first-child {
    border-left: none;
    padding-left: 0;
}

.primary-nav a {
    /* Link appearance */
    text-decoration: underline;
    color: #660000;
    /* ALSA Red */
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 0 10px;
    transition: color 0.3s;
}

.primary-nav a:hover {
    color: #A00000;
}

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

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ece6db;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border: 1px solid #660000;
    top: 100%;
    /* Position below the MORE link */
    left: 0;
}

.dropdown-content a {
    color: #660000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1rem;
    /* Smaller font for dropdown items */
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: #660000;
    color: #ece6db;
}

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

.dropdown:hover .dropbtn {
    color: #A00000;
    /* keep hover state on parent */
}

/* =================================================================
   GLOBAL FOOTER STYLING
   ================================================================= */

/* 1. Standard Footer (Cream - Default for all pages) */
footer {
    background-color: #ece6db;
    /* Cream */
    color: #660000;
    /* Dark Red Text */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85em;
    font-family: 'Montserrat', sans-serif;
}

/* 2. About Page Special Override (Red Footer) */
.about-page footer {
    background-color: #660000;
    /* Dark Red */
    color: #ece6db;
    /* Cream Text */
}

/* 3. Image Toggling Logic */
/* By default, hide light images on all pages */
.motto-light,
.social-light {
    display: none;
}

/* On the About Page ONLY: Hide dark images and show light images */
.about-page .motto-dark,
.about-page .social-dark {
    display: none;
}

.about-page .motto-light,
.about-page .social-light {
    display: block;
}

/* 4. Layout & Sizing Utilities */
.copyright {
    margin: 0;
    font-weight: 500;
    font-size: 1rem;
}

.footer-utilities {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.motto-dark,
.motto-light {
    height: 3rem;
    width: auto;
    margin: 0;
}

.social-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-nav img {
    width: 24px;
    height: auto;
}

/* =================================================================
   MAIN CONTENT / HERO SECTION STYLING
   ================================================================= */

#hero {
    /* Set up the container for the background image and overlay */
    background-image: url('../images/_HOME_.png');
    /* REPLACE with actual image path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Defines the height of the hero banner */
    height: 80vh;

    /* Use Flexbox to center the content */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero-text {
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-text h2 {
    /* "ALSA MALAYSIA" text style */
    font-size: 7rem;
    color: #ece6db;
    margin: 0 0 5px 0;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    /* Consistent Shadow */
}

.hero-text p {
    /* "OFFICIAL WEBSITE" text style */
    font-size: 1.5em;
    font-weight: 600;
    color: #ece6db;
    margin: 0 0 25px 0;
}

/* CTA Button Styling ("READ MORE") */
.cta-button {
    display: inline-block;
    padding: 10px 30px;
    background-color: #ece6db;
    color: #660000;
    text-decoration: underline;
    font-weight: bold;
    border: 2px solid white;
    transition: background-color 0.3s, color 0.3s;
}

.cta-button:hover {
    background-color: transparent;
    color: #ece6db;
}



/* =================================================================
   ABOUT US PAGE STYLES (pages/about.html)
   ================================================================= */


/* --- A. Page Hero Banner Styling (ABOUT ALSA MALAYSIA) --- */


#page-hero {
    /* Set the dark red background */
    background-color: #660000;
    /* Use the background image (path must go UP to root/INTO images) */
    background-image: url('../images/_ABOUT US__.png');

    /* Padding for the large, bold title */
    padding: 100px 10% 0px 10%;
    /* 10% side padding for left alignment */
    height: 60vh;
    /* Increased from 50vh */
    text-align: left;

    /* Ensure image covers area without stretching */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#page-hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 7rem;
    color: #ece6db;
    /* Light text color (as used in your hero section) */
    margin: 0;
    padding-inline: 0;
    /* REMOVED 200px padding to shift text left */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    /* Consistent Shadow */
}

/* Specific Override for Law Journal Hero Title */
.law-journal-hero h1 {
    font-size: 5rem !important;
    /* Smaller than the default 7rem to fit "Infographic" */
}

/* Specific Override for Merchandise Hero Text */
.merchandise-page #page-hero {
    padding-top: 200px;
    /* Push text down significantly for Merchandise page */
}

/* --- B. General Content Section Styling --- */

.about-section {
    /* Sets padding and centers the content */
    padding: 40px 10%;
    max-width: 1200px;
    margin: 0 auto;
}

.text-and-image-layout {
    /* Enable Flexbox for horizontal alignment */
    display: flex;
    /* Allows the content to wrap to a single column on mobile */
    flex-wrap: wrap;
    align-items: flex-start;
    /* Aligns content to the top */
    gap: 30px;
    /* Space between the text block and the image */
    margin-top: 20px;
    /* Add some space below the h2 heading */
}

.text-content {
    /* Allows the text block to take up more than half the space */
    flex: 2;
    min-width: 300px;
    /* Ensures text doesn't look squished */
}

.text-content p {
    /* Ensure the paragraphs look clean within the flex item */
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #660000 !important;
    margin-bottom: 15px;
    line-height: 1.6;
}

.side-image {
    /* Allows the image to take up about 40% of the space */
    flex: 1;
    min-width: 250px;
    /* Ensures image maintains size */
    height: auto;

    /* Optional visual styling */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.about-section h2 {
    font-family: 'Montserrat', sans-serif;
    color: #660000;
    /* ALSA dark red */
    font-size: 2.5rem;
    /* Subtle separator line */
    border-bottom: 2px solid #E0D9D5;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.about-section h3 {
    font-family: 'Montserrat', sans-serif;
    color: #660000;
    font-size: 4rem;
    text-align: center;
    margin-top: 40px;
}

.about-section p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
    text-align: justify;
}

.section-separator {
    border: none;
    border-top: 1px solid #CCC;
    /* Light gray horizontal rule */
    margin: 20px 10%;
    max-width: 1200px;
}

/* --- C. Vision Grid Styling (3-Column Layout) --- */
/*  */
.vision-grid {
    display: grid;
    /* Creates three equal columns */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
    margin-bottom: 100px;
    padding: 0 5%;
    /* added safety padding for responsive */
}

.vision-item img {
    /* Makes the images circular and sizes them */
    width: 250px;
    height: 150px;
    object-fit: contain;
    /* Changed to contain for backgroundless icons */
    margin: 0 auto 15px auto;
}

.vision-item p {
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    color: #660000;
    font-size: 1.4rem;
    padding: 0 10px;
    text-align: center;
    padding-top: 30px;
}

/* --- D. Objectives List Styling --- */

.objectives-list {
    /* Remove default bullet points */
    list-style: none;
    /* Remove default left padding */
    font-size: 1.4em;
    line-height: 1.3;
    font-family: 'Montserrat', sans-serif;
    color: #660000;
    font-weight: bold;
}

.objective-item {
    display: flex;
    /* Enables side-by-side alignment */
    align-items: center;
    /* Vertically centers the icon with the text */
    gap: 30px;
    /* Space between the icon and the text */
    margin-bottom: 25px;
    /* Space between each objective row */
    padding-inline: 200px;
}

.objective-icon {
    /* image size */
    width: 150px;
    height: auto;
    /* Keeps the image from being shrunk by the flex container */
    flex-shrink: 0;
    border-radius: 20px;
}



/* --- E. Board Member Org Chart Styling --- */

.org-chart {
    /* Makes the large org chart image fully responsive */
    width: 100%;
    height: auto;
    margin-top: 30px;
}

.note {
    text-align: center;
    font-style: italic;
    color: #888;
}


/* =================================================================
   OUR EVENTS PAGE STYLES
   ================================================================= */

/* --- A. Hero Banner --- */
.events-hero {
    background-size: cover;
    min-height: 65vh;
    /* Increased from 55vh */
    background-position: center;
    padding: 100px 10%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Align left */
    text-align: left;
}

.events-hero h1 {
    font-family: 'Montserrat', sans-serif;
    color: #ece6db;
    font-size: 7rem;
    /* Standardized to 7rem (was 5rem) */
    line-height: 0.9;
    margin: 0;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

/* --- B. 2x2 Grid Container --- */
.events-grid-container {
    padding: 140px 10%;
    max-width: 1250px;
    /* Reduced width to make the 2x2 look more compact */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Exactly 2 columns */
    gap: 40px;
    justify-content: center;
}

/* --- C. Individual Event Card --- */
.event-card {
    background-color: #a86561;
    border-radius: 30px;
    margin: 5px 45px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.event-card:hover {
    transform: translateY(-8px);
}

/* Image at the very top */
.event-card img {
    width: 90%;
    border-radius: 30px;
    aspect-ratio: 1 / 1;
    /* Vertical poster ratio */
    object-fit: cover;
    display: block;
    padding: 20px;
    margin: 0 auto;
}

/* Title below image */
.event-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #ece6db;
    font-size: 1.8rem;
    padding: 20px 20px 20px 20px;
    margin: 0;
    text-align: center;
    letter-spacing: 1px;
}

/* White Details Section */
.event-details {
    padding: 20px;
    background-color: white;
    color: #333;
    font-size: 0.95em;
    flex-grow: 1;
    /* Fills remaining space */
}

.event-details p {
    margin: 5px 0;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 5px;
}

/* --- D. Learn More Button & Placeholder --- */
/* --- D. Learn More Button & Placeholder --- */
.learn-more-btn {
    display: block;
    width: 100%;
    /* Full width of the card */
    box-sizing: border-box;
    padding: 15px 0;
    /* Vertical padding */
    background-color: white;
    /* Solid White Background */
    color: #660000;
    /* ALSA Red Text */
    text-decoration: none;
    text-align: center;
    font-weight: 800;
    /* Bold */
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    /* No border */
    border-radius: 0;
    /* Sharp corners */
    margin-top: auto;
    /* Pushes to bottom if flex container */
    transition: transform 0.2s ease, background-color 0.2s;
}

.learn-more-btn:hover {
    /* Slight motion effect as suggested */
    transform: translateY(-2px);
    background-color: #f0f0f0;
    /* Slight dim on hover */
    color: #660000;
    /* Subtle expansion effect */
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.1);
    /* Adds depth */
}

.coming-soon-placeholder {
    padding: 20px;
    background-color: #E0D9D5;
    color: #660000;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8em;
}

/* --- E. body color --- */
.body,
.events-page {
    background-color: #730000;
    /* Your signature ALSA Cream color */
    margin: 0;
    padding: 0;
}

/* Mobile View: Switch to 1 column */
@media (max-width: 768px) {
    .events-grid-container {
        grid-template-columns: 1fr;
        padding: 30px 5%;
    }
}


/* =================================================================
   MORE PAGE STYLES (more.html)
   ================================================================= */

/* --- A. More Hero Banner --- */
.more-hero {
    /* Adjust height to be slightly shorter than the Events hero */
    height: 60vh;
    /* Reduced to 60vh per user request */
    background-color: #660000;
    /* Darker red for the hero area */
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
    padding: 0 20px;
}

.more-hero h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 7rem;
    /* Standardized to 7rem (was 9rem) */
    color: #ece6db;
    /* Light text color (as used in your hero section) */
    margin: 0;
    line-height: 1;
    padding-inline: 200px;
    /* Reverted back to 200px per user request */
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    /* Consistent Shadow */
}

/* --- B. More Grid Container --- */
.more-container {
    padding: 60px 10%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    /* This creates a flexible grid that fits as many columns as possible */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* --- C. More Resource Cards --- */
.more-card {
    background-color: #ece6db;
    /* Cream background to pop against dark red body */
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.more-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.more-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #730000;
    /* Dark red text for the title */
    font-size: 1.5rem;
    margin: 20px 0 15px 0;
    text-transform: uppercase;
}

.more-card p {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- D. More Link Button --- */
.more-link-btn {
    margin-top: auto;
    /* Pushes button to the bottom */
    padding: 12px 30px;
    background-color: #a86561;
    /* Using your specific rose color */
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    transition: background 0.3s;
}

.more-link-btn:hover {
    background-color: #730000;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .more-hero h1 {
        font-size: 2.5rem;
    }

    .more-container {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        padding: 40px 5%;
    }
}

/* =================================================================
   MERCHANDISE PAGE STYLES (merchandise.html)
   ================================================================= */
/* Merchandise Items Section (Dark Red) */
.merch-items-section {
    background-color: #660000;
    /* Dark Red */
    padding: 80px 10%;
    display: flex;
    justify-content: center;
    gap: 80px;
    /* Space between items */
    flex-wrap: wrap;
    text-align: center;
}

.merch-item {
    background-color: transparent;
    /* Remove white card background */
    box-shadow: none;
    /* Remove shadow */
    max-width: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.merch-item img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    margin-bottom: 20px;
    transition: transform 0.s ease;
}

.merch-item:hover {
    transform: translateY(-10px);
}

.merch-item h3 {
    font-family: 'Montserrat', sans-serif;
    color: #ece6db;
    /* Cream/White text */
    font-size: 1.5rem;
    margin: 10px 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.merch-item p {
    display: none;
    /* Hide description in the listing view as per guideline visual */
}

/* See More Button (formerly buy-btn) */
.see-more-btn {
    display: inline-block;
    padding: 10px 40px;
    background-color: #ece6db;
    color: #660000;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #ece6db;
    border-radius: 5px;
    transition: all 0.3s;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.see-more-btn:hover {
    background-color: #660000;
    color: #ece6db;
}

/* Merchandise Detail Pages */
/* Merchandise Detail Pages */
.merch-detail-page {
    /* Ensure the path is correct relative to pages/styles.css -> images/merch-bg.png */
    background-image: url('../images/merch-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Fixes header floating issue */
    align-items: center;
    justify-content: flex-start;
    /* Starts from top */
    position: relative;
    padding-top: 0;
}

.merch-detail-container {
    display: flex;
    flex-direction: row;
    /* Split screen */
    max-width: 1200px;
    width: 90%;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
    margin: auto;
    /* Vertically centers the container in remaining space */
    padding-bottom: 60px;
}

.merch-detail-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.merch-detail-image img {
    max-width: 100%;
    max-height: 60vh;
    object-fit: contain;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}

.merch-detail-text {
    flex: 1;
    /* Removed text-shadow for cleaner look with red text */
}

.merch-detail-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    text-transform: uppercase;
    color: #660000;
    /* ALSA Red */
    line-height: 1.1;
    font-family: 'Montserrat', sans-serif;
}

.merch-detail-text p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 0;
    color: #660000;
    /* ALSA Red */
    font-weight: 600;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
}

/* Back Link (Top Left) */
.back-btn-overlay {
    position: absolute;
    top: 180px;
    left: 45px;
    z-index: 100;
    text-decoration: none;
    color: #660000;
    /* ALSA Red */
    font-weight: bold;
    font-size: 1.2rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.back-btn-overlay:hover {
    transform: translateX(-5px);
    color: #a00000;
}

@media (max-width: 992px) {
    .merch-detail-container {
        flex-direction: column;
        gap: 2rem;
        margin-top: 40px;
    }

    .merch-detail-page {
        height: auto;
    }

    .merch-detail-text {
        text-align: center;
        width: 100%;
        padding: 1rem;
    }

    .merch-detail-text p {
        text-align: center;
    }

    .merch-detail-image img {
        max-height: 40vh;
    }

    .back-btn-overlay {
        top: 120px;
        left: 20px;
    }
}

/* =================================================================
   LOCAL CHAPTERS PAGE STYLES (local-chapters.html)
   ================================================================= */

.chapters-section {
    padding: 80px 10%;
    background-color: #660000;
    /* ALSA Red background */
    min-height: 80vh;
}

.chapters-grid {
    display: grid;
    /* Fixed 5 columns as requested */
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    justify-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.chapter-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.chapter-item:hover {
    transform: scale(1.05);
}

.chapter-item img {
    /* Ensure logos are reasonably sized and consistent */
    width: 160px;
    height: 160px;
    object-fit: contain;
    margin-bottom: 20px;
}

.chapter-item h3 {
    font-family: 'Montserrat', sans-serif;
    color: #ece6db;
    /* Cream text */
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

.chapter-ig-link {
    font-family: 'Montserrat', sans-serif;
    color: #ece6db;
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.chapter-ig-link:hover {
    color: #ffd700;
    text-decoration: underline;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 900px) {
    .chapters-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Switch to 2 columns on tablets/mobile */
        gap: 30px;
        max-width: 600px;
    }
}

/* =================================================================
   LAW JOURNAL PAGE STYLES (law-journal.html)
   ================================================================= */

.journal-container {
    max-width: 65%;
    /* Reduced to 65% per user request ("smaller") */
    margin: 0 auto;
    padding: 60px 5%;
    display: grid;
    grid-template-columns: 1fr;
    /* Single column, stacked */
    gap: 60px;
}

.journal-column h2 {
    font-family: 'Montserrat', sans-serif;
    color: #660000;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-weight: 800;
}

.journal-card {
    background-color: #660000;
    /* ALSA Red */
    display: flex;
    /* Side-by-side layout */
    align-items: stretch;
    margin-bottom: 30px;
    min-height: 200px;
    /* Ensure sufficient height */
}

/* Alternating Layouts */
.journal-card.normal {
    flex-direction: row;
}

.journal-card.reversed {
    flex-direction: row-reverse;
}

.journal-card img {
    width: 45%;
    object-fit: contain;
    /* Changed from cover to contain to respect padding */
    padding: 65px;
    /* Increased to 65px per user request */
    filter: drop-shadow(20px 20px 30px rgba(0, 0, 0, 0.6));
    /* Shadow on Right (20px) and Bottom (20px) */
    box-sizing: border-box;
    /* Ensure padding is included in width */
}

.journal-card-content {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.journal-card h3 {
    font-family: 'Montserrat', sans-serif;
    color: #ece6db;
    /* Cream Text */
    font-size: 3rem;
    /* Prominent size */
    font-weight: 900;
    /* Extra Bold */
    margin-top: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 1px;
}

/* Reusing the white block button style, aliased for clarity */
.read-more-btn {
    display: block;
    width: 100%;
    padding: 10px 0;
    background-color: white;
    color: #660000;
    text-decoration: none;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    border: none;
    text-align: center;
    margin-top: auto;
    transition: background-color 0.2s;
    margin: 5px 0;
    display: inline-block;
    /* Revert to inline-block for proper padding/width control */
}

.read-more-btn:hover {
    background-color: #f0f0f0;
    color: #800000;
}

/* --- Law Journal Page Specifics (Blue/Red Theme) --- */
.law-journal-page {
    background-color: #730000;
    /* Dark Red (User Correction) */
}

/* Headers on the blue page */
.law-journal-page h2 {
    color: #ece6db;
    margin-bottom: 40px;
    /* More space below headers */
}

/* Cards: Red Background, Cream Text */
.law-journal-page .journal-card {
    background-color: #660000;
    /* ALSA Red */
    color: #ece6db;
    /* Cream Text */
    margin-bottom: 40px;
    /* Increased gap between containers */
}

.law-journal-page .journal-card h3 {
    color: #ece6db;
}

/* Use Anton font for description text */
.law-journal-page .journal-card p {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 1px;
    /* Optional: Adjusts spacing for readability */
}

.law-journal-page .read-more-btn {
    background-color: #ece6db;
    /* Cream Button */
    color: #660000;
    /* Red Text */
    font-weight: 900;
}

.law-journal-page .read-more-btn:hover {
    background-color: #ffffff;
    color: #800000;
}

/* Responsive: Stack columns on mobile */
@media (max-width: 900px) {
    .journal-container {
        grid-template-columns: 1fr;
        padding: 40px 5%;
    }
}

/* =================================================================
   RESPONSIVE ADJUSTMENTS FOR LAPTOPS (1024px - 1440px)
   ================================================================= */
@media (max-width: 1440px) {

    /* GLOBAL SCALING FIX: Simulates 80% zoom */
    html {
        font-size: 13px;
    }

    /* Scale down hero text */
    .hero-text h2 {
        font-size: 5rem;
    }

    #page-hero h1,
    .more-hero h1,
    .events-hero h1 {
        font-size: 4.5rem;
        padding-inline: 0;
        /* Reduced from 200px/0 */
    }

    /* Reduce Hero Padding */
    #page-hero {
        padding: 80px 40px 0px 60px;
        /* Reduce left padding */
    }

    /* Adjust Navigation for smaller headers */
    .primary-nav a {
        font-size: 1.1rem;
        /* Scale down from 1.5rem */
        padding: 0 8px;
    }

    .alsa-logo {
        height: 6rem;
        /* Scale logo */
    }

    /* Adjust Main Containers */
    .journal-container,
    .events-grid-container,
    .more-container,
    .about-section {
        max-width: 90%;
        padding: 60px 2%;
        /* Reduce horizontal padding */
    }

    .merch-items-section {
        width: 100%;
        max-width: 100%;
        padding: 60px 2%;
        box-sizing: border-box;
    }

    /* Ensure Journal titles scale */
    .journal-card h3 {
        font-size: 2.2rem;
    }
}

/* =================================================================
   TABLET RESPONSIVENESS (iPad Portrait: 769px - 1024px)
   ================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {

    /* 1. Base Scale */
    html {
        font-size: 13px;
        /* Keep scaling consistent with laptop */
    }

    /* 2. Hero Tweak */
    .hero-text h2,
    #page-hero h1,
    .events-hero h1,
    .more-hero h1 {
        font-size: 3.5rem;
        /* Smaller than desktop, bigger than mobile */
        padding-inline: 0;
    }

    #hero,
    .events-hero,
    #page-hero,
    .more-hero {
        padding-left: 5%;
        /* Less padding than desktop */
    }

    /* 3. Navigation */
    .header-content {
        padding: 5px 20px;
    }

    .primary-nav a {
        font-size: 1rem;
        /* Smaller links to fit narrow portrait width */
        padding: 0 5px;
    }

    /* 4. Grid Safety */
    .events-grid-container {
        gap: 20px;
        /* Tighter gap */
        padding: 100px 5%;
    }

    .journal-container {
        /* Ensure it stays 2-col or stacks comfortably */
        padding: 60px 5%;
        gap: 30px;
    }
}

/* =================================================================
   MOBILE RESPONSIVENESS (Phones < 768px)
   ================================================================= */
@media (max-width: 768px) {

    /* 1. Typography Scaling */
    html {
        font-size: 12px;
        /* Base scale down */
    }

    h1,
    h2,
    h3 {
        word-wrap: break-word;
        /* Prevent overflow */
    }

    /* 2. Header & Navigation */
    .header-content {
        flex-direction: column;
        padding: 15px;
    }

    .alsa-logo {
        height: 4rem;
        /* Smaller logo */
        padding-left: 0;
        margin-bottom: 10px;
    }

    .primary-nav ul {
        flex-wrap: wrap;
        /* Allow links to wrap */
        justify-content: center;
        padding-right: 0;
    }

    .primary-nav li {
        margin-bottom: 5px;
        /* Spacing for wrapped lines */
    }

    /* 3. Hero Sections */
    #hero,
    .events-hero,
    #page-hero,
    .more-hero {
        height: auto;
        min-height: 40vh;
        /* Reduced height constraint */
        padding: 40px 15px !important;
        /* Force smaller padding */
        text-align: center !important;
        /* Force center on mobile */
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-text,
    .hero-text h2,
    #page-hero h1,
    .events-hero h1,
    .more-hero h1 {
        width: 100%;
        text-align: center;
        font-size: 2.2rem !important;
        /* Drastically reduce titles further */
        padding-inline: 0 !important;
        line-height: 1.2;
    }

    /* 4. Layout Stacking */
    .journal-container,
    .events-grid-container,
    .vision-grid,
    .text-and-image-layout,
    .objective-item {
        display: flex;
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }

    .text-content,
    .side-image,
    .objective-icon {
        width: 100%;
        padding: 0;
    }

    .objective-item {
        padding-inline: 0;
        text-align: center;
    }

    .journal-card {
        flex-direction: column !important;
        /* Stack card content */
        text-align: center;
    }

    .journal-card img {
        width: 100%;
        height: 200px;
    }

    /* 5. Footer */
    footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer-utilities {
        width: 100%;
    }
}