/*
 * dr-design.css - the hand-written design layer. Loads LAST.
 *
 * ⚠️ WHY THIS FILE EXISTS AS A SEPARATE FILE
 * dr-foundation.css and dr-overrides.css are both GENERATED by
 * scratchpad/build_foundation.py from measurements of what Avada actually
 * matched. Anything hand-written in either of them is destroyed the next time
 * that script runs. Design decisions therefore live here, after both, where a
 * regeneration cannot touch them.
 *
 * Load order, and all three positions are load-bearing:
 *
 *      dr-foundation.css   before the child stylesheet   (was Avada's @import)
 *      style.css           the child theme, the design
 *      dr-overrides.css    after it                      (was the inline block)
 *      dr-design.css       after that                    <- this file
 *
 * ⚠️ !important IS USED DELIBERATELY AND OFTEN HERE. It is not laziness: the two
 * generated files carry !important on colour, font-size and border rules that
 * came out of Avada's theme-option CSS, and a later rule of equal specificity
 * still loses to an earlier !important. Matching them is the only way to win.
 *
 * Brian's brief, 2026-09-10: desktop first, function over pixel-matching,
 * "bring this up to 2026 standards". Each section below names the request it
 * answers.
 */

/* ==========================================================================
   1. STICKY HEADER  (MOD-074)
   "Redesign sticky header menu on desktop to be more minimal, clean, and
    elegant... it is clunky and logo has not resized correctly"

   THE LOGO BUG, MEASURED. Avada's main.js used to read `data-max-width` off
   the sticky logo and write an inline height/width onto it as the bar appeared.
   MOD-071 replaced main.js and nothing reproduced that step. At 1440px:

                     production      staging before this change
       logo image     162 x 55        274 x 93   (its natural size)
       .sticky-shadow  65px           102px      (dr-foundation.css:87)

   So the bar was half again as tall as intended and the logo overflowed it.
   `max-height` on the image does the same job with no script at all, which is
   where this belonged in the first place.

   THE REDESIGN. Flexbox instead of floats, a 64px bar instead of 102px, the
   nav set in small caps, and the "active" marker moved from a 3px border on
   top of an 83px-tall block to a 2px rule under the word itself.
   ========================================================================== */

body #header-sticky.sticky-header {
	height: auto;
}

body #header-sticky.sticky-header .sticky-shadow {
	/* The single number that decides how the bar reads. 102 -> 64. */
	height: 64px;
	padding: 0 28px;
	background: rgba(58, 6, 8, 0.94) !important;
	/* A hairline plus a soft drop, rather than dr-foundation's 3px grey blur. */
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, 0.10),
		0 8px 24px rgba(0, 0, 0, 0.22);
	/*
	 * Lets the page show faintly through the bar instead of stamping a solid
	 * slab over it. Unsupported browsers simply get the 94% background above,
	 * which is why that alpha is not 1.
	 */
	-webkit-backdrop-filter: saturate(150%) blur(8px);
	backdrop-filter: saturate(150%) blur(8px);
}

body #header-sticky.sticky-header .avada-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	/*
	 * ⚠ NO max-width HERE ON PURPOSE. The obvious thing to write is one, and it
	 * would do nothing: style.css already carries
	 * `#header-sticky .avada-row { max-width: 1336px !important }`, which beats
	 * any plain declaration whatever its specificity. 1336px is the masthead's
	 * own width, the eight menu items sit comfortably in it, and matching the
	 * header above is the right answer anyway - so this simply leaves it alone
	 * rather than shipping a rule that loses. Measured: 1336px, x=52.
	 */
}

/* ---- logo ---- */

body #header-sticky.sticky-header .logo {
	float: none;
	display: flex;
	align-items: center;
	margin: 0;
	max-height: none;
	height: auto;
	overflow: visible;
}

body #header-sticky.sticky-header .logo a {
	display: block;
	height: auto;
	/* An <img> is inline, so without this the anchor keeps a text baseline gap. */
	line-height: 0;
}

body #header-sticky.sticky-header .logo img.normal_logo {
	/*
	 * THE FIX. The logo is 274x93 natural and carries three lines of type, so
	 * it needs enough height to stay legible: 38px renders it 112x38 and leaves
	 * 13px of air above and below inside the 64px bar. `width: auto` holds the
	 * aspect ratio without anyone having to compute it - which is precisely
	 * what the JavaScript was doing by hand.
	 */
	height: 38px;
	width: auto;
	max-width: none;
	padding: 0;
	display: block;
}

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

body #header-sticky.sticky-header #sticky-nav {
	float: none;
	margin: 0;
	z-index: auto;
}

body #header-sticky.sticky-header #sticky-nav ul.navigation {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body #header-sticky.sticky-header #sticky-nav ul.navigation > li {
	float: none;
	margin: 0;
	padding: 0;
	position: relative;
}

body #header-sticky.sticky-header #sticky-nav ul.navigation > li > a {
	display: block;
	/*
	 * dr-foundation.css:77 sets height AND line-height to 83px on every nav
	 * link, sticky included. Inside a 64px bar that overflows silently and is
	 * the main reason the old bar felt heavy.
	 */
	height: auto;
	line-height: 1;
	padding: 6px 0;
	border: 0 !important;
	font-size: 13px !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.80) !important;
	transition: color 0.15s ease-out;
}

body #header-sticky.sticky-header #sticky-nav ul.navigation > li > a:hover,
body #header-sticky.sticky-header #sticky-nav ul.navigation > li.current-menu-item > a,
body #header-sticky.sticky-header #sticky-nav ul.navigation > li.current_page_item > a,
body #header-sticky.sticky-header #sticky-nav ul.navigation > li.current-menu-ancestor > a {
	/*
	 * The generated layer paints these #900706 - a dark maroon that is very
	 * nearly the bar's own background, so the current page was unreadable.
	 */
	color: #ffffff !important;
}

/*
 * The active marker. A pseudo-element under the word, not a border on the
 * block, so nothing shifts by 3px when it appears and the underline is as wide
 * as the label rather than as wide as the cell.
 */
body #header-sticky.sticky-header #sticky-nav ul.navigation > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.85);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.18s ease-out;
}

body #header-sticky.sticky-header #sticky-nav ul.navigation > li > a:hover::after,
body #header-sticky.sticky-header #sticky-nav ul.navigation > li.current-menu-item > a::after,
body #header-sticky.sticky-header #sticky-nav ul.navigation > li.current_page_item > a::after,
body #header-sticky.sticky-header #sticky-nav ul.navigation > li.current-menu-ancestor > a::after {
	transform: scaleX(1);
}

/* Keyboard users get a real focus ring; the bar is dark, so it is light. */
body #header-sticky.sticky-header #sticky-nav ul.navigation > li > a:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 3px;
	border-radius: 2px;
}

/*
 * The hamburger holder only appears below 1025px, where dr-overrides.css hides
 * the whole sticky bar anyway - but the flex row would stretch it to 64px if it
 * ever did render, so pin it.
 */
body #header-sticky.sticky-header .sticky-shadow .mobile-nav-holder {
	padding-top: 0;
	align-self: center;
}

/* ==========================================================================
   2. INTERACTIVE MAP - see css/interactive-map.css (MOD-075)
   The `:focus` -> `:focus-visible` change lives with the rest of the map's
   own styles rather than here, because that file is hand-written too.
   ========================================================================== */

/* ==========================================================================
   3. "READ MORE" ON THE STAFF PAGE  (MOD-076)
   "On staff let's do a more elegant and professional read more for Murry's bio"

   ⚠️ THE MARKUP IS IN THE PAGE CONTENT, NOT A TEMPLATE. Page 656 stores
   `<div id="read_more">+</div><div class="summery short">` (the misspelling is
   the site's own) inside post_content, so it cannot be changed without editing
   the page. js/dr-theme.js upgrades it in the browser instead, replacing the
   div with a real <button> and adding the classes styled below. Everything here
   is therefore keyed to `.dr-readmore*`, which only exists once that has run -
   with the old rules left untouched underneath as the no-JS fallback.

   WHAT WAS WRONG. style.css:5026 clipped the bio with
   `height: 117px; overflow: hidden`, so it stopped mid-word, mid-line - and the
   control was a 50px maroon circle holding a "+", floated right into the
   margin, detached from the text it opened.
   ========================================================================== */

.dr-readmore-panel {
	position: relative;
	overflow: hidden;
	/* Animatable, unlike `height: auto`. Set per element by dr-theme.js. */
	transition: max-height 0.35s ease;
}

/*
 * The fade. A hard clip cutting a sentence in half is what made this look
 * unfinished; a gradient says "there is more" without lying about where the
 * text ends. Sits above the text, ignores the mouse.
 */
.dr-readmore-panel.is-collapsed::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 64px;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.92) 72%,
		#ffffff 100%
	);
}

.dr-readmore-panel.is-expanded::after {
	content: none;
}

.dr-readmore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 14px 0 26px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--dr-font);
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: #7a1113;
	transition: color 0.15s ease-out;
}

.dr-readmore:hover,
.dr-readmore:focus-visible {
	color: #4d0506;
}

.dr-readmore__label {
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* A chevron drawn in CSS - no icon font, no image request. */
.dr-readmore__chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	/* -3px lifts the arrowhead onto the text's optical centre line. */
	transform: translateY(-3px) rotate(45deg);
	transition: transform 0.25s ease;
}

.dr-readmore[aria-expanded="true"] .dr-readmore__chevron {
	transform: translateY(1px) rotate(225deg);
}

.dr-readmore:focus-visible {
	outline: 2px solid #7a1113;
	outline-offset: 4px;
	border-radius: 2px;
}

/*
 * Someone who has asked their browser to stop animating gets the same
 * behaviour without the movement.
 */
@media (prefers-reduced-motion: reduce) {
	.dr-readmore-panel,
	.dr-readmore__chevron {
		transition: none;
	}
}

/* ==========================================================================
   4. IMAGES AND CAPTIONS IN RUNNING TEXT  (MOD-077)
   "On facts about Terezin better treatment for this image here relative to
    the text if possible"

   Measured on that page at 1440px before this change:

     - the caption under the full-width photo had `margin: 0`, so the italic
       text touched both the image above it and the paragraph below it;
     - captions were pure black at the same 15px as the body, so they read as
       another paragraph rather than as a caption;
     - the Schächter portrait floated right into a bullet list with no gutter
       on the text side beyond a flat 25px, and the bullets ran to its edge;
     - the YouTube embed in the Red Cross section carries width="300" but
       style.css:4127 stretches any iframe in this column to 100%, and the
       accessibility fix at style.css:7004 then gives it a 16/9 ratio - so a
       300x195 embed rendered 670x377 and its `float: right` had nothing left
       to float against. That is the ~380px void under that heading.
   ========================================================================== */

#content .wp-caption,
.post-content .wp-caption {
	max-width: 100%;
	/* WordPress writes `style="width: 709px"` inline; never let that overflow. */
	box-sizing: border-box;
}

#content .wp-caption img,
.post-content .wp-caption img {
	display: block;
	height: auto;
	max-width: 100%;
}

#content .wp-caption-text,
.post-content .wp-caption-text {
	margin: 10px 0 0 !important;
	padding-left: 12px;
	/* A rule beside the caption ties it to its image and separates it from prose. */
	border-left: 2px solid #d8d2d2;
	font-size: 13px !important;
	line-height: 1.45 !important;
	font-style: italic;
	color: #5f5a5a !important;
}

#content .wp-caption.aligncenter,
.post-content .wp-caption.aligncenter {
	margin: 8px auto 30px !important;
}

#content .wp-caption.alignright,
.post-content .wp-caption.alignright {
	/* 32px of air on the text side, against the old flat 25px. */
	margin: 6px 0 24px 32px !important;
}

#content .wp-caption.alignleft,
.post-content .wp-caption.alignleft {
	margin: 6px 32px 24px 0 !important;
}

/*
 * A heading must never start beside a float left over from the section above
 * it. Without this the "Performances of Verdi's Requiem" heading shared a line
 * with the Schächter portrait, which then pushed the next image 235px in from
 * the right margin instead of against it.
 */
#content h2,
#content h3,
.post-content h2,
.post-content h3 {
	clear: both;
}

/*
 * An embed the author floated beside text is a sidebar illustration, not a
 * feature video, and should be sized like one.
 *
 * style.css:4127 stretches EVERY iframe in this column to `width: 100%` so a
 * full-width video fills it, and the accessibility fix at style.css:7004 then
 * gives any YouTube frame `aspect-ratio: 16/9`. Together they turned the
 * 300x195 embed in the Red Cross section into 650x366 - which is wider than
 * the text it was meant to sit beside, so its own `float: right` had nothing
 * left to float against, and the section opened with a ~380px hole.
 *
 * ⚠ `width: auto` DOES NOT FIX THIS, which was the first attempt. Chromium maps
 * an iframe's width="300" attribute to a presentational hint, and any author
 * rule - including `width: auto` - outranks it. The element is then a replaced
 * box with no intrinsic width, and fills the column exactly as before: measured
 * at 650px with the rule in place. An explicit size is the only way to say what
 * is actually wanted.
 */
#main #content iframe[align="right"],
#main #content iframe[align="left"],
#main #content iframe[style*="float"] {
	width: 320px;
	/* Never let the illustration crowd out the text it sits beside. */
	max-width: 45%;
	margin: 6px 0 20px 32px;
}

#main #content iframe[align="left"],
#main #content iframe[style*="float: left"] {
	margin: 6px 32px 20px 0;
}

/*
 * Below the tablet breakpoint there is no column left to sit beside, so stop
 * floating and let it run full width like every other embed.
 */
@media only screen and (max-width: 767px) {
	#main #content iframe[align="right"],
	#main #content iframe[align="left"],
	#main #content iframe[style*="float"] {
		float: none !important;
		width: 100%;
		max-width: 100%;
		margin: 6px 0 20px;
	}
}

/* ==========================================================================
   5. AN EMPTY SIDEBAR SHOULD NOT RESERVE A COLUMN  (MOD-079)
   "Education page could use... some small refinements so it looks more
    professional and the margins don't feel so off"

   MEASURED on /education-2/ at 1440px. page.php always prints
   `<div id="sidebar">` and fills it from dr_sidebar(); this page's sidebar
   ("Education Sidebar") holds no widgets, so it rendered as an empty div that
   still took its 23.4% of the row:

       .avada-row   x=250  w=940
       #sidebar     x=250  w=220  h=0     <- empty, and still reserving space
       #content     x=521  w=669
       h1           x=250  w=940          <- the page title, in its own bar

   That is the complaint exactly: the heading started 271px to the LEFT of the
   text underneath it. Giving the column back lines the two up.

   `:has()` is needed because #sidebar comes AFTER #content in the source, so
   no sibling combinator can reach backwards to it. Baseline in every browser
   since December 2023; where it is not supported the page simply keeps the
   layout it has today.

   ⚠️ SCOPED TO THIS PAGE ON PURPOSE, AND THE FIRST VERSION WAS NOT.
   Written unscoped, the same rule fires on every page whose sidebar comes back
   empty. Measured against production, that is exactly two pages: this one and
   /contact-us/ - where it widened the contact form's fields from 669px to
   820px. Not worse, but not asked for either, and a long single-line text field
   is not an improvement on a form. Widening Contact Us the same way is a
   one-line change if Brian wants it.

   ⚠️ `.education-page` DID NOT EXIST UNTIL MOD-079 FIXED IT. header.php has
   printed the class since it was written, but joined it on with "&nbsp;":
   `class="clearfix &nbsp;education-page"`. HTML splits a class attribute on
   ASCII whitespace only, and U+00A0 is not ASCII whitespace, so the browser
   read the second token as " education-page" with the non-breaking space
   glued to the front, and `.education-page` matched zero elements. It looks
   right in view-source, which is exactly why it survived. header.php:1493 now
   joins with a plain space.

   ⚠️ PRODUCTION AND STAGING DISAGREE ABOUT THIS PAGE ALREADY. Production has
   `pyre_full_width = yes` on it, so its #content is 940px with a zero-width
   empty sidebar; staging does not, so its #content is 669px with a 220px empty
   one. That is a content divergence, not a code one. These rules land both on
   the same layout, which is the point.
   ========================================================================== */

#main.education-page .avada-row:has(> #sidebar:empty) > #content {
	width: 100% !important;
	float: none !important;
}

#main.education-page .avada-row > #sidebar:empty {
	display: none;
}

/*
 * ...but 940px of 16px text is about 115 characters a line, which is far past
 * comfortable. Cap the measure and keep it flush LEFT, so it starts directly
 * under the page title rather than being centred away from it.
 */
#main.education-page #content .post-content {
	max-width: 820px;
}

/*
 * A little more air around the film, which is the top of the page and the
 * thing the page is actually about.
 */
#main.education-page #content .post-content p:has(> iframe),
#main.education-page #content .post-content p:has(> .dr-video-facade-box) {
	margin: 0 0 26px;
}

/* --------------------------------------------------------------------------
   THE HERO VIDEO FILLS THE COLUMN  (MOD-080)

   Brian, on reviewing MOD-079: "Should we center the title or like increase the
   size of the video... something feels slightly off here on desktop still."

   It is not the title. Measured at 1440, 1920 and 2602px, the top of the page
   had THREE different left edges:

        page title     x = 250
        video          x = 340      <- 640x360, centred inside an 820px column
        body text      x = 250

   The title and the body text already agree. The video was the outlier, sitting
   90px inside both - because the facade takes its size from the original Vimeo
   iframe's width="640" and `.post-content p .dr-video-facade-box` centres it
   with `margin: auto`. At 2602px wide the numbers are the same: the offset is
   fixed, not proportional, so it does not "come right" on a big screen.

   Filling the column fixes the alignment and answers the other half of the
   question at the same time - the film goes 640x360 -> 820x461, 28% wider.

   ⚠️ The alternative - centring the title over the video instead - was mocked
   up and measured too. It aligns the top of the page (both centres land on 720)
   but leaves a centred heading over left-aligned body copy further down, which
   trades one mismatch for another. One left edge for the whole page is the
   steadier answer for a page that is mostly running text. Switching is two
   declarations if Brian prefers it:
       .page-title h1 { justify-content: center }        <- NOT text-align: the h1 is display:flex
       .post-content  { float: none; margin-inline: auto } <- NOT margin alone: it is floated

   ⚠️ Desktop only. Below 768px video-facade.css pins this box to a fixed 215px
   height to match what the old site did, and that was verified pixel-for-pixel
   in an earlier phase. Changing it belongs in the mobile round, not here -
   though `aspect-ratio` is the better answer there too.
   -------------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

	#main.education-page #content .post-content p .dr-video-facade-box {
		width: 100%;
		/*
		 * `height` has to go, not just be overridden: the box carries
		 * `height: var(--dr-facade-h)` set to the original iframe's 360px, and
		 * a fixed height plus a wider box would letterbox the poster.
		 * 640/360 is exactly 16/9, so nothing is cropped.
		 */
		height: auto;
		aspect-ratio: 16 / 9;
		margin-bottom: 26px;
	}
}

/* Enough of a gap between a run of prose and the list that follows it that the
   two do not read as one block. */
#main.education-page #content .post-content ul {
	margin-bottom: 22px;
}

/* ==========================================================================
   6. UPCOMING EVENTS  (MOD-078)
   "For upcoming events let's give it the sidebar and form similar to the
    other pages in that submenu"

   The template switch itself is done in
   mu-plugins/dr-customizations/page-templates.php - it has to happen in post
   meta rather than here or in `template_include`, because header.php decides
   whether to draw the page-title bar by calling is_page_template(), and getting
   that wrong puts two <h1> elements on the page.

   All that is needed in CSS is room for the third-party events widget in the
   669px column it now shares with the sidebar. The widget is Elfsight's and
   renders itself in the browser, so its own class names are all there is to
   aim at.
   ========================================================================== */

.page-id-4298 #content [class*="eapp-events-calendar"],
.page-id-4322 #content [class*="eapp-events-calendar"] {
	max-width: 100%;
}


/* ==========================================================================
   ==========================================================================
   MOBILE ROUND - MOD-081..089
   Brian, 2026-09-10, with eleven iPhone screenshots:

     "For Mobile - Here is where we do not need to be faithful to the original
      and can redesign and relayout to improve the user experience greatly...
      this is where we can go ahead and get creative and do whatever is
      necessary to improve the user experience"

   Everything below 768px is therefore designed rather than matched. 767px is
   the site's own mobile breakpoint and is used consistently here.
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   7. THE MOBILE HEADER BAR  (MOD-081)
   "Donate and search do not work on mobile"

   They were not broken. They were BURIED.

   Measured at 428px on staging, the header row is built like this:

       .logo             x=10  w=408  position:relative   <- full row width
       .header-rt-cnt    x=298 w=120  position:static     margin:-76px 0 0 288px

   `.logo` is given `width:100%` by media.css and `position:relative` by
   style.css's `max-width:767px and min-width:200px` block, so it is a
   positioned, full-width box painting ON TOP of the two static controls that a
   negative margin has dragged onto its line. The logo IMAGE is only 150px
   wide and sits in the middle, so the bar LOOKS correct and roughly 60% of it
   is an invisible link to the homepage.

       document.elementFromPoint(centre of Donate) -> DIV.logo
       document.elementFromPoint(centre of Search) -> DIV.logo

   ⭐ Playwright's own `tap()` on `.search-icon` TIMED OUT waiting for the
   element to receive the event - the automated tap fails for exactly the
   reason Brian's finger does. That is the reproduction, not a theory.

   ⚠️ Measured across 13 widths: BLOCKED at every width <= 767 and OK at every
   width >= 768. The trigger is precisely `position:relative`, so the fix is
   scoped to the same breakpoint and desktop is untouched.

   The replacement is one flex row - hamburger | logo | Donate | Search - which
   is what the negative margins were trying to fake.
   ========================================================================== */

@media only screen and (max-width: 767px) {

	.header-v4 #header .avada-row {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 58px;
	}

	/*
	 * Was position:absolute with a -22px transform, outside the flow.
	 *
	 * ⚠️ `relative`, NOT `static`, and this one is easy to get wrong. The three
	 * bars inside are `position:absolute; left:0; right:0; width:22px;
	 * margin:0 auto` - so they centre themselves inside their CONTAINING
	 * BLOCK, which is the nearest positioned ancestor. Taking the positioning
	 * off this div handed that job to #header, and the bars duly centred on the
	 * whole 428px header: measured `margin: 0px 203px`, drawing the hamburger
	 * on top of the logo while the div's own box still reported x=10 w=40.
	 *
	 * The hit test and the box were both correct and the picture was still
	 * wrong. Found by looking at a screenshot, not by measuring.
	 */
	.header-v4 #header .humburger-btn {
		position: relative;
		transform: none;
		flex: 0 0 40px;
		width: 40px;
		height: 44px;
		margin: 0;
		top: auto;
		left: auto;
	}

	/*
	 * The three fixes that free the controls: no longer positioned, no longer
	 * full width, and no longer offset 30px left of where it appears to be.
	 */
	.header-v4 #header .logo {
		position: static;
		right: auto;
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		margin: 0 !important;
		padding: 0;
		text-align: center;
		overflow: visible;
	}

	/*
	 * ⚠️ min(150px, 100%), not a flat 150px. `.logo` is a flex item that can
	 * shrink, and the image was not shrinking with it - at 320px the column
	 * measured 67px while the image still drew 150px and ran underneath the
	 * Donate button. `overflow: visible` on .logo (needed so nothing clips)
	 * means the overflow is silent: the DIV's box is correct and the picture
	 * is wrong. Capping against the container as well as an absolute size
	 * fixes it at every width.
	 */
	.header-wrapper #header .logo img,
	.header-v4 #header .logo img {
		max-width: min(150px, 100%);
		height: auto;
		margin: 0 auto;
		display: inline-block;
	}

	.header-v4 #header .logo a {
		display: inline-block;
		min-width: 0 !important;
		width: auto !important;
	}

	/* Undo the negative-margin hack that dragged these onto the logo's line. */
	.header-v4 #header .header_right {
		display: flex;
		flex: 0 0 auto;
		width: auto;
		margin: 0;
		align-items: center;
	}

	.header-v4 #header .header-rt-cnt {
		margin: 0 !important;
		max-width: none;
		width: auto;
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.header-v4 #header .custom_tagline {
		display: none !important;
	}

	/* 44px minimum tap targets, per WCAG 2.2 target size. */
	.header-v4 #header .header-cnt-lt,
	.header-v4 #header .header-cnt-rt {
		height: auto;
		width: auto;
	}

	.header-v4 #header .header-cnt-lt-top a {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 12px !important;
		white-space: nowrap;
	}

	.header-v4 #header .search-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	/*
	 * The panel that `Avada/js/custom-script.js` slides open. Its containing
	 * block is #header (the nearest positioned ancestor), so it lands directly
	 * under the bar once .logo stops being positioned.
	 */
	/*
	 * ⚠️ The header has to outrank the page below it, or the panel opens
	 * INVISIBLY. style.css line 4082 gives both boxes the same layer:
	 *
	 *     .header-v4 #header, .site-main-cover { position: relative; z-index: 12 }
	 *
	 * Equal z-index is resolved by document order, and .site-main-cover comes
	 * second, so the hero painted straight over the open search panel. Measured
	 * with the panel open: form box 0,218 428x210, display block - and
	 * elementFromPoint on the text input returned DIV.banner-main.
	 *
	 * This never showed up before because the icon could not be tapped at all
	 * (section 7), so nothing ever opened.
	 *
	 * ⚠️ The selector needs BOTH wrapper classes. A plain `.header-v4 #header`
	 * loses to style.css's un-mediated `.header-wrapper .header-v4 #header`
	 * (1 id + 2 classes), and the computed z-index stayed 12 while the rule sat
	 * in the file looking correct. Matching the specificity exactly is enough,
	 * because this file loads last.
	 */
	.header-wrapper .header-v4 #header {
		z-index: 20;
	}

	.header-v4 #header .search_form {
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1001;
		background: #fff;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
	}

	/*
	 * ⚠️ The flex row goes on the FORM, not on .search_form_container. The
	 * markup is container > form > (label, input, submit), so flexing the
	 * container only lays out a single child - the form - and the fields
	 * inside it stay stacked. First attempt did exactly that and produced a
	 * 210px-tall panel with a full-width field and an oversized button
	 * underneath.
	 */
	.header-v4 #header .search_form .search_form_container {
		padding: 10px 12px;
	}

	.header-v4 #header .search_form form.search-form {
		display: flex;
		align-items: stretch;
		gap: 8px;
		margin: 0;
	}

	.header-v4 #header .search_form .search-field {
		flex: 1 1 auto;
		width: auto;
		min-width: 0;
		height: 44px;
		margin: 0;
		padding: 0 12px;
		font-size: 16px; /* below 16px iOS zooms the page on focus */
	}

	.header-v4 #header .search_form input[type="submit"] {
		flex: 0 0 auto;
		width: auto;
		height: 44px;
		margin: 0;
		padding: 0 18px;
		line-height: 1;
	}

	.header-v4 #header .search_form .hide {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
	}
}

/*
 * On the narrowest phones still in use (iPhone SE, 320px) the four controls plus
 * the word "Search" leave the logo only 67px, which is too small to read. The
 * magnifier alone is unambiguous at that size, and dropping the label gives the
 * logo about 35px back - measured 67px -> 94px. 380px is chosen so it only
 * affects 320-375 devices and leaves 390px and up untouched.
 *
 * ⚠️ THIS BLOCK MUST STAY AFTER THE 767px BLOCK, NOT INSIDE IT.
 *
 * It was first inserted immediately after the .search-icon rule, which closed
 * the 767px block early and swallowed everything below it - the header
 * z-index fix and the ENTIRE search panel layout - into `max-width: 380px`.
 * Brian's phone is 428px, so on his device the panel opened with no styling and
 * behind the page content, which reads exactly as "Search does nothing".
 *
 * ⚠️ The brace count stayed balanced, so a braces-match check passed. Only
 * walking the file and printing each rule's enclosing @media found it. That is
 * the check worth keeping for a stylesheet this size.
 */
@media only screen and (max-width: 380px) {

	.header-v4 #header .search-icon > span:not(.search_icon) {
		display: none;
	}
}


/* ==========================================================================
   8. ONE PAGE-TITLE CONVENTION  (MOD-082)
   "Consistent title styling across all pages (This is true on desktop also we
    need to use the same convention across the board example education page vs
    Origins vs Survivor Stories, Etc)... It seems random to a site visitor...
    just black color and same font would be better"

   Surveyed with computed styles on twelve pages. There were FIVE conventions:

     colour                  font                size   pages
     #333333                 Antic Slab          30px   videos, photos, contact
     #659DBB (blue)          Antic Slab          30px   education
     #659DBB (blue)          league_spartanbold  30px   staff, mission, board
     #9A3C3D (dark red) 700  league_spartanbold  36px   survivor stories
     #000000                 Roboto              30px   description, upcoming, film

   Brian's instruction is followed literally: one font, black, everywhere.
   Antic Slab is the one already carrying the pages he signed off in the
   desktop round, and it is the site's editorial serif.

   ⚠️ THE SELECTOR LIST IS EXPLICIT, AND `#main h1` IS DELIBERATELY NOT USED.
   Two h1 elements would be actively damaged by a blanket rule:

     - the HOMEPAGE HERO is `<h1>` in `.banner-txt`, white league_spartanbold
       50px over a photograph. Painting it #1f1f1f makes it unreadable.
     - /videos/ uses `<h1>` inside `.post-content` for SECTION headings (blue,
       24px). They are the wrong tag, but they are not page titles and should
       not be blown up to 32px.

   A page title lives in exactly one of three containers, verified across the
   site: the title bar, the sidebar-layout content column, or - on the one
   page that has its own template - the map header.
   ========================================================================== */

:root {
	--dr-title-font: var(--dr-font);
	--dr-title-color: #1f1f1f;
}

/*
 * ⚠️ THE REPEATED CLASSES ARE DELIBERATE, AND THEY ARE THE POINT OF THE FIX.
 *
 * The divergence Brian is describing is not one stylesheet being inconsistent -
 * it is a dozen per-page and per-template overrides accumulated over years,
 * each written heavier than the last, all carrying !important:
 *
 *   .page-template.page-template-about_schachter #main #content.right-content h1
 *                                                     (2 ids, 3 classes, 1 elem)
 *   body.page-id-4148 .page-title-captions h1.entry-title
 *                                                     (0 ids, 3 classes, 2 elem)
 *   .page-template-survivor-stories #main #content.right-content h1
 *   .page-id-2951 #main #content h1        color:#891a1c !important
 *   .page-id-2894 #main #content h1
 *
 * A convention has to outrank ALL of them or it is just a thirteenth opinion.
 * Repeating a class raises weight without inventing a hook that has to be added
 * to the markup, and dr-design.css loads last, so a tie resolves here. The
 * alternative - deleting six scattered rules from a 35 KB legacy stylesheet
 * that also set font, size and margins - is a much larger and less reviewable
 * change for the same result.
 */
.page-title.page-title .page-title-captions.page-title-captions h1,
#main #content.right-content.right-content.right-content > h1,
#main #map-wrapper > .dr-map__title.dr-map__title {
	font-family: var(--dr-title-font) !important;
	color: var(--dr-title-color) !important;
	font-weight: 400 !important;
	font-size: 32px !important;
	line-height: 1.2 !important;
	letter-spacing: .015em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

/* The map title is two-tone in the markup: "Terezin Ghetto: <span>A Virtual
   Tour</span>". The span carries its own colour, so it needs saying twice. */
#main #map-wrapper > .dr-map__title.dr-map__title span {
	color: var(--dr-title-color) !important;
	font-family: inherit !important;
	font-weight: inherit !important;
}

/* Survivor Stories is the one page that set its own weight and size. */
#main #content.right-content.right-content.survivor-stories > h1 {
	font-weight: 400 !important;
	font-size: 32px !important;
}

@media only screen and (max-width: 767px) {

	.page-title.page-title .page-title-captions.page-title-captions h1,
	#main #content.right-content.right-content.right-content > h1,
	#main #content.right-content.right-content.survivor-stories > h1,
	#main #map-wrapper > .dr-map__title.dr-map__title {
		font-size: 26px !important;
		line-height: 1.22 !important;
		margin-bottom: 14px;
	}
}


/* ==========================================================================
   9. THE FOOTER SITE MAP  (MOD-083)
   "Let's restyle the layout of the footer menu (site map at the bottom) it
    looks off on mobile"

   `ul.menu-list` is `display:flex; flex-wrap:wrap` with eight items and no
   column widths, so each row's second column starts wherever the first item
   happened to end - "Home / About" breaks in a different place from "Defiant
   Requiem / Hours of Freedom". Measured 352px wide by 183px tall with four
   ragged rows.

   A site map is a two-column grid, so it is now written as one.
   ========================================================================== */

@media only screen and (max-width: 767px) {

	#footer {
		padding: 40px 0 28px;
	}

	#footer .ftr-cnt {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 26px;
	}

	#footer .ftr-left,
	#footer .ftr-right {
		width: 100%;
		float: none;
		margin: 0;
		padding: 0;
	}

	/* Identity first, then the site map, then the legal link. */
	#footer .ftr-right { order: 1; }
	#footer .ftr-left  { order: 2; }

	#footer .ftr-logo img {
		max-width: 190px;
		height: auto;
	}

	#footer address {
		margin: 14px 0 0;
		font-style: normal;
		line-height: 1.7;
	}

	#footer .ftr-nav ul.menu-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2px 16px;
		width: 100%;
		max-width: 340px;
		margin: 0 auto;
		padding: 22px 0 0;
		border-top: 1px solid rgba(255, 255, 255, .16);
		text-align: left;
	}

	#footer .ftr-nav ul.menu-list li {
		width: auto !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block;
	}

	/* 44px tap targets, and room for "Hours of Freedom" to wrap cleanly. */
	#footer .ftr-nav ul.menu-list li a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 4px 0;
		line-height: 1.3;
	}

	/*
	 * No `order` here: .ftr-links is a child of .ftr-right, not of the flex
	 * container, so ordering it does nothing. It sits directly under the
	 * copyright line, which is where a privacy link belongs anyway.
	 */
	#footer .ftr-links {
		width: 100%;
		margin: 0;
		padding-top: 4px;
	}

	#footer .ftr-links ul {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
	}
}


/* ==========================================================================
   10. THE MOBILE MENU MUST NOT SHOW THROUGH THE PAGE  (MOD-085)
   "When pulling up to refresh the page on mobile you'll see the sidebar menu
    in the back"

   `#small-nav` is the slide-out menu panel: `position:fixed; top:0; left:0;
   width:320px; height:100%; background:#353333; z-index:10`. The page
   (`#wrapper`, white, static) is painted over it, and sliding the page 320px
   right is what "opening" the menu means.

   style.css gets this right:

       .header-wrapper .header-v4 #small-nav { visibility: hidden }
       .open-scroll-nav .header-v4 #small-nav { visibility: visible }

   ...and then dr-overrides.css undoes it, three times over:

       body #small-nav { visibility: visible !important; }

   That line came out of Avada's own inline dynamic CSS, so it is GENERATED and
   must not be hand-edited - see the banner at the top of this file. It is
   answered here instead, which is the whole reason this file loads last.

   `html:not(.open-scroll-nav) body #small-nav` beats `body #small-nav` on
   specificity and carries !important, so it wins both tests.
   ========================================================================== */

/*
 * ⚠️ SCOPED TO max-width:1029px, AND THE SCOPE IS LOAD-BEARING.
 *
 * `#small-nav` is only the slide-out panel below 1029px - that is where
 * style.css turns it into `position:fixed; width:320px; height:100%`. ABOVE
 * 1029px it is the ordinary horizontal navigation bar under the header, and
 * hiding it there takes the site's main menu off every desktop page.
 *
 * The first version of this rule had no media query. Caught by diffing local
 * against staging at 1440px: staging `visibility:visible`, local
 * `visibility:hidden`. Worth stating plainly - a selector that reads as
 * "the mobile menu" was, at desktop width, the main menu.
 */
@media only screen and (max-width: 1029px) {

	html:not(.open-scroll-nav) body #small-nav {
		visibility: hidden !important;
	}
}

/* Belt and braces: whatever the rubber band reveals should be page-coloured,
   not the transparent default that lets the fixed panel show through. */
html,
body {
	background-color: #fff;
}


/* ==========================================================================
   11. THE 260px min-height TRAP  (MOD-086)
   "On staff page after adding the read more there is a giant gap to Louisa"

   style.css line 4437, inside its max-width:767px block:

       #main #content.right-content iframe,
       #main #content.right-content div div[style] { min-height: 260px !important; }

   The intent is plainly the first half - give a video embed a height on a
   phone. The second half says "any div, nested at least two deep, that has a
   style attribute", and on the staff page that is:

       <div style="clear: both;"><strong>Louisa Hollman</strong>...</div>

   Two lines of text in a box forced to 260px. THAT is Brian's giant gap, and
   it is on production today - it is not something the read-more introduced.

   ⭐ But the read-more DID make itself a second victim, and this is the lesson
   worth keeping. MOD-076's JavaScript collapses the bio by setting an INLINE
   `max-height: 160px`. Adding that inline style is what made the panel start
   matching `div[style]`, so it inherited `min-height: 260px !important` too -
   and min-height beats max-height in the CSS cascade, always. Measured on
   staging: `maxHeight "160px"`, `minHeight "260px"`, used height 260px. The
   collapse silently did nothing on mobile.

   ⚠️ So a rule can be triggered by the mere PRESENCE of a style attribute.
   Setting one from script can opt an element into selectors written years
   earlier. `div[style]` is the tell.

   Reset it, then hand it back to the boxes it was actually written for.
   ========================================================================== */

@media only screen and (max-width: 767px) {

	#main #content.right-content div div[style] {
		min-height: 0 !important;
	}

	#main #content.right-content div div[style]:has(iframe, video, embed, object, .dr-video-facade-box) {
		min-height: 260px !important;
	}
}


/* ==========================================================================
   12. IMAGES DO NOT WRAP TEXT ON A PHONE  (MOD-087)
   "On survivor stories I think we should do away with text wrapping on
    Mobile... you'll see the issue with the escape screenshot"

   Measured on /survivor-stories/edgar-krasa/ at 428px: `.wp-caption.alignleft`
   is 310px wide and floated, inside a 404px column. That leaves a 94px gutter,
   which is about nine characters - so "The troop made its way down the road
   without Edgar. After all the" renders one or two words per line down the
   side of the photograph.

   A float only earns its keep when the remaining column is still readable.
   Below 768px it never is, so aligned media goes full width and the text runs
   underneath it.
   ========================================================================== */

@media only screen and (max-width: 767px) {

	/*
	 * ⚠️ `width: auto`, NOT `width: 100%`.
	 *
	 * Unfloating is what stops the text wrapping; stretching is a separate
	 * decision and the first version got it wrong. `width: 100%` upscaled every
	 * aligned image to the full 404px column regardless of how big it actually
	 * was, which an adversarial pass caught on two live pages:
	 *
	 *     Rafael Schaechter portrait     natural 200px -> drawn 404px  (2.0x, soft)
	 *     mission-statement button image natural 150px -> drawn 404px  (2.7x)
	 *
	 * The second is not a photograph at all, it is a button graphic - there is
	 * no width at which blowing it up is right. Natural size, capped at the
	 * column and centred, is sharp at every size and still solves the wrapping.
	 */
	#main #content .wp-caption.alignleft,
	#main #content .wp-caption.alignright,
	#main #content .wp-caption.aligncenter,
	#main #content img.alignleft,
	#main #content img.alignright,
	#main #content img.aligncenter,
	#main #content figure.alignleft,
	#main #content figure.alignright,
	#main .post-content .alignleft,
	#main .post-content .alignright {
		float: none !important;
		clear: both !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 20px auto 24px !important;
	}

	#main #content .wp-caption img,
	#main #content figure img,
	#main .post-content .wp-caption img {
		width: auto;
		max-width: 100%;
		height: auto;
		display: block;
		margin-inline: auto;
	}

	/* The caption rule from MOD-077 keeps its treatment, full width. */
	#main #content .wp-caption-text,
	#main .post-content .wp-caption-text {
		margin: 10px 0 0 !important;
	}
}


/* ==========================================================================
   13. ONE TAP TO OPEN A PHOTO  (MOD-088)
   "Photos require two clicks to open the lightbox instead of one"

   photo-gallery.css:

       .filter-box ul li span.mask        { display: none }
       .filter-box ul li:hover span.mask  { display: block }

   On a touch screen there is no hover, so iOS Safari synthesises one: the
   first tap on an element with hover styles APPLIES those styles and withholds
   the click; the second tap delivers it. Because `.mask` goes from `display:
   none` to `display: block`, the tap visibly changes the page, which is
   exactly the condition that makes Safari hold the click back.

   ⚠️ HONEST LIMIT OF THE VERIFICATION. This does NOT reproduce in the harness.
   Tested with real `touchscreen.tap()` in both engines and both opened the
   lightbox on tap 1:

       Chromium (isMobile, hasTouch, 428x926)   opened on tap 1
       WebKit   (iPhone 13 Pro Max descriptor)  opened on tap 1

   Headless WebKit on Windows is not iOS Safari and does not implement its
   sticky-hover heuristic. The mechanism is well established and the CSS above
   is a textbook instance of it, so the fix is made on that basis - but Brian's
   phone is the only thing that can confirm it, and this comment exists so that
   nobody later reads "verified" into it.

   `hover: none` matches a device whose primary input cannot hover. Removing
   the hover-triggered repaint removes the reason to withhold the click, and
   loses nothing: the mask was never reachable by hover on a phone anyway.
   ========================================================================== */

/*
 * ⚠️ THE FIX IS NOT HERE. It is at source, in css/photo-gallery.css and
 * css/interactive-map.css, both of which gate their :hover rules on
 * `@media (hover: hover)`.
 *
 * It was first written here as a `@media (hover: none)` counter-rule, and an
 * adversarial re-check found it was DEAD. Both of those stylesheets load AFTER
 * dr-design.css on the rendered page:
 *
 *     2 dr-foundation.css   5 dr-overrides.css   6 dr-design.css
 *     7 photo-gallery.css / interactive-map.css
 *
 * so a counter-rule of equal specificity loses on document order. Measured by
 * emulating `hover: none` over CDP and hovering for real:
 *
 *     map hotspot   fill rgba(207, 229, 242, 0.85)   <- still painted
 *     photo tile    opacity 0.8                      <- still dimmed
 *
 * Only the mask rule survived, because that one carried !important.
 *
 * ⚠️ dr-design.css loading last is true of the four-file cascade described at
 * the top of this file. It is NOT true of every stylesheet on the page - the
 * page-specific ones are enqueued after it. Check the rendered order before
 * assuming this file wins.
 */


/* ==========================================================================
   14. THE SECTION MENU AND THE ENQUIRY FORM  (MOD-084)
   "Restlye/Relayout of the sidebar menus and form on pages where those
    appear... some are at the top some are at the bottom etc. and the menu
    takes up so much vertical space... we can make a big improvement here"

   Measured at 428px. Both complaints are exactly right, and they have
   different causes:

   INCONSISTENT PLACEMENT. `.left-sidebar` is first in the source on every
   page, but style.css line 4440 reverses one family of pages and not the
   other:

       body.page-template-performances-template #main .avada-row {
           display: flex; flex-direction: column-reverse; }

       page            .avada-row    menu lands   menu height
       staff           block         TOP           390px
       mission         block         TOP           390px
       board           block         TOP           390px
       Terezin facts   block         TOP           390px
       description     col-reverse   BOTTOM       1018px
       upcoming        col-reverse   BOTTOM       1018px
       history         col-reverse   BOTTOM       1018px
       FAQs            col-reverse   BOTTOM       1018px
       Hours of Free.  col-reverse   BOTTOM       1018px

   VERTICAL SPACE. 1018px is TALLER THAN THE PHONE SCREEN (926px) for a menu of
   five links, because on those pages `.left-sidebar` also contains the 568px
   enquiry form. The About pages spend 390px on seven links.

   The layout below settles both, the same way on every page:

       1  section menu   collapsed to a single 52px bar
       2  the content    starts near the top of the screen on every page
       3  enquiry form   after the content, where a call to action belongs

   `display: contents` is what makes this possible without moving any node:
   it drops `.left-sidebar`'s own box so its children - heading, list, form -
   become flex items of the row and can be ordered independently. The form
   stays exactly where the template put it in the DOM.

   Collapsed, the menu costs 52px instead of 390 or 1018. It still names the
   section AND the current page, so nothing is hidden that a visitor needs in
   order to know where they are.
   ========================================================================== */

/* Desktop keeps the sidebar exactly as it is; the button is mobile-only. */
.dr-section-nav__toggle {
	display: none;
}

@media only screen and (max-width: 767px) {

	/*
	 * ⚠️ !important on flex-direction, because style.css line 4440 says
	 *   body.page-template-performances-template #main .avada-row
	 *       { flex-direction: column-reverse }
	 * which is (1 id, 2 classes, 1 element) and outranks a plain
	 * `#main .avada-row:has(> .left-sidebar)`. Without this the `order` values
	 * below still apply and are then read backwards - measured on the
	 * description page as form 266 / content 963 / menu 1979, i.e. exactly
	 * inside out.
	 */
	#main .avada-row:has(> .left-sidebar) {
		display: flex !important;
		flex-direction: column !important;
		flex-wrap: nowrap !important;
	}

	#main .avada-row > .left-sidebar {
		display: contents;
	}

	/* Order is stated for every child so no page can disagree. */
	#main .avada-row > .left-sidebar > h3,
	#main .avada-row > .left-sidebar > .dr-section-nav__toggle,
	#main .avada-row > .left-sidebar > ul.inner-leftmenu {
		order: 1;
	}

	#main .avada-row > #content.right-content {
		order: 2;
	}

	#main .avada-row > .left-sidebar > .home_newsletter_inner {
		order: 3;
		margin-top: 34px;
	}

	/* The heading is replaced by the button, which says the same thing and
	   more. It stays in the DOM for anything reading the outline.
	   ⚠ `.dr-section-nav` is added by JS - see below. */
	#main .avada-row > .left-sidebar.dr-section-nav > h3 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.dr-section-nav__toggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 52px;
		margin: 0 0 22px;
		padding: 8px 14px;
		border: 1px solid #ddd7d7;
		border-radius: 6px;
		background: #fbfafa;
		font-family: var(--dr-title-font);
		text-align: left;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.dr-section-nav__text {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-width: 0;
		line-height: 1.25;
	}

	.dr-section-nav__section {
		font-size: 11px;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: #7d7676;
	}

	.dr-section-nav__current {
		font-size: 15px;
		color: #1f1f1f;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* Drawn rather than an image file, so it inherits colour and needs no
	   request. Rotates to point up when the list is open. */
	.dr-section-nav__chevron {
		flex: 0 0 auto;
		width: 9px;
		height: 9px;
		margin-right: 4px;
		border-right: 2px solid #7a1113;
		border-bottom: 2px solid #7a1113;
		transform: translateY(-3px) rotate(45deg);
		transition: transform .25s ease;
	}

	.dr-section-nav__toggle[aria-expanded="true"] .dr-section-nav__chevron {
		transform: translateY(2px) rotate(225deg);
	}

	/*
	 * ⚠️ SCOPED TO `.dr-section-nav`, WHICH JAVASCRIPT ADDS.
	 *
	 * Only collapse the list once the button that opens it actually exists.
	 * Unscoped, this rule is a `max-height: 0` on a list with no control - and
	 * an adversarial check with javaScriptEnabled:false showed exactly that:
	 * the page went straight from the header to the page title with no section
	 * navigation at all, which is worse than the 390px list it replaced.
	 *
	 * That is not a hypothetical on this site. Cookiebot rewrites script tags
	 * to type="text/plain" on any non-production domain, and any error earlier
	 * in dr-theme.js init() would have the same effect on production.
	 */
	#main .avada-row > .left-sidebar.dr-section-nav > ul.inner-leftmenu {
		max-height: 0;
		overflow: hidden;
		margin: -16px 0 0;
		padding: 0;
		transition: max-height .3s ease, margin .3s ease;
	}

	#main .avada-row > .left-sidebar.dr-section-nav > ul.inner-leftmenu.is-open {
		margin: -16px 0 22px;
	}

	#main .avada-row > .left-sidebar > ul.inner-leftmenu li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 4px 14px;
		border-bottom: 1px solid #efecec;
	}

	#main .avada-row > .left-sidebar > ul.inner-leftmenu li.current-page > a,
	#main .avada-row > .left-sidebar > ul.inner-leftmenu li.current_page_item > a {
		font-weight: 600;
	}

	/* The form is a card once it is the last thing on the page. */
	#main .avada-row > .left-sidebar > .home_newsletter_inner {
		box-shadow: none;
		border-radius: 8px;
	}
}

/*
 * ⚠️ CLEAR THE COLLAPSED STATE ABOVE THE BREAKPOINT (MOD-084).
 *
 * initSectionNav animates the list by writing an INLINE max-height, and an
 * inline style has no media query - it applies at every width. So: collapse the
 * menu on a phone in portrait (inline `max-height: 0px`), turn the phone to
 * landscape - 926px on a Pro Max, which is the DESKTOP layout - and the desktop
 * sidebar menu is a zero-height box.
 *
 * Measured before this rule: `max-height 0px`, list height 0, while its seven
 * links still painted because `overflow: hidden` is itself mobile-only. So the
 * links spilled out of a collapsed box that reserved no space for them.
 *
 * !important is required: nothing else outranks an inline style.
 */
@media only screen and (min-width: 768px) {

	#main .left-sidebar > ul.inner-leftmenu {
		max-height: none !important;
		overflow: visible !important;
	}
}


/* ==========================================================================
   15. ONE TYPEFACE  (MOD-090)
   Brian, on reviewing the mobile round:
     "let's just go with one font for everything... the font rules for the
      actual content (p) is totally fine... it's a little weird seeing two
      different fonts throughout the site"

   The content font is Roboto, and it stays exactly as it is. Everything that
   was NOT Roboto is brought to it. Measured before this section:

     Roboto              body copy, list items, sidebar links      <- keep
     Antic Slab          page titles, #main h2, .post-content h1-h3, #header-sticky
     league_spartanbold  the navigation, and several headings in style.css
     OpenSans / -Bold    the footer menu and assorted headings
     fjallaoneregular    the interactive map title

   ⚠️ WHY THIS IS A BLOCK OF !important AND NOT AN EDIT AT SOURCE
   The three faces come from two places that cannot simply be edited:
     - dr-overrides.css lines 148-149 are GENERATED from Avada's theme options
       and carry !important already;
     - style.css sets league_spartanbold and OpenSans in ~20 separate rules
       across 35 KB of legacy CSS, several of them !important too.
   One reversible block is easier to read, and easier to undo, than twenty
   scattered edits.

   ⚠️ WEIGHT IS RESTATED WHERE THE OLD FACE CARRIED IT.
   'league_spartanbold' and 'OpenSans-Bold' are BOLD FACES used at font-weight
   400 - the boldness lived in the font file, not in the weight. Swapping the
   family alone would silently de-bold the navigation and several headings, so
   anything that was using one of those faces gets an explicit weight here.

   TO REVERT: delete this section. Nothing else references it.
   ========================================================================== */

:root {
	--dr-font: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;

	/* One spacing step for the mobile page head - see section 16. */
	--dr-gap: 22px;

	/* One side gutter for narrow screens - see section 17. */
	--dr-gutter: 20px;
}

/* Headings, in every container the theme uses for them. */
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
#main .post h2, #main .post-content h1, #main .post-content h2, #main .post-content h3,
.page-title h1, .page-title h2,
#sidebar .widget h3, .share-box h4,
.left-sidebar h3, .left-sidebar ul li a,
#content h1, #content h2, #content h3, #content h4,
.contentinner h1, .contentinner h2, .contentinner h3, .contentinner h4 {
	font-family: var(--dr-font) !important;
}

/* The navigation - desktop bar, sticky bar and the mobile clone. */
#nav, #sticky-nav, .navigation, #header-sticky,
#nav a, #sticky-nav a, .navigation a,
#small-nav a, #mobile-nav a, .mobile-nav-item a,
.nav-holder ul li a {
	font-family: var(--dr-font) !important;
}

/* league_spartanbold is a bold face used at weight 400 - keep the presence. */
#nav a, #sticky-nav a, .navigation a,
#small-nav a, #mobile-nav a, .mobile-nav-item a,
.nav-holder ul li a {
	font-weight: 600;
}

/* Footer: the site map was OpenSans-Bold at weight 700 already. */
#footer, #footer a, #footer address, #footer .ftr-nav ul.menu-list li a,
#footer .ftr-links a {
	font-family: var(--dr-font) !important;
}

/* The interactive map's own header and index. */
#map-wrapper .dr-map__title, #map-wrapper .dr-map__title span,
#map-wrapper .dr-map__intro, #map-wrapper .dr-map__index-link,
.dr-map-lightbox__dialog h2, .dr-map-lightbox__dialog h3 {
	font-family: var(--dr-font) !important;
}

/* Buttons and controls added by this theme. */
.dr-readmore, .dr-section-nav__toggle,
.dr-section-nav__section, .dr-section-nav__current {
	font-family: var(--dr-font) !important;
}

/*
 * The last stragglers, found by walking every text-bearing element on 14 pages
 * and tallying computed font-family: 28 league_spartanbold, 6 OpenSans and 4
 * Arial survived the rules above. Enumerated rather than guessed.
 */

/* Header Donate button, and the enquiry form's heading. */
.header-cnt-lt-top a,
.enquire-title,
.home_newsletter_inner .enquire-title {
	font-family: var(--dr-font) !important;
	font-weight: 700;
}

/* The homepage hero. It is white on a photograph, so it keeps its weight. */
.banner-main .banner-txt h1,
.banner-txt h1 {
	font-family: var(--dr-font) !important;
	font-weight: 700;
}

/* Survivor Stories index - the names under each portrait. */
.s_photos .survivor_name a,
.survivor_name a {
	font-family: var(--dr-font) !important;
	font-weight: 700;
}

/* Form controls: Formidable's buttons default to Arial, and the themed
   select widgets to OpenSans. */
.frm_form_field .selector span,
.frm_form_field select,
.frm_form_field input,
.frm_form_field textarea,
.frm_submit button,
.frm_button_submit,
.selector span,
#content input, #content select, #content textarea, #content button {
	font-family: var(--dr-font) !important;
}

/*
 * ⚠️ NOT touched, on purpose: `i`, `.fa*` and any icon class. Those elements
 * use a font file as a glyph set, and forcing a text face on them replaces
 * every icon with a letter. (This site turned out to use image icons rather
 * than an icon font - the audit found no glyph family at all - but the
 * exclusion stays so a future icon font is not broken by this block.)
 */


/* ==========================================================================
   16. UNIFORM SPACING AROUND THE SECTION MENU  (MOD-091)
   Brian: "only change I'd like is to make the spacing universal for these
   different dropdown menus above and below the menu and content"

   He is right, and it was worse than it looks. Measured at 428px across
   13 pages, the gap from the header to the menu bar took THREE values and the
   gap from the bar to the page title took THREE more:

     gap above   14px   concert / film / survivor pages   (#main padding-top 15px)
                 49px   About pages                       (#main padding-top 50px)
                 87px   Tributes, Facts about Terezin      (padding + an extra bar)
     gap below    6px   About pages
                 24px   concert pages
                 34px   Survivor Stories

   Three causes:
     1. `#main` carries a different padding-top per template (50px vs 15px).
     2. Tributes and Facts about Terezin ALSO render a `.page-title` bar which
        is EMPTY - its h1 is display:none because those pages print their title
        in the content column instead - but the container still took 18px plus
        padding. Zeroing its padding lets an empty one collapse to nothing while
        a bar with a real title is still sized by that title's own margin.
     3. The h1 in the content column brought its own margin-top, which differed.

   One value each, stated once.
   ========================================================================== */

@media only screen and (max-width: 767px) {

	/*
	 * ⚠️ `body #main.clearfix`, not `#main`. Three rules already set this and
	 * two of them outrank a bare id selector:
	 *
	 *   dr-overrides.css   #main                                      15px !important
	 *   an INLINE <style>  #main                                      15px !important   <- after every file
	 *   style.css          .page-template-about_schachter #main        50px !important   (1 id, 2 classes)
	 *
	 * The inline block is the awkward one: it sits in the document head after
	 * every linked stylesheet, so it wins any tie on specificity regardless of
	 * which file a rule lives in.
	 *
	 * ⚠️ The class is repeated because the about_schachter rule is (1 id, 2
	 * classes, 0 elements) and CLASSES ARE COMPARED BEFORE ELEMENTS - so a
	 * `body #main.clearfix` at (1, 1, 1) still loses to it. Measured: the
	 * concert pages moved to 22px and the About pages stayed at 50px.
	 * (1, 2, 1) clears all three rules.
	 */
	body #main.clearfix.clearfix {
		padding-top: var(--dr-gap) !important;
	}

	/* Sized by its title when it has one; collapses when it does not. */
	.page-title {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/*
	 * On a page with no section menu (Photos, Contact, Videos, Education) this
	 * heading is the first thing under the header, so it owns the gap that the
	 * menu bar owns elsewhere. Setting it to 0 put the title hard against the
	 * header - measured y=218 against a header bottom of 218.
	 */
	.page-title .page-title-captions h1 {
		margin-top: var(--dr-gap) !important;
		margin-bottom: var(--dr-gap) !important;
	}

	.dr-section-nav__toggle {
		margin: 0 0 var(--dr-gap) !important;
	}

	/* The page title in the content column starts the content; the gap above
	   it is the menu bar's margin, not its own. */
	#main .avada-row > #content.right-content > h1 {
		margin-top: 0 !important;
	}

	/*
	 * Survivor Stories is the only page whose content column carries its own
	 * top padding (28px). The gap below the bar should come from one place, so
	 * it comes from the bar.
	 */
	#main .avada-row > #content.right-content {
		padding-top: 0 !important;
	}

	/* Pages with no section menu get the same gap from the same source. */
	#main .avada-row > #content > .post-content > *:first-child,
	#main .avada-row > #content > *:first-child {
		margin-top: 0;
	}
}

/*
 * ⚠️ THE REDUNDANT, EMPTY PAGE-TITLE BAR (Tributes, Facts about Terezin, and
 * every survivor page).
 *
 * Those pages print their title in the content column AND render the theme's
 * title bar, whose h1 is then hidden with display:none. The bar itself
 * collapses once its padding is removed, but `.page-title-container` still
 * contributes `padding-bottom: 20px` from dr-overrides.css - which is why
 * those two pages measured a 41px gap where every other page measured 21px.
 *
 * `#content.right-content > h1` is the reliable tell: it exists only on the
 * sidebar templates, which are exactly the pages that print their own title.
 * Verified across the site that no page has BOTH a visible title bar and that
 * heading - the pages with a visible bar (photos, contact, videos, education)
 * use #content.full-width or a plain #content.
 *
 * This applies at every width: an empty bar is not worth 20px on a desktop
 * either, and it is the same bar Brian is seeing as inconsistent spacing.
 */
body:has(#main #content.right-content > h1) #wrapper .page-title-container {
	display: none;
}


/* ==========================================================================
   17. MOD-092  A SINGLE SIDE GUTTER ON NARROW SCREENS
   --------------------------------------------------------------------------
   Brian, looking at the concert page on a phone: "let's just look into adding
   a little more margin".

   Measured before this change - the page had THREE different side gutters and
   the content had the smallest of them:

       viewport      header (Donate)   page content
       320 - 640px        20px            12px
       641 - 767px        20px            10px
       768 - 960px         -              10px   (right side; sidebar layout)
       980px and up        -            20px+    (the row centres itself)

   So the title, the section bar and every image sat 10-12px from the edge of
   the screen while the header above them was inset 20px. That is what reads as
   "not enough margin": the content is closer to the edge than the furniture
   around it.

   One value, taken from the header so the page lines up with itself. 980px is
   the width at which `.avada-row` (max-width: 940px) starts producing a 20px
   gutter on its own, so the two meet exactly and nothing jumps at the seam:

       980 - 40 = 940 = the row's max width.

   WARNING: NO !important HERE, AND THAT IS DELIBERATE.
   The homepage is full-bleed - `home.css` zeroes this padding with
   `.page-template-homepage-template-new #main { padding: 0 !important }`.
   An !important here would outrank it (this selector is heavier) and inset the
   hero by 20px. Written non-important, the homepage keeps its own rule and
   every other page picks up the gutter. Verified: homepage row still 0/0.

   The doubled id is what beats the three plain `#main` rules
   (dr-foundation.css, media.css, dr-overrides.css) without reaching for
   !important, and it does not depend on `#main` carrying a class the way
   section 16's `.clearfix.clearfix` does.

   The FOOTER is deliberately not included. It has its own treatment from
   MOD-083 - full-bleed bar with centred columns, already 19-38px in - and
   changing it here would undo work Brian has signed off.

   TO REVERT: delete this section and the --dr-gutter token.
   ========================================================================== */

@media only screen and (max-width: 980px) {
	body #main#main {
		padding-left: var(--dr-gutter);
		padding-right: var(--dr-gutter);
	}

	/*
	 * The theme's own title bar (Photos, Contact, Videos, Education) sits
	 * outside #main, in .site-main-cover, so the rule above cannot reach it.
	 * Its 10px lives on .page-title itself:
	 *
	 *   .page-title-container   0px      <- putting the gutter here ADDS to the
	 *     .page-title          10px         10px below and lands on 30px
	 *       .page-title-wrapper 0px
	 *         h1
	 *
	 * So the value goes on the element that already owns the gutter, replacing
	 * its 10px rather than stacking on top of it. Class repeated for weight,
	 * same convention as section 8.
	 */
	body .page-title.page-title {
		padding-left: var(--dr-gutter);
		padding-right: var(--dr-gutter);
	}

	/*
	 * .page-title-wrapper takes on its own 10px above 800px, which stacked on
	 * top of the gutter and put those four titles at 30px while every other
	 * page was at 20px. The gutter comes from one place, so this one goes to
	 * zero for the width of this block. Above 980px it is left alone - there
	 * the wrapper's max-width (960px) centres it and the 10px is part of the
	 * desktop look Brian signed off.
	 */
	body .page-title .page-title-wrapper {
		padding-left: 0;
		padding-right: 0;
	}
}