/*
Theme Name: Aldenor
Theme URI: https://aldenor.org/
Author: Aldenor
Author URI: https://aldenor.org/
Description: Pagina fan non ufficiale in italiano su Dune: Awakening. Quota spezia, umidità della tuta e veglia del sietch, scritta da Agrigento. Nessun negozio e nessun file di gioco.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: aldenor
Tags: blog, entertainment
*/

/* =========================================================================
   1. Lettertypen — map fonts/, mai da un server esterno
   ========================================================================= */

@font-face {
	font-family: 'El Messiri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/el-messiri-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'El Messiri';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/el-messiri-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'El Messiri';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/el-messiri-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'El Messiri';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/el-messiri-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/assistant-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/assistant-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/assistant-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Assistant';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/assistant-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   2. Palette e reset
   ========================================================================= */

:root {
	--duna: #1a140c;
	--panel: #261c12;
	--haarlijn: #3a2e1c;
	--rand: #9a8468;
	--osso: #f2ead8;
	--polvere: #c4b090;
	--spezia: #d4a048;
	--acqua: #6a9aaa;
	--warn: #e07048;
	--misura: 72rem;
	--erg-h: 4.5rem;
}

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

html {
	scroll-padding-top: var(--erg-h);
	background: var(--duna);
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Assistant, sans-serif;
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--osso);
	background-color: var(--duna);
	background-image: linear-gradient(rgba(26, 20, 12, 0.9), rgba(26, 20, 12, 0.9)), url('images/texture-ondulazioni.jpg');
	background-size: auto, 48rem auto;
	min-width: 20rem;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

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

a:hover,
a:focus-visible {
	color: var(--osso);
}

:focus-visible {
	outline: 2px solid var(--acqua);
	outline-offset: 3px;
}

[hidden] {
	display: none !important;
}

h1,
h2,
h3,
.erg__nome {
	font-family: 'El Messiri', sans-serif;
	font-weight: 700;
	line-height: 1.2;
	color: var(--osso);
	letter-spacing: 0.01em;
}

h1 {
	font-size: clamp(1.8rem, 4vw, 3rem);
	margin: 0 0 0.6rem;
}

h2 {
	font-size: clamp(1.4rem, 2.6vw, 2rem);
	margin: 0 0 0.5rem;
}

h3 {
	font-size: 1.2rem;
	margin: 0 0 0.4rem;
}

p {
	margin: 0 0 0.9rem;
}

ul,
ol {
	margin: 0 0 0.9rem;
	padding-left: 1.2rem;
}

button,
input,
select,
textarea {
	font-family: Assistant, sans-serif;
	font-size: 1rem;
}

.cifra {
	font-family: Assistant, sans-serif;
	font-weight: 600;
	font-variant-numeric: tabular-nums lining-nums;
}

/* =========================================================================
   3. Scheletro
   ========================================================================= */

.erg {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--duna);
	border-bottom: 1px solid var(--haarlijn);
}

.erg__binnen {
	max-width: var(--misura);
	margin: 0 auto;
	padding: 0.55rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: var(--erg-h);
}

.erg__marca {
	display: inline-flex;
	align-items: baseline;
	gap: 0.15rem;
	text-decoration: none;
	color: var(--osso);
	min-height: 36px;
	padding: 0.25rem 0.15rem;
}

.erg__nome {
	font-size: 1.45rem;
	font-weight: 700;
}

.erg__o {
	position: relative;
	display: inline-block;
}

.erg__taglio {
	position: absolute;
	left: -0.05em;
	right: -0.08em;
	bottom: -0.12em;
	height: 0.14em;
	background: var(--spezia);
	transform: skewX(-32deg);
	pointer-events: none;
}

.erg__klop {
	margin-left: auto;
	display: none;
	align-items: center;
	gap: 0.45rem;
	min-height: 36px;
	min-width: 36px;
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--rand);
	background: var(--panel);
	color: var(--osso);
	cursor: pointer;
}

.erg__streepjes {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.22rem;
	width: 1.1rem;
	height: 1rem;
}

.erg__streepjes i {
	display: block;
	height: 2px;
	margin: 0;
	background: var(--osso);
}

.erg__nav {
	margin-left: auto;
}

.erg__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
}

.erg__lijst a {
	display: flex;
	align-items: center;
	min-height: 36px;
	padding: 0.35rem 0.65rem;
	color: var(--polvere);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.erg__lijst a:hover,
.erg__lijst .current-menu-item a,
.erg__lijst [aria-current="page"] {
	color: var(--osso);
	border-bottom-color: var(--spezia);
}

.muto {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 35;
	background: rgba(26, 20, 12, 0.72);
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
}

.overslaan {
	position: absolute;
	left: 0.75rem;
	top: -4rem;
	z-index: 60;
	background: var(--spezia);
	color: var(--duna);
	padding: 0.5rem 0.8rem;
	min-height: 36px;
	text-decoration: none;
	font-weight: 600;
}

.overslaan:focus {
	top: 0.5rem;
}

main {
	display: block;
}

.duna {
	max-width: var(--misura);
	margin: 0 auto;
	padding: 2rem 1rem;
}

.duna--panel {
	background: var(--panel);
	border-top: 1px solid var(--haarlijn);
	border-bottom: 1px solid var(--haarlijn);
	max-width: none;
	padding: 0;
}

.duna--panel .duna__binnen {
	max-width: var(--misura);
	margin: 0 auto;
	padding: 2rem 1rem;
}

.duna__kicker {
	font-family: Assistant, sans-serif;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spezia);
	margin: 0 0 0.35rem;
}

/* =========================================================================
   4. Bottoni
   ========================================================================= */

.dunabtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	min-width: 36px;
	padding: 0.55rem 1.05rem;
	border: 1px solid var(--spezia);
	background: var(--spezia);
	color: var(--duna);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	line-height: 1.2;
}

.dunabtn:hover,
.dunabtn:focus-visible {
	background: var(--osso);
	border-color: var(--osso);
	color: var(--duna);
}

.dunabtn--stil {
	background: transparent;
	color: var(--osso);
	border-color: var(--rand);
}

.dunabtn--stil:hover,
.dunabtn--stil:focus-visible {
	background: var(--panel);
	color: var(--osso);
	border-color: var(--acqua);
}

.dunabtn--keuze {
	background: var(--panel);
	color: var(--osso);
	border-color: var(--rand);
	flex: 1 1 8rem;
}

.dunabtn--keuze[aria-pressed="true"],
.dunabtn--aan {
	background: var(--spezia);
	color: var(--duna);
	border-color: var(--spezia);
}

.dunabtn--auto {
	border-style: dashed;
	border-color: var(--acqua);
}

.rijbtn {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* =========================================================================
   5. Hero, duo, carte
   ========================================================================= */

.spezia {
	position: relative;
	min-height: 28rem;
	display: flex;
	align-items: flex-end;
	background: var(--duna) center / cover no-repeat;
	color: var(--osso);
}

.spezia::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(26, 20, 12, 0.35) 0%, rgba(26, 20, 12, 0.82) 62%, var(--duna) 100%);
}

.spezia__binnen {
	position: relative;
	max-width: var(--misura);
	margin: 0 auto;
	padding: 4.5rem 1rem 2.4rem;
	width: 100%;
}

.spezia h1 {
	max-width: 18ch;
}

.spezia p {
	max-width: 42rem;
	color: var(--osso);
}

.duo {
	display: grid;
	gap: 1.25rem;
	align-items: center;
}

.duo img {
	width: 100%;
	border: 1px solid var(--haarlijn);
}

.dunalista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.duna__carta {
	background: var(--panel);
	border: 1px solid var(--haarlijn);
	display: flex;
	flex-direction: column;
}

.duna__carta img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.duna__carta-corpo {
	padding: 1rem 1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}

.duna__carta-corpo .dunabtn {
	align-self: flex-start;
}

.duna__carta--muta {
	min-height: 12rem;
	justify-content: center;
	padding: 1.2rem;
}

.sietch {
	position: relative;
	background: var(--duna) center / cover no-repeat;
	color: var(--osso);
}

.sietch::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(26, 20, 12, 0.88) 12%, rgba(26, 20, 12, 0.55) 100%);
}

.sietch__binnen {
	position: relative;
	max-width: var(--misura);
	margin: 0 auto;
	padding: 3rem 1rem;
}

.tuta {
	background: var(--duna) center / cover no-repeat;
	min-height: 10rem;
	display: flex;
	align-items: flex-end;
}

.tuta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(26, 20, 12, 0.62);
}

.tuta {
	position: relative;
}

.tuta__binnen {
	position: relative;
	max-width: var(--misura);
	margin: 0 auto;
	padding: 3rem 1rem 1.5rem;
	width: 100%;
}

/* =========================================================================
   6. Divisore dune
   ========================================================================= */

.dunanaht {
	display: block;
	width: 100%;
	height: 2.4rem;
	overflow: hidden;
	color: var(--rand);
}

.dunanaht svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* =========================================================================
   7. Widget
   ========================================================================= */

.quota,
.umidita,
.veglia,
.anello {
	background: var(--panel);
	border: 1px solid var(--rand);
	padding: 1.15rem 1rem 1.3rem;
}

.quota__creste,
.umidita__scelte,
.veglia__scelte,
.anello__freq {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 0.8rem 0;
}

.quota__stand,
.umidita__stand,
.veglia__stand,
.anello__stand {
	margin: 0.4rem 0 0.8rem;
	color: var(--osso);
}

.quota__warn {
	color: var(--warn);
}

fieldset {
	border: 1px solid var(--haarlijn);
	margin: 0 0 0.7rem;
	padding: 0.6rem 0.7rem 0.8rem;
	min-width: 0;
}

legend {
	padding: 0 0.4rem;
	color: var(--polvere);
	font-weight: 600;
}

/* =========================================================================
   8. Palette (voci) e ore di duna (diario)
   ========================================================================= */

.paletta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.85rem;
}

.paletta__stick {
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	gap: 0.8rem;
	align-items: start;
	background: var(--panel);
	border: 1px solid var(--haarlijn);
	padding: 0.85rem 1rem;
}

.paletta__tally {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
	padding-top: 0.2rem;
}

.paletta__tally i {
	display: block;
	height: 3px;
	background: var(--spezia);
}

.paletta__meta {
	font-family: Assistant, sans-serif;
	font-size: 0.88rem;
	color: var(--polvere);
}

.oraduna {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.oraduna__riga {
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 0.8rem;
	align-items: start;
	border-bottom: 1px solid var(--haarlijn);
	padding-bottom: 0.7rem;
}

.oraduna__chip {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0.2rem 0.4rem;
	border: 1px solid var(--rand);
	color: var(--spezia);
	font-family: Assistant, sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
}

.oraduna a {
	display: flex;
	align-items: center;
	min-height: 36px;
	text-decoration: none;
	color: var(--osso);
	font-family: 'El Messiri', sans-serif;
	font-weight: 700;
}

.oraduna a:hover {
	color: var(--spezia);
}

/* =========================================================================
   9. Persone, FAQ, form
   ========================================================================= */

.persone {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
}

.persone figure {
	margin: 0;
	background: var(--panel);
	border: 1px solid var(--haarlijn);
}

.persone img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.persone figcaption {
	padding: 0.8rem 1rem 1rem;
}

.domande details {
	border-bottom: 1px solid var(--haarlijn);
	padding: 0.55rem 0;
}

.domande summary {
	cursor: pointer;
	min-height: 36px;
	display: flex;
	align-items: center;
	font-weight: 600;
}

.modulo {
	display: grid;
	gap: 0.75rem;
	max-width: 36rem;
}

.modulo label {
	display: block;
	font-weight: 600;
	padding-bottom: 0.25rem;
}

.modulo input,
.modulo textarea,
.modulo select {
	width: 100%;
	min-height: 36px;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--rand);
	background: var(--duna);
	color: var(--osso);
}

.modulo textarea {
	min-height: 8rem;
	resize: vertical;
}

.esca {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.avviso {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--acqua);
	background: var(--panel);
	margin-bottom: 1rem;
}

.avviso--warn {
	border-color: var(--warn);
}

/* =========================================================================
   10. Cookie, footer, 404
   ========================================================================= */

.koekrand {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	background: var(--panel);
	border-top: 1px solid var(--rand);
	color: var(--osso);
}

.koekrand__binnen {
	max-width: var(--misura);
	margin: 0 auto;
	padding: 0.85rem 1rem 1rem;
	display: grid;
	gap: 0.75rem;
}

.koekrand p {
	margin: 0;
	color: var(--osso);
}

.koekrand__knoppen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
}

.koekrand__knoppen .dunabtn {
	width: 100%;
}

.voet {
	background: var(--panel);
	border-top: 1px solid var(--haarlijn);
	padding: 2rem 1rem 6.5rem;
}

.voet__binnen {
	max-width: var(--misura);
	margin: 0 auto;
	display: grid;
	gap: 1.2rem;
}

.voet__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.4rem;
}

.voet__lijst a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0.25rem 0.45rem;
	color: var(--polvere);
	text-decoration: none;
}

.voet__lijst a:hover {
	color: var(--osso);
}

.voet__dati {
	color: var(--polvere);
}

.voet__dati a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
}

.voet__verklaring {
	color: var(--polvere);
	font-size: 0.95rem;
}

.voet__verklaring strong {
	font-weight: 600;
	color: var(--osso);
	font-family: Assistant, sans-serif;
}

.smarrito {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem 1rem;
	max-width: var(--misura);
	margin: 0 auto;
}

.smarrito__cifra {
	font-family: Assistant, sans-serif;
	font-weight: 600;
	font-size: clamp(4rem, 14vw, 8rem);
	color: var(--spezia);
	line-height: 0.9;
	margin: 0 0 0.6rem;
}

.koekwis {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
}

.tavola-scorr {
	overflow-x: auto;
	margin: 0 0 1rem;
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 28rem;
}

th,
td {
	border: 1px solid var(--haarlijn);
	padding: 0.5rem 0.65rem;
	text-align: left;
	vertical-align: top;
}

th {
	background: var(--panel);
	font-weight: 600;
}

code {
	font-family: Assistant, sans-serif;
	font-weight: 600;
	color: var(--acqua);
}

.js .opdaagt {
	opacity: 0;
	transform: translateY(14px);
}

.js .opdaagt.opdaagt--op {
	opacity: 1;
	transform: none;
}

/* =========================================================================
   11. Larghezze 360–1440
   ========================================================================= */

@media (min-width: 40em) {
	.duo {
		grid-template-columns: 1fr 1fr;
	}

	.dunalista {
		grid-template-columns: 1fr 1fr;
	}

	.paletta {
		grid-template-columns: 1fr 1fr;
	}

	.persone {
		grid-template-columns: 1fr 1fr;
	}

	.voet__binnen {
		grid-template-columns: 1.2fr 1fr 1.4fr;
	}
}

@media (min-width: 62em) {
	.dunalista {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.erg__klop {
		display: none !important;
	}

	.erg__nav {
		display: block !important;
	}

	.muto {
		display: none !important;
	}
}

@media (max-width: 61.99em) {
	.erg__klop {
		display: inline-flex;
	}

	.erg__nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		background: var(--duna);
		border-bottom: 1px solid var(--rand);
		padding: 0.5rem 1rem 0.9rem;
	}

	.erg--aperto .erg__nav {
		display: block;
	}

	.erg--aperto .muto {
		display: block;
	}

	.erg__lijst {
		flex-direction: column;
	}

	.erg__dicht {
		display: none;
	}

	.erg--aperto .erg__open {
		display: none;
	}

	.erg--aperto .erg__dicht {
		display: inline;
	}
}

@media (min-width: 62em) {
	.erg__open,
	.erg__dicht {
		display: none;
	}
}

@media (max-width: 24.99em) {
	.koekrand__knoppen {
		grid-template-columns: 1fr;
	}

	.oraduna__riga {
		grid-template-columns: 1fr;
	}
}