/*
Theme Name: Näsets Rollspel
Theme URI: https://www.nasetsrollspel.se/
Author: Näsets Rollspel
Description: Hybridtema för rollspelsförening. Klassiska PHP-mallar med theme.json för designtokens. Byggt för pluginet Näsets Rollspel – Spelpass.
Version: 1.4.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nasets-rollspel
Tags: custom-menu, translation-ready, block-styles, wide-blocks
*/

/* ---------------------------------------------------------------------
 * Tokens
 *
 * Färgerna kommer från Näset: blekt papper, kall bläck, ljungen på
 * Skanörs ljunghed, och havet. Medvetet inte fantasypalett – sajten ska
 * fungera lika bra för Vaesen och Call of Cthulhu som för D&D.
 * ------------------------------------------------------------------ */

:root {
	--nr-black: #17201F;
	--nr-paper: #EDEEE9;
	--nr-paper-djup: #E3E4DE;
	--nr-ljung: #7A4A63;
	--nr-hav: #3E5A69;
	--nr-sand: #D4CFC1;
	--nr-dampad: #6B6F68;
	--nr-kant: #DFDBD0;

	--nr-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--nr-brod: "Source Serif 4", Georgia, serif;
	--nr-data: "IBM Plex Mono", ui-monospace, monospace;

	--nr-matt: min(68rem, 100% - 3rem);
	--nr-matt-smal: min(44rem, 100% - 3rem);
	--nr-radie-bas: 0;
}

/* Variabler som pluginet läser för sina egna komponenter. */
.nr-kalender,
.nr-mina-bokningar,
.nr-deltagare,
.nr-bokning {
	--nr-dampad: #6B6F68;
	--nr-ledigt: #3E5A69;
	--nr-fullt: #7A4A63;
	--nr-varning: #8C3A32;
}

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

body {
	margin: 0;
	background: var(--nr-paper);
	color: var(--nr-black);
	font-family: var(--nr-brod);
	font-size: 1.0625rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--nr-display);
	font-weight: 600;
	line-height: 1.18;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
}

h1 { font-size: clamp( 2rem, 1.4rem + 2.4vw, 3rem ); }
h2 { font-size: clamp( 1.5rem, 1.2rem + 1.2vw, 2rem ); }
h3 { font-size: 1.25rem; }

a {
	color: var(--nr-ljung);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 2px;
}

:focus-visible {
	outline: 2px solid var(--nr-ljung);
	outline-offset: 2px;
}

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

/* Hoppa till innehåll ------------------------------------------------- */

.nr-hoppa {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--nr-black);
	color: var(--nr-paper);
	font-family: var(--nr-data);
	font-size: 0.875rem;
}

.nr-hoppa:focus {
	left: 0;
}

/* Layout -------------------------------------------------------------- */

.nr-matt {
	width: var(--nr-matt);
	margin-inline: auto;
}

.nr-matt-smal {
	width: var(--nr-matt-smal);
	margin-inline: auto;
}

.nr-sida {
	padding-block: 2.5rem 5rem;
}

/* Sidhuvud ------------------------------------------------------------ */

.nr-huvud {
	border-bottom: 1px solid var(--nr-sand);
}

.nr-huvud__inre {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 1.5rem 1rem;
}

.nr-logga {
	font-family: var(--nr-display);
	font-weight: 600;
	font-size: 1.25rem;
	letter-spacing: -0.025em;
	color: var(--nr-black);
	text-decoration: none;
}

.nr-logga:hover {
	color: var(--nr-ljung);
}

/* Navigation ---------------------------------------------------------- */

.nr-huvud__hoger {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
}

.nr-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--nr-display);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.nr-nav a {
	color: var(--nr-black);
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
}

.nr-nav a:hover,
.nr-nav .current-menu-item > a,
.nr-nav .current_page_item > a {
	border-bottom-color: var(--nr-ljung);
}

/* Kontomeny ----------------------------------------------------------- */

.nr-konto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.875rem;
	font-family: var(--nr-data);
	font-size: 0.8125rem;
}

.nr-konto__lank {
	color: var(--nr-dampad);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.nr-konto__lank:hover {
	color: var(--nr-black);
	border-bottom-color: var(--nr-ljung);
}

.nr-konto__lank--tyst {
	font-size: 0.75rem;
}

.nr-konto__namn {
	color: #9A9E96;
	font-size: 0.75rem;
}

.nr-konto .nr-knapp {
	margin-top: 0;
}

/* Mobilmenyknapp ------------------------------------------------------ */

.nr-meny-knapp {
	display: none;
	background: none;
	border: 1px solid var(--nr-sand);
	border-radius: 0;
	padding: 0.375rem 0.875rem;
	font-family: var(--nr-data);
	font-size: 0.8125rem;
	color: var(--nr-black);
	cursor: pointer;
}

.nr-meny-knapp__text {
	pointer-events: none;
}

.nr-meny-knapp[aria-expanded="true"] {
	background: var(--nr-black);
	border-color: var(--nr-black);
	color: var(--nr-paper);
}

/* Hero ---------------------------------------------------------------- */

.nr-hero {
	background: var(--nr-black);
	color: var(--nr-paper);
	padding-block: 3.5rem 3rem;
}

.nr-hero__eyebrow {
	font-family: var(--nr-data);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: #9AA39C;
	text-transform: lowercase;
	margin: 0 0 0.875rem;
}

.nr-hero__rubrik {
	font-size: clamp( 1.875rem, 1.2rem + 2.8vw, 3rem );
	line-height: 1.12;
	letter-spacing: -0.028em;
	color: var(--nr-paper);
	margin: 0 0 0.75rem;
	max-width: 18ch;
}

.nr-hero__ingress {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: #B4BAB4;
	margin: 0;
	max-width: 44ch;
}

.nr-hero__handlingar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin: 2rem 0 0;
}

.nr-hero__lank {
	font-family: var(--nr-data);
	font-size: 0.8125rem;
	color: #B4BAB4;
	text-underline-offset: 0.25em;
}

.nr-hero__lank:hover {
	color: var(--nr-paper);
}

/* Nästa bord ----------------------------------------------------------
 *
 * Det mest handlingsbara på sajten. Den som återkommer vill veta en
 * enda sak: när är nästa gång och finns det plats.
 * ------------------------------------------------------------------- */

.nr-nasta {
	background: var(--nr-ljung);
	color: #F6EFF2;
	padding-block: 1.25rem;
}

.nr-nasta__inre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

.nr-nasta__text {
	min-width: 0;
}

.nr-nasta__eyebrow {
	font-family: var(--nr-data);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: #E0CBD6;
	margin: 0 0 0.25rem;
}

.nr-nasta__titel {
	font-size: 1.0625rem;
	margin: 0;
}

.nr-nasta__titel a {
	color: #F6EFF2;
	text-decoration: none;
}

.nr-nasta__titel a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.nr-nasta__meta {
	font-family: var(--nr-data);
	font-size: 0.75rem;
	color: #E0CBD6;
	margin: 0.1875rem 0 0;
}

.nr-nasta__platser {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.375rem;
}

.nr-nasta .nr-platser__ruta {
	border-color: #C9A8B8;
}

.nr-nasta .nr-platser__ruta--tagen {
	background: #F6EFF2;
	border-color: #F6EFF2;
}

.nr-nasta .nr-platser__avdelare {
	border-top-color: #C9A8B8;
}

.nr-nasta .nr-platser__text,
.nr-nasta .nr-platser__text--ledigt,
.nr-nasta .nr-platser__text--fullt {
	color: #F6EFF2;
}

/* Sektioner ----------------------------------------------------------- */

.nr-sektion {
	padding-block: 2.75rem;
}

.nr-sektion--kalender {
	border-top: 1px solid var(--nr-sand);
}

.nr-sektion__rubrik {
	font-family: var(--nr-data);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	color: #7C817A;
	text-transform: lowercase;
	margin: 0 0 1.25rem;
}

.nr-sektion__handling {
	margin-top: 2rem;
}

/* Systemkort ----------------------------------------------------------
 *
 * Bildytan är avsedd för illustrationer per spelsystem. Utan bild
 * visas en färgad yta som varierar per kort, så rutnätet inte ser
 * trasigt ut innan bilderna finns på plats.
 * ------------------------------------------------------------------- */

.nr-systemkort {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 11rem, 1fr ) );
	gap: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nr-systemkort__kort a {
	display: block;
	border: 1px solid var(--nr-sand);
	background: #E6E7E1;
	text-decoration: none;
	color: var(--nr-black);
	transition: border-color 120ms ease;
}

.nr-systemkort__kort a:hover {
	border-color: var(--nr-ljung);
}

.nr-systemkort__bild {
	display: block;
	height: 4.5rem;
	overflow: hidden;
	background: var(--nr-hav);
}

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

.nr-systemkort__kort:nth-child(3n+2) .nr-systemkort__bild--tom { background: #4A5A4C; }
.nr-systemkort__kort:nth-child(3n+3) .nr-systemkort__bild--tom { background: #6B4A55; }

.nr-systemkort__innehall {
	display: block;
	padding: 0.5625rem 0.6875rem;
}

.nr-systemkort__namn {
	display: block;
	font-family: var(--nr-display);
	font-weight: 600;
	font-size: 0.875rem;
}

.nr-systemkort__antal {
	display: block;
	font-family: var(--nr-data);
	font-size: 0.65625rem;
	color: var(--nr-dampad);
	margin-top: 0.125rem;
}

/* Så går det till ------------------------------------------------------
 *
 * Numreringen är befogad här: stegen är en faktisk sekvens, inte
 * dekoration.
 * ------------------------------------------------------------------- */

.nr-steg {
	background: var(--nr-paper-djup);
	border-block: 1px solid var(--nr-sand);
	padding-block: 2.5rem;
}

.nr-steg__lista {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 13rem, 1fr ) );
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.nr-steg__lista li {
	border-top: 2px solid var(--nr-ljung);
	padding-top: 0.875rem;
}

.nr-steg__lista p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #3A423E;
}

/* Månadsrubrik i kalendern -------------------------------------------- */

.nr-kalender__manad {
	font-family: var(--nr-data);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	color: #7C817A;
	text-transform: lowercase;
	margin: 2.5rem 0 0.875rem;
	border: 0;
	padding: 0;
}

.nr-kalender__manad:first-child {
	margin-top: 0;
}

/* Kalenderpost -------------------------------------------------------- */

.nr-kalender {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nr-kalender__pass {
	display: flex;
	gap: 1.125rem;
	padding: 1.0625rem 0;
	border-bottom: 1px solid var(--nr-kant);
}

.nr-kalender__pass--installt {
	opacity: 0.5;
}

.nr-kalender__datum {
	flex: 0 0 2.25rem;
	text-align: center;
	line-height: 1;
	font-family: var(--nr-data);
}

.nr-kalender__dag {
	display: block;
	font-size: 1.5rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.nr-kalender__veckodag {
	display: block;
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	color: #7C817A;
	margin-top: 0.2rem;
}

.nr-kalender__innehall {
	flex: 1 1 auto;
	min-width: 0;
}

.nr-kalender__titel {
	font-size: 1.0625rem;
	margin: 0 0 0.1875rem;
}

.nr-kalender__titel a {
	color: var(--nr-black);
	text-decoration: none;
}

.nr-kalender__titel a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--nr-ljung);
}

.nr-kalender__meta {
	font-family: var(--nr-data);
	font-size: 0.71875rem;
	color: var(--nr-dampad);
	margin: 0 0 0.5rem;
}

.nr-kalender__platser {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5625rem;
	margin: 0;
}

/* Platsindikator -------------------------------------------------------
 *
 * Signaturelementet. Fyllda rutor för tagna platser, tomma för lediga,
 * streckade för reservkön. Informationen sitter i formen, inte i färgen,
 * så den fungerar även för den som inte skiljer färgerna åt.
 * ------------------------------------------------------------------- */

.nr-platser {
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

.nr-platser__ruta {
	width: 11px;
	height: 11px;
	display: block;
	border: 1px solid #9A9E96;
}

.nr-platser__ruta--tagen {
	background: var(--nr-black);
	border-color: var(--nr-black);
}

.nr-platser__ruta--reserv {
	border-style: dashed;
	border-color: #A08B98;
}

.nr-platser__avdelare {
	width: 9px;
	border-top: 1px solid #C0BDB2;
	display: block;
	margin: 0 2px;
}

.nr-platser__text {
	font-family: var(--nr-data);
	font-size: 0.71875rem;
}

.nr-platser__text--ledigt { color: var(--nr-hav); }
.nr-platser__text--fullt  { color: var(--nr-ljung); }

.nr-markning {
	font-family: var(--nr-data);
	font-size: 0.65625rem;
	letter-spacing: 0.04em;
	color: #4A524E;
	border: 1px solid #C0BDB2;
	padding: 1px 7px;
}

/* Faktaruta ----------------------------------------------------------- */

.nr-fakta {
	display: grid;
	grid-template-columns: minmax(5.5rem, auto) 1fr;
	gap: 0.4375rem 1.5rem;
	margin: 2rem 0;
	padding: 1.25rem 0;
	border-top: 1px solid var(--nr-sand);
	border-bottom: 1px solid var(--nr-sand);
}

.nr-fakta dt {
	font-family: var(--nr-data);
	font-size: 0.71875rem;
	letter-spacing: 0.08em;
	color: #7C817A;
	padding-top: 0.15rem;
}

.nr-fakta dd {
	margin: 0;
	font-family: var(--nr-data);
	font-size: 0.8125rem;
	color: var(--nr-black);
}

.nr-fakta__hitta-hit {
	font-size: 0.9375rem;
	color: #4A524E;
	margin: -1rem 0 2rem;
}

/* Bokning ------------------------------------------------------------- */

.nr-bokning {
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--nr-paper-djup);
}

.nr-bokning__formular label {
	display: block;
	font-family: var(--nr-data);
	font-size: 0.71875rem;
	letter-spacing: 0.06em;
	color: #4A524E;
	margin: 0.875rem 0 0.3125rem;
}

.nr-bokning__formular input[type="text"],
.nr-bokning__formular textarea {
	width: 100%;
	max-width: 26rem;
	padding: 0.5rem 0.625rem;
	border: 1px solid var(--nr-sand);
	border-radius: 0;
	background: var(--nr-paper);
	font-family: var(--nr-brod);
	font-size: 1rem;
	color: var(--nr-black);
}

.nr-bokning__formular input[type="text"]:focus,
.nr-bokning__formular textarea:focus {
	border-color: var(--nr-ljung);
	outline: none;
	box-shadow: 0 0 0 2px rgba( 122, 74, 99, 0.18 );
}

.nr-bokning__status {
	font-family: var(--nr-data);
	font-size: 0.8125rem;
	margin: 0 0 0.75rem;
}

.nr-bokning__status--bokad {
	color: var(--nr-hav);
}

.nr-bokning__stangd,
.nr-hjalptext {
	font-family: var(--nr-data);
	font-size: 0.75rem;
	color: var(--nr-dampad);
	margin: 0.625rem 0 0;
}

.nr-bokning__svar {
	font-family: var(--nr-data);
	font-size: 0.8125rem;
	margin-top: 0.875rem;
}

.nr-bokning__svar:empty { display: none; }
.nr-bokning__svar--ok   { color: var(--nr-hav); }
.nr-bokning__svar--fel  { color: #8C3A32; }

/* Knappar ------------------------------------------------------------- */

.nr-knapp {
	display: inline-block;
	margin-top: 1.125rem;
	padding: 0.625rem 1.375rem;
	border: 1px solid var(--nr-black);
	border-radius: 0;
	background: var(--nr-black);
	color: var(--nr-paper);
	font-family: var(--nr-data);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	text-decoration: none;
	transition: background 120ms ease, color 120ms ease;
}

.nr-knapp:hover {
	background: var(--nr-ljung);
	border-color: var(--nr-ljung);
	color: var(--nr-paper);
}

.nr-knapp:disabled {
	opacity: 0.45;
	cursor: progress;
}

.nr-knapp--sekundar {
	background: none;
	color: var(--nr-dampad);
	border-color: var(--nr-sand);
}

.nr-knapp--sekundar:hover {
	background: none;
	color: var(--nr-ljung);
	border-color: var(--nr-ljung);
}

/* På mörk bakgrund vänds knappen. */
.nr-knapp--ljus {
	background: var(--nr-paper);
	border-color: var(--nr-paper);
	color: var(--nr-black);
	margin-top: 0;
}

.nr-knapp--ljus:hover {
	background: var(--nr-ljung);
	border-color: var(--nr-ljung);
	color: var(--nr-paper);
}

.nr-knapp--liten {
	margin-top: 0;
	padding: 0.25rem 0.75rem;
	font-size: 0.71875rem;
}

/* Deltagare ----------------------------------------------------------- */

.nr-deltagare {
	margin: 2rem 0;
}

.nr-deltagare__rubrik {
	font-family: var(--nr-data);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: #7C817A;
	margin: 0 0 0.625rem;
}

.nr-deltagare__lista,
.nr-mina-bokningar {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nr-deltagare__lista li {
	padding: 0.4375rem 0;
	border-bottom: 1px solid var(--nr-kant);
	font-size: 0.9375rem;
}

.nr-deltagare__karaktar {
	font-family: var(--nr-data);
	font-size: 0.75rem;
	color: var(--nr-dampad);
	margin-left: 0.375rem;
}

.nr-deltagare__kommentar {
	margin: 0.1875rem 0 0;
	font-size: 0.875rem;
	color: #4A524E;
	font-style: italic;
}

.nr-status {
	font-family: var(--nr-data);
	font-size: 0.65625rem;
	letter-spacing: 0.04em;
	padding: 1px 6px;
	border: 1px solid currentColor;
	margin-left: 0.375rem;
}

.nr-status--reserv  { color: var(--nr-dampad); }
.nr-status--varning { color: #8C3A32; }
.nr-status--fullt,
.nr-status--installt { color: var(--nr-ljung); }
.nr-status--ledigt  { color: var(--nr-hav); }
.nr-status--nyborjare { color: #4A524E; }

/* Mina bokningar ------------------------------------------------------ */

.nr-mina-bokningar li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--nr-kant);
}

.nr-mina-bokningar__tid {
	font-family: var(--nr-data);
	font-size: 0.75rem;
	color: var(--nr-dampad);
}

/* Enskilt spelpass ---------------------------------------------------- */

.nr-pass__system {
	font-family: var(--nr-data);
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	color: var(--nr-ljung);
	margin: 0 0 0.5rem;
}

.nr-pass__titel {
	margin: 0 0 1.5rem;
}

.nr-pass__brodtext p:first-child {
	margin-top: 0;
}

/* Systemillustration --------------------------------------------------
 *
 * Plats för fantasyelement kopplade till spelsystemet – en drake för
 * D&D, något annat för Vaesen. Bilden sätts per term, inte globalt,
 * så sajten inte låser sig vid en enda genre.
 * ------------------------------------------------------------------- */

.nr-systembild {
	margin: 0 0 1.5rem;
	max-height: 9rem;
	overflow: hidden;
	border-bottom: 1px solid var(--nr-sand);
}

.nr-systembild img {
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Tomt tillstånd ------------------------------------------------------ */

.nr-tomt {
	font-family: var(--nr-data);
	font-size: 0.875rem;
	color: var(--nr-dampad);
	padding: 2rem 0;
}

/* Sidfot -------------------------------------------------------------- */

.nr-fot {
	border-top: 1px solid var(--nr-sand);
	padding-block: 2rem 3rem;
	font-family: var(--nr-data);
	font-size: 0.75rem;
	color: var(--nr-dampad);
}

.nr-fot__inre {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}

.nr-fot a {
	color: var(--nr-dampad);
}

/* Paginering ---------------------------------------------------------- */

.nr-paginering {
	margin-top: 2.5rem;
	font-family: var(--nr-data);
	font-size: 0.8125rem;
}

.nr-paginering .page-numbers {
	padding: 0.25rem 0.5rem;
	text-decoration: none;
	color: var(--nr-dampad);
}

.nr-paginering .current {
	color: var(--nr-black);
	border-bottom: 2px solid var(--nr-ljung);
}

/* Mobil --------------------------------------------------------------- */

@media ( max-width: 860px ) {
	.nr-meny-knapp {
		display: block;
	}

	.nr-huvud__inre {
		align-items: center;
	}

	.nr-huvud__hoger {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		padding-block: 1rem 0.5rem;
		border-top: 1px solid var(--nr-kant);
	}

	.nr-huvud__hoger.ar-oppen {
		display: flex;
	}

	.nr-nav ul {
		flex-direction: column;
		gap: 0.75rem;
	}

	.nr-nav a {
		font-size: 1.0625rem;
	}
}

@media ( max-width: 640px ) {
	:root {
		--nr-matt: min(68rem, 100% - 2rem);
		--nr-matt-smal: min(44rem, 100% - 2rem);
	}

	.nr-kalender__pass {
		gap: 0.875rem;
	}

	.nr-fakta {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.nr-fakta dt {
		padding-top: 0.625rem;
	}

	.nr-bokning {
		padding: 1.125rem;
	}

	.nr-nasta__inre {
		flex-direction: column;
		align-items: flex-start;
	}

	.nr-nasta__platser {
		align-items: flex-start;
	}

	.nr-hero {
		padding-block: 2.5rem 2.25rem;
	}
}

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

/* Utskrift – spelledare skriver ut deltagarlistan till bordet --------- */

@media print {
	.nr-huvud,
	.nr-fot,
	.nr-bokning,
	.nr-hoppa {
		display: none;
	}

	body {
		background: #fff;
		font-size: 11pt;
	}
}

/* Formulär i temats formspråk ----------------------------------------- */

.nr-formular__grupp {
	border-top-color: var(--nr-sand);
}

.nr-formular__grupp legend {
	font-family: var(--nr-data);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	color: #7C817A;
	text-transform: lowercase;
}

.nr-formular__falt label {
	font-family: var(--nr-data);
	font-size: 0.71875rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: #4A524E;
}

.nr-formular__falt input[type="text"],
.nr-formular__falt input[type="date"],
.nr-formular__falt input[type="time"],
.nr-formular__falt input[type="number"],
.nr-formular__falt textarea,
.nr-formular__falt select {
	background: var(--nr-paper);
	border-color: var(--nr-sand);
	border-radius: 0;
	font-family: var(--nr-brod);
	color: var(--nr-black);
}

.nr-formular__falt input:focus,
.nr-formular__falt textarea:focus,
.nr-formular__falt select:focus {
	border-color: var(--nr-ljung);
	outline: none;
	box-shadow: 0 0 0 2px rgba( 122, 74, 99, 0.18 );
}

.nr-formular__falt input[type="date"],
.nr-formular__falt input[type="time"],
.nr-formular__falt input[type="number"] {
	font-family: var(--nr-data);
	font-size: 0.9375rem;
}

.nr-formular__hjalp {
	font-family: var(--nr-data);
	font-size: 0.6875rem;
}

.nr-formular__kryss label {
	font-family: var(--nr-brod);
	font-size: 0.9375rem;
}

.nr-formular__fel {
	border-left-color: #8C3A32;
	background: rgba( 140, 58, 50, 0.06 );
	font-size: 0.9375rem;
}

.nr-mina-spelbord__titel {
	font-family: var(--nr-display);
	color: var(--nr-black);
	text-decoration: none;
}

.nr-mina-spelbord__titel:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-color: var(--nr-ljung);
}

.nr-mina-spelbord__meta {
	font-family: var(--nr-data);
	font-size: 0.71875rem;
}

.nr-mina-spelbord__rad {
	border-bottom-color: var(--nr-kant);
}

/* Kontoformulär i temats formspråk ------------------------------------ */

.nr-konto-formular input[type="email"],
.nr-konto-formular input[type="password"] {
	background: var(--nr-paper);
	border-color: var(--nr-sand);
	border-radius: 0;
	font-family: var(--nr-brod);
	color: var(--nr-black);
}

.nr-konto-formular input[type="email"]:focus,
.nr-konto-formular input[type="password"]:focus {
	border-color: var(--nr-ljung);
	outline: none;
	box-shadow: 0 0 0 2px rgba( 122, 74, 99, 0.18 );
}

.nr-konto-formular__vaxel,
.nr-konto-formular__fot {
	font-family: var(--nr-data);
	font-size: 0.75rem;
}

.nr-konto-formular__fot {
	border-top-color: var(--nr-sand);
}

.nr-konto-formular__klart {
	border-left-color: var(--nr-hav);
	background: rgba( 62, 90, 105, 0.07 );
	font-size: 0.9375rem;
}

.nr-kryssrutor__val {
	font-family: var(--nr-brod);
	font-size: 0.9375rem;
}

.nr-formular__kryssrad {
	font-family: var(--nr-brod);
	font-size: 0.9375rem;
}

.nr-deltagare__uppgifter dt {
	font-family: var(--nr-data);
	font-size: 0.6875rem;
	letter-spacing: 0.06em;
}

.nr-deltagare__uppgifter dd {
	font-size: 0.875rem;
}

/* Välkomstremsa i temats formspråk ------------------------------------ */

.nr-valkomst {
	background: var(--nr-hav);
	color: var(--nr-paper);
}

.nr-valkomst__inre {
	width: var(--nr-matt);
	padding-block: 0.9375rem;
}

.nr-valkomst__text {
	font-size: 0.9375rem;
}

.nr-valkomst__lankar {
	font-family: var(--nr-data);
	font-size: 0.75rem;
}

.nr-valkomst__lankar a {
	color: var(--nr-paper);
}

.nr-kontonav {
	font-family: var(--nr-data);
	font-size: 0.75rem;
	border-bottom-color: var(--nr-sand);
}

.nr-kontonav a {
	color: var(--nr-dampad);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.nr-kontonav a:hover {
	color: var(--nr-black);
	border-bottom-color: var(--nr-ljung);
}

/* Systemmotiv --------------------------------------------------------- */

.nr-motiv {
	display: block;
	width: 100%;
	height: 100%;
}

.nr-systembild .nr-motiv {
	height: 9rem;
}

.nr-systemkort__bild .nr-motiv {
	height: 4.5rem;
}