/*
Theme Name: Koningsnach
Template: kadence
Description: Child theme of Kadence for Koningsnach Soesterberg.
Version: 0.3.0
Text Domain: koningsnach
*/

/*
 * Follows the client's style guide (docs/from-client/styleguide.docx):
 * warm white base, deep black for structure and contrast, orange for accents and actions,
 * peach only as soft decoration (about 60% light / 25% dark / 10% orange / 5% peach).
 *
 * Provisional: the guide says its colour codes are derived from the invoice and must be checked against the
 * designer's originals. Fonts are an interim pair (Aileron, see assets/README.md): the guide asks for Bowl and
 * Avenir, which still have to be confirmed. All of that lives in the variables below.
 *
 * Contrast rules from the guide: dark text on orange (never white), orange is never used as small text on a
 * light background (use --kn-orange-text), peach and light orange are never used for small text.
 */

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/aileron-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/aileron-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Aileron";
	src: url("assets/fonts/aileron-latin-800-normal.woff2") format("woff2");
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

:root {
	--kn-orange: #e5682d;
	--kn-orange-text: #b8470e;
	--kn-ink: #202020;
	--kn-paper: #fffdf9;
	--kn-peach: #f8d6c4;
	--kn-apricot: #f4b184;
	--kn-grey: #444444;
	--kn-off-bg: #e4dfd8;
	--kn-off-text: #5f5953;
	--kn-line: 1px solid rgb(32 32 32 / 0.18);
	--kn-line-ink: 2px solid var(--kn-ink);
	--kn-radius: 10px;
	--kn-font-body: "Aileron", system-ui, "Segoe UI", Arial, Helvetica, sans-serif;
	--kn-font-display: "Aileron", system-ui, "Segoe UI", Arial, Helvetica, sans-serif;
}

/* Kadence palette, so links, buttons and headings across the theme pick up our colours. */
:root:root {
	--global-palette1: #b8470e;
	--global-palette2: #e5682d;
	--global-palette3: #202020;
	--global-palette4: #2f2f2f;
	--global-palette5: #444444;
	--global-palette6: #d9ccc2;
	--global-palette7: #fbece3;
	--global-palette8: #fffdf9;
	--global-palette9: #ffffff;
	--global-body-font-family: "Aileron", system-ui, "Segoe UI", Arial, Helvetica, sans-serif;
	--global-heading-font-family: "Aileron", system-ui, "Segoe UI", Arial, Helvetica, sans-serif;
}

/* ---------- Base ---------- */
body {
	background: var(--kn-paper);
	color: var(--kn-grey);
	font-family: var(--kn-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
}

button,
input,
select,
textarea,
.wp-block-button__link {
	font-family: inherit;
}

a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.entry-content a:not(.wp-block-button__link):hover,
.entry-content a:not(.wp-block-button__link):focus-visible {
	background: var(--kn-peach);
	color: var(--kn-ink);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--kn-ink);
	outline-offset: 2px;
}

/* ---------- Typography ---------- */
/* Display type (interim: Aileron Heavy) is for headings only, never for long text. */
h1,
h2,
h3,
h4 {
	font-family: var(--kn-font-display);
	font-weight: 800;
	line-height: 1.1;
	color: var(--kn-ink);
}

h2 {
	font-size: 1.7rem;
}

.kn-section h2,
.kn-info-block h2,
.kn-cta h2 {
	font-size: clamp(1.9rem, 5.5vw, 2.9rem);
}

/* A small hand-drawn stroke under our section headings, used sparingly. */
.kn-section h2::after,
.kn-info-block h2::after,
.kn-cta h2::after {
	content: "";
	display: block;
	width: 5rem;
	height: 0.7rem;
	margin-top: 0.35rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cpath d='M2 8 Q 24 2 50 6 T 98 5 L 98 8 Q 72 12 46 10 T 2 12 Z' fill='%23202020'/%3E%3C/svg%3E") no-repeat left center / contain;
}

h3 {
	font-size: 1.35rem;
}

.kn-lead {
	max-width: 40rem;
	font-size: clamp(1.1rem, 3.5vw, 1.3rem);
	color: var(--kn-grey);
}

/* ---------- Header and footer (Kadence) ---------- */
/*
 * No site title, and a menu that floats over the page without a background. That way the hero reaches the top
 * of the screen and the menu doesn't compete with the logo. Once the page scrolls, the menu gets a light,
 * frosted background (the .kn-scrolled class comes from assets/js/header.js), because text without any
 * background would be unreadable over the dark strip and the white sections.
 */
:root {
	--kn-header-h: 5rem;
}

#masthead {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
	border-bottom: 0;
	background: transparent;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.admin-bar #masthead {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar #masthead {
		top: 46px;
	}
}

.kn-scrolled #masthead {
	background: rgb(255 253 249 / 0.88);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgb(32 32 32 / 0.12);
}

/*
 * The crown and the plane of the logo stand in for the site title (assets/img/logo-mark.webp). The title text is
 * still in the page, hidden visually, so screen readers and search engines get it and the link has a name.
 * On the home page the full logo sits right below the menu, so the mark only fades in once the page scrolls.
 */
.site-branding {
	transition: opacity 0.25s ease;
}

.site-branding a.brand {
	display: block;
	height: 3.5rem;
	aspect-ratio: 933 / 635;
	background: url("assets/img/logo-mark.webp") left center / contain no-repeat;
}

.site-branding .site-title-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

html:not(.kn-scrolled) body.home .site-branding {
	visibility: hidden;
	opacity: 0;
}

@media (max-width: 767px) {
	.site-branding a.brand {
		height: 3rem;
	}
}

/* The header no longer takes up space in the page, so content makes room for it. The hero reaches the top. */
#inner-wrap {
	padding-top: var(--kn-header-h);
}

.home #inner-wrap {
	padding-top: 0;
}

.header-navigation .header-menu-container ul.menu > li.menu-item > a {
	font-weight: 700;
	color: var(--kn-ink);
}

/* The Tickets item in the menu is the primary action: orange with dark text. */
.header-navigation ul.menu > li.kn-menu-tickets > a,
.mobile-navigation ul li.kn-menu-tickets > a {
	margin-left: 0.5rem;
	padding: 0.45rem 1.1rem !important;
	border-radius: var(--kn-radius);
	background: var(--kn-orange) !important;
	color: var(--kn-ink) !important;
	font-size: 1rem !important;
	font-weight: 800 !important;
}

.header-navigation ul.menu > li.kn-menu-tickets > a:hover,
.mobile-navigation ul li.kn-menu-tickets > a:hover {
	background: var(--kn-ink) !important;
	color: var(--kn-paper) !important;
}

.site-footer,
#colophon {
	background: var(--kn-ink);
	color: var(--kn-paper);
}

.site-footer a,
#colophon a {
	color: var(--kn-peach);
}

.site-footer a:hover,
#colophon a:hover {
	background: var(--kn-orange);
	color: var(--kn-ink);
}

/* ---------- Credit strip (same as nmr-ict.nl) ---------- */
.kn-design-by {
	padding: 1rem;
	border-top: 1px solid #555;
	background: var(--kn-ink);
	color: #fff;
	font-size: 0.875rem;
	text-align: center;
}

.kn-design-by a {
	color: #fff;
	text-decoration: none;
}

.kn-design-by a:hover,
.kn-design-by a:focus-visible {
	background: var(--kn-orange);
	color: var(--kn-ink);
	text-decoration: underline;
}

/* ---------- Sections and bands ---------- */
/* Pages are full width, so every section sets its own content width (72rem, centred). */
.kn-section,
.kn-info-block {
	max-width: 72rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Kadence resets the side padding of every full-width block (.entry-content .alignfull), so ours must be as specific. */
.entry-content .kn-hero,
.entry-content .kn-facts,
.entry-content .kn-cta {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
	/* Full-width bands touch each other: no gap from the theme's spacing between blocks, or the marble would stop short. */
	margin-top: 0;
	margin-bottom: 0;
}

.kn-hero > *,
.kn-cta > *,
.kn-facts > * {
	margin-inline: max(0px, calc((100% - 69.5rem) / 2));
}

.kn-section {
	padding-block: clamp(2rem, 6vw, 3.5rem);
}

/* Hero: logo, short promise, ticket button. The marble comes from the client's invoice (assets/img/marble-800.webp,
   with the client's permission). It sits at the left and right edge, as on the invoice, behind the content and
   only here: the guide says marble is decoration, never a background for text or for every page. */
.kn-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--kn-header-h) + clamp(1rem, 4vw, 3rem)) 1.25rem clamp(2.5rem, 7vw, 5rem);
	background: var(--kn-paper);
	color: var(--kn-ink);
}

.kn-hero::before,
.kn-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: clamp(300px, 56vw, 780px);
	aspect-ratio: 800 / 771;
	background: url("assets/img/marble-800.webp") center / contain no-repeat;
	opacity: 0.6;
	pointer-events: none;
}

/* Offsets are in vw, not %, so the marble looks the same whatever the height of the hero. */
.kn-hero::before {
	left: -12vw;
	bottom: -14vw;
	transform: rotate(-10deg);
}

.kn-hero::after {
	right: -16vw;
	top: -17vw;
	transform: scaleX(-1) rotate(14deg);
}

/* On a phone the content is stacked: more room under the buttons, and the marble peeks in from the corners. */
@media (max-width: 859px) {
	.entry-content .kn-hero {
		padding-bottom: 8rem;
	}

	.kn-hero::before {
		left: -34vw;
		bottom: -46vw;
	}

	.kn-hero::after {
		right: -40vw;
		top: -42vw;
	}
}

/* WordPress wraps the contents of a group in .wp-block-group__inner-container, so the grid goes on that. */
.kn-hero__inner > .wp-block-group__inner-container {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
}

@media (min-width: 860px) {
	.kn-hero__inner > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 420px) 1fr;
	}
}

.kn-brand-logo {
	display: block;
	width: min(80vw, 420px);
	height: auto;
	margin-inline: auto;
}

.kn-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2.2rem, 7vw, 3.8rem);
	line-height: 1.05;
}

.kn-hero__lead {
	max-width: 32rem;
	font-size: clamp(1.1rem, 3.8vw, 1.35rem);
	color: var(--kn-ink);
}

/* Key facts under the hero: date, place, times. */
.kn-facts {
	padding: 1.5rem 1.25rem;
	background: var(--kn-ink);
	color: var(--kn-paper);
}

.kn-facts .wp-block-columns {
	margin: 0;
	gap: 1rem 2rem;
}

.kn-facts__label {
	margin: 0;
	color: var(--kn-orange);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.kn-facts__value {
	margin: 0;
	color: var(--kn-paper);
	font-family: var(--kn-font-display);
	font-size: 1.35rem;
	font-weight: 800;
}

.kn-cta {
	padding: clamp(2.5rem, 8vw, 4.5rem) 1.25rem;
	background: var(--kn-ink);
	color: var(--kn-paper);
}

.kn-cta h2 {
	color: var(--kn-paper);
}

.kn-cta h2::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14'%3E%3Cpath d='M2 8 Q 24 2 50 6 T 98 5 L 98 8 Q 72 12 46 10 T 2 12 Z' fill='%23f8d6c4'/%3E%3C/svg%3E");
}

.kn-cta a:not(.wp-block-button__link) {
	color: var(--kn-peach);
}

/* ---------- Buttons ---------- */
/*
 * Kadence has its own rules for :visited, :hover and :focus (white text on its own button colour). Our
 * stylesheet loads after Kadence's (see functions.php), and every state is spelled out here so a visited or
 * focused button can't turn into white text on a light background.
 * Primary action (tickets): orange fill with dark text. Secondary: dark outline.
 */
.kn-btn .wp-block-button__link,
.kn-btn .wp-block-button__link:visited {
	padding: 0.85rem 1.6rem;
	border: 2px solid var(--kn-orange);
	border-radius: var(--kn-radius);
	background: var(--kn-orange);
	box-shadow: none;
	color: var(--kn-ink);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.kn-btn .wp-block-button__link:hover,
.kn-btn .wp-block-button__link:focus,
.kn-btn .wp-block-button__link:active {
	border-color: var(--kn-ink);
	background: var(--kn-ink);
	box-shadow: none;
	color: var(--kn-paper);
}

.kn-btn--outline .wp-block-button__link,
.kn-btn--outline .wp-block-button__link:visited,
.kn-btn--ghost .wp-block-button__link,
.kn-btn--ghost .wp-block-button__link:visited {
	border-color: var(--kn-ink);
	background: transparent;
	color: var(--kn-ink);
}

.kn-btn--outline .wp-block-button__link:hover,
.kn-btn--outline .wp-block-button__link:focus,
.kn-btn--outline .wp-block-button__link:active,
.kn-btn--ghost .wp-block-button__link:hover,
.kn-btn--ghost .wp-block-button__link:focus,
.kn-btn--ghost .wp-block-button__link:active {
	border-color: var(--kn-ink);
	background: var(--kn-ink);
	color: var(--kn-paper);
}

.kn-btn--dark .wp-block-button__link,
.kn-btn--dark .wp-block-button__link:visited {
	border-color: var(--kn-ink);
	background: var(--kn-ink);
	color: var(--kn-paper);
}

/* On the dark band every button is the orange primary, whatever variant the page content asks for. */
.kn-cta .kn-btn .wp-block-button__link,
.kn-cta .kn-btn .wp-block-button__link:visited {
	border-color: var(--kn-orange);
	background: var(--kn-orange);
	color: var(--kn-ink);
}

.kn-cta .kn-btn .wp-block-button__link:hover,
.kn-cta .kn-btn .wp-block-button__link:focus,
.kn-cta .kn-btn .wp-block-button__link:active {
	border-color: var(--kn-paper);
	background: var(--kn-paper);
	color: var(--kn-ink);
}

/* ---------- Tiles, cards, grids ---------- */
.kn-tile {
	padding: 1.5rem;
	border: var(--kn-line);
	border-radius: var(--kn-radius);
	background: #fff;
}

.kn-tile h3 {
	margin-top: 0;
	font-size: 1.4rem;
}

/* Small orange accent above each tile heading. */
.kn-tile h3::before {
	content: "";
	display: block;
	width: 2.25rem;
	height: 0.3rem;
	margin-bottom: 0.7rem;
	border-radius: 2px;
	background: var(--kn-orange);
}

.kn-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.kn-grid--cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.kn-grid--cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kn-card {
	overflow: hidden;
	border: var(--kn-line);
	border-radius: var(--kn-radius);
	background: #fff;
}

.kn-card__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.kn-card__link:hover,
.kn-card__link:focus-visible {
	background: rgb(248 214 196 / 0.4);
	color: inherit;
}

.kn-card__media {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--kn-peach), var(--kn-apricot));
}

.kn-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kn-card__ph {
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--kn-ink);
	font-family: var(--kn-font-display);
	font-size: 5rem;
	font-weight: 800;
	opacity: 0.55;
}

.kn-card__body {
	padding: 1rem 1.25rem 1.25rem;
}

.kn-card__title {
	margin: 0 0 0.25rem;
	font-size: 1.4rem;
}

.kn-card__meta {
	margin: 0 0 0.5rem;
	color: var(--kn-orange-text);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* An artist card: the name is the link, stretched over the whole card. The social links sit above it. */
.kn-card--artist {
	position: relative;
}

.kn-card--artist .kn-card__title a {
	color: inherit;
	text-decoration: none;
}

.kn-card--artist .kn-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.kn-card--artist:hover,
.kn-card--artist:focus-within {
	border-color: var(--kn-ink);
	background: rgb(248 214 196 / 0.35);
}

.kn-card--artist .kn-social {
	position: relative;
	z-index: 1;
}

/* ---------- Quick links ---------- */
.kn-quicklinks {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 600px) {
	.kn-quicklinks {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kn-quicklinks a {
	display: block;
	padding: 1rem 1.25rem;
	border: var(--kn-line);
	border-radius: var(--kn-radius);
	background: #fff;
	color: var(--kn-ink);
	font-weight: 700;
	text-decoration: none;
}

.kn-quicklinks a::after {
	content: " →";
	color: var(--kn-orange-text);
}

.entry-content .kn-quicklinks a:hover,
.entry-content .kn-quicklinks a:focus-visible {
	background: rgb(248 214 196 / 0.45);
}

/* ---------- Stories ---------- */
.kn-stories {
	display: grid;
	gap: 1rem;
}

@media (min-width: 800px) {
	.kn-stories {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kn-story {
	margin: 0;
	padding: 1.5rem;
	border: var(--kn-line);
	border-left: 5px solid var(--kn-orange);
	border-radius: var(--kn-radius);
	background: #fff;
}

.kn-story blockquote {
	margin: 0 0 0.75rem;
	padding: 0;
	border: 0;
	color: var(--kn-ink);
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.35;
}

.kn-story--photo {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}

.kn-story__photo {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.kn-story figcaption {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------- Partners ---------- */
/* Logos stay on a calm light background and keep their own proportions; no orange behind or over them. */
.kn-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.kn-logo {
	display: grid;
	place-items: center;
	min-width: 8rem;
	height: 5rem;
	padding: 0.75rem 1rem;
	border: var(--kn-line);
	border-radius: var(--kn-radius);
	background: #fff;
	color: var(--kn-ink);
	font-weight: 700;
}

.kn-logo a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.kn-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.kn-logos--top .kn-logo {
	min-width: 12rem;
	height: 7rem;
}

.kn-tier {
	margin: 2rem 0 0.75rem;
	color: var(--kn-ink);
	font-size: 0.9rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------- Artist links (Instagram, Spotify, ...) ---------- */
.kn-social.kn-social {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
}

.kn-social a {
	display: inline-block;
	padding: 0.15rem 0.7rem;
	border: var(--kn-line);
	border-radius: 999px;
	color: var(--kn-ink);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}

.entry-content .kn-social a:hover,
.entry-content .kn-social a:focus-visible {
	border-color: var(--kn-ink);
	background: var(--kn-peach);
	color: var(--kn-ink);
}

/* ---------- Timeline ---------- */
.kn-timeline {
	margin: 2rem 0 0;
	padding: 0;
	border-bottom: var(--kn-line);
	list-style: none;
}

.kn-timeline__item {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 1rem;
	align-items: start;
	padding: 1rem 0;
	border-top: var(--kn-line);
}

.kn-timeline__time {
	padding-left: 0.6rem;
	border-left: 4px solid var(--kn-orange);
	color: var(--kn-ink);
	font-family: var(--kn-font-display);
	font-size: 1.25rem;
	font-weight: 800;
}

.kn-timeline__time span {
	display: block;
	color: var(--kn-grey);
	font-family: var(--kn-font-body);
	font-size: 0.85rem;
	font-weight: 400;
}

.kn-timeline__item {
	scroll-margin-top: 6rem;
}

.kn-timeline__what {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.kn-timeline__photo {
	flex: none;
	width: 3.5rem;
	height: 3.5rem;
	text-decoration: none;
}

.kn-timeline__photo img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--kn-radius);
	object-fit: cover;
}

@media (min-width: 600px) {
	.kn-timeline__photo {
		width: 5rem;
		height: 5rem;
	}
}

.kn-timeline__text {
	min-width: 0;
}

.kn-timeline__what strong {
	display: block;
	color: var(--kn-ink);
	font-family: var(--kn-font-display);
	font-size: 1.25rem;
	font-weight: 800;
}

.kn-timeline__what strong a {
	color: inherit;
	text-decoration: none;
}

.entry-content .kn-timeline__what strong a:hover,
.entry-content .kn-timeline__what strong a:focus-visible {
	background: var(--kn-peach);
	text-decoration: underline;
}

.kn-timeline__what small {
	display: block;
	font-size: 0.95rem;
}

.kn-timeline__photo .kn-card__ph {
	width: 100%;
	height: 100%;
	border-radius: var(--kn-radius);
	background: linear-gradient(135deg, var(--kn-peach), var(--kn-apricot));
	font-size: 1.6rem;
}

/* Kadence gives paragraphs in page content a large bottom margin; doubling the class lets ours win. */
.kn-timeline__bio.kn-timeline__bio {
	margin: 0.4rem 0 0;
	font-size: 0.98rem;
}

/* ---------- The page of one artist ---------- */
.kn-artist__back {
	margin: 0 0 1.5rem;
	font-weight: 700;
}

.kn-artist__grid {
	display: grid;
	gap: 1.5rem 2.5rem;
	align-items: start;
}

@media (min-width: 760px) {
	.kn-artist__grid:has(.kn-artist__photo) {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
	}
}

.kn-artist__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kn-radius);
}

.kn-artist__title {
	margin: 0 0 0.25rem;
	font-size: clamp(2.2rem, 7vw, 3.6rem);
	line-height: 1.05;
}

.kn-artist__time {
	margin: 0.25rem 0 1rem;
	color: var(--kn-ink);
	font-size: 1.2rem;
}

.kn-artist__bio {
	max-width: 38rem;
	font-size: 1.1rem;
}

.kn-artist__body .kn-social.kn-social {
	margin-top: 1.25rem;
}

.kn-artist__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	margin-top: 3rem;
	padding-top: 1.25rem;
	border-top: var(--kn-line);
	font-weight: 700;
}

/* ---------- FAQ ---------- */
.kn-faq__item {
	margin-bottom: 0.75rem;
	border: var(--kn-line);
	border-radius: var(--kn-radius);
	background: #fff;
}

.kn-faq__item summary {
	padding: 1rem 1.25rem;
	color: var(--kn-ink);
	font-weight: 700;
	cursor: pointer;
}

.kn-faq__item[open] {
	border-color: var(--kn-ink);
}

.kn-faq__item[open] summary {
	background: rgb(248 214 196 / 0.45);
	border-radius: var(--kn-radius) var(--kn-radius) 0 0;
}

.kn-faq__answer {
	padding: 1rem 1.25rem 0.25rem;
}

/* Kadence indents lists inside page content; the doubled class makes our reset win. */
.kn-grid.kn-grid,
.kn-quicklinks.kn-quicklinks {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.kn-logos.kn-logos {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.kn-timeline.kn-timeline {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

/* The news overview is Kadence's own template; give it the same content width as our pages. */
body.blog .content-container.site-container,
body.archive .content-container.site-container {
	max-width: 72rem;
	padding-inline: 1.25rem;
}

/* ---------- Info page ---------- */
.kn-info-block {
	padding-block: 1.25rem;
}

.kn-info-block h2 {
	font-size: clamp(1.5rem, 4.5vw, 2rem);
}

.kn-section,
.kn-info-block,
.kn-cta {
	scroll-margin-top: 5rem;
}

/* ---------- Forms (Fluent Forms) ---------- */
.fluentform .ff-el-form-control {
	padding: 0.7rem 0.9rem;
	border: 1.5px solid rgb(32 32 32 / 0.55);
	border-radius: var(--kn-radius);
	background: #fff;
	color: var(--kn-ink);
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--kn-ink);
	outline: 3px solid var(--kn-peach);
	outline-offset: 0;
}

.fluentform .ff-el-input--label label {
	color: var(--kn-ink);
	font-weight: 700;
}

/* Fluent Forms sets the button colours inline, hence !important. */
.fluentform .ff-btn-submit {
	padding: 0.8rem 1.6rem;
	border: 2px solid var(--kn-orange);
	border-radius: var(--kn-radius);
	background: var(--kn-orange) !important;
	color: var(--kn-ink) !important;
	font-weight: 800;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
	border-color: var(--kn-ink);
	background: var(--kn-ink) !important;
	color: var(--kn-paper) !important;
}

/* Errors are never shown by colour alone: a border and a text marker come with the colour. */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-width: 2.5px;
	border-color: #b3261e;
}

.fluentform .ff-el-is-error .error.text-danger::before {
	content: "Let op: ";
	font-weight: 700;
}

.fluentform .ff-message-success {
	padding: 1rem 1.25rem;
	border: var(--kn-line-ink);
	border-radius: var(--kn-radius);
	background: var(--kn-peach);
	color: var(--kn-ink);
	font-weight: 700;
}

.kn-cta .fluentform .ff-el-input--label label,
.kn-cta .fluentform .ff-el-form-check-label {
	color: var(--kn-paper);
}

/* ---------- Sticky ticket button, mobile only (markup added in functions.php) ---------- */
.kn-ticket-bar {
	display: none;
}

@media (max-width: 767px) {
	.kn-ticket-bar {
		display: block;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 999;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
		border-top: var(--kn-line);
		background: var(--kn-paper);
	}

	.kn-ticket-bar a {
		display: block;
		padding: 0.9rem 1rem;
		border-radius: var(--kn-radius);
		background: var(--kn-orange);
		color: var(--kn-ink);
		font-weight: 800;
		letter-spacing: 0.02em;
		text-align: center;
		text-decoration: none;
	}

	.kn-ticket-bar a:hover,
	.kn-ticket-bar a:focus-visible {
		background: var(--kn-ink);
		color: var(--kn-paper);
	}

	body {
		padding-bottom: 5.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ---------- Ticket buttons that are switched off (Settings > Ticketverkoop) ---------- */
/* They have no link at all (see inc/tickets.php), so they are grey and don't react to the mouse either. */
.kn-ticket-disabled {
	cursor: not-allowed;
}

.kn-btn .wp-block-button__link.kn-ticket-disabled,
.kn-btn .wp-block-button__link.kn-ticket-disabled:hover,
.kn-btn .wp-block-button__link.kn-ticket-disabled:focus,
.kn-btn .wp-block-button__link.kn-ticket-disabled:active {
	border-color: var(--kn-off-bg);
	background: var(--kn-off-bg);
	box-shadow: none;
	color: var(--kn-off-text);
	pointer-events: none;
}

/* The menu forces the orange with !important, so the grey version has to as well. */
.header-navigation ul.menu > li.kn-menu-tickets.kn-ticket-disabled > a,
.header-navigation ul.menu > li.kn-menu-tickets.kn-ticket-disabled > a:hover,
.mobile-navigation ul li.kn-menu-tickets.kn-ticket-disabled > a,
.mobile-navigation ul li.kn-menu-tickets.kn-ticket-disabled > a:hover {
	background: var(--kn-off-bg) !important;
	color: var(--kn-off-text) !important;
	pointer-events: none;
}

@media (max-width: 767px) {
	.kn-ticket-bar span.kn-ticket-disabled {
		display: block;
		padding: 0.9rem 1rem;
		border-radius: var(--kn-radius);
		background: var(--kn-off-bg);
		color: var(--kn-off-text);
		font-weight: 800;
		letter-spacing: 0.02em;
		text-align: center;
	}
}