/*!
Theme Name: ORCAH 2.0.0
Theme URI: http://underscores.me/
Author: Oregon Climate Action Hub Tech Team
Author URI: http://underscores.me/
Description: This theme builds off of Bootstrap 5.3.8. 
Version: 2.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: orcah
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

ORCAH is generated using the Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Bootstrap 5.3.8 is enqueued separately (see functions.php) and loads before
this stylesheet, so this file no longer duplicates Bootstrap's Reboot
(normalize + box-sizing) and instead themes Bootstrap via its CSS custom
properties, overriding only what Bootstrap doesn't already handle.
*/

/*
Changelog:
2026-09-25
- Cleaned up event scheduling documentation comments

2026-09-20
- Added a calendar month and year picker for navigating to past and future months
- Limited the year picker to the date range recorded on published events

2.0.0
- Redesigned the theme with updated brand colors, typography, buttons, and graphics
- Rebuilt the homepage, header, footer, and standard page layouts
- Updated archive and single templates for events, organizations, jobs, resources,
  and good news, including shared filtering, sorting, and view controls
- Improved responsive layouts, mobile navigation, and touch access to card links
- Centered organization logos on a white background
- Added a FullCalendar event calendar with a shared occurrence feed for event views
- Moved recurring event schedules to theme-managed ACF fields with schedule validation
- Added chronological pagination and counts for upcoming event occurrences
- Added calendar event colors with contrasting text and event type labels
- Added a custom organization login page with authentication, error messages,
  password reset links, and redirects after login

1.4.3
- Themed remaining Bootstrap button variants (primary, secondary, warning,
  info, light + their outline counterparts) actually used across templates

1.4.2
- Added Back Donate Buttons

1.4.1
- Fixed event trash issue caused by save_post validation blocking status change and added proper guards to save_post functions to allow trashing

1.4.0
- Added organization admin columns (Events, Jobs, Resources, Good News) and made them sortable

1.3.3
- Made featured posts to automatically remove the featured tag after their event date has passed

1.3.2
- Made archive/events automatically sort by piecal upcoming date

1.3.1
- Force Featured Image on save
- Force set map view on save
- Force mark event as "event" in piecal on save

1.3.0
- Introduced Custom Event Type columns and sort functionality to admin panel
- Show upcoming events for map view

1.2.0
- Added Featured Column and made it sortable

1.0.1
- Added Custom Logo on Login Screen

1.0.0
- Initial theme setup
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Global Variables
	- Fonts
	- Brand tokens
	- Bootstrap root-level remap (body, links, focus ring, theme colors)
# Base
	- Typography
	- Elements
# Components
	- Bootstrap component overrides (buttons, header/nav, footer)
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# Plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments
	- CTAs / misc

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

/*--------------------------------------------------------------
# Global Brand Variables
--------------------------------------------------------------*/

@font-face {
  font-family: "Cooper Hewitt Bold";
  src: url("fonts/CooperHewitt-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Cooper Hewitt Medium";
  src: url("fonts/CooperHewitt-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

:root {
  /**Colors**/
  --Forest-Green: #143311;
  --Seedling-Green: #d2de5e;
  --Sea-Foam: #f7ffe1;
  --Sky-Blue: #8ae1dd;
  --Orange: #db6623;

  --Secondary-Yellow: #ffd41b;
  --Secondary-Moss-Green: #456e09;
  --Secondary-Blue-Green: #075f5b;
  --Secondary-Lavender: #c5a9ca;
  --Secondary-Wild-Berry: #cb4347;

  --Main-White: #f6f8fb;
  --Off-White: #fdfff7;
  --gray: #6c6c6c;

  /* Reused literal pulled out of .site-header / .join-cta / .update-cta below */
  --Highlight-Sky-Light: #e3f2fd;

  --Gradient-Green: linear-gradient(180deg, #e3ee7b 0%, #f7ffe1 100%);
  --Gradient-Light: linear-gradient(180deg, #f9f0da 0%, #fdfff7 100%);

  /**Typography**/
  /* NOTE: must match the Google Fonts family enqueued in functions.php */
  --font-primary: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-display-bold: "Cooper Hewitt Bold", system-ui, sans-serif;
  --font-display-medium: "Cooper Hewitt Medium", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --corner-radius: 30px;
  --border-weight: 1px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.875rem;
  --text-5xl: 3.625rem;
  --text-sub-super: 6.625rem;
  --text-super: 8.625rem;
  --text-page-title: 7.625rem;
}

.color-forest-green {
  color: var(--Forest-Green);
}
.color-seedling-green {
  color: var(--Seedling-Green);
}
.color-sea-foam {
  color: var(--Sea-Foam);
}
.color-sky-blue {
  color: var(--Sky-Blue);
}
.color-orange {
  color: var(--Orange);
}
.color-gray {
  color: var(--gray);
}
.color-icon-orange [fill] {
  fill: var(--Orange);
}
.color-icon-orange [stroke] {
  stroke: var(--Orange);
}
.color-icon-forest-green [fill] {
  fill: var(--Forest-Green);
}
.color-icon-forest-green [stroke] {
  stroke: var(--Forest-Green);
}
.color-icon-seedling-green [fill] {
  fill: var(--Seedling-Green);
}
.color-icon-seedling-green [stroke] {
  stroke: var(--Seedling-Green);
}
.color-icon-sea-foam [fill] {
  fill: var(--Sea-Foam);
}
.color-icon-sea-foam [stroke] {
  stroke: var(--Sea-Foam);
}
.color-icon-sky-blue [fill] {
  fill: var(--Sky-Blue);
}
.color-icon-sky-blue [stroke] {
  stroke: var(--Sky-Blue);
}
.color-icon-gray [fill] {
  fill: var(--gray);
}
.color-icon-gray [stroke] {
  stroke: var(--gray);
}
.color-icon-secondary-yellow [fill] {
  fill: var(--Secondary-Yellow);
}
.color-icon-secondary-yellow [stroke] {
  stroke: var(--Secondary-Yellow);
}
.color-icon-secondary-moss-green [fill] {
  fill: var(--Secondary-Moss-Green);
}
.color-icon-secondary-moss-green [stroke] {
  stroke: var(--Secondary-Moss-Green);
}
.color-icon-secondary-blue-green [fill] {
  fill: var(--Secondary-Blue-Green);
}
.color-icon-secondary-blue-green [stroke] {
  stroke: var(--Secondary-Blue-Green);
}
.color-icon-secondary-lavender [fill] {
  fill: var(--Secondary-Lavender);
}
.color-icon-secondary-lavender [stroke] {
  stroke: var(--Secondary-Lavender);
}
.color-icon-secondary-wild-berry [fill] {
  fill: var(--Secondary-Wild-Berry);
}
.color-icon-secondary-wild-berry [stroke] {
  stroke: var(--Secondary-Wild-Berry);
}
.color-secondary-yellow {
  color: var(--Secondary-Yellow);
}
.color-secondary-moss-green {
  color: var(--Secondary-Moss-Green);
}
.color-secondary-blue-green {
  color: var(--Secondary-Blue-Green);
}
.color-secondary-lavender {
  color: var(--Secondary-Lavender);
}
.color-secondary-wild-berry {
  color: var(--Secondary-Wild-Berry);
}

.bg-forest-green {
  background-color: var(--Forest-Green);
}
.bg-seedling-green {
  background-color: var(--Seedling-Green);
}
.bg-sea-foam {
  background-color: var(--Sea-Foam);
}
.bg-sky-blue {
  background-color: var(--Sky-Blue);
}
.bg-orange {
  background-color: var(--Orange);
}
.bg-secondary-yellow {
  background-color: var(--Secondary-Yellow);
}
.bg-secondary-moss-green {
  background-color: var(--Secondary-Moss-Green);
}
.bg-secondary-blue-green {
  background-color: var(--Secondary-Blue-Green);
}
.bg-secondary-lavender {
  background-color: var(--Secondary-Lavender);
}
.bg-secondary-wild-berry {
  background-color: var(--Secondary-Wild-Berry);
}

.font-primary {
  font-family: var(--font-primary);
}
.font-display-bold {
  font-family: var(--font-display-bold);
}
.font-display-medium {
  font-family: var(--font-display-medium);
}
.font-mono {
  font-family: var(--font-mono);
}

.text-xs {
  font-size: var(--text-xs);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-base {
  font-size: var(--text-base);
}
.text-lg {
  font-size: var(--text-lg);
}
.text-xl {
  font-size: var(--text-xl);
}
.text-2xl {
  font-size: var(--text-2xl);
}
.text-3xl {
  font-size: var(--text-3xl);
}
.text-4xl {
  font-size: var(--text-4xl);
}
.text-5xl {
  font-size: var(--text-5xl);
}
.text-sub-super {
  font-size: var(--text-sub-super);
}
.text-super {
  font-size: var(--text-super);
}
.text-page-title {
  font-size: var(--text-page-title);
}

/* Responsive font-size utilities: Bootstrap's CDN build has no
   fs-{breakpoint}-{n} equivalent, so these mirror its naming
   (text-{breakpoint}-{size}), mobile-first, overriding the bare
   .text-* class from that breakpoint up. */
@media (min-width: 576px) {
  .text-sm-xs {
    font-size: var(--text-xs);
  }
  .text-sm-sm {
    font-size: var(--text-sm);
  }
  .text-sm-base {
    font-size: var(--text-base);
  }
  .text-sm-lg {
    font-size: var(--text-lg);
  }
  .text-sm-xl {
    font-size: var(--text-xl);
  }
  .text-sm-2xl {
    font-size: var(--text-2xl);
  }
  .text-sm-3xl {
    font-size: var(--text-3xl);
  }
  .text-sm-4xl {
    font-size: var(--text-4xl);
  }
  .text-sm-5xl {
    font-size: var(--text-5xl);
  }
  .text-sm-sub-super {
    font-size: var(--text-sub-super);
  }
  .text-sm-super {
    font-size: var(--text-super);
  }
  .text-sm-page-title {
    font-size: var(--text-page-title);
  }
}

@media (min-width: 768px) {
  .text-md-xs {
    font-size: var(--text-xs);
  }
  .text-md-sm {
    font-size: var(--text-sm);
  }
  .text-md-base {
    font-size: var(--text-base);
  }
  .text-md-lg {
    font-size: var(--text-lg);
  }
  .text-md-xl {
    font-size: var(--text-xl);
  }
  .text-md-2xl {
    font-size: var(--text-2xl);
  }
  .text-md-3xl {
    font-size: var(--text-3xl);
  }
  .text-md-4xl {
    font-size: var(--text-4xl);
  }
  .text-md-5xl {
    font-size: var(--text-5xl);
  }
  .text-md-sub-super {
    font-size: var(--text-sub-super);
  }
  .text-md-super {
    font-size: var(--text-super);
  }
  .text-md-page-title {
    font-size: var(--text-page-title);
  }
}

@media (min-width: 992px) {
  .text-lg-xs {
    font-size: var(--text-xs);
  }
  .text-lg-sm {
    font-size: var(--text-sm);
  }
  .text-lg-base {
    font-size: var(--text-base);
  }
  .text-lg-lg {
    font-size: var(--text-lg);
  }
  .text-lg-xl {
    font-size: var(--text-xl);
  }
  .text-lg-2xl {
    font-size: var(--text-2xl);
  }
  .text-lg-3xl {
    font-size: var(--text-3xl);
  }
  .text-lg-4xl {
    font-size: var(--text-4xl);
  }
  .text-lg-5xl {
    font-size: var(--text-5xl);
  }
  .text-lg-sub-super {
    font-size: var(--text-sub-super);
  }
  .text-lg-super {
    font-size: var(--text-super);
  }
  .text-lg-page-title {
    font-size: var(--text-page-title);
  }
}

@media (min-width: 1200px) {
  .text-xl-xs {
    font-size: var(--text-xs);
  }
  .text-xl-sm {
    font-size: var(--text-sm);
  }
  .text-xl-base {
    font-size: var(--text-base);
  }
  .text-xl-lg {
    font-size: var(--text-lg);
  }
  .text-xl-xl {
    font-size: var(--text-xl);
  }
  .text-xl-2xl {
    font-size: var(--text-2xl);
  }
  .text-xl-3xl {
    font-size: var(--text-3xl);
  }
  .text-xl-4xl {
    font-size: var(--text-4xl);
  }
  .text-xl-5xl {
    font-size: var(--text-5xl);
  }
  .text-xl-sub-super {
    font-size: var(--text-sub-super);
  }
  .text-xl-super {
    font-size: var(--text-super);
  }
  .text-xl-page-title {
    font-size: var(--text-page-title);
  }
}

.weight-light {
  font-weight: var(--weight-light);
}
.weight-normal {
  font-weight: var(--weight-normal);
}
.weight-medium {
  font-weight: var(--weight-medium);
}
.weight-bold {
  font-weight: var(--weight-bold);
}

.leading-tight {
  line-height: var(--leading-tight);
}
.leading-normal {
  line-height: var(--leading-normal);
}
.leading-relaxed {
  line-height: var(--leading-relaxed);
}

.corner-radius {
  border-radius: var(--corner-radius);
}
.corner-radius-top {
  border-top-left-radius: var(--corner-radius);
  border-top-right-radius: var(--corner-radius);
}
.border-weight {
  border-width: var(--border-weight);
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-tighter {
  letter-spacing: -0.05em;
}

/* Bootstrap root-level remap
--------------------------------------------- */
/* Bootstrap 5.3's compiled CSS exposes two tiers of CSS custom properties:*/

:root {
  --bs-body-font-family: var(--font-primary);
  --bs-body-color: #404040;
  --bs-body-bg: var(--Main-White);

  --bs-link-color: var(--Forest-Green);
  --bs-link-color-rgb: 20, 51, 17;
  --bs-link-hover-color: color-mix(in srgb, var(--Forest-Green) 80%, black);

  --bs-primary: var(--Forest-Green);
  --bs-primary-rgb: 20, 51, 17;
  --bs-secondary: var(--Secondary-Blue-Green);
  --bs-secondary-rgb: 7, 95, 91;
  --bs-success: var(--Secondary-Moss-Green);
  --bs-success-rgb: 69, 110, 9;
  --bs-warning: var(--Secondary-Yellow);
  --bs-warning-rgb: 255, 212, 27;
  --bs-danger: var(--Secondary-Wild-Berry);
  --bs-danger-rgb: 203, 67, 71;
  --bs-info: var(--Sky-Blue);
  --bs-info-rgb: 138, 225, 221;
  --bs-light: var(--Main-White);
  --bs-light-rgb: 246, 248, 251;

  --bs-font-monospace: var(--font-mono);

  /* Font Sizes (Using rem units for accessibility) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-sub-super: 3.625rem;
  --text-super: 8.625rem;
}

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

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: var(--bs-body-color);
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: var(--font-display-bold);
  font-weight: var(--weight-bold);
}

p {
  margin-bottom: 1.5em;
}

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

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: var(--font-mono);
  line-height: var(--leading-relaxed);
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: var(--font-mono);
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
ul,
ol {
  margin: 0;
}

.menu-footer-1-container ul,
.menu-footer-2-container ul,
ul {
  list-style: none;
}

body ul {
  list-style: circle;
}

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

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/*Upcoming Actions*/

.upcoming-action {
  border: 2px solid var(--Orange);
  border-radius: var(--corner-radius);
  height: auto;
  transition: transform 0.3s ease;
}

.upcoming-action:hover {
  transform: scale(1.02);
}

.upcoming-action-divider {
  border-right: 2px solid var(--Orange);
  background-color: var(--Off-White);
}

/* Hidden by default - not a Bootstrap d-none/d-*-block utility, since those
   set display with !important and would clobber the display:flex this
   needs once revealed (utilities load before this stylesheet, but
   !important still wins over a later plain declaration). Only shown, as
   flex, inside the hover-gated query below. */
.upcoming-action .hover-content {
  display: none;
}

/* Orange wipe reveal: normal-content fades, hover-content reveals in its
   place. Gated on real hover capability, not just width - a touch device
   has no hover regardless of viewport size (even a large iPad Pro in
   landscape is ~1194px), and browser devtools device emulation often
   doesn't change what hover/pointer report, so the width is also pushed
   past any tablet as a second line of defense. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .upcoming-action::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 25%;
    background-color: var(--Orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
    pointer-events: none;
  }

  .upcoming-action:hover::before {
    transform: scaleX(1);
  }

  .upcoming-action .normal-content {
    transition: opacity 0.1s ease;
  }

  .upcoming-action:hover .normal-content {
    opacity: 0;
  }

  .upcoming-action .hover-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    color: #fff;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.25s ease;
    pointer-events: none;
  }

  .upcoming-action:hover .hover-content {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
}

/*Featured Organizations*/

.featured-org {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--Orange);
  border-radius: var(--corner-radius);
  transition: transform 0.3s ease;
  background-color: transparent;
}

.featured-org:hover {
  transform: scale(1.02);
}

/* Media/text columns go side-by-side at xl - see the col-xl-6 classes in
   front-page.php - full-width stacked image below that. The divider border
   only depends on that layout split, not on hover capability, so it's kept
   in its own width-only query rather than bundled with the wipe reveal
   below. */
@media (min-width: 1200px) {
  .featured-org-media {
    position: relative;
    border-right: 2px solid var(--Orange);
  }
}

/* Hidden by default - see .upcoming-action .hover-content above for why
   this isn't a d-none/d-*-block utility. */
.featured-org-media .hover-content {
  display: none;
}

/* Orange wipe reveal on the media column, matching .upcoming-action, but
   tinted (not opaque) so the image stays visible underneath. Same
   hover-capability gating as .upcoming-action above. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .featured-org-media::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(244 112 35 / 90%);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.2s ease;
    pointer-events: none;
  }

  .featured-org:hover .featured-org-media::before {
    transform: scaleX(1);
  }

  .featured-org-media .hover-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: #fff;
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.25s ease;
    pointer-events: none;
  }

  .featured-org:hover .featured-org-media .hover-content {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
}

.featured-org-hover-icon {
  width: 64px;
  height: auto;
  filter: brightness(0) invert(1);
}

@media (min-width: 1200px) {
  .featured-org-hover-icon {
    width: 100px;
  }
}

.featured-org-hover-link {
  color: #fff;
  text-decoration: underline;
}

/*Featured Jobs*/

.featured-job-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 18rem;
  border: 2px solid var(--Sky-Blue);
  border-radius: var(--corner-radius);
  background-color: var(--Off-White);
  transition: transform 0.3s ease;
}

.featured-job-card:hover {
  transform: scale(1.02);
}

.featured-job-card-top {
  height: 1.75rem;
  background-color: var(--Sky-Blue);
}

.featured-job-card-body {
  position: relative;
  padding: 1.5rem;
}

.featured-job-card-meta {
  display: flex;
  align-items: center;
  color: var(--Secondary-Blue-Green);
}

/* Hidden by default - see .upcoming-action .hover-content above for why
   this isn't a d-none/d-*-block utility. */
.featured-job-card-hover {
  display: none;
}

/* Sky-Blue wipe reveal, growing downward from the top edge to match the
   card's top accent bar, matching the .upcoming-action / .featured-org
   wipe pattern used elsewhere on the front page. Same hover-capability
   gating as those. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .featured-job-card-hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background-color: var(--Sky-Blue);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.3s ease;
    pointer-events: none;
  }

  .featured-job-card:hover .featured-job-card-hover,
  .featured-job-card:focus-within .featured-job-card-hover {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
}

/* .featured-job-card-hover is display:none until 1200px+hover (see above),
   so this only ever renders at that one size - no responsive step needed. */
.featured-job-hover-icon {
  width: 5rem;
  height: auto;
}

.featured-job-hover-link {
  color: var(--Forest-Green);
  text-decoration: underline;
  font-weight: var(--weight-medium);
}

.testimonials {
  background-color: var(--Sky-Blue);
  color: var(--Secondary-Blue-Green);
  overflow: hidden;
}

.testimonials-header {
  position: relative;
  z-index: 2;
}

.testimonial-heart {
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 0.25rem;
}

.testimonial-heart svg {
  display: block;
  width: 100%;
  height: 100%;
}

.testimonial-carousel {
  max-width: 52rem;
  margin: 0 auto;
}

.testimonial-slide {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 9rem;
  max-width: 590px;
  padding: 1rem 1rem 1rem 1rem;
}

.testimonial-quote-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  width: 8.75rem;
  transform: translateY(-50%);
}

.testimonial-quote-image {
  display: block;
  width: 200px !important;
  max-width: unset !important;
  height: auto;
  opacity: 0.15;
  position: absolute;
  bottom: 6px;
  right: 100px;
}

.testimonial-copy {
  width: 100%;
  margin: 0;
}

.testimonial-text {
  margin-bottom: 0.625rem;
  font-style: italic;
  line-height: 1.3;
}

.testimonial-attribution {
  text-align: right;
}

.testimonial-attribution cite {
  font-style: normal;
}

.testimonial-organization {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.testimonial-indicators {
  position: static;
  gap: 0.75rem;
  margin: 0.75rem 0 0;
}

.testimonial-indicators [data-bs-target] {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0;
  background-color: var(--Secondary-Blue-Green);
  border: 0;
  border-radius: 50%;
  opacity: 0.5;
}

.testimonial-indicators .active {
  opacity: 1;
}

.carousel-item.active .testimonial-quote-image {
  animation: testimonial-quote-in 700ms ease-out both;
}

.carousel-item.active .testimonial-copy {
  animation: testimonial-copy-in 600ms 100ms ease-out both;
}

.orcah.carousel-inner {
  overflow: visible;
}

@media (max-width: 767.98px) {
  .testimonial-slide {
    /* min-height: 16rem; */
    padding: 1rem 1rem 1rem;
  }

  .testimonial-quote-wrap {
    top: 0.75rem;
    left: 50%;
    width: 5.5rem;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel-item.active .testimonial-quote-image,
  .carousel-item.active .testimonial-copy {
    animation: none;
  }
}

/*Good News*/

.good-news-article {
  opacity: 0.7;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.good-news-article:hover {
  transform: translateX(-1rem);
  opacity: 1;
}

/* Bootstrap component overrides
--------------------------------------------- */
/*
These override the same component-scoped custom properties Bootstrap's own
compiled rules already set, on the same selectors, so they win the cascade
without !important. Scoped only to components actually used in
header.php/footer.php.
*/

.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--Secondary-Moss-Green);
  --bs-btn-border-color: var(--Secondary-Moss-Green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--Secondary-Moss-Green) 85%, black);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--Secondary-Moss-Green) 80%,
    black
  );
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(
    in srgb,
    var(--Secondary-Moss-Green) 75%,
    black
  );
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--Secondary-Moss-Green) 70%,
    black
  );
  --bs-btn-disabled-bg: var(--Secondary-Moss-Green);
  --bs-btn-disabled-border-color: var(--Secondary-Moss-Green);
}

.btn-outline-success {
  --bs-btn-color: var(--Secondary-Moss-Green);
  --bs-btn-border-color: var(--Secondary-Moss-Green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--Secondary-Moss-Green);
  --bs-btn-hover-border-color: var(--Secondary-Moss-Green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--Secondary-Moss-Green);
  --bs-btn-active-border-color: var(--Secondary-Moss-Green);
  --bs-btn-disabled-color: var(--Secondary-Moss-Green);
  --bs-btn-disabled-border-color: var(--Secondary-Moss-Green);
}

.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--Forest-Green);
  --bs-btn-border-color: var(--Forest-Green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--Forest-Green) 85%, white);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--Forest-Green) 80%,
    white
  );
  --bs-btn-active-bg: color-mix(in srgb, var(--Forest-Green) 75%, black);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--Forest-Green) 70%,
    black
  );
  --bs-btn-disabled-bg: var(--Forest-Green);
  --bs-btn-disabled-border-color: var(--Forest-Green);
}

/* NOTE: primary currently renders identically to .btn-dark above - both are
   mapped to Forest-Green (see the --bs-primary root remap). Revisit this
   during the reskin if primary should read as visually distinct from dark. */
.btn-primary {
  --bs-btn-color: var(--Forest-Green);
  --bs-btn-bg: none;
  --bs-btn-border-color: var(--Forest-Green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--Secondary-Moss-Green);
  --bs-btn-hover-border-color: white;

  --bs-btn-active-bg: color-mix(in srgb, var(--Forest-Green) 75%, black);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--Forest-Green) 70%,
    black
  );
  --bs-btn-disabled-bg: var(--Forest-Green);
  --bs-btn-disabled-border-color: var(--Forest-Green);
}

.btn-outline-primary {
  --bs-btn-color: var(--Forest-Green);
  --bs-btn-border-color: var(--Forest-Green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--Forest-Green);
  --bs-btn-hover-border-color: var(--Forest-Green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--Forest-Green);
  --bs-btn-active-border-color: var(--Forest-Green);
  --bs-btn-disabled-color: var(--Forest-Green);
  --bs-btn-disabled-border-color: var(--Forest-Green);
}

.btn-secondary {
  --bs-btn-color: var(--Forest-Green);
  --bs-btn-bg: var(--Off-White);
  --bs-btn-border-color: var(--Forest-Green);
  --bs-btn-hover-color: var(--Forest-Green);
  --bs-btn-hover-bg: var(--Seedling-Green);
  --bs-btn-hover-border-color: var(--Forest-Green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(
    in srgb,
    var(--Secondary-Blue-Green) 75%,
    black
  );
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--Secondary-Blue-Green) 70%,
    black
  );
  --bs-btn-disabled-bg: var(--Secondary-Blue-Green);
  --bs-btn-disabled-border-color: var(--Secondary-Blue-Green);
}

.btn-outline-secondary {
  --bs-btn-color: var(--Secondary-Blue-Green);
  --bs-btn-border-color: var(--Secondary-Blue-Green);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--Secondary-Blue-Green);
  --bs-btn-hover-border-color: var(--Secondary-Blue-Green);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--Secondary-Blue-Green);
  --bs-btn-active-border-color: var(--Secondary-Blue-Green);
  --bs-btn-disabled-color: var(--Secondary-Blue-Green);
  --bs-btn-disabled-border-color: var(--Secondary-Blue-Green);
}

.btn-warning {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--Secondary-Yellow);
  --bs-btn-border-color: var(--Secondary-Yellow);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--Secondary-Yellow) 85%, black);
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--Secondary-Yellow) 80%,
    black
  );
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--Secondary-Yellow) 75%, black);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--Secondary-Yellow) 70%,
    black
  );
  --bs-btn-disabled-bg: var(--Secondary-Yellow);
  --bs-btn-disabled-border-color: var(--Secondary-Yellow);
}

.btn-info {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--Sky-Blue);
  --bs-btn-border-color: var(--Sky-Blue);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--Sky-Blue) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--Sky-Blue) 80%, black);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--Sky-Blue) 75%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--Sky-Blue) 70%, black);
  --bs-btn-disabled-bg: var(--Sky-Blue);
  --bs-btn-disabled-border-color: var(--Sky-Blue);
}

/* Used on the front-page hero, which sits on a dark photo background - see
   front-page.php's .welcome-cta - so default state reads light-on-dark. */
.btn-light {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--Main-White);
  --bs-btn-border-color: var(--Main-White);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: color-mix(in srgb, var(--Main-White) 90%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--Main-White) 90%, black);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--Main-White) 80%, black);
  --bs-btn-active-border-color: color-mix(
    in srgb,
    var(--Main-White) 80%,
    black
  );
  --bs-btn-disabled-bg: var(--Main-White);
  --bs-btn-disabled-border-color: var(--Main-White);
}

.btn-outline-light {
  --bs-btn-color: var(--Main-White);
  --bs-btn-border-color: var(--Main-White);
  --bs-btn-hover-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--Main-White);
  --bs-btn-hover-border-color: var(--Main-White);
  --bs-btn-active-color: var(--bs-body-color);
  --bs-btn-active-bg: var(--Main-White);
  --bs-btn-active-border-color: var(--Main-White);
  --bs-btn-disabled-color: var(--Main-White);
  --bs-btn-disabled-border-color: var(--Main-White);
}

.site {
  background-color: var(--Sea-Foam);
}

/* Wraps the site header, hero, and top wave (front page only - see
   header.php/front-page.php) so the gradient runs behind the header and
   ends exactly at the bottom of top_wave.svg, instead of bleeding into
   the pathways section below it. */
.hero-gradient {
  background-image: var(--Gradient-Green);
  background-repeat: no-repeat;
}

.bg-orange-subtle {
  background-color: color-mix(in srgb, var(--Orange) 15%, white) !important;
}

.custom-hr {
  width: auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(20, 51, 17, 0) 0%,
    var(--Forest-Green) 25%,
    var(--Forest-Green) 75%,
    rgba(20, 51, 17, 0) 100%
  );
}

.view-icons .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 0;
  color: rgba(0, 0, 0, 0.5);
}

.card-hover {
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.card-hover:hover {
  background-color: var(--Off-White);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.explore-pill {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 8px);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background-color: transparent;
  border-color: var(--Forest-Green);
  color: var(--Forest-Green);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

.card-hover:hover .explore-pill {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.explore-pill:hover {
  background-color: var(--Seedling-Green);
  border-color: var(--Forest-Green);
  color: var(--Forest-Green);
}

.explore-pill-end {
  position: relative;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background-color: transparent;
  border-color: var(--Forest-Green);
  color: var(--Forest-Green);
  transition:
    opacity 0.2s ease,
    background-color 0.2s ease;
}

.card-hover:hover .explore-pill-end {
  opacity: 1;
  pointer-events: auto;
}

.explore-pill-end:hover {
  background-color: var(--Seedling-Green);
  border-color: var(--Forest-Green);
  color: var(--Forest-Green);
}

.view-icons .btn.active {
  background-color: var(--Forest-Green);
  color: var(--Main-White);
}

/* Header and Description
--------------------------------------------- */
.navbar-brand {
  width: 72px;
}

@media (min-width: 576px) {
  .navbar-brand {
    width: 100px;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* .navbar-toggler / .navbar-toggler-icon are styled entirely through
   --bs-navbar-* custom properties that Bootstrap only defines inside a
   .navbar-scoped element (see .navbar in bootstrap.min.css). <nav
   class="site-header"> below isn't a .navbar, so without this the toggler
   renders with no icon, no border, and no padding - functional but
   invisible. */
.site-header .navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  background-color: transparent;
  border: var(--bs-border-width) solid rgba(var(--bs-emphasis-color-rgb), 0.15);
  border-radius: var(--bs-border-radius);
  transition: box-shadow 0.15s ease-in-out;
}

.site-header .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Below lg, the nav menu and register block are hidden (d-lg-none), leaving
   only the logo and hamburger toggler; center the logo in the bar instead
   of letting it sit off-center against the toggler. */
@media (max-width: 991.98px) {
  .header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Site Footer
--------------------------------------------- */
.site-footer {
  background-color: var(--Off-White);
}

.site-footer .menu {
  margin-left: 0;
  padding: 0;
}

.site-footer .list-inline-item {
  margin-right: 0;
}

.site-footer a {
  color: var(--Main-White);
  text-decoration: none;
}

/* Pipe-style divider only makes sense once .footer-legal is laid out
   horizontally (flex-lg-row in footer.php) - a right-side border between
   stacked rows on mobile isn't a meaningful separator. */
@media (min-width: 992px) {
  .site-footer .footer-legal li:not(:last-child),
  .site-footer .footer-legal > span {
    border-right: 1px solid #cccccc; /* Adjust color here */
    padding-right: 15px; /* Adjust spacing on the right */
  }
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

article.post,
article.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.post-content {
  background-color: var(--Off-White);
  border-radius: 30px;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.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 {
  margin: 0.8075em 0;
}

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

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

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

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/* Keep galleries inside regular page content responsive. */
article.page .entry-content .gallery,
article.page .entry-content .wp-block-gallery {
  max-width: 100%;
}

article.page .entry-content .gallery-item,
article.page .entry-content .wp-block-gallery .wp-block-image {
  min-width: 0;
}

@media (max-width: 767.98px) {
  article.page
    .entry-content
    .gallery[class*="gallery-columns-"]:not(.gallery-columns-1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  article.page
    .entry-content
    .wp-block-gallery.has-nested-images:not(.columns-1)
    .wp-block-image {
    flex: 1 1 calc(50% - 0.75em);
    width: calc(50% - 0.75em) !important;
  }
}

@media (max-width: 575.98px) {
  article.page
    .entry-content
    .gallery[class*="gallery-columns-"]:not(.gallery-columns-1) {
    grid-template-columns: minmax(0, 1fr);
  }

  article.page
    .entry-content
    .wp-block-gallery.has-nested-images:not(.columns-1)
    .wp-block-image {
    flex-basis: 100%;
    width: 100% !important;
  }
}

/*--------------------------------------------------------------
# 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
--------------------------------------------------------------*/

/* Custom responsive height utility, matching Bootstrap's breakpoint
   naming convention (used by front-page.php and search.php card rows) */
@media (min-width: 768px) {
  .h-md-250 {
    min-height: 250px;
  }
}

/* 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 {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

/* Pathways (Individual / Organization)
--------------------------------------------- */
.pathways-wave {
  line-height: 0;
}

.pathways-wave img {
  display: block;
}

.pathways-body {
  background-color: var(--Sky-Blue);
  padding: 1rem 0 2rem;
}

.pathway-col--divider {
  border-bottom: 1px solid var(--Off-White);
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .pathway-col--divider {
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 0;
  }
}

.pathway-card {
  display: block;
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 20rem;
  color: var(--Forest-Green);
  text-decoration: none;
}

@media (min-width: 768px) {
  .pathway-card {
    min-height: 30rem;
  }
}

.pathway-card:hover,
.pathway-card:focus {
  color: var(--Forest-Green);
}

.pathway-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pathway-card-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  transition: transform 0.35s ease;
}

/* Visible by default (base state below) so touch devices - which have no
   hover regardless of viewport width, e.g. an iPad - can always reach this
   placeholder copy and the "Learn More" link. Only gated behind an actual
   hover interaction (real mouse/trackpad + wide viewport) below. */
.pathway-card-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  margin-top: 1.25rem;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .pathway-card-reveal {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition:
      max-height 0.4s ease,
      margin-top 0.4s ease,
      opacity 0.3s ease;
  }

  .pathway-card:hover .pathway-card-reveal,
  .pathway-card:focus .pathway-card-reveal {
    max-height: 16rem;
    margin-top: 1.25rem;
    opacity: 1;
  }

  .pathway-card:hover .pathway-card-visual,
  .pathway-card:focus .pathway-card-visual {
    transform: translateY(-1rem);
  }
}

.pathway-fin {
  width: 15rem;
  height: auto;
}

.pathway-fin-group {
  position: relative;
  width: 18rem;
  height: 8.1rem;
}

.pathway-fin--back {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 15rem;
  z-index: 1;
}

.pathway-fin--front {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9rem;
  z-index: 2;
}

@media (min-width: 768px) {
  .pathway-fin {
    width: 25rem;
  }

  .pathway-fin-group {
    width: 30rem;
    height: 13.5rem;
  }

  .pathway-fin--back {
    width: 25rem;
  }

  .pathway-fin--front {
    width: 15rem;
  }
}

.pathway-label {
  font-family: var(--font-display-medium);
  margin: 0.75rem 0 0;
  color: var(--Forest-Green);
}

.pathway-card-reveal {
  /* Not --Main-White: this section's background (.pathways-body) is the
     light --Sky-Blue, so white text - including the "Learn More" link,
     which has no color of its own - would be near-illegible. */
  color: var(--Forest-Green);
}

.pathway-card-reveal p {
  color: var(--Forest-Green);
  margin-bottom: 1rem;
}

.pathway-card-reveal a {
  align-self: flex-end;
}

.pathways-footer {
  background-color: var(--Sea-Foam);
  padding: 1rem 0 3rem;
}

.pathways-headline {
  color: var(--Orange);
  margin: 0 auto;
}

.pathways-fish {
  width: 10rem;
  height: auto;
  pointer-events: none;
}

@media (min-width: 768px) {
  .pathways-fish {
    width: 20rem;
    margin-left: -3.5rem;
    position: relative;
    z-index: 1;
  }
}

.join-the-hub {
  position: relative;
  --turbine-width: 18rem;
  --turbine-lift: 18rem;
}

.join-the-hub--turbines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.join-the-hub--turbine {
  height: auto;
  margin-bottom: var(--turbine-lift);
}
.join-the-hub--turbine-right,
.join-the-hub--turbine-left {
  width: var(--turbine-width);
}

/* .join-the-hub--turbine-left {
  left: 4%;
  top: -4.5rem;
  width: var(--turbine-left-width);
}

.join-the-hub--turbine-right {
  right: -3rem;
  top: -2.5rem;
  width: var(--turbine-right-width);
} */

.join-the-hub--inner,
.newsletter--inner {
  background-color: var(--Seedling-Green);
}

/* The newsletter background image (orcah_newsletter_bg.png, ~3.1:1) is
   width:100% with height driven by its own aspect ratio, which the
   .newsletter--content overlay (h-100) then matches - fine on desktop,
   but far too short below lg to fit the icon/heading/paragraph/button it
   stacks on top (e.g. at 768px wide it naturally renders ~247px tall).
   Give it a fixed, cropped height through the tablet range - up to xl,
   since even iPad landscape (1024px) is too narrow for the natural
   aspect-ratio height to fit the stacked content.

   Direct-child combinator (>), not a plain descendant selector: the mail
   icon below is also an <img> nested inside .newsletter--inner (via
   .newsletter--content), so a plain ".newsletter--inner img" selector was
   matching it too and forcing it to this same height, stretching it. */
@media (max-width: 1199.98px) {
  .newsletter--inner > img {
    height: 26rem;
    object-fit: cover;
  }
}

/* mail.svg has no intrinsic sizing applied elsewhere (native 120x124px) -
   too large next to the heading/paragraph/button it's stacked above below
   xl. Graduated width steps (not Bootstrap col-* percentage classes -
   .newsletter--content spans the full section width with no .container,
   so a percentage width would swing wildly with viewport width instead of
   scaling the icon predictably). */
.newsletter-icon {
  width: 3rem;
  height: auto;
}

@media (min-width: 576px) {
  .newsletter-icon {
    width: 4rem;
  }
}

@media (min-width: 768px) {
  .newsletter-icon {
    width: 5rem;
  }
}

@media (min-width: 1200px) {
  .newsletter-icon {
    width: 7.5rem;
  }
}

/* Shared by both "Join the HUB" and "Support the HUB" sections
   (front-page.php) - both wrap their text/buttons in .join-the-hub--content,
   which otherwise has no horizontal padding since it sits inside a px-0
   container-fluid (needed so the turbine/wave graphics can bleed edge to
   edge). */
.join-the-hub--content {
  padding-left: 3rem;
  padding-right: 3rem;
}

.support-the-hub {
  background-color: var(--Seedling-Green);
}

/* CTA's
--------------------------------------------- */

.join-cta {
  background-color: var(--Highlight-Sky-Light);
}

.nowrap {
  white-space: nowrap;
  display: flex;
  overflow: auto;
}

.ppma_boxes_46 {
  display: none !important;
}

.widget {
  margin-bottom: 0 !important;
}

h2.widgettitle {
  font-size: calc(1.275rem + 0.3vw);
}

.wpc-filter-title {
  font-family: var(--font-primary);
  font-weight: var(--weight-normal);
}

.sort-control .widget {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 !important;
}

.sort-control .widgettitle {
  margin: 0;
  white-space: nowrap;
}

body .wpc-filters-labels li.wpc-term-item label {
  position: relative;
  padding-left: 33px;
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
}

/* The native checkbox is kept in the accessibility/keyboard-focus tree
   (opacity: 0, not display: none) but never painted -- some browsers
   (Safari in particular) keep drawing their own tick mark on top of a
   custom fill even with appearance: none, so the visible box is instead
   drawn entirely with label:before. */
body .wpc-filters-labels li.wpc-term-item input[type="checkbox"] {
  display: inline-block !important;
  position: absolute;
  opacity: 0;
  width: 25px;
  height: 25px;
  margin: 0;
  cursor: pointer;
}

body .wpc-filters-labels li.wpc-term-item label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  box-sizing: border-box;
  border: 2px solid var(--Forest-Green);
  border-radius: 0;
  background-color: var(--Off-White);
}

/* Filter Everything caps any term list taller than its admin-configured
   max-height with overflow-y: auto (inline <style> in wp_head, high
   specificity via chained :not() selectors) -- Solution Area has enough
   terms to hit that cap. Each archive template renders its own widget
   instance with a different numeric wpc-filters-list-{id}/section-{id},
   so that ID can't be hardcoded; .wpc-filter-solution_area is the meta-key
   class the plugin applies consistently across every archive instead. */
#archive-filters .wpc-filter-solution_area .wpc-filters-ul-list {
  max-height: none !important;
  overflow-y: visible !important;
}

body
  .wpc-filters-labels
  li.wpc-term-item
  input[type="checkbox"]:checked
  + label:before {
  background-color: var(--Forest-Green);
}

body .wpc-filters-open-button-container a.wpc-filters-open-widget,
body .wpc-filters-open-button-container a.wpc-open-close-filters-button {
  display: inline-block;
  text-align: left;
  border: 1px solid #d6dbe0 !important;
  border-radius: 6px !important;
  line-height: 1.5;
  padding: 7px 12px;
  background-color: transparent;
  color: #191c1e !important;
  box-sizing: border-box;
  text-decoration: none !important;
  font-weight: 400;
  transition: none;
  position: relative;
}

.wpc-term-item-content-wrapper {
  align-items: start !important;
}

.piecal-wrapper .fc-event {
  white-space: normal;
}

#orcah-event-calendar .fc-event {
  white-space: normal;
}

#orcah-event-calendar .fc-daygrid-event-harness,
#orcah-event-calendar .fc-list-event > td {
  background-color: var(--orcah-event-background);
}

#orcah-event-calendar .fc-event,
#orcah-event-calendar .fc-event-main,
#orcah-event-calendar .fc-list-event > td,
#orcah-event-calendar .fc-event a {
  color: var(--orcah-event-text);
}

.orcah-calendar-event-type {
  display: flex;
  align-items: center;
  margin-bottom: 0.125rem;
  font-size: var(--text-xs);
  line-height: 1.2;
}

.orcah-calendar-event-type::before {
  content: "";
  flex: 0 0 auto;
  width: 0.6em;
  height: 0.9em;
  margin-right: 0.3em;
  background-color: currentColor;
  -webkit-mask: url("graphics/svgs/map_pin.svg") center / contain no-repeat;
  mask: url("graphics/svgs/map_pin.svg") center / contain no-repeat;
}

.orcah-event-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  color: var(--Forest-Green);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.orcah-event-page-controls {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--Forest-Green);
  border-radius: 999px;
}

.orcah-event-page-controls a,
.orcah-event-page-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  min-height: 2rem;
  color: inherit;
  font-size: 1.5rem;
  text-decoration: none;
}

.orcah-event-page-controls > :first-child {
  border-right: 1px solid var(--Forest-Green);
}

.orcah-event-page-controls > :last-child {
  border-left: 1px solid var(--Forest-Green);
}

.orcah-event-page-range {
  align-self: center;
  padding: 0.25rem 0.5rem;
  text-align: center;
}

.orcah-event-page-disabled {
  opacity: 0.4;
}

.orcah-event-page-controls a:hover,
.orcah-event-page-controls a:focus-visible {
  color: var(--Forest-Green);
  background-color: var(--Seedling-Green);
}

/* Style FullCalendar's existing Today and month navigation controls. */
#orcah-event-calendar .fc-toolbar-chunk:last-child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
}

#orcah-event-calendar .fc-toolbar-chunk:last-child .fc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  color: var(--Forest-Green);
  background: transparent;
  border-color: var(--Forest-Green);
  box-shadow: none;
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1;
}

#orcah-event-calendar .fc-today-button {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--Forest-Green);
  border-radius: 999px;
}

#orcah-event-calendar .fc-toolbar-chunk:last-child .fc-button-group {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--Forest-Green);
  border-radius: 999px;
}

#orcah-event-calendar .orcah-calendar-month-button {
  order: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.25rem 0.5rem;
  color: var(--Forest-Green);
  font-size: var(--text-sm);
  line-height: 1;
  border: 0;
  border-radius: 0;
  margin: 0;
}

.orcah-calendar-month-picker {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(24rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 1.5rem;
  border: 1px solid var(--Forest-Green);
  border-radius: 0.75rem;
  color: var(--Forest-Green);
  background: #fff;
}

.orcah-calendar-month-picker::backdrop {
  background: rgb(0 0 0 / 35%);
}

.orcah-calendar-month-picker form {
  display: grid;
  gap: 0.75rem;
}

.orcah-calendar-month-picker h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.orcah-calendar-month-picker select {
  width: 100%;
  min-width: 0;
  padding: 0.5rem;
}

.orcah-calendar-months {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.orcah-calendar-months legend {
  margin-bottom: 0.75rem;
  font-size: 1rem;
}

.orcah-calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.orcah-calendar-month-card {
  position: relative;
  cursor: pointer;
}

.orcah-calendar-month-card input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.orcah-calendar-month-card span {
  display: grid;
  place-items: center;
  min-height: 3rem;
  border: 1px solid var(--Forest-Green);
  border-radius: 0.375rem;
  font-family: var(--font-mono);
}

.orcah-calendar-month-card:hover span {
  background: var(--Seedling-Green);
}

.orcah-calendar-month-card input:checked + span {
  background: var(--Forest-Green);
  color: #fff;
}

.orcah-calendar-month-card input:focus-visible + span {
  outline: 2px solid var(--Forest-Green);
  outline-offset: 2px;
}

.orcah-calendar-picker-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.orcah-calendar-picker-actions .btn {
  padding: 0.5rem 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

#orcah-event-calendar .fc-prev-button,
#orcah-event-calendar .fc-next-button {
  width: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
}

#orcah-event-calendar .fc-prev-button {
  order: 1;
  border-right: 1px solid var(--Forest-Green);
}

#orcah-event-calendar .fc-next-button {
  order: 3;
  border-left: 1px solid var(--Forest-Green);
}

#orcah-event-calendar .fc-toolbar-chunk:last-child .fc-button:hover,
#orcah-event-calendar .fc-toolbar-chunk:last-child .fc-button:focus-visible {
  color: var(--Forest-Green);
  background-color: var(--Seedling-Green);
  border-color: var(--Forest-Green);
  box-shadow: none;
}
#orcah-event-calendar .fc-view-harness {
  background-color: #ffffff;
}
.fc-daygrid-day-events {
  padding: 3px;
}
.fc-daygrid-event-harness {
  border: 1px solid #ededed;
  background-color: var(--Orange);
  border-radius: 5px;
  padding: 3px;
}
.fc-h-event {
  background-color: transparent !important;
  border: 1px solid transparent !important;
}
.fc-daygrid-event-harness a {
  color: #fff;
}

.acf-map {
  width: 100%;
  border: #ccc solid 1px;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 0;
}

/* Fixes potential theme css conflict */
.acf-map img {
  max-width: inherit !important;
}

.map-marker-info {
  width: 260px;
  max-width: 90vw;
}

.map-marker-info h1 a {
  color: var(--Forest-Green);
}

/* Google Maps wraps our InfoWindow content in its own white, padded,
   drop-shadowed chrome (.gm-style-iw-*). Strip that out so the card
   above reads as the whole popup instead of a card-inside-a-card. */
.gm-style .gm-style-iw-c {
  padding: 0;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.gm-style .gm-style-iw-d {
  overflow: hidden !important;
  padding: 0;
}

.gm-style .gm-style-iw-t::after {
  background: var(--Sea-Foam);
}

.type-icon {
  height: 1em;
  width: auto;
  aspect-ratio: 68 / 100;
  vertical-align: -0.15em;
  margin-inline-end: 0.25em;
}

.pathways-icon {
  width: auto;
  height: 4rem;
}

.logout-link:hover {
  background-color: transparent;
  color: var(--Forest-Green);
}

/* Custom organization login form. */
.orcah-login-form .form-control {
  padding: 0.875rem 1rem;
  background-color: var(--Off-White);
}

.orcah-login-form .form-control::placeholder {
  color: var(--gray);
  font-size: var(--text-sm);
  opacity: 0.75;
}

.orcah-login-form .form-check-label,
.orcah-login-form > .d-flex a,
.login-account-prompt {
  font-size: var(--text-sm);
}

.donate-icon {
  max-width: 20px;
  height: auto;
  margin: 0;
  padding: 0;
}

.orcah-login_fins {
  width: 100%;
  max-width: 1000px;
}

/* Custom PieCal styles */
.fc-event-main-frame {
  display: flex;
  flex-direction: column;
}
.fc-daygrid-event-dot {
  display: none;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* END Custom PieCal styles */