/*
 * Nomon Theme — base stylesheet, loaded on the frontend and inside the editor iframe.
 *
 * Tailwind handles reset and utilities; this file owns only what utilities can't express.
 * Responsibilities and the cascade smoke-test: docs/styling.md.
 */

/* Up front so layer order doesn't depend on when Blockstudio's inline style loads. Holds
 * only while Blockstudio emits layered utilities — smoke-test in docs/styling.md. */
@layer theme, base, components, utilities;

/* Unlayered on purpose: wrapping this ties with preflight's `body { line-height: inherit }`. */
body {
	font-size: var(--wp--preset--font-size--regular);
	line-height: 1.5;
}

/* WP's `size-full` marker collides with Tailwind's utility of that name; unlayered on
 * purpose so it beats the layered utility. See docs/styling.md. */
.wp-block-image.size-full {
	height: auto;
}

@layer base {
	/* Article text; UI copy sets its own size with `text-regular` / `text-small`. */
	body :where(p, .wp-block-list) { font-size: var(--wp--preset--font-size--regular); line-height: 1.8; }
	body :where(p, .wp-block-list) :is(strong, b) { font-weight: 600; }
	body p.has-large-font-size { line-height: 1.3; }
	body p { margin-block: 1.875rem; }
	body figure { margin-block: 1.875rem; }
	body figcaption { font-size: 1rem; }
	body :where(p, .wp-block-list) a { text-decoration: underline; }

	body :is(h1, h2, h3, h4, h5, h6) { font-weight: 600; line-height: 1.3; margin-block: var(--wp--preset--spacing--block) 1.875rem; overflow-wrap: break-word; hyphens: auto; }

	body h1 { font-size: var(--wp--preset--font-size--heading-1); font-weight: 700; line-height: 1.2; }
	body h2 { font-size: var(--wp--preset--font-size--heading-2); }
	body h3 { font-size: var(--wp--preset--font-size--heading-3); }
	body :is(h4, h5, h6) { font-size: var(--wp--preset--font-size--heading-4); }

	/* Stacked headings: any heading directly following another collapses its top margin. */
	body :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; }

	/* core/list block and classic-content lists: restore bullets/numbers and indent that Tailwind preflight zeroes. */
	:is(.wp-block-list, .site-content :is(ul, ol):not([class])) { margin-block: 1.875rem; padding-inline-start: 1em; }
	:is(.wp-block-list, .site-content :is(ul, ol):not([class])):where(ul) { list-style: disc; }
	:is(.wp-block-list, .site-content :is(ul, ol):not([class])):where(ol) { list-style: decimal; }
	:is(.wp-block-list, .site-content :is(ul, ol):not([class])) li { margin-top: 0.625rem; }
	:is(.wp-block-list, .site-content :is(ul, ol):not([class])) :where(li > *) { margin-block: 0.5rem; }
	:is(.wp-block-list, .site-content :is(ul, ol):not([class])) :where(li > :first-child) { margin-top: 0; }
	:is(.wp-block-list, .site-content :is(ul, ol):not([class])) :where(li > :last-child)  { margin-bottom: 0; }

	/* First/last reset: heading at top of a section, paragraph at end, don't push the container. */
	body :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
	body :is(p, .wp-block-list, .site-content :is(ul, ol):not([class])):last-child { margin-bottom: 0; }
}

/* Text column: 900px, centred, with the legacy extra side inset on narrow screens. Covers
 * every direct child of a content Group (atoms only, by the wrapping rule) and root atoms
 * in relaxed post types; `!important` matches WP's margin rule, two classes beat the editor's width. */
.wp-block-group > :not(.alignfull),
:is(.site-content, .block-editor-block-list__layout.is-root-container) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, blockquote, hr, .wp-block-nomon-buttons) {
	max-width: min(56.25rem, 100% - 2 * var(--prose-inset, 0px));
	margin-inline: auto !important;
}

/* Inside layout containers WP's blockGap (30px) spaces siblings with an unlayered rule;
 * headings need the block gap above, so this has to outrank it unlayered too. */
:is(.is-layout-constrained, .is-layout-flow) > :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
	margin-block-start: var(--wp--preset--spacing--block);
}
:is(.is-layout-constrained, .is-layout-flow) > :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
	margin-block-start: 0;
}

@media (max-width: 991px) {
	:root { --prose-inset: 1.25rem; }
}

@media (max-width: 478px) {
	:root { --prose-inset: 0.625rem; }
}

/* Auto-bleed, mirroring native `.alignfull`; `!important` matches WP's own margin rule. */
.has-global-padding > .wp-block-group.has-background {
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
	padding-left: var(--wp--style--root--padding-left);
	padding-right: var(--wp--style--root--padding-right);
}

/* Spacing controls are disabled in theme.json, so colored sections need a default. */
.wp-block-group.has-background {
	padding-block: clamp(2rem, 6vw, 4rem);
}

/* Descendants inherit this; add a sibling rule per dark swatch as the palette grows. */
.wp-block-group:is(.has-blue-background-color, .has-green-background-color) {
	color: var(--wp--preset--color--white);
}

/* Duplo gap; the owl selector leaves the first section flush with the page top. Scoped to
 * `core/group` as the only duplo — add block names when composite blocks join. */
.has-global-padding > .wp-block-group + .wp-block-group {
	margin-top: var(--wp--preset--spacing--region);
}

/* Page templates (#6, #7): hero → content 75px, hero → post image 50px. Unlayered at (0,3,0)
 * to beat WP's blockGap and the heading-margin rule above. */
.site-content > :is(.hero, .post-image) + :not(.post-image) {
	margin-block-start: var(--wp--preset--spacing--region);
}
.site-content > .hero + .post-image {
	margin-block-start: var(--wp--preset--spacing--block);
}

/* Icon-only share links: the screen-reader text stays, the glyph would break the circle. */
.share a.is-new-window::after {
	content: none;
}
/* End page templates. */

/* Content divider, the header and footer hairline: the Separator block and the kohde share row. */
:root { --divider: 1px solid var(--wp--preset--color--grey); }
.wp-block-separator {
	border: 0;
	border-top: var(--divider);
	opacity: 1;
}

/* Hero slider dots (#5, #19): 18px dot inside a 32px target (WCAG 2.5.8), so the dots sit 14px apart. */
.hero-slider__dots .swiper-pagination-bullet {
	box-sizing: content-box;
	border: 7px solid transparent;
	background-clip: padding-box;
}
.hero-slider__dots .swiper-pagination-bullet:focus-visible {
	outline: 3px solid var(--wp--preset--color--white);
	outline-offset: -4px;
}

/* Image links + image text (#10, #12): the section gap around them at root, beating WP's
 * unlayered blockGap. */
.has-global-padding > :is(.nomon-image-links, .nomon-image-text):not(:first-child, .hero + *),
.has-global-padding > :is(.nomon-image-links, .nomon-image-text) + * {
	margin-block-start: var(--wp--preset--spacing--region);
}
/* Editor-only: the Tailwind scan misses the `[&:has()]` column counts; the "+" sits on the last card's z-10 link overlay. */
.nomon-image-links__grid:has(.nomon-image-link:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nomon-image-links__grid:has(.nomon-image-link:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nomon-image-links__grid .block-list-appender { z-index: 20; }
/* End image links + image text. */

@layer base {
	html {
		scroll-behavior: smooth;
		scroll-padding-top: 150px;
	}

	@media (max-width: 1180px) {
		html { scroll-padding-top: 80px; }
	}

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

	/* Gutenberg can't hide these toolbar buttons, so cancel them; `:is()` outranks preflight's later `bolder`. */
	:is(h1, h2, h3, h4, h5, h6) :is(strong, b, em, i) {
		font-weight: inherit;
		font-style: inherit;
	}

	/* Same reason as above; the editor iframe loads this file too, so preview matches. */
	:is(p, h1, h2, h3, h4, h5, h6):is(
		.has-text-align-left,
		.has-text-align-center,
		.has-text-align-right
	) {
		text-align: inherit;
	}

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

	.skip-link:focus {
		clip-path: none;
		height: auto;
		margin: 0;
		overflow: auto;
		padding: 1rem;
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		width: auto;
		z-index: 100000;
		background: #000;
		color: #fff;
		text-decoration: underline;
	}

	/* WCAG 2.4.4: per-site CSS may restyle or hide the glyph, never the screen-reader text. */
	a.is-external-link::after,
	a.is-new-window::after {
		content: " ↗";
		display: inline-block;
		font-size: 0.85em;
		vertical-align: super;
		line-height: 1;
	}
	a.is-new-window::after {
		content: " ⧉";
	}
	a.is-external-link.is-new-window::after {
		content: " ⧉";
	}

	/* Hides the glyph in the footer and credit bar only; the screen-reader text stays. */
	:is(.site-footer, .nomon_footer) a.is-external-link::after,
	:is(.site-footer, .nomon_footer) a.is-new-window::after,
	:is(.site-footer, .nomon_footer) a.is-external-link.is-new-window::after {
		content: none;
	}
}

/* Critical Swiper layout before the lazy vendor CSS lands. No pre-init `visibility: hidden`
 * — that hid the hero from FlyingPress's above-the-fold pass, costing the LCP preload. */
.swiper { overflow: hidden; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex-shrink: 0; width: 100%; }
/* Overrides FlyingPress Lazy Render's inline style — see docs/runtimes.md. */
.swiper-slide,
.swiper-slide * { content-visibility: visible !important; }

/* Editor-only: flattens Gutenberg's InnerBlocks wrapper chain, which breaks parent flex/grid.
 * Unlayered to outrank editor styles; `:not([data-type])` spares a nested nomon block's own element. */
[data-type^="nomon/"] .block-editor-inner-blocks:not([data-type]),
[data-type^="nomon/"] .block-editor-block-list__layout:not([data-type]) {
	display: contents;
}

/* Editor-only: a drag saves the box's computed `aspectRatio`, which the ratio dropdown
 * cannot display or clear (`docs/integrations.md`). Selector length beats the components
 * stylesheet's own `.has-show-handle` rule at (0,3,0). */
[data-type="core/image"] .components-resizable-box__container.has-show-handle .components-resizable-box__handle {
	display: none;
}

/* Editor-only: makes the post title read as page metadata, not the first H1. No negative
 * inline margin needed — `useRootPaddingAwareAlignments` leaves body itself unpadded. */
/* WP core's editor styles add a top padding to the iframe body; zero it. */
body {
	padding-top: 0;
}

.edit-post-visual-editor__post-title-wrapper {
	background-color: #f0f0f0;
	color: #1e1e1e;
	margin-block-start: 0 !important;
	margin-block-end: 3rem;
	padding-inline: var(--wp--style--root--padding-left, clamp(1rem, 5vw, 5rem));
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title {
	color: inherit;
	margin: 0 auto;
	max-width: var(--wp--style--global--content-size, 1440px);
	padding-block: 3rem;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title::before {
	content: "Sivun otsikko";
	display: block;
	color: #666;
	font-size: 0.875rem;
	font-weight: 500;
	margin-block-end: 0.75rem;
}

.edit-post-visual-editor__post-title-wrapper .editor-post-title [data-rich-text-placeholder]::after {
	color: #666;
	opacity: 1;
}

:root {
	/* Must stay numeric: JS reads it via getComputedStyle for matchMedia. */
	--breakpoint-nav: 1180px;
}

.nav-toggle,
.nav-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 0 -6px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--black);
	cursor: pointer;
}
.nav-close { color: var(--wp--preset--color--blue); }

.hamburger,
.hamburger::before,
.hamburger::after {
	display: block;
	width: 32px;
	height: 3.2px;
	border-radius: 3.2px;
	background-color: currentColor;
}
.hamburger { position: relative; }
.hamburger::before,
.hamburger::after {
	content: "";
	position: absolute;
	left: 0;
}
.hamburger::before { top: -8px; }
.hamburger::after  { top: 8px; }
.nav-close .hamburger { background-color: transparent; }
.nav-close .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-close .hamburger::after  { top: 0; transform: rotate(-45deg); }

:is(.nav-toggle, .nav-close, .nav-primary a, .nav-primary .dropdown-toggle):focus-visible {
	outline: 3px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

body.js-nav-active { overflow: hidden; }

.nav-primary ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-primary .menu-item {
	position: relative;
	margin: 0;
}
.nav-primary .menu-item > :is(a, span) {
	color: inherit;
	text-decoration: none;
}
.nav-primary .menu-item > a:hover { text-decoration: underline; }
.nav-primary .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
}
.header-social a.is-external-link::after { content: none; }

@media (max-width: 1180px) {
	.nav-primary::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 100;
		background: rgb(0 0 0 / 0.5);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
	}
	.js-nav-active .nav-primary::before {
		opacity: 1;
		visibility: visible;
	}

	.nav-primary .menu-items-wrapper {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		bottom: 0;
		left: 0;
		z-index: 101;
		width: 300px;
		max-width: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 30px 20px 40px;
		background: var(--wp--preset--color--white);
		transform: translateX(-100%);
		visibility: hidden;
		transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1), visibility 0s 0.3s;
	}
	.js-nav-active .nav-primary .menu-items-wrapper {
		transform: none;
		visibility: visible;
		transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
	}

	.nav-close { margin-block: -11px 11px; }

	.nav-primary .menu-items {
		color: var(--wp--preset--color--blue);
		font-size: 20px;
		font-weight: 400;
		line-height: 1.5;
	}
	.nav-primary .menu-item > :is(a, span) {
		display: block;
		padding: 10px 50px 10px 0;
	}
	.nav-primary .sub-menu {
		display: none;
		padding-left: 20px;
		font-size: 16px;
	}
	.nav-primary .sub-menu.toggled-on { display: block; }

	.nav-primary .dropdown-toggle {
		position: absolute;
		top: 10px;
		right: 0;
		width: 40px;
		height: 1.7em;
	}
	.nav-primary .dropdown-toggle svg {
		width: 12px;
		height: 12px;
		transition: rotate 0.1s;
	}
	.nav-primary .dropdown-toggle.toggled-on svg { rotate: 180deg; }

	.drawer-extras { margin-top: 20px; }
}

@media (max-width: 767px) {
	.nav-toggle { color: var(--wp--preset--color--blue); }
}

@media (min-width: 1181px) {
	.nav-close { display: none; }

	.nav-primary {
		border-top: 1px solid var(--wp--preset--color--grey);
		padding: 10px 20px;
		box-shadow: 0 4px 5px 0 rgb(0 0 0 / 0.11);
	}

	.nav-primary .menu-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		/* Narrowed between 1181 and ~1300 so the FI row still fits on one line. */
		column-gap: min(60px, (100vw - 1040px) / 5);
		max-width: 1440px;
		margin-inline: auto;
		color: var(--wp--preset--color--black);
		font-size: 20px;
		font-weight: 500;
		line-height: 1.5;
		text-transform: uppercase;
	}
	.nav-primary .menu-item {
		display: flex;
		align-items: center;
		gap: 6px;
	}
	.nav-primary .menu-item > :is(a, span) { white-space: nowrap; }

	/* Mouse clicks fall through to the label; Enter/Space on the focused toggle still fire. */
	.nav-primary .dropdown-toggle { pointer-events: none; }
	.nav-primary .dropdown-toggle svg {
		width: 12px;
		height: 12px;
	}

	.nav-primary .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 150px;
		width: max-content;
		background: var(--wp--preset--color--white);
		font-size: 18px;
		font-weight: 400;
		line-height: 60px;
		text-transform: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.1s, visibility 0s 0.1s;
	}
	.nav-primary .sub-menu .menu-item { gap: 0; }
	.nav-primary .sub-menu .menu-item > :is(a, span) {
		flex: 1;
		padding: 0 20px;
	}
	.nav-primary .sub-menu a:focus-visible { outline-offset: -3px; }
	.nav-primary .sub-menu .dropdown-toggle { margin-right: 20px; }
	.nav-primary .sub-menu .dropdown-toggle svg {
		width: 14px;
		height: 14px;
	}
	.nav-primary .sub-menu .sub-menu {
		top: 0;
		left: 100%;
	}

	.nav-primary .sub-menu.is-out-of-viewport { left: auto; right: 0; }
	.nav-primary .sub-menu.is-out-of-viewport .sub-menu,
	.nav-primary .sub-menu .sub-menu.is-out-of-viewport { left: auto; right: 100%; }

	/* .hover-intent (JS) keeps a menu open briefly after the cursor leaves; .is-closed is Esc. */
	.nav-primary .menu-item-has-children:is(:hover, :focus-within, .hover-intent):not(.is-closed) > .sub-menu {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.1s;
	}
	.nav-primary .is-closed > .sub-menu { transition: none; }
}

/* Social feed and WS Form (#13, #14). */
.has-global-padding > * + .nomon-social-feed {
	margin-block-start: var(--wp--preset--spacing--region);
}

/* The tile and icon links keep their screen-reader notice; the glyph would break the grid. */
.nomon-social-feed a:is(.is-new-window, .is-external-link)::after {
	content: none;
}

.nsoc-media:focus-visible {
	outline: 3px solid var(--wp--preset--color--blue);
	outline-offset: -3px;
}

/* Theme prose rules would restyle the overlay caption and counts (legacy override). */
.nsoc-feed :is(p, ul, li) {
	margin: 0;
	padding: 0;
	font-size: var(--nsoc-feed-font-size-sm);
	line-height: 1.5;
}
/* WS Form: the plugin's style variables sit in a zero-specificity `:where()`, so `.wsf-form` wins. */
.wsf-form {
	--wsf-form-font-size: 1.125rem;
	--wsf-form-font-size-small: 1rem;
	--wsf-form-font-size-large: 1.25rem;
	--wsf-form-line-height: 1.5;
	--wsf-form-color-primary: var(--wp--preset--color--blue);
	--wsf-form-color-accent: var(--wp--preset--color--blue);
	--wsf-field-border-radius: 0;
	--wsf-field-padding-vertical: 10px;
	--wsf-field-padding-horizontal: 12px;
	--wsf-field-label-font-size: 1rem;
	--wsf-field-label-font-weight: 500;
	--wsf-field-help-color: var(--wp--preset--color--black);
	--wsf-field-color-placeholder: #595959;
	--wsf-field-border-color-focus: var(--wp--preset--color--blue);
	--wsf-field-box-shadow: 0 0 0 2px var(--wp--preset--color--blue);
	--wsf-field-fieldset-legend-font-size: 1.25rem;
	--wsf-field-fieldset-legend-font-weight: 600;
	--wsf-field-file-dropzonejs-color-background: var(--wp--preset--color--grey);
	--wsf-field-button-font-size: 1.125rem;
	--wsf-field-button-font-weight: 600;
	--wsf-field-button-line-height: 1.5;
	--wsf-field-button-letter-spacing: 0.5px;
	--wsf-field-button-border-width: 2px;
	--wsf-field-button-border-radius: 50px;
	--wsf-field-button-padding-vertical: 12px;
	--wsf-field-button-padding-horizontal: 35px;
	--wsf-field-button-primary-color-background-hover: transparent;
	--wsf-field-button-primary-border-color-hover: var(--wp--preset--color--blue);
	--wsf-field-button-primary-color-hover: var(--wp--preset--color--blue);
	--wsf-field-button-primary-color-background-focus: var(--wp--preset--color--blue);
	--wsf-field-button-primary-border-color-focus: var(--wp--preset--color--blue);
}

/* The #4 pill: content width from md up, the legacy full width below. */
@media (min-width: 768px) {
	.wsf-form {
		--wsf-field-button-width: auto;
	}
}
@media (max-width: 478px) {
	.wsf-form {
		--wsf-field-button-font-size: 1rem;
		--wsf-field-button-padding-horizontal: 25px;
	}
}
.wsf-form button.wsf-button.wsf-button-primary:focus-visible {
	box-shadow: none;
	outline: 3px solid var(--wp--preset--color--blue);
	outline-offset: 2px;
}

.wsf-form :is([data-row-radio], [data-row-checkbox]) > label.wsf-label {
	font-weight: 400;
}

/* Made focusable by inc/integrations/ws-form.php. */
.wsf-form .dropzone:focus-visible {
	border-color: var(--wsf-field-border-color-focus);
	box-shadow: var(--wsf-field-box-shadow);
	outline: 0;
}
/* End social feed and WS Form. */