/*
Theme Name: Yritystensaattohoito
Theme URI: https://github.com/WP-SEO-AI-Agency/agency-theme-gutenberg
Author: WP SEO AI Web Agency
Author URI: https://github.com/WP-SEO-AI-Agency
Description: Yritystensaattohoito — client child theme of Agency Theme Gutenberg. Brand values are theme.json tokens, section types are block patterns, repeated looks are style variations, and the how-it-works accordion and contact form are core blocks.
Template: agency-theme-gutenberg
Version: 0.1.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yritystensaattohoito-blocks
Tags: block-theme, full-site-editing, block-patterns
*/

/*
 * Structural plumbing only — the rules a style variation cannot express
 * because they need a media query, an absolutely positioned decoration, or a
 * grid whose column ratio differs from the editor's own controls.
 *
 * Every selector is a core block element or a registered style variation the
 * client can reach in the editor. Looks stay in theme.json, block attributes
 * and styles/*.json.
 */

/* ------------------------------------------------------------------ shell */
/* The original header is a plain bar: the block theme's sticky wrapper would
   change the source's scroll behaviour, so the shell keeps zero block gap and
   each section carries its own padding. */
.wp-site-blocks > header.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

.wp-site-blocks header.wp-block-template-part {
	position: relative;
	z-index: 10;
}


/* An absolutely positioned figure inside a constrained block needs its own
   width, or the block layout's `max-width` makes it fill the column. */
.is-style-figure-badge > figure.wp-block-image {
	max-inline-size: none;
	flex: none;
}

.is-style-figure-badge > figure.wp-block-image img {
	max-inline-size: none;
}

/* ------------------------------------------------------------------- prose */
/* The source's `.wpsa-prose`: 1.5rem between blocks, 2.5rem above a heading,
   0.5rem between list items. The post content block renders the page's own
   document, so this is the theme's prose rhythm — a look the client reaches by
   editing the blocks inside it. */
.is-style-single-body .wp-block-post-content > * + * {
	margin-block-start: 1.5rem;
}

.is-style-single-body .wp-block-post-content :where(h2, h3, h4) {
	margin-block-start: 2.5rem;
}

.is-style-single-body .wp-block-post-content :where(ul, ol) {
	padding-inline-start: 1.4em;
	margin-block-end: 0;
}

.is-style-single-body .wp-block-post-content :where(li) + :where(li) {
	margin-block-start: 0.5rem;
}

/* The source's nav rows are list items whose line box is the body strut
   (16px x 1.65 = 26.4px), not the 15px link's own line height. Core makes the
   navigation item a flex container, so the strut has to be stated. */
.is-style-header-nav .wp-block-navigation-item {
	min-height: 1.65em;
}

/* The source's listing title: 33 -> 47px at weight 500, against the site's
   heavier display h1. */
.is-style-blog-head h1 {
	font-size: clamp(2.0625rem, 3vw + 0.6rem, 2.9375rem);
	font-weight: 500;
}

/* The 404's narrow column: the source's `.wpsa-container--narrow` is 736px with
   a 20px gutter, its text is centred, and its children step 1.5rem apart. */
.is-style-not-found {
	text-align: center;
	padding-inline: 0;
}

.is-style-not-found > .wp-block-heading,
.is-style-not-found > .wp-block-search,
.is-style-not-found > .wp-block-buttons,
.is-style-not-found > p {
	margin-inline: auto;
	max-inline-size: 46rem;
	padding-inline: var(--wp--custom--gutter);
}

.is-style-not-found > * + * {
	margin-block-start: 1.5rem;
}

.is-style-blog-head > * + * {
	margin-block-start: 1.5rem;
}

/* ------------------------------------------------------------ column ratios */
/* The source lays each pair out as a CSS grid with `fr` ratios, so a column is
   that share of the space left after the gap. Core's own columns layout sets a
   basis of its own, and a variation's `css` is wrapped in `:where()` (zero
   specificity), so the ratio is here, keyed to the registered variation the
   client picks in the editor. */



/* The source's section rhythm: an intro block sits 4rem above the grid it
   introduces, and each grid is the source's own ratio (above). */
.is-style-centred-intro + .wp-block-columns,
.is-style-centred-intro-wide + .wp-block-columns,
.is-style-how-columns > .wp-block-group + .wp-block-columns,
.is-style-band-surface > .wp-block-heading + .wp-block-columns,
.is-style-section-plain > .wp-block-heading + .wp-block-columns {
	margin-block-start: 4rem;
}

/* The what-we-do cards: an icon badge beside its heading and copy, 24px apart. */
.is-style-hero-split > .wp-block-column {
	flex-grow: 0;
}

.is-style-hero-split > .wp-block-column:first-child {
	flex-basis: calc((100% - 2.5rem) * 0.62);
}

.is-style-hero-split > .wp-block-column:last-child {
	flex-basis: calc((100% - 2.5rem) * 0.38);
}

.is-style-split-even > .wp-block-column {
	flex-grow: 0;
	flex-basis: calc((100% - 4rem) / 2);
}

.is-style-split-media > .wp-block-column {
	flex-grow: 0;
}

.is-style-split-media > .wp-block-column:first-child {
	flex-basis: calc((100% - 4rem) * 0.45);
}

.is-style-split-media > .wp-block-column:last-child {
	flex-basis: calc((100% - 4rem) * 0.55);
}

.is-style-split-why > .wp-block-column {
	flex-grow: 0;
}

.is-style-split-why > .wp-block-column:first-child {
	flex-basis: calc((100% - 2.5rem) * 0.35);
}

.is-style-split-why > .wp-block-column:last-child {
	flex-basis: calc((100% - 2.5rem) * 0.65);
}

.is-style-price-grid > .wp-block-column {
	flex-grow: 0;
	flex-basis: calc((100% - 50px) / 3);
}

.is-style-person-grid > .wp-block-column {
	flex-grow: 0;
	flex-basis: calc((100% - 2.5rem) / 2);
}

.is-style-how-columns > .wp-block-column {
	flex-grow: 0;
	flex-basis: calc((100% - 4rem) / 2);
}

/* ------------------------------------------------------- container widths */
/* The source's `.wpsa-container` is `max-width: 80rem` with a 40px gutter
   inside it, so the visible column is 1200px; each band names that as its
   `contentSize`, which the editor shows as the layout's width. */

/* --------------------------------------------------------------- header -- */
/* The source bar is 90px tall: its logo is 200px wide (73px tall) and the bar
   carries no vertical padding of its own. */
.is-style-header-bar .wp-block-site-logo img {
	width: clamp(150px, 14vw, 200px);
	height: auto;
}

.is-style-header-row {
	min-height: 90px;
}

/* The source's menu links take the body's own tracking (the computed 0.044rem
   of the site's 16px root), not a leading of their own. */
.is-style-header-nav .wp-block-navigation-item__content {
	font-size: 0.9375rem;
}

/* Below the source's 48rem breakpoint the bar stacks: logo on its own line,
   then the menu wrapped and centred — the design has no hamburger. */
@media (max-width: 781px) {
	/* The source's menu items step 1.5rem apart on small screens; the block's
	   own layout rule states the desktop 2.5rem, so the element selector is
	   deliberate. */
	nav.is-style-header-nav {
		gap: 1.5rem;
	}

	.is-style-header-row {
		flex-direction: column;
		align-items: center;
		gap: 1.5rem;
		min-block-size: 0;
		padding-block: 1rem;
	}

	.is-style-header-bar .wp-block-site-logo img {
		width: 150px;
	}

	.is-style-header-nav .wp-block-navigation__container {
		justify-content: center;
	}
}

/* --------------------------------------------------------------- footer -- */
.is-style-footer-bar {
	font-size: 0.9375rem;
}

.is-style-footer-bar .wp-block-site-logo img {
	width: clamp(160px, 15vw, 210px);
	height: auto;
}



/* -------------------------------------------------------------- hero ----- */
/* The decorative SVG sits top-right behind the heading, and the illustration
   column is 38 % of the container at >=62rem. A style variation cannot carry
   the media query or the absolute placement, so this is structural. */
.is-style-hero-decor {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: min(52%, 620px);
	opacity: 0.61;
	pointer-events: none;
	z-index: 0;
}

.is-style-hero-shell {
	position: relative;
	overflow: hidden;
}

.is-style-hero-shell > .wp-block-group {
	position: relative;
	z-index: 1;
}

/* The three selling points share one dark card; the icons are 22px and the
   copy is tighter than the theme's body size. */
.is-style-points-band .wp-block-column {
	gap: 1rem;
}

.is-style-points-band .wp-block-icon {
	inline-size: 22px;
	block-size: 22px;
	color: #ffffff;
}

.is-style-points-band h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.5;
}

.is-style-points-band p {
	margin-block-start: 0.5rem;
	font-size: 0.9375rem;
	color: rgb(255 255 255 / 88%);
}

/* ------------------------------------------------- who / what / why bands */
/* The who illustration carries a rounded label on its bottom-left corner; the
   figure-badge variation positions both. The label's own type is the source's. */
.is-style-badge {
	font-family: var(--wp--preset--font-family--accent);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.is-style-badge p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* The how-it-works accordions are a ruled list: the source puts a rule under
   the last item and 26px between items, and rotates the icon when open. */
.is-style-price-card .wp-block-separator {
	border-block-start-width: 1px;
	border-block-end-width: 0;
}

/* A price card's button belongs to the card, not to the section's CTA rhythm. */
.is-style-price-card .wp-block-buttons {
	margin-block-start: 1rem;
}

.is-style-how-columns .wp-block-accordion-heading__toggle-icon {
	color: var(--wp--preset--color--primary);
}

.is-style-how-columns .wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {
	transform: rotate(45deg);
}

/* The what-we-do cards are an icon badge beside a heading and its copy. */
.is-style-card-icon .wp-block-icon {
	inline-size: 26px;
	block-size: 26px;
}

.is-style-icon-badge {
	display: grid;
	place-items: center;
	inline-size: 58px;
	block-size: 58px;
	flex: none;
	border-radius: 50%;
}

.is-style-what-cards .wp-block-column {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1.5rem;
	align-items: start;
}

.is-style-what-cards h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
}

.is-style-what-cards p {
	margin-block-start: 0.5rem;
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- banner - */
.is-style-banner-decor {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: min(60%, 560px);
	pointer-events: none;
	z-index: 0;
}

.is-style-banner-shell {
	position: relative;
	overflow: hidden;
}

.is-style-banner-shell > .wp-block-group {
	position: relative;
	z-index: 1;
	max-inline-size: 62ch;
	margin-inline: auto;
	text-align: center;
}

/* --------------------------------------------------------------- how ------ */
/* Two ruled accordions side by side. The source's trigger is an 18px line with
   a plus icon on the right; the open first item's panel sits 16px below it. */
.is-style-how-columns .wp-block-accordion-heading__toggle {
	font-size: 1.125rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.65;
	padding: 0;
}



.is-style-how-columns .wp-block-accordion-panel {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--muted);
}

/* ----------------------------------------------------------------- price -- */
/* --------------------------------------------------------------- contact -- */
/* ------------------------------------------------------------------ form -- */
/* The source form is a two-column grid whose submit and status span both
   columns; the fields are underlined rather than boxed. */
.is-style-form-grid .wp-block-group {
	inline-size: 100%;
}

.is-style-form-grid .wp-block-form-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.is-style-form-field label {
	display: block;
	font-size: 0.9375rem;
}

.is-style-form-field input,
.is-style-form-field select,
.is-style-form-field textarea {
	inline-size: 100%;
	padding-block: 0.5rem;
	border: 0;
	border-block-end: 2px solid var(--wp--preset--color--line);
	border-radius: 1px;
	background: transparent;
	font: inherit;
	color: var(--wp--preset--color--contrast);
}

.is-style-form-field input:focus-visible,
.is-style-form-field select:focus-visible,
.is-style-form-field textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-block-end-color: var(--wp--preset--color--primary);
}

/* ------------------------------------------------------------------ blog -- */
.is-style-post-card {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.is-style-post-card:hover {
	transform: translateY(-2px);
}

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

.is-style-post-card .wp-block-post-title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.035em;
}

.is-style-post-card .wp-block-post-date {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.is-style-post-card .wp-block-post-excerpt {
	margin: 0;
	font-size: 0.9375rem;
}

.is-style-post-card .wp-block-post-excerpt__more-text {
	/* The source's card body is a flex column with a 0.5rem gap and its "read
	   more" line carries another 0.5rem of its own; inside `core/post-excerpt`
	   the line does not receive the flex gap, so the same 1rem sits above it. */
	margin-block-start: 1rem;
	font-weight: 500;
}

.is-style-post-card :where(.wp-block-post-title, .wp-block-post-excerpt__more-text) a {
	color: inherit;
	text-decoration: none;
}

.is-style-post-card .wp-block-post-excerpt__more-text a {
	color: var(--wp--preset--color--read-more);
}

/* Single post: the head and body looks live in their own variations. */

.is-style-single-body .wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius--md);
	inline-size: 100%;
	height: auto;
}

.is-style-post-nav {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	font-size: 0.9375rem;
}

/* The source's arrow is the last character of the link; core renders it as a
   sibling of the anchor, so both stay inline and share the line's text run. */
.is-style-post-nav .wp-block-post-navigation-link > a,
.is-style-post-nav .wp-block-post-navigation-link__arrow-next {
	display: inline;
}

/* Pagination matches the source's square numbers. */
.is-style-pager {
	justify-content: center;
	gap: 0.5rem;
}

.is-style-pager .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.is-style-pager .page-numbers {
	display: grid;
	place-items: center;
	min-inline-size: 2.4em;
	block-size: 2.4em;
	padding-inline: 0.5em;
	border-radius: var(--wp--custom--radius--sm);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.is-style-pager .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.is-style-pager .page-numbers:hover:not(.current) {
	background: var(--wp--preset--color--surface);
}

/* -------------------------------------------------------------- whatsapp -- */
.is-style-floating-action {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-end: 20px;
	z-index: 90;
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 50%;
	text-decoration: none;
}

.is-style-floating-action .wp-block-icon {
	inline-size: 30px;
	block-size: 30px;
	color: var(--wp--preset--color--base);
}

.is-style-floating-action:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* ----------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
	.is-style-post-card,
	.is-style-floating-action {
		transition: none;
	}
}

/* The source's footer meta steps 1.5rem below the tagline column; the block
   layout's own zeroing wins over a variation's `:where()` rule. */
.wp-block-column > .is-style-footer-meta {
	margin-block-start: 1.5rem;
}

/* The price card's rule: the source draws a 39% hairline, not a full-width one. */
.is-style-price-rule {
	inline-size: 39%;
	border: 0;
	border-block-start: 1px solid var(--wp--preset--color--line);
	margin-block: 0.5rem;
}

/* A collapsed accordion panel is hidden with `until-found`, which keeps its box
   in the layout: the panel's own step above the answer has to go with it. */
.is-style-how-columns .wp-block-accordion-panel[hidden] {
	padding-block-start: 0;
}

/* The source's centred intro columns: 70ch for a page intro, 75ch where the
   pricing grid follows. The block layout's own max-width beats a variation's
   `:where()` rule, so the width is stated here. */
.is-style-centred-intro,
.is-style-centred-intro-wide {
	margin-inline: auto;
	text-align: center;
}

.is-style-centred-intro {
	max-inline-size: 70ch;
}

.is-style-centred-intro-wide {
	max-inline-size: 75ch;
}

/* The how section's intro eyebrow is the source's 18px step, one down from the
   site's 20px section label. */
.is-style-how-columns .is-style-section-label {
	font-size: 1.125rem;
}

/* The accordion's plus is the source's 22px mark, 16px from the title; the
   title's own width is what decides how many lines a trigger takes. */
.is-style-how-columns .wp-block-accordion-heading__toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: 22px;
	block-size: 22px;
	margin-inline-start: 1rem;
	font-size: 1.375rem;
	line-height: 1;
}

/* The person card's name sits 1rem under the portrait, with or without one. */
.is-style-person-card > .wp-block-heading {
	margin-block-start: 1rem;
}

/* The source's body rule: grayscale antialiasing and legibility kerning, which
   are what every measured glyph on the site was drawn with. */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* The source centers the two sides of its paired sections vertically. The
   parent theme pins `align-items: normal !important` on `core/columns`, so each
   column carries its own alignment; the footer's pair starts instead. */
.is-style-hero-split > .wp-block-column,
.is-style-split-even > .wp-block-column,
.is-style-split-media > .wp-block-column,
.is-style-split-why > .wp-block-column {
	align-self: center;
}

.is-style-footer-bar .is-style-split-even > .wp-block-column {
	align-self: start;
}

/* An empty navigation link renders as an empty wrapper, and in a wrapping flex
   row that wrapper still costs a gap: the source has no element at all. */
.is-style-post-nav .wp-block-post-navigation-link:empty {
	display: none;
}

/* The source's single-post header is 62ch wide inside the 656px column, which
   is what decides how the title wraps; the block layout states the column
   width, so the narrower measure is here. */
.is-style-single-head {
	max-inline-size: 62ch;
}

/* The source's prose is a plain block: the block theme gives `core/post-content`
   its own formatting context (`flow-root`), which would keep the trailing empty
   paragraph's margin inside the column. */
.is-style-single-body .wp-block-post-content {
	display: block;
}