/*
Theme Name: Scensverige
Theme URI: https://scensverige.se/
Author: Sveriges Teaterunion – Svenska ITI
Author URI: https://scensverige.se/
Description: A modern editorial WordPress block theme for Scensverige — the Swedish centre of the International Theatre Institute. Pastel-block design language on a warm off-white base, with full block editor support, WCAG 2.1 AA palette pairings, and Swedish/English localisation built in. Built for WordPress 6.9 and the upcoming 7.0.
Version: 1.0.0
Tested up to: 7.0
Requires at least: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: scensverige
Tags: block-theme, full-site-editing, editor-style, block-patterns, accessibility-ready, translation-ready, rtl-language-support, two-columns, three-columns, custom-colors, custom-logo, custom-menu, featured-images, news, education, entertainment
*/

/*
 * The Scensverige theme is a block theme. All design tokens, layout settings
 * and style rules are defined in theme.json. This file exists only to ship the
 * required WordPress theme header and a handful of small overrides that cannot
 * be expressed in theme.json — global focus rings for accessibility, the
 * pastel block hover affordances, and a few responsive grid fallbacks.
 */

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible),
:where(textarea:focus-visible),
:where(summary:focus-visible),
:where([tabindex]:not([tabindex="-1"])):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-hover);
	outline-offset: 2px;
}

:where(img) {
	max-width: 100%;
}

:root {
	--scen-transition: 0.2s ease;
}

/* News grid */
@media (min-width: 768px) {
	.scen-news-grid ul {
		display: flex;
	}
	.scen-news-grid .wp-block-post {
		display: flex;
	}
	.scen-news-grid .wp-block-post:first-child {
		flex-basis: 40%;
		flex-shrink: 0;
	}
}

.scen-card {
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.scen-card:hover,
.scen-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(26, 21, 18, 0.08);
}

.scen-prog-row {
	transition:
		background-color var(--scen-transition),
		padding var(--scen-transition);
}

.scen-prog-row:hover,
.scen-prog-row:focus-within {
	background-color: var(--wp--preset--color--base);
	padding-left: 16px;
	padding-right: 16px;
}

/* Default button appearance: colors/hover live in theme.json; theme.json can't
   express transitions, so apply the smooth hover globally to every button. */
.wp-element-button {
	transition: background-color var(--scen-transition);
}

/* WordPress core's is-style-outline stylesheet hardcodes the outline button's
   padding/border with real specificity, overriding theme.json and leaving the
   outline button a different size than the filled default. Re-assert parity. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: 0.5em 1em;
	border-width: 2px;
}

.scen-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}


/* Home hero — establishes a positioning + stacking context so the decorative
   headlamp beams (scensverige/headlamp-lights) overlay behind the content.
   Absolutely-positioned elements otherwise paint above static siblings, so the
   content children are lifted to z-index 1. */
.scen-hero {
	position: relative;
	overflow: hidden;
}

.scen-hero > *:not(.scen-headlamps) {
	position: relative;
	z-index: 1;
}

.scen-hero-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(56px, 7.5vw, 108px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	font-weight: 400;
	text-wrap: pretty;
	margin: 0;
}

.scen-section-title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(40px, 5vw, 64px);
	line-height: 1;
	letter-spacing: -0.02em;
	font-weight: 400;
	margin: 0;
}

.scen-lede {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(20px, 2.2vw, 28px);
	line-height: 1.35;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.scen-pastel-blob {
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.scen-pastel-blob--top-right {
	top: -60px;
	right: -40px;
	width: 260px;
	height: 260px;
}

.scen-pastel-blob--bottom-left {
	bottom: -40px;
	left: 20px;
	width: 180px;
	height: 180px;
	mix-blend-mode: multiply;
}

/* Sticky table of contents — used by the standard page template */
.scen-toc {
	position: sticky;
	top: 40px;
	align-self: start;
}

.scen-toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: 1px solid var(--wp--preset--color--grey);
}

.scen-toc a {
	display: block;
	padding: 8px 16px;
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
	font-size: 14px;
	border-left: 2px solid transparent;
	margin-left: -1px;
}

.scen-toc a[aria-current="true"],
.scen-toc a.is-current {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	border-left-color: var(--wp--preset--color--accent);
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 100000;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	padding: 12px 20px;
	text-decoration: none;
	font-weight: 600;
}

.skip-link:focus {
	left: 8px;
}

/* Drop cap used on news articles */
.scen-dropcap::first-letter {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 4.5em;
	line-height: 0.8;
	float: left;
	margin: 8px 12px 0 0;
	color: var(--wp--preset--color--sage-ink);
}

/* Pastel "voice" styles. Applied via `is-style-scen-{color}` on a Group or
   Columns block: the element itself is filled with the pastel background and
   its text/headings/links take the matching ink colour. This is the default
   behaviour for every block — see the timeline-row exception below. */
/* .is-style-scen-lavender { background-color: var(--wp--preset--color--lavender); color: var(--wp--preset--color--lavender-ink); }
.is-style-scen-lavender :is(h1,h2,h3,h4,h5,h6),
.is-style-scen-lavender a { color: var(--wp--preset--color--lavender-ink); }

.is-style-scen-sky { background-color: var(--wp--preset--color--sky); color: var(--wp--preset--color--sky-ink); }
.is-style-scen-sky :is(h1,h2,h3,h4,h5,h6),
.is-style-scen-sky a { color: var(--wp--preset--color--sky-ink); }

.is-style-scen-rose { background-color: var(--wp--preset--color--rose); color: var(--wp--preset--color--rose-ink); }
.is-style-scen-rose :is(h1,h2,h3,h4,h5,h6),
.is-style-scen-rose a { color: var(--wp--preset--color--rose-ink); }

.is-style-scen-sage { background-color: var(--wp--preset--color--sage); color: var(--wp--preset--color--sage-ink); }
.is-style-scen-sage :is(h1,h2,h3,h4,h5,h6),
.is-style-scen-sage a { color: var(--wp--preset--color--sage-ink); }

.is-style-scen-mustard { background-color: var(--wp--preset--color--mustard); color: var(--wp--preset--color--mustard-ink); }
.is-style-scen-mustard :is(h1,h2,h3,h4,h5,h6),
.is-style-scen-mustard a { color: var(--wp--preset--color--mustard-ink); }

.is-style-scen-grey { background-color: var(--wp--preset--color--grey); color: var(--wp--preset--color--ink); }
.is-style-scen-grey :is(h1,h2,h3,h4,h5,h6),
.is-style-scen-grey a { color: var(--wp--preset--color--ink); } */

/* Timeline-row exception ONLY. On a `.scen-timeline-row`, picking a pastel
   voice re-tints the inner chip/card (anything with its own background — a
   .has-background preset or a nested .is-style-scen-* card) to that voice,
   while the row wrapper itself stays transparent. This inner-blocks-only
   behaviour is scoped to the timeline row and must not affect other blocks. */
.scen-timeline-row.is-style-scen-lavender,
.scen-timeline-row.is-style-scen-sky,
.scen-timeline-row.is-style-scen-rose,
.scen-timeline-row.is-style-scen-sage,
.scen-timeline-row.is-style-scen-mustard {
	background-color: transparent;
}

.scen-timeline-row.is-style-scen-lavender .has-background,
.scen-timeline-row.is-style-scen-lavender
	[class*="is-style-scen-"]:not(.is-style-scen-pull):not(
		.is-style-scen-dark
	):not(.is-style-scen-card):not(.is-style-outline) {
	background-color: var(--wp--preset--color--lavender) !important;
	color: var(--wp--preset--color--lavender-ink) !important;
}
.scen-timeline-row.is-style-scen-sky .has-background,
.scen-timeline-row.is-style-scen-sky
	[class*="is-style-scen-"]:not(.is-style-scen-pull):not(
		.is-style-scen-dark
	):not(.is-style-scen-card):not(.is-style-outline) {
	background-color: var(--wp--preset--color--sky) !important;
	color: var(--wp--preset--color--sky-ink) !important;
}
.scen-timeline-row.is-style-scen-rose .has-background,
.scen-timeline-row.is-style-scen-rose
	[class*="is-style-scen-"]:not(.is-style-scen-pull):not(
		.is-style-scen-dark
	):not(.is-style-scen-card):not(.is-style-outline) {
	background-color: var(--wp--preset--color--rose) !important;
	color: var(--wp--preset--color--rose-ink) !important;
}
.scen-timeline-row.is-style-scen-sage .has-background,
.scen-timeline-row.is-style-scen-sage
	[class*="is-style-scen-"]:not(.is-style-scen-pull):not(
		.is-style-scen-dark
	):not(.is-style-scen-card):not(.is-style-outline) {
	background-color: var(--wp--preset--color--sage) !important;
	color: var(--wp--preset--color--sage-ink) !important;
}
.scen-timeline-row.is-style-scen-mustard .has-background,
.scen-timeline-row.is-style-scen-mustard
	[class*="is-style-scen-"]:not(.is-style-scen-pull):not(
		.is-style-scen-dark
	):not(.is-style-scen-card):not(.is-style-outline) {
	background-color: var(--wp--preset--color--mustard) !important;
	color: var(--wp--preset--color--mustard-ink) !important;
}

/* Links inside a timeline voice follow the card's ink colour (including
   :visited) instead of the global link colour. `currentColor` on the `color`
   property resolves to the inherited value, so this covers every voice with a
   single rule. Underline is left intact so links stay distinguishable. */
.scen-timeline-row[class*="is-style-scen-"]
	a:where(:link, :visited, :hover, :focus, :active) {
	color: currentColor !important;
}

/* Responsive: collapse multi-column grids to single column on small screens.
   theme.json drives most of this, but Group children sometimes need a nudge. */
@media (max-width: 781px) {
	.scen-stack-on-mobile.wp-block-columns {
		flex-direction: column !important;
	}

	.scen-stack-on-mobile .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	.scen-toc {
		position: static;
	}
}

/* Timeline row layout — year chip stays centred; card occupies one half of the
   container and alternates sides automatically via :nth-of-type. */
@media (min-width: 782px) {
	.scen-timeline-row.wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 80px 1fr;
		align-items: start;
		column-gap: 24px;
	}

	.scen-timeline-row > .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
		margin: 0 !important;
	}

	/* Pin both cells to row 1. Without an explicit grid-row, the left-card
	   (odd) rows get auto-placed into row 2: the year takes column 2 first,
	   leaving the placement cursor past column 1, so a card at grid-column 1
	   spills to the next row and drops below the year. */
	.scen-timeline-row__year {
		grid-column: 2;
		grid-row: 1;
	}
	.scen-timeline-row__card {
		grid-column: 1;
		grid-row: 1;
	}
	.scen-timeline-row:nth-of-type(even) .scen-timeline-row__card {
		grid-column: 3;
	}
}

@media (max-width: 781px) {
	.scen-timeline-row.wp-block-columns {
		display: flex !important;
		flex-direction: column !important;
	}

	.scen-timeline-row > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* Subtle scroll-reveal — opt-in via class, never required for content access */
@media (prefers-reduced-motion: no-preference) {
	.scen-reveal {
		opacity: 0;
		transform: translateY(12px);
		transition:
			opacity 0.6s ease,
			transform 0.6s ease;
	}

	.scen-reveal.is-visible {
		opacity: 1;
		transform: none;
	}
}

/* Breadcrumbs */
.scen-breadcrumbs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
}

.scen-breadcrumbs > span {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.scen-breadcrumbs .breadcrumb_last {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Link hover */
/* :root :where(a:where(:not(.wp-element-button)):hover) {
	
} */