/*
Theme Name: Pyramid Model Ollie Child
Theme URI: https://www.thegeckoagency.com
Description: This is Pyramid Model Consortium's custom child theme based on Ollie.
Author: Gecko Agency
Author URI: https://www.thegeckoagency.com
Template: ollie
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ollie-child
*/

html {
	scroll-behavior: smooth;
}

.site-header.wp-block-template-part {
	position: fixed;
	top: 0;
	z-index: 50;
	width: 100%;

	.wp-block-navigation__responsive-container-close,
	.wp-block-navigation__responsive-container-open {
		align-items: center;
		justify-content: center;
		height: 2.5rem;
		width: 2.5rem;
		flex-shrink: 0;
		margin-right: 0.25rem;
		border-radius: 9rem;
	}
	.wp-block-navigation__responsive-container-close {
		display: flex;
	}
}

.primary-header-search {
	.wp-block-search__inside-wrapper {
		position: relative;
	}

	.wp-block-search__input {
		position: absolute;
		z-index: 20;
		top: calc(100% + 1.75rem);
		right: 0;
	}
}

.wp-block-navigation-item {
	margin-right: 1.25rem;

	button,
	a {
		text-decoration: none !important;

		&:hover,
		&:focus {
			text-decoration: none !important;
		}
	}

	.wp-block-ollie-mega-menu__toggle-icon {
		color: var(--wp--preset--color--accent-blue);
	}

	> .wp-block-navigation__submenu-icon {
		color: var(--wp--preset--color--accent-blue);
		font-size: 1.25rem !important;
	}

	&.open-on-click .wp-block-navigation-submenu__toggle {
		padding-right: 1rem;
	}
}

/* Button Hover Styles
--------------------------------------------- */

.wp-block-button .wp-block-button__link {
	transition:
		background-color 0.15s ease-in-out,
		color 0.15s ease-in-out,
		outline-color 0.15s ease-in-out;
}

/* Primary button — Figma "Global Components" (node 2340:1839)
   -----------------------------------------------------------
   The board defines four primary buttons that are identical apart from their
   hover background: yellow #FEE162, green #A9D375, blue #4BC0D0, orange
   #EC8852. Their shared default state (tint background, contrast text, pill
   radius, uppercase Avenir 700/1.4px) is already the site-wide `core/button`
   base set in Site Editor Global Styles, so only the hover differs here.

   Yellow is the default: a plain (Fill) button needs no style variation to
   pick it up. Green/blue/orange are opt-in via the block style variations in
   `styles/blocks/button/button-hover-*.json`.

   Scoped to `:not(.has-background)` on purpose. Legacy pre-rebrand pages
   carry buttons with an author-chosen background (`blue-2`, `deep-ocean-blue`,
   `orange-dark`, …) and no style variation, which would otherwise flip from a
   dark blue to yellow on hover. WordPress stamps `has-background` on any
   button with a custom background, so those keep the neutral hover below. */
.wp-block-button:not([class*="is-style-"])
	.wp-block-button__link:not(.has-background):hover,
.wp-block-button:not([class*="is-style-"])
	.wp-block-button__link:not(.has-background):focus-visible,
.wp-block-button.is-style-fill
	.wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-fill
	.wp-block-button__link:not(.has-background):focus-visible {
	background-color: var(--wp--preset--color--accent-yellow);
	color: var(--wp--preset--color--main);
}

/* Green / Blue / Orange — opt-in variations. Not scoped to
   `:not(.has-background)`: picking one of these is a deliberate choice, so it
   should win even on a button that also has a custom background set. */
.wp-block-button.is-style-button-hover-green .wp-block-button__link:hover,
.wp-block-button.is-style-button-hover-green
	.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-green);
	color: var(--wp--preset--color--main);
}

.wp-block-button.is-style-button-hover-blue .wp-block-button__link:hover,
.wp-block-button.is-style-button-hover-blue
	.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-blue);
	color: var(--wp--preset--color--main);
}

.wp-block-button.is-style-button-hover-orange .wp-block-button__link:hover,
.wp-block-button.is-style-button-hover-orange
	.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--accent-orange);
	color: var(--wp--preset--color--main);
}

/* Fill (default) — buttons carrying an author-chosen background keep the
   neutral hover they had before the primary-button work above. */
.wp-block-button:not([class*="is-style-"])
	.wp-block-button__link.has-background:hover,
.wp-block-button:not([class*="is-style-"])
	.wp-block-button__link.has-background:focus,
.wp-block-button.is-style-fill .wp-block-button__link.has-background:hover,
.wp-block-button.is-style-fill .wp-block-button__link.has-background:focus {
	background-color: var(--wp--preset--color--blue-grey);
	color: var(--wp--preset--color--main);
}

/* Secondary button — Figma "Global Components" (nodes 2340:1865, 2340:1860)
   -------------------------------------------------------------------------
   Two outline buttons: Secondary Dark (contrast ring + contrast text on a
   light section, filling to contrast with light text on hover) and Secondary
   Light (its inverse, for dark sections). Both are 2px rings — drawn by the
   parent theme's `outline: 2px solid currentColor` with a -3.5px offset, not
   a border, so `outline-color` is what to target rather than `border-color`.

   Core's Outline style is Secondary Dark. Its rest state is deliberately
   left on the parent's `currentColor`: on a light section that resolves to
   contrast text and is identical to the Figma component, and on a dark
   section it keeps a visible ring instead of drawing a #00222D ring on a
   #00222D cover. Hard-coding the contrast color here would match Figma
   literally while making the button invisible wherever it isn't on a light
   background. Only the hover is spelled out. */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
	outline-color: var(--wp--preset--color--main);
}

/* Secondary Light — for buttons on a dark section. Unlike the default above
   this hard-codes its colors, because that is the whole point of choosing
   it: a light ring is wanted even where the inherited text color wouldn't
   supply one. Repeats the parent theme's ring treatment, which is scoped to
   `.is-style-outline` and so doesn't reach a separate style variation — as is
   the 0.67em vertical padding that Global Styles gives the Outline variation,
   without which this sits 2px shorter than the button it mirrors. */
.wp-block-button.is-style-button-outline-light .wp-block-button__link {
	padding-top: 0.67em;
	padding-bottom: 0.67em;
	border: none;
	background-color: transparent;
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: -3.5px;
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-button-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-button-outline-light
	.wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	outline-color: var(--wp--preset--color--base);
}

/* Brand */
/* A11y: default (non-hover) background darkened from accent-blue-dark
   (#008AAD, 3.84:1 with base/#FAFAFA text) to #007592 (5.08:1). The
   is-style-button-brand background is set by Site Editor Global Styles
   (DB, not this file); this rule matches its specificity and loads after
   global-styles-inline-css in <head>, so it wins the cascade. */
.wp-block-button.is-style-button-brand .wp-block-button__link {
	background-color: #007592;
}
.wp-block-button.is-style-button-brand .wp-block-button__link:hover,
.wp-block-button.is-style-button-brand .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-blue);
	color: var(--wp--preset--color--main);
}

/* Brand Alt */
.wp-block-button.is-style-button-brand-alt .wp-block-button__link:hover,
.wp-block-button.is-style-button-brand-alt .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

/* Dark */
.wp-block-button.is-style-button-dark .wp-block-button__link:hover,
.wp-block-button.is-style-button-dark .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-blue-dark);
}

/* Light */
.wp-block-button.is-style-button-light .wp-block-button__link:hover,
.wp-block-button.is-style-button-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--tertiary);
}

/* Tint */
.wp-block-button.is-style-secondary-button .wp-block-button__link:hover,
.wp-block-button.is-style-secondary-button .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-orange);
	color: var(--wp--preset--color--main);
}

.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation-item
	> .wp-block-navigation__submenu-container {
	border-radius: 1rem !important;
	top: calc(100% + 2rem) !important;
	box-shadow: var(--wp--preset--shadow--menu-shadow) !important;

	> li:first-child {
		border-radius: 1rem 1rem 0 0 !important;
	}
	> li:last-child {
		border-radius: 0 0 1rem 1rem !important;
	}

	a {
		font-weight: normal;
		text-decoration: none;
	}

	/* Full-bleed hover rows: the li is content-width by default, which would
	   leave the highlight inset from the dropdown's right edge. */
	> li {
		width: 100%;
	}
}

/* Top-level nav item hover/focus state
   Subtle fade on the label + its submenu chevron. Scoped to the direct
   children of the top-level container so the open dropdown panel (a
   descendant of the same li) doesn't fade along with it. */

.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__container
	> .wp-block-navigation-item {
	> .wp-block-navigation-item__content,
	> .wp-block-navigation__submenu-icon {
		transition: opacity 0.15s ease-in-out;
	}

	&:hover > .wp-block-navigation-item__content,
	&:hover > .wp-block-navigation__submenu-icon,
	> .wp-block-navigation-item__content:focus-visible {
		opacity: 0.7;
	}
}

/* Dropdown hover/focus state
--------------------------------------------- */

.wp-block-navigation__responsive-container:not(.is-menu-open)
	.wp-block-navigation__submenu-container {
	.wp-block-navigation-item__content,
	.wp-block-navigation-submenu__toggle {
		transition:
			background-color 0.15s ease-in-out,
			color 0.15s ease-in-out;
	}

	.wp-block-navigation-item__content:hover,
	.wp-block-navigation-item__content:focus-visible,
	.wp-block-navigation-submenu__toggle:hover,
	.wp-block-navigation-submenu__toggle:focus-visible {
		background-color: var(--wp--preset--color--tertiary, #E7EEF0);
		color: var(--wp--preset--color--main, #00222D);
	}
}

/* A11y contrast + fallback backgrounds (pa11y round 2, 2026-08-11)
   Stat display text: darkened to ≥3.2:1 on base (large-text threshold). */

/* Reveal .screen-reader-text on focus — block themes (Ollie) don't ship the
   classic .screen-reader-text:focus rule, so the sr-only search submit
   button injected by pm_search_submit_fallback() is keyboard-focusable but
   invisible when focused. */
.screen-reader-text:focus {
	background-color: var(--wp--preset--color--base, #FAFAFA);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--main, #00222D);
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

p.has-gelica-font-family.has-xx-large-font-size.has-accent-blue-color { color: #2C99A8 !important; }
p.has-gelica-font-family.has-xx-large-font-size.has-accent-green-dark-color { color: #619B18 !important; }
p.has-gelica-font-family.has-xx-large-font-size.has-accent-yellow-dark-color { color: #A68A00 !important; }

/* Dark fallback behind photo/overlay covers and CTA strips: invisible once
   the image/overlay paints, readable if it doesn't, and gives the contrast
   checker a real background (it cannot see images or sibling overlay spans).
   Scoped to media-backed covers only (image or video direct child) — unscoped
   it would bleed through color-only/translucent covers with no image, which
   paint their color on the overlay span, not this outer div. */
.wp-block-cover.is-style-default:has(> .wp-block-cover__image-background),
.wp-block-cover.is-style-default:has(> .wp-block-cover__video-background) { background-color: var(--wp--preset--color--main, #00222D); }
/* Unscoped intentionally: the /impact/ page's rounded cover is a solid-color
   cover (no media) whose sibling overlay the contrast checker cannot see —
   the unscoped fallback is what fixes it. */
.wp-block-cover.is-style-rounded-cover { background-color: var(--wp--preset--color--main, #00222D); }
.wp-block-gecko-blocks-section.is-style-text-strip { background-color: #003057; }

/* /resources/ and /affiliates/ hero covers carry no is-style-* modifier
   (default cover style, unnamed by WP core). Scoped to media-backed covers
   only (image or video direct child) — the fallback is invisible once the
   media paints; unscoped it would bleed through color-only/translucent
   covers with no image, which paint their color on the overlay span, not
   this outer div. */
.wp-block-cover:has(> .wp-block-cover__image-background),
.wp-block-cover:has(> .wp-block-cover__video-background) { background-color: var(--wp--preset--color--main, #00222D); }

.rounded-media-text-left img {
	border-top-left-radius: var(--wp--preset--border-radius--lg);
	border-bottom-left-radius: var(--wp--preset--border-radius--lg);
}

/* Gravity Forms
---------------------------------------------
   Gravity Forms' own stylesheets are disabled site-wide (the wrapper renders
   as `gform-theme--no-framework` and no GF CSS is enqueued), so every form
   falls back to browser defaults — an unstyled submit button, a groove-bordered
   address fieldset, and a *visible* spam honeypot. These rules dress the
   markup GF already outputs; they intentionally change no form configuration,
   field order, or behavior, so they apply to every form on the site. */

/* The honeypot is GF's spam trap — it must never be visible to a human. It
   still submits; only the visual box and its "this field is for validation
   purposes" text are hidden. (GF's own CSS hides it exactly this way.) */
.gform_wrapper .gform_validation_container {
	display: none !important;
}

.gform_wrapper .gform_required_legend {
	margin-bottom: var(--wp--preset--spacing--medium, 1.5rem);
	font-size: 0.875rem;
	color: var(--wp--preset--color--secondary, #4A5C63);
}

.gform_wrapper .gfield {
	margin-bottom: var(--wp--preset--spacing--medium, 1.5rem);
}

.gform_wrapper .gfield_label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--main, #00222D);
}

/* Sub-labels (City, State/Province/Region) sit under a complex field's legend
   and read as secondary to it. */
.gform_wrapper .gform-field-label--type-sub {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

.gform_wrapper .gfield_description {
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary, #4A5C63);
}

.gform_wrapper .gfield_required {
	margin-left: 0.125rem;
	color: inherit;
	text-decoration: none;
}

/* Complex fields (address) render as a <fieldset>, which browsers give a
   groove border and inset padding by default. */
.gform_wrapper fieldset.gfield {
	min-width: 0; /* fieldsets refuse to shrink below content width otherwise */
	margin-inline: 0;
	padding: 0;
	border: 0;
}

.gform_wrapper .gfield_label_before_complex {
	padding: 0;
}

/* Text-ish controls */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="password"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--base, #FAFAFA);
	border: 1px solid #C3D0D4;
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--main, #00222D);
	transition:
		border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
}

.gform_wrapper textarea {
	min-height: 12rem;
	resize: vertical;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: #5C6E74;
}

/* #007592 rather than accent-blue-dark: 5.1:1 on the base background, so the
   focus ring clears the 3:1 non-text contrast threshold. */
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: #007592;
	box-shadow: 0 0 0 2px rgba(0, 117, 146, 0.35);
	outline: 2px solid transparent; /* keeps a visible ring in forced-colors mode */
	outline-offset: 2px;
}

/* Sub-fields of a complex field (City / State) sit side by side and stack on
   tablet-and-below, matching the rest of the site's column behavior. */
.gform_wrapper .ginput_complex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--medium, 1.5rem);
}

.gform_wrapper .ginput_complex > span {
	display: block;
	flex: 1 1 14rem;
	min-width: 0;
}

@media (max-width: 781px) {
	.gform_wrapper .ginput_complex {
		display: block;
	}

	.gform_wrapper .ginput_complex > span + span {
		margin-top: var(--wp--preset--spacing--medium, 1.5rem);
	}
}

/* Submit — mirrors the site's brand button (is-style-button-brand): #007592
   at 5.1:1 with base text, pill radius, flipping to accent-blue on hover. */
.gform_wrapper .gform_footer {
	margin-top: var(--wp--preset--spacing--medium, 1.5rem);
}

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
	padding: 0.75rem 2rem;
	background-color: #007592;
	border: 0;
	border-radius: 48px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--base, #FAFAFA);
	cursor: pointer;
	transition:
		background-color 0.1s ease-in-out,
		color 0.1s ease-in-out;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover,
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible,
.gform_wrapper button[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--accent-blue, #4BC0D0);
	color: var(--wp--preset--color--main, #00222D);
}

/* Validation — GF ships no error styling once its CSS is off. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: #B3261E;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
	color: #B3261E;
}

.gform_wrapper .gform_validation_errors {
	margin-bottom: var(--wp--preset--spacing--medium, 1.5rem);
	padding: 1rem;
	background-color: #FCEBEA;
	border-radius: 8px;
	color: #8C1D18;
}

.gform_confirmation_message {
	padding: 1rem 1.25rem;
	background-color: var(--wp--preset--color--tertiary, #E7EEF0);
	border-radius: 8px;
}