/* Remediated CSS for The Hearthside Commons */
:root {
    --hopeful-cobalt: #2B65A9;
    --determined-fandango: #A01A7D;
    --serious-oxford: #090029;
    --action-platinum: #DBDBDB;
    --action-white: #FFFFFF;
}

body {
    font-family: 'Overpass', sans-serif;
    background-color: var(--action-platinum);
    color: var(--serious-oxford);
}
.font-headline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}
.text-shadow-subtle {
    text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}

/* Header & Navigation Adjustments for scaling and hover */
#main-header .container {
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

#main-header nav .hidden.md\:flex > a {
    /* Apply consistent transition for hover effects */
    transition: color 0.3s ease-in-out, transform 0.2s ease-out;
}

#main-header nav .hidden.md\:flex > a:hover {
    transform: translateY(-2px); /* Subtle lift on hover */
}

/* Hero Carousel Styles */
#home {
    min-height: 70vh;
    position: relative; /* Ensure positioning context for slides */
    overflow: hidden; /* Hide overflowing slides */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* Smooth fade transition */
    display: flex; /* Ensure content is centered */
    align-items: center;
    justify-content: center;
    z-index: 5; /* Below overlays but above background img */
}

.hero-slide.active {
    opacity: 1;
    z-index: 10; /* Bring active slide to top */
}

.hero-slide img {
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind overlays */
}

.hero-slide .absolute.inset-0 { /* Overlay */
    z-index: 2;
}

.home-hero-content-bg {
    background-color: rgba(9, 0, 41, 0.5); /* Serious Oxford with transparency */
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    position: relative; /* Ensure content is above overlay */
    z-index: 3; /* Above overlay */
}

/* Hero Carousel Navigation Buttons */
.hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    color: var(--action-white);
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 20; /* Above slides */
    font-size: 2.5rem; /* Larger icon size */
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, transform 0.2s;
}

.hero-nav-btn:hover {
    background-color: rgba(0,0,0,0.7);
    transform: translateY(-50%) scale(1.1);
}

.hero-nav-btn.left-0 {
    left: 1rem;
}

.hero-nav-btn.right-0 {
    right: 1rem;
}


/* Accordion Styles */
.accordion-content {
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out, padding-top 0.5s ease-in-out, padding-bottom 0.5s ease-in-out;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.accordion-summary {
    display: block;
    padding: 1.5rem 0;
}
.accordion-full-content {
    display: none;
    padding: 1.5rem 0;
}
.accordion-icon {
    transition: transform 0.4s ease-in-out;
}
.accordion-icon.open {
    transform: rotate(180deg);
}
.show-more-btn {
    transition: opacity 0.3s, transform 0.3s;
    cursor: pointer;
    display: flex; /* Use flex to center icon */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: 0 auto; /* Center the button itself */
}
.show-more-btn.hidden {
    opacity: 0;
    pointer-events: none;
}
.show-more-btn.less {
    transform: rotate(180deg);
}

/* Section specific backgrounds/titles */
.section-with-bg {
    position: relative;
    padding-top: 4rem; /* Adjust based on content */
    padding-bottom: 4rem;
    overflow: hidden;
    z-index: 0;
    background-color: var(--action-white); /* Default background for these sections */
}
.section-with-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0.1; /* Subtle opacity for background images */
    z-index: -1;
}

#about-section.section-with-bg::before {
    background-image: url('https://images.pexels.com/photos/3184405/pexels-photo-3184405.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); /* Community image */
    opacity: 0.05; /* More subtle */
}

#crisis-section.section-with-bg::before {
    background-image: url('https://images.pexels.com/photos/417273/pexels-photo-417273.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); /* Example city skyline */
    opacity: 0.1;
}

#solution-section.section-with-bg::before {
    background-image: url('https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); /* Example architectural drawing */
    opacity: 0.1;
}

#projects-section.section-with-bg::before {
    background-image: url('https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); /* Example home interior */
    opacity: 0.1;
}

#dialogue-section.section-with-bg::before {
    background-image: url('https://images.pexels.com/photos/1036936/pexels-photo-1036936.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); /* Conversation/forum image */
    opacity: 0.08;
}

#action-section.section-with-bg::before {
    background-image: url('https://images.pexels.com/photos/3184360/pexels-photo-3184360.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'); /* Action/hands-on image */
    opacity: 0.07;
}


/* Chart & Map Container Styles */
.chart-container, #corporate-footprint-map {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    height: 400px;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    background-color: var(--action-white); /* Ensure chart/map background is white for contrast */
}
/* Specific styling for investor ownership chart colors already handled by JS */


/* Color Classes for JS Use */
.bg-determined-fandango { background-color: var(--determined-fandango); }
footer.bg-serious-oxford { background-color: var(--serious-oxford); }

/* General Prose Styling */
.prose a { color: var(--hopeful-cobalt); text-decoration: underline; }
.prose a:hover { color: var(--determined-fandango); }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; }
.prose ul { list-style: disc; margin-left: 1.25em; }
.prose h3, .prose h4 { font-family: 'Montserrat', sans-serif; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.75em; }
.prose h3 { font-size: 1.5rem; color: var(--determined-fandango); }
.prose h4 { font-size: 1.25rem; color: var(--hopeful-cobalt); }

/* KPI value size */
.kpi-value {
    font-size: clamp(3rem, 8vw, 6rem);
}

/* Policy diagram styling */
.policy-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.policy-diagram > div {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    text-align: center;
    flex: 1 1 auto;
    min-width: 100px;
    max-width: 250px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.policy-diagram .bg-blue-50 { /* Tenant A box */
    background-color: rgba(43, 101, 169, 0.1); /* Hopeful Cobalt light */
    color: var(--serious-oxford);
}
.policy-diagram .border-dashed { /* Unit Vacant box */
    border-color: var(--determined-fandango); /* Stronger visual for brokenness */
}
.policy-diagram .bg-green-100 { /* Tenant B box */
    background-color: rgba(60, 179, 113, 0.1); /* Forest Green light */
    color: var(--serious-oxford);
}
.policy-diagram .text-green-800 {
    color: #3CB371; /* Forest Green */
}
.policy-arrow {
    font-weight: bold;
    font-size: 2rem;
    color: var(--determined-fandango);
    /* Removed animate-pulse to prevent text content from pulsating */
}
.policy-arrow.green {
    color: #3CB371; /* Forest Green */
}
/* Removed @keyframes pulse to avoid text content pulsating */


/* Projects Section specific styling */
.project-card {
    background-color: var(--action-white);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: 1px solid var(--action-platinum);
    display: flex;
    flex-direction: column;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.project-card img {
    width: 100%;
    height: 256px; /* h-64 equivalent */
    object-fit: cover;
}
.project-card .p-6 {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.project-card .progress-bar-container {
    background-color: var(--action-platinum);
    border-radius: 9999px; /* full rounded */
    height: 0.5rem; /* h-2 */
    margin-top: 0.5rem; /* mt-2 */
}
.project-card .progress-bar {
    background-color: var(--hopeful-cobalt);
    height: 100%;
    border-radius: 9999px;
    width: var(--progress-percentage, 0%); /* Controlled by JS */
}

/* Project Status Badges */
.status-badge-acquired {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Pill shape */
    background-color: var(--hopeful-cobalt);
    color: var(--action-white);
    font-weight: 700;
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status-badge-planned {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Pill shape */
    background-color: var(--determined-fandango);
    color: var(--action-white);
    font-weight: 700;
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.status-badge-expansion {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* Pill shape */
    background-color: var(--serious-oxford);
    color: var(--action-white);
    font-weight: 700;
    font-size: 0.875rem; /* text-sm */
    margin-bottom: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* Blueprint for Change & Legal Innovation styles from alpha1 */
.blueprint-timeline {
    position: relative;
    width: 100%;
    margin-top: 3rem;
    padding-bottom: 1rem; /* Space for last item */
}
.blueprint-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: var(--hopeful-cobalt);
    transform: translateX(-50%);
    z-index: 0;
}
.blueprint-step {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    align-items: center; /* Vertically align text and image */
}
.blueprint-step-circle {
    background-color: var(--hopeful-cobalt);
    color: var(--action-white);
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    position: absolute; /* Position relative to parent for alternating sides */
    left: 50%;
    transform: translateX(-50%); /* Center on the timeline line */
}

/* Common styling for blueprint content and image */
.blueprint-step-content {
    background-color: var(--action-white);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    flex-grow: 1;
    text-align: left;
    position: relative; /* For z-index over timeline line */
    z-index: 1;
}

.blueprint-image { /* Normalized size for all blueprint images */
    width: 100%; /* Default to full width on small screens */
    height: 250px; /* Fixed height */
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 1rem; /* Space below text on small screens */
}


@media (min-width: 768px) {
    .blueprint-step {
        justify-content: space-between; /* Push content to sides of timeline */
    }
    .blueprint-step-circle {
        position: relative; /* Allow flow-based positioning for alignment */
        left: auto;
        transform: none;
        flex-shrink: 0; /* Prevent shrinking */
    }

    /* Alternating text/image layout for blueprint steps */
    .blueprint-step:nth-child(odd) { /* Text on right, Image on left */
        flex-direction: row-reverse;
    }
    .blueprint-step:nth-child(even) { /* Text on left, Image on right */
        flex-direction: row;
    }

    .blueprint-step-content {
        width: calc(50% - 3rem); /* Half width minus space for circle/gap */
        margin: 0; /* Reset margins */
    }
    .blueprint-step-circle {
        margin: 0 1.5rem; /* Space between content boxes */
    }

    .blueprint-image {
        width: calc(50% - 3rem); /* Make image take half width */
        margin-top: 0; /* Reset margin from small screen styles */
    }

    .blueprint-step:nth-child(odd) .blueprint-step-content {
        order: 2; /* Content after circle */
        margin-left: 1.5rem; /* Gap from circle */
    }
    .blueprint-step:nth-child(odd) .blueprint-image {
        order: 1; /* Image before circle */
        margin-right: 1.5rem; /* Gap from circle */
    }
    .blueprint-step:nth-child(even) .blueprint-step-content {
        order: 1; /* Content before circle */
        margin-right: 1.5rem; /* Gap from circle */
    }
    .blueprint-step:nth-child(even) .blueprint-image {
        order: 2; /* Image after circle */
        margin-left: 1.5rem; /* Gap from circle */
    }

    .project-phase3-card {
        flex-direction: row;
    }
    .project-phase3-card img {
        width: 33.333333%; /* md:w-1/3 */
        height: auto; /* md:h-auto */
        min-height: 200px; /* Ensure image isn't too small */
    }
}


/* Get Involved section */
.action-tile {
    background-color: var(--hopeful-cobalt); /* Unified background */
    color: var(--action-white);
    padding: 2rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    height: 100%; /* Ensures equal height in grid */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.action-tile h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--action-white);
    margin-bottom: 0.5rem;
}
.action-tile .icon-large {
    font-size: 3rem; /* Larger icon */
    margin-bottom: 1rem;
    color: var(--action-white);
}
.action-tile p {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    flex-grow: 1; /* Pushes button to bottom */
}
.action-tile .btn {
    margin-top: 1.5rem;
    display: inline-flex; /* Use inline-flex for icon alignment */
    align-items: center;
    justify-content: center;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, transform 0.2s ease-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.action-tile .btn-primary { /* Donate */
    background-color: var(--determined-fandango);
    color: var(--action-white);
}
.action-tile .btn-primary:hover {
    background-color: #B93F90; /* Darker Fandango */
    transform: translateY(-2px);
}
.action-tile .btn-secondary { /* Advocacy Tool */
    background-color: var(--action-white);
    color: var(--determined-fandango);
}
.action-tile .btn-secondary:hover {
    background-color: var(--action-platinum);
    transform: translateY(-2px);
}
.action-tile .btn-tertiary { /* Sign Up */
    background-color: var(--serious-oxford);
    color: var(--action-white);
}
.action-tile .btn-tertiary:hover {
    background-color: #1a2230; /* Darker Oxford */
    transform: translateY(-2px);
}
.action-tile form {
    width: 100%;
    /* Ensure vertical stacking for email form */
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* Space between input and button */
}
.action-tile form input {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%; /* Ensure input takes full width */
}

/* Merch wrapping */
.merch-carousel {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items when they wrap */
    gap: 1rem;
    padding-bottom: 1rem;
    /* Removed overflow-x, scroll-snap, scrollbar styles as it's now wrapped */
    overflow-x: hidden; /* Prevent horizontal scrollbar if flex-wrap is used */
    padding-left: 0;
    padding-right: 0;
}

.merch-card {
    flex: 0 0 calc(50% - 0.5rem); /* Two cards per row on mobile, accounting for gap */
    max-width: calc(50% - 0.5rem);
    /* Removed scroll-snap-align */
    margin-bottom: 1rem; /* Add margin for wrapped items */
}

@media (min-width: 640px) {
    .merch-card {
        flex: 0 0 calc(33.333% - 0.66rem); /* Three cards on medium screens */
        max-width: calc(33.333% - 0.66rem);
    }
}

@media (min-width: 1024px) {
    .merch-card {
        flex: 0 0 calc(25% - 0.75rem); /* Four cards on large screens */
        max-width: calc(25% - 0.75rem);
    }
}

.merch-card img {
    height: 200px; /* Consistent height for thumbnails */
}

/* Dialogue thumbnails */
.dialogue-article-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 0.375rem; /* rounded-md */
    margin-bottom: 1rem;
}

/* Calendar styling for better fit/scale */
#calendar-container {
    padding: 1rem;
    /* Removed overflow-x: auto; as calendar is now a list and doesn't need to scroll horizontally */
}
/* Removed grid-cols-7 related styles as calendar is now a list */
#calendar-container .material-symbols-rounded {
    color: var(--action-white); /* White icons on cobalt/fandango events */
}
#calendar-container .font-headline {
    color: var(--serious-oxford); /* Calendar title color */
}


/* Legal Innovation Diagram fixes */
.legal-innovation-diagram {
    display: flex;
    flex-direction: column; /* Default to column for small screens */
    align-items: center;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--action-platinum); /* Light background for contrast */
    border-radius: 0.5rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.1); /* Subtle border */
}

.legal-innovation-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--action-white);
    padding: 1.5rem; /* Increased padding */
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Stronger shadow */
    min-width: 180px; /* Min width to prevent squishing */
    flex-grow: 1;
    transition: transform 0.2s ease-out; /* Add transition */
}
.legal-innovation-step:hover {
    transform: translateY(-5px); /* Lift on hover */
    box-shadow: 0 6px 10px rgba(0,0,0,0.15);
}

.legal-innovation-icon {
    font-size: 3rem; /* Larger icons */
    margin-bottom: 0.5rem;
    color: var(--hopeful-cobalt); /* Consistent icon color */
}

.legal-innovation-arrow {
    font-weight: bold;
    font-size: 2rem; /* Larger arrow */
    color: var(--determined-fandango); /* Strong arrow color */
    margin: 0.5rem 0;
    line-height: 1; /* Compact line height */
}
/* For vertical arrow: */
.legal-innovation-arrow.material-symbols-rounded {
    transform: rotate(0deg); /* Ensure it's not rotated */
}

.legal-innovation-dashed-border {
    border: 2px dashed var(--determined-fandango); /* Match arrow color */
}

@media (min-width: 768px) {
    .legal-innovation-diagram {
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start; /* Align tops for cleaner look */
    }
    .legal-innovation-step {
        flex: 1;
        max-width: 200px; /* Constrain max width for consistent cards */
        margin-right: 0.5rem; /* Adjust margin for row layout */
        margin-left: 0.5rem;
    }
    .legal-innovation-arrow {
        transform: rotate(90deg); /* Rotate for horizontal flow */
        margin: 0 1rem; /* Adjust margin for row layout */
        flex-shrink: 0;
    }
}