/* SAM Brand Tokens
---------------------------------------------------------------------------- */

:root {
	--sam-teal: #009C98;
	--sam-orange: #F9B233;
	--sam-red: #E7343F;
	--sam-purple: #554596;
	--sam-charcoal: #2A2625;
	--sam-near-black: #111111;
}

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

/* Supplied artwork: a 1555x4 four-colour bar. Stretched to the full width;
   the bands are flat colour so scaling costs nothing.
   Breaks out of the content band to run edge to edge, using the same
   full-bleed technique as `.alignfull` blocks. The extra `.site-container`
   is needed to outrank the generic 100px separator cap further down. */
.site-container .entry-content .sam-color-stripe.wp-block-separator {
	height: 4px;
	margin: 0 calc(-100vw / 2 + 100% / 2) 70px;
	max-width: 100vw;
	width: 100vw;
	background: url("../../images/rainbow-line-thin.png") no-repeat 0 0 / 100% 100%;
	border: none;
}

/* "Rainbow Rule" separator style (registered in lib/blocks.php). The brand
   four-colour line at content width — the contained cousin of the full-bleed
   `.sam-color-stripe` above. The extra `.site-container` outranks the generic
   100px separator cap, as with the stripe. */
.site-container .entry-content .wp-block-separator.is-style-sam-rainbow {
	height: 4px;
	width: 100%;
	max-width: 100%;
	margin-top: 34px;
	margin-bottom: 34px;
	background: url("../../images/rainbow-line-thin.png") no-repeat 0 0 / 100% 100%;
	border: none;
	opacity: 1;
}

.entry-content .wp-block-post-template,
.entry-content .wp-block-post-template > li {
	list-style: none;
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}

/* Breathing room between the full-width/wide sections of a page. Vertical
   margins collapse, so adjacent sections end up 70px apart rather than 140.
   Scoped to section-level blocks so ordinary paragraph flow is untouched. */
.entry-content > .alignwide,
.entry-content > .alignfull {
	margin-bottom: 70px;
	margin-top: 70px;
}

/* The testimonial band sits a little further off the section above it than the
   rest — 75px between the last news row and the top of the tinted panel. Only
   the top margin is raised; because vertical margins collapse to the larger of
   the two, this wins over the 70px on the block above without touching it. */
.entry-content > .sam-testimonial-slider {
	margin-top: 75px;
	/* The tinted panel meets the footer's rainbow rule with no white between
	   them. Zeroing this unconditionally is safe: if a block ever follows the
	   band, that block's own 70px top margin still separates the two, since
	   adjacent vertical margins collapse to the larger value. */
	margin-bottom: 0;
}

/* The Hero + Slider leads a conference page and sits close to the content that
   follows, so it skips the standard 70px section gap beneath it. */
.entry-content > .sam-hero-slider {
	margin-bottom: 0;
}

/* The homepage ends on the full-bleed testimonial band, so the entry's usual
   60px tail would show as white between the band and the footer. Scoped to the
   homepage rather than removed outright — on an archive that margin is what
   separates one entry from the next. */
.home .site-inner .entry {
	margin-bottom: 0;
}

/* The leading block sits flush; on the homepage the hero runs under the
   transparent header. */
.entry-content > *:first-child {
	margin-top: 0;
}

/* The figure is full-bleed, but the image inside only draws at its natural
   width — the core rule that stretches an alignfull image to 100% isn't loaded
   for the ACF block's raw markup. Fill the figure so the hero runs edge to
   edge (the 1556px source upscales, matching the old core-image behaviour). */
.sam-hero img {
	display: block;
	width: 100%;
}

/* The homepage columns are printed as raw markup by the ACF block templates,
   so the core Columns layout CSS — which only reaches real column blocks via
   the `.is-layout-flex` class WordPress injects at render — never applies.
   Lay the two-column rows out explicitly. Columns are equal halves (flex-basis
   0 + grow), so the gap sits between them without forcing a wrap; they stack
   below the 782px breakpoint core uses. */
.sam-intro-support,
.sam-news__columns {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.sam-intro-support > .wp-block-column,
.sam-news__columns > .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

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

	.sam-intro-support > .wp-block-column,
	.sam-news__columns > .wp-block-column {
		flex-basis: 100%;
	}

}

/* Shared type scale for the two columns below the hero. The button selector
   carries the extra `.site-container` to outrank the 16px default further
   down this file. */
.sam-intro h2,
.sam-support-card h2,
.sam-section-heading {
	font-size: 40px;
}

.sam-intro p,
.sam-support-card p {
	font-size: 24px;
}

.site-container .sam-intro .wp-block-button .wp-block-button__link,
.site-container .sam-support-card .wp-block-button .wp-block-button__link {
	font-size: 22px;
}

/* Hover/focus darkens each CTA to a deeper shade of its own colour and keeps
   the label white — matching the header Sign In / Join buttons. Without this the
   global `a:hover` rule greyed the label instead, and the shared button-hover
   rule laid a pale wash over it; both are overridden here. The teal matches the
   header hover exactly (#178f8a); the amber is the same darkening for orange.
   The resting colour comes from WordPress's `.has-*-background-color` preset
   class, which is `!important`, so the hover colour has to be `!important` too —
   these selectors are more specific, so they win the `!important` tie. */
.site-container .sam-intro .wp-block-button .wp-block-button__link:hover,
.site-container .sam-intro .wp-block-button .wp-block-button__link:focus {
	background-color: #178f8a !important;
	color: #fff;
	box-shadow: none;
}

.site-container .sam-support-card .wp-block-button .wp-block-button__link:hover,
.site-container .sam-support-card .wp-block-button .wp-block-button__link:focus {
	background-color: #e0a01e !important;
	color: #fff;
	box-shadow: none;
}

/* Background colour and image come from the block's own settings so an editor
   can change them under Styles → Background; only layout lives here. */
.sam-support-card {
	position: relative;
	color: #fff;
	padding: 45px 40px;
	text-align: center;
}

.sam-support-card h2,
.sam-support-card p {
	color: #fff;
}

/* The buttons row is flex, so `text-align: center` on the card can't place it —
   the comp centres the CTA under the copy. (The core `is-content-justification`
   class that used to do this isn't loaded for the ACF-rendered markup.) */
.sam-support-card .wp-block-buttons {
	justify-content: center;
}

/* Supplied artwork: a 1263x9 strip carrying the orange square and the hairline
   rule that follows it. Sized to 100% of the heading block — not the page — so
   it stays inside the content band. The 1263px source is within a couple of
   percent of the 1280px band, so the square keeps its proportions. */
.sam-section-heading {
	padding-bottom: 20px;
	margin-bottom: 40px !important;
	background: url("../../images/divider-yellow-square.png") no-repeat left bottom / 100% 9px;
}

.sam-date-badge {
	display: inline-block;
	background-color: var(--sam-teal);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 6px 12px;
	margin-bottom: 14px;
}

.sam-date-badge::before {
	font-family: dashicons;
	content: "\f469";
	font-size: 14px;
	line-height: 1;
	vertical-align: -2px;
	margin-right: 4px;
}

.sam-news-featured-thumb {
	margin-bottom: 14px;
}

/* Each row pairs the thumbnail with its text. Like the columns above, this
   flex layout used to come from the core Group block's layout support; the ACF
   template emits raw markup, so set it explicitly (nowrap, aligned to the top,
   24px between thumbnail and text — the comp's gap). */
.sam-news-list-item {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 28px;
}

/* The query loop wraps each row in its own <li>, so the rows are never
   siblings of one another — `.sam-news-list-item:last-child` would match every
   row and zero out the gap above. The <li> elements are the real siblings. */
.wp-block-post-template > li:last-child > .sam-news-list-item {
	margin-bottom: 0;
}

/* Feature card. The comp draws a 1px rule around the whole card with the
   image bleeding to its top and side edges, so the padding lives on the text
   children rather than on the card itself. */
.sam-news-feature-card {
	border: 1px solid #959595;
	padding-bottom: 40px;
}

.sam-news-feature-card .wp-block-post-featured-image {
	margin: 0;
}

.sam-news-feature-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Straddles the bottom edge of the image. translateY(-50%) is measured
   against the badge's own height, so it stays centred on the edge if the
   badge's type or padding ever changes. */
.sam-news-feature-card .sam-date-badge {
	position: relative;
	margin-left: 40px;
	margin-bottom: 0;
	transform: translateY(-50%);
}

.sam-news-feature-card .wp-block-post-title,
.sam-news-feature-card .wp-block-post-excerpt {
	padding-left: 40px;
	padding-right: 40px;
}

/* Each row is a flex pair, so the thumbnail must not shrink and the text must
   be allowed to narrow below its min-content width — without `min-width: 0` a
   single long word in a headline would push the row past the column edge. */
.sam-news-list-item > .wp-block-post-featured-image {
	flex: 0 0 auto;
}

/* Pin the list thumbnail to the comp's 285x165 box. Without an explicit height
   the image renders at its intrinsic size — a portrait source blew the row out
   by ~1300px and pushed the whole page down past the footer. object-fit crops
   the image into the box rather than distorting it. */
.sam-news-list-item .sam-news-featured-thumb {
	width: 285px;
	margin-bottom: 0;
}

.sam-news-list-item .sam-news-featured-thumb img {
	display: block;
	width: 285px;
	height: 165px;
	object-fit: cover;
}

/* On phones the fixed 285px thumbnail beside the text squeezed the copy into a
   sliver. Stack instead: full-width image with the text below it. */
@media only screen and (max-width: 600px) {

	.sam-news-list-item {
		flex-direction: column;
		gap: 12px;
	}

	.sam-news-list-item .sam-news-featured-thumb {
		width: 100%;
	}

	.sam-news-list-item .sam-news-featured-thumb img {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}

	/* Center the intro column's heading/body/button and the news section
	   heading on phones. */
	.sam-intro {
		text-align: center;
	}

	.sam-intro .wp-block-buttons {
		justify-content: center;
	}

	.sam-section-heading {
		text-align: center;
	}
}

.sam-news-list-item__text {
	min-width: 0;
}

.sam-news-list-item h3 {
	margin: 0 0 6px;
	overflow-wrap: break-word;
}

.sam-news-list-item p {
	margin: 0;
	color: #555;
}

/* Shared type scale for the two news columns, so the feature card and the list
   rows stay in step. The excerpt sizing has to reach the paragraph itself
   rather than the block wrapper — the global `p` rule would otherwise win over
   an inherited size. */
.sam-news-feature-card .wp-block-post-title,
.sam-news-list-item h3 {
	font-size: 23px;
}

.sam-news-feature-card .wp-block-post-excerpt p,
.sam-news-list-item p {
	font-size: 17px;
	line-height: 22px;
}

/* The comp sets these headlines in the body charcoal rather than the theme
   link blue — the teal date badge is meant to be the only colour in the list.
   Hover falls back to teal, since the global #333 hover would be almost
   indistinguishable from the resting colour here. No underline in either state;
   the colour change alone carries the hover. */
.entry-content .wp-block-query .wp-block-post-title a {
	color: var(--sam-charcoal);
	text-decoration: none;
}

.entry-content .wp-block-query .wp-block-post-title a:focus,
.entry-content .wp-block-query .wp-block-post-title a:hover {
	color: var(--sam-teal);
	text-decoration: none;
}

/* Testimonial Slider
----------------------------------------------------------------------------
   Component styles for the `acf/sam-testimonials` block. Ported from the
   previous JS block's stylesheet; the front-end behaviour lives in
   js/testimonial-slider.js. Asset paths resolve from this file's location
   (lib/gutenberg/) to the theme's /design-assets directory. */

.sam-testimonial-slider {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 90px 30px;
	/* A faint sheet-music texture on #f1f5f6; the flat colour matches the
	   artwork so the panel reads correctly while the image loads and beyond
	   the 1556px source width. */
	background-color: #f1f5f6;
	background-image: url("../../design-assets/quote-background.jpg");
	background-size: cover;
	background-position: center;
}

.sam-testimonial-slider__track {
	position: relative;
	/* Matches the comp, where the card spans x308-1237 including its 2px rules
	   (box-sizing is border-box). */
	max-width: 930px;
	width: 100%;
}

.sam-testimonial-slide {
	position: relative;
	background-color: #fff;
	border: 2px solid #adb3b3;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
	padding: 38px 50px 30px;
	text-align: center;
}

.sam-testimonial-slider__track > .sam-testimonial-slide + .sam-testimonial-slide {
	margin-top: 24px;
}

/* The quote mark straddles the card's top rule: the supplied mark over a white
   swatch that interrupts the rule behind it, leaving the texture above visible. */
.sam-testimonial-slide::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -26px;
	width: 91px;
	height: 50px;
	background:
		url("../../design-assets/quote-mark.png") no-repeat center / 65px 50px,
		linear-gradient(to bottom, transparent 24px, #fff 24px);
}

.sam-testimonial-slide__quote {
	font-size: 21px;
	line-height: 27px;
	color: var(--sam-charcoal, #2a2625);
	margin: 0 0 18px;
}

.sam-testimonial-slide__name {
	font-size: 21px;
	line-height: 24px;
	font-weight: 700;
	color: var(--sam-charcoal, #2a2625);
	margin: 0;
}

.sam-testimonial-slide__title {
	color: #767676;
	margin: 4px 0 0;
}

.sam-testimonial-slider__nav {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	/* The global `button` rule sets `padding: 15px 30px`; under border-box that
	   would clamp this circle wider and collapse the arrow. Centring is flex. */
	padding: 0;
	border-radius: 50%;
	border: none;
	background-color: #fff;
	color: var(--sam-teal, #009c98);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	cursor: pointer;
}

.sam-testimonial-slider__nav svg {
	flex: 0 0 auto;
	width: 22px;
	height: 19px;
}

.sam-testimonial-slider__nav:hover,
.sam-testimonial-slider__nav:focus {
	background-color: var(--sam-teal, #009c98);
	color: #fff;
}

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

	/* Tighter gap gives the quote card more of the narrow screen width. */
	.sam-testimonial-slider {
		gap: 6px;
		padding: 40px 8px;
	}

	.sam-testimonial-slide {
		padding: 30px 18px 24px;
	}

	.sam-testimonial-slide__quote {
		font-size: 17px;
		line-height: 23px;
	}

	.sam-testimonial-slider__nav {
		width: 40px;
		height: 40px;
	}

}

/* People / Bios Block
---------------------------------------------------------------------------- */

/* One card per person: a fixed square photo beside the name, title and bio.
   Rows are evenly spaced; on narrow screens the photo stacks above the text. */
.sam-people {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.sam-person {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 30px;
}

.sam-person__photo {
	flex: 0 0 auto;
	width: 350px;
}

.sam-person__img {
	display: block;
	width: 350px;
	height: 350px;
	object-fit: cover;
	border-radius: 4px;
}

/* Lets a long word in the bio wrap instead of pushing the row past its edge. */
.sam-person__text {
	min-width: 0;
}

.sam-person__name {
	margin: 0 0 2px;
	font-size: 24px;
	color: var(--sam-charcoal, #2a2625);
}

.sam-person__title {
	margin: 0 0 14px;
	color: var(--sam-teal, #009c98);
	font-weight: 600;
}

/* Photo credit under the image. */
.sam-person__attribution {
	margin: 8px 0 0;
	font-size: 12px;
	font-style: italic;
	line-height: 1.4;
	color: #767676;
}

.sam-person__bio {
	color: #333;
}

.sam-person__bio > :first-child {
	margin-top: 0;
}

.sam-person__bio > :last-child {
	margin-bottom: 0;
}

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

	.sam-person {
		flex-direction: column;
	}

	.sam-person__photo,
	.sam-person__img {
		width: 100%;
		max-width: 350px;
	}

	.sam-person__img {
		height: auto;
		aspect-ratio: 1 / 1;
	}
}

/* Two-Column Text Block
---------------------------------------------------------------------------- */

/* One rich-text field flowed into two balanced columns by the browser — the
   editor writes a single continuous body and never has to decide the split. */
.sam-two-col-text {
	column-count: 2;
	column-gap: 44px;
}

.sam-two-col-text > :first-child {
	margin-top: 0;
}

/* Keep a heading, image or figure from being split across the column break. */
.sam-two-col-text h2,
.sam-two-col-text h3,
.sam-two-col-text h4,
.sam-two-col-text img,
.sam-two-col-text figure {
	break-inside: avoid;
}

.sam-two-col-text img {
	max-width: 100%;
	height: auto;
}

/* Each item (the content between the editor's <hr>s) is kept whole, so a column
   break falls only between items — never leaving an item's tail stranded at the
   top of the second column. */
.sam-two-col-text__item {
	break-inside: avoid;
}

/* The former <hr> divider becomes a clean teal brand rule at the top of every
   item after the first, separating each one. */
.sam-two-col-text__item--divided {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 2px solid var(--sam-teal, #009c98);
}

/* Flagged by js/two-col-text.js when the item is first in a column, so its top
   rule is not left stranded at the column's top edge. */
.sam-two-col-text__item.is-column-top {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.sam-two-col-text__item > :first-child {
	margin-top: 0;
}

.sam-two-col-text__item > :last-child {
	margin-bottom: 0;
}

/* Collapse to a single column on phones, matching the theme's other columns. */
@media only screen and (max-width: 781px) {

	.sam-two-col-text {
		column-count: 1;
	}
}

/* Names (Four Columns) Block
---------------------------------------------------------------------------- */

/* A centered heading above a list of names the browser balances across four
   columns — the editor writes one list and never assigns names to a column. */
.sam-names-columns__heading {
	text-align: center;
	margin: 0 0 30px;
}

.sam-names-columns__list {
	column-count: 4;
	column-gap: 40px;
}

/* Tight, list-like spacing; keep a name that wraps to two lines together. */
.sam-names-columns__list p,
.sam-names-columns__list li {
	margin: 0 0 6px;
	break-inside: avoid;
}

.sam-names-columns__list > :first-child {
	margin-top: 0;
}

/* Fewer columns as the space narrows: 4 → 2 → 1. */
@media only screen and (max-width: 980px) {

	.sam-names-columns__list {
		column-count: 2;
	}
}

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

	.sam-names-columns__list {
		column-count: 1;
	}
}

/* Conference Map Block
---------------------------------------------------------------------------- */

.sam-conference-map__heading {
	text-align: center;
	margin: 0 0 24px;
	font-size: 20px;
}

.sam-conference-map__map {
	position: relative;
}

.sam-conference-map__canvas {
	width: 100%;
	height: 520px;
	background: #eef2f3;
}

/* Covers the map while its pins are being resolved so the fit-to-bounds zoom
   is only shown once, settled. Removed (faded out) when the map is ready. */
.sam-conference-map__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef2f3;
	color: #555;
	font-size: 16px;
	transition: opacity 0.4s ease;
}

.sam-conference-map__map.is-ready .sam-conference-map__loading {
	opacity: 0;
	pointer-events: none;
}

.sam-conference-map__info {
	color: var(--sam-charcoal, #2a2625);
	font-size: 15px;
	line-height: 1.4;
}

.sam-conference-map__info strong {
	font-size: 17px;
}

.sam-conference-map__notice {
	padding: 1.5em;
	text-align: center;
	background: #fff4d6;
	border-radius: 6px;
}

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

	.sam-conference-map__canvas {
		height: 380px;
	}
}

/* Drop Caps
---------------------------------------------------------------------------- */

.site-container p.has-drop-cap:not(:focus)::first-letter {
	margin: 0.02em 0.08em 0 -0.08em;
}

.site-container p.has-larger-font-size.has-drop-cap:not(:focus)::first-letter,
.site-container p.has-small-font-size.has-drop-cap:not(:focus)::first-letter {
	margin-right: 0.01em;
}

/* Paragraphs
---------------------------------------------------------------------------- */

.alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) {
	padding-left: 30px;
	padding-right: 30px;
}

/* Background Color
---------------------------------------------------------------------------- */

.site-container p.has-background {
	padding: 25px 30px;
}

.site-container p.has-background.box-shadow {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.site-container p.has-text-color a,
.site-container p.has-background a {
	color: inherit;
}

.site-container p.has-background a:focus,
.site-container p.has-background a:hover,
.site-container p.has-text-color a:focus,
.site-container p.has-text-color a:hover {
	color: inherit;
	text-decoration: none;
}

.site-container p.has-background.light-text a {
	color: #fff;
	text-decoration: underline;
}

.site-container p.has-background.light-text a:focus,
.site-container p.has-background.light-text a:hover {
	text-decoration: none;
}

/* Alignment
---------------------------------------------------------------------------- */

.has-text-align-center {
	text-align: center;
}

.has-text-align-left {
	text-align: left;
}

.has-text-align-right {
	text-align: right;
}

.wp-block-button.alignleft,
.wp-block-buttons.alignleft,
.wp-block-cover.alignleft,
.wp-block-image .alignleft {
	margin-right: 2em;
}

.wp-block-button.alignright,
.wp-block-buttons.alignright,
.wp-block-cover.alignright,
.wp-block-image .alignright {
	margin-left: 2em;
}

.wp-block-image.alignwide,
.wp-block-image.alignfull,
.wp-block-embed.alignwide,
.wp-block-embed.alignfull {
	margin-bottom: 30px;
}

.full-width-content .entry-content > .alignfull {
	margin-left: calc(-100vw / 2 + 100% / 2);
	margin-right: calc(-100vw / 2 + 100% / 2);
	max-width: 100vw;
}

.content-sidebar .site-container .alignfull,
.sidebar-content .site-container .alignfull {
	margin: 0 0 2em;
	width: 100%;
}

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

	.wp-block-button.home-contact,
	.wp-block-buttons.home-contact {
		float: left;
		margin-left: 0;
	}

}

/* Columns
---------------------------------------------------------------------------- */

.site-container .wp-block-columns.alignfull {
	padding: 0 30px;
}

/* Cover Image
---------------------------------------------------------------------------- */

.full-width-content .entry-content > .wp-block-cover.alignfull {
	width: 100vw;
}

.site-container .wp-block-cover .wp-block-cover-text {
	font-size: 48px;
}

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

.gb-block-cta .gb-button {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}

.site-container .wp-block-button .wp-block-button__link {
	border-width: 0;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	width: auto;
}

.site-container .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	padding: 13px 28px;
}

.site-container .wp-block-button .wp-block-button__link:focus,
.site-container .wp-block-button .wp-block-button__link:hover,
.site-container .wp-block-button.is-style-outline .wp-block-button__link:focus,
.site-container .wp-block-button.is-style-outline .wp-block-button__link:hover {
	box-shadow: inset 0 0 200px rgba(230, 230, 230, 0.25);
}

/* Blockquotes and captions
---------------------------------------------------------------------------- */

.site-container .wp-block-pullquote,
.site-container .wp-block-quote {
	border: none;
	margin: 24px 24px 36px;
}

.wp-block-pullquote.alignleft {
	margin: 0 2em 1.5em 0;
}

.wp-block-pullquote.alignright {
	margin: 0 0 1.5em 2em;
}

.site-container .wp-block-pullquote p,
.site-container .wp-block-quote p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-style: italic;
	line-height: 1.8;
	margin-bottom: 42px;
}

.site-container .wp-block-pullquote p,
.site-container .wp-block-quote.is-style-large p {
	font-size: 32px;
}

.site-container .wp-block-pullquote.is-style-solid-color p {
	color: #fff;
	margin-bottom: 42px;
	text-align: center;
}

.site-container .wp-block-pullquote.is-style-solid-color {
	background-color: #333;
}

.wp-block-pullquote.is-style-solid-color.alignleft blockquote,
.wp-block-pullquote.is-style-solid-color.alignright blockquote {
	max-width: 80%;
}

.site-container .wp-block-pullquote:not(.is-style-solid-color)[style*="border-color"] {
	border: 2px solid;
	border-left: none;
	border-right: none;
}

.site-container .wp-block-pullquote cite,
.site-container .wp-block-quote cite {
	color: #666;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: italic;
	margin-top: -25px;
	text-align: inherit;
	text-transform: none;
}

.site-container .wp-block-pullquote cite {
	text-align: center;
}

.site-container .wp-block-pullquote.is-style-solid-color cite {
	color: #fff;
	font-style: italic;
}

.site-container .wp-block-pullquote .has-text-color cite,
.site-container .wp-block-pullquote .has-text-color p {
	color: currentColor;
}

.blocks-gallery-caption {
	width: 100%;
}

.blocks-gallery-item figcaption {
	margin-bottom: 0;
}

/* Category Block
---------------------------------------------------------------------------- */

.site-container .wp-block-categories {
	margin-left: 0;
	padding-left: 0;
}

.site-container .wp-block-categories li {
	list-style-type: none;
}

.site-container .wp-block-categories.aligncenter {
	text-align: center;
}

.site-container .wp-block-categories.alignfull {
	padding: 0 30px;
}

.site-container .wp-block-categories .children {
	padding-left: 30px;
}

/* Latest Posts Block
---------------------------------------------------------------------------- */

.site-container .wp-block-latest-posts {
	margin-left: 0;
	padding-left: 0;
}

.site-container .wp-block-latest-posts li {
	list-style-type: none;
}

.site-container .wp-block-latest-posts.aligncenter {
	text-align: center;
}

.site-container .wp-block-latest-posts.alignfull {
	padding: 0 30px;
}

/* Genesis Blocks
---------------------------------------------------------------------------- */

.gb-block-post-grid h2 a {
	text-decoration: none;
}

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

	.gb-block-container.alignfull::before {
		content: " ";
		display: table;
	}

	.gb-block-container.alignfull::after {
		clear: both;
		content: " ";
		display: table;
	}

}

/* Other Blocks
---------------------------------------------------------------------------- */

.wp-block-preformatted,
.wp-block-verse {
	font-size: 16px;
}

.wp-block-preformatted {
	white-space: pre-wrap;
}

hr.wp-block-separator {
	border: none;
	border-bottom: 1px solid currentColor;
	color: #eee;
	margin: 1.65em auto;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	max-width: 100px;
}

.wp-block-separator.is-style-dots {
	color: #333;
}

.wp-block-audio audio {
	display: inline-block;
	width: 100%;
}

.site-container .blocks-gallery-grid,
.site-container .wp-block-gallery,
.site-container .wp-block-social-links {
	padding-left: 0;
}

.wp-block-table.is-style-stripes {
	border-bottom-width: 0;
}

.full-width-content .site-container .wp-block-table.alignfull {
	margin: 0;
	width: 100%;
}

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

	.full-width-content .site-container > .wp-block-table.alignwide {
		width: calc(100% + 360px);
	}

	.full-width-content .site-container > .wp-block-table.alignfull {
		margin-left: calc(-100vw / 2 + 100% / 2);
		margin-right: calc(-100vw / 2 + 100% / 2);
		width: 100vw;
	}

}

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

	.wp-block-media-text.is-stacked-on-mobile figure {
		margin-bottom: 20px;
	}

}

/* Media Queries
---------------------------------------------------------------------------- */

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

	/* Pull the block out symmetrically until it fills the shared content band,
	   then centre it. The width is clamped to the viewport (less a 20px gutter
	   each side) so the breakout never runs past the screen edge on mid-size
	   windows — below ~1340px the un-clamped 1300px band overflowed and pushed
	   the left of fixed-width content (e.g. bio photos) off-screen. At full
	   desktop the clamp is inert, so wide desktops are unchanged. */
	.full-width-content .entry-content > .alignwide {
		max-width: min(var(--sam-content-width), 100vw - 40px);
		margin-left: calc(50% - min(var(--sam-content-width), 100vw - 40px) / 2);
		margin-right: calc(50% - min(var(--sam-content-width), 100vw - 40px) / 2);
		width: auto;
	}

	.alignfull .alignwide,
	.alignwide .alignwide {
		max-width: var(--sam-content-width);
		margin: 0 auto;
	}

}

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

	.site-container .wp-block-column {
		flex-basis: 100%;
		margin-left: 0;
		margin-right: 0;
	}

}

/* Hero + Slider Block
---------------------------------------------------------------------------- */

/* Hero image on the left, an autoplaying slider on the right at equal height.
   Stacks on tablet/phone. Behaviour: js/hero-slider.js. */
.sam-hero-slider {
	display: flex;
	align-items: stretch;
	gap: 20px;
}

.sam-hero-slider__hero {
	flex: 1 1 60%;
	min-width: 0;
}

.sam-hero-slider__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	/* `contain` shows the whole hero image (no crop), fitted to the left column;
	   any spare height above/below is centred. */
	object-fit: contain;
	object-position: center;
}

/* Right column: the slider, with any optional content stacked beneath it.
   Shifted up so the slider sits closer to the page title. A transform (not a
   negative margin) is used because flex `stretch` absorbs cross-axis margins. */
.sam-hero-slider__aside {
	flex: 1 1 40%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transform: translateY(-25px);
}

.sam-hero-slider__slider {
	position: relative;
	min-height: 360px;
	min-width: 0;
	overflow: hidden;
}

.sam-hero-slider__html > :first-child {
	margin-top: 0;
}

.sam-hero-slider__html > :last-child {
	margin-bottom: 0;
}

.sam-hero-slider__track {
	position: relative;
	height: 100%;
	min-height: 360px;
}

/* Slides are stacked and cross-faded. */
.sam-hero-slider__slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background-position: center;
	background-size: cover;
	text-decoration: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	pointer-events: none;
}

.sam-hero-slider__slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

/* Scrim so the overlay text stays legible over the lower part of the image. */
.sam-hero-slider__slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 45%, rgba(0, 0, 0, 0.72));
}

/* Overlay text sits in its own semi-transparent bar over the lower image. */
.sam-hero-slider__slide-text {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 16px;
	padding: 12px 16px;
	background-color: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

/* Prev / next arrows, centred over the slider's sides. */
.sam-hero-slider__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.sam-hero-slider__nav:hover,
.sam-hero-slider__nav:focus {
	background: rgba(0, 0, 0, 0.7);
}

.sam-hero-slider__nav--prev {
	left: 10px;
}

.sam-hero-slider__nav--next {
	right: 10px;
}

.sam-hero-slider__nav svg {
	width: 30px;
	height: 30px;
}

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

	.sam-hero-slider {
		flex-direction: column;
	}

	/* Stacked: no upward nudge (that only makes sense side-by-side). */
	.sam-hero-slider__aside {
		transform: none;
	}

	.sam-hero-slider__track {
		min-height: 280px;
	}
}