/*!
--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Vars
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

:root {
	--font-text: "Figtree", sans-serif;

	--clr-text: oklch(14.92% 0.0144 178.63); /* Main colour */
	--clr-bg: oklch(98.86% 0.0017 67.8);
	--clr-white: oklch(100% 0 0);

	--clr-primary-mid: oklch(68% 0.1032 176.16); /* Main colour */
	--clr-primary-dark: oklch(31% 0.0468 175.23); /* Main colour */
	--clr-primary-mid-dark: oklch(57.71% 0.0858 176.57);
	--clr-primary-light: oklch(83.59% 0.0573 179.33);
	--clr-primary-ultra-dark: oklch(25.33% 0.0358 173.9);
	--clr-highlight: oklch(88.64% 0.0218 98.15); /* Stone */
	--clr-highlight-30: oklch(96.65% 0.0067 97.35); /* Stone 30% */

	--clr-regions: oklch(72.79% 0.0521 240.29);
	--clr-regions-accent: oklch(86.42% 0.0258 240.7);
	--clr-projects: oklch(83.59% 0.0573 179.33);
	--clr-projects-accent: oklch(91.63% 0.0285 180.23);
	--clr-reports: oklch(80.81% 0.1062 82.63);
	--clr-reports-accent: oklch(90.13% 0.0545 83.43);
	--clr-resources: oklch(90.49% 0.0257 8.64);
	--clr-resources-accent: oklch(95.2% 0.012 11);

	--shadow: drop-shadow(6px 6px 8px rgba(0, 0, 0, 0.2));

	interpolate-size: allow-keywords;

}

@supports not (background-color: oklch(0%, 0, 0)) {
	:root {
		--clr-text: #050d0b; /* Main colour */
		--clr-bg: #fcfbfa;
		--clr-white: #fff;
		
		--clr-primary-mid: #43ad96; /* Main colour */
		--clr-primary-dark: #11382f; /* Main colour */
		--clr-primary-700-dark: #28685a; 
		--clr-primary-mid-dark: #368a78;
		--clr-primary-light: #a1d6ca;
		--clr-primary-ultra-dark: #0d2821;
		--clr-highlight: #dddaca; /* Stone */
		--clr-highlight-30: #f5f4ef; /* Stone 30% */

		--clr-regions: #8aacc5;
		--clr-regions-accent: #c4d5e2;
		--clr-projects: #a1d6ca;
		--clr-projects-accent: #d0eae4;
		--clr-reports: #e2ba6d;
		--clr-reports-accent: #f0dcb6;
		--clr-resources: #f0d9dc;
		--clr-resources-accent: #f7eced;
	}
}





/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}


/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
body,
button,
input,
optgroup,
select,
textarea {
	color: var(--clr-text);
	font-family: var(--font-text), sans-serif;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.5;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Reset from Kevin Powell
--------------------------------------------- */

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

* {
  margin: 0;
  padding: 0;
  font: inherit; /* Get rid of all font sizes and heights */
}

html {
  color-scheme: dark light; /* Default dark */
  hanging-punctuation: first last; /* Not supported in Chrome */
}

body {
  min-height: 100vh;
}

/* Media responsive */
img, picture, svg, video {
  display: block;
  max-width: 100%;
}

blockquote {
  text-wrap: balance;
}

p {
  /*max-width: 75ch;*/
  text-wrap: pretty; /* Prevents orphans on lines */
}

@media (prefers-reduced-motion: no-preference) {
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem;
  }
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */

h1 {
	font-size: clamp(2.25rem, 4vw, 3.75rem);
	font-weight: 700;
	color: var(--clr-white);
	line-height: 1.1;
	text-wrap: balance;
}

h1.entry-title {
	font-size: clamp(2.25rem, 4vw, 2.75rem);
	font-weight: 800;
}

h2 {
	font-size: clamp(2.25rem, 6vw, 3rem);
	font-weight: 700;
	margin-bottom: 3rem;
	line-height: 1.1;
}

h2.entry-title {
	font-weight: 800;
}

h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 500;
	margin-bottom: 1.5rem;
}

h4 {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	font-weight: 500;
	color: var(--clr-primary-mid-dark);
	margin-bottom: 2rem;
}

h5 {
	font-size: 1.25rem;
	font-weight: 700;
	margin-block: 2rem 0.5rem;
	line-height: 1.25;
}

p {
	line-height: 1.6;
	margin-bottom: 1.5em;
}

#history p, 
#history li, 
#meet-team p,
.impacts-cont p {
	font-size: 1.25rem;
}

#history li {
	margin-bottom: 0.75rem;
}

p.has-large-font-size {
	line-height: 1.4;
}

dfn,
em,
i {
	font-style: italic;
}

address {
	margin: 0 0 1.5em;
}

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

body {
	background: var(--clr-bg);
	overflow-x: hidden;
}

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

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;
}

article {
	padding-block: 4rem 2rem;
}

.single article {
	padding-block: 2rem;
}

blockquote {
	position: relative;
	font-size: 1.5rem;
	font-weight: 500;
	font-style: italic;
	text-align: center;
	margin: 2rem 0;
	padding-block: 2rem 0.5rem;
}

blockquote p {
	line-height: 1.25;
}

.home-quote blockquote {
	font-size: clamp(1.375rem, 4vw, 2.375rem);
	font-weight: 700;
	font-style: initial;
	margin: 0 1.5rem 0.5rem;
	padding-top: 0;
}

.home-quote blockquote p {
	line-height: 1.25;
	margin-bottom: 0.25rem;
}

.home-quote {
	margin: 0;
	padding: 1rem 0 0 0;
	color: var(--clr-primary-700-dark);
}

blockquote::before, 
blockquote::after { 
  content: ""; 
  position: absolute; 
  left: 4rem; 
  width: calc(100% - 8rem); 
  border-top: solid 2px var(--clr-primary-mid); 
} 
 
blockquote::before { 
  top: 0; 
} 
 
blockquote::after { 
  bottom: 0; 
} 

blockquote + blockquote::before {
	width: 0;
}


cite {
	font-weight: 500;
	color: var(--clr-primary-mid);
	font-size: 1.5rem;
	font-style: initial;
	padding-bottom: 1.5rem;
}

.home-quote cite {
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.1;
}

blockquote p {
	position: relative;
}

blockquote p:first-of-type::before {
    font-family: Georgia, serif;
    display: block;
    content: "\201C";
    font-size: 12rem;
    position: absolute;
    left: -0.3em;
    top: -0.45em;
    color: var(--clr-highlight);
    z-index: -1;
}

blockquote p:last-of-type::after {
    font-family: Georgia, serif;
    display: block;
    content: "\201D";
    font-size: 12rem;
    position: absolute;
    right: -0.15em;
    bottom: -0.85em;
    color: var(--clr-highlight);
    z-index: -1;
}

.home-quote blockquote::before, 
.home-quote blockquote::after,
.home-quote blockquote p::before, 
.home-quote blockquote p::after {
	content: none;
}

input {
	accent-color: var(--clr-primary-mid-dark);
}

figcaption {
	font-size: 0.875rem;
	font-style: italic;
	margin-bottom: 4em;
}

/* 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%;
}

/* Links
--------------------------------------------- */
a, a:visited {
	color: var(--clr-primary-mid);
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: var(--clr-primary-mid);
	text-decoration: underline;
}

a:focus {
	outline: thin dotted var(--clr-highlight);
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.menu-btn,
.wp-element-button,
.wp-block-file__button,
.wp-block-button__link {
	font-size: 1.25rem;
	font-weight: 600;
	border: none;
	border-radius: 100vmax;
	background: var(--btn-bg);
	color: var(--clr-white);
	line-height: 1;
	padding: 1rem 2rem;
}

button:hover,
button:active,
button:focus,
.menu-btn:hover,
.menu-btn:active,
.menu-btn:focus,
.wp-element-button:hover,
.wp-element-button:active,
.wp-element-button:focus,
.wp-block-file__button:hover,
.wp-block-file__button:active,
.wp-block-file__button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:active,
.wp-block-button__link:focus,
input[type="button"]:hover,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:active,
input[type="submit"]:focus {
	background: var(--btn-hover-bg);
	color: var(--clr-text);
	cursor: pointer;
}

.btn-main,
.wp-element-button,
.wp-block-file__button,
.wp-block-button__link {
	--btn-bg: var(--clr-primary-mid);
	--btn-hover-bg: var(--clr-primary-light);
	position: relative;
	z-index: 4500;
}

.btn-subscribe, input[type="submit"].hs-button {
	--btn-bg: var(--clr-primary-mid-dark);
	--btn-hover-bg: var(--clr-highlight);
}

.btn-contact {
	--btn-bg: var(--clr-primary-dark);
	--btn-hover-bg: var(--clr-primary-mid);
}

.circle-link-btn {
	color: var(--clr-text);
	cursor: pointer;
}

.btn-regions {
	--btn-bg: var(--clr-regions);
	--btn-hover-bg: var(--clr-regions-accent);
}

.btn-projects {
	--btn-bg: var(--clr-projects);
	--btn-hover-bg: var(--clr-projects-accent);
}

.btn-reports {
	--btn-bg: var(--clr-reports);
	--btn-hover-bg: var(--clr-reports-accent);
}

.btn-resources {
	--btn-bg: var(--clr-resources);
	--btn-hover-bg: var(--clr-resources-accent);
}

.wp-element-button {
	margin-block: 1.5em;
}

a.wp-element-button,
a.wp-block-file__button,
a.wp-block-button__link {
	color: var(--clr-white);
}

a.wp-element-button:hover,
a.wp-block-file__button:hover,
a.wp-block-button__link:hover {
	color: var(--clr-text);
	text-decoration: none;
}

#btn-donate {
	font-size: 1rem;
	padding: 0.75rem 2rem;
}

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: var(--clr-text);
	background: var(--clr-white);
	border: 1px solid var(--clr-primary-light);
	border-radius: 0.25rem;
	padding: 0.5rem;
}

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 var(--clr-primary-light);
}

textarea {
	width: 100%;
}

/* Bloody Hubspot form */

fieldset.form-columns-1:not(:first-of-type) {
	margin-bottom: 1.5rem !important;
}

fieldset.form-columns-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	margin-bottom: 1rem !important;
}

input[type="email"] {
	width: 100% !important;
	margin-bottom: 2rem !important;
}

.hs-fieldtype-text .input,
.hs-fieldtype-text .input input,
.hs-form-field {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.hs-error-msgs {
	margin: 0.5rem 0 0 0;
}

.hs-error-msgs li {
	list-style: none;
	margin: 0;
}


/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/
.wrapper {
	max-width: 80.5rem; /* 1160px + 64px padding each side */
	margin-inline: auto;
	padding: 0 1rem;
}

.inner-wrapper {
	max-width: 940px;
	margin-inline: auto;
	padding-inline: 2.5rem;
}

.centred {
	text-align: center;
	margin-inline: auto;
}

.end {
	justify-self: end;
}

.space-above {
	margin-top: 3rem;
}

.space-below {
	margin-bottom: 3rem;
}

.drop-shadow {
	box-shadow: 0.25rem 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.intro-para {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.1;
}

.about-intro .intro-para {
	font-weight: 400;
}

.work-intro {
	margin-bottom: 12rem;
}

.wp-block-media-text {
	margin-bottom: 2rem;
}

.four-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

.two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem 0;
}

.home-two-col > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	grid-template-areas:
		"content"
		"image";
}

.team-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 3rem;
}

.team-btns {
	display: grid;
	grid-template-columns: 1fr;
	width: fit-content;
	gap: 3rem;
	margin: 4rem auto;
}

.selected-btn-projects {
	padding-bottom: 0.75rem;
	cursor: default;
	border-bottom: solid 2px var(--clr-projects);
}

.selected-btn-reports {
	padding-bottom: 0.75rem;
	cursor: default;
	border-bottom: solid 2px var(--clr-reports);
}

.selected-btn-projects .btn-projects {
	color: var(--clr-white);
	--btn-hover-bg: var(--clr-projects);
	cursor: default;
}

.selected-btn-reports .btn-reports {
	color: var(--clr-white);
	--btn-hover-bg: var(--clr-reports);
	cursor: default;
}

#hero-img {
	grid-area: image;
  margin-inline: -15%;
}

#hero-text {
	grid-area: content;
}

.fixed-bg {
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center, center center;
  position: relative;
}

.logo { 
	width: calc(100% - 1.5rem);
	height: calc(100% - 1.5rem);
	margin: 0.75rem;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  transition: transform 400ms;
}

.staff-img {
	filter: grayscale(100%);
}

.team-tiles .fixed-bg {
  background-position: center top, center center;
}

.tile {
	position: relative;
}

.tile .fixed-bg {
    position: absolute;
    background-attachment: initial;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 400ms;
}

.tile:hover .fixed-bg, 
.tile:focus .fixed-bg, 
.tile:hover .logo, 
.tile:focus .logo {
    transform: scale(1.2);
}

.tile-link, .tile-link:hover {
	text-decoration: none;
}

.fixed-bg.left.top {
  background-position: left top, left top;
}

.fixed-bg.left.center {
  background-position: left center, left center;
}

.fixed-bg.left.bottom {
  background-position: left bottom, left bottom;
}

.fixed-bg.center.top {
  background-position: center top, center top;
}

.fixed-bg.center.center {
  background-position: center center, center center;
}

.fixed-bg.center.bottom {
  background-position: center bottom, center bottom;
}

.fixed-bg.right.top {
  background-position: right top, right top;
}

.fixed-bg.right.center {
  background-position: right center, right center;
}

.fixed-bg.right.bottom {
  background-position: right bottom, right bottom;
}

/* The image in the blob shape on the home page */
.home-hero {
	mask-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20version%3D%221.1%22%20viewBox%3D%220%200%20540%20465%22%3E%3Cpath%20id%3D%22kidney%22%20d%3D%22M536.8%2C196.7C502.3-42.8%2C325-2.9%2C255.1%2C12c-69.9%2C14.9-126.9%2C73.6-207.1%2C135.5-80.2%2C61.9-68.9%2C211.9%2C102.2%2C288.8%2C171.2%2C76.9%2C421%2C0%2C386.5-239.6Z%22%2F%3E%3C%2Fsvg%3E");
	mask-position: center top;
	mask-repeat: no-repeat;
}

.home-hero img {
  object-fit: cover;
}

.squiggle {
  fill: var(--clr-highlight);
}

#intro .squiggle {
  fill: #fad4a6;
}

.section-2, .section-3, .section-4 {
	background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
}

.section-2 {
	background-image: url(img/squiggle-2.svg);
  padding: 16vw 0 0 0;
  margin-top: -8vw;
}

.section-3 {
	background-image: url(img/squiggle-3.svg);
  padding: 14vw 0 0 0;
  margin-top: -4vw;
}

.section-4 {
	background-image: url(img/squiggle-4.svg);
  padding: 24vw 0 6vw 0;
  margin-top: -4vw;
}

/* Variations for sections on different pages */
#meet-team {
	padding: 23vw 0 0 0;
  margin-top: -14vw;
}

.lozenge {
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
  border-radius: 100vmax;
  background: var(--btn-bg, var(--clr-highlight));
  line-height: 1;
  padding: 0.25em 1em;
  width: fit-content;
  height: fit-content;
  margin: 0 0.5rem 0.5rem 0;
}

.lozenge.regions {
	--btn-bg: var(--clr-regions);
}

.lozenge.project {
	--btn-bg: var(--clr-projects);
}

.lozenge.reports {
	--btn-bg: var(--clr-reports);
}

.lozenge.resources,
.lozenge.news,
.lozenge.media,
.lozenge.events {
	--btn-bg: var(--clr-resources);
}

.read-more p {
	color: var(--clr-primary-mid);
	margin-bottom: 0;
}

.arrow {
	width: 40px;
	height: 16px;
	margin-top: 0.25rem;
}

.arrowhead, .arrow-long {
	fill: var(--clr-primary-mid);
  stroke: none;
	transition: all 300ms ease-in;
}

.view-all {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 3rem;
	font-weight: 600;
}

.view-all:hover {
	color: var(--clr-text);
	text-decoration: none;
}

.view-all-arrow {
	width: 60px;
	height: 24px;
}

.view-all .arrowhead,
.view-all .arrow-long,
.post-nav .arrowhead,
.post-nav .arrow-long {
	fill: var(--clr-text);
}

a.arrow-anim,
.next-previous a {
	color: var(--clr-primary-dark);
}

a.arrow-anim:hover, 
.next-previous a:hover {
	color: var(--clr-primary-dark);
	text-decoration: none;
}

#prev-arrow {
	transform: rotate(180deg);
}


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

.filter-link {
	cursor: pointer;
}

#nav-cont, 
#donate-cont {
	justify-self: end;
}

.main-navigation li {
	list-style: none;
}

#primary-menu {
	display: flex;
	gap: 1.5rem;
}

#primary-menu li {
	padding: 0.5rem 0.25rem;
}

#primary-menu li:hover {
	border-bottom: solid 3px var(--clr-primary-light);
}

.main-navigation a {
	color: var(--clr-white);
	text-decoration: none;
}

#primary-menu li.current-menu-item, 
#primary-menu li.current-page-ancestor,
.news-events #menu-item-2053,
.work #menu-item-2047 {
	border-bottom: solid 3px var(--clr-primary-mid);
}

#primary-menu li.current-menu-item a {
	cursor: default;
}

#menuicon {
	display: block;
	padding: 0;
	border-radius: 0;
	background: transparent;
	border: none;
	cursor: pointer;
}

.burger {
	display: block;
	width: 1.875rem;
	height: 1.875rem;
	fill: var(--clr-white);
}

#menuicon:hover .burger {
	fill: var(--clr-primary-light);
}

#menuicon .line {
	transition: x 300ms ease-in, y 300ms ease-in 300ms, transform 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms;
	/*transform-origin: center;*/
}

#menuicon[aria-expanded="true"] .line {
	transition: x 300ms ease-in, y 300ms ease-in, transform 300ms ease-in, rotate 300ms ease-in 300ms, opacity 0ms 300ms;
}

#menuicon[aria-expanded="true"] :is(.top, .bottom) {
	transform: scaleX(1.4);
}

#menuicon[aria-expanded="true"] .top {
	rotate: 45deg;
	y: -3px;
}

#menuicon[aria-expanded="true"] .middle {
	opacity: 0;
}

#menuicon[aria-expanded="true"] .bottom {
	rotate: -45deg;
	x: -47px;
	y: 67px;
	/*transform: translate(-50px, 0);*/
}

.menu-handheld-container {
}

#menu-handheld {
   display: flex;
   flex-direction: column;
   position: absolute; 
   top: 0; 
   right: 0; 
   background: var(--clr-primary-dark); 
   width: 100%;
   z-index: 300;
   display: none; 
   padding-top: 10rem; 
   padding-bottom: 2rem; 
   list-style: none; 
   font-weight: 600;
}

.inline {
	display: inline-block;
}

#menu-handheld[data-state="opened"] {
	animation: clipPathMenuOpen 1s ease-in-out forwards;
	display: flex;
}

#menu-handheld[data-state="closing"] {
	animation: clipPathMenuClose 1s ease-in-out forwards;
	display: flex;
}

#menu-handheld[data-state="closed"] {
	display: none;
}

#menu-handheld li {
	padding: 0.5rem 0;
}

#menu-handheld > * {
	padding-bottom: 2rem;
	border-bottom: solid 2px var(--clr-primary-700-dark);
}

.sub-menu {
	margin: 0;
}

#menu-handheld > li {
	padding: 0.5rem 0;
}

.menu-head > a {
	color: var(--clr-primary-mid);
}

#menu-handheld li.current-menu-item, #menu-handheld .sub-menu li:hover {
	border-bottom: none;
}

.menu-split .sub-menu {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0 2em;
}

.menu-split-btns .sub-menu {
	grid-template-columns: 1fr;
	gap: 1em;
	margin-block: 1.125rem;
}

#menu-handheld li.menu-btn {
	padding: 0.75em 1em;
  height: fit-content;
  text-align: center;
}

#menu-handheld li.menu-btn a, #menu-handheld li.menu-btn:hover a {
	color: var(--clr-text);
	font-size: 1.25rem;
}



@keyframes clipPathMenuOpen {
	0% {
		clip-path: circle(0% at top right);
	}
	100% {
		clip-path: circle(150% at top right);
	}
}
@keyframes clipPathMenuClose {
	0% {
		clip-path: circle(150% at top right);
	}
	100% {
		clip-path: circle(0% at top right);
	}
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled #menu-handheld {
	display: block;
}

/* Search */ 

#search-cont {
	aspect-ratio: 1 / 1;
}

#search-area {
	position: absolute;
	bottom: -2rem;
	right: 1rem;
	width: 0;
	overflow: hidden;
	transition: width 300ms ease-in;
	transform-origin: right;
}

#search-cont[aria-expanded="true"] #search-area {
	width: calc(100% - 2rem);
}

#glass {
	fill: var(--clr-white);
}

#search-cont:hover #glass,
#search-cont:active #glass {
	fill: var(--clr-primary-light);
}

#s {
	width: 100%;
}

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

#masthead {
	position: absolute;
	top: 0;
	width: 100%;
	padding-top: 1.75rem;
}

#head-cont {
	position: relative;
}

.head-bg {
	background-color: var(--clr-primary-dark);
	mask-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%22165.2%22%20version%3D%221.1%22%20viewBox%3D%220%200%201440%20165.2%22%3E%3Cdefs%3E%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20isolation%3A%20isolate%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M1440%2C0H0v57.1c54.9%2C26.5%2C188.5%2C83.5%2C383%2C103.5%2C234.5%2C24.1%2C403.5-52%2C495-84%2C183.2-64.1%2C179.5-38.5%2C245.5%2C11s139.5-72.5%2C204.5-72.5%2C90.5%2C61%2C112%2C87.5V0Z%22%2F%3E%3C%2Fsvg%3E"),
		linear-gradient(black, black calc(100% - 11.47vw + 0.5px), transparent calc(100% - 11.47vw + 0.5px), transparent);
	mask-size: 100vw auto;
	mask-position: bottom center;
	mask-repeat: repeat-x;
	padding: 14rem 0 clamp(3.5rem, 14vw, 10rem) 0;
}

/* The 11.47vw comes from the aspect ratio of the original svg mask. 
The mask was converted to the data format at https://www.svgviewer.dev/svg-to-data-uri. 
The tutorial on this is at the five minute mark of https://www.youtube.com/watch?v=xz9jkLceRGQ. */
#intro {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(img/gladstone-bg.jpg);
	text-align: center;
	padding: 12rem 0 clamp(4rem, 12vw, 12rem) 0;
}

#intro h4 {
	  max-width: 55ch;
	  color: var(--clr-white);
	  text-align: center;
	  text-wrap: pretty;
	  margin: clamp(2rem, 3.5vw, 4rem) auto 4em;
}

#intro h4 strong,
.intro-para strong {
	  font-weight: 800;
}

#about {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(img/What-we-do-head.jpg);
}

#team {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(img/about-us-head.jpg);
}

#work {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(img/our-work-head.jpg);
}

#news {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url(img/news-events-head.jpg);
}

#no-image {
	background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
}

#head-squiggle {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	bottom: -2.8vw;
}

header {
	color: var(--clr-white);
}

#header-split {
	display: grid;
	grid-template-columns: 4rem 1fr 2rem min-content 2rem;
	grid-template-areas: 
    "logo . search donate nav";
	gap: 0.5rem;
	z-index: 400;
}

#menuicon,
.site-branding,
#search-cont,
#donate-cont {
	z-index: 400;
}

#menuicon,
.site-branding,
#donate-cont {
	position: relative;
}

.site-branding {
	grid-area: logo;
	margin-top: -1.125rem;
}

#nav-cont {
	grid-area: nav;
	margin-top: 0.25rem;
}

#search-cont {
	grid-area: search;
	margin-top: 0.25rem;
}

#donate-cont {
	grid-area: donate;
}

.menu-main-nav-container {
	display: none;
}

#explore-work, .circle-link {
	text-align: center;
}

.circle-link-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1/1;
	border-radius: 50%;
	max-width: 16em;
	margin: 0 auto 2em;
}

.single .circle-link-img {
	margin: 0 0 2em 0;
}

/* Home page */

.featured {
	display: none;
}

.team-tiles .circle-link-img {
	max-width: 18.75em;
}

.site-description {
	color: var(--clr-white);
}

.home-inset {
	font-size: clamp(1rem, 2vw, 1.375rem);
}

.home-feature-cont, 
.feature-block > .wp-block-group__inner-container, 
.work-tiles {
	display: flex;
	flex-direction: column;
	gap: 3em;
	justify-content: stretch;
}

.home-feature {
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 1em;
	background: var(--clr-highlight-30);
	width: 100%;
	overflow: hidden;
	align-self: stretch;
}

.home-feature-img-cont {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3/2;
}

.home-feature-no-img {
	background: var(--clr-primary-mid-dark);
}

.home-feature-text {
	padding: 1.5rem;
}

.home-feature-text h3 {
	line-height: 1.1;
	color: var(--clr-text);
	margin-top: 0.5em;
}

a .home-feature-text, 
a:hover .home-feature-text, 
a .work-content, 
a:hover .work-content {
	color: initial;
}

.feature-date,
.single-date {
	white-space: nowrap;
}

.read-more {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: auto;
}

.arrow-anim:hover .arrow-long {
	width: 93px;
}

.arrow-anim:hover .arrowhead {
	transform: translate(0, 0);
}

.lozenge-date-cont {
	display: flex;
	flex-wrap: wrap;
}

.feature-date {
	margin-left: auto;
}

.impacts-cont {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

.impacts-img {
	padding-inline: 3rem;
}

/* Similar stuff for What we do page */

.feature-cont > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 1em;
	background: var(--clr-highlight-30);
	width: 100%;
	min-height: 16rem;
	overflow: hidden;
}

.feature-text > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 2rem;
}

.feature-text > .wp-block-group__inner-container p {
	font-size: 1.125rem;
}

.feature-img {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 3/2;
}

.feature-img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Who we are page */

.team-cont article {
	padding-top: 0;
}

#team-link-img {
	background-image: url(img/hero-team.jpg);
}

#board-link-img {
	background-image: url(img/hero-board.jpg);
}

.staff-links {
	display: flex;
	gap: 0.5rem;
}

.socmed {
	fill: var(--clr-primary-mid);
}

.socmed:hover, 
.socmed:active {
	fill: var(--clr-primary-dark);
}

.staff-name {
	font-size: 1.5rem;
	font-weight: 800;
	margin-bottom: 0;
}

.staff-pos {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
	line-height: 1.1;
}

/* Featured tiles on both work and events */

.featured-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 3em;
}

.featured-tile {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 14em auto;
	border-radius: 1em;
  background: var(--clr-highlight-30);
  width: 100%;
  overflow: hidden;
  position: relative;
}

.tile-link {
	position: absolute;
	inset: 0;
}

/* Related tiles for the bottom of single posts */

#related-tiles {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 3em;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
}

#related-tiles > * {
	scroll-snap-align: start;
}

#related-tiles::-webkit-scrollbar {
    display: none;
}

#related-tiles {
  scrollbar-width: none; /* For Firefox */
}

.align-right {
	display: flex;
	justify-content: flex-end;
}

#related-btns {
	display: grid;
	grid-template-columns: 50px 50px;
	gap: 1em;
	margin: 2em 0 0 auto;
}

.related-btn-arrow {
  fill: none;
  stroke: var(--clr-primary-mid);
  stroke-width: 3px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.related-btn-bg {
  fill: var(--clr-highlight-30);
}

.related-btn:hover .related-btn-arrow {
  stroke: var(--clr-white);
}

.related-btn:hover .related-btn-bg {
  fill: var(--clr-primary-mid);
}

.inactive-button {
	opacity: 0.2;
	pointer-events: none;
}

/* Work page */
.work-cont {
	display: grid;
	grid-template-columns: 1fr 250px;
	grid-template-rows: 3rem 1fr;
	grid-template-areas: 
		". icon"
		"tiles filter";
	gap: 0.5rem 3rem;
	position: relative;
	margin-top: -3.5rem;
}

.work-tiles {
	grid-area: tiles-start / tiles-start / filter-end / filter-end;
}

#category-list-cont {
	grid-area: filter;
	border-radius: 1em;
  background: var(--clr-highlight-30);
  padding: 1rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
	position: sticky;
	top: 3.5rem;
	right: 0;
	box-shadow: -4px 4px 10px 1px rgba(0, 0, 0, .2);
	visibility: hidden;
	z-index: 3;
	align-self: start
}

.work-tile-cont {
	display: grid;
	grid-template-rows: 1fr;
  transition: grid-template-rows 500ms;
}

.work-tile {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	position: relative;
	border-radius: 1em;
  background: var(--clr-highlight-30);
  width: 100%;
  height: auto;
	margin-bottom: 0;
  opacity: 1;
  overflow: hidden;
  transition: height 0.5s ease-out, opacity 0.5s ease-out, margin-bottom 0.5s ease-out;
}

.hidden-card {
  height: 0;
  opacity: 0;
	margin-bottom: -3em;
}

.work-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
}

.featured-img {
	aspect-ratio: unset;
}

.work-title {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: 1rem;
}

.featured-tile .work-title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.work-content {
	padding: 1rem 2rem;
	display: flex;
  flex-direction: column;
	overflow: hidden;
}

.work-content p {
	line-height: 1.4;
}

.work-item-no-img {
	background-color: var(--clr-white);
	background-image: url(img/tne_login_logo.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40%;
	aspect-ratio: 3 / 2;
}

.term-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.term-item {
	display: flex;
	gap: 0.5rem;
	line-height: 1;
}

.term-item input[type="checkbox"] {
	align-self: flex-start;
	margin-top: 0.125rem;
}


/* Filter icon */
#filter-icon {
	grid-area: icon;
	justify-self: end;
	position: sticky;
	top: 0;
	right: 0;
	width: 3rem;
	height: 3rem;
	background: var(--clr-primary-dark);
	border-radius: 0.5rem;
}

.filter-line {
  fill: none;
	stroke: var(--clr-white);
  stroke-linecap: round;
  stroke-width: 4px;
  stroke-miterlimit: 10;
	transition: all 300ms ease-in 300ms;
}

#filter-icon:hover .filter-line {
	stroke: var(--clr-primary-light);
}

#filter-icon[aria-expanded="true"] .fade-line {
	opacity: 0;
}

#filter-icon[aria-expanded="true"] .left-line {
	d: path("M25 25 L75 75");
  stroke-width: 4px;
}

#filter-icon[aria-expanded="true"] .right-line {
	d: path("M75 25 L25 75");
  stroke-width: 4px;
}

#category-list-cont[data-state="opened"] {
	animation: clipPathMenuOpen 1s ease-in-out forwards;
	visibility: visible;
}

#category-list-cont[data-state="closing"] {
	animation: clipPathMenuClose 1s ease-in-out forwards;
	visibility: visible;
}

#category-list-cont[data-state="closed"] {
	visibility: hidden;
}

/* Donate page */

#donate-logo-strip {
	display: flex;
	justify-content: center;
	height: 7em;
	gap: 3rem;
	margin:  4em 0;
}


/* Single posts */

.next-previous {
	display: flex;
	gap: 2em;
	justify-content: space-between;
}

.post-nav {
	display: flex;
	gap: 1em;
}

/* Search results */
.search-tiles { /* A workaround for the search page, which sometimes only has one item */
	grid-template-columns: repeat(auto-fit, minmax(300px, 30%));
}

.search-tiles a {
	text-decoration: none;
	color: initial;
}

.search-head {
	font-size: 2rem;
	font-weight: 700;
	padding-top: 1rem;
	margin-top: 6rem;
	border-top: solid 3px var(--clr-primary-mid);
}

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

#get-involved {
	background: var(--clr-highlight-30) url(img/get-involved-bg.svg);
	background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  padding: 22vw 0 6rem 0;
  margin-top: calc(-18vw + 12rem);


	/* The 27.22vw comes from the aspect ratio of the original svg mask. 
	The mask was converted to the data format at https://www.svgviewer.dev/svg-to-data-uri. 
	The tutorial on this is at the five minute mark of https://www.youtube.com/watch?v=xz9jkLceRGQ. */
	mask-image: url("data:image/svg+xml,%3Csvg%20id%3D%22get-involved%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221440%22%20height%3D%22392.3%22%20version%3D%221.1%22%20viewBox%3D%220%200%201440%20392.3%22%3E%3Cdefs%3E%3Cstyle%3E%20%20%20%20%20%20.st0%20%7B%20%20%20%20%20%20%20%20fill%3A%20%23231f20%3B%20%20%20%20%20%20%7D%20%20%20%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M1440%2C337.2c-26%2C12-136.2%2C38-252.2-81.6-96.2-99.2-164.6%2C74.6-276.2%2C32.5-67.9-25.6-119.1-168.2-209.1-195.6-90.1-27.4-108%2C150.5-346.7%2C80.1C220.2%2C132.6%2C182.1%2C24.5%2C0%2C0v392.3h1440l-.4-16.9c.1%2C0%2C.3%2C0%2C.4%2C0v-38Z%22%2F%3E%3C%2Fsvg%3E"),
		linear-gradient(transparent, transparent calc(27.22vw - 0.5px), black calc(27.22vw - 0.5px), black);
	mask-size: 100vw auto;
	mask-position: top center;
	mask-repeat: repeat-x;
}

#get-involved h2 {
	text-align: left;
}

#get-involved-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem 2rem;
}

.get-involved-column {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.get-involved-column h3 {
	margin-bottom: 0.5rem;
}

.get-involved-column button {
	width: fit-content;
}

.subscribe h3 {
	color: var(--clr-primary-mid-dark);;
}

.support h3 {
	color: var(--clr-primary-mid);;
}

.contact h3 {
	color: var(--clr-primary-dark);;
}

#footer {
	color: var(--clr-white);
	background: var(--clr-primary-ultra-dark);
	padding-top: 4.5rem;
}

#footer a,
#footer a:visited {
	color: var(--clr-white);
}

#footer a:hover,
#footer a:focus,
#footer a:active {
	color: var(--clr-primary-light);
}

#footer h3 {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--clr-primary-mid);
	margin-bottom: 1rem;
}

#footer p {
	margin-bottom: 0.75rem;
}

#footer-cont {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

#footer-logo {
	width: 6.75rem;
}

#footer-nav-cont {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: 
	"form form"
	"work about" 
	"sm sm";
	gap: 2rem;
}

#ftr-subscribe-form {
	grid-area: form;
}

#ftr-work-column {
	grid-area: work;
}

#ftr-about-column {
	grid-area: about;
}

#to {
	margin-top: 1rem;
}

#fineprint {
	font-size: 0.8rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding-block: 0 4em;
	gap: 2rem;
}

#fineprint a, #fineprint a:visited {
	color: var(--clr-primary-light);
}

#fineprint a:hover, #fineprint a:active, #fineprint a:focus {
	color: var(--clr-white);
}

/* Socials */

#ftr-sm-column {
	grid-area: sm;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#sm-btns-cont {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
}

.sm-div {
	width: 2rem;
	height: 2rem;
}

.sm-bg {
	fill: var(--clr-white);
}

.sm-fg {
	fill: var(--clr-primary-mid);
}

.sm-div:hover .sm-bg {
	fill: var(--clr-primary-mid);
}

.sm-div:hover .sm-fg {
	fill: var(--clr-white);
}

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

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* 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;
}

/* Media queries */


@media screen and (min-width: 20em) { /* 320px in normal conditions */

	.menu-split-btns .sub-menu {
		grid-template-columns: 1fr 1fr;
	}
}

@media screen and (min-width: 23.75em) { /* 380px in normal conditions */

	#header-split {
		grid-template-columns: 6rem 1fr 2rem min-content 2rem;
		gap: 1rem;
	}

	#menu-handheld li.menu-btn {
		padding: 0.75em 2em;
	}

	.team-btns {
		grid-template-columns: 1fr 1fr;
	}

	#search-area {
		bottom: 0.5rem;
	}

}

@media screen and (min-width: 26.25em) { /* 420px in normal conditions */

	#header-split {
		gap: 1.5rem;
	}

	#menu-handheld > li {
		padding: 1rem 2rem;
	}

}

@media screen and (min-width: 30em) { /* 480px in normal conditions */

	.four-col {
		grid-template-columns: 1fr 1fr;
	}

}

@media screen and (min-width: 37.5em) { /* 600px in normal conditions */

	.wrapper {
		padding: 0 2rem;
	}

	.impacts-cont {
		grid-template-columns: 1fr 1fr;
	}

	.impacts-img {
		padding-inline: 0;
	}

	blockquote {
		font-size: 1.5rem;
		margin: 2rem 1.5rem;
	}

}

@media screen and (min-width: 42em) { /* 672px in normal conditions */

	.menu-split-btns .sub-menu {
    grid-template-columns: 12rem 12rem;
	}

	.home-feature, .feature-cont > .wp-block-group__inner-container {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "left right";
		gap: 0;
	}

	.tile-link:nth-child(odd) .home-feature-img-cont, 
	.feature-cont:nth-child(odd) .feature-img {
	  grid-area: left;
	}

	.tile-link:nth-child(even) .home-feature-img-cont, 
	.feature-cont:nth-child(even) .feature-img {
	  grid-area: right;
	}

	.tile-link:nth-child(odd) .home-feature-text, 
	.feature-cont:nth-child(odd) .feature-text {
	  grid-area: right;
	}

	.tile-link:nth-child(even) .home-feature-text, 
	.feature-cont:nth-child(even) .feature-text {
	  grid-area: left;
	}

	.home-feature-img-cont, .feature-img, .work-img, .work-item-no-img {
		aspect-ratio: unset;
	}

	.featured-img {
		height: 14em;
	}

	.work-tile {
		grid-template-columns: 1fr 2fr;
	}

	#related-tiles {
		grid-auto-columns: calc(50% - 1.5em);
	}

}



@media screen and (min-width: 47.5em) { /* 760px in normal conditions */

	#search-cont {
		position: relative;
	}

	#search-area {
		top: calc(100% + 0.5rem);
		bottom: unset;
		right: 0;
	}

	#search-cont[aria-expanded="true"] #search-area {
		width: auto;
	}

	#s {
		width: unset;
	}

	blockquote {
		font-size: 1.75rem;
	}

	blockquote p {
		line-height: inherit;
	}

	.home-quote blockquote {
		margin: 6rem 1.5rem 0;
		padding-top: inherit;
	}

	.home-quote blockquote cite {
		font-size: 1.25rem;
	}

	#get-involved-grid {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.get-involved-column h3 {
		margin-bottom: inherit;
	}

	.two-col {
		grid-template-columns: 1fr 1fr;
	}

	.home-two-col > .wp-block-group__inner-container {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"image content";
		align-items: center;
	}

	#hero-img {
    margin-inline: 0;
	}

	.impacts-cont {
		grid-template-columns: 5fr 2fr;
	}

}

@media screen and (min-width: 60em) { /* 960px in normal conditions */

	#footer-nav-cont {
		grid-template-columns: 5fr 2fr 2fr 3fr;
		grid-template-areas: "form work about sm";
	}

	#ftr-subscribe-form {
		padding-right: 3rem;
	}

	.wrapper {
		padding: 0 4rem;
	}

	.four-col {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

}


@media screen and (min-width: 65em) { /* 1040px in normal conditions */

	#masthead {
		padding-top: 2rem;
	}

	#menuicon, .menu-handheld-container {
		display: none;
	}

	.menu-main-nav-container {
		display: block;
	}

	#header-split {
		grid-template-columns: 6rem 0 1fr 2rem fit-content(400px);
		grid-template-areas: 
	    "logo . nav search donate";
	}

	.site-branding {
		margin-top: 0;
	}

	#nav-cont {
		margin-top: 0;
	}

	.work-cont {
		grid-template-columns: 4fr 1fr;
		/*grid-template-rows: 1fr;
		grid-template-areas: 
			"tiles filter";*/
	}

	.work-tiles {
		grid-area: tiles;
	}

	#category-list-cont {
		visibility: visible;
		top: 4rem;
		box-shadow: none;
	}

	#filter-icon {
		display: none;
	}

	#related-tiles {
		grid-auto-columns: calc(33% - 2em);
	}

	.impacts-cont {
		grid-template-columns: 3fr 1fr;
	}

	.featured {
		display: block;
	}

	#get-involved {
	  margin-top: calc(-14vw + 12rem);
	}
}