/*
Theme Name: SimplyServices Tech
Theme URI: https://dnaie.com
Author: JustSimplyDnaie
Author URI: https://dnaie.com
Update URI: https://dnaie.com/themes/simplyservices-tech
Description: Dark block theme for SimplyServices Tech (dnaie.com): tech support, VM hosting, a WooCommerce shop and a project portfolio. Deep navy surfaces, electric blue accents, self-hosted Inter and JetBrains Mono.
Version: 2.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simplyservices-tech
Tags: full-site-editing, block-patterns, e-commerce, portfolio, custom-colors, wide-blocks, one-column
*/

/* ========================================================================
   Contents
   0.  Foundations
   1.  Compatibility aliases
   2.  Header
   3.  Page sections and gutters
   4.  Typography
   5.  Links and navigation
   6.  Buttons
   7.  Cards and surfaces
   8.  Images
   9.  Hero
   10. Section utilities
   11. Footer
   12. Separators
   13. Forms
   14. Mobile menu
   15. Post lists, search and 404
   16. Query loop layouts
   17. Small screens
   18. Selection, scrollbars, focus
   ======================================================================== */

/* ========================================================================
   0. Foundations
   ======================================================================== */

:root {
	--sst-gutter: clamp(1.5rem, 5vw, 4rem);
	--sst-radius: 12px;
	--sst-radius-sm: 8px;
	--sst-glow: 0 0 40px rgba(21, 84, 212, 0.08), 0 8px 32px rgba(0, 0, 0, 0.3);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--wp--custom--scroll-padding-top, 88px);
}

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

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* ========================================================================
   1. Compatibility aliases

   The palette colour used for hairlines was originally called "border".
   WordPress turns every palette colour into a text-colour class, so that
   produced `.has-border-color { color: <navy> !important }`, which is also
   the class WordPress puts on any block with a custom border. Result: the
   text of every bordered card and outline button turned dark navy on a
   dark navy background.

   The colour is now called "line". These aliases keep existing content
   that still refers to the old name looking the same.
   ======================================================================== */

:root {
	--wp--preset--color--border: var(--wp--preset--color--line);
}

.has-border-background-color {
	background-color: var(--wp--preset--color--line) !important;
}

.has-border-border-color {
	border-color: var(--wp--preset--color--line) !important;
}

/* ========================================================================
   2. Header
   ======================================================================== */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* The header bar. It uses the "surface" colour, so it is excluded from the
   card treatment in section 7. */
.site-header {
	border-radius: 0;
}

/* Logo on the left, everything else grouped on the right. Works whatever
   blocks are added to the header row (menu, account icon, cart). */
.site-header > .wp-block-group {
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.site-header > .wp-block-group > :first-child {
	margin-inline-end: auto;
}

.site-header > .wp-block-group > * {
	flex-shrink: 0;
}

.site-header .wp-block-image,
.site-header .wp-block-site-logo {
	margin: 0;
	line-height: 0;
}

.site-header .wp-block-image img,
.site-header .wp-block-site-logo img {
	border-radius: 0;
	max-height: 44px;
	width: auto;
}

@media (max-width: 480px) {
	.site-header .wp-block-image img,
	.site-header .wp-block-site-logo img {
		max-width: 46vw;
		height: auto !important;
	}
}

/* ========================================================================
   3. Page sections and gutters
   ======================================================================== */

/* No gap between the header, the page body and the footer, and the footer
   sits at the bottom of the window even on short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.wp-site-blocks > * {
	margin-block-start: 0;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

/* Landing sections (the full-width bands that the menu links jump to).
   Tall enough to feel like a screen of their own, without leaving a mostly
   empty viewport when a section only holds a heading and a button. */
.wp-site-blocks .alignfull[id] {
	min-height: min(72vh, 44rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.wp-site-blocks .alignfull[id="signup"],
.wp-site-blocks .alignfull[id="contact"],
.wp-site-blocks .alignfull[id="about"],
.wp-site-blocks .alignfull[id="contact-hosting"] {
	min-height: 0;
}

.wp-site-blocks .alignfull[id] > * {
	width: 100%;
}

/* Full-width bands whose own side padding is zero. Their content used to run
   edge to edge because "wide" alignment does nothing inside a plain group.
   Give that content the wide width and the page gutter instead. */
.wp-block-post-content > .wp-block-group.alignfull[style*="padding-right:0;"] > :not(.alignfull, .has-global-padding) {
	width: min(100% - 2 * var(--sst-gutter), var(--wp--style--global--wide-size));
	max-width: none;
	margin-inline: auto;
}

/* Inner groups that already carry the page gutter only need the width cap. */
.wp-block-post-content > .wp-block-group.alignfull[style*="padding-right:0;"] > .has-global-padding:not(.alignfull) {
	max-width: calc(var(--wp--style--global--wide-size) + 2 * var(--sst-gutter));
	margin-inline: auto;
}


/* Plain pages (no full-width hero as their first block) get breathing room
   under the header and above the footer. */
body.page:not(.page-template-page-with-title) main > .wp-block-post-content > :first-child:not(.alignfull) {
	margin-block-start: var(--wp--preset--spacing--60);
}

body.page:not(.page-template-page-with-title) main > .wp-block-post-content > :last-child:not(.alignfull) {
	margin-block-end: var(--wp--preset--spacing--70);
}

/* Marker on the section a menu link just jumped to. */
.wp-site-blocks .alignfull[id]:target {
	box-shadow: inset 4px 0 0 var(--wp--preset--color--primary);
}

/* ========================================================================
   4. Typography
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

h1 { line-height: 1.08; }
h2 { line-height: 1.12; }
h3 { line-height: 1.18; }

p,
li {
	text-wrap: pretty;
}

.has-mono-font-family {
	letter-spacing: 0.02em;
}

.is-style-section-label,
h6 {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
}

/* ========================================================================
   5. Links and navigation
   ======================================================================== */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s ease;
}

.wp-block-navigation a {
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.wp-block-navigation .wp-block-navigation-item__content {
	border-radius: 6px;
	padding: 0.4rem 0.75rem;
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--text);
	background: rgba(21, 84, 212, 0.14);
}

/* Underline under the menu item for the section currently on screen
   (the class is set by assets/js/theme.js). */
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--accent-pill-text);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s ease;
}

.wp-block-navigation .wp-block-navigation-item__content.is-active,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

.wp-block-navigation .wp-block-navigation-item__content.is-active::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-navigation .wp-block-navigation-item__content::after {
		transition: none;
	}
}

/* ========================================================================
   6. Buttons
   ======================================================================== */

.wp-block-button .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
	letter-spacing: -0.005em;
	cursor: pointer;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: none;
}

.wp-block-button .wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(21, 84, 212, 0.3);
}

.wp-block-button .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: 0 1px 4px rgba(21, 84, 212, 0.2);
}

/* A button with no link set renders as an <a> without href. Don't make it
   look clickable. */
.wp-block-button a.wp-block-button__link:not([href]) {
	cursor: default;
	opacity: 0.6;
	transform: none;
	box-shadow: none;
}

/* Outline (ghost) button */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--heading);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text) !important;
}

/* Compact call-to-action button inside the menu */
.wp-block-navigation .wp-block-button .wp-block-button__link {
	padding: 0.45rem 1.15rem;
	font-size: var(--wp--preset--font-size--small);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button .wp-block-button__link:hover {
		transform: none;
	}
}

/* ========================================================================
   7. Cards and surfaces
   ======================================================================== */

/* Boxes filled with a surface colour get the card look, except the header
   and the full-width page bands, which share those colours. */
.has-surface-background-color:not(.alignfull, .site-header),
.has-surface-alt-background-color:not(.alignfull, .site-header) {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--sst-radius);
}

/* Full-width bands: hairlines top and bottom only. */
.wp-block-post-content .alignfull.has-surface-background-color,
.wp-block-post-content .alignfull.has-surface-alt-background-color {
	border-block: 1px solid var(--wp--preset--color--line);
}

/* Hover lift, only for real cards: a box sitting in a column or a post list. */
:is(.wp-block-column, .wp-block-post) > :is(.has-surface-background-color, .has-surface-alt-background-color),
article:is(.has-surface-background-color, .has-surface-alt-background-color) {
	transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

:is(.wp-block-column, .wp-block-post) > :is(.has-surface-background-color, .has-surface-alt-background-color):hover,
article:is(.has-surface-background-color, .has-surface-alt-background-color):hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: var(--sst-glow);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	:is(.wp-block-column, .wp-block-post) > :is(.has-surface-background-color, .has-surface-alt-background-color):hover,
	article:is(.has-surface-background-color, .has-surface-alt-background-color):hover {
		transform: none;
	}
}

/* Rows of cards with the same height, with their button pinned to the bottom
   ("equal-cards" on the Columns block, "cta-bottom" on the Buttons block). */
.equal-cards > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.equal-cards > .wp-block-column > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.equal-cards .cta-bottom {
	margin-top: auto !important;
	padding-top: var(--wp--preset--spacing--40);
}

/* ========================================================================
   8. Images
   ======================================================================== */

.wp-block-cover img,
.wp-block-image img {
	border-radius: var(--sst-radius-sm);
}

.wp-block-image img {
	height: auto;
}

/* Card images sit slightly muted and wake up on hover. */
:is(.wp-block-column, .wp-block-post) > :is(.has-surface-background-color, .has-surface-alt-background-color) .wp-block-image img {
	filter: saturate(0.75) brightness(0.88);
	transition: filter 0.4s ease;
}

:is(.wp-block-column, .wp-block-post) > :is(.has-surface-background-color, .has-surface-alt-background-color):hover .wp-block-image img {
	filter: none;
}

.wp-block-cover::after {
	border-radius: inherit;
}

.wp-block-post-featured-image img {
	border-radius: inherit;
}

/* ========================================================================
   9. Hero
   ======================================================================== */

/* The hero fills the first screen; keep its content in the middle of it. */
.hero-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}

.hero-section > * {
	width: 100%;
}

.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--accent-pill-bg);
	color: var(--wp--preset--color--accent-pill-text);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	padding: 0.4rem 0.9rem;
	border-radius: 20px;
	width: fit-content;
	letter-spacing: 0.03em;
}

.hero-badge-dot {
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--accent-pill-text);
	border-radius: 50%;
	display: inline-block;
}

.hero-services-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-dim);
	letter-spacing: 0.04em;
}

.hero-services-strip span {
	padding: 0.3rem 0.65rem;
	background: rgba(21, 84, 212, 0.08);
	border: 1px solid rgba(21, 84, 212, 0.25);
	border-radius: 4px;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.hero-services-strip span:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--accent-pill-text);
}

.hero-image-frame {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(21, 84, 212, 0.2);
	box-shadow:
		0 0 0 1px rgba(21, 84, 212, 0.05),
		0 8px 32px rgba(0, 0, 0, 0.4),
		0 0 120px rgba(21, 84, 212, 0.08);
}

.hero-image-frame::after {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	right: -1px;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark), var(--wp--preset--color--primary));
	z-index: 3;
	border-radius: 16px 16px 0 0;
}

.hero-image-frame img {
	opacity: 0.55;
	filter: saturate(0.7) brightness(0.8);
}

.stat-card {
	background: rgba(11, 22, 40, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(21, 84, 212, 0.2);
	border-radius: 8px;
	padding: 0.75rem 0.9rem;
}

.stat-card-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	color: var(--wp--preset--color--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.25rem;
}

.stat-card-value {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--wp--preset--color--text);
}

.stat-card-value span {
	color: var(--wp--preset--color--accent-pill-text);
}

.hero-bg-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.hero-bg-layer::before {
	content: "";
	position: absolute;
	top: 15%;
	right: 10%;
	width: 900px;
	height: 900px;
	background: radial-gradient(circle, rgba(16, 64, 160, 0.35) 0%, rgba(16, 64, 160, 0.08) 40%, transparent 70%);
	border-radius: 50%;
}

.hero-bg-layer::after {
	content: "";
	position: absolute;
	bottom: -10%;
	left: -5%;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(10, 58, 138, 0.2) 0%, transparent 60%);
	border-radius: 50%;
}

.hero-grid-pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.04;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(21, 84, 212, 1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(21, 84, 212, 1) 1px, transparent 1px);
	background-size: 60px 60px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, black 20%, transparent 80%);
	mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, black 20%, transparent 80%);
}

.hero-vertical-accent {
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 3px;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--primary), var(--wp--preset--color--primary-dark), transparent);
	z-index: 1;
	border-radius: 2px;
}

.hero-corner-detail {
	position: absolute;
	top: 2rem;
	right: 2rem;
	z-index: 1;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.65rem;
	color: var(--wp--preset--color--watermark);
	text-align: right;
	line-height: 1.8;
	letter-spacing: 0.05em;
}

/* ========================================================================
   10. Section utilities
   ======================================================================== */

/* Small pill above a section heading ("01 // SUPPORT"). */
.section-overline {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--accent-pill-text);
	background: var(--wp--preset--color--accent-pill-bg);
	padding: 0.35rem 0.85rem;
	border-radius: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* A centred pill has to be centred as a box, not just have centred text. */
.section-overline.has-text-align-center {
	margin-inline: auto !important;
}

.section-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--primary), transparent);
	opacity: 0.35;
	border: none;
	margin-block: 0;
}

.woo-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--accent-pill-text);
	background: var(--wp--preset--color--accent-pill-bg);
	padding: 0.3rem 0.7rem;
	border-radius: 4px;
	letter-spacing: 0.03em;
}

/* ========================================================================
   11. Footer
   ======================================================================== */

.wp-site-blocks > footer.wp-block-template-part {
	border-top: 1px solid var(--wp--preset--color--line);
}

footer.wp-block-template-part a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--text-secondary);
	text-decoration: none;
}

footer.wp-block-template-part a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--heading);
}

footer.wp-block-template-part .wp-block-site-logo img,
footer.wp-block-template-part .wp-block-image img {
	border-radius: 0;
}

footer.wp-block-template-part .wp-block-site-title {
	margin: 0;
}

.footer-watermark {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--watermark);
	letter-spacing: 0.02em;
}

/* ========================================================================
   12. Separators
   ======================================================================== */

.wp-block-separator {
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide, .is-style-dots, .alignfull, .alignwide) {
	max-width: 100px;
}

.wp-block-separator.is-style-wide {
	max-width: 100%;
}

/* ========================================================================
   13. Forms

   :where() keeps these at zero specificity, so they dress plain form
   fields (search, comments, classic WooCommerce forms) without fighting
   components that bring their own styling, such as the WooCommerce
   checkout blocks.
   ======================================================================== */

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], textarea, select) {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--text);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--sst-radius-sm);
	padding: 0.7rem 1rem;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	max-width: 100%;
}

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], input[type="search"], textarea, select):focus {
	outline: 2px solid transparent;
	border-color: var(--wp--preset--color--accent-pill-text);
	box-shadow: 0 0 0 3px rgba(90, 154, 238, 0.25);
}

:where(input, textarea)::placeholder {
	color: var(--wp--preset--color--text-dim);
	opacity: 1;
}

:where(select) {
	color-scheme: dark;
}

.wp-block-search__label,
.comment-form label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	color: var(--wp--preset--color--text-secondary);
	display: block;
	margin-bottom: 0.4rem;
}

.wp-block-search__input,
.comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
}

/* ========================================================================
   14. Mobile menu
   ======================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
}

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

.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--30);
}

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

/* ========================================================================
   15. Post lists, search and 404
   ======================================================================== */

.sst-page-head {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
}

.sst-post-card {
	height: 100%;
}

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

.sst-error-code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(4rem, 14vw, 9rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	background: linear-gradient(180deg, var(--wp--preset--color--accent-pill-text), var(--wp--preset--color--primary-dark));
	-webkit-background-clip: text;
	background-clip: text;
	margin: 0;
}

.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
}

.wp-block-query-pagination a,
.wp-block-query-pagination .current {
	padding: 0.35rem 0.7rem;
	border-radius: 6px;
	text-decoration: none;
}

.wp-block-query-pagination .current {
	background: var(--wp--preset--color--accent-pill-bg);
	color: var(--wp--preset--color--text);
}

/* Project page: the web address under the title */
.sst-project-link a {
	word-break: break-all;
}

/* ========================================================================
   16. Query loop layouts ("is-style-loop-*" on the Query Loop block)
   ======================================================================== */

.wp-block-query.is-style-loop-rail .wp-block-post-template {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--wp--preset--spacing--20);
}

.wp-block-query.is-style-loop-rail .wp-block-post-template > * {
	flex: 0 0 min(320px, 80vw);
	scroll-snap-align: start;
	margin-block-start: 0;
}

.wp-block-query.is-style-loop-list .wp-block-post-template > * {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--30);
}

.wp-block-query.is-style-loop-list .wp-block-post-template > *:last-child {
	border-bottom: 0;
}

/* Zigzag: flip image and text on every second entry (side by side only). */
@media (min-width: 782px) {
	.wp-block-query.is-style-loop-zigzag .wp-block-post-template > *:nth-child(even) .wp-block-columns {
		flex-direction: row-reverse;
	}
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template {
	position: relative;
	padding-inline-start: 2.5rem;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0.5rem;
	width: 2px;
	background: var(--wp--preset--color--line);
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template > * {
	position: relative;
}

.wp-block-query.is-style-loop-timeline .wp-block-post-template > *::before {
	content: "";
	position: absolute;
	inset-inline-start: -2.25rem;
	inset-block-start: 0.6rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: var(--wp--preset--color--background);
}

.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
	grid-column: span 2;
}

@media (max-width: 600px) {
	.wp-block-query.is-style-loop-magazine .wp-block-post-template > *:first-child {
		grid-column: auto;
	}
}

/* ========================================================================
   17. Small screens
   ======================================================================== */

@media (max-width: 900px) {
	.hero-corner-detail,
	.hero-vertical-accent {
		display: none;
	}

	.hero-image-frame img {
		opacity: 0.5;
		filter: saturate(0.6) brightness(0.75);
	}
}

@media (max-width: 600px) {
	/* Full-width, stacked buttons in page content. Scoped to <main> so the
	   header and footer buttons keep their natural size. */
	main .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	main .wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	main .wp-block-buttons > .wp-block-button .wp-block-button__link {
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.hero-services-strip span {
		font-size: 0.65rem;
		padding: 0.25rem 0.5rem;
	}

	.hero-image-overlay-stats {
		display: none;
	}

	.wp-site-blocks .alignfull[id] {
		min-height: 0;
	}
}

/* ========================================================================
   18. Selection, scrollbars, focus
   ======================================================================== */

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--text);
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) var(--wp--preset--color--background);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-pill-text);
	outline-offset: 2px;
}

.wp-block-button .wp-block-button__link:focus-visible {
	outline-offset: 3px;
	box-shadow: 0 0 0 4px rgba(90, 154, 238, 0.3);
}