/**
 * Global styles that theme.json cannot express.
 * Loaded on the frontend and inside the editor canvas.
 */

/*
 * Grayscale antialiasing (as in Figma): light text on the dark background
 * otherwise renders noticeably heavier on macOS.
 */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Accent system.
 * The "current" accent defaults to accent 1. Any element (body, group, card)
 * can switch it with `.has-accent-1|2|3`; blocks only read `--rowww-accent-*`.
 */
:root,
.has-accent-1 {
	--rowww-accent-start: var(--wp--custom--accent--1--start);
	--rowww-accent-end: var(--wp--custom--accent--1--end);
	--rowww-accent-text-start: var(--wp--custom--accent--1--text-start);
	--rowww-accent-text-end: var(--wp--custom--accent--1--text-end);
	--rowww-accent-on: var(--wp--custom--accent--1--on);
}

.has-accent-2 {
	--rowww-accent-start: var(--wp--custom--accent--2--start);
	--rowww-accent-end: var(--wp--custom--accent--2--end);
	--rowww-accent-text-start: var(--wp--custom--accent--2--text-start);
	--rowww-accent-text-end: var(--wp--custom--accent--2--text-end);
	--rowww-accent-on: var(--wp--custom--accent--2--on);
}

.has-accent-3 {
	--rowww-accent-start: var(--wp--custom--accent--3--start);
	--rowww-accent-end: var(--wp--custom--accent--3--end);
	--rowww-accent-text-start: var(--wp--custom--accent--3--text-start);
	--rowww-accent-text-end: var(--wp--custom--accent--3--text-end);
	--rowww-accent-on: var(--wp--custom--accent--3--on);
}

/*
 * Fine grain texture for frosted and glowing surfaces (glass cards, glow
 * card). Layers read it as `var(--rowww-grain, none)`.
 * The inner url() is percent-encoded: when WP inlines a stylesheet it rewrites
 * every "url(" path, which would break the data URI and drop the layer.
 */
:root {
	--rowww-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
}

/*
 * Large headings break into lines of even length, so no word or short tail
 * is left alone on the last line (e.g. "…ha ránk bízod a / WordPress…").
 */
:where(h1, h2) {
	text-wrap: balance;
}

/*
 * Accent words: <em> inside headings, eyebrows and paragraphs with the
 * `has-accent-words` class (or `.has-accent-text` itself) keep the face of
 * their text, upright, and take the accessible accent text gradient. (The
 * accent font family token is the heading face; a child theme can set
 * another one.)
 */
:where(h1, h2, h3, h4, h5, h6, .is-style-eyebrow, .has-accent-words) em,
.has-accent-text {
	font-family: var(--wp--preset--font-family--accent);
	font-style: normal;
	font-weight: inherit;
	color: var(--rowww-accent-text-start);
	background-image: linear-gradient(90deg, var(--rowww-accent-text-start), var(--rowww-accent-text-end));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/*
 * An accent phrase split into words for an animation (rowww-core
 * `Blocks\Word_Split`): each word is its own <em>, and shows its share of one
 * gradient stretched over the whole phrase (`--rowww-pi` = place,
 * `--rowww-pn` = number of words), so the colour still runs across it.
 */
.rowww-word-part {
	background-size: calc(var(--rowww-pn) * 100%) 100%;
	background-position: calc(var(--rowww-pi) / (var(--rowww-pn) - 1) * 100%) 0;
}

/*
 * `rowww-title-large` on a heading: between the xxl and xxxl sizes, closer
 * to xxxl, scaled like every H1 (`custom.heading.page-title-scale`: about 55px on
 * desktop, 38px on phones), e.g. the home page H1. Two classes, so it also
 * wins over the hero's smaller title on phones.
 */
.wp-block-heading.rowww-title-large {
	font-size: calc((var(--wp--preset--font-size--xxl) * 0.25 + var(--wp--preset--font-size--xxxl) * 0.75) * var(--wp--custom--heading--page-title-scale));
}

/*
 * Phones: about 38px, but never wider than the screen allows for a line
 * like "készítés, az üzleti" (7.6em), and simple line filling instead of
 * balancing: balancing a large title pushed single words onto lines of
 * their own. Keep a closing pair together with a no-break space.
 */
@media (max-width: 599px) {

	.wp-block-heading.rowww-title-large {
		font-size: min(calc((var(--wp--preset--font-size--xxl) * 0.2 + var(--wp--preset--font-size--xxxl) * 0.8) * var(--wp--custom--heading--page-title-scale)), calc((100vw - 2 * var(--wp--custom--gutter)) / 7.6));
		text-wrap: wrap;
	}
}

/*
 * Closing call-to-action cards (group "Glow" style): the heading stays plain
 * white, the <em> part is not set in the accent face.
 */
.is-style-glow :is(h1, h2, h3, h4, h5, h6) em {
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	color: var(--wp--preset--color--contrast);
	background: none;
	-webkit-text-fill-color: currentcolor;
}

/*
 * Eyebrow: a <strong> part is highlighted,
 * e.g. "Studio • <strong>15+ years</strong>".
 */
.is-style-eyebrow strong {
	font-weight: inherit;
	color: var(--wp--preset--color--contrast);
}

@media (forced-colors: active) {

	:where(h1, h2, h3, h4, h5, h6, .is-style-eyebrow, .has-accent-words) em,
	.has-accent-text {
		background: none;
		-webkit-text-fill-color: currentcolor;
	}
}

/*
 * Scroll reveal, word by word: blocks with the `rowww-reveal-words` class get
 * their words wrapped on render (rowww-core `Blocks\Reveal_Render`, which also
 * sets `--rowww-n`). Each word brightens from faint to full while the text
 * scrolls up through the viewport. Frontend only; browsers without scroll-
 * driven animations and reduced motion show the plain text.
 */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.rowww-reveal-words {
			view-timeline-name: --rowww-reveal;
		}

		.rowww-reveal-words .rowww-word {
			animation: rowww-word-reveal linear both;
			animation-timeline: --rowww-reveal;
			animation-range: cover calc(10% + 40% * var(--rowww-i) / var(--rowww-n)) cover calc(16% + 40% * (var(--rowww-i) + 1) / var(--rowww-n));
		}
	}
}

@keyframes rowww-word-reveal {

	from {
		opacity: 0.18;
	}

	to {
		opacity: 1;
	}
}

/* One underline look for every link (content, footer columns, menus). */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

/* Accessible, consistent keyboard focus. */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--cta);
	outline-offset: 3px;
}

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

/* Button transitions; the hover colours themselves come from theme.json. */
.wp-element-button,
.wp-block-button__link {
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

@media (prefers-reduced-motion: reduce) {

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

/*
 * Phones: no motion, apart from what was chosen to move there: the two
 * strips that are content in motion (client logos, project images), the
 * glow call-to-action card, the AI Chat widget (its launcher's running
 * border) and the statement whose words brighten while scrolling. Every
 * other animation and transition finishes at once, like with reduced
 * motion; the other scroll-driven effects are limited to 782px and up where
 * they are declared, and the scripted demos (AI Assist chat demo, visitor
 * chat, report demo, message bubble) show their finished state.
 */
@media (max-width: 781px) {

	:not(.wp-block-rowww-client-logos__track, .wp-block-rowww-work-marquee__track, .is-style-glow, .rowww-ai-chat *, .rowww-reveal-words *),
	:not(.is-style-glow, .rowww-ai-chat *, .rowww-reveal-words *)::before,
	:not(.is-style-glow, .rowww-ai-chat *, .rowww-reveal-words *)::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
	}
}