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

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

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

#top-header {
    width: 100%;
    height: 130px;
    overflow: hidden;
    background-color: #023047;
    flex-shrink: 0
}

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

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

#banner-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    object-position: center;
}

/* =========================
   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-print-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 22px;
    background-color: #126782;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

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

#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) {

    #top-header {
        height: 130px;      /* same height on mobile */
    }

    #banner-image {
        object-position: left center;   /* show left side of banner on mobile */
    }

    .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) {
    #donation-gauge {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }

    #donation-gauge-bars {
        order: 3;
        flex: 1 1 100%;
        margin-top: 6px;
    }

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