@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Open+Sans:wght@400;600&display=swap');

:root {
    --primary-color: #0A2342;
    --primary-color-rgb: 10, 35, 66;
    --primary-color-lightened: #1B3E6A;
    --secondary-color: #005F7A;
    --secondary-color-rgb: 0, 95, 122;
    --accent-color-cta: #D80032;
    --accent-color-cta-hover: #B00028;
    --accent-color-highlight: #FFC857;
    --white-color: #FFFFFF;
    --light-bg-color: #F8F9FA;
    --medium-bg-color: #EEF2F5;
    --sand-bg-color: #FDF5E6;
    --sand-border-color: #E0CDA8;
    --border-color: #DDE2E6;
    --card-bg-color: var(--white-color);
    --text-dark-color: #2D2D2D;
    --text-medium-color: #6B7A8F;
    --text-light-color: #8C8C8C;
    --text-on-dark-bg: #F0F8FF;
    --text-on-accent-bg: var(--white-color);
    --link-color: var(--secondary-color);
    --link-hover-color: var(--primary-color-lightened);
    --step-number-bg: var(--secondary-color);
    --step-number-text: var(--white-color);
    --font-family-headings: 'Poppins', sans-serif;
    --font-family-body: 'Open Sans', sans-serif;
    --space-unit: 1rem;
    --section-padding-y: calc(var(--space-unit) * 4);
    --content-max-width: 1200px;
    --grid-gap: calc(var(--space-unit) * 1.75);
    --card-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.07);
    --card-hover-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.1);
    --button-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.1);
    --button-hover-shadow: 0 5px 12px rgba(var(--primary-color-rgb), 0.15);
    --default-transition: all 0.25s ease-in-out;
    --border-radius-small: 5px;
    --border-radius-medium: 8px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body.LayoutMain {
    font-family: var(--font-family-body);
    color: var(--text-dark-color);
    line-height: 1.7;
    font-size: 1rem;
    background-color: var(--white-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-headings);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 var(--space-unit) 0;
    color: var(--primary-color);
}
h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: calc(var(--space-unit) * 1.5); }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: calc(var(--space-unit) * 1.25); }
h3 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-bottom: var(--space-unit); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); margin-bottom: calc(var(--space-unit) * 0.75); }

p { margin: 0 0 var(--space-unit) 0; color: var(--text-medium-color); }
p:last-of-type { margin-bottom: 0; }

a { color: var(--link-color); text-decoration: none; transition: var(--default-transition); }
a:hover, a:focus-visible { color: var(--link-hover-color); text-decoration: underline; outline-offset: 2px; }
a:focus-visible { outline: 2px dashed var(--link-hover-color); }

img { max-width: 100%; height: auto; display: block; border-radius: var(--border-radius-small); border-style: none; }

.content-container { width: 90%; max-width: var(--content-max-width); margin-left: auto; margin-right: auto; padding-left: var(--space-unit); padding-right: var(--space-unit); }
.section-padding { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }

.section-title { margin-bottom: calc(var(--space-unit) * 0.75); font-weight: 700; }
.section-title + .section-subtitle { margin-top: calc(var(--space-unit) * -0.75); }
.section-subtitle { font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--text-light-color); max-width: 700px; margin: calc(var(--space-unit) * -0.5) auto calc(var(--space-unit)*1.5) auto; }

.light-bg { background-color: var(--light-bg-color); }
.medium-bg { background-color: var(--medium-bg-color); }
.sand-bg { background-color: var(--sand-bg-color); }

.dark-section-bg { background-color: var(--primary-color); color: var(--text-on-dark-bg); }
.dark-section-bg .section-title, .dark-section-bg h1, .dark-section-bg h2, .dark-section-bg h3, .dark-section-bg h4,
.dark-section-bg p, .dark-section-bg cite, .dark-section-bg .section-subtitle, .dark-section-bg .card-title,
.dark-section-bg .officer-rank, .dark-section-bg .officer-name, .dark-section-bg .meeting-details-card h3, .dark-section-bg .meeting-details-card p,
.dark-section-bg .race-card-header h3, .dark-section-bg .race-month, .dark-section-bg .highlight-link, .dark-section-bg .winner-highlight {
    color: var(--text-on-dark-bg);
}
.dark-section-bg .club-aisc { color: var(--accent-color-highlight) !important; }
.dark-section-bg .button-secondary { background-color: var(--white-color); color: var(--primary-color); border-color: var(--white-color); }
.dark-section-bg .button-secondary:hover, .dark-section-bg .button-secondary:focus-visible { background-color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.85); color: var(--primary-color); }

.button { display: inline-block; font-family: var(--font-family-headings); font-weight: 600; font-size: 1rem; padding: calc(var(--space-unit)*0.75) calc(var(--space-unit)*1.75); border-radius: var(--border-radius-small); text-decoration: none; cursor: pointer; text-align: center; transition: var(--default-transition); border: 2px solid transparent; line-height: 1.5; letter-spacing: 0.5px; will-change: transform; }
.button:hover, .button:focus-visible { text-decoration: none; transform: translateY(-3px); box-shadow: var(--button-hover-shadow); }
.button:active { transform: translateY(-1px); box-shadow: var(--button-shadow); }
.button:focus-visible { outline-color: var(--accent-color-highlight); outline-offset: 2px;}
.button-primary { background-color: var(--accent-color-cta); color: var(--text-on-accent-bg); border-color: var(--accent-color-cta); box-shadow: var(--button-shadow); }
.button-primary:hover, .button-primary:focus-visible { background-color: var(--accent-color-cta-hover); border-color: var(--accent-color-cta-hover); color: var(--text-on-accent-bg); }
.button-secondary { background-color: transparent; color: var(--secondary-color); border: 2px solid var(--secondary-color); }
.button-secondary:hover, .button-secondary:focus-visible { background-color: var(--secondary-color); color: var(--white-color); border-color: var(--secondary-color); }
.button-secondary:focus-visible { outline-color: var(--secondary-color); }
.button-large { font-size: 1.1rem; padding: calc(var(--space-unit)*0.9) calc(var(--space-unit)*2.2); }
.button-icon i { margin-right: 0.6em; font-size: 0.95em; vertical-align: -0.05em; }
.button-wrapper { margin-top: calc(var(--space-unit) * 1.25); }
.button-wrapper .button { margin: calc(var(--space-unit)*0.5); }
.button.facebook-button { background-color: #1877F2; color: var(--white-color); border-color: #1877F2; }
.button.facebook-button:hover, .button.facebook-button:focus-visible { background-color: #166FE5; border-color: #166FE5; color: var(--white-color); }

.hero-section.modern-hero { position: relative; background-image: url('/resources/Site/background.jpeg'); background-size: cover; background-position: center center; background-attachment: scroll; color: var(--text-on-dark-bg); padding: calc(var(--section-padding-y) * 1.5) var(--space-unit); min-height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0.55) 0%, rgba(var(--primary-color-rgb), 0.80) 100%); z-index: 1; }
.hero-content { position: relative; z-index: 2; max-width: 850px; }
.hero-main-title { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; color: var(--white-color); margin-bottom: 0.75rem; text-shadow: 1px 1px 5px rgba(0,0,0,0.4); }
.hero-subheadline { font-size: clamp(1.25rem, 4vw, 1.75rem); color: var(--white-color); font-weight: 400; margin-bottom: 1.5rem; opacity: 0.9; }
.hero-intro { font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--text-on-dark-bg); margin-bottom: 2rem; opacity: 0.95; }
.hero-cta-buttons .button { margin: calc(var(--space-unit)*0.5); }
.hero-cta-buttons .button-secondary { background-color: transparent; border-color: var(--white-color); color: var(--white-color); }
.hero-cta-buttons .button-secondary:hover, .hero-cta-buttons .button-secondary:focus-visible { background-color: var(--white-color); color: var(--primary-color); }

.card-base { background-color: var(--card-bg-color); padding: calc(var(--space-unit) * 1.5); border-radius: var(--border-radius-medium); box-shadow: var(--card-shadow); transition: var(--default-transition); display: flex; flex-direction: column; }
.card-base:hover, .card-base:focus-within { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); }
.card-title { font-size: 1.5rem; color: var(--primary-color); margin-bottom: var(--space-unit); font-weight: 600; }
.card-content p, .card-content ul, .card-content li { color: var(--text-dark-color); }

.highlight-grid, .testimonial-grid, .info-grid-adaptive, .officers-grid, .benefits-grid, .form-steps-grid, .photo-grid, .winner-category-group, .race-info-grid, .info-grid.two-column-grid, .responsive-grid {
    display: grid;
    gap: var(--grid-gap);
    margin-top: calc(var(--space-unit) * 1.5);
}

.highlight-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.highlight-card { background-color:var(--card-bg-color); padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 1.5); border-radius: var(--border-radius-medium); box-shadow: var(--card-shadow); text-align: center; transition: var(--default-transition), transform 0.2s ease-out, box-shadow 0.2s ease-out; display:flex; flex-direction:column; }
.highlight-card:hover, .highlight-card:focus-within { transform: translateY(-8px); box-shadow: var(--card-hover-shadow); }
.highlight-icon { color: var(--secondary-color); margin-bottom: var(--space-unit); font-size: 2.8rem; line-height: 1; }
.highlight-icon i { transition: transform 0.3s ease-in-out; }
.highlight-card:hover .highlight-icon i { transform: scale(1.1) rotate(-5deg); }
.highlight-card h3 { font-size: 1.4rem; margin-bottom: 0.75rem; color: var(--primary-color); }
.highlight-card p { flex-grow: 1; }

.testimonial-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.dark-section-bg .testimonial-card { background-color: rgba(255,255,255, 0.08); border: 1px solid rgba(255,255,255,0.2); padding: calc(var(--space-unit) * 1.75); border-radius: var(--border-radius-medium); display: flex; flex-direction: column; align-items: center; text-align: center; transition: var(--default-transition); color: var(--text-on-dark-bg); }
.dark-section-bg .testimonial-card:hover { transform: translateY(-6px); background-color: rgba(255,255,255, 0.12); }
.testimonial-image { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--space-unit) auto; border: 3px solid var(--white-color); box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.dark-section-bg .testimonial-quote { color:inherit; font-style: italic; font-size: 1.05rem; margin-bottom: var(--space-unit); line-height: 1.6; flex-grow: 1; }
.dark-section-bg .testimonial-author { font-weight: 600; font-size: 0.95rem; color: var(--seafoam-accent); }

.info-grid-adaptive { grid-template-columns: 1fr; }
.info-card { background-color:var(--card-bg-color); padding: calc(var(--space-unit) * 1.5); border-radius: var(--border-radius-medium); box-shadow: var(--card-shadow); text-align: center; transition: var(--default-transition); display: flex; flex-direction: column; border-top: 4px solid transparent; }
.info-card:hover, .info-card:focus-within { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); border-top-color: var(--secondary-color); }
.info-card h3 { font-size: 1.35rem; display: flex; align-items: center; justify-content: center; gap: 0.5em; margin-bottom:var(--space-unit); color: var(--primary-color); }
.info-card h3 i { color: var(--secondary-color); font-size: 1.1em; line-height: 1; margin-right:0; }
.info-card p { flex-grow: 1; margin-bottom:var(--space-unit); }
.info-card .button-wrapper { margin-top: auto; padding-top: var(--space-unit);}
.info-card a.link-icon { font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4em; }

.upcoming-events-title-section { padding-bottom: calc(var(--space-unit)*1.25); }
.WaGadgetUpcomingEvents ul { list-style-type: none; padding-left: 0; margin-bottom: 0; }
.WaGadgetUpcomingEvents li { background-color: var(--card-bg-color); padding: calc(var(--space-unit)*1.25); margin-bottom: var(--space-unit); border-radius: var(--border-radius-medium); box-shadow: var(--card-shadow); border-left: 5px solid var(--secondary-color); text-align: left; transition: var(--default-transition); }
.WaGadgetUpcomingEvents li:hover { box-shadow: var(--card-hover-shadow); transform: translateX(4px); }
.WaGadgetUpcomingEvents .title a { font-family: var(--font-family-headings); font-size: 1.25rem; font-weight: 600; color: var(--primary-color); }
.WaGadgetUpcomingEvents .title a:hover { color: var(--secondary-color); }
.WaGadgetUpcomingEvents .date, .WaGadgetUpcomingEvents .location { font-size: 0.9rem; color: var(--text-light-color); margin-top: 0.5rem; }
.WaGadgetUpcomingEvents .location i { margin-right: 0.5em; color: var(--secondary-color); }

.meetings-section { background-color: var(--medium-bg-color); }
.meeting-details-card { background-color: var(--card-bg-color); padding: calc(var(--space-unit) * 2); border-radius: var(--border-radius-medium); box-shadow: var(--card-shadow); max-width: 700px; margin: calc(var(--space-unit) * 1.5) auto 0 auto; border-top: 5px solid var(--primary-color); text-align:center;}
.meeting-icon { color: var(--primary-color); font-size: 2.75rem; margin-bottom: var(--space-unit); line-height: 1; }
.meeting-details-card h3 { font-size: 1.75rem; margin-bottom: 0.75rem; font-weight: 700; color: var(--primary-color); }
.meeting-sub-detail { font-size: 0.95rem; color: var(--text-light-color); margin-bottom: calc(var(--space-unit) * 1.25); }
.meeting-info p { font-size: 1.05rem; margin-bottom: 0.75rem; color: var(--text-dark-color); }
.meeting-info p i { margin-right: 0.75em; color: var(--secondary-color); width: 20px; text-align: center; }
.meeting-cta { margin-top: calc(var(--space-unit) * 1.5); }

.officers-grid { padding-top:0; grid-template-columns: 1fr; }
.officer-card { background-color:var(--card-bg-color); box-shadow:var(--card-shadow); border-radius:var(--border-radius-medium); padding: calc(var(--space-unit) * 1.5); display: flex; flex-direction: column; text-align: center; transition: var(--default-transition); border-top: 4px solid transparent; }
.officer-card:hover, .officer-card:focus-within { transform: translateY(-6px); box-shadow: var(--card-hover-shadow); border-top-color: var(--accent-color-highlight); }
.officer-badge { margin-bottom: var(--space-unit); min-height: 50px; }
.badge-icon { max-width: 100px; height: auto; margin-left: auto; margin-right: auto; border-radius: 0; }
.officer-portrait-container { margin-bottom: calc(var(--space-unit) * 1.25); }
.officer-portrait { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--space-unit) auto; border: 4px solid var(--white-color); box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.2); }
.officer-content { flex-grow: 1; display:flex; flex-direction:column;}
.officer-rank { font-size: 1rem; font-weight: 600; color: var(--secondary-color); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: calc(var(--space-unit) * 0.25); }
.officer-name { font-size: clamp(1.5rem, 3.5vw, 1.8rem); font-weight: 700; margin-bottom: calc(var(--space-unit) * 0.75); }
.officer-bio { font-size: 0.95rem; line-height: 1.6; flex-grow: 1; }
.officer-contact { margin-top: auto; padding-top: var(--space-unit); font-size: 0.9rem; }
.officer-contact a { display: inline-flex; align-items: center; gap: 0.5em; }
.emergency-contact a { color: var(--accent-color-cta); font-weight: 600; }
.emergency-contact a:hover { color: var(--accent-color-cta-hover); }
.officer-contact i { font-size: 0.9em; }

.benefits-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));}
.benefit-item { background-color: var(--sand-bg-color); padding: calc(var(--space-unit) * 1.75); border-radius: var(--border-radius-medium); text-align: center; border: 1px solid var(--sand-border-color); box-shadow: var(--card-shadow); }
.benefit-item h3 { color: var(--primary-color); font-size: 1.5rem; margin: 0 0 calc(var(--space-unit) * 0.75) 0; display: flex; align-items: center; justify-content: center; gap: 0.6em; }
.benefit-item h3 i { color: var(--accent-color-highlight); font-size: 1.1em; }
.benefit-item p { font-size: 1.1rem; line-height: 1.65; color: var(--text-dark-color); }

.pricing-card { background-color: var(--white-color); border: 2px solid var(--primary-color); border-radius: var(--border-radius-medium); padding: calc(var(--space-unit) * 2); margin: calc(var(--space-unit) * 1.5) auto; max-width: 550px; box-shadow: var(--card-shadow); text-align:center;}
.price-option-title { color: var(--primary-color); font-size: 1.6rem; margin: 0 0 var(--space-unit) 0; font-weight: 600; }
.price-amount { color: var(--accent-color-cta); font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 700; margin: var(--space-unit) 0; }
.price-period { font-size: 1.1rem; color: var(--text-medium-color); font-weight: 400; margin-left: 0.25em; }
.features-list { list-style: none; padding: 0; margin: calc(var(--space-unit) * 1.5) 0; }
.features-list li { margin: calc(var(--space-unit) * 0.75) 0; font-size: 1.1rem; color: var(--text-dark-color); display: flex; align-items: center; justify-content: center; gap: 0.6em;}
.features-list li i { color: var(--accent-color-highlight); font-size: 0.9em; margin-right:0;}
.pricing-note { color: var(--text-medium-color); font-size: 0.95rem; font-style: italic; border-top: 1px solid var(--sand-border-color); padding-top: var(--space-unit); margin: calc(var(--space-unit) * 1.5) 0 0 0; }
.pricing-cta { margin-top: calc(var(--space-unit) * 1.5); }

.form-steps-grid { display: grid; gap: var(--grid-gap); margin: calc(var(--space-unit) * 1.5) 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.form-step-item { background: var(--sand-bg-color); color: var(--primary-color); padding: var(--space-unit); border-radius: var(--border-radius-small); text-align: center; border: 1px solid var(--sand-border-color); }
.step-number { display: inline-block; background-color: var(--step-number-bg); color: var(--step-number-text); width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-weight: bold; margin-bottom: calc(var(--space-unit) * 0.5); font-size: 1rem; }
.step-title { font-size: 1.1rem; font-weight: 600; color: var(--primary-color); margin: 0; }

.recent-race-summary .race-name-date { color: var(--accent-color-cta); font-size: 1.5rem; margin-bottom: 0.25rem; }
.recent-race-summary .race-links { font-size: 1rem; margin-bottom: var(--space-unit); }
.recent-race-summary .race-details ul { list-style: disc; margin-left: calc(var(--space-unit) * 1.5); padding-left: var(--space-unit); }
.recent-race-summary .race-details ul li { margin-bottom: calc(var(--space-unit) * 0.5); }
.race-winners .winner-category { margin-bottom: var(--space-unit); padding-bottom: var(--space-unit); border-bottom: 1px solid var(--border-color); text-align:center;}
.race-winners .winner-category:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.race-winners .winner-category h4 { font-size: 1.25rem; margin-bottom: calc(var(--space-unit) * 0.5); color: var(--primary-color); font-weight:600;}
.race-winners .winner-category ul { list-style: none; padding-left: 0; }
.race-winners .winner-category ul li { margin-bottom: calc(var(--space-unit) * 0.25); color: var(--text-dark-color); }
.winner-highlight { font-weight: 600; color: var(--primary-color); font-size: 1.1em; }
.club-aisc { color: var(--accent-color-cta); font-weight: bold; }

.next-races-section .race-card { margin-bottom:var(--grid-gap); background-color:var(--card-bg-color); border: 1px solid var(--border-color); border-radius: var(--border-radius-medium); padding: calc(var(--space-unit) * 1.5); box-shadow: var(--card-shadow); transition: var(--default-transition); }
.race-card.upcoming-race { border-left: 5px solid var(--accent-color-highlight); }
.race-card.urgent-alert { animation: pulse-border 2s infinite; border-left-width: 8px !important; border-left-color: var(--primary-color) !important; }
@keyframes pulse-border { 0% { border-left-color: var(--primary-color); } 50% { border-left-color: var(--accent-color-cta); } 100% { border-left-color: var(--primary-color); } }
.race-card-header h3 { font-size: 1.5rem; color: var(--primary-color); margin: 0 0 var(--space-unit) 0; padding-bottom: calc(var(--space-unit) * 0.5); border-bottom: 1px solid var(--border-color); }
.race-month { color: var(--accent-color-cta); font-weight: bold; margin-right: 0.5em; }
.race-card-content h4 { font-size: 1.15rem; color: var(--secondary-color); margin-top: var(--space-unit); margin-bottom: calc(var(--space-unit) * 0.75); }
.race-card-content .details-list { list-style-type: disc; padding-left: calc(var(--space-unit) * 1.5); margin-bottom: var(--space-unit); }
.race-card-content .details-list li { margin-bottom: calc(var(--space-unit) * 0.4); line-height: 1.6; }
.highlight-info { font-weight: 600; color: var(--primary-color); }
.race-info-grid { display: grid; grid-template-columns: 1fr; gap: calc(var(--space-unit) * 0.5); margin-top: var(--space-unit); font-size: 1rem; line-height: 1.6; }
.race-info-grid .info-item { text-align: left; }
.race-info-grid .info-label { font-weight: 600; color: var(--primary-color); display: inline-block; margin-right: 0.5em; }
.race-info-grid .info-value { color: var(--text-dark-color); }
.race-info-grid .info-item em strong { color: var(--accent-color-cta); }

.season-overview { margin-bottom: var(--space-unit); text-align:center;}
.season-overview p { margin-bottom: calc(var(--space-unit) * 0.5); font-size: 1.1rem; }
.highlight-link { color: var(--accent-color-cta); font-weight: 600; }
.highlight-link i { margin-left: 0.3em; }
.specific-race-recap { border-radius: var(--border-radius-medium); margin-top: var(--grid-gap); padding:calc(var(--space-unit)*1.5); background-color:var(--light-bg-color); text-align:center;}
.specific-race-recap .section-subtitle { font-size: 1.8rem; color: var(--primary-color); margin-bottom: var(--space-unit); }
.race-finishers h4 { font-size: 1.2rem; color: var(--secondary-color); margin-bottom: calc(var(--space-unit) * 0.75); }
.finishers-list { list-style-position: inside; padding-left: 0; margin-bottom: var(--space-unit); list-style-type: decimal; text-align:left; display:inline-block;}
.finishers-list li { margin-bottom: calc(var(--space-unit) * 0.3); color: var(--text-dark-color); }
.race-stats { text-align:center; }
.race-stats p { margin-bottom: calc(var(--space-unit) * 0.5); color: var(--text-medium-color); font-size: 1rem; }
.race-stats p strong { color: var(--primary-color); }
.race-documents { margin-top: calc(var(--space-unit) * 1.5); padding-top: calc(var(--space-unit) * 1.5); border-top: 1px solid var(--border-color); }
.race-documents p { margin-bottom: var(--space-unit); font-weight: 600; color: var(--primary-color); text-align:center; }

.race-assistance-contact .section-subtitle { font-size: 1.8rem; color: var(--primary-color); margin-bottom: var(--space-unit); }
.contact-person-details { max-width: 450px; margin-left: auto; margin-right: auto; text-align:center; }
.contact-role { font-size: 1.1rem; font-weight: 600; color: var(--text-dark-color); margin-bottom: calc(var(--space-unit) * 0.75); }
.contact-method { font-size: 1rem; color: var(--text-medium-color); margin-bottom: calc(var(--space-unit) * 0.4); display: flex; align-items: center; justify-content: center; gap: 0.5em; }
.contact-method i { color: var(--secondary-color); font-size: 0.9em; width: 20px; text-align: center; }

.sampling-map { max-width: 100%; height: auto; border-radius: var(--border-radius-medium); margin-top: var(--space-unit); margin-bottom: calc(var(--space-unit) * 2); box-shadow: var(--card-shadow); }
.full-width-image { width: 100%; }
.info-grid.two-column-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
.info-card .card-title { font-size: 1.5rem; color: var(--primary-color); margin-bottom: var(--space-unit); font-weight: 600; text-align:center; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--grid-gap); margin-top: var(--space-unit); }
.gallery-image { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--border-radius-small); box-shadow: var(--card-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.photo-grid a:hover .gallery-image, .photo-grid a:focus-visible .gallery-image { transform: scale(1.03); box-shadow: var(--card-hover-shadow); }

.club-header-branding { text-align: center; padding: var(--space-unit) 0; }
.club-burgees { margin-bottom: var(--space-unit); line-height: 0; }
.burgee-image { width: 74px; height: 45px; display: inline-block; margin: 0 0.5em; vertical-align: middle; border-radius: 0; }
.club-name { font-family: var(--font-family-headings); font-size: clamp(2.2rem, 7vw, 3.2rem); font-weight: 700; color: var(--primary-color); line-height: 1.2; margin: 0; }

/* Site Header */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-header { background-color: var(--white-color); width: 100%; position: sticky; top:0;}
.header-top-bar { background-color: var(--primary-color); color: var(--text-on-dark-bg); padding: calc(var(--space-unit) * 0.4) 0; font-size: 0.85rem; }
.header-top-bar-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-unit); }
.header-contact-info a, .header-utility-nav a { color: var(--text-on-dark-bg); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4em; transition: color var(--default-transition); }
.header-contact-info a:hover, .header-utility-nav a:hover { color: var(--accent-color-highlight); }
.top-bar-separator { margin: 0 0.75em; opacity: 0.6; }
.top-bar-login { padding: calc(var(--space-unit)*0.25) calc(var(--space-unit)*0.75); font-size: 0.8rem; background-color: var(--accent-color-highlight); color: var(--primary-color) !important; border-radius: var(--border-radius-small); }
.top-bar-login:hover { background-color: var(--white-color) !important; color: var(--primary-color) !important; }
.header-main-content { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-unit); padding-bottom: var(--space-unit); min-height: 70px; }
.site-branding { flex-shrink: 0; }
.site-logo-link { display: flex; align-items: center; text-decoration: none; gap: calc(var(--space-unit) * 0.75); }
.site-logo-burgee { height: 45px; width: auto; display: block; }
.site-title { font-family: var(--font-family-headings); font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; color: var(--primary-color); line-height: 1.1; }
.main-navigation { position: relative; }
.menu-toggle { display: none; background: none; border: none; color: var(--primary-color); font-size: 1.5rem; padding: calc(var(--space-unit) * 0.5); cursor: pointer; }
.menu-toggle .fa-times { display:none; } /* Hide close icon by default */
.menu-toggle.is-active .fa-bars { display:none; } /* Hide hamburger when active */
.menu-toggle.is-active .fa-times { display:inline-block; } /* Show close when active */
.nav-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: calc(var(--space-unit) * 0.3); } /* Reduced gap for more items */
.nav-menu li { position: relative; }
.nav-menu li a { display: block; padding: calc(var(--space-unit) * 0.65) calc(var(--space-unit)*0.85); text-decoration: none; color: var(--primary-color); font-family: var(--font-family-headings); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; border-radius: var(--border-radius-small); transition: background-color var(--default-transition), color var(--default-transition); }
.nav-menu li a:hover, .nav-menu li a:focus-visible, .nav-menu li.current-menu-item > a, .nav-menu li.sel > .item > a, .nav-menu li.active > .item > a { background-color: var(--medium-bg-color); color: var(--secondary-color); }
.nav-menu .menu-item-has-children > a { padding-right: calc(var(--space-unit) * 1.8); }
.nav-menu .menu-item-has-children > a::after { content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; right: calc(var(--space-unit)*0.6); top: 50%; transform: translateY(-50%); font-size: 0.6em; transition: transform 0.2s ease-in-out; }
.nav-menu .menu-item-has-children:hover > a::after, .nav-menu .menu-item-has-children > .dropdown-toggle[aria-expanded="true"] + a::after { transform: translateY(-50%) rotate(180deg); }
.nav-menu .dropdown-toggle { display: none; background: none; border: none; color: inherit; cursor: pointer; padding: 0.5em; position:absolute; right:0; top: 50%; transform: translateY(-50%); z-index:1002; }
.nav-menu .sub-menu { list-style: none; margin: 0; padding: calc(var(--space-unit) * 0.5) 0; position: absolute; top: 100%; left: 0; min-width: 220px; background-color: var(--white-color); box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.15); border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); z-index: 1001; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease; } /* Delay visibility until fade is done */
.nav-menu .sub-menu .sub-menu { left: 100%; top: calc(var(--space-unit) * -0.5); border-radius: var(--border-radius-medium); }
.nav-menu li:hover > .sub-menu, .nav-menu li:focus-within > .sub-menu, .nav-menu li .dropdown-toggle[aria-expanded="true"] ~ .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s, 0s, 0s; }
.nav-menu .sub-menu li a { padding: calc(var(--space-unit) * 0.6) calc(var(--space-unit) * 1.25); font-size: 0.9rem; text-transform: none; border-bottom: 1px solid var(--border-color); white-space: nowrap; }
.nav-menu .sub-menu li:last-child a { border-bottom: none; border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium); }
.nav-menu .sub-menu .sub-menu li:last-child a { border-radius: 0; }
.nav-menu .sub-menu li.menu-item-has-children > a::after { content: '\f054'; right: calc(var(--space-unit) * 0.75); }
.nav-menu .sub-menu li.menu-item-has-children:hover > a::after { transform: translateY(-50%) rotate(0deg); }


/* Responsive Overrides & Adjustments */
@media (min-width: 576px) {
    .info-grid-adaptive, .officers-grid, .benefits-grid, .form-steps-grid, .winner-category-group, .info-grid.two-column-grid, .race-info-grid { grid-template-columns: repeat(2, 1fr); }
    .photo-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));} /* Smaller base for photo grid */
}
@media (min-width: 992px) {
    .highlight-grid, .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
    .officers-grid:not(.has-exactly-four-officers) { grid-template-columns: repeat(3, 1fr); }
    .officers-grid.has-exactly-four-officers { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-left: auto; margin-right: auto; }
    .info-grid-adaptive.has-four-items { grid-template-columns: repeat(2, 1fr); }
    .info-grid-adaptive:not(.has-four-items) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* Base min-width for info cards */
    .benefits-grid, .form-steps-grid { grid-template-columns: repeat(3, 1fr); }
    .photo-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .race-info-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 992px) {
    body.LayoutMain { font-size: 0.9375rem; }
    :root { --section-padding-y: calc(var(--space-unit) * 3.5); }
    .hero-section.modern-hero { padding: calc(var(--section-padding-y) * 1.4) var(--space-unit); min-height: 60vh; }
    .club-name { font-size: clamp(2rem, 6vw, 2.8rem); }
    .menu-toggle { display: block; }
    .main-navigation.is-open .nav-menu { display: flex; } /* JS will add/remove 'is-open' */
    .nav-menu { display: none; position: absolute; top: calc(100% + 1px); left: 0; right: 0; background-color: var(--white-color); box-shadow: 0 5px 10px rgba(var(--primary-color-rgb), 0.1); flex-direction: column; align-items: stretch; padding: var(--space-unit) 0; gap: 0; }
    .nav-menu li { width: 100%; }
    .nav-menu li a { padding: var(--space-unit); border-bottom: 1px solid var(--border-color); text-align: left; border-radius: 0; }
    .nav-menu li:last-child a { border-bottom: none; }
    .nav-menu .menu-item-has-children > a::after { display: none; } /* Hide CSS arrow, rely on button */
    .nav-menu .menu-item-has-children .dropdown-toggle { display: inline-block; position: absolute; right: var(--space-unit); top: 50%; transform: translateY(-50%); padding: var(--space-unit); line-height:1; font-size:0.8em; }
    .nav-menu .sub-menu { position: static; width: 100%; box-shadow: none; border-top: 1px solid var(--border-color); opacity: 1; visibility: visible; transform: none; padding-left: var(--space-unit); display: none; background-color: var(--medium-bg-color); }
    .nav-menu .menu-item-has-children > .dropdown-toggle[aria-expanded="true"] ~ .sub-menu { display: block; }
    .nav-menu .sub-menu li a { padding-left: calc(var(--space-unit) * 1.5); }
    .nav-menu .sub-menu .sub-menu { padding-left: calc(var(--space-unit) * 1.5); }
    .header-top-bar-content { justify-content: center; text-align:center;}
    .header-main-content {padding-top: calc(var(--space-unit)*0.75); padding-bottom:calc(var(--space-unit)*0.75); min-height:60px;}
    .site-title {font-size: clamp(1.1rem, 4vw, 1.5rem);}
    .site-logo-burgee {height: 40px;}
}
@media (max-width: 768px) {
    :root { --section-padding-y: calc(var(--space-unit) * 2.75); }
    .hero-section.modern-hero { min-height: auto; background-attachment: scroll; }
    .hero-cta-buttons { display: flex; flex-direction: column; align-items: center; }
    .hero-cta-buttons .button { width: 90%; max-width: 300px; margin: calc(var(--space-unit)*0.4) 0; }
    .highlight-grid, .testimonial-grid, .info-grid-adaptive, .officers-grid, .benefits-grid, .form-steps-grid, .photo-grid, .winner-category-group, .race-info-grid, .info-grid.two-column-grid {
        grid-template-columns: 1fr !important;
        gap: calc(var(--grid-gap) * 0.7);
    }
    .testimonial-image { width: 80px; height: 80px; }
    .WaGadgetUpcomingEvents li:hover { transform: none; }
}
@media (max-width: 480px) {
    body.LayoutMain { font-size: 0.875rem; }
    :root { --section-padding-y: calc(var(--space-unit) * 2.25); }
    .club-name { font-size: clamp(1.6rem, 7vw, 2rem); }
    .burgee-image { width: 45px; }
    .button { padding: calc(var(--space-unit)*0.55) calc(var(--space-unit)*1.15); font-size: 0.85rem; }
    .button-large { padding: calc(var(--space-unit)*0.7) calc(var(--space-unit)*1.5); font-size: 0.95rem; }
    .card-base, .highlight-card, .dark-section-bg .testimonial-card, .info-card, .officer-card, .benefit-item, .race-card,
    .WaGadgetUpcomingEvents li, .meeting-details-card, .form-step-item, .specific-race-recap,
    .info-card.purpose-card, .info-card.process-card {
        padding: calc(var(--space-unit)*0.9);
    }
    .highlight-icon { font-size: 1.8rem; }
    .testimonial-image { width: 65px; height: 65px; }
    .header-top-bar .top-bar-link-text { display:none;} /* Hide text on very small screens, keep icon */
    .header-top-bar-content { gap: calc(var(--space-unit) * 0.5); justify-content: space-around;}
    .header-main-content {min-height:50px;}
    .site-logo-burgee {height: 35px;}
    .site-title {font-size: clamp(1rem, 4.5vw, 1.25rem);}
    .menu-toggle {font-size:1.3rem;}
}