/*!
Theme Name: Friends of the Santa Cruz River
Author: Kelsey Barmettler
Author URI: https://kelseybarmettler.com
Description: A theme for Friends of the Santa Cruz River
Version: 1.0
*/
/* figtree-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 400;
	src: url('assets/fonts/figtree-v6-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 400;
	src: url('assets/fonts/figtree-v6-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-700 - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 700;
	src: url('assets/fonts/figtree-v6-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* figtree-italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 400;
	src: url('assets/fonts/figtree-v8-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* figtree-700italic - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Figtree';
	font-style: italic;
	font-weight: 700;
	src: url('assets/fonts/figtree-v8-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*
################################
# RESET: //www.joshwcomeau.com/css/custom-css-reset/
################################
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}
input,
button,
textarea,
select {
	font: inherit;
	max-width: 100%;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/*
################################
# TYPE / FONTS / TYPOGRAPHY
################################
*/
body,
button,
input,
select,
optgroup,
textarea {
	font-size: clamp(16px, calc(1rem + ((1vw - 3px) * 0.1235)), 18px);
	min-height: 0vw;
	font-family: 'Figtree', sans-serif;
	line-height: 1.5;
}
/* set the font family below because wordpress 6.6 broke this */
:root :where(body) {
	font-family: 'Figtree', sans-serif;
}
html {
	font-size: 100%;
	scroll-behavior: smooth;
}
body {
	line-height: 1.5;
	font-size: 1.125em;
	overflow-x: hidden;
	
}
/* set the font family below because wordpress 6.6 broke this */
:root :where(h1, h2, h3, h4, h5, h6) {
	clear: both;
	font-family: 'Figtree', sans-serif;
	font-weight: 700;
}
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.12;
}
h1 {
	line-height: 1;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	text-decoration: none;
}
.wp-block-heading {
	margin-bottom: .85em;
}
p {
	margin-bottom: 1.5em;
}
p.is-style-looks-like-heading {
	font-weight: 700;
	line-height: 1.12;
	margin-bottom: 0;
}
p.has-background {
	padding: calc(2 * var(--wp--custom--layout--padding));
}
@media (max-width: 600px) {
	p.has-background {
		padding: var(--wp--custom--layout--padding);
	}
}
.block-area :last-child {
	margin-bottom: 0;
}
dfn,
cite,
em,
i {
	font-style: italic;
}
blockquote {
	margin: 0 1.5em;
}
address {
	margin: 0 0 1.5em;
}
pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}
code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}
mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}
big {
	font-size: 125%;
}

/*
################################
# SECTION
################################
*/
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
	padding: 0;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}
/* fix svg img thumbnail */
.attachment-266x266, .thumbnail img {
	width: 100% !important;
	height: auto !important;
}
.wp-block-list {
	padding: 0 0 0 1rem;
}
/*
################################
# LINKS
################################
*/
a:link {
	color: #0e4db9;
	transition: color 250ms ease;
}

a:visited {
	color: rebeccapurple;
}

a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}
.is-style-full-link a:after {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: '';
}
.has-white-color a {
	color: #fff;
}
/* buttons */
.wp-element-button,
.wp-block-button__link {
	padding: .5rem 1rem;
	font-weight: bold;
	border-radius: 10px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	padding: .5rem 1rem;
}
.wp-block-button__link:focus {
	outline: .15rem dotted #2f3134;
	outline-offset: .2rem;
}
/* fix fluent forms defaults */
form.fluent_form_1 .wpf_has_custom_css.ff-btn-submit {
	font-family: inherit;
}
.ff-default .ff_btn_style:focus,
.ff-default .ff_btn_style:hover {
	opacity: 1 !important;
}
.ff-message-success {
	border: none;
	box-shadow: none;
	margin: 0;
	padding: 1rem;
	position: relative;
	background: #fff;
	border-radius: 10px;
}
.ff-message-success :last-child {
	margin-bottom: 0;
}
/*
################################
# BLOCKS
################################
*/
.af2-tabbed-content__nav {
	background-color: #ececec;
	border: .25rem solid #fff;
	border-radius: 30px;
	width: fit-content;
	margin: 0 auto 2rem auto;
	overflow: hidden;
	/* big box shadow */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.af2-tabbed-content__nav .af2-tabbed-content__tab {
	background-color: #ececec;
	color: rgba(0,0,0, .5);
	padding: .5rem 1rem;
	box-shadow: none;
	border: none;
	font-weight: bold;
}
.af2-tabbed-content__nav .is-active {
	background-color: var(--wp--preset--color--irish-beauty);
	color: #fff;
}
.rounded-corners {
	border-radius: 30px;
	overflow: hidden;
}
.wp-block-gallery.is-style-no-grow .wp-block-image {
	flex-grow: 0 !important;
}
.wp-block-gallery.partners {
	align-items: center !important;
	justify-content: center !important;
}
.wp-block-gallery.partners .wp-block-image {
	margin-bottom: unset !important;
	width: 180px !important;
}
.wp-block-media-text.is-style-stacked {
	display: flex;
	flex-direction: column;
}
.wp-block-media-text.has-background {
	border-radius: 30px;
	overflow: hidden;
	gap: 0;
}
.wp-block-media-text.is-image-fill-element .wp-block-media-text__media,
.wp-block-media-text__media img {
	object-fit: cover;
	height: 100% !important;
	width: 100%;
}
.wp-block-media-text.has-background .wp-block-media-text__content {
	padding: calc(var(--wp--custom--layout--block-gap) * 4);
}
@media (max-width: 600px) {
	.wp-block-media-text.has-background .wp-block-media-text__content {
		padding: var(--wp--custom--layout--block-gap);
	}
	.wp-block-media-text .wp-block-media-text__content :last-child {
		margin-bottom: 0;
	}
}
/* social links block */
.social-links {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	line-height: 1;
	font-size: 0;
	margin-bottom: var(--wp--custom--layout--block-gap);
}
.social-links a {
	display: inline-block;
	padding: .5rem;
	font-size: 100%;
}
.social-links img {
	height: 24px;
	width: 24px;
}
.af2-social-link.has-white-color img {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(283deg) brightness(108%) contrast(101%);
}
.social-links.has-text-align-center {
	justify-content: center;
}
.social-links.has-text-align-right {
	justify-content: flex-end;
}
/* faq */
.af2-faq__faq {
	padding: .5rem;
	margin-bottom: var(--wp--custom--layout--block-gap);
}
.af2-faq__answer :last-child,
.af2-faq__question  :last-child {
	margin-bottom: 0;
}
.af2-faq__question { 
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
}
.af2-faq__question-inner { 
	flex: 1 1 auto;
}

.af2-faq__question::after { 
	content: '+';
	color: #000;
	flex:  0 1 1ch;
	position: relative;
	top: 3px;
	width: 1rem;
	margin-right: 0;
	margin-left: 1rem;
}
.af2-faq__faq > .af2-faq__question::-webkit-details-marker {
	display: none;
}
.af2-faq__faq + .af2-faq__faq {
	margin-top: .5rem;
}
.af2-faq__faq[open] .af2-faq__question:after {
	content: '-';
}
.af2-faq__answer {
	padding-top: 1rem;
}
/* testimonials */
.af2-testimonial__attribution {
	display: flex;
}
.af2-testimonial__image {
	flex: 1 1 140px;
}
.af2-testimonial__text {
	flex-basis: 0;
	flex-grow: 999;
}
/* fix google maps + youtube embeds */
.google-maps {
	position: relative;
	padding-bottom: 75%;
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.wp-block-embed-youtube .wp-block-embed__wrapper iframe {
	object-fit: cover;
	height: 100%;
	width: 100%;
	min-height: 560px;
}
/*
################################
# FORMS
################################
*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc;
	border-radius: 3px;
	background: #f0f0f0;
	line-height: 1;
	padding: 0.5rem 1rem;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/* ################################
# LAYOUT
################################### */
.site-inner,
.block-area {
	padding-left: var(--wp--custom--layout--padding);
	padding-right: var(--wp--custom--layout--padding);
}
.wrapper {
	max-width: calc(var(--wp--custom--layout--wide) + 2 * var(--wp--custom--layout--padding));
	margin: 0 auto;
	padding-left: var(--wp--custom--layout--padding);
	padding-right: var(--wp--custom--layout--padding);
}
.wrapper-no-padding {
	max-width: calc(var(--wp--custom--layout--wide));
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .alignfull:not(:last-child),
.entry-content > .wp-block-separator:not(:last-child) {
	margin-bottom: var(--wp--custom--layout--block-gap);
}
.entry-content > .alignfull.has-background + .alignfull,
.entry-content > .alignfull.wp-block-cover + .alignfull,
.block-area > .alignfull.has-background + .alignfull,
.block-area > .alignfull.wp-block-cover + .alignfull {
	margin-top: calc(var(--wp--custom--layout--block-gap) * -1);
}
/*
 * Long unbreakable tokens — bare URLs, email addresses — otherwise set a
 * min-content floor that the container can't shrink below, forcing horizontal
 * overflow on narrow screens.
 */
.entry-content,
.block-area,
.wp-block-post-excerpt,
.sidebar {
	overflow-wrap: break-word;
}
.entry-content > *,
.block-area > * {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--custom--layout--page);
}
.entry-content > *.alignwide,
.block-area > *.alignwide {
	max-width: var(--wp--custom--layout--wide);
}
.entry-content > *.alignfull,
.block-area > *.alignfull {
	margin-left: calc(-1 * var(--wp--custom--layout--padding));
	margin-right: calc(-1 * var(--wp--custom--layout--padding));
	max-width: 100vw;
}
.alignfull.is-layout-flow > * {
	padding-left: var(--wp--custom--layout--block-gap);
	padding-right: var(--wp--custom--layout--block-gap);
}
.entry-content > .alignfull:not(:first-child),
.entry-content > .wp-block-separator:not(:first-child),
.block-area > .alignfull:not(:first-child),
.block-area > .wp-block-separator:not(:first-child) {
	margin-top: var(--wp--custom--layout--block-gap);
}
.wp-block-cover,
.wp-block-cover-image {
	padding: var(--wp--custom--layout--block-gap) var(--wp--custom--layout--padding);
}
.after-entry,
.entry-comments {
	max-width: var(--wp--custom--layout--page);
	margin-left: auto;
	margin-right: auto;
}
.entry-header,
.entry-footer {
	margin: 0 auto;
}
.alignfull.wp-block-cover > .wp-block-cover__image-background,
.alignfull.wp-block-cover > .wp-block-cover__background {
	max-width: 100vw;
}
/* ################################
# SIDEBAR LAYOUT
################################### */
.content-sidebar .content-area {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--layout--block-gap);
	max-width: var(--wp--custom--layout--wide);
	margin-left: auto;
	margin-right: auto;
}
.content-sidebar .site-main {
	flex-basis: 0;
	flex-grow: 999;
	min-inline-size: 50%;
}
/*
 * Let the main column shrink below its content's min-content width. Without
 * this it inherits a floor from whatever inside it refuses to compress and
 * pushes past .site-inner's padding on very narrow viewports.
 */
.site-main {
	min-width: 0;
	max-width: 100%;
}
@media (max-width: 767px) {
	/* Column layout below this width, so the 50% inline floor no longer earns
	   its keep and only serves to resist shrinking. */
	.content-sidebar .site-main {
		min-inline-size: 0;
	}
}
.sidebar {
	flex-basis: 21em;
	flex-grow: 1;
	margin-top: -4rem;
}
.block-area-sidebar {
	padding: 0 !important;
	z-index: 1;
	position: relative;
}
@media (max-width: 767px) {
	.content-sidebar .content-area {
		flex-direction: column;
	}
}
.content-sidebar .content-area .entry-header,
.content-sidebar .content-area .entry-footer,
.content-sidebar .content-area .after-entry,
.content-sidebar .content-area .entry-comments {
	max-width: unset;
	margin-left: 0;
	margin-right: 0;
}
.content-sidebar .entry-content > * {
	max-width: unset;
	margin-left: 0;
	margin-right: 0;
}
.sidebar-content .content-area {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	max-width: var(--wp--custom--layout--wide);
	margin-left: auto;
	margin-right: auto;
}
.sidebar-content .site-main {
	flex: 1 1 calc(75% - 2rem);
}
.sidebar {
	flex: 1 1 25%;
	min-width: 180px;
}
@media (max-width: 767px) {
	.content-sidebar .content-area {
		flex-direction: column;
	}
}
.sidebar-content .content-area .entry-header,
.sidebar-content .content-area .entry-footer,
.sidebar-content .content-area .after-entry,
.sidebar-content .content-area .entry-comments {
	max-width: unset;
	margin-left: 0;
	margin-right: 0;
}
.sidebar-content .entry-content > * {
	max-width: unset;
	margin-left: 0;
	margin-right: 0;
}
@media (max-width: 767px) {
	.site-main {
		order: 1;
	}
	.sidebar {
		order: 2;
	}
}
/* ################################
# BEFORE HEADER
################################### */
.block-area-before-header > * > * {
	max-width: calc(var(--wp--custom--layout--wide) + 2 * var(--wp--custom--layout--padding));
	margin: 0 auto;
	padding-left: var(--wp--custom--layout--padding);
	padding-right: var(--wp--custom--layout--padding);
}

/* ################################
# SITE HEADER
################################### */
.site-header {
	background: linear-gradient(to bottom, rgba(0%, 3%, 8%,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	position: relative;
	z-index: 2;
}
.site-header .wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--wp--custom--layout--block-gap);
	padding-bottom: var(--wp--custom--layout--block-gap);
	gap: 1rem;
	position: relative;
	z-index: 3;
	color: #fff;
}
.site-title {
	font-size: var(--wp--preset--font-size--x-large);
}
.site-title a {
	text-decoration: none;
	color: #fff;

}
.site-description {
	font-size: var(--wp--preset--font-size--small);
	margin-bottom: 0;
	line-height: 1;
}
/* ################################
# BLOG HEADER BAND
###################################
 * The band WRAPS .site-header (see inc/acf.php), so it needs no negative
 * margin and no header-height constant. Its height is simply the header plus
 * whatever content is injected plus padding — self-correcting by construction.
 *
 * Deliberately NOT a stacking context: no isolation, no z-index on the band.
 * The mobile nav lives inside .site-header (z-index: 2) and must be able to
 * paint above .featured-image (z-index: 1), which sits later in the document.
 * Giving the band its own context would trap the nav beneath it.
 */
.blog-header-background {
	position: relative;
	overflow: hidden;
}
/* Bands with no injected content (pages) keep the original height. */
.blog-header-background:not(.blog-header-background--has-content) {
	min-height: 560px;
}
.blog-header-background--has-content {
	padding-bottom: 3rem;
}

/* Singles: extra room for the featured-image banner's -4rem overlap. */
.single-post .blog-header-background--has-content {
	padding-bottom: 7rem;
}

/*
 * Layer order inside the band, all resolved in the root stacking context:
 *
 *   img          auto  — first child, painted first
 *   ::after      auto  — last child, so it paints over the img by document
 *                        order alone; giving it a z-index would lift it over
 *                        the title too
 *   __inner      1     — above the scrim, below the header
 *   .site-header 2     — set in the SITE HEADER section, keeps the mobile nav
 *                        (trapped in the header's own context) on top
 */
.blog-header-background::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
}
/*
 * Direct child only. The band now contains .site-header, so a descendant
 * selector here would also match the logo — and stretch it to fill the band.
 */
.blog-header-background > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.blog-header-background__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	color: #fff;
	text-align: center;
}

/* eyebrow + title */
.blog-header__eyebrow {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: var(--wp--custom--letter-spacing--looser);
	text-transform: uppercase;
	font-weight: bold;
	margin: 0 0 0.75rem 0;
	color: #fff;
}
.blog-header__eyebrow a {
	color: var(--wp--preset--color--thermal-aqua);
	text-decoration: none;
	/* border-bottom: 1px solid rgba(255, 255, 255, 0.45); */
	padding-bottom: 2px;
}
.blog-header__eyebrow a:hover,
.blog-header__eyebrow a:focus {
	border-bottom-color: #fff;
}
.blog-header__title,
.blog-header-background__inner .archive-title {
	color: #fff;
	margin: 0;
	max-width: var(--wp--custom--layout--wide);
	margin-left: auto;
	margin-right: auto;
	text-wrap: balance;
}
/* ################################
# HERO COVER (pages with the title hidden)
###################################
 * Header overlays the hero. Previously this was done with
 * margin-top: -12.75rem on the hero itself, which only ever worked by margin
 * collapsing: the hero sits inside .entry-content > article > .site-main >
 * .content-area > .site-inner, and the negative margin had to propagate all
 * the way up that chain to clear the header.
 *
 * Collapsing breaks if ANY ancestor in the chain has padding-top, border-top,
 * establishes a block formatting context, or is a flex/grid container — and
 * .content-sidebar .content-area is display: flex. So the same hero worked on
 * pages without a sidebar and dropped below the header on pages with one,
 * which is a miserable thing to debug from the markup alone.
 *
 * Now the header is taken out of flow and laid over the hero instead. No
 * collapsing, no ancestor chain, no dependence on page template.
 */
:root {
	/* The single place the header's height is written down. */
	--af2-header-height: 12.75rem;
}
body:has(.is-style-hero) .site-container {
	position: relative;
}
body:has(.is-style-hero) .site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.is-style-hero {
	/* padding, not negative margin — the hero reserves its own clearance */
	padding-top: var(--af2-header-height);
	/* text-shadow: 0 0 5px rgba(23, 56, 72, 0.5); */
	letter-spacing: 1px;
	z-index: 1;
}
.is-style-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(to right, rgba(0%, 3%, 8%, 0.65) 0%,rgba(0,0,0,0) 100%) !important;
}

.hero-widget {
	position: relative;
	z-index: 1;
	border: 8px solid white;
	margin-top: -7rem;
	border-radius: 30px;
}
.hero-widget .wp-block-column:first-of-type {
	position: relative;
}
.hero-widget .wp-block-column:first-of-type:after {
	content: '';
	position: absolute;
	top: 0;
	right: -12px;
	width: 2px;
	height: 100%;
	background: rgba(0,0,0,0.15);
}
@media screen and (max-width: 767px) {
	.hero-widget .wp-block-column:first-of-type:after {
		display: none;
	}
	
}
/*
################################
# NAVIGATION
################################
*/
/* hide menu toggle on large screens */
.menu-toggle,
.close-button {
	display: none;
}
/* primary main navigation menu */
.navbar-menu a {
	display: block;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
}
.navbar > .navbar-menu > li > a {
	display: inline-block;
}
.navbar-menu {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.navbar-menu,
.navbar-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.navbar-menu li {
	position: relative;
}
.navbar-menu li:hover > ul,
.navbar-menu li:focus-within > ul /* IE11+ only */ {
	display: block;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}
/* large screens only */
@media (min-width: 768px) {
	.navbar-menu li:not(.donate) a:hover {
		color: var(--wp--preset--color--lemon-curry);
	}
	.navbar-menu .donate {
		background-color: var(--wp--preset--color--lemon-curry);
		color: #fff !important;
		border-radius: 10px;
	}
	.navbar-menu .donate:hover {
		background-color: #b69018;
	}
	.navbar > .navbar-menu > li > a {
		padding: .5rem;
		transition: all 250ms ease;
	}
	.navbar > .navbar-menu > li > a:hover,
	.navbar > .navbar-menu > li > a:focus {
		background-color: rgba(0, 0, 0, 0.05);
	}
	/* child / sub menus */
	.navbar-menu .sub-menu {
		position: absolute;
		left: 0;
		top: 100%;
		visibility: hidden;
		opacity: 0;
		width: 18rem;
		box-shadow: 0 0.25rem 1.5rem rgba(7, 35, 57, 0.5);
		background-color: rgba(7, 26, 42, 0.25);
		backdrop-filter: blur(10px);
		border-radius: 4px;
		border: none;
	}
	.navbar-menu .sub-menu > li > ul {
		left: 100%;
		top: 0;
	}
	.sub-menu a {
		padding: .5rem;
		border-bottom: 1px solid rgba(7, 35, 57, 0.09);
		transition: background-color 250ms ease;
	}
	.sub-menu a:hover {
		background: rgba(7, 35, 57, 0.09);
	}
}
/* small mobile screens only */
@media (max-width: 767px) {
	.navbar-menu {
		padding-left: var(--wp--custom--layout--block-gap);
		padding-right: var(--wp--custom--layout--block-gap);
	}
	.navbar-menu a {
		padding: .5rem;
		border-bottom: 1px solid rgba(0%, 3%, 8%, 0.15);
		width: 100%;
	}
	.menu-toggle {
		display: block;
		border: 0;
		border-radius: 0;
		background: transparent;
		line-height: 1;
		padding: 0;
		font-size: 2rem;
		margin-top: -.4rem;
		color: #fff;
	}
	.toggled .close-button {
		display: block; 
	}
	.close-button {
		position: absolute;
		bottom: 0;
		width: 100%;
		border: none;
		border-radius: 0;
		color: rgba(0%, 3%, 8%, 0.65);
		line-height: 1;
		padding: 0.5rem 1rem;
		text-align: right;
		transform: translateX(-1rem);
		background-color: var(--wp--preset--color--lemon-curry);
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23493f1a" width="18" height="18" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
		background-repeat: no-repeat;
		background-position: calc(100% - .5rem) .5rem;
		padding-right: 2rem;
		border: none;
		cursor: pointer;
		font-weight: bold;
		text-transform: uppercase;
	}
	.logged-in .close-button {
		transform: translateY(-46px) translateX(-1rem);
	}
	.navbar-menu {
		position: fixed;
		left: -300px;
		top: 0;
		width: 300px;
		height: 100%;
		transition: all 300ms ease-in-out;
		z-index: 3;
		background-color: var(--wp--preset--color--irish-beauty);
	}
	.logged-in .navbar-menu {
		top: 46px;
	}
	.toggled .navbar-menu {
		display: block;
		position: fixed;
		left: 0;
		width: 80%;
	}
}
/*
################################
# Default Header
################################
*/
.entry-header {
	max-width: calc(var(--wp--custom--layout--wide));
	margin: -4rem auto 0 auto;
	padding: 2rem;
	border-radius: 20px;
	background: #fff;
	z-index: 1;
	position: relative;
}

.entry-title {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--huge);
	text-align: center;
	/* margin-bottom: var(--wp--custom--layout--block-gap); */
}
/*
################################
# POSTS
################################
*/
/* single */
.single .entry-header {
	max-width: calc(var(--wp--custom--layout--page));

}
/*
 * On single posts the title lives in the header band, so .entry-header no
 * longer renders. The featured image takes over its job: it overlaps the band
 * by -4rem with a matching rounded top edge, and is hard cropped to a banner.
 */
.single-post .featured-image {
	/* max-width: var(--wp--custom--layout--page); */
	margin: -4rem auto calc(var(--wp--custom--layout--block-gap) * 2) auto;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
	background: #fff;
	display: block;
	line-height: 0;
}
.single-post .featured-image img {
	display: block;
	width: 100%;
	height: clamp(200px, 26vw, 380px);
	object-fit: cover;
	object-position: center center;
}
/*
 * No featured image — a branded stand-in at the banner's full height, so the
 * page keeps its rhythm and nothing shifts when an image is added later.
 * Layered gradients only: a wash from the top left, diagonal bands echoing the
 * waves in the logo, over the brand green. No placeholder file to ship, and it
 * inherits the palette, so it follows any future colour change for free.
 */
.single-post .featured-image--placeholder {
	height: clamp(200px, 26vw, 380px);
	background-color: var(--wp--preset--color--irish-beauty, #1a7a4c);
	background-image:
		repeating-linear-gradient(
			-12deg,
			rgba(255, 255, 255, 0.07) 0 14px,
			rgba(255, 255, 255, 0) 14px 46px
		),
		radial-gradient(
			120% 140% at 15% 0%,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0) 60%
		),
		linear-gradient(
			160deg,
			var(--wp--preset--color--irish-beauty, #1a7a4c) 0%,
			var(--wp--preset--color--thermal-aqua, #3fb8a0) 100%
		);
}
/* after post area */
.block-area-after-post {
	margin-left: calc(-1 * var(--wp--custom--layout--padding));
	margin-right: calc(-1 * var(--wp--custom--layout--padding));
}

/* archives & search */
/*
 * The archive header now renders inside .blog-header-background, over the
 * header image, rather than in a white card overlapping it.
 */
.archive-header {
	text-align: center;
	color: #fff;
}
.archive-header__inner {
	max-width: calc(var(--wp--custom--layout--wide));
	margin: 0 auto;
}
.archive .archive-title,
.search .archive-title,
.error404 .archive-title,
.blog .archive-title {
	color: #fff;
	margin-top: 0;
	margin-bottom: 0;
}
.archive-description {
	color: #fff;
	margin-top: var(--wp--custom--layout--block-gap);
}
.archive-description a {
	color: #fff;
}
.archive-header .breadcrumbs {
	margin-bottom: var(--wp--custom--layout--block-gap);
	color: rgba(255, 255, 255, 0.85);
}
.archive-header .breadcrumbs a {
	color: #fff;
}
/*
 * Archives no longer have a white card overlapping the band, so the global
 * .sidebar -4rem pull-up would leave the sidebar poking into the image while
 * the post grid sat below it. Reset the overlap and space the grid instead.
 */
.archive .sidebar,
.search .sidebar,
.blog .sidebar,
.error404 .sidebar {
	margin-top: 0;
}
.archive .site-inner,
.search .site-inner,
.blog .site-inner,
.error404 .site-inner {
	padding-top: var(--wp--custom--layout--block-gap-large);
}

.archive .site-inner,
.search .site-inner {
	margin-bottom: var(--wp--custom--layout--block-gap);
}
/*
 * Explicit column counts. A percentage inside the track sizing function is not
 * safe here: .site-main is a flex item with flex-basis: 0, so its width is
 * partly content-determined, and a percentage track would depend on a container
 * that depends on the tracks. That cycle resolves to nonsense and blows the
 * tracks out well past the container.
 *
 * Breakpoints below account for the sidebar taking 336px + gap, so the main
 * column is roughly (viewport - 32 - 352) until the sidebar drops under at 767.
 */
.archive .site-main,
.search .site-main {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--custom--layout--block-gap);
	max-width: var(--wp--custom--layout--wide);
	margin: 0 auto;
}
/* main col ~1016px -> 3 cards at ~338px */
@media (max-width: 1400px) {
	.archive .site-main,
	.search .site-main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
/* main col ~640px -> 2 cards at ~312px */
@media (max-width: 1024px) {
	.archive .site-main,
	.search .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.archive .site-main > *,
.search .site-main > * {
	
}
.wp-block-query .wp-block-post-template {
	margin: 0;
}
.wp-block-query .wp-block-post-template .wp-block-post-featured-image {
	border-radius: 10px;
	overflow: hidden;
}
.wp-block-query .wp-block-post-template .wp-block-post-featured-image picture {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.wp-block-query .wp-block-post-template .wp-block-post-date {
	text-transform: uppercase;
	color:rgba(0, 0, 0, 0.6);
	font-size: var(--wp--preset--font-size--tiny);
	margin-bottom: var(--wp--custom--layout--block-gap);
}
.wp-block-query .wp-block-post-template .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}
/*
 * Query Loop grid items must be allowed to shrink below their content's
 * intrinsic width. Grid items default to min-width: auto, which sets a
 * min-content floor the track can't go under.
 */
.wp-block-query .wp-block-post-template.is-layout-grid > li {
	min-width: 0;
}
/*
 * Intermediate column counts for the Query Loop grid.
 *
 * The class is repeated to reach specificity (0,6,0), which is needed to beat
 * WordPress core's own rule — it repeats .wp-block-post-template-is-layout-grid
 * four times inside @media (max-width: 600px) and sets a bare `1fr`. A bare
 * `1fr` is minmax(auto, 1fr), so the track can never shrink below its content;
 * every override here uses minmax(0, 1fr) instead.
 *
 * The wide-screen column count is intentionally left alone so the block's own
 * "Columns" setting in the editor still governs above 1100px.
 */
@media (max-width: 1100px) {
	.wp-block-query .wp-block-post-template.is-layout-grid.is-layout-grid.is-layout-grid.is-layout-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 900px) {
	.wp-block-query .wp-block-post-template.is-layout-grid.is-layout-grid.is-layout-grid.is-layout-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 520px) {
	.wp-block-query .wp-block-post-template.is-layout-grid.is-layout-grid.is-layout-grid.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* single column on phones */
@media (max-width: 600px) {
	.archive .site-main,
	.search .site-main {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* ################################
# BLOG HEADER — RESPONSIVE
################################### */
@media (max-width: 767px) {
	/*
	 * Only spacing and type scale here. The band wraps the header, so there is
	 * no geometry to keep in sync at any breakpoint.
	 */
	.blog-header-background--has-content {
		padding-bottom: 2rem;
	}
	.single-post .blog-header-background--has-content {
		padding-bottom: 6rem;
	}
	.blog-header__eyebrow {
		font-size: var(--wp--preset--font-size--small);
		margin-bottom: 0.5rem;
	}
	.blog-header__title,
	.blog-header-background__inner .archive-title {
		font-size: var(--wp--preset--font-size--big);
	}
	.single-post .featured-image {
		border-radius: 12px 12px 0 0;
	}
	.single-post .featured-image--placeholder,
	.single-post .featured-image img {
		height: clamp(160px, 40vw, 240px);
	}
}
/* post summary */
.post-summary__image,
.wp-block-post-featured-image {
	background-color: whitesmoke;
	border-radius: 10px;
	overflow: hidden;
	min-height: 160px;
	/*
	 * Deliberately block, not flex. As a flex item a replaced <img> gets sized
	 * from its intrinsic aspect ratio against the stretched cross-axis height,
	 * so a portrait image came out narrower than the box (351 * 768/940 = 286px)
	 * and left a gap. Block + object-fit fills the square exactly.
	 */
	display: block;
	aspect-ratio: 1 / 1;
}
/*
 * Both .post-summary__image and .wp-block-post-featured-image get aspect-ratio
 * 1/1 above, so both need their image constrained to fill that box. Previously
 * only .post-summary__image was listed here, which left the Query Loop's <img>
 * to lay out at its natural size — a portrait image then drove the 1/1 wrapper
 * as wide as the image was tall, blowing out the grid track. (The rule further
 * up targeting `picture` never matched; the block outputs a bare <img>.)
 */
.post-summary__image img,
.wp-block-post-featured-image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}
.post-summary .entry-category {
	margin-bottom: 0;
	font-size: var(--wp--preset--font-size--small);
}
.post-summary .entry-category a {
	text-decoration: none;
	padding: .5rem 0;
	display: inline-block;
}
.post-summary .post-summary__title {
	font-size: var(--wp--preset--font-size--large);
}
.post-summary .post-summary__title a {
	text-decoration: none;
}
/* post navigation */
.nav-links {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin: 3rem 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	clear: both;
}

.nav-previous,
.nav-next {
	flex: 1;
}
.nav-next {
	text-align: right;
}
.nav-previous a,
.nav-next a {
	display: block;
	text-decoration: none;
	color: inherit;
	/* border: 1px solid var(--wp--preset--color--thermal-aqua); */
	padding: 1rem 0;
	/* border-radius: 20px; */
	/* transition: background-color 0.2s ease; */
}

.nav-previous a:hover,
.nav-next a:hover {
	/* background: var(--wp--preset--color--kestrel-white); */
}

.nav-subtitle {
	display: block;
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	color: var(--wp--preset--color--lemon-curry);
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.nav-title {
	color: var(--wp--preset--color--irish-beauty);
	font-weight: 700;
}
/*
################################
# BREADCRUMBS
################################
*/
.breadcrumbs nav {
	margin-top: var(--wp--custom--layout--block-gap);
	margin-bottom: var(--wp--custom--layout--block-gap);
}
nav .breadcrumb {
	font-size: var(--wp--preset--font-size--tiny);
	color: #777;
	text-transform: uppercase;
}
/*
################################
# SEARCH
################################
*/
.wp-block-search {
	margin-bottom: var(--wp--custom--layout--block-gap);
	min-width: 0;
	max-width: 100%;
}
.wp-block-search .wp-block-search__label {
	display: block;
	margin-bottom: .4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}
.wp-block-search.wp-block-search .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: .5rem;
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.wp-block-search.wp-block-search .wp-block-search__input {
	flex: 1 1 9rem;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin: 0;
	padding: .55rem .75rem;
	border: 1px solid #c4c4c4;
	border-radius: 8px;
	background: #fff;
	color: #333;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}
.wp-block-search.wp-block-search .wp-block-search__input::placeholder {
	color: #8a8a8a;
}
.wp-block-search.wp-block-search .wp-block-search__input:focus {
	border-color: var(--wp--preset--color--irish-beauty);
	outline: 2px solid var(--wp--preset--color--irish-beauty);
	outline-offset: 1px;
}
.wp-block-search.wp-block-search .wp-block-search__button {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: .55rem 1.1rem;
	border: 0;
	border-radius: 8px;
	background-color: var(--wp--preset--color--lemon-curry);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 200ms ease;
}
.wp-block-search.wp-block-search .wp-block-search__button:hover,
.wp-block-search.wp-block-search .wp-block-search__button:focus-visible {
	background-color: #b69018;
}
/*
 * Icon button: square it off so it doesn't stretch, and keep the SVG centred.
 */
.wp-block-search.wp-block-search .wp-block-search__button.has-icon {
	padding: .55rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
/*
 * Button-inside variant draws one bordered box around both, so wrapping would
 * look broken. Keep a single row and move the border to the wrapper.
 */
.wp-block-search.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper {
	flex-wrap: nowrap;
	padding: 4px;
	border: 1px solid #c4c4c4;
	border-radius: 8px;
	background: #fff;
}
.wp-block-search.wp-block-search.wp-block-search__button-inside .wp-block-search__input {
	flex: 1 1 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.wp-block-search.wp-block-search.wp-block-search__button-inside .wp-block-search__input:focus {
	outline: 0;
}
.wp-block-search.wp-block-search.wp-block-search__button-inside .wp-block-search__button {
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
}
/*
################################
# COMMENTS
################################
*/
.entry-comments {
	margin: calc(var(--wp--custom--layout--block-gap) * 2) 0;
	margin-left: auto;
	margin-right: auto;
}
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*
################################
# BLOCK AREAS
################################
*/
.widget {
	
}

.widget select {
	max-width: 100%;
}

/*
################################
# MEDIA
################################
*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/*
################################
# CAPTIONS
################################
*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	
}

.wp-caption-text {
	text-align: center;
}

/*
################################
# GALLERIES
################################
*/
.gallery {
	
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	flex: 0 1 calc(50% - 1rem)
}

.gallery-columns-3 {
	flex: 0 1 calc(33.333% - 1rem)
}

.gallery-columns-4 {
	flex: 0 1 calc(25% - 1rem)
}

.gallery-columns-5 {
	flex: 0 1 calc(20% - 1rem)
}

.gallery-columns-6 {
	flex: 0 1 calc(16.66666667% - 1rem)
}

.gallery-columns-7 {
	flex: 0 1 calc(14.28571429% - 1rem)
}

.gallery-columns-8 {
	flex: 0 1 calc(12.5% - 1rem)
}

.gallery-columns-9 {
	flex: 0 1 calc(11.11111111% - 1rem)
}

.gallery-caption {
	display: block;
}

/*
################################
# ACCESSIBILITY
################################
*/
/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments */
.alignleft {
	float: left;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {
	float: right;
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
/*
################################
# SITE FOOTER
################################
*/
.site-footer .alignfull .alignwide {
	padding-left: var(--wp--custom--layout--padding);
	padding-right: var(--wp--custom--layout--padding);
}
@media (max-width: 781px) {
	.block-area-site-footer .wp-block-columns .wp-block-column:not(:first-of-type) {
		flex-basis: calc(50% - var(--wp--custom--layout--block-gap)) !important;
	}
}
@media (max-width: 560px) {
	.block-area-site-footer .wp-block-columns .wp-block-column:not(:first-of-type) {
		flex-basis: 100% !important;
	}
}
.site-footer ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.copyright {
	padding: var(--wp--custom--layout--block-gap) var(--wp--custom--layout--padding);
}