/**
 * Supplementary front-end styles for things theme.json cannot express
 * (hover/interaction states, the credentials marquee, sticky header shadow).
 */

/* Buttons on a blue (primary) background: the sitewide default hover turns
   the button primary-coloured, which disappears against a primary-coloured
   backdrop (e.g. the "Our Commitment to Safety" panel). Invert to a white
   fill instead, so the button stays visible in both states regardless of
   which background it's placed on. Extended to green (tertiary) panels too. */
.has-primary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: #ffffff !important;
	color: var(--wp--preset--color--primary) !important;
}
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-primary-background-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--wp--preset--color--primary) !important;
}
.has-tertiary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.has-tertiary-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: #ffffff !important;
	color: var(--wp--preset--color--tertiary) !important;
}
.has-tertiary-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.has-tertiary-background-color .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: #ffffff !important;
	border-color: #ffffff !important;
	color: var(--wp--preset--color--tertiary) !important;
}

/* Browsers apply a default 1em/40px margin to <figure>, which the block
   editor's own styles reset but our frontend stylesheet never did — leaving
   image blocks (particularly full-width ones like the gallery bento cards)
   with unwanted left/right gaps instead of filling their container. */
.wp-block-image {
	margin: 0;
}

/* WordPress inserts the global blockGap as margin-block-start between every
   top-level block in .wp-site-blocks (header, main, footer). That pushes
   <main> down from the sticky header on every template. Sections control
   their own spacing, so remove that default gap here. */
#wp--skip-link--target {
	margin-block-start: 0 !important;
}

/* Footer link lists: no bullets, flush left so they line up with the
   column heading above them instead of the browser's default list indent. */
.g2-site-footer ul.wp-block-list {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

/* Footer links: no underline, colour inherited from the surrounding text,
   with the same secondary-colour hover accent used in the header nav. */
.g2-site-footer a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.g2-site-footer a:hover,
.g2-site-footer a:focus-visible {
	color: var(--wp--preset--color--secondary);
}

/* Primary navigation (header only — the header and footer share the same
   Navigation entity, but this "raised active tab" treatment assumes a
   horizontal bar and would look like unwanted jitter in the footer's
   vertical list): the current page (and, on hover, any item) gets an
   underline plus a touch of bottom padding. Since the nav row centres items
   on the cross axis, that extra padding pushes the label itself up slightly
   relative to its plain siblings, echoing the mockup's "raised" active tab. */
.g2-site-header .wp-block-navigation-item > .wp-block-navigation-item__content {
	border-bottom: 2px solid transparent;
	transition: color 0.25s ease, border-color 0.25s ease, padding-bottom 0.25s ease;
}

.g2-site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	padding-bottom: 0.35em !important;
	border-bottom-color: var(--wp--preset--color--primary);
}

.g2-site-header .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.g2-site-header .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--secondary);
	padding-bottom: 0.35em !important;
	border-bottom-color: var(--wp--preset--color--secondary);
}

/* Inside the mobile overlay the underline reads as a stray line under stacked
   links, so drop it there and rely on colour + weight only. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding-bottom: 0 !important;
	border-bottom: none;
}

/* Dropdown submenu (e.g. Our Homes → Brook View/Brook House): push it down
   a touch so it doesn't sit flush against the parent item, which otherwise
   covers up the parent's own underline/hover state right as it appears.
   Needs !important — core's ".wp-block-navigation ul" reset (a class+tag
   selector) otherwise beats a bare class selector on specificity. */
.wp-block-navigation__submenu-container {
	margin-top: 0.25em !important;
}

/* That gap is a dead zone for :hover: core only shows the submenu while the
   cursor stays over the parent <li> (its box ends at the link itself, since
   the closed submenu is width:0/height:0 and out of flow), so moving the
   mouse straight down from "Our Homes" into the gap loses :hover before it
   reaches the submenu and it snaps shut mid-transit. Bridge the gap with an
   invisible pseudo-element on the <li> (which core already makes
   position:relative) so the hoverable area is continuous down to where the
   submenu begins. Header only — the footer's version of this submenu is
   always statically open, no hover involved. */
.g2-site-header .wp-block-navigation-item.has-child::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 0.25em;
}

/* Core's Navigation block switches between the horizontal bar and the
   hamburger/overlay at a hardcoded 600px viewport width (see
   wp-includes/blocks/navigation/style.css) — that value isn't exposed as a
   block attribute or theme setting, so the only way to move it is to
   override core's own rules. Push the switch out to 758px for the header
   nav specifically: force the hamburger toggle to stay visible, and the
   horizontal container hidden, through the 600-757px gap core would
   otherwise treat as desktop. Needs !important since core's rules
   (@media min-width:600px) match at the same specificity across that gap
   and aren't guaranteed to lose on source order alone. Footer's nav is
   untouched — it uses overlayMenu:"never" and never shows a toggle. */
@media (max-width: 757px) {
	.g2-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	.g2-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

/* Footer's Explore/Legal/Contact row wraps its three columns with
   justify-content:space-between. Each column's width is content-driven, so
   as the viewport narrows, which columns end up sharing a wrapped line (and
   which is last-on-the-line, which space-between pushes to the row's right
   edge) depends on exact pixel widths rather than column order — e.g.
   between ~400-422px Legal and Contact end up sharing a line and Contact
   gets shoved right instead of stacking flush left underneath. Force a
   clean one-column-per-row stack below the same 782px breakpoint WP core
   uses to stack Columns blocks, so there's no partial-line packing left to
   go wrong. */
@media (max-width: 781px) {
	.g2-site-footer .is-content-justification-space-between {
		flex-direction: column;
	}
}

/* Footer's "Explore" list shares the same wp_navigation entity as the
   header (see functions/theme notes), but reads as a plain sitemap list
   rather than a horizontal nav bar — tighten the Navigation block's own
   flex gap down to the same tight, line-height-driven spacing the Legal
   column's plain list uses beside it. */
.g2-site-footer .wp-block-navigation {
	gap: 0.5rem !important;
}

/* Footer's Our Homes submenu: always shown, indented under its parent, no
   click/hover needed — a footer sitemap should just list every page, not
   hide some behind an interactive dropdown. Overrides core's default
   hidden/floating submenu styles (position/visibility/size all reset). */
.g2-site-footer .wp-block-navigation-item.has-child {
	flex-wrap: wrap;
}
.g2-site-footer .wp-block-navigation__submenu-container {
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	width: 100% !important;
	min-width: 0 !important;
	flex-basis: 100%;
	height: auto !important;
	overflow: visible !important;
	margin: 0.5rem 0 0 1em !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	gap: 0.5rem !important;
}
.g2-site-footer .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0 !important;
}
.g2-site-footer .wp-block-navigation-submenu__toggle {
	display: none !important;
}

/* Submenu items don't get the top-level "raised active tab" treatment
   (underline + padding shift) — just a colour change on hover/focus, same
   reset used for the mobile overlay above. */
.wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	padding-bottom: 0 !important;
	border-bottom: none !important;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--secondary);
}

/* Mobile overlay submenu (Our Homes → Brook View/Brook House): the custom
   overlay template part (parts/navigation-overlay.html) opts out of core's
   built-in mobile submenu handling by using disable-default-overlay, so
   without this it falls back to the desktop dropdown's floating-card look
   instead — absolute position, border, background, and a min-width:200px
   box. That box is narrower than "Brook View"/"Brook House" at the
   overlay's own xx-large font size, so the text wraps onto two lines.
   Reset to a plain, full-width static block (same idea as the footer's
   always-open submenu below) while keeping the click-to-expand toggle —
   only the box/positioning is reset, not visibility/height, so it still
   collapses when closed. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
	flex-wrap: wrap;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	min-width: 0 !important;
	width: 100% !important;
	flex-basis: 100%;
	background: none !important;
	border: none !important;
	padding-left: 1em !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	white-space: nowrap;
}

/* Sticky header on every template (the actual sticking is done by the
   position:sticky wrapper group each template puts around the header
   template-part). This rule handles the header's own appearance while
   stuck: background so scrolled content doesn't show through, stacking
   above it, and a soft, on-brand (primary-blue-tinted, matching the
   theme's other custom shadow tokens) separator shadow along its bottom
   edge on every page, hero or not. */
.g2-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--background);
	box-shadow: 0 4px 10px rgba(51, 126, 146, 0.15);
}

/* Card lift-on-hover, used by the pillar/document/team patterns. */
.g2-card-hover {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.g2-card-hover:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow--level-2);
	border-color: var(--wp--preset--color--primary) !important;
}

/* Team photography: greyscale by default, full colour on hover/focus. */
.g2-team-photo img {
	filter: grayscale(1);
	transition: filter 0.4s ease, transform 0.6s ease;
}
.g2-team-photo:hover img,
.g2-team-photo:focus-within img {
	filter: grayscale(0);
}

/* Gallery image zoom used across the Home & Environment cards. The wrapper's
   own corners must carry the same radius as the image: on hover the image
   scales up via transform, which also enlarges/shifts its rounded corners,
   so clipping against a square-cornered wrapper would expose a flat edge
   where the curve used to be. Matching the wrapper's radius keeps the clip
   mask itself rounded regardless of how the image inside transforms. */
.g2-image-zoom {
	overflow: hidden;
}
.g2-image-zoom.g2-radius-top {
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}
.g2-image-zoom.g2-radius-bottom {
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
}
.g2-image-zoom img {
	transition: transform 0.6s ease;
}
.g2-image-zoom:hover img {
	transform: scale(1.05);
}

/* Values/credentials marquee strip on the Therapeutic Care page. */
.g2-marquee {
	overflow: hidden;
	white-space: nowrap;
}
.g2-marquee__track {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	animation: g2-marquee 32s linear infinite;
}
.g2-marquee:hover .g2-marquee__track {
	animation-play-state: paused;
}
@keyframes g2-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.g2-marquee__track {
		animation: none;
	}
	.g2-card-hover,
	.g2-team-photo img,
	.g2-image-zoom img {
		transition: none;
	}
}

/* Checkmark list used in place of default bullets for benefit/feature lists. */
.g2-checklist {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}
.g2-checklist li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: var(--wp--preset--spacing--30);
}
.g2-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0.1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--tertiary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
}

/* Pill-shaped eyebrow/tag used throughout hero sections. */
.g2-eyebrow {
	display: inline-block;
	padding: 0.25rem 1rem;
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Home hero: the surface-fade-right gradient only lightens roughly the left
   40% of the image, by design — intentionally left as-is. On narrower
   viewports the text column spans close to the image's full width, so lines
   routinely wrap into the un-lightened, fully photographic area, where
   contrast against the actual pixels underneath is unpredictable (sunlit sky
   in one spot, a dark stone wall in the next). Rather than outlining each
   line of text, blur and tint the photo uniformly behind the whole column
   with a frosted-glass panel — legibility no longer depends on the gradient's
   fade extent or what's directly behind any one word, at any viewport width.
   `background-color` alone is the fallback for browsers without
   backdrop-filter support (all evergreen browsers have it) — still gives a
   translucent tint even without the blur. Keep the tint low-opacity: at
   ~0.7 the panel reads as a flat white card with no visible blur at all
   (tried and rejected) — the photo needs to actually show through, softened,
   for this to look like glass rather than a card. A thin light border
   substitutes for the edge definition that opacity would otherwise provide.
   Note: opacity alone cannot make orange (`secondary`) text meet contrast
   here — even a fully opaque panel only gets orange to ~2.5:1, the same
   ceiling as the sitewide orange-on-light-background issue. That's why the
   heading uses `primary-dark` instead of the sitewide default for this
   specific photo-backed instance — see the pattern/template source. */
.g2-hero-content {
	box-sizing: border-box;
	max-width: 100%;
	background-color: rgba(247, 250, 251, 0.5);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--level-2);
}

/* Contact page form — real submission handler via Contact Form 7 (see
   templates/page-contact.html for the [contact-form-7] shortcode). These
   classes are this theme's own wrapper/field markup, not CF7's; CF7 renders
   its inputs/select/textarea inside that structure, so the selectors below
   still apply generically by tag rather than any CF7-specific class. */
/* The gap here was a no-op: .g2-contact-form's only direct child is CF7's
   own wrapper div (.wpcf7 > form.wpcf7-form), so this never reached the
   actual .g2-form-row elements several levels deeper, leaving zero space
   between rows. Re-targeted at the real CF7 <form> so it applies to its
   direct children (.g2-form-row, the submit button) instead. */
.g2-contact-form form.wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}
.g2-form-row--split {
	display: flex;
	gap: var(--wp--preset--spacing--50);
	flex-wrap: wrap;
}
.g2-form-row--split .g2-form-field {
	flex: 1 1 200px;
}
/* Two fields sharing a split row don't always have same-length labels (e.g.
   "Date of Application" vs. "How did you hear about this vacancy, or who
   referred you?") — a label that wraps to a second line otherwise pushes
   just its own input down, leaving the row's inputs starting at different
   heights. Reserving two lines' height for every split-row label keeps
   inputs aligned regardless of which label wraps. */
.g2-form-row--split .g2-form-field label {
	min-height: 44.8px;
	min-height: 2lh;
}
.g2-form-field label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}
/* CF7's wpautop processing joins each label and field into one <p> with a
   literal <br> between them ("<label>...</label><br /><span
   class="wpcf7-form-control-wrap">...") — that phantom line break was
   adding roughly a full line-height of empty space between a label and its
   own input (the label's own margin-bottom above is only 4px), which is
   why labels read as floating nearer the *previous* field than their own.
   Both the label and the wrap span are already block-level (see above/
   below), so the <br> is redundant for layout — just hidden. */
.g2-form-field p br {
	display: none;
}
/* Visual required-field indicator: CF7 already flags required controls
   with .wpcf7-validates-as-required (from the `*` in each shortcode tag,
   e.g. [text* your-name]), but doesn't render anything for it by default.
   :has() lets us mark the label itself without needing a class change on
   the shortcode tags. */
.g2-form-field p:has(.wpcf7-validates-as-required) label::after {
	content: " *";
	color: var(--wp--preset--color--secondary);
}
.g2-contact-form input,
.g2-contact-form select,
.g2-contact-form textarea {
	box-sizing: border-box;
	width: 100%;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--on-surface);
	background-color: var(--wp--preset--color--white);
	border: 1px solid #bfc8cc;
	border-radius: 0.5rem;
	padding: 0.65rem 0.85rem;
}
.g2-contact-form textarea {
	resize: vertical;
}
.g2-contact-form input:focus,
.g2-contact-form select:focus,
.g2-contact-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}

/* Contact Form 7 wraps each label/field pair in its own <p> (its default
   templating behaviour, not something this form's markup asked for) — drop
   the browser's default paragraph margin so it doesn't add extra gaps on
   top of .g2-form-row's own gap. */
.g2-contact-form .wpcf7-form-control-wrap {
	display: block;
}
.g2-form-field p {
	margin: 0;
}

/* CF7's submit renders as a bare <input type="submit">, which only picks up
   this form's generic input styling (border, white background) rather than
   the theme's button look — restyle it to match .wp-element-button
   (same tokens as the sitewide button style in theme.json) explicitly,
   since browsers won't apply button-element CSS to an input by default. */
.g2-contact-form .wpcf7-submit {
	width: 100%;
	border: none;
	border-radius: var(--wp--custom--radius--default);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-primary);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* CF7's own loading spinner is a sibling <span> right after the submit
   button with only left/right margin (no top margin) — fine next to an
   inline-width button, but ours is width:100%, so the spinner wraps onto
   its own line sitting flush against the button's bottom edge. It's
   visibility:hidden (not display:none) outside of an actual submit, so
   that cramped gap is reserved and visible even at rest, not just while
   submitting. Centre it with proper breathing room instead. */
.g2-contact-form .wpcf7-spinner {
	display: block;
	margin: var(--wp--preset--spacing--30) auto 0;
}

.g2-contact-form .wpcf7-submit:hover,
.g2-contact-form .wpcf7-submit:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

/* CF7's inline validation/success banner — keep it visually consistent with
   the rest of the form rather than the plugin's unstyled default. */
.g2-contact-form .wpcf7-response-output {
	margin: 0;
	border-radius: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
}
.g2-contact-form form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--on-surface);
}
.g2-contact-form form.failed .wpcf7-response-output,
.g2-contact-form form.aborted .wpcf7-response-output {
	border-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--on-surface);
}
.g2-contact-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	margin-top: var(--wp--preset--spacing--10);
}