/*
Theme Name: Society For American Music
Description: This is the WordPress theme created for the SAM website
Author: HyperArts
Author URI: https://www.hyperarts.com

Version:           3.9.1

Tags: accessibility-ready, block-styles, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, left-sidebar, one-column, right-sidebar, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, two-columns, wide-blocks

Template: genesis

License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: genesis-sample
Requires at least: 5.4
Requires PHP: 5.6
*/

/* Table of Contents
- HTML5 Reset
	- Baseline Normalize
	- Box Sizing
	- Float Clearing
- Defaults
	- Typographical Elements
	- Headings
	- Objects
	- Gallery
	- Forms
	- Tables
	- Screen Reader Text
- Structure and Layout
	- Site Container
	- Site Inner
- Common Classes
	- Avatar
	- Genesis
	- Search Form
	- Titles
	- WordPress
- Widgets
	- Featured Content
- Plugins
	- Genesis eNews Extended
	- Genesis Simple FAQ
	- WPForms
- Skip Links
- Site Header
	- Title Area
- Site Navigation
	- Responsive Menu
	- Header Menu
	- Footer Menu
- Content Area
	- Entry Content
	- Entry Meta
	- Pagination
	- Entry Comments
- Sidebar
- Footer Widgets
- Site Footer
- Media Queries
	- Min-width: 960px
		- Site Header
		- Genesis Menu
		- Responsive Menu
		- Header Menu
		- Site Inner
		- Content
		- Sidebar
		- Author Box
		- After Entry
		- Column Classes
		- Entry Misc.
		- Footer Widgets
- Print Styles
*/


/* HTML5 Reset
---------------------------------------------------------------------------- */

/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
---------------------------------------------------------------------------- */
/* stylelint-disable */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
/* stylelint-enable */

/* Box Sizing
--------------------------------------------- */

html {
	box-sizing: border-box;
}

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

/* Float Clearing
--------------------------------------------- */

.author-box::before,
.clearfix::before,
.entry::before,
.entry-content::before,
.footer-widgets::before,
.nav-primary::before,
.nav-secondary::before,
.pagination::before,
.site-container::before,
.site-footer::before,
.site-header::before,
.site-inner::before,
.widget::before,
.wrap::before {
	content: " ";
	display: table;
}

.author-box::after,
.clearfix::after,
.entry::after,
.entry-content::after,
.footer-widgets::after,
.nav-primary::after,
.nav-secondary::after,
.pagination::after,
.site-container::after,
.site-footer::after,
.site-header::after,
.site-inner::after,
.widget::after,
.wrap::after {
	clear: both;
	content: " ";
	display: table;
}


/* Defaults
---------------------------------------------------------------------------- */

/* Typographical Elements
--------------------------------------------- */

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body {
	background-color: #fff;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.625;
	margin: 0;
	/* `clip` (not `hidden`) still hides the horizontal overflow from full-bleed
	   100vw sections, but does not make the body a scroll container — which would
	   break `position: sticky` on the inner-page title band. */
	overflow-x: clip;
}

button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.gallery img {
	transition: all 0.2s ease-in-out;
}

a {
	color: #0073e5;
	text-decoration: underline;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:focus,
a:hover {
	color: #333;
	text-decoration: none;
}

p {
	margin: 0 0 28px;
	padding: 0;
}

ol,
ul {
	margin: 0;
	padding: 0;
}

li {
	list-style-type: none;
}

hr {
	border: 0;
	border-collapse: collapse;
	border-bottom: 1px solid currentColor;
	clear: both;
	color: #eee;
	margin: 1.65em auto;
}

b,
strong {
	font-weight: 700;
}

blockquote,
cite,
em,
i {
	font-style: italic;
}

mark {
	background: #ddd;
	color: #333;
}

blockquote {
	margin: 30px;
}

/* Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 20px;
}

h1 {
	font-size: 30px;
}

h2 {
	font-size: 27px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 20px;
}

.entry-content h4 {
	margin-top: 40px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

/* Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video,
.wp-caption {
	max-width: 100%;
}

img {
	height: auto;
	vertical-align: top;
}

figure {
	margin: 0;
}

/* Gallery
--------------------------------------------- */

.gallery {
	overflow: hidden;
}

.gallery img {
	border: 1px solid #eee;
	height: auto;
	padding: 4px;
}

.gallery img:focus,
.gallery img:hover {
	border: 1px solid #999;
	outline: none;
}

.gallery-columns-1 .gallery-item {
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	width: 50%;
}

.gallery-columns-3 .gallery-item {
	width: 33%;
}

.gallery-columns-4 .gallery-item {
	width: 25%;
}

.gallery-columns-5 .gallery-item {
	width: 20%;
}

.gallery-columns-6 .gallery-item {
	width: 16.6666%;
}

.gallery-columns-7 .gallery-item {
	width: 14.2857%;
}

.gallery-columns-8 .gallery-item {
	width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	width: 11.1111%;
}

.gallery-columns-2 .gallery-item:nth-child(2n+1),
.gallery-columns-3 .gallery-item:nth-child(3n+1),
.gallery-columns-4 .gallery-item:nth-child(4n+1),
.gallery-columns-5 .gallery-item:nth-child(5n+1),
.gallery-columns-6 .gallery-item:nth-child(6n+1),
.gallery-columns-7 .gallery-item:nth-child(7n+1),
.gallery-columns-8 .gallery-item:nth-child(8n+1),
.gallery-columns-9 .gallery-item:nth-child(9n+1) {
	clear: left;
}

.gallery-item {
	float: left;
	margin: 0 0 30px;
	text-align: center;
}

/* Forms
--------------------------------------------- */

input,
select,
textarea {
	background-color: #fff;
	border: 1px solid #ddd;
	color: #333;
	font-size: 18px;
	font-weight: 400;
	padding: 15px;
	width: 100%;
}

input:focus,
textarea:focus {
	border: 1px solid #999;
	outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
	width: auto;
}

:-ms-input-placeholder {
	color: #333;
	opacity: 1;
}

::placeholder {
	color: #333;
	opacity: 1;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form input[type="submit"],
.site-container div.wpforms-container-full .wpforms-form button[type="submit"],
.button {
	background-color: #333;
	border: 0;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	width: auto;
}

button:focus,
button:hover,
input[type="button"]:focus,
input[type="button"]:hover,
input[type="reset"]:focus,
input[type="reset"]:hover,
input[type="submit"]:focus,
input[type="submit"]:hover,
.site-container div.wpforms-container-full .wpforms-form input[type="submit"]:focus,
.site-container div.wpforms-container-full .wpforms-form input[type="submit"]:hover,
.site-container div.wpforms-container-full .wpforms-form button[type="submit"]:focus,
.site-container div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.button:focus,
.button:hover {
	background-color: #0073e5;
	border-width: 0;
	color: #fff;
}

.entry-content .button:focus,
.entry-content .button:hover {
	color: #fff;
}

.button {
	display: inline-block;
}

.site-container button:disabled,
.site-container button:disabled:hover,
.site-container input:disabled,
.site-container input:disabled:hover,
.site-container input[type="button"]:disabled,
.site-container input[type="button"]:disabled:hover,
.site-container input[type="reset"]:disabled,
.site-container input[type="reset"]:disabled:hover,
.site-container input[type="submit"]:disabled,
.site-container input[type="submit"]:disabled:hover {
	background-color: #eee;
	border-width: 0;
	color: #777;
	cursor: not-allowed;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
	display: none;
}

/* Tables
--------------------------------------------- */

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 40px;
	width: 100%;
	word-break: break-all;
}

tbody {
	border-bottom: 1px solid #eee;
}

td,
th {
	line-height: 2;
	text-align: left;
	vertical-align: top;
}

td {
	padding: 0.5em;
}

tr {
	border-top: 1px solid #eee;
}

th {
	font-weight: 600;
	padding: 0.5em;
}

/* Screen Reader Text
--------------------------------------------- */

.screen-reader-shortcut,
.screen-reader-text,
.screen-reader-text span {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.screen-reader-shortcut:focus,
.widget_search input[type="submit"]:focus {
	background: #fff;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #333;
	display: block;
	font-size: 1em;
	font-weight: 700;
	height: auto;
	padding: 15px 23px 14px;
	text-decoration: none;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

.more-link {
	display: inline-block;
	position: relative;
	margin-bottom: 30px;
}


/* Structure and Layout
---------------------------------------------------------------------------- */

/* Site Container
--------------------------------------------- */

.site-container {
	animation: fadein 1s;
	word-wrap: break-word;
}

@keyframes fadein {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}

}

/* Site Inner
--------------------------------------------- */

.site-inner {
	clear: both;
	margin: 0 auto;
	padding: 60px 30px 0;
}


/* Common Classes
---------------------------------------------------------------------------- */

/* Avatar
--------------------------------------------- */

.avatar {
	border-radius: 50%;
	float: left;
}

.author-box .avatar,
.alignleft .avatar {
	margin-right: 20px;
}

.alignright .avatar {
	margin-left: 20px;
}

.comment .avatar {
	margin: 0 15px 20px 0;
}

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

.after-entry,
.archive-description,
.author-box {
	margin-bottom: 40px;
}

.after-entry {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
	padding: 20px 30px;
}

.after-entry .widget:last-of-type {
	margin-bottom: 0;
}

.breadcrumb {
	border-bottom: 1px solid #eee;
	font-size: 16px;
	margin-bottom: 40px;
	padding-bottom: 10px;
}

.genesis-title-hidden .breadcrumb {
	margin-top: 40px;
}

.archive-description p:last-child,
.author-box p:last-child {
	margin-bottom: 0;
}

/* Search Form
--------------------------------------------- */

.search-form {
	overflow: hidden;
}

.entry-content .search-form {
	margin-bottom: 40px;
	width: 50%;
}

.post-password-form input[type="submit"],
.search-form input[type="submit"] {
	margin-top: 10px;
}

.widget_search input[type="submit"] {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Titles
--------------------------------------------- */

.archive-description .entry-title,
.archive-title,
.author-box-title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 10px;
}

.entry-title {
	font-size: 30px;
	margin-bottom: 10px;
}

.entry-title a,
.sidebar .widget-title a {
	color: #333;
	text-decoration: none;
}

.entry-title a:focus,
.entry-title a:hover {
	color: #0073e5;
}

.widget-title {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 20px;
}

.genesis-title-hidden .site-inner {
	padding-top: 0;
}

/* WordPress
--------------------------------------------- */

a.aligncenter img {
	display: block;
	margin: 0 auto;
}

a.alignnone {
	display: inline-block;
}

.alignleft {
	float: left;
	text-align: left;
}

.alignright {
	float: right;
	text-align: right;
}

a.alignleft,
a.alignnone,
a.alignright {
	max-width: 100%;
}

img.centered,
.aligncenter,
.singular-image {
	display: block;
	margin: 0 auto 30px;
}

img.alignnone,
.alignnone {
	margin-bottom: 15px;
}

a.alignleft,
img.alignleft,
.wp-caption.alignleft {
	margin: 0 20px 20px 0;
}

a.alignright,
img.alignright,
.wp-caption.alignright {
	margin: 0 0 20px 20px;
}

figcaption,
.gallery-caption,
.wp-caption-text {
	font-size: 14px;
	font-weight: 600;
	margin-top: 0.5em;
	margin-bottom: 1em;
	padding-left: 10px;
	padding-right: 10px;
	text-align: center;
}

.entry-content p.wp-caption-text {
	margin-bottom: 0;
}

.entry-content .wp-audio-shortcode,
.entry-content .wp-playlist,
.entry-content .wp-video {
	margin: 0 0 30px;
}

/* Widgets
---------------------------------------------------------------------------- */

.widget {
	margin-bottom: 40px;
}

.widget p:last-child,
.widget ul > li:last-of-type {
	margin-bottom: 0;
}

.widget ul > li {
	margin-bottom: 10px;
}

.widget ul > li:last-of-type {
	padding-bottom: 0;
}

.widget ol > li {
	list-style-position: inside;
	list-style-type: decimal;
	padding-left: 20px;
	text-indent: -20px;
}

.widget li li {
	border: 0;
	margin: 0 0 0 30px;
	padding: 0;
}

.widget_calendar table {
	width: 100%;
}

.widget_calendar td,
.widget_calendar th {
	text-align: center;
}

/* Featured Content
--------------------------------------------- */

.featured-content .entry {
	border-bottom: 1px solid #eee;
	margin-bottom: 20px;
}

.featured-content .entry:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
}

.featured-content .entry-title {
	font-size: 16px;
	margin-bottom: 5px;
	margin-top: 10px;
}


/* Plugins
---------------------------------------------------------------------------- */

/* Genesis eNews Extended
--------------------------------------------- */

.after-entry .enews {
	text-align: center;
	padding: 10px;
}

.sidebar .enews {
	background-color: #f5f5f5;
	padding: 30px;
}

.enews-widget input {
	font-size: 16px;
	margin-bottom: 10px;
}

.after-entry .enews-widget input {
	text-align: center;
}

.enews-widget input[type="submit"] {
	margin: 0;
	width: 100%;
}

.enews form + p {
	margin-top: 20px;
}

/* Genesis Simple FAQ
--------------------------------------------- */

.gs-faq__question {
	background: transparent;
	border-bottom: 1px solid #eee;
	color: #333;
	padding-left: 0;
	padding-right: 0;
}

.gs-faq__question:focus,
.gs-faq__question:hover {
	background: transparent;
	color: #0073e5;
}

.gs-faq__question::after {
	content: "\f132";
	font-family: dashicons; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
	float: right;
}

.gs-faq__question.gs-faq--expanded::after {
	content: "\f460";
}

/* WP Forms
--------------------------------------------- */

.entry-content .wpforms-container {
	margin-bottom: 40px;
}

.entry-content .wpforms-form .wpforms-field {
	clear: both;
	margin: 20px 0;
	overflow: hidden;
}

.site-container .wpforms-container .wpforms-form .wpforms-field input {
	border-radius: 0;
	height: auto;
	padding: 15px;
}

.site-container .entry-content .wpforms-form .wpforms-field-label {
	font-weight: 600;
}

.site-container .entry-content .wpforms-form .wpforms-field-sublabel {
	font-size: 14px;
	font-weight: 300;
}

.entry-content .wpforms-form .wpforms-field-hp {
	display: none !important;
	left: -9000px !important;
	position: absolute !important;
}

.site-container .entry-content .wpforms-form textarea {
	padding: 15px;
}

.site-container .entry-content .wpforms-form textarea.wpforms-field-small {
	height: 120px;
}

.site-container .entry-content .wpforms-form textarea.wpforms-field-medium {
	height: 200px;
}

.site-container .entry-content .wpforms-form textarea.wpforms-field-large {
	height: 300px;
}


/* Skip Links
---------------------------------------------------------------------------- */

.genesis-skip-link {
	margin: 0;
}

.genesis-skip-link .skip-link-hidden {
	display: none;
	visibility: hidden;
}

.genesis-skip-link li {
	height: 0;
	list-style: none;
	width: 0;
}

/* The 1px #ccc focus outline that sat here has been removed. It showed on mouse
   clicks as well as keyboard focus, and was too faint to serve as an indicator
   on either the dark header or the pale page. Keyboard focus is now marked by
   the brand orange ring at the end of this stylesheet, which is matched on
   :focus-visible and so leaves nothing behind after a click. */
:focus {
	color: #333;
}


/* Site Header
---------------------------------------------------------------------------- */

.site-header {
	background-color: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
	padding: 0 20px 0 30px;
}

/* Title Area
--------------------------------------------- */

.title-area {
	float: left;
	padding-bottom: 25px;
	padding-top: 25px;
}

.wp-custom-logo .title-area {
	max-width: 350px;
	padding-bottom: 5px;
	padding-top: 5px;
	width: 100%;
}

.wp-custom-logo .custom-logo-link {
	display: block;
}

.wp-custom-logo .title-area img {
	width: auto;
}

.site-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 0;
}

.site-title a,
.site-title a:focus,
.site-title a:hover {
	color: #333;
	text-decoration: none;
}

.site-description,
.wp-custom-logo .site-title {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}


/* Site Navigation
---------------------------------------------------------------------------- */

.genesis-nav-menu {
	clear: both;
	line-height: 1;
	width: 100%;
}

.genesis-nav-menu .menu-item {
	display: block;
	float: none;
	position: relative;
}

.genesis-nav-menu a {
	color: #333;
	display: block;
	font-size: 15px;
	font-weight: 400;
	outline-offset: -1px;
	padding-bottom: 12px;
	padding-top: 12px;
	text-decoration: none;
}

.genesis-nav-menu a:focus,
.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:focus,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
	color: #0073e5;
	text-decoration: none;
}

.genesis-nav-menu .sub-menu,
.genesis-nav-menu .sub-menu a {
	width: 100%;
}

.genesis-nav-menu .sub-menu {
	clear: both;
	display: none;
	left: -9999px;
	margin: 0;
	opacity: 1;
	padding-left: 15px;
	position: static;
	z-index: 99;
}

.genesis-nav-menu .sub-menu a {
	background-color: #fff;
	font-size: 14px;
	position: relative;
	word-wrap: break-word;
}

.genesis-nav-menu .menu-item:focus,
.genesis-nav-menu .menu-item:hover {
	position: relative;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
	display: block;
	left: auto;
	opacity: 1;
}

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

.menu .menu-item:focus {
	position: static;
}

.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
	left: auto;
	opacity: 1;
}

.js .nav-primary {
	display: none;
	position: relative;
}

.genesis-responsive-menu .genesis-nav-menu .menu-item:hover > .sub-menu {
	display: none;
}

.menu-toggle,
.sub-menu-toggle {
	background-color: transparent;
	border-width: 0;
	color: #333;
	display: block;
	margin: 0 auto;
	overflow: hidden;
	text-align: center;
	visibility: visible;
}

.menu-toggle:focus,
.menu-toggle:hover,
.sub-menu-toggle:focus,
.sub-menu-toggle:hover {
	background-color: transparent;
	border-width: 0;
	color: #0073e5;
}

.menu-toggle {
	float: right;
	line-height: 20px;
	margin-bottom: 10px;
	margin-top: 10px;
	padding: 15px 0;
	position: relative;
	z-index: 1000;
}

.menu-toggle.activated::before {
	content: "\f335";
}

.site-header .dashicons-before::before {
	transition: none;
}

.site-header .menu-toggle::before {
	float: left;
	margin-right: 5px;
	position: relative;
	text-rendering: auto;
	top: 1px;
}

.sub-menu-toggle {
	float: right;
	padding: 9px 10px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 100;
}

.sub-menu .sub-menu-toggle {
	padding: 12px 10px;
}

.sub-menu-toggle::before {
	display: inline-block;
	text-rendering: auto;
	transform: rotate(0);
	transition: transform 0.25s ease-in-out;
}

.sub-menu-toggle.activated::before {
	transform: rotate(180deg);
}

/* Header Menu
--------------------------------------------- */

.nav-primary {
	clear: left;
	padding: 15px 0 15px 15px;
	width: 100%;
	margin-left: -15px;
	margin-right: 0;
}

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

.nav-secondary {
	margin-top: 10px;
}

.nav-secondary .genesis-nav-menu {
	line-height: 1.5;
}

.nav-secondary .menu-item {
	display: inline-block;
}

.nav-secondary a {
	margin-left: 10px;
	margin-right: 10px;
	padding: 0;
}


/* Content Area
---------------------------------------------------------------------------- */

/* Entry Content
--------------------------------------------- */

.entry {
	margin-bottom: 40px;
}

.entry-content ol,
.entry-content ul {
	margin-bottom: 30px;
	padding-left: 40px;
}

.entry-content ol > li {
	list-style-type: decimal;
}

.entry-content ul > li {
	list-style-type: disc;
}

.entry-content ol ul > li,
.entry-content ul ul > li {
	list-style-type: circle;
}

.entry-content ol ol,
.entry-content ul ul {
	margin-bottom: 0;
}

.entry-content code {
	background-color: #f5f5f5;
}

.content .sticky {
	background-color: #f5f5f5;
	padding: 30px;
}

/* Entry Meta
--------------------------------------------- */

p.entry-meta {
	font-size: 16px;
	margin-bottom: 0;
}

.entry-header .entry-meta {
	margin-bottom: 20px;
}

.entry-footer .entry-meta {
	border-top: 1px solid #eee;
	padding-top: 20px;
}

.entry-categories,
.entry-tags {
	display: block;
}

.entry-comments-link::before {
	content: "\2014";
	margin: 0 6px 0 2px;
}

/* Pagination
--------------------------------------------- */

.pagination {
	clear: both;
	margin: 60px 0;
}

.adjacent-entry-pagination {
	margin-bottom: 0;
}

.archive-pagination li {
	display: inline;
}

.archive-pagination li a {
	background-color: #f5f5f5;
	color: #333;
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
	padding: 8px 12px;
	text-decoration: none;
}

.archive-pagination li a:focus,
.archive-pagination li a:hover,
.archive-pagination li.active a {
	background-color: #333;
	color: #fff;
}

/* Entry Comments
--------------------------------------------- */

.comment-respond,
.entry-comments,
.entry-pings {
	margin-bottom: 40px;
}

.comment-list li {
	padding: 40px 0 0 30px;
}

.comment-list .depth-1 {
	padding-left: 0;
}

.comment-header {
	margin-bottom: 30px;
}

.comment-content {
	clear: both;
}

.comment-content ul > li {
	list-style-type: disc;
}

.comment-respond input[type="email"],
.comment-respond input[type="text"],
.comment-respond input[type="url"] {
	width: 50%;
}

.comment-respond label {
	display: block;
	margin-right: 12px;
}

.comment-header p {
	margin-bottom: 0;
}

.entry-pings .reply {
	display: none;
}

.comment-form-cookies-consent label {
	display: inline;
	padding-left: 10px;
}

/* Sidebar
---------------------------------------------------------------------------- */

.sidebar {
	font-size: 16px;
	line-height: 1.5;
}

.sidebar .widget {
	margin-bottom: 40px;
}

.sidebar p {
	margin-bottom: 20px;
}

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

.footer-widgets {
	border-top: 1px solid #eee;
	background-color: #fff;
	clear: both;
	padding: 60px 0;
}

.footer-widgets .wrap {
	margin-left: auto;
	margin-right: auto;
}

.footer-widget-area {
	margin-bottom: 40px;
	padding-left: 30px;
	padding-right: 30px;
}

.footer-widget-area:last-child,
.footer-widgets .widget:last-child {
	margin-bottom: 0;
}


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

.site-footer {
	background-color: #fff;
	border-top: 1px solid #eee;
	font-size: 15px;
	line-height: 1.5;
	padding: 30px;
	text-align: center;
}

.site-footer p {
	margin-bottom: 0;
}


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

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

	table {
		table-layout: auto;
		word-break: normal;
	}

}

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

	/* Site Header
	--------------------------------------------- */

	.site-header {
		position: sticky;
		top: 0;
		z-index: 9999;
	}

	.admin-bar .site-header {
		top: 32px;
	}

	/* Genesis Menu
	--------------------------------------------- */

	.genesis-nav-menu .menu-item {
		display: inline-block;
	}

	.genesis-nav-menu .menu-item:focus,
	.genesis-nav-menu .menu-item:hover {
		position: relative;
	}

	.genesis-nav-menu > .menu-bold > a {
		font-weight: 700;
	}

	.genesis-nav-menu > .menu-highlight > a {
		background-color: #333;
		border-radius: 3px;
		color: #fff;
		font-weight: 600;
		margin-left: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.genesis-nav-menu > .menu-highlight > a:focus,
	.genesis-nav-menu > .menu-highlight > a:hover {
		background-color: #0073e5;
	}

	.genesis-nav-menu .sub-menu,
	.genesis-nav-menu .sub-menu a {
		width: 180px;
	}

	.genesis-nav-menu .sub-menu {
		border-top: 1px solid #eee;
		opacity: 0;
		padding-left: 0;
		position: absolute;
		transition: opacity 0.4s ease-in-out;
	}

	.genesis-nav-menu .sub-menu a {
		border: 1px solid #eee;
		border-top: 0;
		padding-bottom: 15px;
		padding-top: 15px;
	}

	/* Dropdown rows stack vertically. The top-level items are inline-block for
	   the horizontal bar, which the sub-menu items inherit; force them to block
	   so each page sits on its own line. The row is also the positioning context
	   for its fly-out child menu. Selector carries `.site-header .nav-primary` to
	   outrank the inline-block rule that also targets header menu items. */
	.site-header .nav-primary .genesis-nav-menu .sub-menu .menu-item {
		display: block;
		position: relative;
		width: 100%;
	}

	.genesis-nav-menu .sub-menu .menu-item > .sub-menu,
	.genesis-nav-menu .sub-menu .menu-item:hover > .sub-menu {
		top: 0;
		left: 100%;
		right: auto;
		margin: 0;
	}

	/* Near the right edge, nav-flyout.js flags the parent so its fly-out opens
	   to the left instead of running off screen. */
	.genesis-nav-menu > .menu-item.sam-opens-left > .sub-menu,
	.genesis-nav-menu > .menu-item.sam-opens-left:hover > .sub-menu {
		left: auto;
		right: 0;
	}

	.genesis-nav-menu .sub-menu .menu-item.sam-opens-left > .sub-menu,
	.genesis-nav-menu .sub-menu .menu-item.sam-opens-left:hover > .sub-menu {
		left: auto;
		right: 100%;
	}

	/* Dropdown menus. A dark panel that continues the header, capped with an
	   orange accent. Items pad out, sit white by default, and pick up the brand
	   orange on hover/focus and when they are the current page. */
	.site-header .genesis-nav-menu .sub-menu {
		background-color: #1a1613;
		border: none;
		border-top: 3px solid var(--sam-orange);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
		min-width: 220px;
		width: auto;
	}

	.site-header .genesis-nav-menu .sub-menu a {
		background-color: transparent;
		border: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		color: #fff;
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		padding: 7px 22px;
		width: auto;
	}

	.site-header .genesis-nav-menu .sub-menu .menu-item:last-child > a {
		border-bottom: none;
	}

	.site-header .genesis-nav-menu .sub-menu a:focus,
	.site-header .genesis-nav-menu .sub-menu a:hover,
	.site-header .genesis-nav-menu .sub-menu .current-menu-item > a,
	.site-header .genesis-nav-menu .sub-menu .current-menu-item > a:focus,
	.site-header .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
	.site-header .genesis-nav-menu .sub-menu .current-menu-ancestor > a,
	.site-header .genesis-nav-menu .sub-menu .current-menu-parent > a,
	.site-header .genesis-nav-menu .sub-menu .current-page-ancestor > a,
	.site-header .genesis-nav-menu .sub-menu .current-page-parent > a {
		background-color: rgba(255, 255, 255, 0.07);
		color: var(--sam-orange);
	}

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

	.js .nav-primary {
		display: block;
		padding-top: 15px;
	}

	.menu-toggle,
	.sub-menu-toggle {
		display: none;
		visibility: hidden;
	}

	/* Header Menu
	--------------------------------------------- */

	.nav-primary {
		clear: none;
		float: right;
		width: auto;
	}

	.nav-primary .genesis-nav-menu a {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* Site-Inner
	--------------------------------------------- */

	.site-inner {
		max-width: calc(var(--sam-content-width) + 60px);
	}

	/* Content
	--------------------------------------------- */

	.content {
		float: left;
		width: 65%;
	}

	.sidebar-content .content {
		float: right;
	}

	.full-width-content .content {
		float: none;
		margin-left: auto;
		margin-right: auto;
		width: 100%;
	}

	/* Sidebar
	--------------------------------------------- */

	.sidebar {
		float: right;
		width: 30%;
	}

	.sidebar-content .sidebar {
		float: left;
	}

	/* Author Box
	--------------------------------------------- */

	.author-box {
		background-color: #f5f5f5;
		padding: 30px;
	}

	/* After Entry
	--------------------------------------------- */

	.after-entry {
		padding: 40px 60px;
	}

	.after-entry .enews {
		padding-left: 30px;
		padding-right: 30px;
	}

	/* Column Classes
	--------------------------------------------- */

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		float: left;
		margin-left: 2.564102564102564%;
	}

	.one-half,
	.three-sixths,
	.two-fourths {
		width: 48.717948717948715%;
	}

	.one-third,
	.two-sixths {
		width: 31.623931623931625%;
	}

	.four-sixths,
	.two-thirds {
		width: 65.81196581196582%;
	}

	.one-fourth {
		width: 23.076923076923077%;
	}

	.three-fourths {
		width: 74.35897435897436%;
	}

	.one-sixth {
		width: 14.52991452991453%;
	}

	.five-sixths {
		width: 82.90598290598291%;
	}

	.first {
		clear: both;
		margin-left: 0;
	}

	/* Entry Misc.
	--------------------------------------------- */

	.after-entry,
	.archive-description,
	.author-box,
	.comment-respond,
	.entry,
	.entry-comments,
	.entry-pings {
		margin-bottom: 60px;
	}

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

	.footer-widgets .wrap {
		max-width: 1140px;
	}

	.footer-widget-area {
		float: left;
		margin-bottom: 0;
		width: calc(100% / 3);
	}

}

/* Print Styles
---------------------------------------------------------------------------- */

@media print {

	*,
	*::before,
	*::after {
		background: transparent !important;
		box-shadow: none !important;
		color: #333 !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]::after {
		content: " (" attr(href) ")";
	}

	abbr[title]::after {
		content: " (" attr(title) ")";
	}

	a[href^="javascript:"]::after,
	a[href^="#"]::after,
	.site-title > a::after {
		content: "";
	}

	thead {
		display: table-header-group;
	}

	img,
	tr {
		page-break-inside: avoid;
	}

	img {
		max-width: 100% !important;
	}

	@page {
		margin: 2cm 0.5cm;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	blockquote,
	pre {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	.content,
	.content-sidebar {
		width: 100%;
	}

	button,
	input,
	select,
	textarea,
	.breadcrumb,
	.comment-edit-link,
	.comment-form,
	.comment-list .reply a,
	.comment-reply-title,
	.edit-link,
	.entry-comments-link,
	.entry-footer,
	.genesis-box,
	.header-widget-area,
	.hidden-print,
	.home-top,
	.nav-primary,
	.nav-secondary,
	.post-edit-link,
	.sidebar {
		display: none !important;
	}

	.title-area {
		text-align: center;
		width: 100%;
	}

	.site-title > a {
		margin: 0;
		text-decoration: none;
		text-indent: 0;
	}

	.site-inner {
		padding-top: 0;
		position: relative;
	}

	.author-box {
		margin-bottom: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		orphans: 3;
		page-break-after: avoid;
		page-break-inside: avoid;
		widows: 3;
	}


	img {
		page-break-after: avoid;
		page-break-inside: avoid;
	}

	blockquote,
	pre,
	table {
		page-break-inside: avoid;
	}

	dl,
	ol,
	ul {
		page-break-before: avoid;
	}

}

/* SAM Header Customizations
---------------------------------------------------------------------------- */

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

	/* Width of the content band that the header, page content and footer all
	   align to. `.site-inner` is this plus its 30px gutters. */
	--sam-content-width: 1280px;
}

/* Inner pages run a slightly wider content band than the homepage. Overriding
   the token keeps the title band, page content and gutters aligned at 1300px. */
body.sam-has-page-header {
	--sam-content-width: 1300px;
}

.site-header {
	background-color: var(--sam-near-black);
	box-shadow: none;
}

.site-header .menu-toggle,
.site-header .sub-menu-toggle {
	color: #fff;
}

.site-header .menu-toggle:focus,
.site-header .menu-toggle:hover,
.site-header .sub-menu-toggle:focus,
.site-header .sub-menu-toggle:hover {
	color: var(--sam-teal);
}

.site-header .nav-primary .genesis-nav-menu a {
	color: #fff;
}

.site-header .nav-primary .genesis-nav-menu a:focus,
.site-header .nav-primary .genesis-nav-menu a:hover,
.site-header .nav-primary .genesis-nav-menu .current-menu-item > a,
.site-header .nav-primary .genesis-nav-menu .current-menu-ancestor > a,
.site-header .nav-primary .genesis-nav-menu .current-menu-parent > a,
.site-header .nav-primary .genesis-nav-menu .current-page-ancestor > a,
.site-header .nav-primary .genesis-nav-menu .current-page-parent > a {
	color: var(--sam-orange);
}

.wp-custom-logo .title-area {
	padding-bottom: 15px;
	padding-top: 15px;
}

.wp-custom-logo .title-area img {
	display: block;
	max-height: 72px;
	width: auto;
}

/* The wordmark is already in the logo SVG, so the text title beside it is
   redundant on screen — it was rendering as dark grey over the dark header.
   Genesis hides it via `.wp-custom-logo .site-title`, but that never fires
   here: the logo is inlined by the theme rather than set through WordPress'
   custom logo feature, so the body never gets the `wp-custom-logo` class.
   Clipped rather than `display: none` because this is the page's only h1 and
   has to stay in the accessibility tree. Matches the mechanics of the theme's
   own `.screen-reader-text`. */
.title-area .site-title {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* Inline brand SVG. `color` drives the wordmark and white chevrons; the
   four brand-coloured stripes carry their own fills. */
.sam-logo,
.sam-logo:focus,
.sam-logo:hover {
	color: #fff;
	display: block;
	line-height: 0;
	opacity: 1;
	text-decoration: none;
	transition: none;
}

.sam-logo svg {
	display: block;
	height: 72px;
	max-width: 100%;
	width: auto;
}

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

	.sam-logo svg {
		height: 54px;
	}

}

/* `stretch` keeps the search block exactly as tall as the Sign In / Join
   buttons beside it, whatever their text metrics work out to. */
.sam-header-utility {
	align-items: stretch;
	display: flex;
	float: right;
	margin: 15px 0;
}

.site-header .nav-primary {
	clear: both;
}

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

	.site-header .sam-header-utility {
		clear: both;
		float: none;
		justify-content: flex-end;
		width: 100%;
	}

	.site-header .menu-toggle {
		clear: both;
		display: block;
		float: none;
		text-align: right;
		width: 100%;
	}

}

/* Utility menu — the "Utility Nav" WordPress menu (Sign In / Join). Each item
   renders as a teal button matching the height of the search box beside it. */
.sam-header-utility__menu {
	align-items: stretch;
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sam-header-utility__menu li {
	display: flex;
}

.sam-header-utility__menu a {
	align-items: center;
	background-color: var(--sam-teal);
	color: #fff;
	display: flex;
	font-size: 17px;
	font-weight: 600;
	padding: 10px 20px;
	text-decoration: none;
}

.sam-header-utility__menu a:focus,
.sam-header-utility__menu a:hover,
.sam-header-utility__menu .current-menu-item > a {
	background-color: #178f8a;
	color: #fff;
}

.sam-header-utility__search {
	align-items: center;
	background-color: var(--sam-orange);
	display: flex;
	margin-left: 2px;
	padding: 0 16px;
}

/* Dark text on the orange field. White sat at roughly 1.9:1 against the brand
   orange, well under the 4.5:1 minimum; the near-black brings it to about
   11:1. */
.sam-header-utility__search input[type="search"] {
	background: transparent;
	border: none;
	color: var(--sam-near-black, #111);
	font-size: 17px;
	height: 100%;
	padding: 0 8px 0 0;
	width: 165px;
}

/* Softened just enough to read as a prompt rather than typed text, while still
   clearing the contrast minimum at around 8:1. */
.sam-header-utility__search input[type="search"]::placeholder {
	color: rgba(17, 17, 17, 0.75);
	opacity: 1;
}

.sam-header-utility__search button {
	background: transparent;
	border: none;
	color: var(--sam-near-black, #111);
	cursor: pointer;
	display: flex;
	padding: 0;
}

/* Focus is marked once, around the whole search block. Ringing the input and the
   icon separately drew two hard rectangles inside the orange bar, and the
   site-wide orange ring was invisible here anyway. Browsers always treat a text
   field as focus-visible, including on a mouse click, so this shows on click as
   well and wants to look deliberate rather than absent.

   Inset by its own width so the ring sits just inside the orange and never
   straddles the boundary with the dark header, where a single colour cannot
   hold contrast against both. */
.sam-header-utility__search:focus-within {
	outline: 2px solid var(--sam-near-black, #111);
	outline-offset: -2px;
}

.sam-header-utility__search input[type="search"]:focus-visible {
	outline: none;
}

/* The icon sits inside that ring, so a second box around it would just repeat
   the outline. A tint marks it instead, keeping the two controls tellable apart
   for anyone tabbing between them. */
.sam-header-utility__search button:focus-visible {
	background-color: rgba(17, 17, 17, 0.16);
	outline: none;
}

/* Below the desktop breakpoint, keep the hamburger menu: the full horizontal
   nav does not fit beside the logo until ~1140px. Overrides the Genesis
   `min-width: 960px` responsive-menu rules earlier in this file. */
@media only screen and (max-width: 1139px) {

	.js .site-header .nav-primary {
		display: none;
	}

	.site-header .menu-toggle,
	.site-header .sub-menu-toggle {
		display: block;
		visibility: visible;
	}

	.site-header .nav-primary .genesis-nav-menu {
		display: block;
		width: 100%;
	}

	.site-header .nav-primary .genesis-nav-menu .menu-item {
		display: block;
	}

}

/* Mobile header layout: centered logo with the burger pinned to its right, and
   the utility links + search + nav all tucked inside the burger dropdown. */
@media only screen and (max-width: 1139px) {

	.site-header .wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	/* Centered logo. The left margin equals the burger width on the right, so
	   the logo lands in the true centre of the row. */
	.title-area {
		order: 1;
		flex: 1 1 auto;
		float: none;
		text-align: center;
		margin: 0 0 0 48px;
		padding: 18px 0;
	}

	.title-area .sam-logo {
		display: inline-block;
	}

	/* Burger to the right of the logo row, sized to its icon (overrides the
	   earlier full-width rule). `font-size: 0` drops the "Menu" text label; the
	   icon takes its own size below. */
	.site-header .menu-toggle {
		order: 2;
		flex: 0 0 48px;
		width: 48px;
		clear: none;
		float: none;
		margin: 0;
		padding: 0;
		font-size: 0;
		text-align: center;
	}

	.site-header .menu-toggle::before {
		float: none;
		margin: 0;
		width: auto;
		height: auto;
		font-size: 38px;
		line-height: 1;
	}

	.site-header .nav-primary {
		order: 3;
		flex: 0 0 100%;
		width: 100%;
	}

	/* Utility links + search: hidden until the burger is open, then shown at the
	   BOTTOM of the dropdown (order after the nav). `:has()` keys off the toggle's
	   open state. Stacks the Sign In / Join buttons above a full-width search. */
	.site-header .sam-header-utility {
		order: 4;
		display: none;
		flex: 0 0 100%;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin: 0;
		padding: 14px 20px 20px;
		gap: 10px;
	}

	.site-header .wrap:has( .menu-toggle.activated ) .sam-header-utility,
	.site-header .wrap:has( .menu-toggle[aria-expanded="true"] ) .sam-header-utility {
		display: flex;
	}

	.site-header .sam-header-utility__menu {
		justify-content: center;
	}

	.site-header .sam-header-utility__search {
		margin-left: 0;
		width: 100%;
		/* Taller, easier-to-tap search field in the mobile menu. */
		padding: 16px;
	}

	.site-header .sam-header-utility__search input[type="search"] {
		flex: 1 1 auto;
		width: auto;
		font-size: 18px;
	}

	/* Sub-menus sit on the dark header on mobile (the pale desktop dropdown panel
	   is min-width:1140 only), so keep them transparent with white text — this
	   fixes the previously white-on-white sub-items. */
	.site-header .nav-primary .genesis-nav-menu .sub-menu,
	.site-header .nav-primary .genesis-nav-menu .sub-menu a {
		background-color: transparent;
		border: none;
	}

	.site-header .nav-primary .genesis-nav-menu .sub-menu a {
		color: #fff;
	}

	.site-header .nav-primary .genesis-nav-menu .sub-menu a:focus,
	.site-header .nav-primary .genesis-nav-menu .sub-menu a:hover,
	.site-header .nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a {
		color: var(--sam-orange);
	}
}

/* Inner Page Header
--------------------------------------------- */

/* Full-bleed band that leads every inner view with the page title. Breaks out
   to the viewport edges with the same technique as the homepage color stripe,
   and closes with the four-colour brand rule so inner pages echo the homepage. */
.sam-page-header {
	position: relative;
	background-color: #f1f5f6;
	margin: 0 calc(-100vw / 2 + 100% / 2) 50px;
	width: 100vw;
	max-width: 100vw;
	padding: 46px 0;
	transition: padding 0.25s ease;
}

.sam-page-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: url("images/rainbow-line-thin.png") no-repeat 0 0 / 100% 100%;
}

/* Keeps the title aligned with the page content below it. Pages carrying a
   Header Logo sit it beside the title on one row; on its own the title is an
   only child, so the flex row leaves it exactly where it was. */
.sam-page-header__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0 auto;
	max-width: var(--sam-content-width, 1280px);
	padding: 0 30px;
	width: 100%;
}

.sam-page-header__title {
	color: var(--sam-charcoal, #2a2625);
	font-size: 40px;
	line-height: 1.15;
	margin: 0;
	transition: font-size 0.25s ease;
}

/* Sized off its height so it shrinks alongside the title on scroll, on the same
   easing, rather than being scaled by its own width. */
.sam-page-header__logo {
	display: block;
	height: 144px;
	transition: height 0.25s ease;
	width: auto;
}

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

	.sam-page-header {
		padding: 32px 0;
	}

	.sam-page-header__title {
		font-size: 30px;
	}

	.sam-page-header__logo {
		height: 96px;
	}
}

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

	/* Logo on the left spanning both rows; utility top-right, nav bottom-right.
	   Wrap max-width of 1062px (the alignwide content width) makes the logo's
	   left edge line up exactly with the page content at any viewport. */
	.site-header .wrap {
		align-items: center;
		column-gap: 28px;
		display: grid;
		grid-template-areas:
			"logo utility"
			"logo nav";
		grid-template-columns: auto minmax(0, 1fr);
		margin: 0 auto;
		max-width: var(--sam-content-width);
	}

	.site-header .title-area {
		align-self: center;
		float: none;
		grid-area: logo;
		max-width: none;
		padding: 0;
		width: auto;
	}

	.site-header .sam-header-utility {
		align-self: start;
		float: none;
		grid-area: utility;
		justify-self: end;
		margin: 0;
	}

	.site-header .nav-primary {
		clear: none;
		grid-area: nav;
		justify-self: end;
		padding: 18px 0 22px;
		width: auto;
	}

	/* Gap max is deliberately conservative: Arial is wider than the webfont it
	   replaced, and substitutes (Helvetica/Liberation Sans) vary a little more,
	   so leave headroom rather than sit on the wrap threshold. */
	.nav-primary .genesis-nav-menu {
		display: flex;
		flex-wrap: wrap;
		gap: 5px clamp(12px, 1.5vw, 18px);
		justify-content: flex-end;
		width: auto;
	}

	.nav-primary .genesis-nav-menu .menu-item {
		display: inline-block;
		white-space: nowrap;
	}

	/* Horizontal padding is zeroed because spacing between items comes from
	   the flex `gap` above; keeping both would push the nav off the row. */
	.nav-primary .genesis-nav-menu a {
		color: #fff;
		font-size: 17px;
		font-weight: 600;
		padding: 4px 0;
	}

	.nav-primary .genesis-nav-menu a:focus,
	.nav-primary .genesis-nav-menu a:hover,
	.nav-primary .genesis-nav-menu .current-menu-item > a,
	.nav-primary .genesis-nav-menu .current-menu-ancestor > a,
	.nav-primary .genesis-nav-menu .current-menu-parent > a,
	.nav-primary .genesis-nav-menu .current-page-ancestor > a,
	.nav-primary .genesis-nav-menu .current-page-parent > a {
		color: var(--sam-orange);
	}

	/* Fixed header. Pages that lead with a full-bleed image let it show through
	   (see `.sam-header-overlay` below); every other page reserves the header's
	   height, published as --sam-header-height by js/header.js. */
	.site-header {
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 100;
	}

	.admin-bar .site-header {
		top: 32px;
	}

	body:not(.sam-header-overlay) .site-inner {
		padding-top: calc(var(--sam-header-height, 135px) + 40px);
	}

	/* When the title band leads the page it supplies its own breathing room, so
	   the content clears only the fixed header and the band sits flush beneath it. */
	body.sam-has-page-header:not(.sam-header-overlay) .site-inner {
		padding-top: var(--sam-header-height, 135px);
	}

	/* The band sticks just below the fixed header so the title stays in view as
	   the page scrolls (like the header itself). Sits under the header (z-index
	   100) but over the content, on its own opaque background. */
	body.sam-has-page-header:not(.sam-header-overlay) .sam-page-header {
		position: sticky;
		top: var(--sam-header-height, 135px);
		z-index: 50;
	}

	/* Logged-in: the admin bar (32px at this width) offsets the fixed header via
	   `.admin-bar .site-header { top: 32px }`, so the sticky band must clear the
	   admin bar too — otherwise it slides up behind the header/nav. */
	.admin-bar.sam-has-page-header:not(.sam-header-overlay) .sam-page-header {
		top: calc(var(--sam-header-height, 135px) + 32px);
	}

	/* Once scrolled (js/header.js flags the header), the band tightens its
	   padding and title so it takes up less room. `.site-inner` is a later
	   sibling of the flagged `.site-header`, so it can be reached from it. */
	.site-header.sam-header-scrolled ~ .site-inner .sam-page-header {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.site-header.sam-header-scrolled ~ .site-inner .sam-page-header__title {
		font-size: 32px;
	}

	.site-header.sam-header-scrolled ~ .site-inner .sam-page-header__logo {
		height: 104px;
	}

	/* Hero-overlay header: the full-bleed first block sits behind the header,
	   which becomes a transparent scrim rather than a solid bar. */
	.sam-header-overlay .site-header {
		background-color: transparent;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
		transition: background-color 0.25s ease-in-out;
	}

	/* Scrim extends past the header so the photo fades in gradually instead of
	   stepping in brightness at the divider line. */
	.sam-header-overlay .site-header::before {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 45%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0) 100%);
		content: "";
		height: 230%;
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		transition: opacity 0.25s ease-in-out;
		z-index: -1;
	}

	/* Once scrolled off the hero the scrim would sit over page content, so
	   swap it for a solid bar to keep the nav legible. */
	.sam-header-overlay .site-header.sam-header-scrolled {
		background-color: var(--sam-near-black);
		border-bottom-color: transparent;
	}

	.sam-header-overlay .site-header.sam-header-scrolled::before {
		opacity: 0;
	}

}

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

/* Supplied artwork: a 1556x11 four-colour bar, the thick counterpart to the
   stripe above the News heading. It caps the footer rather than sitting in the
   page flow, so it stays put no matter what block a page ends on. Painted as a
   background layer on top of the footer's own colour, which avoids adding an
   element and keeps `::before` free — Genesis already uses it for a clearfix.
   The bands are flat colour, so stretching to 100% costs nothing. */
.footer-widgets {
	background-color: var(--sam-near-black);
	/* Clears the inherited 1px #eee rule, which would otherwise draw a pale
	   hairline directly above the artwork. */
	border-top: none;
	background-image: url("images/rainbow-divider-thick.png");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% 11px;
	color: #fff;
	font-size: 21px;
	padding: 60px 30px 40px;
}

.footer-widgets .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0 auto;
	max-width: var(--sam-content-width);
}

/* Genesis clears floats with `.wrap::before/::after`. In a flex container those
   pseudo-elements become flex items of their own, so they were swallowing two
   extra 40px gaps — 80px that the columns should have had. With them gone the
   columns grow into that space, which is what stops the email address in the
   first column from wrapping. */
.footer-widgets .wrap::before,
.footer-widgets .wrap::after {
	display: none;
}

/* Genesis pads each area 30px on both sides, from when these were floated
   columns needing their own gutters. The flex `gap` does that job now, and the
   padding was holding the first column's text 30px right of the credits line
   below it — the comp has the two flush. */
.footer-widget-area {
	flex: 1 1 260px;
	padding-left: 0;
	padding-right: 0;
}

/* The comp does not divide the footer into equal thirds: measured across the
   band, the columns start at 0%, 35% and 58.5%, which puts the social row and
   Donate button well left of where equal thirds would. The grow factors are
   the comp's column widths, so the ratio holds at any band width instead of
   being pinned to the 1280px case. Basis is 0 so the factors alone decide the
   split. */
.footer-widgets .footer-widgets-1 {
	flex: 410 1 0;
}

.footer-widgets .footer-widgets-2 {
	flex: 260 1 0;
}

.footer-widgets .footer-widgets-3 {
	flex: 530 1 0;
}

.footer-widgets .widget-title {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 14px;
}

.footer-widgets a {
	color: #fff;
	text-decoration: none;
}

.footer-widgets a:focus,
.footer-widgets a:hover {
	color: var(--sam-teal);
}

.footer-widgets .widget_nav_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widgets .widget_nav_menu li {
	margin-bottom: 10px;
}

/* The comp sets the social row and the Donate button on one line, 38px apart
   and centred on each other. The two are siblings inside a custom HTML widget,
   so the widget's own wrapper is what becomes the flex row; `:has()` scopes
   that to the widget holding them rather than every text widget in the footer.
   Doing it here keeps the widget's stored HTML untouched, so this ships as
   code rather than as a database change. */
.footer-widgets .textwidget:has(> .sam-footer-social) {
	align-items: center;
	display: flex;
	gap: 38px;
}

/* On phones the social discs + Donate button don't fit on one line, so stack
   the Donate button below the row of social icons. */
@media only screen and (max-width: 600px) {

	.footer-widgets .textwidget:has(> .sam-footer-social) {
		flex-direction: column;
		gap: 20px;
	}
}

/* 5px, as the comp spaces the discs. The 14px here previously was set when
   these were bare 20px glyphs; at 45px it pushed the column wide enough to
   wrap the email address in the first column. */
.sam-footer-social {
	display: flex;
	gap: 5px;
}

/* The comp knocks each glyph out of a filled white disc. The anchor draws the
   disc and the ::before carries the glyph, because a mask paints only where
   its artwork is opaque — masking the anchor itself would give a white glyph
   and no disc behind it.
   The extra `.footer-widgets` is needed to outrank the white this file gives
   every other footer link, which would otherwise leave the glyph invisible
   against its own disc. Keeping the glyph on currentColor means the existing
   footer hover rule tints it teal for free. */
.footer-widgets .sam-social-icon {
	align-items: center;
	background-color: #fff;
	border-radius: 50%;
	color: var(--sam-near-black);
	display: inline-flex;
	height: 45px;
	justify-content: center;
	width: 45px;
}

/* Sized from the comp, where the glyphs run 24-29px inside the 45px disc.
   `contain` fits each one to its own longest axis, so the wider marks (the
   YouTube rectangle) stay in proportion rather than being squared off. */
.sam-social-icon::before {
	background-color: currentColor;
	content: "";
	height: 28px;
	width: 28px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}


/* Facebook uses a plain f glyph like the other four marks, so it needs no
   colour, sizing or layer exceptions — the generic disc, glyph size and hover
   rules all apply, and its mark stays a solid shape with no disc-edge seam. */
.sam-social-icon--facebook::before {
	-webkit-mask-image: url("images/social/facebook-f.svg");
	mask-image: url("images/social/facebook-f.svg");
}

.sam-social-icon--bluesky::before {
	-webkit-mask-image: url("images/social/bluesky.svg");
	mask-image: url("images/social/bluesky.svg");
}

.sam-social-icon--instagram::before {
	-webkit-mask-image: url("images/social/instagram.svg");
	mask-image: url("images/social/instagram.svg");
}

.sam-social-icon--youtube::before {
	-webkit-mask-image: url("images/social/youtube.svg");
	mask-image: url("images/social/youtube.svg");
}

.sam-social-icon--linkedin::before {
	-webkit-mask-image: url("images/social/linkedin.svg");
	mask-image: url("images/social/linkedin.svg");
}

/* Hover and focus put every disc on teal with a white mark. The
   `.footer-widgets` prefix is what outranks the per-network resting colours
   above, so Facebook flips along with the rest instead of needing its own
   exception. */
.footer-widgets .sam-social-icon:hover,
.footer-widgets .sam-social-icon:focus {
	background-color: var(--sam-teal);
}

/* The mark is painted by the ::before, so the colour is set there rather than
   inherited from the anchor — this sidesteps the footer-wide
   `a:hover { color: teal }`, which would tint the mark teal against a teal disc
   and leave nothing visible. */
.footer-widgets .sam-social-icon:hover::before,
.footer-widgets .sam-social-icon:focus::before {
	color: #fff;
}

.sam-footer-donate {
	margin: 0;
}

.sam-footer-donate__link {
	align-items: center;
	background-color: var(--sam-orange);
	color: #fff !important;
	display: inline-flex;
	font-weight: 700;
	/* 9px, as the comp spaces the mark from the word. */
	gap: 9px;
	padding: 10px 22px;
}

/* The supplied donate mark — a hand cupping a heart — in place of the Dashicons
   heart that stood in for it. The span keeps its `dashicons-heart` class because
   that markup lives in a custom HTML widget, i.e. in the database; restyling it
   here ships the change as code instead of as a migration.

   Dropping the glyph matters beyond looks: Dashicons is an admin stylesheet that
   WordPress only loads on the front end for logged-in users (via the admin bar),
   so the heart was rendering for us and as a blank gap for everyone else. A
   background image has no such dependency.

   Sized 27x27, which is both the artwork's natural size and its measured size in
   the comp, so it paints 1:1 with no resampling. */
.sam-footer-donate__link .dashicons-heart {
	background-image: url("images/donate-heart.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	flex: 0 0 auto;
	height: 27px;
	width: 27px;
	/* Neutralises the Dashicons rules for the logged-in case, where that
	   stylesheet is present and would otherwise draw its glyph over the
	   artwork. */
	font-size: 0;
	line-height: 0;
}

.sam-footer-donate__link .dashicons-heart::before {
	content: none;
}

.sam-footer-donate__link:focus,
.sam-footer-donate__link:hover {
	background-color: #e59c34;
	color: #fff !important;
}

/* The credits bar reads as one continuous block with the widget area above it.
   It used to carry a 4px CSS-gradient approximation of the brand stripe, but
   the comp draws only one rainbow rule in the footer — at the very top, in the
   supplied artwork — so a second one here would be a stripe the design does
   not have. */
/* Overrides Genesis' own 1px #eee rule on this element. The comp draws the
   divider full width at rgb(125,125,125) on the near-black footer — white at
   roughly half strength, which keeps it a divider rather than a second bright
   stripe competing with the brand bar at the top of the footer. */
.site-footer {
	background-color: var(--sam-near-black);
	border-top: 1px solid rgba(255, 255, 255, 0.5);
	padding: 20px 30px;
}

.site-footer .wrap {
	margin: 0 auto;
	max-width: var(--sam-content-width);
}

.site-footer p {
	align-items: center;
	/* The comp renders this text at a flat 180 — white at 70% over the
	   near-black, about 9.5:1. Raised to full white for contrast, matching the
	   links it sits alongside. */
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	/* Measured off the comp: the credits sit at a 13px cap height, against 15px
	   for the 21px widget text above them, which puts them at 18px. */
	font-size: 18px;
	justify-content: space-between;
	margin: 0;
}

/* The comp draws the credit link at the same 70% value as the text around it,
   distinguished by its underline alone. Raised to full white for contrast: at
   70% the link sat at roughly 9.7:1 against the near-black, and pure white takes
   it to about 18:1 while also separating the link from the text it sits in. */
.site-footer a {
	color: #fff;
}

.site-footer a:focus,
.site-footer a:hover {
	color: var(--sam-teal);
}

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

	.site-footer p {
		justify-content: flex-start;
		gap: 6px;
	}

}

/* Cool Timeline — collapsible long entries
---------------------------------------------------------------------------- */

/* js/timeline-collapse.js adds `.sam-timeline-clamp.is-clamped` to any timeline
   description that runs past ~8 lines, and a toggle button after it. */
.sam-timeline-clamp.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sam-timeline-toggle {
	display: inline-block;
	margin-top: 8px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--sam-teal, #009c98);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.sam-timeline-toggle:focus,
.sam-timeline-toggle:hover {
	text-decoration: underline;
}

/* Widen the Cool Timeline on desktop. The block already fills the 1300px band,
   but the plugin pins the timeline itself to 1010px; break the block out to
   ~1320px (clamped to the viewport) and let the timeline fill it. */
@media only screen and (min-width: 1140px) {

	.entry-content .wp-block-cp-timeline-content-timeline {
		max-width: min(1320px, 100vw - 40px);
		margin-left: calc(50% - min(1320px, 100vw - 40px) / 2);
		margin-right: calc(50% - min(1320px, 100vw - 40px) / 2);
		width: auto;
	}

	/* The plugin caps the inner body at 1040px — release it so the timeline
	   fills the widened block. */
	.entry-content .wp-block-cp-timeline-content-timeline .cool-vertical-timeline-body {
		max-width: none;
	}
}

/* Distinquished Service Citation — recolour the Cool Timeline red accent
---------------------------------------------------------------------------- */

/* Replaces the plugin's red (#d91b3e / #e7343f) with teal (#299c98) on this
   page only. Scoped by the slug body class (added in functions.php) so it holds
   across environments where the page ID differs. */
.sam-page-distinquished-service-citation .timeline-block-icon,
.sam-page-distinquished-service-citation .cool-vertical-timeline-body::before,
.sam-page-distinquished-service-citation .cool-timeline-block-list::before,
.sam-page-distinquished-service-citation .cool-timeline-block-list::after,
.sam-page-distinquished-service-citation .timeline-content::before,
.sam-page-distinquished-service-citation .story-details::after {
	background-color: #299c98 !important;
}

.sam-page-distinquished-service-citation .story-details {
	border-color: #299c98 !important;
}

.sam-page-distinquished-service-citation .story-details::before {
	border-left-color: #299c98 !important;
	border-right-color: #299c98 !important;
}

.sam-page-distinquished-service-citation [class*="cp-timeline"] svg,
.sam-page-distinquished-service-citation [class*="cp-timeline"] svg * {
	fill: #299c98 !important;
}

/* Timeline page (History → Timeline): show timeline images in full instead of
   cropping them to the fixed card box. Scoped to this page. */
.page-id-309 .ctlb-block-image img {
	object-fit: contain !important;
}

/* Replaces the plugin's red with orange (#F9B233) on the Timeline page. Scoped
   by the slug body class so it holds across environments. (The card's 4px top
   rule is re-applied inline by the plugin's own script and can't be reached from
   CSS — recolour that via the block's colour setting in the editor.) */
.sam-page-timeline .timeline-block-icon,
.sam-page-timeline .timeline-content::before,
.sam-page-timeline .timeline-content::after {
	background-color: #F9B233 !important;
}

.sam-page-timeline .story-details {
	border-color: #F9B233 !important;
}

.sam-page-timeline [class*="cp-timeline"] svg,
.sam-page-timeline [class*="cp-timeline"] svg * {
	fill: #F9B233 !important;
}

.sam-page-timeline .swiper-button-prev,
.sam-page-timeline .swiper-button-next {
	color: #F9B233 !important;
	border-color: #F9B233 !important;
}

.sam-page-timeline .swiper-button-prev::before,
.sam-page-timeline .swiper-button-prev::after,
.sam-page-timeline .swiper-button-next::before,
.sam-page-timeline .swiper-button-next::after {
	border-color: #F9B233 !important;
}

/* 5px between a card's image and its text. */
.sam-page-timeline .story-content .ctlb-block-image {
	margin-bottom: 5px !important;
}

/* Awards & Fellowships — overview block (grouped by taxonomy)
---------------------------------------------------------------------------- */

.sam-awards-overview__group {
	margin: 0 0 44px;
}

.sam-awards-overview__group:last-child {
	margin-bottom: 0;
}

.sam-awards-overview__heading {
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--sam-orange, #f9b233);
	font-size: 28px;
}

.sam-awards-overview__desc {
	margin: 0 0 18px;
	max-width: 780px;
}

.sam-awards-overview__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sam-awards-overview__list > .sam-awards-overview__item {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	font-size: 19px;
}

.sam-awards-overview__link {
	color: var(--sam-teal, #009c98);
	text-decoration: none;
}

.sam-awards-overview__link:focus,
.sam-awards-overview__link:hover {
	text-decoration: underline;
}

/* Awards and Fellowships — single template
---------------------------------------------------------------------------- */

.aw-single {
	max-width: 100%;
}

/* Featured image sits top-right, text flows beside it. */
.aw-single__image {
	float: right;
	width: 300px;
	max-width: 40%;
	margin: 0 0 20px 32px;
}

.aw-single__image-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
}

.aw-section {
	margin: 0 0 30px;
}

.aw-heading {
	margin: 0 0 12px;
	font-size: 26px;
}

.aw-prose > *:first-child {
	margin-top: 0;
}

.aw-prose > *:last-child {
	margin-bottom: 0;
}

.aw-apply {
	clear: none;
	margin: 0 0 30px;
}

.aw-apply__btn,
.aw-apply__btn:visited {
	display: inline-block;
	background-color: var(--sam-orange, #f9b233);
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 12px 28px;
}

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

/* Past-winners (or any) table. */
.aw-table-section {
	clear: both;
}

.aw-table-wrap {
	overflow-x: auto;
}

.aw-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.aw-table th,
.aw-table td {
	text-align: left;
	vertical-align: top;
	padding: 10px 14px;
	border: 1px solid #e2e2e2;
}

.aw-table thead th {
	background-color: var(--sam-teal, #009c98);
	color: #fff;
	font-weight: 700;
}

.aw-table tbody tr:nth-child(even) {
	background-color: #f4f7f7;
}

.aw-table__year {
	width: 90px;
	white-space: nowrap;
}

@media (max-width: 700px) {
	.aw-single__image {
		float: none;
		width: 100%;
		max-width: 100%;
		margin: 0 0 24px;
	}

	.aw-heading {
		font-size: 22px;
	}
}

/* PDF Embed block
---------------------------------------------------------------------------- */

.sam-pdf {
	margin: 30px 0;
}

.sam-pdf__heading {
	margin: 0 0 16px;
}

.sam-pdf__frame {
	position: relative;
	width: 100%;
	max-height: 85vh;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #f5f5f5;
}

.sam-pdf__iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sam-pdf__fallback {
	margin: 12px 0 0;
	font-size: 15px;
}

/* Mobile browsers largely refuse to render a PDF inside an iframe, so the embed
   arrives clipped and unreadable however much height it is given. Below 700px
   the viewer is dropped entirely and the link takes over — it opens the file in
   the device's own PDF reader, which handles it properly. Since it is then the
   only way to reach the document, it is sized as a real tap target rather than
   left as an inline afterthought. */
@media (max-width: 700px) {

	.sam-pdf__frame {
		display: none;
	}

	.sam-pdf__fallback {
		margin-top: 0;
	}

	.sam-pdf__link {
		background-color: var(--sam-teal, #009c98);
		border-radius: 3px;
		color: #fff;
		display: block;
		font-weight: 600;
		padding: 14px 20px;
		text-align: center;
		text-decoration: none;
	}

	.sam-pdf__link:focus,
	.sam-pdf__link:hover {
		background-color: var(--sam-purple, #554596);
		color: #fff;
	}
}

/* SAM 250 Projects — listing block (two columns)
---------------------------------------------------------------------------- */

.sam-250-projects__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 44px;
}

.sam-250-projects__grid > .sam-250-projects__item {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 21px;
	line-height: 1.3;
}

@media (max-width: 700px) {
	.sam-250-projects__grid {
		grid-template-columns: 1fr;
	}
}

/* SAM 250 Project — single template
---------------------------------------------------------------------------- */

.sam250 {
	display: flex;
	align-items: flex-start;
	gap: 44px;
}

.sam250__main {
	flex: 1 1 0;
	min-width: 0;
}

.sam250__side {
	flex: 0 0 340px;
}

.sam250__header {
	margin: 0 0 24px;
}

.sam250__title {
	margin: 0 0 6px;
}

.sam250__back {
	margin: 0;
	font-size: 15px;
}

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

/* Responsive 16:9 frame for the oEmbed iframe or the <video>. */
.sam250__video {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	margin-bottom: 34px;
	background: #000;
}

.sam250__video iframe,
.sam250__video .sam250__video-el {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: contain;
}

.sam250__heading {
	margin: 0 0 16px;
	font-size: 26px;
}

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

.sam250__resources {
	padding: 24px;
	background: #f1f5f6;
}

.sam250__resource {
	margin-bottom: 20px;
}

.sam250__resource:last-child {
	margin-bottom: 0;
}

/* Optional image, shown in the sidebar below the resources. */
.sam250__image {
	margin-top: 24px;
}

.sam250__image-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Stack the sidebar under the main column on narrower screens. */
@media only screen and (max-width: 880px) {

	.sam250 {
		flex-direction: column;
	}

	.sam250__side {
		flex: 1 1 auto;
		width: 100%;
	}
}

/* Donation fund picker ([sam_donation_funds])
--------------------------------------------- */

.sam-donate {
	margin: 0 0 30px;
}

.sam-donate__label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.sam-donate__select {
	max-width: 100%;
	width: auto;
}

/* Gravity Forms
--------------------------------------------- */

/* A form is filled in one field at a time, so the wide content band that suits
   an article works against it — the eye has to travel too far from label to
   input. Narrow the measure on any page carrying a form (see
   lib/gravity-forms.php, which sets the class from the content). */
.sam-has-form .entry-content {
	margin-left: auto;
	margin-right: auto;
	max-width: 760px;
}

/* Gravity Forms' theme is built on custom properties, so it can be restyled by
   redefining those rather than fighting its rules with overrides. Setting them
   on the wrapper keeps everything scoped to the form. */
/* Brand colour for buttons and controls, replacing the stock blue: teal
   resting, purple on hover — the same pairing as the site's other buttons.
   Required marks and validation messages take the brand red, so errors still
   read as errors while belonging to the palette.

   These need both the descendant selector and !important, which the rest of the
   overrides below do not. Gravity Forms re-declares its colour variables at
   scopes inside the form, so a value set on the wrapper alone is replaced again
   further down before it reaches a control — an ID-level override on the
   wrapper still loses. Checked against the rendered button rather than reasoned
   from the cascade. */
.gform_wrapper.gform-theme,
.gform_wrapper.gform-theme * {
	--gf-color-primary: var(--sam-teal, #009c98) !important;
	--gf-color-primary-darker: var(--sam-purple, #554596) !important;
	--gf-color-primary-lighter: var(--sam-purple, #554596) !important;
	--gf-color-primary-rgb: 0, 156, 152 !important;
	--gf-color-primary-contrast: #fff !important;
	--gf-color-danger: var(--sam-red, #e7343f) !important;
}

.gform_wrapper.gform-theme {

	/* `initial` is Gravity Forms' default, which resets the form to the
	   browser's font instead of the site's. Inheriting means the form follows
	   the theme's typography — and will keep following it if the site's faces
	   change, with nothing to update here. */
	--gf-font-family-base: inherit;

	/* Labels at 14px are easy to skim past. Larger and heavier makes each field
	   read as a question being asked. */
	--gf-ctrl-label-font-size-primary: 18px;
	--gf-ctrl-label-font-size-secondary: 18px;

	/* Inputs sized to sit with the larger labels. The button's own size is left
	   alone: it resists both variables and direct rules, even with !important,
	   and is set through the form's Appearance settings instead. */
	--gf-ctrl-font-size: 17px;
}

.gform_wrapper.gform-theme .gfield_label {
	font-weight: 600;
}

/* Floated images on narrow screens
--------------------------------------------- */

/* A left- or right-aligned image keeps its float at every width, which stops
   working once the column is narrow: at phone widths the image takes nearly the
   whole measure and the text tries to wrap through the few pixels left beside
   it. Below 700px the float is dropped and the image centres on its own line,
   with the text running full width above and below.

   Covers the block and classic markup alike, since content of both kinds exists
   across the site. */
@media only screen and (max-width: 700px) {

	.entry-content a.alignleft,
	.entry-content a.alignright,
	.entry-content img.alignleft,
	.entry-content img.alignright,
	.entry-content figure.alignleft,
	.entry-content figure.alignright,
	.entry-content .wp-caption.alignleft,
	.entry-content .wp-caption.alignright,
	.entry-content .wp-block-image.alignleft,
	.entry-content .wp-block-image.alignright {
		display: block;
		float: none;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 24px;
		max-width: 100%;
		/* The alignment classes also set text-align, which would otherwise hold
		   an image narrower than the column against the side it used to float
		   to. Centring here carries the image and its caption together. */
		text-align: center;
	}

	/* An image resized in the editor carries its width inline, which can exceed
	   the column once the float is gone. */
	.entry-content .alignleft img,
	.entry-content .alignright img {
		height: auto;
		max-width: 100%;
	}

	/* These captions are `table-caption` without a table to belong to, so they
	   collapse to their narrowest possible width — a two-word credit breaking
	   across three lines in a full-width column. Long-standing, but only
	   conspicuous once the image stops floating. As a block the caption takes
	   the figure's width and centres beneath the image.

	   `figure` is named in the selector to outweigh a rule that loads after this
	   stylesheet and sets the caption back to `table-caption`; without it the
	   two match at equal weight and source order decides. */
	.entry-content figure.alignleft figcaption,
	.entry-content figure.alignright figcaption,
	.entry-content .wp-caption.alignleft .wp-caption-text,
	.entry-content .wp-caption.alignright .wp-caption-text {
		display: block;
		width: auto;
	}
}

/* Title band under the header on narrow screens
--------------------------------------------- */

/* `.site-inner` carries 60px of top padding, which above 1140px is replaced by
   a rule reserving room for the fixed header. Below that the header is static
   and the band is the first thing in the wrapper, so the padding only opens a
   white gap between the two. The band brings its own vertical padding, so
   dropping this lets it sit directly beneath the header.

   Scoped to views that actually have a band; everything else still needs the
   breathing room above its content. */
@media only screen and (max-width: 1139px) {

	body.sam-has-page-header:not(.sam-header-overlay) .site-inner {
		padding-top: 0;
	}
}

/* Timeline width on narrow screens
--------------------------------------------- */

/* The timeline nests three sets of gutters, which on a phone leaves the content
   205px of a 315px column — a third of the width given over to margins. These
   two are pure spacing and can be trimmed: the page already insets content 30px
   from the screen edge, so the timeline's own 20px on top of that is excessive
   at this size.

   The 25px margins on `.swiper` are deliberately left alone: the prev/next
   arrows are positioned in that band, and narrowing it pushes them further over
   the content. */
@media only screen and (max-width: 700px) {

	/* The plugin sets this one from a longer class chain, which outweighs any
	   reasonable selector here, so this is the rare case that earns !important.
	   Verified: an identical rule loaded after the plugin's still loses. */
	.entry-content .cool-horizontal-timeline-body {
		padding-left: 6px !important;
		padding-right: 6px !important;
	}

	/* This one only loses on source order, so naming the element is enough to
	   settle it without !important. */
	.entry-content div.timeline-content {
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* Focus indication
--------------------------------------------- */

/* The site's default focus ring is a 1px #ccc outline, which all but disappears
   against both the dark header and the pale page; form fields go further and
   remove it altogether. This replaces it with a 2px brand orange ring, offset
   slightly so it reads as a ring around the control rather than part of its
   edge, and holds up on the light and dark grounds alike.

   Matched on :focus-visible rather than :focus so the ring appears for keyboard
   and assistive-tech users without leaving one behind after a mouse click. The
   input/textarea selectors are listed explicitly to outweigh the `outline: none`
   rules further up this stylesheet.

   Site-wide by design: a focus ring that changed between pages would strand a
   keyboard user the moment they followed a link. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sam-orange, #f9b233);
	outline-offset: 2px;
}

/* Fly-out position under keyboard focus
--------------------------------------------- */

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

	/* Nested fly-outs sit beside their parent panel via `left: 100%`, at
	   specificity (0,4,0). The keyboard reveal rule further up,
	   `.menu .menu-item > a:focus + ul.sub-menu`, sets `left: auto` at (0,4,2)
	   and so outranks it — the third-level menu then opened on top of the
	   dropdown it belongs to. The equivalent hover rule is only (0,3,0) and
	   loses to the positioning, which is why this went wrong for keyboard users
	   alone.

	   Restated here above the reveal rule's weight. `.sfHover` is included
	   because the menu script marks the focused branch with it as well. */
	.genesis-nav-menu .sub-menu .menu-item > a:focus + ul.sub-menu,
	.genesis-nav-menu .sub-menu .menu-item.sfHover > ul.sub-menu {
		left: 100%;
		right: auto;
	}

	/* Same again for a branch flagged to open leftwards near the screen edge,
	   so keyboard and hover agree on which way it unfolds. */
	.genesis-nav-menu .sub-menu .menu-item.sam-opens-left > a:focus + ul.sub-menu,
	.genesis-nav-menu .sub-menu .menu-item.sam-opens-left.sfHover > ul.sub-menu {
		left: auto;
		right: 100%;
	}
}

/* "Opens in a new window" tooltip
--------------------------------------------- */

/* Drawn here rather than left to the browser's `title` tooltip, which waits
   about a second, cannot be styled, and never appears for keyboard users. The
   text comes from the data attribute set in js/external-links.js, so the wording
   lives in one place and only links that open a new window carry it.

   Light on purpose: these links appear both in body copy and on the near-black
   footer, and a dark tooltip would disappear against the latter. The border and
   shadow keep it legible where the page behind it is also white. */
[data-sam-newwindow] {
	position: relative;
}

[data-sam-newwindow]::after {
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	bottom: 100%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	color: var(--sam-near-black, #111);
	content: attr(data-sam-newwindow);
	font-size: 13px;
	font-weight: 400;
	left: 50%;
	line-height: 1.35;
	margin-bottom: 8px;
	opacity: 0;
	padding: 6px 10px;
	/* Never intercept the click it is describing. */
	pointer-events: none;
	position: absolute;
	text-align: left;
	transform: translateX(-50%);
	transition: opacity 0.12s ease;
	visibility: hidden;
	/* Wraps rather than running off the screen on a long label. */
	white-space: normal;
	width: max-content;
	max-width: 220px;
	z-index: 200;
}

/* Shown on focus as well as hover, so keyboard users get the same warning
   before they follow the link. */
[data-sam-newwindow]:hover::after,
[data-sam-newwindow]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {

	[data-sam-newwindow]::after {
		transition: none;
	}
}