/**
 * Hand-written styles for the handful of cases theme.json cannot express:
 * block style variations, the header/footer surface treatment, and a
 * theme-level baseline for native HTML form fields. All values reference
 * theme.json custom properties so color/spacing/radius stay single-sourced.
 */

/*
 * Figma-approved spacing scale (design/figma/tokens/design-tokens.json,
 * space/1-8), kept as a separate, currently-unconsumed namespace rather
 * than replacing theme.json's existing settings.spacing.spacingSizes
 * (10-80, a different scale). Every existing pattern already depends on
 * that sitewide scale via var(--wp--preset--spacing--XX); swapping its
 * values here in Phase F1 would silently reflow padding/gaps across
 * every page, which is exactly the kind of blast-radius Phase F1 is
 * scoped to avoid. These --oasis-figma-space-* variables exist so a
 * later phase building a genuinely Figma-matched component has the
 * real values on hand without guessing; they are not referenced by any
 * rule below yet.
 */
:root {
	--oasis-figma-space-1: 4px;
	--oasis-figma-space-2: 8px;
	--oasis-figma-space-3: 12px;
	--oasis-figma-space-4: 16px;
	--oasis-figma-space-5: 24px;
	--oasis-figma-space-6: 36px;
	--oasis-figma-space-7: 52px;
	--oasis-figma-space-8: 80px;
}

/*
 * Global site canvas, matching the approved Figma shell
 * (design/figma/prototype-code/src/index.css's #root): the whole site
 * (header + main + footer, everything WordPress wraps in
 * .wp-site-blocks for a block theme -- see
 * wp-includes/block-template.php's get_the_block_template_html())
 * sits in a centered, 1160px-capped white canvas with a subtle edge
 * ring/shadow, on a light page background outside it. At any viewport
 * ≤1160px the canvas naturally becomes edge-to-edge (max-width has no
 * effect once it's already narrower than the cap), matching the
 * approved screenshots at 768px/390px showing no visible margin there.
 * Deliberately frontend-only (this file is only enqueued via
 * wp_enqueue_scripts): the Site Editor renders its iframe through a
 * different wrapper entirely, so this cannot affect editor output.
 * No overflow:hidden here, so it can't clip a future sticky header or
 * an off-canvas mobile-nav panel.
 */
body {
	background-color: var(--wp--preset--color--background);
}

.wp-site-blocks {
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--wp--custom--shadow--canvas);
	margin-inline: auto;
	max-width: 1160px;
}

/*
 * The header/footer template parts are constrained to the same 1160px
 * canvas (see parts/header.html, parts/footer.html) so their content
 * sits in a controlled centered composition instead of stretching edge
 * to edge -- confirmed via real render that the previous, unconstrained
 * header put the logo and nav at the literal browser edges on a
 * 1440px viewport. Now that the canvas above already caps the whole
 * site at 1160px, header/footer's own contentSize:1160 is a no-op for
 * width (min(1160,1160)=1160) but still harmless to leave; the actual
 * side gutter comes from the padding-inline below, matching the
 * approved Figma shell's fixed 40/20/16px .wrap padding steps rather
 * than depending on a width delta that no longer exists once nested
 * inside an already-1160px-capped canvas.
 */
.oasis-site-header,
.oasis-site-footer {
	padding-inline: 40px;
}

@media (max-width: 600px) {
	.oasis-site-header,
	.oasis-site-footer {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-site-header,
	.oasis-site-footer {
		padding-inline: 16px;
	}
}

.oasis-site-header {
	border-bottom: 1px solid var(--wp--preset--color--gray-300);
	padding-bottom: var(--wp--preset--spacing--20);
	padding-top: var(--wp--preset--spacing--20);
}

.oasis-header-row {
	align-items: center;
	column-gap: var(--wp--preset--spacing--50);
	row-gap: var(--wp--preset--spacing--20);
}

.oasis-site-header .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding-bottom: var(--wp--preset--spacing--10);
	padding-top: var(--wp--preset--spacing--10);
}

/* Header CTA: approved solid-navy rectangular button (Phase F1's buttonRect token), not the gradient pill used elsewhere. */
.oasis-header-cta .wp-block-button__link {
	border-radius: var(--wp--custom--border-radius--button-rect);
}

.oasis-site-footer {
	background-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	padding-bottom: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
}

.oasis-footer-nav-row {
	margin-bottom: var(--wp--preset--spacing--30);
}

.oasis-footer-row {
	align-items: center;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.oasis-footer-meta {
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.oasis-footer-meta p {
	color: var(--wp--preset--color--footer-text);
	font-size: var(--wp--preset--font-size--small);
}

.oasis-site-footer a {
	color: var(--wp--preset--color--white);
}

.oasis-site-footer a:hover {
	color: var(--wp--preset--color--cyan);
}

/*
 * core/navigation ships its own inline default,
 * ".wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content"
 * (specificity 0,3,0 -- higher than ".oasis-site-footer a" above), which sets
 * color:inherit and pulls the ambient navy set by theme.json's
 * styles.blocks["core/navigation"] color. Matched and exceeded here with an
 * added type selector so the footer's nav text actually renders legibly
 * instead of navy-on-navy (confirmed via computed-style inspection against a
 * real render, not just source reading).
 *
 * Matches the approved Figma footer nav treatment: the current page's
 * link is white (WCAG 11.6:1 on navy), every other link uses the
 * footer-text token (6.4:1 on navy, confirmed via contrast calculation
 * -- passes AA). Figma's own footer-dim token (#476880, "copyright
 * text") was also checked and measures only 1.97:1 on navy --
 * fails WCAG AA even for large text, so it is not used for any text
 * in this footer; footer-text is the nearest compliant approved token
 * and is used for the copyright line below instead.
 */
.oasis-site-footer nav.wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--footer-text);
}

.oasis-site-footer nav.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	color: var(--wp--preset--color--white);
}

.oasis-site-footer nav.wp-block-navigation .wp-block-navigation-item__content:hover,
.oasis-site-footer nav.wp-block-navigation .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--white);
}

/*
 * Footer social icons are decorative placeholders (see
 * parts/footer.html): no real account URLs exist yet, so they are
 * plain aria-hidden <span> elements, not links -- never an href="#".
 * Sized/styled to match the approved Figma footer-social treatment
 * (subtle outlined circle, translucent white icon).
 */
.oasis-footer-social {
	align-items: center;
	display: flex;
	gap: var(--wp--preset--spacing--20);
}

.oasis-footer-social-icon {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.7);
	display: inline-flex;
	height: 30px;
	justify-content: center;
	width: 30px;
}

/*
 * The logo file's wordmark is set in navy, so on the navy footer it's
 * rendered as a flat white silhouette (matching the approved Figma
 * footer treatment exactly: filter: brightness(0) invert(1) on the
 * same logo asset) rather than the previous white background chip --
 * the palm icon's own cyan/lime gradient is intentionally lost here,
 * same as Figma's own footer logo.
 */
.oasis-site-footer .wp-block-site-logo img {
	filter: brightness(0) invert(1);
}

/*
 * "Card" block style variation, registered for core/group in
 * functions.php. The cyan/lime border alternation and corner accent
 * are theme-wide (not homepage-only) since is-style-card is reused
 * across the homepage services grid, the Services page overview, and
 * the generic capabilities-grid pattern.
 */
.is-style-card {
	background-color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--cyan);
	border-radius: var(--wp--custom--border-radius--card);
	height: 100%;
	padding: var(--wp--preset--spacing--50);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.is-style-card::before {
	background: linear-gradient(135deg, var(--wp--preset--color--cyan) 0%, var(--wp--preset--color--lime) 100%);
	border-radius: var(--wp--custom--border-radius--card);
	content: "";
	display: block;
	height: 44px;
	margin-bottom: var(--wp--preset--spacing--30);
	width: 44px;
}

.is-style-card :where(h2, h3, h4, h5, h6) {
	margin-bottom: var(--wp--preset--spacing--20);
}

.wp-block-column:nth-child(even) .is-style-card {
	border-color: var(--wp--preset--color--lime);
}

.is-style-card:hover,
.is-style-card:focus-within {
	/* rgba(27,58,92) is the new navy (#1B3A5C) -- was rgba(11,31,58) (#0B1F3A), migrated to match. */
	box-shadow: 0 8px 20px rgba(27, 58, 92, 0.12);
	transform: translateY(-2px);
}

/*
 * "Gradient Accent" button style variation, registered for core/button
 * in functions.php -- the primary CTA treatment. Text stays navy at
 * both gradient endpoints (verified >=6.5:1 contrast against both the
 * cyan and lime ends), so it stays accessible across the whole gradient.
 */
.is-style-gradient-accent .wp-block-button__link {
	background: linear-gradient(90deg, var(--wp--preset--color--cyan) 0%, var(--wp--preset--color--lime) 100%);
	border: none;
	color: var(--wp--preset--color--navy);
}

.is-style-gradient-accent .wp-block-button__link:hover {
	background: linear-gradient(90deg, var(--wp--preset--color--lime) 0%, var(--wp--preset--color--cyan) 100%);
	color: var(--wp--preset--color--navy);
}

/* Reusable section rhythm, applied via the .oasis-section pattern class. */
.oasis-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
}

.oasis-hero {
	text-align: center;
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}

.oasis-cta {
	background-color: var(--wp--preset--color--navy);
	text-align: center;
}

.oasis-cta :where(h1, h2, h3, h4, h5, h6),
.oasis-cta :where(p) {
	color: var(--wp--preset--color--white);
}

/*
 * Phase F10 acceptance fix: this banner's button previously forced a
 * solid cyan background here, overriding the is-style-gradient-accent
 * class applied in consultation-cta.php. The approved Figma CTAButton
 * component only defines two variants -- "grad" (gradient pill, used
 * for hero/banners/mobile nav) and "navy" (solid rect, header desktop/
 * about page) -- solid cyan isn't one of them. This banner's button
 * uses the "grad" variant like the hero and Mission CTAs, so the
 * override is removed and .is-style-gradient-accent's own rule (above)
 * now applies here too.
 */

/*
 * Contact page closing CTA (Phase F10 acceptance fix): matches the
 * approved Figma PageContact component -- white background, centered,
 * with a top border separating it from the contact cards above (unlike
 * the shared navy .oasis-cta banner used on Home/About/Services).
 */
.oasis-contact-cta {
	border-top: 1px solid var(--wp--preset--color--gray-300);
	text-align: center;
}

/* Alternating section background, used across the homepage and inner pages. */
.oasis-surface-band {
	background-color: var(--wp--preset--color--background);
}

/*
 * Visible keyboard focus state, on brand, applied to every interactive
 * element. Uses cyan-700 rather than the brighter cyan swatch: at
 * 2.53:1 the brand cyan fails the 3:1 minimum WCAG 1.4.11 non-text
 * contrast ratio against the site's white/surface backgrounds, while
 * cyan-700 clears 3:1 against both those and navy (so the same rule
 * stays legible regardless of what background a focused element sits
 * on).
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--cyan-700);
	outline-offset: 2px;
}

/* Current-page indicator in the Navigation block, once a menu or Page List is active. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-item .wp-block-navigation-item__content {
	font-weight: 700;
}

/*
 * Baseline for native form fields ahead of the oasis-requests
 * consultation form. box-sizing: border-box is required here because
 * oasis-requests/assets/css/requests.css sets width:100% on these same
 * elements: without it, the browser default (content-box for input/
 * textarea -- confirmed via computed style, though <select> already
 * defaults to border-box) adds this rule's own padding and border on
 * top of that 100%, overflowing the field's container by exactly
 * padding-inline (32px) + border-inline (2px) = 34px -- confirmed via
 * real render at 390px viewport width, invisible until the consultation
 * form actually started rendering.
 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select,
.wp-block-search__input {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--border-radius--field);
	box-sizing: border-box;
	/* Was --wp--preset--color--ink, a palette slug removed in Phase F1 (the dangling reference was invisible since it inherited navy from the surrounding text color anyway) -- navy is the token that slug stood in for, and matches the approved Figma .fi input spec (color: var(--navy)) exactly. */
	color: var(--wp--preset--color--navy);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

input:focus,
textarea:focus,
select:focus,
.wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--cyan-700);
	outline-offset: 1px;
}

label {
	color: var(--wp--preset--color--navy);
	font-weight: 600;
}

/*
 * "Contact Us" section (Phase F6). Lives here, not in homepage.css,
 * because the oasis-it-technologies/contact-section pattern is reused on
 * both the homepage (where homepage.css loads, gated on is_front_page())
 * and the standalone Contact page (where it doesn't) -- this file loads
 * sitewide. Left-aligned eyebrow+heading, no centering, no sub-copy,
 * matching Figma's SectionHeading call for this section exactly --
 * `label="Get In Touch" heading="Contact Us"`, no `sub`, no `center`.
 * Reuses the .oasis-subsection-heading size but NOT .oasis-clients-label
 * (that one is always center-rendered via its block's own textAlign
 * attribute) -- a separate, left-aligned eyebrow class avoids coupling
 * this section's styling to Phase F5's.
 */
.oasis-contact-section {
	padding-inline: 40px;
}

@media (max-width: 600px) {
	.oasis-contact-section {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-contact-section {
		padding-inline: 16px;
	}
}

.oasis-contact-label {
	/* cyan-700, not cyan: plain cyan text measures ~2.5:1 on this section's white/light background, failing WCAG AA (4.5:1) -- see the Phase F9 contrast audit note on .oasis-eyebrow-label below. */
	color: var(--wp--preset--color--cyan-700);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	margin: 0 0 var(--wp--preset--spacing--10);
	text-transform: uppercase;
}

/*
 * True CSS grid, 2 columns down to 580px (Figma's own .contact-grid
 * breakpoint), 1 column below it -- confirmed via the approved 768px
 * screenshot (still 2 columns there, since 768 > 580) and the 390px
 * screenshot (1 column).
 */
.oasis-contact-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr 1fr;
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 580px) {
	.oasis-contact-grid {
		grid-template-columns: 1fr;
	}
}

/* See the identical note on .oasis-expertise-grid/.oasis-clients-grid: neutralizes core's default flow-layout block-gap margin so it doesn't stack with `gap`. */
.oasis-contact-grid > .oasis-contact-card {
	margin-block: 0;
}

.oasis-contact-card {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: var(--wp--custom--border-radius--card);
	border-block-start: 3px solid var(--wp--preset--color--cyan);
	box-shadow: var(--wp--custom--shadow--card);
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 26px;
}

.oasis-contact-card.oasis-accent-lime {
	border-block-start-color: var(--wp--preset--color--lime);
}

.oasis-contact-header {
	gap: 12px;
}

.oasis-contact-avatar {
	align-items: center;
	background-color: rgba(0, 179, 216, 0.094);
	border-radius: 50%;
	color: var(--wp--preset--color--cyan);
	display: inline-flex;
	flex-shrink: 0;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.oasis-accent-lime .oasis-contact-avatar {
	background-color: rgba(125, 196, 32, 0.094);
	color: var(--wp--preset--color--lime);
}

.oasis-contact-title {
	color: var(--wp--preset--color--navy);
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

.oasis-contact-divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--gray-300);
	margin: 0;
}

.oasis-contact-row {
	gap: 9px;
}

.oasis-contact-row p {
	color: var(--wp--preset--color--gray-700);
	font-size: 0.813rem;
	margin: 0;
}

.oasis-contact-row-icon--email {
	color: var(--wp--preset--color--cyan);
}

.oasis-contact-row-icon--phone {
	color: var(--wp--preset--color--lime);
}

/*
 * Figma's own "Connect" label color (#9baec0) measures ~2.3:1 against
 * the white card background, far below the 4.5:1 AA minimum --
 * substituting gray-700 (~6.3:1), same substitution precedent as the
 * client-placeholder text color and the F2 footer-dim token.
 */
.oasis-contact-connect {
	color: var(--wp--preset--color--gray-700);
	font-size: 0.75rem;
	margin: 0 0 7px;
}

.oasis-contact-social-row {
	display: flex;
	gap: 7px;
}

/*
 * Decorative placeholders, not links: no destination URLs exist yet
 * (Figma's own source uses `href="#[PLATFORM_URL]"`, which this theme
 * deliberately does not reproduce -- a real anchor with a `#` or
 * bracket-placeholder href would be a fake, focusable link). Rendered as
 * inert <span> icons with no :hover affordance so nothing implies
 * clickability; swap to real <a aria-label="..." href="..."> per icon
 * once real URLs exist, keeping this same static appearance.
 */
.oasis-contact-social-icon {
	align-items: center;
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--gray-300);
	border-radius: 50%;
	color: var(--wp--preset--color--gray-700);
	display: inline-flex;
	height: 30px;
	justify-content: center;
	width: 30px;
}

/*
 * Generic 38x38 service-icon sizing/coloring (Phase F1/F4), moved here
 * from homepage.css: originally homepage-only, now also used by the
 * Services page's left-aligned card variant below (Phase F7), and
 * blocks.css is the sitewide file -- the same lesson learned with the
 * Contact section's CSS in Phase F6. Pure relocation, no property
 * changes; the homepage's rendered output is unaffected.
 */
.oasis-svc-icon {
	color: var(--wp--preset--color--cyan);
	display: block;
}

.oasis-svc-icon--raster {
	object-fit: contain;
}

/*
 * Shared eyebrow label (Phase F7): small/bold/uppercase, used above
 * inner-page hero headings and section headings that need this treatment
 * (Mission, Approach). Distinct from the earlier oasis-clients-label/
 * oasis-contact-label (Phase F5/F6, center- or section-specific) --
 * this is the generic version, introduced now that a third and fourth
 * consumer exist.
 *
 * Phase F9 contrast audit: plain cyan text measures ~2.5:1 against the
 * white/light backgrounds this label sits on in the Mission and Approach
 * sections -- well below the 4.5:1 WCAG AA minimum for text (the same
 * gap documented in F2's original cyan-700 focus-ring rationale below,
 * just against a lighter background this time). cyan-700 clears 5:1
 * there. The one context where plain cyan already passes -- this same
 * label inside the navy page-hero, at 4.67:1 -- keeps it, restored by
 * the more specific rule right after .oasis-page-hero-lines below.
 */
.oasis-eyebrow-label {
	color: var(--wp--preset--color--cyan-700);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	margin: 0 0 var(--wp--preset--spacing--10);
	text-transform: uppercase;
}

/*
 * Inner-page hero (Phase F7): navy banner shared by About/Services/
 * Contact/Request a Consultation, matching the approved Figma page-hero
 * treatment. About additionally gets a low-opacity decorative diagonal
 * line pattern (oasis-page-hero--about) and an inline CTA button --
 * see patterns/page-hero.php for why those two are conditional.
 */
.oasis-page-hero {
	background-color: var(--wp--preset--color--navy);
	overflow: hidden;
	padding-block: 64px;
	position: relative;
}

@media (max-width: 768px) {
	.oasis-page-hero {
		padding-block: 48px;
	}
}

@media (max-width: 520px) {
	.oasis-page-hero {
		padding-block: 36px;
	}
}

.oasis-page-hero-lines {
	color: var(--wp--preset--color--cyan);
	height: 100%;
	inset: 0;
	opacity: 0.05;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.oasis-page-hero-inner {
	position: relative;
	z-index: 1;
}

.oasis-page-hero-inner .oasis-eyebrow-label {
	/* Full cyan (not the cyan-700 .oasis-eyebrow-label falls back to elsewhere) -- on this navy background it already measures 4.67:1, clearing WCAG AA, so the brighter brand cyan is kept here intentionally. */
	color: var(--wp--preset--color--cyan);
	margin-inline: auto;
}

.oasis-page-hero-heading {
	color: var(--wp--preset--color--white);
	font-size: clamp(1.375rem, 2.8vw, 1.875rem);
	font-weight: 800;
	line-height: 1.25;
}

.oasis-page-hero-sub {
	color: var(--wp--preset--color--footer-text);
	font-size: 0.906rem;
	line-height: 1.7;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--10);
	max-width: 580px;
}

.oasis-page-hero-actions {
	margin-top: var(--wp--preset--spacing--30);
}

/*
 * About page "Our Mission" section (Phase F7). oasis-mission-section
 * carries the same 40/20/16px content gutter as the header/footer
 * (Phase F2) and Contact section (Phase F6) -- .oasis-section alone has
 * no horizontal padding, so this section's content previously sat flush
 * against the canvas edge (fixed here, see about-positioning.php).
 */
.oasis-mission-section {
	padding-inline: 40px;
}

@media (max-width: 600px) {
	.oasis-mission-section {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-mission-section {
		padding-inline: 16px;
	}
}

/*
 * About "Our engagement approach" and Services page grid: same missing
 * shared-gutter defect as the Mission section above (identified during
 * that same fix, out of its scope at the time), same fix.
 */
.oasis-approach-section,
.oasis-services-section {
	padding-inline: 40px;
}

@media (max-width: 600px) {
	.oasis-approach-section,
	.oasis-services-section {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-approach-section,
	.oasis-services-section {
		padding-inline: 16px;
	}
}

/*
 * Phase F9 responsive audit: same missing shared-gutter defect as the
 * two rules above. The consultation form section relies on its
 * constrained layout's 680px contentSize to stay clear of the canvas
 * edge, which only works while the viewport is wider than 680px --
 * below that (600px and under) the form had zero inline padding and
 * sat flush against the screen edge, unlike every other section on the
 * site.
 */
.oasis-consultation-form-section {
	padding-inline: 40px;
}

@media (max-width: 600px) {
	.oasis-consultation-form-section {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-consultation-form-section {
		padding-inline: 16px;
	}
}

/*
 * Homepage "Why Oasis" section (Phase F10 acceptance fix): same missing
 * shared-gutter defect as the Mission/Approach/Services sections above,
 * same fix. Reuses the .oasis-mission-grid/.oasis-why-cards/
 * .oasis-why-card structural classes below -- see why-oasis.php.
 */
.oasis-why-section {
	padding-inline: 40px;
}

@media (max-width: 600px) {
	.oasis-why-section {
		padding-inline: 20px;
	}
}

@media (max-width: 390px) {
	.oasis-why-section {
		padding-inline: 16px;
	}
}

.oasis-mission-grid {
	align-items: center;
	display: grid;
	gap: 52px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 760px) {
	.oasis-mission-grid {
		gap: 32px;
		grid-template-columns: 1fr;
	}
}

.oasis-mission-actions {
	margin-top: var(--wp--preset--spacing--20);
}

.oasis-why-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.oasis-mission-grid > .oasis-why-cards > .oasis-why-card {
	margin-block: 0;
}

.oasis-why-card {
	background-color: var(--wp--preset--color--white);
	border-inline-start: 3px solid var(--wp--preset--color--cyan);
	border-radius: 4px;
	padding: 16px 18px;
}

.oasis-why-card.oasis-accent-lime {
	border-inline-start-color: var(--wp--preset--color--lime);
}

.oasis-why-card :where(h3) {
	color: var(--wp--preset--color--navy);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 5px;
}

.oasis-why-card p {
	color: var(--wp--preset--color--gray-700);
	font-size: 13px;
	line-height: 1.6;
}

/* About page "Our engagement approach" section (Phase F7): four numbered process steps. */
.oasis-approach-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 860px) {
	.oasis-approach-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.oasis-approach-grid {
		grid-template-columns: 1fr;
	}
}

.oasis-approach-grid > .oasis-approach-step {
	margin-block: 0;
}

.oasis-approach-step {
	background-color: var(--wp--preset--color--white);
	border-block-start: 3px solid var(--wp--preset--color--cyan);
	border-radius: 10px;
	padding: 22px 18px;
}

.oasis-approach-step.oasis-accent-lime {
	border-block-start-color: var(--wp--preset--color--lime);
}

/*
 * Phase F9 contrast audit: plain cyan/lime text on this card's white
 * background measures 2.49:1 / 2.15:1 -- both fail even the relaxed
 * 3:1 large-text minimum (this is 24px/900, so large text applies), let
 * alone 4.5:1. Using the -700 variants (5.0-5.4:1) instead.
 *
 * Also fixes a pre-existing specificity bug found during that same
 * audit: .oasis-approach-step-number is itself a <p>, so the later,
 * more specific .oasis-approach-step p rule below (class+element,
 * 0-1-1) was silently beating this rule (class only, 0-1-0) and
 * rendering every number in the generic gray-700 paragraph color
 * instead of its intended accent color. Qualifying the selector with
 * its parent class (0-2-0) fixes it -- the .oasis-accent-lime override
 * two rules down was never affected, since it already had a
 * higher-specificity selector of its own.
 */
.oasis-approach-step .oasis-approach-step-number {
	color: var(--wp--preset--color--cyan-700);
	font-size: 1.5rem;
	font-weight: 900;
	margin: 0 0 9px;
}

.oasis-approach-step.oasis-accent-lime .oasis-approach-step-number {
	color: var(--wp--preset--color--lime-700);
}

.oasis-approach-step-title {
	color: var(--wp--preset--color--navy);
	font-size: 14.5px;
	font-weight: 700;
	margin: 0 0 7px;
}

.oasis-approach-step p {
	color: var(--wp--preset--color--gray-700);
	font-size: 13px;
	line-height: 1.65;
}

/*
 * Services page left-aligned card variant (Phase F7): same border/
 * radius/padding/hover-shadow foundation as the homepage's centered
 * .oasis-expertise-card (Phase F4), but left-aligned with an icon+title
 * header row and a "Request Consultation" link, matching Figma's
 * ServiceCard "left" layout. A separate class rather than reusing
 * .oasis-expertise-card directly, since that one bakes in centered
 * alignment and this file (blocks.css) needs to stay independent of
 * homepage.css (gated on is_front_page()).
 */
.oasis-service-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: var(--wp--preset--spacing--40);
}

@media (max-width: 860px) {
	.oasis-service-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 520px) {
	.oasis-service-grid {
		grid-template-columns: 1fr;
	}
}

.oasis-service-grid > .oasis-service-card {
	margin-block: 0;
}

.oasis-service-card {
	align-items: flex-start;
	border-width: 1px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 20px 24px;
	text-align: start;
}

.oasis-service-card::before {
	display: none;
}

.oasis-service-card.oasis-accent-lime {
	border-color: var(--wp--preset--color--lime);
}

.oasis-service-card.oasis-accent-lime .oasis-svc-icon {
	color: var(--wp--preset--color--lime);
}

.oasis-service-card-header {
	gap: 11px;
}

.oasis-service-card-header h2 {
	color: var(--wp--preset--color--navy);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.oasis-service-card > p {
	color: var(--wp--preset--color--gray-700);
	font-size: 12.5px;
	line-height: 1.65;
	margin: 0;
}

.oasis-service-card:hover,
.oasis-service-card:focus-within {
	box-shadow: 0 6px 22px rgba(0, 179, 216, 0.14);
}

.oasis-service-card.oasis-accent-lime:hover,
.oasis-service-card.oasis-accent-lime:focus-within {
	box-shadow: 0 6px 22px rgba(125, 196, 32, 0.13);
}

/*
 * Phase F9 contrast audit: this is real link text (not a decorative
 * icon), and plain cyan/lime on this card's white background measures
 * 2.49:1 / 2.15:1 -- both fail the 4.5:1 WCAG AA minimum for text. This
 * is a straight port of Figma's own ServiceCard link color (`accent ===
 * 'cyan' ? color.cyan : color.lime`), which has the same failure in the
 * source design -- substituting the -700 variants (5.0-5.4:1) instead.
 *
 * Also fixes the same pre-existing specificity bug as
 * .oasis-approach-step-number above: this is itself a <p>, so the more
 * specific .oasis-service-card > p rule was silently winning and
 * rendering this link in gray-700 instead of its accent color.
 * Qualifying with the parent class (0-2-0) fixes it.
 */
.oasis-service-card .oasis-service-card-action {
	color: var(--wp--preset--color--cyan-700);
	font-size: 13px;
	font-weight: 600;
}

.oasis-service-card.oasis-accent-lime .oasis-service-card-action {
	color: var(--wp--preset--color--lime-700);
}

.oasis-service-card-action a {
	color: inherit;
	text-decoration: none;
}

.oasis-service-card-action a:hover,
.oasis-service-card-action a:focus-visible {
	text-decoration: underline;
}

/* Consultation request page process-flow strip (Phase F7). */
.oasis-process-flow {
	padding-block: 20px;
}

@media (max-width: 600px) {
	.oasis-process-flow {
		padding-block: 14px;
	}
}

.oasis-process-flow-row {
	gap: 6px;
}

.oasis-process-flow-pill {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--cyan);
	border-radius: var(--wp--custom--border-radius--sm);
	color: var(--wp--preset--color--navy);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 13px;
	white-space: nowrap;
}

.oasis-process-flow-pill.oasis-accent-lime {
	border-color: var(--wp--preset--color--lime);
}

.oasis-process-flow-arrow {
	color: var(--wp--preset--color--gray-700);
	flex-shrink: 0;
}

/*
 * Phase F9 touch-target audit: WordPress core's mobile nav toggle
 * (header and footer, both overlayMenu:"mobile") renders its tappable
 * area at exactly the 24x24px icon size with zero padding, well under
 * the ~44x44px recommended minimum. CSS-only fix -- core's own markup/
 * JS is untouched, this just enlarges and re-centers the existing
 * button box.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
}