/*
 * jost-snoj theme baseline styles.
 *
 * Design tokens (color, type) come from theme.json and are consumed here
 * exclusively via the CSS custom properties WordPress generates from it
 * (--wp--preset--color--*, --wp--preset--font-family--*) — no hex/font
 * literals in this file. Per docs/17_VISUAL_DESIGN.md "Hard rules" #1.
 */

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

body {
	margin: 0;
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--text);
	line-height: 1.5;
}

img {
	max-width: 100%;
	height: auto;
}

.skip-link {
	position: absolute;
	top: -999px;
	left: 0;
	z-index: 1000;
	padding: 0.75em 1.25em;
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	text-decoration: none;
}

.skip-link:focus {
	top: 0;
}

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

.screen-reader-text:focus {
	background-color: var(--wp--preset--color--surface);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--foreground);
	display: block;
	height: auto;
	width: auto;
	padding: 15px 23px 14px;
	position: absolute;
	top: 5px;
	left: 5px;
	line-height: normal;
}

/*
 * Keyboard-visible focus baseline (WCAG 2.2 AA).
 * docs/17_VISUAL_DESIGN.md "Hard rules" #4: 2px accent outline, offset 2px.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/*
 * Buttons — canonical v2 button component (docs/17 "v2 key changes":
 * OUTLINE by default — 1px ink border, uppercase label type, hover fills/
 * inverts to a solid ink block — plus a `--solid` variant for primary CTAs,
 * which hovers to `accent-ink` instead of inverting again). This is the
 * sitewide button API going forward; it lives here (style.css) because it
 * is a global element per this task, not page content. Existing per-
 * template CTAs (front-page.css `.jost-snoj-hero__cta`, content.css
 * `.jost-snoj-cta-button`, single-artwork.css `.jost-snoj-enquiry__toggle`)
 * still carry their own pre-v2 solid-block CSS today — those stylesheets
 * are each scoped to, and load only on, one specific template tied to its
 * own separately tracked task (see inc/enqueue.php's docblocks and docs/17's
 * "#55"/"#56" references), so migrating their markup to `.jost-snoj-btn` is
 * out of this task's scope ("IZVEN OBSEGA: posamezne strani"). New/updated
 * global chrome should use these classes directly.
 */
.jost-snoj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.95rem 1.9rem;
	border: 1px solid var(--wp--preset--color--foreground);
	background-color: transparent;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.jost-snoj-btn:hover,
.jost-snoj-btn:focus-visible {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

/* Solid variant: primary CTA (e.g. single-artwork "Enquire", contact
 * "Send message") — filled from the start, hovers to `accent-ink` rather
 * than inverting again. */
.jost-snoj-btn--solid {
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
}

.jost-snoj-btn--solid:hover,
.jost-snoj-btn--solid:focus-visible {
	background-color: var(--wp--preset--color--accent-ink);
	border-color: var(--wp--preset--color--accent-ink);
	color: var(--wp--preset--color--background);
}

/*
 * Header (header.php): text wordmark left, Catalogue/About/Contact right.
 * docs/17_VISUAL_DESIGN.md "Header / footer". Mobile-first: base rules are
 * the collapsed (mobile) state; the min-width query below is the only
 * place the nav becomes a plain inline row (agency standard — min-width
 * queries widen up, no max-width cascades).
 */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
	padding: 16px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.site-branding {
	min-width: 0;
}

.site-wordmark {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
}

.site-wordmark a {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}

.site-wordmark a:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Groups the primary nav + language switcher together on the right so
 * `.site-header`'s `space-between` still resolves to a simple two-item row
 * (branding <-> controls), whether or not the switcher renders (Polylang
 * inactive/only 1 language — `jost_snoj_render_language_switcher()` is a
 * no-op then, and this wrapper just collapses to the nav's own width).
 */
.site-header-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.main-navigation {
	position: relative;
}

/*
 * Text-button mobile toggle (no hamburger icon libraries, docs/17): the
 * native <details>/<summary> disclosure needs no JS to open/close, so the
 * menu works even with JavaScript disabled (assets/js/main.js only adds
 * Escape/click-outside closing on top). The marker triangle is removed so
 * <summary> reads as plain text, per the "brez ikon" requirement.
 */
.menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	min-width: 44px;
	padding: 8px 12px;
	list-style: none;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
}

.menu-toggle::-webkit-details-marker {
	display: none;
}

.menu-toggle:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Expanded panel is positioned as an overlay, not inline content, so
 * opening it never pushes the rest of the page down (agency standard,
 * "odpiranje brez poskakovanja layouta").
 */
.primary-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	/* >=8px gap between adjacent tap targets, even stacked (agency
	 * standard) — overridden to a row gap at the desktop breakpoint
	 * below, where it also supplies the row's own item spacing. */
	gap: 8px;
	min-width: 200px;
	margin: 4px 0 0;
	padding: 8px;
	list-style: none;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.primary-menu .menu-item {
	margin: 0;
}

.primary-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 12px;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.primary-menu a:hover {
	color: var(--wp--preset--color--foreground);
}

/*
 * Active item: ink colour + an ochre underline, not colour alone (agency
 * standard). docs/17/the v2 mockup draw this as a `border-bottom` sitting
 * right under the label — but this link is a flex box stretched to a 44px
 * tap target (WCAG 2.2 target-size), so a `border-bottom` on the box itself
 * would land ~15px below the glyphs, not hugging them as in the mockup.
 * `text-decoration` is anchored to the text baseline regardless of the
 * box's height, so it reproduces the mockup's actual rendered look (ink
 * text, a thin ochre rule close under it) while keeping the accessible tap
 * target intact.
 */
.primary-menu .current-menu-item > a {
	color: var(--wp--preset--color--foreground);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
}

@media (min-width: 700px) {
	/* Desktop: no collapsing toggle, the menu is a plain inline row. This
	 * CSS only takes visible effect once the nav <details> actually has
	 * its `open` attribute set — a closed <details>'s non-<summary>
	 * content stays out of layout/tab order at the browser level no
	 * matter what `display` an author rule gives it here, so header.php
	 * sets `open` via a small critical inline script (kept in sync on
	 * resize by assets/js/main.js). Hiding the toggle is still pure CSS:
	 * it has no effect on whether the <details> is open. */
	.menu-toggle {
		display: none;
	}

	.primary-menu {
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 8px 24px;
		min-width: 0;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
	}

	.primary-menu a {
		padding: 8px 4px;
	}
}

/*
 * Language switcher (inc/language-switcher.php): compact flag+code
 * dropdown — "Večjezičnost 1/4" task, docs/17_VISUAL_DESIGN.md v2 ("NE 6
 * zastavic v vrsti"). Same accessible `<details>/<summary>` disclosure
 * pattern as `.menu-disclosure` above, and the same overlay-not-inline
 * dropdown positioning as `.primary-menu` so opening it never shifts
 * layout. `summary:focus-visible` (top of this file) already covers its
 * keyboard-focus outline — no separate rule needed here.
 */
.lang-switcher {
	position: relative;
}

.lang-switcher-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 44px;
	min-width: 44px;
	padding: 8px 10px;
	list-style: none;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
}

.lang-switcher-toggle::-webkit-details-marker {
	display: none;
}

.lang-switcher-toggle:hover {
	color: var(--wp--preset--color--accent);
}

.lang-switcher-code,
.lang-switcher-item-code {
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lang-switcher-flag {
	display: block;
	width: 20px;
	height: 14px;
	flex-shrink: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
}

.lang-switcher-list {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	/* >=8px between adjacent tap targets (agency standard), even though
	 * each item is already a 44px-tall block on its own. */
	gap: 8px;
	min-width: 180px;
	margin: 4px 0 0;
	padding: 8px;
	list-style: none;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
}

.lang-switcher-list a {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 8px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.lang-switcher-list a:hover {
	color: var(--wp--preset--color--foreground);
}

.lang-switcher-item-name {
	font-size: 0.85rem;
}

/*
 * Footer (footer.php): copyright + plain contact e-mail link, no social
 * icon fonts. docs/17_VISUAL_DESIGN.md "Header / footer".
 */
.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px 24px;
	padding: 24px 16px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Uppercase link row, left: docs/17/mockup footer ("uppercase povezave
 * levo"). No underline — muted by default, ink-on-hover would clash with
 * the ochre-underline "active" convention reserved for the primary nav, so
 * hover here moves straight to accent, matching the mockup. */
.footer-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--wp--preset--color--muted);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
}

.footer-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* Right side: "(c) YEAR Jošt Snoj · email" as a single line, email in
 * accent. */
.site-footer-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

.site-info {
	margin: 0;
}

.site-footer-email {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.site-footer-email:hover,
.site-footer-email:focus-visible {
	color: var(--wp--preset--color--accent-ink);
}

/* Maker credit ("Website by ROXON"): deliberately quieter than the
 * copyright line above it (smaller size, same muted color, no letter-
 * spacing/uppercase treatment) so it reads as a footnote, never competing
 * with the artist's own information — agency standard + docs/17's "quiet
 * gallery wall" thesis. */
.site-footer-credit {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.7rem;
	color: var(--wp--preset--color--muted);
}

.site-footer-credit-link {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.site-footer-credit-link:hover,
.site-footer-credit-link:focus-visible {
	color: var(--wp--preset--color--accent);
}

.site-main {
	padding: 1rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* ---------------------------------------------------------------------
 * Client-side form validation (assets/js/forms.js)
 *
 * Shared by both forms (per-artwork enquiry, Contact page), so it lives in
 * the global stylesheet rather than being duplicated across
 * single-artwork.css and content.css.
 *
 * Errors are never signalled by colour alone (agency standard 2 / WCAG
 * 2.2 AA 1.4.1): the message is literal text, and the field additionally
 * carries aria-invalid="true". The ochre-red `--error` token is
 * 6.2:1 against the page background, comfortably past the 4.5:1 minimum.
 * ------------------------------------------------------------------ */
.jost-snoj-form-error {
	display: block;
	margin-top: 8px;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.8rem;
	line-height: 1.45;
	color: var(--wp--preset--color--error);
}

[aria-invalid="true"] {
	border-color: var(--wp--preset--color--error);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--error);
}

.jost-snoj-form-summary {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--text);
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--wp--preset--color--error);
}

/* Empty before the first failed submit — collapse it so it never adds
 * stray vertical rhythm to an untouched form. */
.jost-snoj-form-summary:empty {
	margin: 0;
}

/* The two consent rows are flex (checkbox + label). Without this the error
 * message becomes a third flex item and is squeezed into a narrow column
 * beside the label; letting the row wrap puts it on its own full-width line
 * under the consent text, where it reads normally at 375px too. */
.jost-snoj-enquiry__consent,
.jost-snoj-contact-form__consent {
	flex-wrap: wrap;
}

.jost-snoj-enquiry__consent .jost-snoj-form-error,
.jost-snoj-contact-form__consent .jost-snoj-form-error {
	flex-basis: 100%;
}