/*
Theme Name: sfHR
Theme URI: https://sfhr.org/
Author: sfHR Consulting
Author URI: https://sfhr.org/
Description: Block theme for sfHR Consulting: human resources consulting, HR outsourcing, and payroll outsourcing for California employers. Full Site Editing, self-hosted variable fonts, no third-party requests, and no front-end JavaScript beyond WordPress core.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.1.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sfhr
Tags: business, block-patterns, full-site-editing, block-styles, custom-colors, custom-menu, accessibility-ready, one-column, wide-blocks
*/

/* ==========================================================================
   sfHR — supplemental stylesheet

   Nearly all design tokens live in theme.json and reach this file as
   --wp--preset--* and --wp--custom--* custom properties. Nothing below
   redefines a colour, a size, or a spacing step: it composes them.

   Contents
     1.  Document and accessibility furniture
     2.  Site header
     3.  Site footer
     4.  Grid and card primitives
     5.  Editorial primitives (eyebrow, lede, measure, marked list)
     6.  Panels, steps, statistics
     7.  Tables
     8.  Forms
     8b. Job postings
     9.  Notices
     10. Posts and archive furniture
     11. Print
   ========================================================================== */


/* 1. Document and accessibility furniture
   ------------------------------------------------------------------------ */

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 6.5rem;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 3px;
}

/* The skip link is supplied by WordPress for block themes and targets the
   <main> element in each template. It uses .screen-reader-text, styled below. */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	white-space: normal;
}


/* 2. Site header
   ------------------------------------------------------------------------ */

.sfhr-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: var(--wp--custom--rule--hairline);
}

.sfhr-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	color: inherit;
}

.sfhr-brand:hover .sfhr-brand-name {
	color: var(--wp--preset--color--brand);
}

.sfhr-brand svg {
	display: block;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
}

.sfhr-brand-name {
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	transition: color var(--wp--custom--transition);
}

.sfhr-brand-name .sfhr-brand-sf {
	color: var(--wp--preset--color--brand);
}

.sfhr-brand-strap {
	display: block;
	margin-top: 3px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	font-weight: 400;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}

/* Core navigation: flatten the default styling into the header rhythm. */

.sfhr-header .wp-block-navigation {
	--navigation-layout-justification-setting: flex-end;
	gap: 0.35rem;
}

.sfhr-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.7rem;
	border-radius: var(--wp--custom--radius--sm);
	transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}

.sfhr-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--surface);
}

.sfhr-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-deep);
	background: var(--wp--preset--color--brand-tint);
}

.sfhr-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
}

.sfhr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
	padding: 0.4rem 0;
}

/* Core flips the navigation to its overlay at 600px. With eight destinations
   and a call to action in the bar, this header runs out of room well before
   that and wraps onto a second line, so the switch is moved to 900px. The
   selectors carry an extra class each because core's own rules are three
   classes deep. */
@media (max-width: 900px) {
	.sfhr-header .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	.sfhr-header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

@media (max-width: 600px) {
	.sfhr-brand-strap {
		display: none;
	}
}


/* 3. Site footer
   ------------------------------------------------------------------------ */

.sfhr-footer a {
	text-decoration: none;
}

.sfhr-footer a:hover {
	text-decoration: underline;
}

.sfhr-footer-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-light);
	margin: 0 0 0.9rem;
}

.sfhr-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
	font-size: var(--wp--preset--font-size--small);
}

.sfhr-footer-list a {
	color: var(--wp--preset--color--on-dark);
}

.sfhr-footer-list a:hover {
	color: var(--wp--preset--color--brand-light);
}

/* Metadata type on the ink ground: the light-ground muted colour does not
   carry enough contrast there. */
.sfhr-panel .sfhr-meta {
	color: #9FB2AF;
}

/* Footer contact list. Each link is given a 24px minimum box so that it meets
   the WCAG 2.2 target-size rule; stacked small links otherwise fail it. */
.sfhr-footer-contact {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.25rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: #9FB2AF;
}

.sfhr-footer-contact a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--wp--preset--color--brand-light);
}

.sfhr-legal-note {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: #97A8A5;
}


/* 4. Grid and card primitives
   ------------------------------------------------------------------------ */

.sfhr-grid {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(var(--sfhr-col, 17rem), 100%), 1fr));
}

.sfhr-grid-2 { --sfhr-col: 24rem; }
.sfhr-grid-3 { --sfhr-col: 17rem; }
.sfhr-grid-4 { --sfhr-col: 13rem; }

.sfhr-card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.sfhr-card > :first-child { margin-top: 0; }
.sfhr-card > :last-child { margin-bottom: 0; }

.sfhr-card h3,
.sfhr-card h4 {
	margin: 0;
}

.sfhr-card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.6;
}

.sfhr-card-link {
	margin-top: auto;
	padding-top: 0.4rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand);
	text-decoration: none;
}

.sfhr-card-link::after {
	content: " \2192";
	display: inline-block;
	transition: transform var(--wp--custom--transition);
}

a.sfhr-card {
	text-decoration: none;
	color: inherit;
}

a.sfhr-card:hover,
.sfhr-card:has(a:hover) {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--soft);
}

a.sfhr-card:hover .sfhr-card-link::after {
	transform: translateX(3px);
}

.sfhr-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.3rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--brand-tint);
	color: var(--wp--preset--color--brand-deep);
}

.sfhr-card-icon svg {
	width: 21px;
	height: 21px;
}


/* 5. Editorial primitives
   ------------------------------------------------------------------------ */

.sfhr-eyebrow {
	display: block;
	margin: 0 0 0.85rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.sfhr-panel .sfhr-eyebrow {
	color: var(--wp--preset--color--brand-light);
}

.sfhr-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	letter-spacing: -0.012em;
}

/* A readable line length for running prose. The constrained layout sets
   margin-left and margin-right to auto with !important, which would centre a
   narrowed paragraph against the flush-left heading above it, so the override
   has to carry the same weight. This is the only !important in the file. */
.sfhr-measure {
	max-width: var(--wp--custom--measure);
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Eyebrows and the brand lockup sitting on an ink ground. The block-style
   variation sets a colour that only works on light, so it is answered here
   rather than duplicated as a second variation. */
.sfhr-panel .wp-block-heading.is-style-sfhr-eyebrow,
.sfhr-panel .sfhr-eyebrow {
	color: var(--wp--preset--color--brand-light);
}

.sfhr-panel .sfhr-brand-name {
	color: #F2F7F6;
}

.sfhr-panel .sfhr-brand-name .sfhr-brand-sf {
	color: var(--wp--preset--color--brand-light);
}

.sfhr-panel .sfhr-brand-strap {
	color: #8FA09D;
}

/* Core sizes an unstyled separator at 100px with a three-class selector, so
   the hairline variation has to match that weight to win. */
.wp-block-separator.is-style-sfhr-hairline.is-style-sfhr-hairline {
	max-width: none;
	width: 100%;
}

.sfhr-marked {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}

.sfhr-marked li {
	position: relative;
	padding-left: 1.75rem;
	line-height: 1.6;
}

.sfhr-marked li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.52em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: rotate(-45deg);
}

.sfhr-panel .sfhr-marked li::before {
	border-color: var(--wp--preset--color--brand-light);
}

.sfhr-divider {
	height: 1px;
	margin: 0;
	border: 0;
	background: var(--wp--preset--color--line);
}


/* 6. Panels, steps, statistics
   ------------------------------------------------------------------------ */

.sfhr-panel {
	color: var(--wp--preset--color--on-dark);
	background: var(--wp--preset--color--contrast);
}

.sfhr-panel :is(h1, h2, h3, h4, h5) {
	color: #F2F7F6;
}

.sfhr-panel a:not(.wp-element-button) {
	color: var(--wp--preset--color--brand-light);
}

.sfhr-steps {
	list-style: none;
	counter-reset: sfhr-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.sfhr-steps > li {
	counter-increment: sfhr-step;
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--30) 3.4rem;
	border-bottom: var(--wp--custom--rule--hairline);
}

.sfhr-steps > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.sfhr-steps > li::before {
	content: counter(sfhr-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
	border-radius: var(--wp--custom--radius--sm);
	padding: 0.3rem 0.45rem;
	line-height: 1;
}

.sfhr-steps h3 {
	margin: 0 0 0.4rem;
	font-size: var(--wp--preset--font-size--large);
}

.sfhr-steps p {
	margin: 0;
	color: var(--wp--preset--color--contrast-2);
}

.sfhr-figure {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(1.75rem, 4vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.sfhr-panel .sfhr-figure {
	color: var(--wp--preset--color--brand-light);
}

.sfhr-figure-label {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-3);
}

.sfhr-panel .sfhr-figure-label {
	color: #9FB2AF;
}


/* 7. Tables
   ------------------------------------------------------------------------ */

/* The wrapper is focusable so that a keyboard user can scroll a wide table
   sideways; a scrollable region that cannot be reached by keyboard is a
   WCAG failure, not a nicety. */
.sfhr-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
}

.sfhr-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.sfhr-table caption {
	padding: 0.9rem 1.1rem;
	text-align: left;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-3);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sfhr-table th {
	padding: 0.85rem 1.1rem;
	text-align: left;
	vertical-align: bottom;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sfhr-table td {
	padding: 0.9rem 1.1rem;
	vertical-align: top;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.sfhr-table tbody tr:last-child td {
	border-bottom: 0;
}

.sfhr-table th[scope="row"] {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
	background: transparent;
	vertical-align: top;
}


/* 8. Forms
   ------------------------------------------------------------------------ */

.sfhr-form {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
}

/* Hidden inputs are still grid children, and every one of them was claiming a
   row and a gap at the top of the form. */
.sfhr-form > input[type="hidden"] {
	display: none;
}

.sfhr-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.sfhr-fieldset legend {
	padding: 0;
	margin: 0 0 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.sfhr-field-row {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

.sfhr-field {
	display: grid;
	gap: 0.35rem;
	align-content: start;
}

.sfhr-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.sfhr-required {
	color: var(--wp--preset--color--brand);
	font-weight: 500;
}

.sfhr-hint {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-3);
}

.sfhr-input,
.sfhr-select,
.sfhr-textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--sm);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.sfhr-textarea {
	min-height: 9rem;
	resize: vertical;
}

.sfhr-select {
	appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235E6E6C' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.85rem center;
}

.sfhr-input:hover,
.sfhr-select:hover,
.sfhr-textarea:hover {
	border-color: var(--wp--preset--color--contrast-3);
}

.sfhr-input:focus,
.sfhr-select:focus,
.sfhr-textarea:focus {
	border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-tint);
}

.sfhr-input[aria-invalid="true"],
.sfhr-textarea[aria-invalid="true"],
.sfhr-select[aria-invalid="true"] {
	border-color: #A32218;
	box-shadow: 0 0 0 3px #F7E4E2;
}

.sfhr-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
}

.sfhr-consent input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--brand);
}

.sfhr-consent label {
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-2);
}

.sfhr-submit {
	justify-self: start;
	padding: 0.9rem 1.75rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--brand);
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 8px;
	cursor: pointer;
	transition: background var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.sfhr-submit:hover {
	background: var(--wp--preset--color--brand-deep);
	border-color: var(--wp--preset--color--brand-deep);
}

/* Honeypot. Hidden from sight and from assistive technology alike, and
   never focusable, so no human is asked to skip it. */
.sfhr-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* 8b. Job postings
   ------------------------------------------------------------------------ */

.sfhr-job-card {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.sfhr-job-card:hover {
	border-color: var(--wp--preset--color--brand);
	box-shadow: var(--wp--preset--shadow--soft);
}

.sfhr-job-card .wp-block-post-title a {
	text-decoration: none;
}

.sfhr-job-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

.sfhr-job-inline {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast-3);
}

.sfhr-job-pay {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--brand-deep);
}

.sfhr-job-closed {
	display: inline-block;
	margin: 0.6rem 0 0;
	padding: 0.15rem 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
	background: var(--wp--preset--color--surface-deep);
	border-radius: var(--wp--custom--radius--sm);
}

.sfhr-job-facts {
	margin: 0;
	display: grid;
	gap: 0.85rem;
}

.sfhr-job-facts > div {
	display: grid;
	gap: 0.15rem;
}

.sfhr-job-facts dt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-3);
}

.sfhr-job-facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	line-height: 1.45;
}

@media (min-width: 901px) {
	.sfhr-job-aside {
		position: sticky;
		top: 6rem;
	}
}

/* File input. Browsers style the button itself, so the control gets the same
   treatment as every other field around it. */
.sfhr-file {
	width: 100%;
	padding: 0.65rem 0.85rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	background: var(--wp--preset--color--base);
	border: 1px dashed var(--wp--preset--color--rule, var(--wp--preset--color--line));
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
}

.sfhr-file::file-selector-button {
	margin-right: 0.85rem;
	padding: 0.45rem 0.9rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--brand);
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	cursor: pointer;
}

.sfhr-file:hover {
	border-color: var(--wp--preset--color--brand);
}

.sfhr-file:focus {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}


/* 9. Notices
   ------------------------------------------------------------------------ */

.sfhr-notice {
	display: grid;
	gap: 0.35rem;
	padding: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--radius--md);
	border-left: 3px solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--brand-tint);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-2);
}

.sfhr-notice strong {
	color: var(--wp--preset--color--contrast);
}

.sfhr-notice-error {
	border-left-color: #A32218;
	background: #FBECEA;
}

.sfhr-notice-error strong {
	color: #7A1912;
}

.sfhr-notice p {
	margin: 0;
}

.sfhr-notice ul {
	margin: 0.25rem 0 0;
	padding-left: 1.1rem;
}


/* 10. Posts and archive furniture
   ------------------------------------------------------------------------ */

.sfhr-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--contrast-3);
}

.wp-block-post-terms a,
.wp-block-post-date {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-3);
}

.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--brand);
	text-decoration: underline;
}

.wp-block-query-pagination {
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-search__button,
.wp-block-search .wp-block-search__input {
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--preset--color--line);
	padding: 0.6rem 0.8rem;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-search__button {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--brand);
	font-weight: 600;
	cursor: pointer;
}

/* Core Details block used for FAQ accordions. */
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0.35rem;
	top: 0.35em;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--wp--preset--color--brand);
	border-bottom: 2px solid var(--wp--preset--color--brand);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition);
}

.wp-block-details[open] summary::after {
	transform: rotate(-135deg);
}

.wp-block-details > :not(summary) {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	line-height: 1.65;
}


/* 11. Print
   ------------------------------------------------------------------------ */

@media print {
	.sfhr-header,
	.sfhr-footer,
	.sfhr-form,
	.wp-block-navigation {
		display: none !important;
	}

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

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