/* =========================
   GLOBAL
========================= */

body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;
    color: #222;
}

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

/* Capped to the same 1400px as #content-area. A fixed height with a fluid
   width means the BOX ratio changes with every window size (viewport/130),
   so no artwork can ever match it - that is what produced the squashing.
   Capped, the box is exactly 1400x130 (10.8:1) at 1400px and above, which
   is the ratio the desktop artwork is drawn at, so it renders undistorted.
   Below 1400px it crops the sides only, never vertically: 9% at 1280px,
   27% at 1025px. Keep logos and text inside the middle 70% horizontally. */
#top-header {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 130px;
    overflow: hidden;
    background-color: #023047;
    flex-shrink: 0
}

/* =========================
   BANNER
========================= */

#banner-container {
    width: 100%;
    height: 100%;
}

/* cover, never fill. fill stretches the artwork to whatever shape the box
   happens to be; cover preserves the aspect ratio and crops the overflow.
   Distortion is always worse than cropping. */
#banner-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

/* =========================
   BANNER - TABLET / SMALL WINDOW
   701-1024px. A fixed 130px strip is a 5.4:1 to 7.9:1 box in this range,
   which crops any artwork to roughly half in BOTH directions. A 6:1 header
   instead (117px at 701px, 171px at 1024px) fits the 4:1 phone asset with
   a 67% vertical keep. applyBanner in default.php selects that asset with
   a matching 1024px matchMedia query - change both together or the band
   gets desktop artwork in a tablet-shaped box.
   Must stay BEFORE the max-width:700px block near the end of this file:
   equal-specificity selectors resolve by source order, not by media query.
========================= */

@media (max-width: 1024px) {

    #top-header {
        max-width: none;
        height: auto;
        aspect-ratio: 6 / 1;
    }

}

/* =========================
   NAVIGATION
========================= */

#main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: #126782;
    padding: 10px;
    flex-shrink: 0;
}

#main-nav button {
    margin: 5px;
    padding: 12px 18px;
    border: none;
    border-radius: 6px;
    background-color: #219ebc;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#main-nav button:hover {
    background-color: #023047;
}

/* =========================
   MAIN CONTENT
========================= */

#content-area {
    width: 100%;
    max-width: 1400px;
    box-sizing: border-box;
    margin: auto;
    padding: 20px;
    padding-bottom: 190px;  /* reserve space for fixed footer on wide/desktop viewports; mobile gets its own override below since the footer reverts to static there */
    flex: 1;
}

/* =========================
   CONTENT SECTIONS
========================= */

.content-section {
    display: none;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,0.1);
}

.active-section {
    display: block;
}

/* =========================
   WELCOME BOX
========================= */

.welcome-box {
    text-align: center;
    padding: 40px 20px;
}

.welcome-box h1 {
    margin-top: 0;
    color: #006d77;
    font-size: 40px;
}

.welcome-box p {
    font-size: 20px;
    line-height: 1.8;
}

/* =========================
   IFRAME CONTENT
========================= */

.google-frame {
    width: 100%;
    min-height: 800px;
    border: none;
}

/* =========================
   MEMBERSHIP BUTTONS
========================= */

.membership-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.membership-button {
    display: inline-block;
    padding: 16px 30px;
    background-color: #219ebc;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.membership-button:hover {
    background-color: #023047;
}

/* =========================
   MEMBERSHIP FORM
========================= */

.membership-greeting {
    text-align: center;
    padding: 20px 20px 10px;
}

.membership-form-art {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.membership-success-art {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.membership-greeting p {
    font-size: 17px;
    line-height: 1.7;
    color: #333;
    max-width: 700px;
    margin: 0 auto;
}

#membership-form {
    max-width: 800px;
    margin: 20px auto 0;
    padding: 0 10px;
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.form-group {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    min-width: 100%;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
    color: #023047;
}

.req {
    color: #c62828;
}

.opt-label {
    font-weight: 400;
    color: #888;
    font-size: 12px;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #219ebc;
    box-shadow: 0 0 0 3px rgba(33, 158, 188, 0.15);
}

.form-group input.field-error,
.form-group select.field-error {
    border-color: #c62828;
    box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.field-hint {
    font-size: 12px;
    color: #888;
    margin-top: 3px;
}

.form-error {
    background: #fdecea;
    color: #c62828;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.form-actions {
    text-align: center;
    padding: 10px 0 20px;
}

.membership-submit-btn {
    padding: 14px 40px;
    background-color: #219ebc;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.membership-submit-btn:hover {
    background-color: #023047;
}

/* =========================
   PAYMENT PAGE
========================= */

.payment-wrapper {
    max-width: 700px;
    margin: 0 auto;
    padding: 30px 20px;
    text-align: center;
}

.payment-summary {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px 25px;
    margin-bottom: 30px;
    text-align: left;
}

.payment-summary h3 {
    margin-top: 0;
    color: #023047;
}

.payment-summary table {
    width: 100%;
    border-collapse: collapse;
}

.payment-summary td {
    padding: 5px 8px;
    font-size: 15px;
    vertical-align: top;
}

.payment-summary td:first-child {
    font-weight: 600;
    color: #126782;
    white-space: nowrap;
    width: 160px;
}

.payment-buttons {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.payment-option {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 12px;
    padding: 25px 30px;
    min-width: 200px;
    text-align: center;
    transition: border-color 0.2s;
}

.payment-option:hover {
    border-color: #219ebc;
}

.payment-option h4 {
    margin: 0 0 15px;
    color: #023047;
}

/* =========================
   RESULT PAGES
========================= */

.result-wrapper {
    max-width: 600px;
    margin: 60px auto;
    padding: 40px 30px;
    text-align: center;
    background: white;
    border-radius: 12px;
    box-shadow: 0 0 12px rgba(0,0,0,0.1);
}

.result-icon {
    font-size: 64px;
    margin-bottom: 10px;
}

.result-wrapper h1 {
    color: #006d77;
    margin-bottom: 15px;
}

.result-wrapper.error h1 {
    color: #c62828;
}

.result-wrapper p {
    font-size: 17px;
    line-height: 1.7;
    color: #444;
}

.result-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 30px;
    background: #219ebc;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    transition: background 0.3s;
}

.result-btn:hover {
    background: #023047;
}

/* =========================
   T-SHIRT ORDER
========================= */

.tshirt-form-art {
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.tshirt-graphics {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.tshirt-preview {
    text-align: center;
    cursor: pointer;
}

.tshirt-preview p {
    margin-top: 8px;
    font-weight: 600;
    color: #023047;
    font-size: 14px;
}

.tshirt-thumb {
    width: 300px;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    border: 2px solid #ddd;
    transition: border-color 0.2s, transform 0.2s;
    cursor: pointer;
}

.tshirt-thumb:hover {
    border-color: #219ebc;
    transform: scale(1.03);
}

.tshirt-style-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.tshirt-sizing-chart {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.tshirt-description {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    text-align: center;
}

.tshirt-matrix-wrapper {
    max-width: 500px;
    margin: 20px auto;
    overflow-x: auto;
}

.tshirt-matrix {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.tshirt-matrix th {
    background: #126782;
    color: white;
    padding: 10px 15px;
    font-size: 15px;
}

.tshirt-matrix td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    font-size: 15px;
}

.tshirt-matrix td:first-child {
    font-weight: 600;
    color: #023047;
    text-align: left;
}

.tshirt-matrix tr:hover {
    background: #f0f9fb;
}

.qty-input {
    width: 60px;
    padding: 6px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 15px;
}

.qty-input:focus {
    outline: none;
    border-color: #219ebc;
    box-shadow: 0 0 0 3px rgba(33, 158, 188, 0.15);
}

.tshirt-total-box {
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    background: #f8f9fa;
    border: 2px solid #219ebc;
    border-radius: 10px;
    text-align: center;
    line-height: 1.8;
}

/* =========================
   BOARD GRID
========================= */

#board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* =========================
   BOARD CARD
========================= */

.board-card {
    background-color: #fafafa;
    border: 1px solid #ddd;
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
    padding-bottom: 20px;
}

.board-photo {
    width: 100%;
    height: 300px;
    object-fit: fill;
    display: block;
}

.board-card h2 {
    margin-top: 20px;
    margin-bottom: 5px;
    color: #006d77;
    font-size: 24px;
}

.board-member-name {
    font-family: 'Dancing Script', cursive;
    font-size: 22px;
    font-weight: 700;
    color: #023047;
    margin: 0 0 10px;
    padding: 0 20px;
}

.board-greeting {
    padding: 0 20px;
    font-size: 17px;
    line-height: 1.6;
    min-height: 80px;
}

.board-email {
    display: inline-block;
    margin-top: 15px;
    color: #126782;
    text-decoration: none;
    font-weight: bold;
    word-break: break-word;
}

.board-email:hover {
    text-decoration: underline;
}

/* =========================
   GALLERY LINKS
========================= */

#gallery-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.gallery-link {
    display: block;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 8px;
    text-decoration: none;
    color: #023047;
    font-size: 18px;
    border: 1px solid #ddd;
    transition: background-color 0.3s ease;
}

.gallery-link:hover {
    background-color: #e0f4f8;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px) {

    /* The #top-header and #banner-image rules that used to sit here were
       removed: height:130px fought the aspect-ratio bands above, and
       object-position:left center was a workaround for object-fit:fill
       that is unnecessary now the artwork is cover-cropped from center. */

    .welcome-box h1 {
        font-size: 30px;
    }

    .welcome-box p {
        font-size: 18px;
    }

    .google-frame {
        min-height: 600px;
    }

}

/* =========================
   SITE ANNOUNCEMENT
========================= */

.site-announcement {
    background: #c62828;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    padding: 10px;
    margin: 8px 15px;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(198,40,40,.45);
    animation: announcementPulse 2.5s infinite;
}

.announcement-label {
    font-size: 1.45rem;
    font-weight: 800;
    margin-right: 8px;
}

@keyframes announcementPulse {

    0%   { transform: scale(1);     }
    50%  { transform: scale(1.015); }
    100% { transform: scale(1);     }
}

/* =========================
   SITE FOOTER
========================= */

#site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/* Revert fixed footer to normal flow on mobile - fixed footers eat too much
   screen space on phones. This MUST appear after the base #site-footer rule
   above so it actually wins the cascade (an earlier copy of this override
   existed higher up in the file and was being silently beaten by this base
   rule since equal-specificity selectors resolve by source order, not by
   which one is inside a media query). */
@media (max-width: 900px) {
    #site-footer {
        position: static;
        width: auto;
    }

    #content-area {
        padding-bottom: 20px;
    }
}

#footer-banner img {
    width: 100%;
    height: 40px;
    object-fit: fill;
    display: block;
}

#footer-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    font-size: .9rem;
    background: white;
}

.footer-left a {
    text-decoration: none;
    color: #006d77;
    font-weight: bold;
}

.footer-right {
    color: #666;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* accounts for mobile browser toolbar, falls back to 100vh above on older browsers */
}

/* =========================
   DONATION GAUGE
========================= */

#donation-gauge {
    width: 100%; box-sizing: border-box;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    gap: 14px;
}

#donation-gauge-title,
#donation-gauge-goal {
    font-size: .85rem;
    font-weight: 600;
    color: #023047;
    white-space: nowrap;
    flex-shrink: 0;
}

#donation-gauge-bars {
    display: flex;
    flex: 1;
    gap: 4px;
}

.donation-gauge-segment {
    flex: 1;
    height: 14px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.donation-gauge-segment-fill {
    height: 100%;
    background: #c62828; /* fallback red; PHP overrides via inline hsl() based on percent */
    border-radius: 4px;
    transition: width 0.6s ease, background-color 0.6s ease;
}

@media (max-width: 700px) {

    /* Stay on ONE line on phones. The short "$2.7k" figures fit the width,
       so the old flex-wrap + order:3 stack (which cost ~40px of height and
       pushed the bar onto its own row) is no longer needed. */
    #donation-gauge {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 10px;
    }

    #donation-gauge-title,
    #donation-gauge-goal {
        font-size: .72rem;
    }

    #donation-gauge-bars {
        gap: 3px;
    }

    .donation-gauge-segment {
        height: 11px;
    }
}
/* =========================
   FORM VALIDATION ERRORS
   Shown above the membership and t-shirt forms when the server
   rejects a submission. Matches the events section styling.
========================= */

.form-errors {
    background: #ffebee;
    border: 1px solid #ef9a9a;
    color: #c62828;
    padding: 14px 18px;
    border-radius: 8px;
    margin: 18px 0;
    line-height: 1.7;
    text-align: left;
}

.form-errors ul {
    margin: 8px 0 0 18px;
    padding: 0;
}


/* =========================
   CLUB DOCS & LINKS
   Section markup lives in default.php; files are read by includes/club-docs.php.
========================= */

.docs-intro {
    text-align: center;
    margin-bottom: 22px;
}

.docs-intro h2 {
    color: #006d77;
    margin: 0 0 6px;
}

.docs-intro p {
    color: #555;
    margin: 0;
}

.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
}

.docs-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .12);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}

.docs-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.docs-card-icon {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
}

.docs-card-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.docs-card-label {
    font-weight: 700;
    font-size: 1.05rem;
    color: #023047;
}

.docs-card-desc {
    font-size: .85rem;
    color: #666;
    line-height: 1.45;
}

.docs-card-arrow {
    font-size: 26px;
    color: #219ebc;
    flex-shrink: 0;
}

/* Dynamic groups (Newsletters, Other Documents) - compact dated rows,
   read from the club-files/club-docs/ folders by includes/club-docs.php. */

.docs-group {
    max-width: 900px;
    margin: 30px auto 0;
}

.docs-group-heading {
    color: #006d77;
    margin: 0 0 4px;
    padding-bottom: 6px;
    border-bottom: 2px solid #8ecae6;
}

.docs-year {
    color: #023047;
    font-size: .95rem;
    margin: 14px 0 6px;
}

.docs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10);
    text-decoration: none;
    color: inherit;
}

.docs-row:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

.docs-row-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.docs-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.docs-row-title {
    color: #023047;
    overflow-wrap: anywhere;
}

.docs-row-date {
    font-weight: 700;
}

.docs-row-desc {
    font-size: .85rem;
    color: #666;
}

.docs-latest {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: #2a9d8f;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    vertical-align: middle;
}



/* =========================
   MOBILE HEADER + NAV
   Phones only. Must stay AFTER the max-width:900px block earlier in this
   file: equal-specificity selectors resolve by source order, not by which
   one sits inside a media query.
========================= */

@media (max-width: 700px) {

    .docs-grid       { grid-template-columns: 1fr; }
    .docs-card       { padding: 13px 14px; gap: 11px; }
    .docs-card-icon  { font-size: 25px; }
    .docs-card-label { font-size: 1rem; }

    /* Banner. Phones get the 4:1 asset at its own exact ratio, so it fills
       the header with no crop at all from 320px up. Overrides the 6:1 of
       the tablet band above. object-fit:cover and object-position:center
       are inherited from the base rules - not repeated here. */
    #top-header {
        height: auto;
        aspect-ratio: 4 / 1;
    }

    /* Nav: every button stays visible, roughly half the height. */
    #main-nav {
        padding: 6px 4px;
        gap: 6px;
    }

    #main-nav button {
        margin: 0;
        padding: 8px 10px;
        font-size: 13px;
        border-radius: 5px;
    }
}