/* ---------------------------------------------------------------------------
   Design tokens — Edmond J. Safra Synagogue

   Every value below was extracted from the live WordPress site rather than
   matched by eye:

     • colours and fonts  — the Elementor global kit (post 10,
       `_elementor_page_settings`), decoded to resources/design/elementor-kit.json
     • header and links   — the OceanWP customizer settings
       (`theme_mods_oceanwp-child-theme-master`), decoded alongside it
     • calendar palette   — the StyledCalendar exports in resources/calendar/

   So the new site inherits the existing design system exactly. Change a value
   here and it changes everywhere.
--------------------------------------------------------------------------- */

/* Futura Std is a licensed commercial typeface, self-hosted on the current
   site from wp-content/uploads. The files are carried over unchanged; the
   webfont licence needs to cover the new domain too. Fallbacks are ordered so
   an unlicensed deployment still degrades to a similar geometric sans rather
   than to Times. */
@font-face {
    font-family: "FuturaStd";
    src: url("/fonts/FuturaStd-Book.woff") format("woff"),
         url("/fonts/FuturaStd-Book.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FuturaStd";
    src: url("/fonts/FuturaStd-Medium.woff") format("woff"),
         url("/fonts/FuturaStd-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "FuturaStd";
    src: url("/fonts/FuturaStd-Heavy.woff") format("woff"),
         url("/fonts/FuturaStd-Heavy.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ---- brand colours (Elementor global kit) ---- */
    --brand-primary: #b28448;   /* headings, links, buttons */
    --brand-accent: #b98747;    /* menu hover, secondary surfaces */
    --brand-secondary: #4bb5d8; /* used sparingly */
    /* The kit's own value is #000000. Body copy is a warm brown instead, which
       sits better against the sand and tan surfaces — a deliberate departure,
       not a mis-extraction. 11.4:1 on white, so comfortably past AAA. */
    --brand-text: #4d351c;

    /* ---- neutrals, drawn from the calendar palette so the two agree ---- */
    --surface: #ffffff;
    --surface-warm: #fdfaf5;
    --surface-sand: #eeebe2;    /* calendar day headers */
    --surface-tan: #cfb08b;     /* small-calendar headers, photo bands */
    --line: #e4d9c9;
    --ink: #2b2119;
    --ink-muted: #7a6a5c;

    /* ---- state ---- */
    --ok: #2f7d4f;
    --bad: #c42939;

    /* ---- type ---- */
    --font-heading: "FuturaStd", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
    --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

    --text-xs: 0.78rem;
    --text-sm: 0.88rem;
    --text-base: 1rem;
    --text-lg: 1.15rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.75rem;

    /* ---- spacing and layout ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --container: 1200px;
    --radius: 4px;
    --radius-lg: 8px;

    /* ---- header (OceanWP customizer) ---- */
    --logo-width: 324px;
    --logo-width-tablet: 202px;
    --logo-width-mobile: 196px;
    --header-pad-y: 20px;
    --header-pad-x: 60px;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */

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

body {
    margin: 0;
    background: var(--surface);
    color: var(--brand-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.2;
    color: var(--brand-primary);
    letter-spacing: 0.02em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

/* The site sets headings in Futura at a wide tracking, in caps for section
   headings — matching the current homepage bands. */
.h-section {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

p { margin: 0 0 var(--space-4); }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand-secondary);
    outline-offset: 2px;
}

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

/* ---------------------------------------------------------------------------
   Layout
--------------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.band { padding: var(--space-16) 0; }
.band--warm { background: var(--surface-warm); }
.band--sand { background: var(--surface-sand); }
.band--tan  { background: var(--surface-tan); color: #fff; }
.band--tan h1, .band--tan h2, .band--tan .h-section { color: #fff; }

/* ---------------------------------------------------------------------------
   Site header — transparent and full width, as the current site has it
--------------------------------------------------------------------------- */

/* A solid bar rather than the transparent overlay the WordPress site used: with
   two rows of navigation there is too much in the header to float it over a
   photograph and still read.

   Dark rather than light, for two reasons. The logo is a white PNG — on a light
   bar it simply vanishes, and recolouring someone's mark in CSS is not ours to
   do. And white on the brand tan is a 2.8:1 contrast ratio, which fails WCAG AA
   for text this size; white on this dark brown is about 15:1. It also matches
   the collapsed menu, which was already this colour. */
.site-header {
    position: relative;
    z-index: 50;
    padding: var(--header-pad-y) var(--header-pad-x) 0;
    background: var(--ink);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.site-header__logo img { width: var(--logo-width); max-width: 60vw; }

/* Tight enough that six items and the logo sit on one line at 1200px. They
   wrapped at --space-4, which put Schedule alone on a second row and read as a
   mistake rather than a menu. */
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; justify-content: flex-end; }

.site-nav a {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    padding: var(--space-2);
    border-radius: var(--radius);
    white-space: nowrap;
}

/* A wash rather than the brand tan: white on tan is 2.8:1, and a hover state
   still has to be readable. */
.site-nav a:hover { background: rgba(255, 255, 255, .15); text-decoration: none; }

/* ---- the secondary row ---- */

.site-subnav {
    margin: var(--header-pad-y) calc(var(--header-pad-x) * -1) 0;
    padding: 0 var(--header-pad-x);
    background: var(--surface-sand);
    border-top: 1px solid var(--line);
}

.site-subnav__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1) var(--space-4);
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.site-subnav a {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    color: var(--ink);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    white-space: nowrap;
}

.site-subnav a:hover { color: var(--brand-primary); text-decoration: underline; }

/* The same items are in the collapsed nav for phones; above the breakpoint they
   would be a duplicate of the row above, so they are hidden here. */
.site-nav__secondary { display: none; }

@media (max-width: 1024px) {
    .site-header__logo img { width: var(--logo-width-tablet); }
}

/* ---- mobile navigation ---- */

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 44px;               /* a real touch target, not a 20px icon */
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    transition: transform .2s ease, opacity .2s ease;
}

/* The button becomes a cross while the menu is open. */
body.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
    .nav-toggle { display: flex; }

    .site-header { padding-bottom: var(--header-pad-y); }

    .site-nav {
        position: absolute;
        inset: 100% 0 auto;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-2) var(--space-4) var(--space-4);
        background: var(--ink);
    }

    .site-nav.is-open { display: flex; }

    .site-nav a {
        padding: var(--space-3) var(--space-2);
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        color: #fff;
        font-size: var(--text-base);
    }

    .site-nav a:last-child { border-bottom: 0; }

    /* No room for a second row on a phone, so its items join the one menu.
       `contents` lets them sit in the nav's own column rather than as a block
       inside it, so they line up with everything above. */
    .site-subnav { display: none; }
    .site-nav__secondary { display: contents; }

    /* The selector's own dark-menu styles live with the rest of the language
       selector further down. They used to be here, ahead of the base rule, and
       lost to it on source order — leaving brown text on the brown menu. */
}

@media (max-width: 640px) {
    .site-header { padding: var(--header-pad-y) 10px; }
    .site-header__logo img { width: var(--logo-width-mobile); }
}

/* ---------------------------------------------------------------------------
   Hero
--------------------------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--surface-tan) center/cover no-repeat;
    color: #fff;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
}

.hero__inner { position: relative; z-index: 1; padding: var(--space-16) var(--space-6); }

/* Half height, for pages falling back to the default banner. That image is a
   flat motif, not a photograph of the building, so a tall band of it is just
   empty pattern between the menu and the words. A page with a picture of its
   own keeps the full height. */
.hero--compact { min-height: 210px; }
.hero--compact .hero__inner { padding: var(--space-8) var(--space-6); }

.hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.5rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius);
    background: var(--brand-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: var(--brand-accent); border-color: var(--brand-accent); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--brand-primary); }
.btn--ghost:hover { background: var(--brand-primary); color: #fff; }
.btn--on-dark { background: transparent; border-color: #fff; color: #fff; }
.btn--on-dark:hover { background: #fff; color: var(--brand-primary); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */

.site-footer {
    padding: var(--space-12) 0 var(--space-8);
    background: var(--ink);
    color: #cbbfae;
    font-size: var(--text-sm);
}

.site-footer a { color: #e6d9c6; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: space-between; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---------------------------------------------------------------------------
   Page templates
--------------------------------------------------------------------------- */

.hero__sub {
    margin: var(--space-3) 0 0;
    font-size: var(--text-lg);
    letter-spacing: 0.04em;
}

.page-title { margin-bottom: var(--space-6); }
.lede { font-size: var(--text-lg); color: var(--ink-muted); max-width: 60ch; }
.muted { color: var(--ink-muted); }

.draft-notice {
    margin: 0;
    padding: var(--space-3) var(--space-6);
    background: var(--surface-sand);
    color: var(--ink);
    font-size: var(--text-sm);
    text-align: center;
}

.prose { max-width: 72ch; }
.prose--narrow { max-width: 62ch; }
.prose h2 { margin-top: var(--space-8); }

/* ---- people ---- */

.people {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.person { text-align: center; }

/* Portrait, not a circle. Every photograph on this page is roughly 3:4, so a
   circle cropped it to a centre square and cut the tops off people's heads.
   The frame now matches the source ratio, and object-position favours the
   upper part so the taller images crop from the feet rather than the face. */
.person__photo {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 20%;
    border-radius: var(--radius);
    margin: 0 auto var(--space-4);
    display: block;
}

.person__name { margin: 0 0 var(--space-1); font-size: var(--text-lg); }

.person__role {
    margin: 0 0 var(--space-3);
    color: var(--ink-muted);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.person__bio { font-size: var(--text-sm); text-align: left; }

/* A card whose biography opens in place. The grid is `align-items: start` so an
   open card grows downwards on its own instead of stretching the whole row. */
.people { align-items: start; }

.person--expandable > .person__summary {
    cursor: pointer;
    list-style: none;                 /* the default triangle sits oddly above a photo */
    border-radius: var(--radius);
}

.person--expandable > .person__summary::-webkit-details-marker { display: none; }

.person--expandable > .person__summary:focus-visible {
    outline: 2px solid var(--brand-primary, #b28448);
    outline-offset: 4px;
}

.person__more {
    display: inline-block;
    color: var(--brand-primary, #b28448);
    font-size: var(--text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid currentColor;
}

.person--expandable:hover .person__more { color: var(--brand-accent, #b98747); }

/* Two labels, one shown at a time, so the control always describes what the
   next click does. */
.person--expandable .person__more--close { display: none; }
.person--expandable[open] .person__more--open { display: none; }
.person--expandable[open] .person__more--close { display: inline-block; }

.person--expandable > .person__bio {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--surface-tan, #cfb08b);
}

/* Open, the card takes the whole row and puts the biography beside the
   photograph. Left in its column it would be a 250px-wide ribbon of text —
   readable in theory, unpleasant in practice at four paragraphs. */
.person--expandable[open] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--surface-tan, #cfb08b);
}

.person--expandable[open] > .person__bio {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    font-size: var(--text-base);
}

/* ---- featured person (the rabbis) ---- */

.person-feature {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    margin-top: var(--space-8);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--surface-tan, #cfb08b);
}

.person-feature__photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 20%;
    border-radius: var(--radius);
    display: block;
}

.person-feature__name { margin: 0 0 var(--space-1); }
.person-feature__text .person__role { margin-bottom: var(--space-4); }

/* ---- patrons ---- */

.patrons { margin-top: var(--space-8); }
.patrons__tier { margin-bottom: var(--space-4); }

.patrons__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.patrons__list li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line);
}

/* ---- resources ---- */

.resources { margin-top: var(--space-8); }
.resources__list { margin: 0; padding: 0; list-style: none; }

.resources__list li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line);
}

/* ---- contact ---- */

.contact { display: grid; gap: var(--space-8); }

/* ---------------------------------------------------------------------------
   Homepage
--------------------------------------------------------------------------- */


.hero__actions { margin-top: var(--space-8); display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }

/* A photographic band. The overlay is what makes the white calendar text
   legible over an arbitrary photo. */
.band--photo {
    position: relative;
    background: var(--surface-tan) center/cover no-repeat;
    color: #fff;
}

.band--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(120, 88, 52, 0.82);
}

.band--photo > * { position: relative; z-index: 1; }
.band--photo .h-section { color: #fff; }

.home-calendars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
}

@media (max-width: 900px) {
    .home-calendars { grid-template-columns: 1fr; gap: var(--space-8); }
}

.home-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.home-feature > div:first-child { flex: 1 1 24rem; }

.home-feature__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-8) var(--space-12);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.home-feature__num {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--brand-primary);
}

.home-feature__label {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.home-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.home-link {
    display: block;
    padding: var(--space-8) var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-warm);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    color: var(--brand-primary);
}

.home-link:hover { background: var(--brand-primary); color: #fff; text-decoration: none; }

/* ---- newsletter signup ---- */

.site-footer__subscribe { flex: 1 1 20rem; }
.subscribe__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.subscribe__row { display: flex; gap: var(--space-2); max-width: 24rem; }
.subscribe__row input {
    flex: 1; min-width: 0;
    padding: .55rem .7rem;
    border: 1px solid #4a4038; border-radius: var(--radius);
    background: #3a322a; color: #f2ece4; font: inherit; font-size: .92rem;
}
.subscribe__row input::placeholder { color: #9b8f80; }
.subscribe__done { color: #d8cbb8; }
.subscribe__error { display: block; margin-top: var(--space-2); color: #f0b4ae; font-style: normal; font-size: var(--text-sm); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* ---------------------------------------------------------------------------
   Forms — shared by the Hametz, contact and any future public form
--------------------------------------------------------------------------- */

.hametz-form { max-width: 46rem; margin-top: var(--space-8); }

.hametz-form fieldset {
    margin: 0 0 var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-warm);
}

.hametz-form legend {
    padding: 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.hametz-form label {
    display: block;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.hametz-form input,
.hametz-form select,
.hametz-form textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    font: inherit;
    font-size: .95rem;
    color: var(--ink);
}

.hametz-form input:focus-visible,
.hametz-form select:focus-visible,
.hametz-form textarea:focus-visible {
    outline: 2px solid var(--brand-primary);
    border-color: var(--brand-primary);
}

.hametz-form .field-row { display: flex; gap: var(--space-4); }
.hametz-form .field-row label { flex: 1; }

@media (max-width: 640px) {
    .hametz-form .field-row { flex-direction: column; gap: 0; }
}

.req { color: var(--bad); }

.notice {
    max-width: 40rem;
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-left-width: 3px;
    border-radius: var(--radius-lg);
    background: var(--surface-warm);
}

.notice--ok { border-left-color: var(--ok); }
.notice--bad { border-left-color: var(--bad); }
.notice h2 { margin-top: 0; font-size: var(--text-xl); }
.notice ul { margin: 0; padding-left: 1.1rem; }

/* ---- language selector ---- */

.lang { display: flex; align-items: center; }

/* Lives in the secondary row, which is light — so dark text, unlike the white
   nav above it. Inside the collapsed menu on a phone it is on dark, and the
   mobile rules below flip it back. */
.lang__select {
    padding: .3rem 1.6rem .3rem .6rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* Native dropdown lists do not inherit the control's colours reliably, and the
   control's own background is transparent — so an option would take whatever is
   behind it. Stated outright, for both placements. */
.lang__select option { color: var(--ink); background: #fff; }

/* Inside the collapsed menu the selector sits on the dark bar, so it inverts.
   This must come after the base rule above: both are single-class selectors, so
   whichever is written last wins, and when these lived higher up the file the
   base rule quietly overrode them. */
@media (max-width: 900px) {
    .lang { padding-top: var(--space-3); }

    .lang__select {
        width: 100%;
        border-color: rgba(255, 255, 255, .35);
        color: #fff;
        background-color: rgba(255, 255, 255, .08);
    }
}

/* Google's widget inserts a banner that shoves the page down. */
.skiptranslate iframe { display: none !important; }
body { top: 0 !important; }


/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .hero { min-height: 340px; }
    .hero__inner { padding: var(--space-16) var(--space-4) var(--space-8); }

    .hero--compact { min-height: 170px; }
    .hero--compact .hero__inner { padding: var(--space-6) var(--space-4); }

    .band { padding: var(--space-12) 0; }
    .container { padding: 0 var(--space-4); }

    h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }
    h2 { font-size: clamp(1.35rem, 5.5vw, 1.8rem); }

    .home-feature { gap: var(--space-6); }
    .home-feature__stat { padding: var(--space-6); width: 100%; }
    .site-footer__inner { flex-direction: column; gap: var(--space-6); }

    /* Not enough width to put a biography beside a photograph. */
    .person-feature,
    .person--expandable[open] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        justify-items: center;
    }

    .person-feature__photo { max-width: 280px; }
    .person-feature__text { text-align: center; }
    .person-feature__text .prose { text-align: left; }
}

@media (max-width: 640px) {
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { width: 100%; }

    .people { grid-template-columns: 1fr; }
    .home-links { grid-template-columns: 1fr; }
    .patrons__list { grid-template-columns: 1fr; }
}

/* Wide content scrolls inside itself rather than making the whole page scroll
   sideways. The public seat map is deliberately NOT in this list: it scales to
   fit instead, so it must keep overflow:hidden or the scaled stage leaves a
   phantom scrollbar. */
.inventory__map-wrap,
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 760px) {
    .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* Visible to screen readers, not on screen. Defined here rather than in a
   single page's stylesheet so every page can rely on it. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Homepage sections, following the WordPress layout
--------------------------------------------------------------------------- */

.home-intro {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--space-12);
    align-items: center;
}

.home-intro__images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.home-intro__images img {
    width: 100%;
    aspect-ratio: 7 / 9;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

.home-quote {
    max-width: 52rem;
    margin: 0 auto;
    padding: 0;
    border: 0;
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    line-height: 1.5;
    text-align: center;
    color: var(--brand-primary);
}

.home-events {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.home-event {
    padding: var(--space-6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-warm);
}

.home-event h3 { margin-bottom: var(--space-2); }
.home-event__when { color: var(--ink-muted); font-size: var(--text-sm); }

.home-rabbi {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-12);
    align-items: center;
}

.home-rabbi__photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center 20%;
    border-radius: var(--radius);
}

.home-recordings {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.home-recordings h2 { margin: 0; }

/* ---- featured pages on the homepage ---- */

/* Cards keep their own width and centre as a group, so one featured page looks
   deliberate rather than stretched across the whole band. */
.home-featured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    justify-content: center;
    gap: var(--space-6);
}

.home-featured__card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.home-featured__card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.home-featured__text { padding: var(--space-6); }
.home-featured__text h3 { margin: 0 0 var(--space-2); }

/* ---- a PDF on its own page ---- */

.doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.doc-viewer {
    width: 100%;
    height: 80vh;
    min-height: 480px;
    border: 1px solid var(--surface-tan, #cfb08b);
    border-radius: var(--radius);
    background: var(--surface-sand, #eeebe2);
}

.home-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.home-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius);
    display: block;
}

.home-touch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .home-intro,
    .home-rabbi { grid-template-columns: 1fr; gap: var(--space-8); }
    .home-rabbi__photo { max-width: 220px; }
    .home-gallery { grid-template-columns: repeat(2, 1fr); }
}