/* ==========================================================================
   base.css — Genva Craft

   Tokens that theme.json cannot hold, dark mode, and the page shell every
   pattern relies on.

   Colours, font families, font sizes and spacing steps are theme.json
   presets, because the editor needs them. Section stylesheets read the
   presets directly (var(--wp--preset--color--line) and so on), so a style
   variation that changes the palette reaches every component.
   ========================================================================== */

:root {

	/* --- Type -------------------------------------------------------------
	   A font size preset carries only a size. Line heights are unitless so
	   they follow the fluid sizes instead of drifting apart from them. */

	--font-heading: var(--wp--preset--font-family--heading);
	--font-latin:   var(--wp--preset--font-family--latin);
	--font-body:    var(--wp--preset--font-family--body);

	/* --- Layout -----------------------------------------------------------
	   One axis for the side gutter; the section rhythm is a fixed multiple of
	   it, so the vertical and horizontal space never fall out of proportion
	   (carried over from Genva Carpenter). */

	--gutter:      clamp(1.5rem, 5vw, 4rem);
	--section-pad: calc(var(--gutter) * 1.7);
	--content-max: var(--wp--style--global--content-size, 800px);
	--wide-max:    var(--wp--style--global--wide-size, 1440px);
}

/* ==========================================================================
   Dark mode

   Driven only by the .is-dark class the toggle puts on <html>. It never
   follows prefers-color-scheme, so the toggle stays the single source of
   truth and cannot fight the style variations.

   The dark colours are settings.custom.dark in theme.json, and a style
   variation sets its own under the same key. Core prints them on :root as
   --wp--custom--dark--*, and they are swapped like the palette whenever a
   variation is picked.

   They used to sit in each variation's styles.css. Core treats that field
   as the user's Additional CSS, so switching variations piled the old
   rules up (the last one won) and tidying Additional CSS lost them.

   The doubled class keeps this rule above the palette core prints on
   :root, whatever the load order (the same ladder as Genva Interior).

   Every preset is flipped, including contrast: core colours h1 to h6 with
   the contrast preset, so leaving it would put dark headings on a dark page.
   The button text has its own preset, so the button fill can turn gold
   without dropping the label's contrast. Checked with _verify/final.py:
   the lowest pair in the theme's set is 5.39:1 (gold on the surface colour).
   ========================================================================== */

:root.is-dark.is-dark {
	--wp--preset--color--base:        var(--wp--custom--dark--base);
	--wp--preset--color--surface:     var(--wp--custom--dark--surface);
	--wp--preset--color--contrast:    var(--wp--custom--dark--contrast);
	--wp--preset--color--secondary:   var(--wp--custom--dark--secondary);
	--wp--preset--color--primary:     var(--wp--custom--dark--primary);
	--wp--preset--color--button:      var(--wp--custom--dark--button);
	--wp--preset--color--button-text: var(--wp--custom--dark--button-text);
	--wp--preset--color--line:        var(--wp--custom--dark--line);
}

/* theme.json already paints the page from the presets, which flip above.
   Restated here so the ground does not depend on how core prints the body
   rule; Genva Interior needed the same line. */
.is-dark body {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* ==========================================================================
   Page shell
   ========================================================================== */

.wrap {
	width: 100%;
	max-width: var(--wide-max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--content {
	max-width: calc(var(--content-max) + var(--gutter) * 2);
}

.section {
	padding-block: var(--section-pad);
}

.section--surface {
	background-color: var(--wp--preset--color--surface);
}

.section--line {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* The hero already ends with a full section gap; the next section does not
   add its own on top. */
.hero + .section {
	padding-top: 0;
}

/* ==========================================================================
   Headings

   Japanese may break between any two characters, so a narrow screen leaves
   a lone "る。" on the last line. auto-phrase breaks at phrase boundaries
   (only under lang="ja"); balance evens out the lines where it is not
   supported. :where() keeps the specificity at zero, so a component can
   still set its own wrapping.
   ========================================================================== */

:where(h1, h2, h3) {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* ==========================================================================
   Section head: a Latin label, the Japanese heading, a short gold rule.
   ========================================================================== */

.sec-head {
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--60);
}

.sec-head > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.sec-head > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sec-head__en {
	font-family: var(--font-latin);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.24em;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

.sec-head__title {
	font-size: var(--wp--preset--font-size--xlarge);
}

.sec-head__lead {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

/* ==========================================================================
   Latin labels

   Cormorant Garamond ships old-style figures, so "01" reads as "oI". Every
   element set in the Latin face gets lining figures.
   ========================================================================== */

.label,
.sec-head__en,
.site-header .wp-block-site-title,
.site-nav,
.site-footer__name,
.events__date,
.flow__num,
.work-details th,
.wp-block-query-pagination {
	font-variant-numeric: lining-nums;
}

.label {
	font-family: var(--font-latin);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.18em;
	line-height: 1.2;
	color: var(--wp--preset--color--primary);
}

/* ==========================================================================
   Buttons

   theme.json gives the filled button its colours. The outline style is the
   core "outline" block style, recoloured so the line is the text colour: the
   gold line colour is too light on the light ground to mark a control
   (2.79:1).
   ========================================================================== */

.wp-block-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	border: 1px solid var(--wp--preset--color--button);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.wp-block-button .wp-block-button__link:hover {
	opacity: 0.88;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	opacity: 1;
	background-color: var(--wp--preset--color--surface);
}

/* A link that leaves the site shows an arrow drawn by the button's own
   ::after, so the button stays a plain core block. The arrow is decoration:
   the label itself names the destination ("Buy on minne"), which is what a
   screen reader announces. */
.wp-block-button.is-external .wp-block-button__link::after {
	content: "";
	width: 0.9em;
	height: 0.9em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--icon-external) center / contain no-repeat;
	mask: var(--icon-external) center / contain no-repeat;
}

:root {
	--icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.5' d='M6 3H3v10h10v-3M9 3h4v4M13 3 7 9'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Global defaults
   ========================================================================== */

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

:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

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

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