/**
 * Servnora front end styles.
 *
 * Only what theme.json cannot express lives here: block style variations,
 * navigation behaviour, focus states and a few layout utilities used by the
 * bundled patterns. Everything uses logical properties so that RTL layouts
 * mirror correctly without a second stylesheet.
 */

/* -------------------------------------------------------------------------
 * 1. Base and accessibility
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

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

:where(a, button, input, select, textarea, summary, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--small);
}

.wp-site-blocks :where(.wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	inset-block-start: 0;
	inset-inline-start: 0;
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

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

/* Keep long words and URLs inside their container on small screens. */
.wp-site-blocks :where(p, h1, h2, h3, h4, h5, h6, li, dd, dt, figcaption) {
	overflow-wrap: break-word;
}

/* -------------------------------------------------------------------------
 * 2. Layout utilities used by patterns
 * ---------------------------------------------------------------------- */

.servnora-measure-narrow {
	max-width: var(--wp--custom--measure--narrow);
}

.servnora-measure {
	max-width: var(--wp--custom--measure--regular);
}

.servnora-measure-wide {
	max-width: var(--wp--custom--measure--wide);
}

.servnora-section-rule {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.servnora-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	letter-spacing: 0.01em;
	margin-block-end: 0.5rem;
}

.servnora-badge {
	background-color: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary-strong);
	display: inline-block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 650;
	padding: 0.35rem 0.85rem;
}

.servnora-badge-accent {
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--contrast);
}

.servnora-icon {
	block-size: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
}

.servnora-icon svg {
	block-size: 1.5rem;
	inline-size: 1.5rem;
}

.servnora-icon-tile {
	background-color: var(--wp--preset--color--primary-soft);
	border-radius: var(--wp--custom--radius--medium);
	color: var(--wp--preset--color--primary-strong);
}

.servnora-step-number {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: 1;
}

/* Sticky call to action used by the mobile CTA pattern. */
.servnora-sticky-cta {
	box-shadow: var(--wp--preset--shadow--floating);
	inset-block-end: 0;
	position: sticky;
	z-index: 20;
}

@media (min-width: 782px) {
	.servnora-sticky-cta {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. Block style variations: buttons
 * ---------------------------------------------------------------------- */

.wp-block-button.is-style-servnora-secondary > .wp-block-button__link {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-servnora-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-servnora-secondary > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--primary-strong);
	border-color: var(--wp--preset--color--primary-strong);
}

.wp-block-button.is-style-servnora-dark > .wp-block-button__link {
	background-color: transparent;
	border-color: currentColor;
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-servnora-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-servnora-dark > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-servnora-light > .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary-strong);
}

.wp-block-button.is-style-servnora-light > .wp-block-button__link:hover,
.wp-block-button.is-style-servnora-light > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-strong);
}

.wp-block-button.is-style-servnora-accent > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-servnora-accent > .wp-block-button__link:hover,
.wp-block-button.is-style-servnora-accent > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-servnora-pill > .wp-block-button__link {
	border-radius: var(--wp--custom--radius--pill);
}

.wp-block-button.is-style-servnora-text > .wp-block-button__link {
	background-color: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--primary);
	padding-inline: 0;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.wp-block-button.is-style-servnora-text > .wp-block-button__link:hover,
.wp-block-button.is-style-servnora-text > .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--primary-strong);
	text-decoration-thickness: 2px;
}

/* Comfortable tap targets on touch screens. */
@media (max-width: 781px) {
	.wp-block-button__link {
		min-block-size: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* -------------------------------------------------------------------------
 * 4. Block style variations: groups, columns, images, lists
 * ---------------------------------------------------------------------- */

.wp-block-group.is-style-servnora-card {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--card);
}

.wp-block-group.is-style-servnora-outline-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
}

.wp-block-group.is-style-servnora-raised-card {
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--floating);
}

.wp-block-group.is-style-servnora-rule-top {
	border-block-start: 3px solid var(--wp--preset--color--accent);
	padding-block-start: var(--wp--preset--spacing--30);
}

.wp-block-columns.is-style-servnora-divided > .wp-block-column + .wp-block-column {
	border-inline-start: 1px solid var(--wp--preset--color--border);
	padding-inline-start: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-servnora-divided > .wp-block-column + .wp-block-column {
		border-inline-start: 0;
		border-block-start: 1px solid var(--wp--preset--color--border);
		padding-inline-start: 0;
		padding-block-start: var(--wp--preset--spacing--30);
	}
}

.wp-block-image.is-style-servnora-framed img {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	padding: 0.5rem;
	background-color: var(--wp--preset--color--base);
}

.wp-block-image.is-style-servnora-squared img {
	border-radius: 0;
}

.wp-block-image.is-style-servnora-panorama img {
	aspect-ratio: 21 / 9;
	object-fit: cover;
	inline-size: 100%;
}

.wp-block-list.is-style-servnora-check {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-servnora-check li {
	padding-inline-start: 1.9rem;
	position: relative;
	margin-block-end: 0.6rem;
}

.wp-block-list.is-style-servnora-check li::before {
	background-color: var(--wp--preset--color--primary);
	content: "";
	block-size: 1.1rem;
	inline-size: 1.1rem;
	inset-block-start: 0.35em;
	inset-inline-start: 0;
	position: absolute;
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.6 14.6 3.4 10.4l1.4-1.4 2.8 2.8 7.6-7.6 1.4 1.4z"/></svg>');
	mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7.6 14.6 3.4 10.4l1.4-1.4 2.8 2.8 7.6-7.6 1.4 1.4z"/></svg>');
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}

.wp-block-list.is-style-servnora-divided {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-servnora-divided li {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block: 0.75rem;
}

.wp-block-list.is-style-servnora-divided li:last-child {
	border-block-end: 0;
}

.wp-block-quote.is-style-servnora-testimonial {
	border: 0;
	padding-inline-start: 0;
}

.wp-block-quote.is-style-servnora-testimonial cite {
	color: var(--wp--preset--color--contrast-soft);
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	margin-block-start: 0.75rem;
}

.wp-block-separator.is-style-servnora-soft {
	border-block-start: 1px solid var(--wp--preset--color--border);
	border-block-end: 0;
	opacity: 1;
}

.wp-block-table.is-style-servnora-plain td,
.wp-block-table.is-style-servnora-plain th {
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding: 0.85rem 0.5rem;
}

.wp-block-details.is-style-servnora-faq {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-details.is-style-servnora-faq summary {
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 650;
	list-style: none;
	padding-inline-end: 2rem;
	position: relative;
}

.wp-block-details.is-style-servnora-faq summary::-webkit-details-marker {
	display: none;
}

.wp-block-details.is-style-servnora-faq summary::after {
	content: "";
	border-inline-end: 2px solid var(--wp--preset--color--primary);
	border-block-end: 2px solid var(--wp--preset--color--primary);
	block-size: 0.6rem;
	inline-size: 0.6rem;
	inset-inline-end: 0.35rem;
	inset-block-start: 0.5em;
	position: absolute;
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition--base);
}

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

.wp-block-heading.is-style-servnora-kicker {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 650;
	letter-spacing: 0.01em;
	margin-block-end: 0.5rem;
}

.wp-block-heading.is-style-servnora-measure {
	max-width: var(--wp--custom--measure--narrow);
}

.wp-block-paragraph.is-style-servnora-lead {
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	max-width: var(--wp--custom--measure--regular);
}

.wp-block-paragraph.is-style-servnora-note {
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-paragraph.is-style-servnora-metric {
	font-size: var(--wp--preset--font-size--xxx-large);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-block-end: 0.35rem;
}

.wp-block-social-links.is-style-servnora-plain-round .wp-social-link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: currentColor;
}

.wp-block-social-links.is-style-servnora-plain-round .wp-social-link:hover {
	border-color: currentColor;
	transform: none;
}

/* -------------------------------------------------------------------------
 * 5. Navigation
 * ---------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 0.5rem;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--floating);
	color: var(--wp--preset--color--contrast);
	min-inline-size: 15rem;
	padding-block: 0.5rem;
	z-index: 40;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	padding: 0.55rem 1rem;
	inline-size: 100%;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary-strong);
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.4em;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--wp--preset--color--accent);
}

/* Desktop hover underline. */
@media (min-width: 782px) {
	.wp-block-navigation:not(.is-responsive) > .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
	.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
		text-decoration: underline;
		text-underline-offset: 0.4em;
		text-decoration-thickness: 2px;
	}
}

/* Mobile overlay. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding-block: var(--wp--preset--spacing--40);
	padding-inline: var(--wp--preset--spacing--30);
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0;
	box-shadow: none;
	padding-inline-start: 1rem;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.5rem;
}

/* Transparent header keeps its own contrast. */
.servnora-header-overlay {
	inset-inline: 0;
	inset-block-start: 0;
	position: absolute;
	z-index: 30;
}

.servnora-header-overlay .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * 6. Post, archive and comment details
 * ---------------------------------------------------------------------- */

.servnora-post-card .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
	inline-size: 100%;
}

.servnora-post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.02);
}

.servnora-post-card .wp-block-post-featured-image img {
	transition: transform var(--wp--custom--transition--base);
}

.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--medium);
}

.wp-block-post-date,
.wp-block-post-author-name {
	color: var(--wp--preset--color--contrast-soft);
	font-size: var(--wp--preset--font-size--caption);
}

.wp-block-post-navigation-link a {
	font-weight: 650;
	text-decoration: none;
}

.wp-block-post-navigation-link a:hover {
	text-decoration: underline;
}

.wp-block-comment-template li {
	border-block-end: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-comment-template li:last-child {
	border-block-end: 0;
}

.wp-block-post-comments-form .comment-form input[type="text"],
.wp-block-post-comments-form .comment-form input[type="email"],
.wp-block-post-comments-form .comment-form input[type="url"],
.wp-block-post-comments-form .comment-form textarea {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.75rem 0.9rem;
	inline-size: 100%;
}

.wp-block-search__input {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem 0.9rem;
}

/* -------------------------------------------------------------------------
 * 7. Motion
 * ---------------------------------------------------------------------- */

.servnora-hover-lift {
	transition: box-shadow var(--wp--custom--transition--base), transform var(--wp--custom--transition--base);
}

.servnora-hover-lift:hover {
	box-shadow: var(--wp--preset--shadow--floating);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.servnora-hover-lift:hover,
	.servnora-post-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 8. Small screen corrections
 * ---------------------------------------------------------------------- */

@media (max-width: 599px) {
	/* Grids with a fixed column count keep that count at every width, so stack
	   them here to protect small screens. */
	.wp-block-group.is-layout-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-cover {
		padding-inline: var(--wp--preset--spacing--30);
	}

	.wp-block-buttons {
		gap: 0.75rem;
	}
}

/* Star rating row used by testimonial and review patterns. */
.servnora-star {
	color: var(--wp--preset--color--accent);
	display: inline-flex;
}

.servnora-rating {
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	gap: 0.15rem;
}


/* Small screen safeguards
   ========================================================================== */

/* Wide comparison tables scroll instead of pushing the page sideways. */
.wp-block-table {
	overflow-x: auto;
}

/* Search inputs must be allowed to shrink inside a flex row. */
.wp-block-search__input {
	min-width: 0;
}

@media (max-width: 599px) {
	.wp-block-table td,
	.wp-block-table th {
		padding-inline: 0.6rem;
	}
}


/* Links on dark surfaces
   Dark bands would otherwise inherit the global link colour, which does not
   carry enough contrast against a dark background.
   ========================================================================== */

.has-contrast-background-color a:where(:not(.wp-element-button)):not(.wp-block-button__link),
.has-primary-strong-background-color a:where(:not(.wp-element-button)):not(.wp-block-button__link),
.has-primary-background-color a:where(:not(.wp-element-button)):not(.wp-block-button__link),
.has-contrast-depth-gradient-background a:where(:not(.wp-element-button)):not(.wp-block-button__link),
.has-primary-depth-gradient-background a:where(:not(.wp-element-button)):not(.wp-block-button__link) {
	color: currentColor;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.has-contrast-background-color a:where(:not(.wp-element-button)):not(.wp-block-button__link):hover,
.has-primary-strong-background-color a:where(:not(.wp-element-button)):not(.wp-block-button__link):hover,
.has-primary-background-color a:where(:not(.wp-element-button)):not(.wp-block-button__link):hover,
.has-contrast-depth-gradient-background a:where(:not(.wp-element-button)):not(.wp-block-button__link):hover,
.has-primary-depth-gradient-background a:where(:not(.wp-element-button)):not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--accent);
}

.has-contrast-background-color .wp-block-navigation a:hover,
.has-contrast-depth-gradient-background .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}


/* Portrait images
   ========================================================================== */

.servnora-round-image img {
	border-radius: var(--wp--custom--radius--pill);
}