/*
|--------------------------------------------------------------------------
| WORLDS FINEST CHOCOLATE - STYLESHEET
|--------------------------------------------------------------------------
| This file contains all global, layout, component, and media-specific
| styles, organized into logical sections for maintenance.
*/ 
/* --- Optimized Roboto Fonts (400, 500, 700 only) --- */
/*
|--------------------------------------------------------------------------
| WORLDS FINEST CHOCOLATE - FONT DEFINITIONS
|--------------------------------------------------------------------------
| Optimized local font hosting (Roboto + Roboto Slab)
| All paths are root-relative for consistent loading across all pages.
*/

/* --- Roboto (400, 500, 700) --- */

/* Regular 400 */
@font-face {
  font-display: optional;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-v49-latin-regular.woff2') format('woff2');
}

/* Italic 400 */
@font-face {
  font-display: optional;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('/fonts/roboto-v49-latin-italic.woff2') format('woff2');
}

/* Medium 500 */
@font-face {
  font-display: optional;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/roboto-v49-latin-500.woff2') format('woff2');
}

/* Medium Italic 500 */
@font-face {
  font-display: optional;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('/fonts/roboto-v49-latin-500italic.woff2') format('woff2');
}

/* Bold 700 */
@font-face {
  font-display: optional;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/roboto-v49-latin-700.woff2') format('woff2');
}

/* Bold Italic 700 */
@font-face {
  font-display: optional;
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('/fonts/roboto-v49-latin-700italic.woff2') format('woff2');
}


/* --- Roboto Slab (Regular 400) --- */
@font-face {
  font-display: optional;
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-slab-v36-latin-regular.woff2') format('woff2');
}


/* --- A. GLOBAL STYLES & RESETS --- */

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    position: relative;
    font-size: 16px;
}



/* Global Heading Styles: Sets font family and primary color for all h-tags */
h1, h2, h3, h4, h5, h6 {
    color: #7d262a; /* PRIMARY COLOR */
    font-family: 'Roboto Slab', serif;
}

/* Paragraph & List Resets */
p {
    margin: 0;
    padding: 0;
}
h2 + p {
    margin-top: 0;
}
ul {
    padding: 0;
    list-style: none;
}
li {
    margin-bottom: 10px;
}

/* Global Link Styles */
a {
    color: #006dba; /* ACCENT COLOR */
    text-decoration: none;
    display: inline-block;
}

/* Global Link Interaction Styles */
a:hover, a:active, a:focus {
    color: #006dba; /* ACCENT COLOR */
    text-decoration: underline;
    outline: none;
}

/* --- B. HEADER STYLES (Includes Mobile Overrides) --- */
.header {
    background-image: url('images/bar.png');
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    height: 240px;
    position: relative;
}

.logo img {
    /* Converted 5in to 480px */
    width: 480px;
}

.header-link {
    text-decoration: none;
    color: inherit;
    width: 60%;
    height: 100%;
    display: flex;
    align-items: center;
}

/* RESTRUCTURED: Use Flexbox for cleaner header layout */
.header .right-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between; /* Pushes content to the top and bottom */
    position: static;
    height: 100%;
    padding: 20px 30px;
    box-sizing: border-box;
    width: 60%;
}

/* Contact Info Positioning & Styling */
.contact-info, address {
    font-style: normal; /* Removes default italics from <address> tag */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0;
}

.contact-name {
    color: #7d262a; /* PRIMARY COLOR */
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 20px;
}

.phone-number {
    color: #000000;
    margin: 5px 0;
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
}

.zip-checker {
    color: black;
    text-align: right;
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    margin-bottom: 0;
}

#zipInput {
    width: 90px;
    height: 30px;
}

/* --- C. HEADER MOBILE OPTIMIZATION --- */
@media (max-width: 768px) {
    .header {
        background-image: none;
        height: auto;
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px;
    }
    .header-link {
        width: 100%;
        height: auto;
        justify-content: center;
        padding: 10px 0;
    }
    .header .right-content {
        width: 100%;
        padding: 0 10px;
        align-items: center;
        justify-content: center;
    }
    .contact-info, address {
        align-items: center;
        margin-bottom: 15px;
    }
    .zip-checker {
        position: static;
        margin-top: 15px;
        text-align: center;
    }
}

/* --- D. ADDITIONAL LINKS (Header Utility) --- */
.additional-links {
    display: flex;
    justify-content: flex-end;
    margin-right: 20px;
    flex-wrap: wrap;
}

.additional-links .link {
    color: #006dba; /* ACCENT COLOR */
    margin-right: 5px;
}

.additional-links a {
    margin-right: 8px;
}

/* Prevent the last link from having extra space on the right */
.additional-links .link:last-child {
    margin-right: 0;
}

/* Add space around the separators */
.additional-links a::after {
    content: " |";
    margin: 0 8px;
}

/* Remove the separator from the last link */
.additional-links a:last-child::after {
    content: "";
}

/* Prevent overlap between email button and links */
.email-button {
    margin-bottom: 10px;
    clear: both;
}

/* Mobile Optimization for Additional Links */
@media (max-width: 768px) {
    .additional-links {
        margin-right: 10px;
        justify-content: center;
    }

    .additional-links a {
        margin-right: 5px;
        font-size: 14px;
    }

    .additional-links .link {
        margin-right: 10px;
    }
}

/* --- E. MAIN CONTENT & BODY BACKGROUND --- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url('images/circular.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 400px;
    filter: brightness(1.5) opacity(0.1);
}

.main-content {
    font-family: 'Roboto', sans-serif;
    /* Converted 1in margin to 6rem and centered content */
    margin: 6rem auto 0;
    max-width: 1200px;
    padding: 0 6rem;
}

.tight-margin {
    /* Consistent 6rem unit for content width constraints */
    margin-left: 6rem;
    margin-right: 6rem;
}

.address {
    text-align: center;
    margin-top: 20px;
}

.address p {
    margin: 0;
    line-height: 1;
}

.bottom-height-add {
    height: 100px;
}

/* --- F. IMAGE & GALLERY STYLES --- */
.image-gallery {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 40px;
}

.gallery-image {
    max-width: 90%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}

.image-container {
    text-align: center;
    margin-top: 30px;
}

.centered-image {
    max-width: 90%;
    height: auto;
    margin-bottom: 20px;
}

.bullet-points {
    list-style-type: disc;
    margin-top: 10px;
    margin-bottom: 0;
    color: #333;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    width: auto;
    max-width: none;
    padding-left: 20px;
    font-family: 'Roboto', sans-serif;
    word-wrap: break-word;
}

.bullet-points li {
    margin-bottom: 5px;
}

/* --- G. FORM & TESTIMONIAL STYLES (Includes Mobile Overrides) --- */
.form-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
}

.input-group {
    margin-bottom: 15px;
}

.form-container label {
    display: block;
    margin-bottom: 5px;
}

.form-container input[type="text"],
.form-container input[type="email"],
.form-container textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-bottom: 10px;
}

.testimonial-section {
    width: auto;
    padding: 50px 30px;
    clear: both;
    margin-top: 0;
    margin-bottom: 20px;
    box-sizing: border-box;
    max-width: none;
}

.testimonial {
    max-width: 900px;
    margin: 0px auto 20px auto;
    padding: 0;
    text-align: center;
}

.testimonial-text {
    font-size: 20px;
    line-height: 1.5;
    color: #1a1a1a;
}

.testimonial-author {
    font-size: 20px;
    font-style: italic;
    color: #444;
    margin-top: 10px;
}


/* Ensures the label for the first radio group stays inline */
.form-label-inline {
    display: inline-block;
    font-weight: 700;
    margin-right: 15px; /* Adds space between the label and the radio buttons */
    color: #7d262a; /* PRIMARY COLOR */
    font-size: 1.05em;
    font-family: 'Roboto', sans-serif;
    vertical-align: middle; /* Centers it vertically with the radio group */
}

/* Flexbox to keep radio buttons on the same line as the label */
.radio-flex {
    display: inline-block; /* Makes the group sit next to the inline label */
    margin-top: 0;
    vertical-align: middle;
}

/* For the Delivery radio buttons, we want the label on the top, but the options on separate lines */
.radio-flex-block {
    display: block; /* Overrides the inline-block for the second radio group */
    margin-top: 5px;
}

/* Ensures radio button labels are next to their input */
.radio-group label, .checkbox-group label {
    display: inline-block; /* Makes sure the label flows horizontally with the input */
    font-weight: normal;
    margin-left: 8px;
    color: #333;
    font-size: 1em;
    margin-right: 15px;
}

.agreement-group input[type="checkbox"],
.agreement-group label[for] {
    /* Ensures the input and label are treated as inline elements */
    display: inline-block;
}

/* Optional: Add vertical space between the lines now that they are inline */
.agreement-group br {
    line-height: 1.5; /* Adds spacing equivalent to 1.5 lines */
}

/* Mobile Testimonial Overrides */
@media (max-width: 768px) {
    .testimonial-section {
        /* NOTE: Retaining 100px but it's very large for mobile */
        padding: 100px 20px;
        text-align: center;
    }

    .testimonial {
        font-size: 15px;
        margin-bottom: 20px;
    }

    .testimonial-text {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .testimonial-author {
        font-size: 12px;
    }
}


/* --- H. MAIN PORTAL BLOCKS (Homepage) --- */
.main-portal {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 100px auto 50px;
    padding: 0 30px;
    max-width: 1100px;
}

.portal-block {
    display: block;
    flex: 1;
    max-width: 500px;
    padding: 70px 30px 30px 30px;
    border-radius: 25px;
    text-decoration: none;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    text-align: center;
}

.portal-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

.portal-block h2 {
    margin-top: 0.5rem;
    font-weight: bold;
    font-size: 1.8em;
}

.portal-block p {
    color: #444;
    line-height: 1.5;
    margin-top: 10px;
    display: block;
}

/* Themeing */
.blue-theme {
    background-color: #eaf3f9; /* LIGHT BLUE REPLACEMENT */
    border: 5px solid #006dba; /* ACCENT COLOR */
    color: #006dba; /* ACCENT COLOR */
}

.red-theme {
    background-color: #eaf3f9; 
    border: 5px solid #7d262a; /* PRIMARY COLOR */
    color: #7d262a; /* PRIMARY COLOR */
}

.image-circle {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blue-theme .image-circle {
    border-color: #006dba; /* ACCENT COLOR */
}

.red-theme .image-circle .dollar-sign {
    font-family: 'Roboto Slab', serif;
    font-size: 3em;
    font-weight: bold;
    color: #7d262a; /* PRIMARY COLOR */
    line-height: 1;
}

.circle-image {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

/* Mobile Responsiveness for Portals */
@media (max-width: 800px) {
    .main-portal {
        flex-direction: column;
        align-items: center;
        gap: 50px;
        margin-top: 60px;
    }

    .portal-block {
        max-width: 90%;
        padding: 60px 20px 20px 20px;
        flex: none;
    }

    .image-circle {
        top: -30px;
    }
}

/* --- I. CUSTOMER SECTION & TABLE STYLES (Includes Mobile Overrides) --- */
.customer-section {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
    padding: 80px;
    box-sizing: border-box;
}

.new-customers,
.existing-customers {
    flex: 1;
    padding: 1rem;
    position: relative;
    margin: 50px 50px 0px 50px;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.profit-table {
    width: 80%;
    table-layout: fixed;
    margin: 20px auto;
    border-collapse: collapse;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    overflow-x: auto;
}

.profit-table th,
.profit-table td {
    padding: 12px;
    border: 1px solid #ddd;
    word-wrap: break-word;
}

/* Column widths */
.profit-table th:nth-child(1), .profit-table td:nth-child(1) { width: 25%; }
.profit-table th:nth-child(2), .profit-table td:nth-child(2) { width: 15%; } 
.profit-table th:nth-child(3), .profit-table td:nth-child(3) { width: 60%; }

.profit-table tr:hover {
    background-color: #e6e6e6;
}

/* Responsive adjustments for customer section on mobile */
@media (max-width: 768px) {
    /* Base Adjustments */
    h1 {
        font-size: 24px;
    }
    p {
        margin: 10px 0;
    }
    /* Customer Section Layout */
    .customer-section {
        flex-direction: column;
        width: 100%;
        padding: 15px;
        margin: 20px; /* Merged: Base Adjustments */
    }
    .new-customers,
    .existing-customers {
        margin: 20px; /* Merged: Base Adjustments */
    }

    .profit-table {
        width: 100%;
        display: block;
        overflow-x: auto;
    }

    .profit-table th,
    .profit-table td {
        font-size: 14px;
        padding: 8px;
    }

    /* Columns adjust dynamically on smaller screens */
    .profit-table th:nth-child(1), .profit-table td:nth-child(1),
    .profit-table th:nth-child(2), .profit-table td:nth-child(2),
    .profit-table th:nth-child(3), .profit-table td:nth-child(3),
    .profit-table th:nth-child(4), .profit-table td:nth-child(4) {
        width: auto;
    }
}

/* --- J. STEP-BY-STEP GUIDE/SLIDER STYLES --- */
.step-container {
    max-width: 900px;
    margin: 50px auto;
    padding: 0 20px;
}

.step-portal-block {
    display: block;
    margin-bottom: 40px;
    padding: 40px 30px 40px 30px;
    border-radius: 25px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    background-color: #eaf3f9; /* LIGHT BLUE */
    border: 7px solid #006dba; /* ACCENT COLOR */
}

/* Step H2 styles */
.step-portal-block h2 {
    font-weight: bold;
    font-size: 1.6em;
    color: #006dba; /* ACCENT COLOR */
    margin-top: 0;
    text-align: center;
}

/* Red Theme Overrides for Step Blocks */
.step-portal-block.red-theme-override {
    background-color: #eaf3f9; /* YELLOW/GOLD REPLACED WITH LIGHT BLUE */
    border: 7px solid #7d262a; /* PRIMARY COLOR */
}
.step-portal-block .step-number-circle.red-theme-circle {
    border: 2px solid #7d262a; /* PRIMARY COLOR */
}
.step-portal-block .step-number-circle.red-theme-circle .number {
    color: #7d262a; /* PRIMARY COLOR */
}
.step-portal-block.red-theme-override h2 {
    color: #7d262a; /* PRIMARY COLOR */
}
.step-portal-block .slide-controls-top .prev-link {
    color: #444;
}
.step-portal-block .slide-controls-top .next-link {
    color: #7d262a; /* PRIMARY COLOR */
}

.step-number-circle {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid #006dba; /* ACCENT COLOR */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-number-circle .number {
    font-family: 'Roboto Slab', serif;
    font-size: 2.5em;
    font-weight: bold;
    color: #006dba; /* ACCENT COLOR */
}

.step-slider {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 20px;
}

.step-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.step-slide {
    min-width: 100%;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
}

/* CRITICAL RULE: Sets anchor and space for content */
.slide-content {
    position: relative;
    padding-bottom: 40px;
    padding-top: 0;
}


/* === REVISED SLIDE CONTROL STYLES: BOTTOM RIGHT === */
/* 1. Position the Controls Container */
.slide-controls-top {
    position: absolute;
    top: auto;
    bottom: 5px;
    right: 10px;
    left: auto;
    display: flex;
    justify-content: flex-end;
    padding: 0;
    z-index: 10;
}

/* 2. Style the Control Links */
.step-control-link {
    font-size: 1.25em;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 4px;
    transition: opacity 0.3s;
    white-space: nowrap;
}

/* 3. Add the Vertical Separator */
.next-link {
    color: #7d262a; /* PRIMARY COLOR */
    border-left: 1px solid #ccc;
    padding-left: 10px;
    padding-right: 10px;
}

/* Styling the previous link */
.prev-link {
    color: #006dba; /* ACCENT COLOR */
    padding-right: 10px;
    padding-left: 10px;
}

/* Hides the control links when not needed */
.hidden-control {
    visibility: hidden;
    pointer-events: none;
}
/* === END REVISED SLIDE CONTROL STYLES === */

/* Slide Content Styling (Only padding change needed) */
.slide-content h3 {
    font-family: 'Roboto Slab', sans-serif;
    font-size: 1.5em;
    color: #333;
    margin-bottom: 20px;
    padding-top: 10px;
    text-align: left;
}

.slide-content p {
    font-size: 1.1em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: left;
    display: block;
}

.slide-content ul {
    text-align: left;
    list-style-type: disc;
    padding-left: 25px;
    margin-bottom: 20px;
}

.slide-content li {
    margin-bottom: 8px;
    line-height: 1.4;
    color: #555;
}

/* --- FIX: Nested List Bullet Points --- */
/* This ensures lists *inside* list items within step-portal-block show bullets */
.step-portal-block li ul {
    list-style-type: disc; /* Re-enable disc bullet */
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.step-portal-block li ul li {
    margin-bottom: 5px;
}
/* --- END FIX --- */

.slide-content img {
    max-width: 90%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin-top: 20px;
}


/* Table Styling for Step Block (Overrides global .profit-table width/colors) */
.step-portal-block .profit-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
}

.step-portal-block .profit-table th,
.step-portal-block .profit-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}

.step-portal-block .profit-table thead {
    background-color: #006dba; /* ACCENT COLOR */
    color: white;
    font-family: 'Roboto Slab', serif;
}

.step-portal-block .profit-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.step-portal-block .profit-table tbody tr:hover {
    background-color: #eaf3f9; /* LIGHT BLUE */
}

/* Mobile adjustment for Step Guide */
@media (max-width: 600px) {
    .step-portal-block {
        margin-bottom: 60px;
        padding: 30px 15px 15px 15px;
    }
    .step-number-circle {
        width: 60px;
        height: 60px;
        top: -30px;
    }
    .step-number-circle .number {
        font-size: 2em;
    }
    .step-portal-block .profit-table th,
    .step-portal-block .profit-table td {
        padding: 8px;
        font-size: 0.85em;
    }
    /* Adjust control padding on mobile */
    .slide-controls-top {
        padding: 0 10px;
    }
    .step-control-link {
        font-size: 1em;
    }
}


/* --- START OF CONSOLIDATED ADDITIONAL STYLES --- */

/* 1. New Class for Download Link */
.fundraiser-guide-link {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px; /* Ensure space below the link */
}

.fundraiser-guide-link a {
    font-weight: bold;
    color: #7d262a; /* PRIMARY COLOR */
}

/* 2. Nested Prizes Fix/Style (part of the larger nested list issue) */
.step-portal-block ul.nested-prizes {
    /* Indent to align with the bullet points above it */
    padding-left: 20px;
    margin-top: -5px; /* Pull it up closer to the parent list item */
    margin-bottom: 5px;
}

.step-portal-block ul.nested-prizes li {
    /* Ensures the nested items have a disc bullet type */
    list-style-type: disc;
}

/* 3. Style for the new case slider headings */
.step-slide .slide-content h4.case-heading {
    color: #006dba; /* ACCENT COLOR */
    font-family: 'Roboto Slab', serif;
    font-size: 1.35em;
    font-weight: 700;

    margin-top: 0;
    margin-bottom: 0;

    padding-left: 0;
    margin-left: 0;
    text-align: left;

    max-width: 100%;
}

/* CONSOLIDATED MOBILE OPTIMIZATION RULES (Sections J & K) */
@media (max-width: 768px) {
    /* Hides the ENTIRE list of bullet points on mobile */
    .slide .bullet-points {
        display: none !important;
    }

    /* Centers the heading on mobile */
    .step-slide .slide-content h4.case-heading {
        max-width: 90%;
        text-align: center;
        margin-left: auto; /* Overrides desktop margin for centering */
        margin-right: auto;
        /* Add back some vertical space below the heading since the list is gone */
        margin-bottom: 20px;
    }

    /* Adjusts the wrapper to stack content properly on mobile */
    .slide .text-content-wrapper {
        max-width: 90%; /* Match image width on mobile */
        margin-top: 20px; /* Space between image and text on mobile */
    }

    /* Existing Mobile Rule for Step-Slide H4 (Ensure consistency) */
    .step-slide .slide-content h4.case-heading {
        max-width: 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}
/* --- END OF CONSOLIDATED ADDITIONAL STYLES --- */

/* --- K. GENERAL SLIDER STYLES (Used on homepage) (Includes Mobile Overrides) --- */
.step-slide h3 {
    margin-bottom: 5px;
}

.step-slide .slider {
    margin-top: 5px;
}
.slider {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    overflow: hidden;
    text-align: center;
}

.slides {
    display: flex;
    transition: transform 0.6s ease-in-out;
    width: 100%;
}

.slide {
    min-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 40px 20px;
    box-sizing: border-box;
}

.slide img.gallery-image {
    max-width: 45%;
    height: auto;
    border-radius: 12px;
}

.slide .bullet-points {
    /* max-width is now handled by .text-content-wrapper */
    width: 100%; /* Take full width of its parent wrapper */
    text-align: left; /* Ensure text content aligns left within this wrapper */
    margin-left: 0;
    padding-left: 20px; /* Standard indentation for bullet points */
    list-style-position: outside; /* Places the bullet outside the text block */
    margin-top: 10px; /* Add some space between heading and bullets */
}

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

.slider-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 24px;
    background-color: #7d262a; /* PRIMARY COLOR */
    color: white;
    transition: all 0.3s ease;
}

.slider-btn:hover {
    background-color: white;
    color: #7d262a; /* PRIMARY COLOR */
    border: 2px solid #7d262a; /* PRIMARY COLOR */
}

.slide .text-content-wrapper {
    max-width: 45%; /* Give it the same width as the image */
    text-align: left; /* Ensure text content aligns left within this wrapper */
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack its children (h4 and ul) vertically */
    justify-content: center; /* Vertically center content if there's extra space */
}

/* Mobile Slider Overrides */
@media (max-width: 768px) {
    .slide {
        flex-direction: column; /* Stacks image and text vertically */
    }

    .slide img.gallery-image {
        max-width: 90%;
    }

    .bullet-points.right-text {
        text-align: center;
        max-width: 90%;
    }

    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}


/* --- L. POPUP STYLES --- */
.tax-info-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background-color: white;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    border-radius: 12px;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
    position: relative;
}

.popup-content ul {
    text-align: left;
    padding-left: 20px;
    list-style-type: disc;
}

/* --- M. FOOTER CONTAINER STYLING (Includes Mobile Overrides) --- */
.site-footer {
    font-family: Arial, sans-serif;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
}

/* --- Left Section (Branding/Link) --- */
.footer-link {
    text-decoration: none;
    color: inherit;
}

.footer-content .left-content {
    padding: 10px;
}

.site-branding {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
}

/* --- Right Section (Contact Info) --- */
/* Use specific selector to avoid conflict with .header .right-content */
.site-footer .right-content {
    text-align: right;
    display: block;
    flex-direction: column;
    align-items: flex-end;
}

.site-footer .contact-info > div {
    margin-bottom: 5px;
}

/* Use specific selector to avoid conflict with .header .contact-name */
.site-footer .contact-name {
    font-weight: bold;
    font-size: 1.1em;
    color: #7d262a; /* PRIMARY COLOR */
}

.site-footer .email-address a,
.site-footer .phone-number {
    color: #333;
    text-decoration: none;
}

/* Style for the Google Calendar button */
.gcal-scheduling-button {
    margin-top: 15px;
}

/* --- Responsive adjustments for smaller screens (Footer) --- */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .site-footer .right-content {
        text-align: center;
        margin-top: 20px;
    }
    .site-footer .contact-info {
        align-items: center;
    }
}

/* --- N. LINK BLOCK STYLES (From index.php) --- */

/* Custom wrapper for the new link blocks to ensure correct width without inheriting theme styles. */
.link-block-container-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 15px;
}

/* CSS to enforce 2x2 grid layout for links */
.link-blocks-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

/* Ensure blocks take up full width on smaller screens (mobile) */
@media (max-width: 600px) {
    .link-blocks-container {
        grid-template-columns: 1fr;
    }
}

/* Individual Link Block Styling */
.link-block {
    padding: 20px;
    border: 1px solid #7d262a; /* PRIMARY COLOR */
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    background-color: #fff;
}

/* Style for the link block headings */
.link-block h3 {
    color: #7d262a; /* PRIMARY COLOR */
    margin-top: 0;
}

/* Style for the link block buttons */
.link-block .button-link {
    display: inline-block;
    background-color: #7d262a; /* PRIMARY COLOR */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
}

/* ADD THIS TO SECTION J: STEP-BY-STEP GUIDE/SLIDER STYLES */

/* 1. New Class for Download Link (Replaces inline styles) */
.fundraiser-guide-link {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px; /* Ensure space below the link */
}

.fundraiser-guide-link a {
    font-weight: bold;
    color: #7d262a; /* PRIMARY COLOR */
}

.step-portal-block ul.nested-prizes {
    /* Indent to align with the bullet points above it */
    padding-left: 20px;
    margin-top: -5px; /* Pull it up closer to the parent list item */
    margin-bottom: 5px;
}

.step-portal-block ul.nested-prizes li {
    /* Ensures the nested items have a disc bullet type */
    list-style-type: disc;
}

/* ADDED: Style for the new case slider headings */

/* MODIFY THIS IN SECTION J: STEP-BY-STEP GUIDE/SLIDER STYLES */
.step-slide .slide-content h4.case-heading {
    color: #006dba; /* ACCENT COLOR */
    font-family: 'Roboto Slab', serif;
    font-size: 1.35em;
    font-weight: 700;

    margin-top: 0; /* Remove top margin, handled by wrapper flex if needed */
    margin-bottom: 0; /* Remove bottom margin, spacing handled by ul's margin-top */

    padding-left: 0;
    margin-left: 0;
    text-align: left;

    max-width: 100%; /* Take full width of its parent wrapper */
}

/* CONSOLIDATED MOBILE OPTIMIZATION RULES (Sections J & K) */
@media (max-width: 768px) {
    /* Hides the ENTIRE list of bullet points on mobile */
    .slide .bullet-points {
        display: none !important;
    }

    /* Centers the heading on mobile */
    .step-slide .slide-content h4.case-heading {
        max-width: 90%;
        text-align: center;
        margin-left: auto; /* Overrides desktop margin for centering */
        margin-right: auto;
        /* Add back some vertical space below the heading since the list is gone */
        margin-bottom: 20px;
    }

    /* Adjusts the wrapper to stack content properly on mobile */
    .slide .text-content-wrapper {
        max-width: 90%; /* Match image width on mobile */
        margin-top: 20px; /* Space between image and text on mobile */
    }

    /* Existing Mobile Rule for Step-Slide H4 (Ensure consistency) */
    .step-slide .slide-content h4.case-heading {
        max-width: 90%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}