/* ==========================================================================
   David Rokeach — Drummer
   Responsive layout based on Bruce's mockup
   Mobile-first approach
   ========================================================================== */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9375rem; /* 15px */
    line-height: 1.6;
    color: #333;
    background: #eee;
}

a {
    color: #4a8c3f;
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: #3a7030;
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ---------- Site Header ---------- */
.site-header {
    background: transparent;
    color: #fff;
    width: 100%;
}

/* On mobile the shell is transparent to layout; it becomes the positioning
   context + full-height headshot column only on desktop. */
.header-shell {
    display: contents;
}

/* Decorative cymbal: desktop-only, sits on the header line */
.header-cymbal {
    display: none;
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    position: relative;
    background: #292929;
}

/* Brand / Logo area */
.brand-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}

.brand-link:hover {
    color: #fff;
    text-decoration: none;
}

.brand-headshot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #666;
    flex-shrink: 0;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-name {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: #fff;
}

.brand-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 3px;
    color: #ccc;
    text-transform: uppercase;
}

/* Mobile: "DRUMMER" sits directly under "DAVID ROKEACH", left-aligned and a
   touch larger. The tagline copy (with the quote) drops its own DRUMMER here. */
.brand-title-mobile {
    font-size: 1.05rem;
    letter-spacing: 4px;
    text-align: left;
    margin-top: 2px;
}

.header-tagline .brand-title {
    display: none;
}

/* Tagline beneath header */
.header-tagline {
    background: #292929;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 10px;
    text-align: center;
}

/* Override so the tagline bar spans full width */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-inner {
    width: 100%;
}

.header-tagline {
    width: 100%;
    max-width: 1200px;
}

.header-tagline p {
    font-size: 0.8rem;
    color: #aaa;
    margin: 0;
    line-height: 1.4;
}

/* ---------- Hamburger (mobile) ---------- */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 110;
}

.hamburger-line {
    display: block;
    width: 26px;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger open state */
.hamburger.is-active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger.is-active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.is-active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Navigation ---------- */
.main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #292929;
    z-index: 100;
    border-top: 1px solid #555;
}

.main-nav.is-open {
    display: block;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    border-bottom: 1px solid #444;
}

.nav-link {
    display: block;
    padding: 14px 20px;
    color: #fff;
    text-decoration: none;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.nav-link:hover {
    color: #fff;
    background: #444;
    text-decoration: none;
}

.nav-caret {
    font-size: 0.8rem;
    margin-right: 4px;
    display: inline-block;
    align-self: flex-start;
    vertical-align: top;
    position: relative;
    left: -3px;
    top: 18px;
    line-height: 1;
    color: #fff;
}

/* Dropdown menus (mobile: always shown when parent open) */
.dropdown {
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    background: #3a3a3a;
}

.nav-item.is-open .dropdown {
    display: block;
}

.dropdown li a {
    display: block;
    padding: 10px 20px 10px 36px;
    color: #ccc;
    text-decoration: none;
    font-size: 0.85rem;
    font-family: 'Source Sans 3', sans-serif;
    letter-spacing: 0.5px;
}

.dropdown li a:hover {
    color: #fff;
    background: #444;
    text-decoration: none;
}

.dropdown li a.active-sub {
    color: #e74c3c;
    font-weight: 700;
}

/* ---------- Main Content Area ---------- */
.site-content {
    width: 100%;
    background: #fff;
    max-width: 1200px;
    margin: 0 auto;
}

.content-inner {
    padding: 24px 20px;
}

/* ---------- Home Page Layout ---------- */
/* Shared by the home page and the reusable page-with-sidebar wrapper */
.home-layout,
.page-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* -- Sidebar -- */
.home-sidebar,
.page-sidebar {
    order: 2; /* On mobile, shows after main content */
}

.sidebar-heading {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #333;
    padding-bottom: 6px;
    border-bottom: 2px solid #333;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* VIDEOS button above the Upcoming Shows in the sidebar layout */
.sidebar-videos-btn {
    display: block;
    padding: 12px 24px;
    margin-bottom: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.show-item {
    margin-bottom: 14px;
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

.show-item p {
    margin: 0;
}

.show-item a {
    color: #4a8c3f;
    text-decoration: underline;
}

.show-item a:hover {
    color: #3a7030;
}

.section-link {
    margin-top: 16px;
    margin-bottom: 24px;
}

.section-link a {
    color: #4a8c3f;
    font-size: 0.85rem;
    font-style: italic;
}

/* -- Video embeds in sidebar -- */
.video-embed {
    margin-bottom: 20px;
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 4px;
}

.video-responsive iframe,
.video-responsive .video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Click-to-load YouTube facade (thumbnail + play button until clicked) */
.video-responsive .yt-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: #000;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yt-play {
    width: 68px;
    height: 48px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.2s ease;
    position: relative;
}

.video-responsive .yt-facade:hover .yt-play,
.video-responsive .yt-facade:focus-visible .yt-play {
    background: #cc0000;
}

.yt-play::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.video-caption {
    margin-top: 6px;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.4;
}

/* -- Main content area -- */
.home-main,
.page-main {
    order: 1; /* On mobile, main content first */
}

/* Bio section */
.bio-section {
    margin-bottom: 30px;
    background-color: #ececec;
    padding: 28px 32px;
}

/* The lead line acts as the bio section's header */
.bio-lead {
    font-size: 1.5em;
    line-height: 1.3;
    color: #333;
    margin-bottom: 16px;
}

.bio-section p:not(.bio-lead) {
    margin-bottom: 12px;
    font-size: 1.2em;
}

.more-link {
    color: #4a8c3f;
    font-style: italic;
}

/* Photo grid */
.photo-grid {
    margin-bottom: 30px;
}

/* Photo collage */
.photo-collage {
    margin-bottom: 30px;
}

.photo-collage img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.photo-row {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}

.photo-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.photo-row-2 {
    grid-template-columns: repeat(2, 1fr);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

/* Contact CTA */
.contact-cta {
    text-align: center;
    margin-bottom: 36px;
}

.cta-button {
    display: inline-block;
    background: #4a8c3f;
    color: #fff;
    padding: 16px 40px;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease, transform 0.1s ease;
}

.cta-button:hover {
    background: #3a7030;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.cta-heading {
    display: block;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cta-sub {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 1px;
    margin-top: 4px;
    opacity: 0.9;
    text-transform: uppercase;
}

/* Jazz Therapists */
.jazz-therapists {
    margin-bottom: 30px;
    background-color: #ececec;
    padding: 28px 32px;
}

.section-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #333;
    padding-bottom: 6px;
    border-bottom: 2px solid #333;
    margin-bottom: 16px;
    text-transform: uppercase;
}

/* Home Jazz Therapists heading larger; scoped so other .section-title uses are unaffected */
.jazz-therapists .section-title {
    font-size: 1.5em;
}

.therapists-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.therapists-text {
    font-size: 1.2em;
    line-height: 1.6;
}

.therapists-text p {
    margin: 0;
}

.therapists-photo img {
    border-radius: 4px;
    width: 100%;
}

/* ---------- Footer ---------- */
.site-footer {
    background: #f5f5f5;
    border-top: 1px solid #ddd;
    width: 100%;
    max-width: 1200px;   /* same cap as the header/body; footer bar is centered, not full-bleed */
    margin: 0 auto;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px 5em;   /* 5em breathing room at the very bottom of the page */
    text-align: center;
}

/* Footer navigation */
.footer-nav {
    margin-bottom: 20px;
}

.footer-nav-list {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    padding: 0;
    margin: 0;
}

.footer-nav-item > a {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
}

.footer-nav-item > a:hover {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

.footer-nav-item .nav-caret {
    font-size: 0.6rem;
    color: #999;
    position: relative;
    top: -1.5px;
}

/* Footer dropdowns */
.footer-dropdown {
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
    display: none;
}

.footer-nav-item.is-open .footer-dropdown {
    display: block;
}

.footer-dropdown li a {
    display: block;
    font-size: 0.8rem;
    color: #666;
    padding: 3px 0;
    text-decoration: none;
}

.footer-dropdown li a:hover {
    color: #333;
    font-weight: 700;
    text-decoration: none;
}

.footer-dropdown li a.active-sub {
    color: #e74c3c;
    font-weight: 700;
}

/* Footer copyright */
.footer-copyright {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-copyright p {
    margin: 0;
}

.footer-credit {
    margin-top: 4px;
}

.footer-credit a {
    color: #888;
    text-decoration: underline;
}

/* Footer sponsors */
.footer-sponsors {
    display: flex;
    justify-content: center;
}

.sponsor-logos {
    max-width: 320px;
    height: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.sponsor-logos:hover {
    opacity: 1;
}


/* ==========================================================================
   Tablet breakpoint (640px+)
   ========================================================================== */
@media (min-width: 640px) {
    .header-inner {
        padding: 14px 30px;
    }

    .brand-headshot {
        width: 64px;
        height: 64px;
    }

    .brand-name {
        font-size: 1.8rem;
    }

    .content-inner {
        padding: 30px;
    }

    /* Jazz Therapists side-by-side on tablet */
    .therapists-content {
        flex-direction: row;
        gap: 20px;
    }

    .therapists-text {
        flex: 1;
    }

    .therapists-photo {
        flex: 0 0 260px;
    }
}


/* ==========================================================================
   Desktop breakpoint (960px+)
   ========================================================================== */
@media (min-width: 960px) {
    /* Header layout: full-height headshot flush-left, the underline starts
       after it, "David Rokeach" above the line, "Drummer" below it. */
    .header-shell {
        display: block;
        position: relative;
        width: 100%;
        max-width: 1200px;   /* same cap as the body; dark bar is centered, not full-bleed */
        margin: 0 auto;
        height: 102px;   /* match the headshot's natural height */
        background: #292929;
    }

    .header-inner {
        position: static;
        max-width: none;
        width: calc(100% - 140px);   /* underline stops ~40px short of the box's right edge */
        margin: 0 0 0 100px;
        padding: 0 24px 0 0;
        height: 66px;
        align-items: flex-end;   /* pull "David Rokeach" down to the line */
        border-bottom: 1px solid #fff;
    }

    /* Decorative cymbal sits between the name and the menu, its bottom
       resting on top of the header underline. */
    .header-cymbal {
        display: block;
        height: 30px;
        width: auto;
        align-self: flex-end;
        margin-bottom: 0;
    }

    /* Headshot fills the full header height, flush to the container's left
       edge, rectangular (not the circle). */
    .brand-headshot {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100px;
        height: auto;
        border-radius: 0;
        border: none;
        object-fit: cover;
    }

    .brand-link {
        gap: 0;
    }

    .brand-name {
        font-size: 17pt;
        font-weight: 600;
    }

    /* "Drummer" below the line, centered under "David Rokeach" */
    .header-tagline {
        max-width: none;
        width: calc(100% - 140px);   /* right edge lines up with the underline's right edge */
        margin: 0 0 0 100px;
        padding: 2px 0 0 0;
        height: 36px;
        display: flex;
        align-items: flex-start;   /* pull the row up close to the line */
        gap: 0;
        text-align: left;
    }

    /* Desktop uses the tagline's DRUMMER (below the line); the mobile copy in
       the brand block is hidden. */
    .brand-title-mobile {
        display: none;
    }

    /* Fixed block the width of "David Rokeach" so "Drummer" centers under it */
    .header-tagline .brand-title {
        display: block;
        font-size: 12pt;
        font-weight: 400;
        width: 171px;
        flex-shrink: 0;
        text-align: center;
    }

    /* Quote fills the space from the name's right edge to the underline's
       right edge, centered within it. */
    .header-tagline p {
        font-size: 10.6pt;
        flex: 1;
        text-align: center;
        align-self: center;   /* vertically center the quote between line and header bottom */
    }

    /* Hide hamburger, show nav inline */
    .hamburger {
        display: none;
    }

    .main-nav {
        display: block;
        position: static;
        background: transparent;
        border-top: none;
        align-self: stretch;
    }

    .nav-list {
        display: flex;
        align-items: stretch;
        height: 100%;
        gap: 0;
    }

    .nav-item {
        border-bottom: none;
        position: relative;
        display: flex;
    }

    /* Vertical divider lines between nav items: #fff 1px, bottom-anchored so
       they meet the horizontal underline with no gap */
    .nav-item + .nav-item::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1px;
        height: 68%;
        background: #fff;
    }

    .nav-link {
        display: flex;
        align-items: flex-end;
        padding: 18px 26px 15px;
        font-size: 12pt;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    /* Desktop dropdown: hangs flush from the horizontal line. The three panels
       share the same height and butt together edge-to-edge so they read as one
       unified bar (see .dropdown min-height + no side borders). */
    .dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        /* Extend 1px past the item so adjacent panels butt together with no
           uncovered gap (which would show the dark background as a stray line) */
        min-width: calc(100% + 1px);
        height: 172px;
        background: #fff;
        border: none;
        border-bottom: 2px solid #f7f7f7;
        z-index: 200;
        padding: 12px 0;
    }

    /* 1px #333 frame around the whole expanded section: left on the first
       panel, right on the last, bottom on all — never between sections. */
    .nav-item:first-child .dropdown {
        border-left: 2px solid #f7f7f7;
    }

    /* Widen the ABOUT column so its dropdown (widest child: DISCOGRAPHY) fits
       within the item; otherwise the panel overflows into MUSIC, whose opaque
       panel paints over the right edge and clips the "Y" in DISCOGRAPHY.
       flex-shrink:0 stops the flex row from compressing the extra padding. */
    .nav-item:first-child {
        flex-shrink: 0;
    }

    .nav-item:first-child .nav-link {
        padding-left: 45px;
        padding-right: 45px;
    }

    .nav-item.has-dropdown:not(:has(+ .nav-item.has-dropdown)) .dropdown {
        border-right: 2px solid #f7f7f7;
    }

    /* Short vertical tick between adjacent sections, only near the top */
    .nav-item.has-dropdown + .nav-item.has-dropdown .dropdown::before {
        content: "";
        position: absolute;
        left: -1px;
        top: 0;
        width: 1px;
        height: 14px;
        background: #bbb;
    }

    /* Bruce's request: hovering ANY section with children reveals ALL dropdowns */
    .nav-item:hover .dropdown,
    .nav-item.is-open .dropdown,
    .nav-list:has(.nav-item.has-dropdown:hover) .dropdown {
        display: block;
    }

    .dropdown li a {
        padding: 8px 22px 8px 51px;
        color: #333;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    .dropdown li a:hover {
        background: #f5f5f5;
        color: #333;
        font-weight: 700;
    }

    .dropdown li a.active-sub {
        color: #e74c3c;
        font-weight: 700;
    }

    /* Content area */
    .content-inner {
        padding: 36px 40px;
    }

    /* Two-column home layout */
    .home-layout,
    .page-layout {
        flex-direction: row;
        gap: 40px;
    }

    .home-sidebar,
    .page-sidebar {
        order: 1; /* Sidebar on left on desktop */
        flex: 0 0 280px;
        min-width: 0;
    }

    .home-main,
    .page-main {
        order: 2; /* Main on right on desktop */
        flex: 1;
        min-width: 0;
    }

    /* Jazz Therapists */
    .therapists-photo {
        flex: 0 0 300px;
    }

    /* Footer nav mirrors the header: items sit flush so their dropdown
       panels butt together edge-to-edge into one unified bar. */
    .footer-nav-list {
        gap: 0;
    }

    .footer-nav-item {
        position: relative;
        display: flex;
    }

    /* Wider, flush top labels give each dropdown panel room to tile */
    .footer-nav-item > a {
        display: block;
        padding: 6px 34px;
    }

    /* Horizontal underline beneath the top-level items (80% of the nav width) */
    .footer-nav {
        position: relative;
    }

    .footer-nav::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80%;
        height: 1px;
        background: #ccc;
    }

    /* Vertical separators between top-level items. Anchored to the same item
       left edge as the dropdown section ticks, so the two line up as one
       continuous divider through the horizontal underline. */
    .footer-nav-item + .footer-nav-item::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 1px;
        height: 14px;
        background: #ccc;
    }

    /* Dropdown panels hang from the nav and butt together (equal height,
       left-aligned, no gaps) so they read as ONE unified bar floating
       over the footer instead of expanding it. */
    .footer-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: calc(100% + 1px);
        height: 152px;
        padding: 12px 0 34px;
        text-align: left;
        background: #fff;
        border-bottom: 1px solid #ddd;
        box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.25);
        z-index: 100;
    }

    /* 1px frame: left on the first section, right on the last, never between */
    .footer-nav-item:first-child .footer-dropdown {
        border-left: 1px solid #ddd;
    }

    .footer-nav-item.has-dropdown:not(:has(+ .footer-nav-item.has-dropdown)) .footer-dropdown {
        border-right: 1px solid #ddd;
    }

    /* Short vertical tick between adjacent sections, near the top */
    .footer-nav-item.has-dropdown + .footer-nav-item.has-dropdown .footer-dropdown::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 14px;
        background: #ccc;
    }

    .footer-dropdown li a {
        padding: 5px 34px 5px 48px;
        white-space: nowrap;
    }

    /* Hovering anywhere in the footer nav reveals ALL dropdowns at once */
    .footer-nav:hover .footer-dropdown {
        display: block;
    }
}


/* ==========================================================================
   Wide desktop (1200px+)
   ========================================================================== */
@media (min-width: 1200px) {
    .header-inner {
        padding: 0 24px 0 0;
    }

    .content-inner {
        padding: 40px 50px;
    }

    .home-sidebar,
    .page-sidebar {
        flex: 0 0 320px;
    }

    .home-layout,
    .page-layout {
        gap: 50px;
    }

    .nav-link {
        padding: 18px 34px;
    }
}


/* ==========================================================================
   Content pages (reviews, discography, audio, video, photos, calendar,
   projects, contact, booking) — added 2026-06-23
   ========================================================================== */
.content-page {
    max-width: 900px;
    margin: 0 auto;
}

.page-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.9rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 24px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4a8c3f;
}

.content-page p {
    line-height: 1.65;
    margin-bottom: 16px;
    color: #333;
}

.content-page a {
    color: #4a8c3f;
}

/* CTA buttons rendered as links keep the white button text (the generic
   .content-page a color rule would otherwise make it green-on-green) */
.content-page a.cta-button {
    color: #fff;
}

.empty-note {
    color: #666;
    font-style: italic;
}

.page-switch {
    margin-bottom: 20px;
    font-family: 'Source Sans 3', sans-serif;
}

/* -- Calendar / shows -- */
.show-list,
.project-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.project-row {
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e2e2;
}

.project-row:last-child {
    border-bottom: none;
}

/* Previous-shows rows: spacing only, no divider line between events */
.show-row {
    padding-bottom: 20px;
}

/* Extra breathing room at the bottom of the (very long) previous-shows list */
.content-page--previous {
    padding-bottom: 4em;
}

.show-body,
.project-body {
    line-height: 1.6;
}

/* Little right margin on scraped calendar images (overrides inline margin) */
.calendar-image {
    margin-right: 14px !important;
}

.project-date {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    color: #4a8c3f;
    margin-bottom: 6px;
}

/* -- Video grid -- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}

.video-card {
    display: flex;
    flex-direction: column;
}

.video-caption {
    margin-top: 10px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.95rem;
    color: #333;
}

/* -- Audio -- */
.audio-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.audio-row {
    padding-bottom: 18px;
    border-bottom: 1px solid #e2e2e2;
}

.audio-row:last-child {
    border-bottom: none;
}

.audio-player audio {
    width: 100%;
    max-width: 480px;
}

.audio-label {
    margin-top: 8px;
    padding-left: 25px;   /* indent song name past the player's play-button edge */
    line-height: 1.5;
    color: #333;
}

/* -- Discography -- */
.disc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.disc-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.disc-cover {
    flex: 0 0 auto;
}

/* Fit each cover within a 200px box, preserving aspect ratio and never
   upscaling past its native size — low-res source scans (e.g. the Ray
   Charles VHS covers) stay sharp instead of being blown up and grainy. */
.disc-cover img {
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
    border: 1px solid #ddd;
}

.disc-info {
    flex: 1 1 auto;
}

.disc-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.15rem;
    margin-bottom: 4px;
    color: #4a8c3f;
}

.disc-title a {
    color: inherit;
    text-decoration: none;
}

.disc-subtitle {
    color: #666;
    font-style: italic;
    margin-bottom: 8px;
}

.disc-comment {
    line-height: 1.55;
}

/* -- Photos -- */
.photo-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 18px;
}

.gallery-item {
    margin: 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ddd;
}

.gallery-item figcaption {
    margin-top: 6px;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

.gallery-link {
    display: block;
    cursor: zoom-in;
}

/* Gallery category sections */
.photo-category {
    margin-bottom: 48px;
}

.photo-category-title {
    font-size: 1.5rem;
    margin: 0 0 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #ddd;
}

.photo-category-description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Progressive-loading helpers (photos page) */
#gallery-sentinel {
    height: 1px;
}

.gallery-loading {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 16px 0;
}

/* -- Photo lightbox -- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox[hidden] {
    display: none;
}

.lightbox-figure {
    margin: 0;
    max-width: 92vw;
    max-height: 92vh;
    text-align: center;
}

.lightbox-img {
    max-width: 92vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 2px solid #fff;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6);
}

.lightbox-caption {
    color: #ddd;
    margin-top: 10px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.lightbox-caption:empty {
    display: none;
}

.lightbox button {
    position: absolute;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 12px 18px;
    font-size: 2rem;
    line-height: 1;
    opacity: 0.8;
}

.lightbox button:hover {
    opacity: 1;
}

.lightbox-close {
    top: 8px;
    right: 12px;
    font-size: 2.4rem;
}

.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
}

.lightbox-prev {
    left: 6px;
}

.lightbox-next {
    right: 6px;
}

/* -- Reviews -- */
.review-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-item {
    border-bottom: 1px solid #e8e8e8;
}

.review-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 6px;
    text-decoration: none;
    color: #333;
}

a.review-link:hover {
    background: #f5f7f4;
    color: #4a8c3f;
}

.review-link.is-plain {
    color: #888;
    cursor: default;
}

.review-title {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 1.02rem;
}

.review-badge {
    flex: 0 0 auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    background: #4a8c3f;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
}

.review-detail .review-body {
    overflow-x: auto;
}

.review-detail .review-body img {
    max-width: 100%;
    height: auto;
}

.review-source {
    margin-top: 24px;
    font-size: 0.9rem;
}

/* -- Contact form -- */
.contact-intro {
    margin-bottom: 24px;
}

.contact-form {
    max-width: 560px;
}

.form-field {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.form-field label {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: #333;
}

.form-field input,
.form-field textarea {
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: #4a8c3f;
}

.form-status {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.form-status--ok {
    background: #e8f3e4;
    border: 1px solid #4a8c3f;
    color: #2f5e28;
}

.form-status--error {
    background: #fdeeee;
    border: 1px solid #cc4b4b;
    color: #8a2b2b;
}

.form-status ul {
    margin: 0;
    padding-left: 20px;
}

.booking-cta {
    margin-top: 24px;
}

/* Larger label on the booking page's "Inquire About Booking" button only */
.booking-cta .cta-button {
    font-size: 1.25rem;
}

/* Collapse the discography grid to a single column on narrow screens */
@media (max-width: 600px) {
    .disc-list {
        grid-template-columns: 1fr;
    }

    .disc-cover img {
        max-width: 160px;
        max-height: 160px;
    }
}