/*
Theme Name: TB Theatre Theme
Theme URI: https://tyburnbrook.co.uk
Author: Tyburn Brook Creative Agency
Author URI: https://tyburnbrook.co.uk
Description: Theatre-dedicated theme by Tyburn Brook Creative Agency.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tb-theatre
License: Proprietary — usage requires a licence from Tyburn Brook Creative Agency, expiring 1st September 2027
License URI: https://tyburnbrook.co.uk
*/

/* -------------------------------------------------- */
/* 1. RESET & BASE                                     */
/* -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --teal: #00566b;
    --teal-dark: #00566b;
    --red: #a8222f;
    --gold: #eab04a;
    --gold-dark: #d99f3e;
    --ink: #1a1a1a;
    --grey-bg: #e6e6e6;
    --card-bg: #dddddd;
    --white: #ffffff;
    --max-width: 1368px;
    /* System-font stand-in for Oswald — condensed, bold, works well
       uppercase. No external font request, loads instantly. */
    --font-display: 'Arial Narrow', 'Helvetica Neue Condensed', 'Roboto Condensed', Arial, sans-serif;
}

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Arial', 'Helvetica Neue', sans-serif;
    color: var(--ink);
    background: var(--grey-bg);
    line-height: 1.5;
    overflow-wrap: break-word;
}

.boxed-content {
    width: calc(100% - 100px); /* 50px gutter each side, scales naturally since it's calc off 100% */
    max-width: 2200px; /* keeps the gutters from vanishing on very wide/ultrawide screens */
    margin: 0 auto;
}

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

a { color: inherit; text-decoration: none; }

/* Visually hides content while keeping it available to screen
   readers — standard "sr-only" pattern (e.g. for headings that fix
   the semantic hierarchy without changing the visual design). */
.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;
}

/* Accessibility: skip link (hidden until keyboard-focused, jumps
   straight past the header/nav to the page's actual content) and a
   strong, visible focus indicator everywhere — the default browser
   outline can be very hard to see against the site's dark teal
   header/footer sections. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 1000;
    background: var(--teal-dark);
    color: var(--white);
    padding: 12px 20px;
    border-radius: 0 0 6px 6px;
    font-weight: bold;
    text-decoration: none;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
}

:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px var(--teal-dark);
    border-radius: 2px;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    margin: 0 0 0.5em;
    line-height: 1.1;
}

h1 { font-size: 3rem; }
h2 { font-size: 2.6rem; }
h3 { font-size: 1.6rem; }

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 12px;
}

.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 30px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn::after {
    content: '\2192';
    display: inline-block;
    margin-left: 8px;
    transition: transform 0.15s ease;
}
.btn:hover::after {
    transform: translateX(4px);
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}
.btn-teal    { background: var(--teal); color: var(--white); }
.btn-teal:hover    { background: #003d4d; }
.btn-gold    { background: var(--gold); color: var(--ink); }
.btn-gold:hover    { background: #d99b2e; }
.btn-red     { background: var(--red); color: var(--white); }
.btn-red:hover     { background: #7c1824; }
.btn-outline { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline:hover { background: var(--white); color: var(--ink); }

.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.arrow-link .circle {
    width: 22px; height: 22px;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.arrow-link:hover .circle {
    background: var(--ink);
    color: var(--white);
    transform: translateX(4px);
}

/* -------------------------------------------------- */
/* 2. HEADER                                           */
/* -------------------------------------------------- */

.site-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 20px 40px;
    margin: 0;
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.custom-logo-link img {
    max-height: 80px;
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.site-logo-image {
    max-height: 80px;
    width: auto;
    height: auto;
    flex-shrink: 0;
}

.site-logo {
    background: var(--teal);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.1rem;
    line-height: 1.1;
    padding: 12px 16px;
    flex-shrink: 0;
}

.site-tagline {
    color: var(--white);
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
    margin: 0;
}

.tagline-short { display: none; }

.nav-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}

.main-navigation ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.main-navigation a {
    color: var(--white);
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}

/* Add the CSS class "menu-boxed" to any menu item (Appearance > Menus)
   to give it this outlined-button look, same as Donate in the design. */
.main-navigation .menu-boxed a {
    border: 2px solid var(--white);
    padding: 8px 16px;
    transition: background 0.15s ease, color 0.15s ease;
}
.main-navigation .menu-boxed a:hover {
    background: var(--white);
    color: var(--teal-dark);
}

/* Dropdown submenus — WordPress automatically nests child menu items
   (Appearance > Menus > drag an item slightly right to make it a
   child) inside a <ul class="sub-menu">. On desktop these open as a
   hover dropdown; on mobile (inside the open nav-open panel) they
   just show as a plain indented list, since hover doesn't work well
   on touch. */
.main-navigation ul li { position: relative; }

.main-navigation .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.main-navigation .menu-item-has-children > a::after {
    content: '';
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-top: 2px;
}
/* Mega-menu column headings show their links right there in the
   column, not behind a hover-triggered dropdown, so the caret
   (which implies "hidden content below") doesn't apply to them. */
.main-navigation .sub-menu:has(> li > .sub-menu) > li.menu-item-has-children > a::after {
    display: none;
}

.main-navigation .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: var(--teal-dark);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    z-index: 30;
}
.main-navigation .sub-menu li { width: 100%; }
.main-navigation .sub-menu a {
    display: block;
    padding: 10px 20px;
    text-transform: none;
    font-size: 0.85rem;
    white-space: nowrap;
}
.main-navigation .sub-menu a:hover { background: rgba(255,255,255,0.1); }

/* Fade/slide in on open only — the close is instant (display:none
   applies immediately), which matters: an always-rendered-but-invisible
   dropdown still occupies its full layout width even at opacity:0,
   and a wide mega-menu positioned off to the right can silently
   stretch the whole page's scrollable width. Animating only the
   entrance avoids that entirely, since display:none fully removes
   it from layout the instant it closes. */
@keyframes tt-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Hover/keyboard-focus dropdown trigger — desktop only. On mobile,
   tapping a submenu-toggle button focuses it, which would otherwise
   trigger :focus-within on every ancestor <li> too and fight with
   the tap-to-expand accordion state below (one setting display:block,
   the other display:flex, for the same element). */
@media (min-width: 701px) {
    .main-navigation li:hover > .sub-menu,
    .main-navigation li:focus-within > .sub-menu {
        display: block;
        animation: tt-dropdown-in 0.18s ease forwards;
    }
}

/* The toggle button itself only exists for mobile's tap-to-expand
   accordion — hidden everywhere by default (including desktop, where
   it would otherwise render as a plain unstyled browser button), and
   only shown inside the mobile media query below when the mobile menu
   is actually open. */
.submenu-toggle { display: none; }

/* Mega-menu: nest a second level under a top-level item (column
   headers), then nest links under EACH of those (the column's own
   links) — Appearance > Menus, drag-indent twice. Detected purely by
   structure via :has(), no extra setup needed beyond the nesting. */
.main-navigation .sub-menu:has(> li > .sub-menu) {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 40px;
    width: max-content;
    max-width: 90vw;
    padding: 30px 40px;
}
/* Applied by JS (assets/js/mega-menu-position.js) only when the
   menu would actually overflow the right edge of the screen — so a
   mega-menu built under a left-positioned item isn't force-flipped
   and pushed off the left edge instead. */
.main-navigation .sub-menu.mega-menu-flip {
    left: auto;
    right: 0;
}
/* padding-left and background-image are added dynamically by PHP
   (inc/mega-menu.php) depending on whether a dropdown image is set,
   since the reserved space only makes sense when there's an image. */
/* Same desktop-only reasoning as above, for the mega-menu variant —
   display:flex here instead of the plain dropdown's display:block. */
@media (min-width: 701px) {
    .main-navigation li:hover > .sub-menu:has(> li > .sub-menu),
    .main-navigation li:focus-within > .sub-menu:has(> li > .sub-menu) {
        display: flex;
        animation: tt-dropdown-in 0.18s ease forwards;
    }
}

.main-navigation .sub-menu:has(> li > .sub-menu) > li {
    width: auto;
    min-width: 180px;
}
.main-navigation .sub-menu:has(> li > .sub-menu) > li > a {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    margin-bottom: 12px;
}

/* The column's own link list — always visible once the mega-menu is
   open, not dependent on hovering the column header individually.
   Desktop only: on mobile this would otherwise permanently override
   the tap-to-collapse toggle below, since !important always wins
   regardless of specificity. */
@media (min-width: 701px) {
    .main-navigation .sub-menu:has(> li > .sub-menu) .sub-menu {
        display: block !important;
        animation: none !important;
        position: static;
        min-width: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }
}
.main-navigation .sub-menu:has(> li > .sub-menu) .sub-menu a {
    padding: 6px 0;
    font-size: 0.85rem;
}

.menu-toggle { display: none; }

.site-header-solid {
    background: var(--teal-dark);
}
.site-header-solid .site-tagline { opacity: 0.9; }

/* -------------------------------------------------- */
/* 3. HERO                                             */
/* -------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;
    background: #222; /* shows briefly before the first slide image loads */
    padding-top: 0;
    color: var(--white);
    min-height: 640px;
    display: flex;
    flex-direction: column;
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    object-fit: cover; /* only affects <video> slides; harmless on <div> slides */
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}

.hero-slide.is-active { opacity: 1; }

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(10,10,10,0.35), rgba(10,10,10,0.55));
}

.hero > .site-header {
    position: relative;
    z-index: 6; /* higher than .hero-inner, so the mobile menu dropdown (nested inside site-header) always paints above the hero headline text */
}

.hero > .hero-inner {
    position: relative;
    z-index: 2;
}

.hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    padding: 220px 40px 80px;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 700;
    max-width: 600px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 60px; }

/* -------------------------------------------------- */
/* 4. EVENTS                                           */
/* -------------------------------------------------- */

.events-section {
    max-width: var(--max-width);
    margin: -40px auto 0;
    padding: 0 12px 18px;
    position: relative;
    z-index: 5;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.event-card {
    background: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.event-date-badge {
    position: absolute;
    top: 0; left: 20px;
    z-index: 2;
    background: var(--red);
    color: var(--white);
    text-align: center;
    padding: 6px 12px 8px;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.15;
    max-width: 130px;
    white-space: nowrap;
}
.event-date-badge .day-month { font-size: 0.85rem; }
.event-date-badge .day-num { font-size: 1.1rem; }

.event-image-wrap {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1056/479;
    overflow: hidden;
    background: var(--card-bg); /* letterbox fill for any image that doesn't exactly match this ratio */
}
.event-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.event-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--teal-dark);
    color: rgba(255,255,255,0.5);
}

.event-info {
    background: var(--gold);
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.event-info .venue {
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-info h3 { font-size: 1.75rem; margin: 4px 0; }
.event-info h3 a { color: inherit; text-decoration: none; }
.event-info h3 a:hover { text-decoration: underline; }

.event-info p { margin: 0 0 18px; font-size: 0.9rem; }

.event-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 12px;
}

.view-all-wrap { text-align: center; margin-top: 34px; }
.view-all-wrap .btn { padding: 12px 30px; }

/* -------------------------------------------------- */
/* 5. ABOUT / PARENT ORGANISATION                       */
/* -------------------------------------------------- */

.about-section {
    background: var(--grey-bg);
    padding: 18px 0;
}

.content-panel {
    background: var(--white);
    border-radius: 16px;
    padding: 50px;
    margin: 18px auto 40px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* WordPress's own image alignment classes (set via the editor's
   image alignment option) — without these, our global "img {
   display: block }" rule silently overrides them and every image
   just renders full-width regardless of what alignment was chosen. */
/* FAQ-style accordions — native <details>/<summary>, so any page's
   content can use this with zero extra setup: just wrap each Q&A in
   <details><summary>Question</summary><p>Answer</p></details>. */
.content-panel details {
    border: 1px solid var(--grey-bg);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
}
.content-panel summary {
    padding: 16px 46px 16px 20px;
    font-weight: bold;
    cursor: pointer;
    list-style: none;
    position: relative;
}
.content-panel summary::-webkit-details-marker { display: none; }
.content-panel summary::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.3rem;
    font-weight: bold;
    color: var(--teal);
    transition: transform 0.15s ease;
}
.content-panel details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.content-panel summary:hover { background: var(--grey-bg); }
.content-panel details > *:not(summary) {
    padding: 0 20px 18px;
    margin: 0;
}
.content-panel details p { margin: 0 0 12px; }
.content-panel details p:last-child { margin-bottom: 0; }

.content-panel img.alignleft {
    float: left;
    display: inline;
    margin: 6px 24px 16px 0;
    max-width: 45%;
    height: auto;
}
.content-panel img.alignright {
    float: right;
    display: inline;
    margin: 6px 0 16px 24px;
    max-width: 45%;
    height: auto;
}
.content-panel img.aligncenter {
    display: block;
    margin: 0 auto 16px;
    height: auto;
}
.content-panel img.alignnone {
    margin: 0 0 16px;
    height: auto;
}

/* Image captions — WordPress outputs these two different ways
   depending on which editor added the image, so both need covering:
   the classic editor's .wp-caption wrapper, and the block editor's
   <figure class="wp-block-image">. */
.content-panel .wp-caption {
    /* WordPress writes an inline style="width: XXXpx" on this wrapper
       (a decades-old convention), which otherwise overrides our
       responsive sizing entirely and can force the image to a fixed
       pixel width regardless of its actual container. !important
       forces it back to sizing naturally from its content instead.
       display:table makes the box hug the image's actual rendered
       width rather than stretching to fill the whole column (which
       plain width:auto would do on a block-level element). */
    display: table;
    width: auto !important;
    max-width: 100%;
    margin: 0 0 16px;
}
.content-panel .wp-caption img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}
.content-panel .wp-caption.alignleft { float: left; margin: 6px 24px 16px 0; max-width: 45%; }
.content-panel .wp-caption.alignright { float: right; margin: 6px 0 16px 24px; max-width: 45%; }
.content-panel .wp-caption.aligncenter { margin: 0 auto 16px; }
.content-panel .wp-caption-text,
.content-panel figure.wp-block-image figcaption {
    font-size: 0.85rem;
    font-style: italic;
    color: #55606a;
    text-align: center;
    line-height: 1.4;
    margin: 0;
    padding: 12px 18px;
    background: var(--grey-bg);
    border-radius: 0 0 10px 10px;
    border-top: 3px solid var(--teal);
}
.content-panel figure.wp-block-image {
    margin: 0 0 16px;
}
.content-panel figure.wp-block-image img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}

/* Links typed into page/post content should look like normal,
   clickable links — not inherit the plain body text colour like
   the site's custom-styled nav/button links do. Buttons (.btn) and
   links inside headings are excluded, so they keep their own
   styling untouched. */
.content-panel a:not(.btn):not(.wp-block-button__link):not(.hub-link-card):not(.news-card-link) {
    color: var(--teal);
    text-decoration: underline;
}
.content-panel a:not(.btn):not(.wp-block-button__link):not(.hub-link-card):not(.news-card-link):hover {
    color: #003d4d;
    text-decoration: underline;
}
.content-panel h1 a, .content-panel h2 a, .content-panel h3 a,
.content-panel h4 a, .content-panel h5 a, .content-panel h6 a {
    color: inherit !important;
    text-decoration: none !important;
}
.content-panel h1 a:hover, .content-panel h2 a:hover, .content-panel h3 a:hover,
.content-panel h4 a:hover, .content-panel h5 a:hover, .content-panel h6 a:hover {
    color: inherit !important;
    text-decoration: none !important;
}

.page-featured-image-panel {
    position: relative;
    width: 100%;
    aspect-ratio: 21/8;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 18px;
}
.page-featured-image-panel img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* -------------------------------------------------- */
/* Hub Page template                                   */
/* -------------------------------------------------- */

.hub-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    text-align: left;
}
.hub-link-card {
    position: relative;
    display: block;
    aspect-ratio: 4/2.5;
    border-radius: 12px;
    overflow: hidden;
    background: var(--teal);
    color: var(--ink) !important;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hub-link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    color: var(--ink) !important;
}
.hub-link-card-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hub-link-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0) 100%);
}
.hub-link-card-label {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 1;
    padding: 16px;
    color: var(--white) !important;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    text-align: center;
}

/* -------------------------------------------------- */
/* Staff Page template (Executive Committee / Staff /  */
/* Volunteers) — a simple photo-card grid per category */
/* -------------------------------------------------- */

.staff-group {
    margin-top: 44px;
}
.staff-group:first-of-type {
    margin-top: 30px;
}
.staff-group-intro {
    margin: 10px 0 0;
    line-height: 1.6;
}
.staff-group-intro p { margin: 0; }
.staff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 30px 24px;
    margin-top: 24px;
}
.staff-card {
    text-align: center;
}
.staff-photo {
    width: 120px;
    height: 120px;
    margin: 0 auto 14px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--grey-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.staff-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.staff-photo-placeholder {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: bold;
    color: var(--white);
    background: var(--teal);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.staff-name {
    font-size: 1.1rem;
    margin: 0 0 2px;
}
.staff-role {
    font-size: 0.85rem;
    color: #55606a;
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 560px) {
    .staff-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
    .staff-photo { width: 96px; height: 96px; }
}

/* -------------------------------------------------- */
/* Share & Print bar (bottom of every Page and post)   */
/* -------------------------------------------------- */

.share-print-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--grey-bg);
}
.share-print-label {
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink);
}
.share-print-icons {
    display: flex;
    gap: 8px;
}
.share-print-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--grey-bg);
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.share-print-icon:hover {
    background: var(--teal);
    color: var(--white);
    transform: translateY(-2px);
}
.share-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: none;
    border: 2px solid var(--teal);
    color: var(--teal);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.share-print-btn:hover {
    background: var(--teal);
    color: var(--white);
}
/* Share buttons make no sense on a physical printout — hide the
   whole bar when the Print button's own result actually prints.
   Bundled here with a fuller print stylesheet: without one, many
   browsers render the print preview at a narrower default width
   than the actual screen, which can accidentally trigger the same
   max-width breakpoints built for phones — showing the mobile
   hamburger menu and stacked layout on paper. Everything below
   forces a clean, full-width, navigation-free printout regardless
   of what width the browser's print engine happens to compute. */
@media print {
    .share-print-bar,
    #tt-a11y-toolbar,
    .site-header,
    .site-header-solid,
    .hero,
    .hero-overlay,
    .page-sidebar,
    .sidebar-toggle-btn,
    .site-footer {
        display: none !important;
    }
    .boxed-content {
        width: 100% !important;
        max-width: none !important;
    }
    .page-with-sidebar {
        display: block !important;
    }
    .content-column,
    .page-with-sidebar > .content-panel {
        width: 100% !important;
    }
    .content-panel {
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        color: #000 !important;
    }
    /* The site's own heading/body sizes are tuned for a wide desktop
       or mobile screen (h1 is 3rem = 48px), which reads as enormous
       on a narrow printed page — point sizes are the print-native
       unit, so these override the screen sizing entirely. */
    h1 { font-size: 22pt !important; line-height: 1.25 !important; margin: 0 0 10pt !important; }
    h2 { font-size: 16pt !important; line-height: 1.3 !important; margin: 14pt 0 6pt !important; }
    h3 { font-size: 13pt !important; margin: 10pt 0 4pt !important; }
    body, p, li, .staff-role, .staff-group-intro {
        font-size: 11pt !important;
        line-height: 1.4 !important;
    }
    .page-featured-image-panel {
        border-radius: 0 !important;
        margin-bottom: 12pt !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    a {
        color: #000 !important;
        text-decoration: underline !important;
    }
}
@media (max-width: 560px) {
    .share-print-bar { gap: 10px; }
    .share-print-label { width: 100%; }
    .share-print-btn { margin-left: 0; }
}

/* -------------------------------------------------- */
/* Sidebar (Pages, single posts, News listing)         */
/* -------------------------------------------------- */

.page-with-sidebar {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin: 18px auto 40px;
    position: relative;
}
.page-with-sidebar .content-column,
.page-with-sidebar > .content-panel {
    flex: 1 1 0%;
    min-width: 0;
}
.page-with-sidebar .content-panel { margin: 0; }

/* Collapsible sidebar (desktop only) — a real width slide, not a
   grid-track jump, so the sidebar visibly slides away and the
   content column flows to fill the space in one continuous motion. */
.sidebar-toggle-btn { display: none; }

@media (min-width: 901px) {
    .page-with-sidebar {
        transition: gap 0.35s ease;
    }
    .page-with-sidebar.sidebar-collapsed {
        gap: 0;
    }
    .page-sidebar {
        flex: 0 0 33.333%;
        width: 33.333%;
        overflow: hidden;
        transition: flex-basis 0.35s ease, width 0.35s ease, padding 0.35s ease;
    }
    .page-with-sidebar.sidebar-collapsed .page-sidebar {
        flex-basis: 44px;
        width: 44px;
        padding: 20px 6px;
    }
    .sidebar-inner {
        opacity: 1;
        max-height: 6000px;
        overflow: hidden;
        transition: opacity 0.2s ease 0.1s, max-height 0.35s ease;
    }
    .page-with-sidebar.sidebar-collapsed .sidebar-inner {
        opacity: 0;
        max-height: 0;
        transition: opacity 0.15s ease, max-height 0.35s ease;
    }

    .sidebar-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0 0 20px auto;
        background: none;
        border: 1px solid var(--grey-bg);
        border-radius: 6px;
        color: var(--teal);
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        transition: transform 0.35s ease, margin 0.35s ease;
        flex-shrink: 0;
    }
    .sidebar-toggle-btn:hover { background: var(--grey-bg); }
    .page-with-sidebar.sidebar-collapsed .sidebar-toggle-btn {
        margin: 0 auto;
        transform: rotate(180deg);
    }
}

.page-sidebar {
    background: var(--white);
    border-radius: 16px;
    padding: 30px;
}

.sidebar-events h3 {
    font-size: 1.2rem;
    margin-bottom: 18px;
}

.sidebar-event {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--grey-bg);
}
.sidebar-event:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.sidebar-event-thumb {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--card-bg);
}
.sidebar-event-thumb-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-event-info { flex: 1; min-width: 0; }
.sidebar-event-date {
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 2px;
}
.sidebar-event-info h4 {
    font-size: 0.95rem;
    text-transform: none;
    margin: 0 0 4px;
    line-height: 1.25;
}
.sidebar-event-info h4 a { color: inherit; text-decoration: none; }
.sidebar-event-info h4 a:hover { text-decoration: underline; }
.sidebar-event-link {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--teal);
    text-transform: uppercase;
    transition: color 0.15s ease;
}
.sidebar-event-link:hover {
    color: #003d4d;
    text-decoration: underline;
}

.sidebar-events-empty { font-size: 0.9rem; color: var(--ink); opacity: 0.7; }

.sidebar-see-all {
    margin-top: 18px;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.sidebar-shows {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--grey-bg);
}
.sidebar-news {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--grey-bg);
}
.sidebar-shows h3 {
    font-size: 1.2rem;
    margin-bottom: 18px;
}
.sidebar-shows-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.sidebar-widgets {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--grey-bg);
}
.sidebar-widget {
    margin-bottom: 26px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--grey-bg);
}
.sidebar-widget:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.sidebar-widget h3 { font-size: 1.1rem; margin-bottom: 12px; }
.sidebar-widget ul { list-style: none; margin: 0; padding: 0; }
.sidebar-widget li { margin-bottom: 8px; font-size: 0.9rem; }
.sidebar-widget a { color: var(--ink); }
.sidebar-widget a:not(.btn):hover { color: var(--teal); }

/* Two logos side by side — pair with the matching HTML snippet
   (ask Claude to hand it to you again if you need it later). */
.sidebar-logos {
    display: flex;
    align-items: center;
    gap: 20px;
}
.sidebar-logos a {
    flex: 1;
    display: block;
}
.sidebar-logos img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    transition: opacity 0.15s ease;
}
.sidebar-logos a:hover img { opacity: 0.75; }

.about-panel {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 520px;
    background-size: cover;
    background-color: var(--teal-dark); /* shows if no background photo has been set yet */
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.about-panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.05) 100%);
}

.about-panel-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 50px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
}

.about-text { color: var(--white); max-width: 620px; }
.about-text h2 { color: var(--white); }
.about-text h3 {
    color: var(--white);
    opacity: 0.9;
    font-size: 0.95rem;
    text-transform: none;
    font-weight: bold;
    margin-bottom: 20px;
}
.about-text p { text-shadow: 0 1px 3px rgba(0,0,0,0.4); }

.about-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* -------------------------------------------------- */
/* 6. UPCOMING SHOWS                                   */
/* -------------------------------------------------- */

.shows-section { padding: 18px 0; }

.shows-panel {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 50px;
}

.shows-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 30px;
}

.shows-grid img { box-shadow: 0 4px 14px rgba(0,0,0,0.15); }

.poster-link {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    aspect-ratio: 340/480;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.poster-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: none;
}

/* -------------------------------------------------- */
/* 7. VOLUNTEER BANNER                                 */
/* -------------------------------------------------- */

.volunteer-section { background: var(--grey-bg); padding: 18px 0; }

.volunteer-donate-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0;
}

.volunteer-panel,
.donation-panel {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 420px;
    min-width: 0;
    display: flex;
    align-items: flex-end;
}

.volunteer-panel {
    background-size: cover;
    background-position: center;
    background-color: var(--teal-dark); /* shows if no background photo has been set yet */
}

.donation-panel {
    background: #e4023b;
}

.volunteer-panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.05) 100%);
}

.volunteer-panel-inner,
.donation-panel-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 18px;
    height: 100%;
}

.volunteer-text,
.donation-text { color: var(--white); }
.volunteer-text h2,
.donation-text h2 { color: var(--white); font-size: 1.8rem; }
.volunteer-text p,
.donation-text p { margin: 6px 0 0; }
.volunteer-text p { text-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.donation-text p { font-size: 0.95rem; line-height: 1.5; }

.btn-volunteer {
    background: #e4023b;
    color: var(--white);
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-volunteer:hover {
    background: #a80128;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.btn-donate-white {
    background: var(--white);
    color: #e4023b;
    white-space: nowrap;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-donate-white:hover {
    background: #f2f2f2;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

/* -------------------------------------------------- */
/* 8. LATEST NEWS                                      */
/* -------------------------------------------------- */

.page-title-block {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 60px 12px 0;
    text-align: center;
}
.page-title-block h1 {
    font-size: 3rem;
    margin-bottom: 16px;
}
.page-title-desc {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink);
}
.page-title-desc p { margin: 0 0 12px; }
.page-title-desc p:last-child { margin-bottom: 0; }

.news-section { background: var(--grey-bg); padding: 18px 0; }

.news-panel {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 50px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
    margin-top: 30px;
}
.news-grid > .news-card { min-width: 0; }

.page-with-sidebar .news-grid {
    grid-template-columns: repeat(2, 1fr);
}

.news-image-wrap {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4/2.5;
    overflow: hidden;
    margin-bottom: 14px;
}
.news-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-card .news-date { font-size: 0.8rem; margin-bottom: 6px; display: block; }

.news-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}
.news-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 50px;
    background: var(--white);
    color: var(--ink);
    font-weight: bold;
    font-size: 0.9rem;
}
.news-pagination .page-numbers.current { background: var(--teal); color: var(--white); }
.news-pagination .page-numbers.dots { background: transparent; }
.news-card h3 { font-size: 1.15rem; text-transform: none; font-weight: bold; margin: 0 0 8px; }

.news-category {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--teal);
    margin-bottom: 4px;
}

.news-excerpt {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink);
    margin: 0 0 14px;
}

.news-card .arrow-link { color: var(--teal); }

/* -------------------------------------------------- */
/* 9. FOOTER                                           */
/* -------------------------------------------------- */

.site-footer { background: var(--grey-bg); color: var(--white); padding: 18px 0 0; }

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    background: var(--teal-dark);
    border-radius: 16px;
    padding: 50px;
}

.footer-grid h3, .footer-grid h4 { font-size: 1.2rem; margin-bottom: 16px; }
.footer-grid a.footer-link { display: block; margin-top: 8px; font-weight: bold; }
.footer-grid p { margin: 0 0 10px; font-size: 0.92rem; }

/* Redesigned "About" column layout — pair with the matching HTML
   snippet in the README (or ask Claude to hand it to you again). */
.footer-about-logo {
    max-width: 130px;
    height: auto;
    margin-bottom: 24px;
}
.footer-about-lead {
    font-size: 0.95rem !important;
    line-height: 1.6;
    margin-bottom: 6px !important;
}
.footer-about-charity {
    font-size: 0.8rem !important;
    opacity: 0.75;
    margin-bottom: 22px !important;
}
.footer-about-address {
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.7;
    padding-top: 18px;
    margin-bottom: 22px;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.footer-about-links {
    list-style: none;
    margin: 0 0 26px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(255,255,255,0.15);
}
.footer-about-links li { margin-bottom: 10px; }
.footer-about-links li:last-child { margin-bottom: 0; }
.footer-about-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    text-decoration: none;
}
.footer-about-links a::before {
    content: '›';
    font-size: 1.1em;
    line-height: 1;
}
.footer-about-links a:hover { text-decoration: underline; }
.footer-about-org {
    max-width: 90px;
    height: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

/* Redesigned "Box Office" column layout — pair with the matching
   HTML snippet in the README (or ask Claude to hand it to you again). */
.footer-boxoffice-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-boxoffice-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.footer-boxoffice-label {
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.85);
    margin-bottom: 8px;
}
.footer-boxoffice-section p {
    font-size: 0.92rem !important;
    line-height: 1.6;
    margin: 0 0 6px;
}
.footer-boxoffice-section p:last-child { margin-bottom: 0; }
.footer-boxoffice-note {
    font-size: 0.85rem !important;
    opacity: 0.75;
}
.footer-boxoffice-phone {
    font-size: 1.15rem !important;
    font-weight: bold;
}
.footer-boxoffice-phone a { text-decoration: none; }
.footer-boxoffice-phone a:hover { text-decoration: underline; }
.footer-boxoffice-phone span {
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    opacity: 0.7;
    margin-top: 2px;
}

/* Fallback tidy-up for any other raw HTML pasted into this column
   (images/links not using the classes above). */
.footer-about img:not([class*="footer-about-"]) {
    display: block;
    float: none !important;
    max-width: 150px;
    height: auto !important;
    margin: 0 0 24px !important;
}
.footer-about p:not([class*="footer-about-"]) {
    font-size: 0.92rem !important;
    line-height: 1.6;
    margin: 0 0 14px;
}
.footer-about em { font-style: normal; }
.footer-about a { font-weight: bold; text-decoration: none; }
.footer-about a:hover { text-decoration: underline; }

.footer-logo-image {
    max-height: 70px;
    width: auto;
    margin-bottom: 16px;
}

.footer-org-logo { max-width: 90px; margin-top: 16px; }

/* Reset any spacing WordPress may have inserted around the widget's
   raw HTML (e.g. auto-paragraphs, <br>s), then reapply exactly the
   spacing we want between each label and its input below. */
.footer-newsletter form,
.footer-newsletter form * {
    margin: 0;
}
.footer-newsletter form br {
    display: none;
}

.newsletter-form label,
.footer-newsletter label {
    display: block;
    font-weight: bold;
    margin: 14px 0 6px !important;
    font-size: 0.9rem;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"],
.footer-newsletter input[type="text"],
.footer-newsletter input[type="email"] {
    display: block;
    width: 100%;
    padding: 14px 12px;
    border: none;
    background: #3fa9c9;
    color: #002028;
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
}
.newsletter-form input::placeholder,
.footer-newsletter input::placeholder { color: #002028; opacity: 1; }

.newsletter-form button,
.footer-newsletter button,
.footer-newsletter input[type="submit"] {
    display: inline-block;
    margin-top: 16px !important;
    background: var(--white);
    color: var(--ink);
    border: none;
    padding: 8px 24px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.newsletter-form .small-print {
    font-size: 0.78rem;
    margin-top: 16px;
    opacity: 0.85;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top: 10px;
    padding: 18px 0;
    background: var(--ink);
}
.footer-bottom-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.8);
    text-align: center;
}

.footer-bottom-inner ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 0; padding: 0; }
.footer-bottom-inner a { text-transform: uppercase; }
.footer-bottom-inner p { margin: 0; }

.social-icons {
    display: flex;
    gap: 14px;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: rgba(255,255,255,0.8);
    transition: color 0.15s ease;
}
.social-icon:hover { color: var(--white); }
.social-icon svg { width: 100%; height: 100%; }

.social-icon--facebook:hover { color: #1877F2; }
.social-icon--instagram:hover { color: #E4405F; }
.social-icon--twitter:hover { color: #1DA1F2; }
.social-icon--youtube:hover { color: #FF0000; }
.social-icon--tiktok:hover { color: #FE2C55; }
.social-icon--linkedin:hover { color: #0A66C2; }
.social-icon--bluesky:hover { color: #1185FE; }

/* -------------------------------------------------- */
/* 10. RESPONSIVE                                      */
/* -------------------------------------------------- */

@media (max-width: 900px) {
    .events-grid, .shows-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
    .hub-links-grid { grid-template-columns: repeat(2, 1fr); }
    .about-panel { min-height: 420px; }
    .about-panel-inner { padding: 32px; flex-direction: column; align-items: flex-start; }
    .volunteer-donate-grid { grid-template-columns: 1fr; }
    .volunteer-panel, .donation-panel { min-height: 360px; }
    .news-grid { grid-template-columns: 1fr; }
    .page-with-sidebar { flex-direction: column; }
    .page-with-sidebar .content-column,
    .page-with-sidebar > .content-panel { width: 100%; }
    .page-sidebar { width: 100%; }
    .page-with-sidebar .news-grid { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.2rem; }
    .hero-inner { padding-top: 160px; }
    h1 { font-size: 2.4rem; }
    h2 { font-size: 2rem; }
    .page-title-block { padding: 40px 12px 0; }
    .page-title-block h1 { font-size: 2.2rem; }
}

@media (max-width: 1100px) {
    .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--teal-dark);
        padding: 20px;
        z-index: 20;
        box-shadow: 0 8px 16px rgba(0,0,0,0.25);
    }
    .main-navigation.nav-open {
        display: block;
        animation: tt-navpanel-in 0.2s ease forwards;
    }
    @keyframes tt-navpanel-in {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .main-navigation.nav-open ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .main-navigation.nav-open li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
    }
    .main-navigation.nav-open a {
        display: block;
        flex: 1;
        padding: 12px 4px;
    }
    .main-navigation.nav-open .menu-boxed {
        margin-top: 8px;
    }
    .main-navigation.nav-open .menu-boxed a {
        display: inline-block;
        flex: 0 0 auto;
    }

    /* Submenus start collapsed and expand only when their own toggle
       button is tapped — independently at every level, so opening a
       mega-menu's top item doesn't also force every column open. */
    .submenu-toggle {
        background: none;
        border: none;
        color: var(--white);
        padding: 8px 10px;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .submenu-toggle::after {
        content: '';
        display: block;
        width: 0; height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid currentColor;
        transition: transform 0.15s ease;
    }
    .submenu-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
    .main-navigation.nav-open .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-navigation.nav-open .sub-menu {
        display: none;
        flex-basis: 100%;
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 16px;
    }
    .main-navigation.nav-open li.submenu-expanded > .sub-menu {
        display: block;
    }
    .main-navigation.nav-open .sub-menu a {
        padding: 10px 4px;
        font-size: 0.8rem;
        opacity: 0.85;
    }
    .main-navigation.nav-open .sub-menu:has(> li > .sub-menu) {
        background-image: none !important;
        padding: 0 0 0 16px !important;
        gap: 0 !important;
        min-width: 0 !important;
        flex-wrap: wrap;
    }
    .main-navigation.nav-open .sub-menu:has(> li > .sub-menu) > li > a {
        border-bottom: none;
        padding-bottom: 4px;
    }
    .main-navigation.nav-open .menu-item-has-children > a::after {
        display: none;
    }
    .menu-toggle {
        display: block;
        background: none;
        border: 2px solid var(--white);
        color: var(--white);
        padding: 8px 14px;
        font-weight: bold;
        font-size: 0.8rem;
        flex-shrink: 0;
        cursor: pointer;
    }
}

@media (max-width: 700px) {
    .hub-links-grid { grid-template-columns: 1fr; }

    .events-grid, .footer-grid { grid-template-columns: 1fr; }
    .shows-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .boxed-content { width: 100%; max-width: none; margin: 0; }
    .shows-panel.container, .news-panel.container { padding: 30px; }
    .content-panel.container { padding: 30px; }
    .content-panel { padding: 30px; }
    .page-featured-image-panel { aspect-ratio: 4/3; }
    .page-sidebar { padding: 24px; }
    .page-with-sidebar { margin: 12px auto 30px; }
    .footer-grid.container { padding: 30px; grid-template-columns: 1fr; gap: 30px; }
    .volunteer-panel, .donation-panel { min-height: 300px; }
    .volunteer-panel-inner, .donation-panel-inner { padding: 30px; }
    .events-section { margin-top: -20px; }
    .site-header { padding: 14px 16px; }
    .site-branding { gap: 10px; min-width: 0; }
    .custom-logo-link img { max-height: 56px; }
    .site-logo-image { max-height: 56px; }
    .site-logo { font-size: 0.85rem; padding: 8px 10px; }
    .tagline-full { display: none; }
    .tagline-short { display: inline; }
    .site-tagline { max-width: 90px; font-size: 0.72rem; white-space: normal; }
    .container { padding: 0 12px; }
    .hero-inner { padding: 140px 20px 60px; }
}