/*
 * GEF theme overrides — loaded AFTER gefStyleSheet.css and menu.css.
 *
 * Two purposes:
 *  1. Make the top navigation a single, non-wrapping, responsive bar. The
 *     original menu.css used float + fixed percentage widths (15% / 23.33%),
 *     whose math overflows once Twenty Seventeen's element-level ul/li rules
 *     out-specify gefStyleSheet's universal reset — pushing "Contact Us" to a
 *     second line. Flexbox keeps every tab on one line and adapts to width.
 *  2. Move the Google search out of the floating upper-right corner and into a
 *     "Search" nav tab that expands a hidden search panel on click.
 */

/* ---------- Single-line responsive nav bar ---------- */
ul.navigation {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	box-sizing: border-box;
	position: relative;   /* establish a stacking context for the whole nav... */
	z-index: 1000;        /* ...above page content so the hover dropdowns are never
	                         covered (e.g. timeline event cards, which are
	                         position:relative and otherwise paint over the
	                         absolutely-positioned .sub-list dropdowns). */
}

.navigation > li {
	float: none;          /* override original float layout */
	width: auto;          /* override original fixed percentage widths */
	flex: 1 1 0;          /* equal share, allowed to shrink -> never wraps */
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;   /* anchor each dropdown to its own tab */
	box-sizing: border-box;
}

/* The childless tabs (Home, Contact Us, Search) stay a little narrower,
   echoing the original 15% vs 23.33% proportion. */
.navigation > li.shorter-tab {
	flex: 0.7 1 0;
}

.navigation > li > a {
	height: 100%;
	box-sizing: border-box;
}

/* ---------- Dropdowns: match the parent tab's width, centered text ---------- */
.navigation > li .sub-list {
	top: 100%;
	left: 0;
	width: 100%;          /* exactly the width of the parent top-level button */
	box-sizing: border-box;
}

.navigation .sub-list li {
	width: 100%;
	box-sizing: border-box;
}

.navigation .sub-list a {
	white-space: normal;  /* wrap long labels within the tab width */
	text-align: center;   /* center each submenu item */
}

/* ---------- "Search" tab + expanding panel ---------- */
.gef-search-tab {
	position: relative;
}

#gef-search-toggle {
	cursor: pointer;
}

.gef-search-panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 20;
	min-width: 300px;
	padding: 12px;
	background-color: #daded4;
	box-shadow:
		rgba(50, 50, 93, 0.25) 0 2px 5px -1px,
		rgba(0, 0, 0, 0.3) 0 1px 3px -1px;
}

/* Hidden by default; the [hidden] attribute is toggled by gef-nav.js. */
.gef-search-panel[hidden] {
	display: none;
}

/* Native WordPress search form inside the panel. Explicit borders/padding/font
   are required because gefStyleSheet's `* { border:0; padding:0; font-size:20px }`
   global reset would otherwise strip the field and button. */
.gef-search-form {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.gef-search-field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	font-family: "Roboto", "Open Sans", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #3e3e3e;
	background-color: #fff;
	border: 1px solid #aab39e;
	border-radius: 3px;
}

.gef-search-field::placeholder {
	color: #6b6b6b;
	font-style: italic;
}

.gef-search-submit {
	flex: 0 0 auto;
	padding: 8px 16px;
	font-family: "Roboto", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background-color: #828c73;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.gef-search-submit:hover {
	background-color: #919a84;
	color: #000;
}

/* ---------- Mobile: stack the bar (original behavior) ---------- */
@media only screen and (max-width: 600px) {
	ul.navigation {
		flex-direction: column;
		flex-wrap: wrap;
	}

	.navigation > li,
	.navigation > li.shorter-tab {
		flex: 1 1 auto;
		width: 100%;
	}

	.navigation > li .sub-list {
		position: static;
		width: 100%;
		max-width: none;
	}

	.gef-search-panel {
		position: static;
		min-width: 0;
		width: 100%;
	}
}

/* ---------- Gordon Elwood quote: keep it inside its box ----------
   The original used a fixed-height (340px) container with an absolutely-
   positioned quote (#quoteBody). With no positioned ancestor the quote escaped
   the box and overlapped the footer once the text wrapped to more lines (its
   font-size was also mangled by a malformed CSS comment). Rebuilt here as a
   self-contained flex layout: sage title bar on top, photo + quote side by
   side, height grows to fit. Selectors use #gordonQuote + id to outrank the
   originals. */
div#gordonQuote {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	column-gap: 24px;
	width: 900px;
	max-width: 100%;
	height: auto;            /* was fixed 340px -> overflowed */
	box-sizing: border-box;
}

#gordonQuote #quoteHeader {
	order: -1;               /* sage title bar spans the full width, on top */
	flex: 0 0 100%;
	width: auto;             /* was fixed 860px */
	margin-bottom: 16px;
	box-sizing: border-box;
	text-align: center;
}

#gordonQuote #gordonImg {
	float: none;             /* was float:left */
	flex: 0 0 auto;
	width: 269px;
	max-width: 40%;
	height: auto;
	padding-top: 0;
}

#gordonQuote #quoteBody {
	position: static;        /* was absolute -> escaped the container */
	flex: 1 1 320px;
	width: auto;             /* was fixed 598px */
	min-width: 0;
	padding-left: 0;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.4rem !important;
}

@media only screen and (max-width: 600px) {
	#gordonQuote #gordonImg {
		max-width: 60%;
	}

	#gordonQuote #quoteBody {
		flex-basis: 100%;
		font-size: 1.1rem !important;
	}
}

/* ===== Content width — narrow interior pages on large screens =====
   Percentage margins (no hard cap). Interior pages (#content) sit at 60% of the
   viewport by default; on large/maximized screens this pulls them in ~20% more.
   Single tuning knob: the 26% below (higher = narrower).

   NOTE: the homepage is intentionally NOT narrowed here. It's a full-bleed hero
   with 50/50 text|image rows; squeezing it makes the text columns run long and
   look uneven next to the images. Reverted per user feedback — homepage stays
   full-bleed (its approved look). */
@media (min-width: 1200px) {
	#content {
		padding-left: 26%;
		padding-right: 26%;
	}
}

/* ===== Homepage Gordon Elwood quote (Media & Text) =====
   Center the merged image+quote unit and keep it a compact, even-proportioned
   block instead of spanning the full-bleed homepage width. Tunable max-width. */
.gef-gordon-quote {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	column-gap: 1.5em;
}

/* ===== Quote blocks (site-wide) =====
   Standard core Quote blocks rendered as clean, centered cards — applies to EVERY
   quote block on the site. Values tuned in-browser. The doubled .wp-block-quote
   selector raises specificity to outrank the parent theme without needing an extra
   class. Width is 75% of the (adjustable) content width, centered.

   NOTE: background color is intentionally NOT set here. Each quote's background is
   controlled per-block by the editor via WordPress's native block background-color
   control — the theme must not dictate it. */
.wp-block-quote.wp-block-quote {
	width: 60%;
	max-width: 60%;
	margin-left: auto;
	margin-right: auto;
	margin-block-end: 20px;
	padding: 20px !important;
	box-sizing: border-box;
	border: 0;                   /* drop the parent theme's left border/rule */
	border-radius: 12px;         /* rounded corners */
	font-style: normal;          /* upright quote text, not italic */
}

.wp-block-quote.wp-block-quote cite {
	display: block;
	margin-top: 0.5em;
	font-style: italic;
}

/* ===== Linked images read as clickable (Stories From the Region, etc.) =====
   Video thumbnails and PDF covers are linked <img>s (Gallery/Image blocks with a
   custom link). The originals gave no clickable affordance; restore one here.
   Generic rule: any linked image lifts + shadows + brightens on hover. Video
   thumbnails additionally carry a persistent play badge (scoped via the
   "video-gallery" class added to that gallery) so it's obvious they open a video. */

.wp-block-image a img {
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wp-block-image a:hover img {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
	filter: brightness(1.05);
}

/* Video thumbnails — persistent play badge centered on the thumbnail. The link
   (<a>) already fills the cropped gallery cell, so position it relative and overlay
   ::after. pointer-events:none lets the click fall through to the video link. */
.video-gallery .wp-block-image a {
	position: relative;
}
.video-gallery .wp-block-image a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(0, 0, 0, .55);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 54% 50%;
	background-size: 28px 28px;
	pointer-events: none;
	transition: background-color .2s ease, transform .2s ease;
}
.video-gallery .wp-block-image a:hover::after {
	background-color: rgba(206, 130, 6, .9);   /* brand orange #ce8206 */
	transform: translate(-50%, -50%) scale(1.08);
}

/* ===== Ultimate Blocks "Tabs" — original tabview hover =====
   Tab palette (inactive #e4c5c5 / active #bb8c99) is set via the block's own
   attributes; this only restores the original plum hover on inactive tabs. */
.wp-block-ub-tabbed-content-tab-title-wrap:not(.active):hover {
	background-color: #78404f !important;
}
.wp-block-ub-tabbed-content-tab-title-wrap:not(.active):hover .wp-block-ub-tabbed-content-tab-title {
	color: #ffffff !important;
}

/* ===== Back-to-top floating button (site-wide, shows after scrolling) =====
   Markup in footer.php; behavior in gef-nav.js. Hidden until the visitor scrolls
   past 400px, then fades in at bottom-right. Especially handy on the Timeline page. */
.gef-back-to-top {
	position: fixed;
	right: 1.2rem;
	bottom: 1.4rem;
	z-index: 999;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #ce8206;          /* brand orange */
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease, background-color .2s ease, transform .2s ease;
}
.gef-back-to-top.is-visible {
	opacity: .9;
	visibility: visible;
}
.gef-back-to-top:hover,
.gef-back-to-top:focus-visible {
	background-color: #a86905;
	opacity: 1;
	transform: translateY(-2px);
}
@media (max-width: 600px) {
	.gef-back-to-top { right: .8rem; bottom: .8rem; width: 40px; height: 40px; }
}

/* ---------- Compact, centered footer (links above copyright; order set in footer.php) ----------
   The original gefStyleSheet.css padded the footer children heavily (#footer-text 30px top+bottom,
   #footer-link-list 15px+30px) and gave each <li> a trailing-only `padding-right:40px`, which made
   the centered link row sit visually left. Here: zero the child padding, one small block padding,
   and symmetric per-link margins so the row is truly centered. */
#footer-block {
	padding: 16px 0;
}

#footer-link-list {
	padding: 0;
	margin: 0 0 6px;
	text-align: center;
}

#footer-link-list li {
	display: inline-block;
	padding: 0;
	margin: 0 16px;
	font-weight: 600;
}

#footer-text {
	padding: 0;
	margin: 0;
	text-align: center;
}

@media (max-width: 600px) {
	#footer-link-list li {
		margin: 0 10px 4px;   /* tighter; wraps cleanly on phones */
	}
}