/*
Theme Name: Kiyla Child
Theme URI: https://kiylamc.com
Description: Block child theme of Twenty Twenty-Five for Kiyla Mental Clinic, LLC. All brand design tokens live in theme.json; this stylesheet holds only the handful of rules that theme.json cannot express. Built as a child theme so that WordPress core and Twenty Twenty-Five updates can never overwrite the site's design.
Author: Kiyla Mental Clinic, LLC
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kiyla-child
Tags: block-patterns, full-site-editing, accessibility-ready, one-column, custom-colors, custom-logo, custom-menu
*/

/*
 * Everything that can be expressed in theme.json is expressed there instead of
 * here. theme.json values are available to the site editor, so a future editor
 * can adjust them without touching code; anything hardcoded in CSS is invisible
 * to them and drifts out of sync.
 *
 * What remains below is limited to things the theme.json schema genuinely
 * cannot describe: focus rings, motion preferences, and a few structural
 * utilities used by the theme's own block patterns.
 */

/* ---------------------------------------------------------------------------
 * Focus visibility
 *
 * WCAG 2.2 adds 2.4.11 Focus Not Obscured and 2.4.13 Focus Appearance. The
 * default browser outline disappears against the dark forest header, so the
 * ring is drawn with a contrasting outer shadow that works on any background.
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
	border-radius: 2px;
}

/* On the gold announcement bar itself, gold-on-gold would be invisible. */
.kiyla-announcement :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
 * Skip link
 *
 * Core injects `<a class="skip-link screen-reader-text" id="wp-skip-link">` into
 * every block theme template automatically, so the theme must not add a second
 * one — it only needs to make core's visible and on-brand when focused. Core's
 * own rule uses `!important` on the focused state, which is why these do too.
 * ------------------------------------------------------------------------- */
.skip-link:focus {
	background-color: var(--wp--preset--color--ink) !important;
	color: var(--wp--preset--color--cream) !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 700 !important;
	padding: 0.75em 1.5em !important;
	text-decoration: none !important;
	top: 1rem !important;
	left: 1rem !important;
}

/* ---------------------------------------------------------------------------
 * Reduced motion
 *
 * Vestibular disorders are common in the populations this clinic serves. Honor
 * the OS setting rather than assuming animation is always welcome.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
 * Header bands
 *
 * The header is three full-width bands stacked with no gap:
 *
 *   1. crisis strip   — 988 and 911            \  inside <header>, scroll away
 *   2. brand bar      — logo, name, tagline    /
 *   3. navigation row — menu and phone number  →  PINNED
 *
 * Only the navigation row is pinned. It is a separate template part because a
 * `position: sticky` box can only stick within its own parent's box: nested
 * inside the header it was released the instant the header scrolled past, and
 * the rule computed as `sticky` while doing nothing at all.
 *
 * The crisis strip and brand bar stay inside the <header> element so they
 * remain within the banner landmark, and the phone number lives inside the
 * navigation list rather than beside it, so every part of the pinned row sits
 * within the navigation landmark. Content outside a landmark is an
 * accessibility failure that this structure would otherwise introduce.
 *
 * Separate parts are siblings in the block layout, which puts a blockGap margin
 * between them — that showed as a cream stripe across the header. Zeroed here
 * so the three bands read as one solid block of color.
 * ------------------------------------------------------------------------- */
.kiyla-header,
.kiyla-navbar-part {
	margin-block: 0;
}

/*
 * The same blockGap sits between <main> and the footer. On the home page the
 * call-to-action band is full-bleed and dark and the footer is dark, so the gap
 * showed as a cream seam between them that reads as a rendering fault. The
 * footer supplies its own top padding, so removing the margin costs nothing on
 * the interior pages either.
 */
.wp-site-blocks > .wp-block-template-part:last-child {
	margin-block-start: 0;
}

.kiyla-navbar-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* A hairline and a soft shadow keep the pinned row legible once it is floating
 * over page content. */
.kiyla-navbar {
	border-top: 1px solid rgb(249 247 240 / 12%);
	box-shadow: 0 2px 10px rgb(32 49 57 / 18%);
}

.kiyla-header .wp-block-site-title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.2;
}

/* The phone number is the last item in the navigation list so that it sits
 * inside the navigation landmark, but it should read as the call-to-action it
 * is. Pushed to the far end of the row and given the button treatment. */
.kiyla-navbar .kiyla-nav-phone {
	margin-inline-start: auto;
}

/* The doubled class is not a typo. Core raises the specificity of its own
 * navigation color rule by repeating the class
 * (`.wp-block-navigation-item__content.wp-block-navigation-item__content`,
 * 0-3-0), which silently beat a single-class selector here and left cream text
 * on the gold pill at 2.1:1. Matching that specificity is the fix. */
.kiyla-navbar .kiyla-nav-phone a.wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-radius: 999px;
	padding: 0.45em 1.15em;
	font-weight: 700;
	white-space: nowrap;
}

.kiyla-navbar .kiyla-nav-phone a.wp-block-navigation-item__content:hover,
.kiyla-navbar .kiyla-nav-phone a.wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Current page in the navigation
 *
 * The current item gets a gold underline and full-strength text; the rest sit
 * slightly muted so the difference reads at a glance. The classes are added by
 * the kiyla-core must-use plugin, because WordPress only marks `post-type`
 * navigation links automatically and this menu is built from portable custom
 * links.
 *
 * The underline is deliberately not the only signal: the plugin also sets
 * `aria-current="page"`, so the current item is announced rather than only
 * shown. Color alone would fail WCAG 1.4.1.
 * ------------------------------------------------------------------------- */
/* The phone item is excluded: it is a gold pill with dark text, and the muted
 * cream here would otherwise win on source order and drop it to 2.1:1. */
.kiyla-navbar .wp-block-navigation-item:not(.kiyla-nav-phone) > a.wp-block-navigation-item__content,
.kiyla-navbar .wp-block-navigation-item:not(.kiyla-nav-phone) > button.wp-block-navigation-item__content {
	position: relative;
	color: rgb(249 247 240 / 82%);
	padding-block: 0.35rem;
}

.kiyla-navbar .wp-block-navigation-item:not(.kiyla-nav-phone) > a.wp-block-navigation-item__content:hover,
.kiyla-navbar .wp-block-navigation-item:not(.kiyla-nav-phone) > button.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--cream);
}

.kiyla-navbar .kiyla-current > a.wp-block-navigation-item__content,
.kiyla-navbar .kiyla-current > button.wp-block-navigation-item__content {
	color: var(--wp--preset--color--cream);
	font-weight: 700;
}

.kiyla-navbar .kiyla-current > a.wp-block-navigation-item__content::after,
.kiyla-navbar .kiyla-current > button.wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: -0.1rem;
	block-size: 3px;
	border-radius: 3px;
	background-color: var(--wp--preset--color--gold);
}

/* The phone pill is a call-to-action, not a page. It keeps its own treatment
 * and never takes the muted or current styling. */
.kiyla-navbar .kiyla-nav-phone > a.wp-block-navigation-item__content::after {
	content: none;
}

/* In the mobile overlay the underline would sit awkwardly across a full-width
 * row, so the current item is marked with a leading gold bar instead. */
.wp-block-navigation__responsive-container.is-menu-open .kiyla-current > a.wp-block-navigation-item__content::after,
.wp-block-navigation__responsive-container.is-menu-open .kiyla-current > button.wp-block-navigation-item__content::after {
	inset-inline: auto;
	inset-block: 0;
	inline-size: 3px;
	block-size: auto;
	inset-inline-start: -0.75rem;
}

/*
 * Anchor links and the skip link would otherwise land with their target hidden
 * behind the pinned row — WCAG 2.2 SC 2.4.11, Focus Not Obscured.
 */
html {
	scroll-padding-top: 4.5rem;
}

/* The skip link must sit above the pinned row, not behind it. */
.skip-link:focus {
	z-index: 200 !important;
}

/* ---------------------------------------------------------------------------
 * Compact header on small screens
 *
 * The tagline is dropped and the clinic name stepped down below the tablet
 * breakpoint, so the two scrolling bands do not eat the screen before the
 * visitor has read anything.
 *
 * In the mobile overlay menu the phone item must not keep its auto margin or
 * its pill styling — it becomes a normal menu row like the others.
 * ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.kiyla-header .wp-block-site-tagline {
		display: none;
	}

	.kiyla-header .wp-block-site-title {
		font-size: var(--wp--preset--font-size--small);
	}

	.kiyla-header .kiyla-brandbar {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}

	html {
		scroll-padding-top: 4rem;
	}
}

.wp-block-navigation__responsive-container.is-menu-open .kiyla-nav-phone {
	margin-inline-start: 0;
}

.wp-block-navigation__responsive-container.is-menu-open .kiyla-nav-phone a.wp-block-navigation-item__content {
	background-color: transparent;
	color: var(--wp--preset--color--cream);
	padding: 0;
	border-radius: 0;
}

/* ---------------------------------------------------------------------------
 * Hero heading
 *
 * The approved design sets this headline on two lines. Left to the default
 * display size it takes three, which changes the whole balance of the section.
 * The size is capped a little below the display token and `text-wrap: balance`
 * evens the two lines rather than leaving a short orphan.
 * ------------------------------------------------------------------------- */
.kiyla-hero-title {
	font-size: clamp(2rem, 4.4vw, 2.9rem);
	text-wrap: balance;
}

/* ---------------------------------------------------------------------------
 * Links on dark backgrounds
 *
 * theme.json sets one link color globally, and that color is chosen to pass
 * contrast against the cream page background. On the forest header, footer, and
 * call-to-action bands the same teal drops to roughly 1.8:1 — effectively
 * invisible, and a WCAG 1.4.3 failure on the crisis-line phone numbers, which
 * are the most important links on the site.
 *
 * theme.json cannot express "a link inside a dark container", so the rule lives
 * here.
 *
 * On specificity: core emits the base link color as `a:where(:not(...))`,
 * which scores 0,0,1 — a bare `:where()` wrapper here would score 0,0,0 and
 * lose silently. Each selector below therefore carries one real class plus the
 * element, and the hover rules add a pseudo-class so they still outrank core's
 * own `:root :where(a…:hover)` at 0,1,0.
 * ------------------------------------------------------------------------- */
.has-forest-background-color a:where(:not(.wp-element-button)),
.has-forest-deep-background-color a:where(:not(.wp-element-button)),
.has-ink-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--cream);
	text-underline-offset: 0.18em;
}

.has-forest-background-color a:where(:not(.wp-element-button)):hover,
.has-forest-deep-background-color a:where(:not(.wp-element-button)):hover,
.has-ink-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--gold);
	text-decoration: underline;
}

/* The gold announcement bar is light, so links there need ink, not cream. */
.has-gold-background-color a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------------------
 * Pattern utilities
 *
 * Used by the theme's own block patterns. Prefixed so they cannot collide with
 * a plugin's styles.
 * ------------------------------------------------------------------------- */

/* Pill-shaped announcement bar from the approved home page design. */
.kiyla-announcement {
	border-radius: 999px;
}

/* Service and feature cards lift very slightly rather than casting a shadow —
 * heavy shadows read as dated and add paint cost on mobile. */
.kiyla-card {
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.kiyla-card:hover,
.kiyla-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgb(32 49 57 / 8%);
}

/* Icon discs in the services grid. White, as in the approved design — cream
 * disappears against the mint panel behind them. */
.kiyla-icon-disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 4rem;
	block-size: 4rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--white);
}

.kiyla-icon-disc svg {
	inline-size: 1.75rem;
	block-size: 1.75rem;
}

/* The service labels are links, but the design shows them as plain dark
 * headings. They keep an underline on hover and focus so they are still
 * discoverable as links without shouting on first read. */
.kiyla-service-label a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.kiyla-service-label a:hover,
.kiyla-service-label a:focus-visible {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
}

/* Designer credit heart. Gold rather than red: red on the forest footer reads
 * as an error state. It carries role="img" and an aria-label in the markup so a
 * screen reader announces "love" instead of spelling out the character. */
.kiyla-heart {
	color: var(--wp--preset--color--gold);
	font-style: normal;
}

/* Telephone numbers should never wrap mid-number. */
.kiyla-phone {
	white-space: nowrap;
}

/* The header brand lockup must be allowed to shrink. A flex item defaults to
 * `min-width: auto`, so it refuses to go narrower than its content: the logo
 * plus a long clinic name and tagline would force the header wider than a
 * narrow viewport. Defensive rather than fixing an observed break — the layout
 * currently fits at 320px — but the tagline is editable content, and the day
 * someone lengthens it this is what keeps the header from pushing the page
 * sideways. */
.kiyla-brand > * {
	min-inline-size: 0;
}

/* Decorative mark beside the home page hero. Purely ornamental, so it carries
 * role="presentation" in the markup and is hidden from assistive technology. */
.kiyla-hero-mark {
	max-inline-size: 16rem;
	margin-inline: auto;
}

.kiyla-hero-mark svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* ---------------------------------------------------------------------------
 * Callback request form (Fluent Forms)
 *
 * The plugin ships a generic blue-accented style that belongs to no brand. This
 * brings the form onto the site's palette and fixes two accessibility problems
 * in the defaults: a checkbox smaller than the WCAG 2.2 minimum target size,
 * and an error state signaled by color alone.
 *
 * Scoped to .frm-fluent-form, the wrapper class the plugin always emits.
 * An earlier attempt scoped these to a custom class set in the form's own
 * settings, but the plugin did not render it — and a style that silently does
 * not apply is worse than one that applies broadly. There is one form on this
 * site, and a second should look like it anyway.
 * ------------------------------------------------------------------------- */
.frm-fluent-form .ff-el-input--label label {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink);
}

.frm-fluent-form .ff-el-form-control {
	border: 1px solid rgb(32 49 57 / 25%);
	border-radius: 8px;
	padding: 0.7em 0.85em;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.frm-fluent-form .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--forest);
	box-shadow: none;
}

/* The notice block injected at the top of the form. */
.kiyla-form-notice {
	border-left: 4px solid var(--wp--preset--color--gold);
	padding: 0.25rem 0 0.25rem 1rem;
	margin-block-end: 1.5rem;
	font-size: var(--wp--preset--font-size--small);
}

.kiyla-form-notice p:last-child {
	margin-block-end: 0;
}

/* WCAG 2.2 SC 2.5.8 sets a 24x24 CSS pixel minimum for pointer targets. The
 * plugin's default checkbox is around 13px, which is also simply hard to hit on
 * a phone. Enlarging the control and making the whole label clickable fixes
 * both the standard and the practical problem. */
.frm-fluent-form .ff-el-form-check-input[type="checkbox"] {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	margin-inline-end: 0.6rem;
	accent-color: var(--wp--preset--color--forest);
	flex: 0 0 auto;
}

.frm-fluent-form .ff-el-form-check label {
	display: flex;
	align-items: flex-start;
	gap: 0.15rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	min-block-size: 1.5rem;
}

/* Errors must not rely on color alone (WCAG 1.4.1). The plugin prints the
 * message text already; this adds a non-color cue and a matching border. */
.frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: #9B2C2C;
	border-width: 2px;
}

.frm-fluent-form .error.text-danger::before {
	content: "⚠ ";
}

.frm-fluent-form .error.text-danger {
	color: #9B2C2C;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

/* The submit button inherits the theme's button shape rather than the
 * plugin's square default. */
.frm-fluent-form .ff-btn-submit {
	border-radius: 999px;
	padding: 0.85em 1.75em;
	font-family: inherit;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------------
 * Page header mark
 *
 * The title band on interior pages was a full-width block of mint with a
 * heading in the left two-thirds and nothing in the right third — the kind of
 * empty space that reads as unfinished rather than as breathing room. The mark
 * fills it with the brand's own shapes: the ripple-and-leaf motif echoes the
 * tree in the logo, and it is drawn rather than photographed, so it costs one
 * HTTP request of nothing and carries no licensing or model-release question.
 *
 * It is decorative, so it is marked `role="presentation"` and `aria-hidden` in
 * the template and contributes nothing to the accessible name of the page.
 *
 * Dropped below the tablet breakpoint: stacked under the heading it would push
 * the real content a screen further down on the devices most visitors use.
 * ------------------------------------------------------------------------- */
.kiyla-page-head {
	margin-block: 0;
}

.kiyla-page-head .wp-block-post-title {
	margin-block: 0;
	text-wrap: balance;
}

.kiyla-page-head__mark svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 13rem;
	margin-inline-start: auto;
}

@media (max-width: 781px) {
	.kiyla-page-head__mark {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Figures
 *
 * The slot a real photograph drops into. Defined before there are photographs
 * to put in it, so that when the clinic supplies them an editor adds an Image
 * block and gets the right shape, radius, and caption treatment without having
 * to style anything.
 *
 * `aspect-ratio` plus `object-fit` means a photo of any proportion fills the
 * frame without distorting, and — more importantly — the space is reserved
 * before the image loads, so nothing on the page jumps. Layout shift is a
 * Core Web Vital the project has a target for, and an unsized image is the
 * most common way to fail it.
 * ------------------------------------------------------------------------- */
.kiyla-figure,
.kiyla-figure img {
	border-radius: 16px;
}

.kiyla-figure {
	overflow: hidden;
	background-color: var(--wp--preset--color--mint);
}

.kiyla-figure img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.kiyla-figure.is-wide {
	aspect-ratio: 16 / 9;
}

.kiyla-figure.is-portrait {
	aspect-ratio: 3 / 4;
}

.kiyla-figure figcaption,
.kiyla-figure .wp-element-caption {
	padding: 0.75rem 0.25rem 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--sage);
}

/*
 * The unfilled slot, and the missing-alt-text notice.
 *
 * Both are rendered only for users who can upload files, so neither is ever
 * shown to a patient. They are styled as an editorial note rather than as an
 * error: nothing is broken, a photograph simply has not been taken yet.
 */
.kiyla-photo-slot {
	border: 2px dashed rgb(117 135 103 / 55%);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--mint);
	font-size: var(--wp--preset--font-size--small);
}

.kiyla-photo-slot p {
	margin-block: 0 0.5rem;
}

.kiyla-photo-slot p:last-child {
	margin-block-end: 0;
}

.kiyla-photo-slot__how {
	color: var(--wp--preset--color--sage);
}

.kiyla-photo-slot__warning {
	padding: 0.75rem 0.25rem 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	color: #9b2c2c;
}

/* ---------------------------------------------------------------------------
 * Checklists
 *
 * A ten-item bulleted list of what a service includes is accurate and unread.
 * The checklist variant gives each item a gold tick and room to breathe, which
 * turns the same content into something a visitor scans instead of skipping.
 *
 * The tick is drawn with a pseudo-element rather than a character, so it is
 * never announced by a screen reader — the list is already a list, and "check
 * mark, check mark, check mark" down ten items is noise.
 * ------------------------------------------------------------------------- */
.kiyla-checklist {
	list-style: none;
	padding-inline-start: 0;
	display: grid;
	gap: 0.85rem;
}

.kiyla-checklist li {
	position: relative;
	padding-inline-start: 2.1rem;
}

.kiyla-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.28em;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--gold);
	/* A tick, drawn as a mask so it inherits no text metrics and never wraps. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23203139' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E");
	background-size: 0.8rem 0.8rem;
	background-position: center;
	background-repeat: no-repeat;
}

/* Ordinary content lists simply need more air than the browser default. */
.wp-block-post-content .wp-block-list li + li {
	margin-block-start: 0.5rem;
}

/* ---------------------------------------------------------------------------
 * Jobs
 *
 * The Careers listing and the single job page. The markup comes from the
 * kiyla-core must-use plugin rather than from blocks, because each entry has to
 * show post meta beside its title — so unlike the rest of the site, these rules
 * cannot live in theme.json. They are written against the preset custom
 * properties anyway, so the palette and spacing scale stay the single source of
 * truth.
 * ------------------------------------------------------------------------- */
.kiyla-job-list {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.kiyla-job-list__item {
	background-color: var(--wp--preset--color--white);
	border-radius: 14px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
}

.kiyla-job-list__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.kiyla-job-list__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.kiyla-job-list__title a:hover,
.kiyla-job-list__title a:focus-visible {
	color: var(--wp--preset--color--teal);
	text-decoration: underline;
}

/* The facts line is reference material, not prose: smaller, and in the sage
 * gray-green so it reads as metadata without competing with the title. */
.kiyla-job-list__meta {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--sage);
}

.kiyla-job-list__excerpt {
	margin: var(--wp--preset--spacing--20) 0 0;
}

/* A closing date is the one fact that changes an applicant's behavior today,
 * so it is the one that gets emphasis. */
.kiyla-job-list__closing {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--forest);
}

.kiyla-job-list__link {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
}

.kiyla-jobs-empty {
	background-color: var(--wp--preset--color--mint);
	border-radius: 16px;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.kiyla-jobs-empty p:last-child {
	margin-bottom: 0;
}

/*
 * The facts panel at the top of a job.
 *
 * A description list, because that is what it is: a set of terms and their
 * values. A table would announce row and column positions that carry no
 * meaning here, and a styled paragraph would leave a screen reader user to
 * infer which half of "Position: part time" is the label.
 *
 * Laid out as label/value pairs side by side once there is room, stacked
 * below 600px where two columns would leave both halves too narrow to read.
 */
.kiyla-job-facts {
	margin: 0 0 var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--mint);
	border-radius: 14px;
	border-left: 4px solid var(--wp--preset--color--gold);
	font-size: var(--wp--preset--font-size--small);
}

.kiyla-job-facts__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.1rem 1rem;
	padding-block: 0.35rem;
}

.kiyla-job-facts__row + .kiyla-job-facts__row {
	border-top: 1px solid rgb(32 49 57 / 8%);
}

.kiyla-job-facts dt {
	font-weight: 700;
	color: var(--wp--preset--color--forest);
}

.kiyla-job-facts dd {
	margin: 0;
}

@media (min-width: 600px) {
	.kiyla-job-facts__row {
		grid-template-columns: 11rem 1fr;
		align-items: baseline;
	}
}

/*
 * The apply panel below a job.
 *
 * Separated from the description by a rule and a change of background, because
 * everything above it is information and everything below it is an action. The
 * heading is in the markup, so this only has to make the boundary visible.
 */
.kiyla-job-apply {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--mint);
	border-radius: 16px;
}

.kiyla-job-apply > :first-child {
	margin-top: 0;
}

.kiyla-job-apply > :last-child {
	margin-bottom: 0;
}

/* Matches the contact form's notice treatment, so the "do not send clinical
 * information" warning looks the same wherever a visitor meets it. */
.kiyla-job-apply__notice {
	margin-top: var(--wp--preset--spacing--40);
	border-left: 4px solid var(--wp--preset--color--gold);
	padding: 0.25rem 0 0.25rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Visible to logged-in administrators only, and only when the form is missing.
 * Red because it means the apply panel is half-working on a live page. */
.kiyla-job-apply__warning {
	border-left: 4px solid #9b2c2c;
	padding: 0.5rem 0 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

/* The "Careers" line above a job title is a route back, not a decoration, so
 * it keeps link affordance on hover while staying quiet on first read. */
.kiyla-job-eyebrow {
	margin: 0;
}

.kiyla-job-eyebrow a {
	color: inherit;
	text-decoration: none;
}

.kiyla-job-eyebrow a:hover,
.kiyla-job-eyebrow a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Print
 *
 * Patients do print directions and hours. Drop the decorative chrome and keep
 * the contact details legible in black and white.
 * ------------------------------------------------------------------------- */
@media print {
	.kiyla-announcement,
	.wp-block-navigation,
	.skip-link {
		display: none !important;
	}

	/* A printed job description is a useful thing; a printed form is not. The
	 * surrounding panel keeps the email address and phone number, which are
	 * what someone reading it on paper actually needs. */
	.kiyla-job-apply .frm-fluent-form {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}