/* Styles for the new admin-managed features (calendar, RSVP, events)
   that aren't part of the original theme — layered on top of it via
   theme.css/custom.css, which load before this file. Uses Bootstrap
   utility classes (already loaded) for buttons/spacing where possible,
   so new UI blends in rather than introducing a second design system. */

/* H3 headings, site-wide: 10% smaller and half the spacing after them,
   compared to Bootstrap's defaults (margin-bottom: .5rem; font-size:
   calc(1.3rem + .6vw), fixed at 1.75rem from the 1200px breakpoint up). */
h3 { font-size: calc(1.17rem + 0.54vw); margin-bottom: 0.25rem; }
@media (min-width: 1200px) {
    h3 { font-size: 1.575rem; }
}

.calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.calendar-header h1 { font-size: 1.6rem; margin: 0; }
.cal-nav { text-decoration: none; font-weight: 600; }

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: #ddd;
    border: 1px solid #ddd;
}
.cal-weekday { background: #333; color: white; text-align: center; padding: 0.5rem 0; font-size: 0.8rem; font-weight: 600; }
.cal-cell { background: white; min-height: 110px; padding: 0.4rem; font-size: 0.85rem; overflow: hidden; }
.cal-empty { background: #fafafa; }
.cal-today { background: #fff8e1; }
.cal-day-number { font-weight: 600; margin-bottom: 0.3rem; }
.cal-event {
    display: block;
    text-decoration: none;
    margin-bottom: 0.4rem;
}
/* Event name: white text on a blue box, wrapping up to 2 lines (instead
   of cutting off after one) so more of the title is actually readable —
   anything longer than that still gets an ellipsis rather than
   overflowing the box. */
.cal-event-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: #3d7ab5;
    color: white;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-size: 0.75rem;
    line-height: 1.25;
}
.cal-event:hover .cal-event-name { background: #2d5f8f; }
.cal-event-time {
    display: block;
    color: #3d7ab5;
    font-size: 0.72rem;
    font-weight: 600;
    margin-top: 0.2rem;
}

html { scroll-behavior: smooth; }
.calendar-jump-link { text-align: right; margin: 0 0 1rem; }
.calendar-jump-link a { font-weight: 600; text-decoration: none; }
.calendar-jump-link a:hover { text-decoration: underline; }

.upcoming-events { margin-top: 2.5rem; scroll-margin-top: 90px; }

/* --- Birthdays (members-only) --- */
.birthday-month-heading { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
.birthday-month-heading:first-of-type { margin-top: 1rem; }
.birthday-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #eee; }
.birthday-list li {
    display: grid; grid-template-columns: 60px 1fr; align-items: baseline; gap: 0 1rem;
    padding: 0.6rem 0.3rem; border-bottom: 1px solid #eee;
}
.birthday-list li:hover { background: #f7f9f7; }
.birthday-day { color: #666; font-weight: 600; }
.birthday-name { font-weight: 600; color: inherit; text-decoration: none; }
.birthday-name:hover { text-decoration: underline; }
.upcoming-events h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.upcoming-events-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid #eee; }
.upcoming-events-list li { border-bottom: 1px solid #eee; }
.upcoming-events-list a {
    /* A fixed-width date column keeps the title right next to it
       instead of the two ends being pushed apart by space-between,
       which stretched them to the far edges of the row on wide
       screens and left a large empty gap in the middle. */
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: baseline;
    gap: 0 1rem;
    padding: 0.8rem 0.3rem;
    text-decoration: none;
    color: inherit;
}
.upcoming-events-list a:hover { background: #f7f9f7; }
.upcoming-event-date { color: #666; font-size: 0.85rem; white-space: nowrap; }
.upcoming-event-title { font-weight: 600; text-align: left; }

/* --- Contact page --- */
.contact-form label { display: block; margin-top: 1rem; font-weight: 600; font-size: 0.9rem; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form input[type=tel],
.contact-form textarea {
    width: 100%; padding: 0.6rem; margin-top: 0.3rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit;
}
.radio-row { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.5rem; }
.radio-option { display: flex; align-items: center; gap: 0.4rem; font-weight: 400 !important; margin-top: 0 !important; }
.radio-option input[type=radio] { width: auto; margin: 0; }

/* Honeypot field: hidden from real visitors via CSS, but still present
   in the HTML/DOM so bots that don't render CSS will fill it in and
   get caught. */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* BlendScript is the site's actual custom cursive/script font (found in
   custom.css) — using the real font here instead of the Google Font
   substitute previously used as a stand-in, since the real font files
   are already hosted on the server at this path. */
@font-face {
    font-family: 'BlendScript';
    src: url('/fonts/BlendScript.woff') format('woff'),
         url('/fonts/BlendScript.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.join-fee-box {
    background: #e3f5e6; border: 1px solid #b8e0bd; border-radius: 8px;
    padding: 1rem 1.2rem; margin: 1rem 0 1.5rem; display: flex; flex-direction: column; gap: 0.2rem;
}
.join-fee-box strong { font-size: 1.3rem; color: #1a5d28; }
.join-fee-box span { color: #444; font-size: 0.9rem; }
/* The fee amount itself is a <span> nested inside <strong> (so JS can
   swap the number when the senior discount applies) — without this,
   the gray/small rule above wins and the number looks disconnected
   from "Membership fee: $" instead of matching it. */
.join-fee-box strong span { color: inherit; font-size: inherit; }

.board-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.board-card { background: #f9f9f9; border-radius: 10px; padding: 1.2rem; text-align: center; }
.board-photo {
    width: 120px; max-width: 100%; height: auto; aspect-ratio: 1 / 1;
    border-radius: 50%; object-fit: cover; margin: 0 auto 0.8rem; display: block;
}
.board-position-title { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; color: #1a1a1a; margin: 0 0 0.2rem; }
.board-position-name { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.6rem; }
.board-card .directory-info-list { text-align: left; }

@media (max-width: 900px) {
    .board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .board-grid { grid-template-columns: 1fr; }
}

/* --- Photo Gallery --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.8rem;
}
.gallery-tile { background: #f9f9f9; border-radius: 10px; overflow: hidden; }
.gallery-tile-carousel { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.gallery-tile-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.5s ease;
}
.gallery-tile-slide.is-active { opacity: 1; z-index: 1; }
.gallery-tile-slide-empty { background: #e0e0e0; }
.gallery-tile-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,0.35);
    color: white; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.gallery-tile-prev { left: 0.6rem; } .gallery-tile-next { right: 0.6rem; }
.gallery-tile-dots { position: absolute; bottom: 0.6rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.4rem; z-index: 2; }
.gallery-tile-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.gallery-tile-dot.is-active { background: white; }
.gallery-tile-caption { padding: 1rem 1.1rem; }
.gallery-tile-caption h3 { font-size: 1.05rem; margin: 0 0 0.2rem; font-weight: 700; }
.gallery-tile-caption p { margin: 0; color: #666; font-size: 0.88rem; }

@media (max-width: 900px) {
    .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .gallery-grid { grid-template-columns: 1fr; }
}

.payment-instructions {
    background: #fff3cd; border: 1px solid #f0dca0; border-radius: 8px;
    padding: 1rem 1.2rem; margin-top: 0.8rem;
}
.payment-instructions address { font-style: normal; margin: 0.5rem 0; }
.payment-method-options { flex-direction: column; align-items: flex-start; gap: 0.6rem; }

.contact-info-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.contact-info-list li { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1.2rem; }
.contact-info-list i { color: #3d7ab5; font-size: 1.1rem; margin-top: 0.2rem; }
.contact-map { border-radius: 8px; overflow: hidden; }

/* --- Homepage: rotating carousel --- */
.home-carousel { position: relative; width: 100%; height: 65vh; min-height: 420px; max-height: 700px; overflow: hidden; }
.home-carousel-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 0.7s ease; display: flex; align-items: center; justify-content: center;
}
.home-carousel-slide.is-active { opacity: 1; z-index: 1; }
.home-carousel-overlay {
    background: rgba(0,0,0,0.4); width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem;
}
.home-carousel-overlay h1 {
    font-family: 'BlendScript', cursive; color: white; font-weight: 400;
    font-size: clamp(1.5rem, 6vw, 3.2rem);
    margin: 0 0 1rem; text-shadow: 0 2px 10px rgba(0,0,0,0.5); max-width: 900px;
}
.home-carousel-overlay p { color: white; font-size: clamp(0.95rem, 3vw, 1.43rem); max-width: 700px; margin-bottom: 1.5rem; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.home-carousel-btn {
    background: white; color: #1a1a1a; padding: 0.8rem 1.8rem; border-radius: 4px;
    font-weight: 700; text-decoration: none; display: inline-block;
}
.home-carousel-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0,0,0,0.35);
    color: white; border: none; width: 44px; height: 44px; border-radius: 50%; font-size: 1.6rem;
    cursor: pointer; line-height: 1;
}
.home-carousel-prev { left: 1rem; } .home-carousel-next { right: 1rem; }
.home-carousel-dots { position: absolute; bottom: 1.2rem; left: 0; right: 0; display: flex; justify-content: center; gap: 0.5rem; z-index: 2; }
.home-carousel-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid white; background: transparent; cursor: pointer; padding: 0; }
.home-carousel-dot.is-active { background: white; }

/* --- Homepage: About Our Club --- */
.home-about-section { max-width: 800px; margin-left: auto; margin-right: auto; }
.home-about-body { line-height: 1.7; font-size: 130%; }
.home-about-body img { max-width: 100%; height: auto; border-radius: 6px; }

/* --- Homepage: callout tiles --- */
.home-callouts { display: flex; width: 100%; }
.home-callout-tile {
    position: relative; flex: 1; min-height: 300px; background-size: cover; background-position: center;
    text-decoration: none; overflow: hidden;
}
.home-callout-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; height: 21%;
    opacity: 0.92; transition: height 0.35s ease, opacity 0.35s ease;
}
a.home-callout-tile:hover .home-callout-overlay { height: 100%; opacity: 0.55; }
a.home-callout-tile:hover { text-decoration: none; }
.home-callout-label {
    /* Positioned to match the overlay bar exactly (not the tile's full
       height), so the text is centered on the color bar at every tile
       height/breakpoint instead of relying on bottom-anchored padding. */
    position: absolute; left: 0; right: 0; bottom: 0; height: 21%; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.4rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; padding: 0 1rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4); text-align: center;
    transition: height 0.35s ease;
}
a.home-callout-tile:hover .home-callout-label { height: 100%; }

@media (max-width: 900px) {
    .home-carousel { height: 50vh; min-height: 320px; }
}

@media (max-width: 700px) {
    .home-callouts { flex-direction: column; }
    .home-callout-tile { min-height: 200px; }
}

@media (max-width: 600px) {
    .home-carousel { height: 40vh; min-height: 260px; }
    .home-carousel-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
}

/* Portrait phones specifically need more vertical room for the hero
   text than landscape does (landscape's wider viewport already falls
   into the 900px breakpoint above and isn't affected by this). */
@media (max-width: 600px) and (orientation: portrait) {
    .home-carousel { height: 52vh; min-height: 340px; }
}

.event-meta { color: #555; font-size: 0.95rem; }
.event-description { margin: 1.5rem 0; line-height: 1.6; }

.rsvp-box { margin-top: 2rem; }
.rsvp-success { color: #1a7a2e; font-weight: 600; }
.rsvp-guest-count { margin-bottom: 1rem; max-width: 260px; }
.rsvp-guest-count label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.rsvp-guest-count select { width: 100%; padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }

.attendee-box { margin-top: 1.5rem; padding: 1.2rem; background: #f4f5f7; border-radius: 8px; }
.attendee-box h2 { font-size: 1.1rem; margin-top: 0; }
.attendee-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.4rem; }
.attendee-list li { background: white; padding: 0.4rem 0.7rem; border-radius: 4px; font-size: 0.9rem; }

.page-content-wrap { min-height: 50vh; overflow-x: hidden; }

/* --- Interest Groups grid --- */
.interest-groups-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem 1.5rem;
}
.interest-group-card { text-align: left; }
.interest-group-photo {
    width: 200px; max-width: 100%; height: auto; aspect-ratio: 1 / 1;
    border-radius: 50%; object-fit: cover; margin: 0 auto 0.8rem; display: block;
}
.interest-group-photo-placeholder { background: #e5e5e5; }
.interest-group-card h3 { font-size: 1.1rem; margin: 0 0 0.4rem; font-weight: 700; text-align: center; }
.interest-group-card p { font-size: 0.92rem; color: #444; line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
    .interest-groups-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .interest-groups-grid { grid-template-columns: 1fr; }
}

/* --- Annual Events grid --- */
.annual-events-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
}
.annual-event-card { text-align: left; }
.annual-event-photo {
    width: 100%; height: auto; aspect-ratio: 16 / 9;
    border-radius: 8px; object-fit: cover; margin: 0 0 0.8rem; display: block;
}
.annual-event-photo-placeholder { background: #e5e5e5; }
.annual-event-card h3 { font-size: 1.1rem; margin: 0 0 0.3rem; font-weight: 700; }
.annual-event-meta { font-size: 0.85rem; color: #2a5d34; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.5rem; }
.annual-event-card p { font-size: 0.92rem; color: #444; line-height: 1.5; margin: 0; }

@media (max-width: 900px) {
    .annual-events-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .annual-events-grid { grid-template-columns: 1fr; }
}

/* --- Member Directory --- */
.directory-search-box {
    width: 100%; max-width: 400px; padding: 0.6rem 0.9rem; margin: 1rem 0 1.5rem;
    border: 1px solid #ccc; border-radius: 6px; font-size: 0.95rem;
}
@media (min-width: 901px) {
    /* Right-justified on desktop only; stays left-aligned (full width)
       on mobile/tablet where it's stacked with the sort buttons above it. */
    .directory-search-box { display: block; margin-left: auto; }
}
.directory-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}
.directory-card {
    background: #f9f9f9; border-radius: 10px; padding: 1.2rem; text-align: left;
    overflow-wrap: break-word; word-break: break-word;
}
.directory-card h3 { font-size: 1.05rem; margin: 0 0 0.6rem; font-weight: 700; }
.directory-info-list {
    list-style: none; padding: 0; margin: 0; text-align: left; font-size: 0.85rem; color: #444;
}
.directory-info-list li { margin-bottom: 0.4rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.directory-info-list i { color: #3d7ab5; width: 14px; margin-top: 0.2rem; flex-shrink: 0; }
.directory-bio { text-align: left; font-size: 0.9rem; color: #555; margin-top: 1rem; border-top: 1px solid #e0e0e0; padding-top: 1rem; }

.directory-photo-placeholder { background: #e0e0e0; }

.directory-detail { max-width: 600px; background: #f9f9f9; border-radius: 10px; padding: 2rem; }
.directory-detail-photo {
    width: 160px; max-width: 100%; height: auto; aspect-ratio: 1 / 1;
    border-radius: 50%; object-fit: cover; margin: 0 0 1.2rem; display: block;
}
.directory-detail-list { font-size: 0.95rem; }

@media (max-width: 900px) {
    .directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
    .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 450px) {
    .directory-grid { grid-template-columns: 1fr; }
}

.hero-banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-banner-overlay {
    background: rgba(0, 0, 0, 0.45);
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
/* Reserved for a future home-page rotating banner, which should stay
   at the taller original size rather than the reduced height above. */
.hero-banner-tall, .hero-banner-tall .hero-banner-overlay {
    min-height: 420px;
}
.hero-banner-overlay h1 {
    color: white;
    font-size: 2.4rem;
    font-weight: 600;
    padding: 0 1.5rem;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ============================================================
   RESPONSIVE — tablets and phones.
   ============================================================ */
@media (max-width: 900px) {
    .hero-banner, .hero-banner-overlay { min-height: 200px; }
    .hero-banner-overlay h1 { font-size: 1.7rem; padding: 0 1rem; }
}

@media (max-width: 600px) {
    /* Flex rows don't shrink their children's text by default (each
       item keeps its natural minimum width), which is what was
       pushing the calendar header wider than the screen. Wrapping
       and centering fixes that instead of letting it overflow. */
    .calendar-header { flex-wrap: wrap; justify-content: center; text-align: center; gap: 0.5rem; row-gap: 0.3rem; }
    .calendar-header h1 { width: 100%; order: -1; font-size: 1.3rem; }

    .cal-cell { min-height: 55px; padding: 0.25rem 0.15rem; font-size: 0.7rem; }
    .cal-day-number { margin-bottom: 0.15rem; }
    .cal-weekday { font-size: 0.65rem; padding: 0.35rem 0; }

    /* Phones specifically (not iPad — see the 900px tablet breakpoint
       above, which keeps the full text listing): replace each event's
       time+title text with a small colored dot. Tapping the dot still
       goes straight to that event's detail page — this just keeps the
       grid from being squeezed too tight to read on a phone screen. */
    .cal-event {
        display: inline-block;
        background: none;
        padding: 0;
        margin: 0 2px 2px 0;
        border-radius: 0;
    }
    .cal-event:hover { background: none; }
    .cal-event-label { display: none; }
    .cal-event-dot {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #2a8a3e;
    }

    .attendee-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

    .upcoming-events-list a { grid-template-columns: 1fr; gap: 0.15rem; }
}