/* Ariadne sito: veste grafica sopra Twenty Twenty-One.
   Colori presi dall'icona (notte e lampada del faro). Tutto in rem, per rispettare lo zoom. */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url(font/atkinson-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url(font/atkinson-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url(font/atkinson-latin-700-normal.woff2) format("woff2"); }

:root {
	--a-notte: #00347c;
	--a-lampada: #ffb000;
	--a-carta: #f6f8fc;
	--a-riquadro: #e4ecf7;
	--a-testo: #0d2142;
	--a-tenue: #41536f;
	--a-link: #00347c;
	--a-bordo: #b9c8de;
	--a-larghezza: 77rem;

	--global--color-background: var(--a-carta);
	--global--color-primary: var(--a-testo);
	--global--color-secondary: var(--a-tenue);
	--global--color-primary-hover: var(--a-link);
	--global--color-secondary-hover: var(--a-link);
	--global--color-border: var(--a-bordo);
	--global--font-primary: "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, sans-serif;
	--global--font-secondary: "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, sans-serif;
	--responsive--aligndefault-width: 100%;
	--responsive--alignwide-width: 100%;
	--responsive--alignfull-width: 100%;
}

@media (prefers-color-scheme: dark) {
	:root {
		--a-carta: #0b1730;
		--a-riquadro: #14274b;
		--a-testo: #edf2fb;
		--a-tenue: #b8c6dd;
		--a-link: #ffc94d;
		--a-bordo: #35507f;
	}
}

html { background: var(--a-carta); }

body {
	background: var(--a-carta);
	color: var(--a-testo);
	font-family: var(--global--font-primary);
	font-size: 1.1875rem;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .entry-title, .page-title, .widget-title {
	font-family: var(--global--font-primary);
	font-weight: 700;
	line-height: 1.2;
	color: var(--a-testo);
}

.singular .entry-title, h1.entry-title, .page-title { font-size: 2.5rem; font-weight: 700; }
.site-main .entry-title { font-size: 1.875rem; }
.singular .site-main .entry-title { font-size: 2.5rem; }
.entry-content h2 { font-size: 1.75rem; margin-top: 2.5rem; }
.entry-content h3 { font-size: 1.375rem; margin-top: 2rem; }

a, .site a:not(.wp-block-button__link) { color: var(--a-link); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .14em; }

/* Il fuoco si vede su qualsiasi sfondo: anello chiaro dentro uno scuro */
a:focus, button:focus, input:focus, textarea:focus, select:focus,
.primary-navigation a:focus, .site-title a:focus {
	background: none;
	color: inherit;
	text-decoration: underline;
	outline: .1875rem solid var(--a-lampada);
	outline-offset: .125rem;
	box-shadow: 0 0 0 .375rem var(--a-notte);
	border-radius: .125rem;
}

#page .skip-link:focus { background: #fff; color: #00347c; }

/* Griglia della pagina: testata e piede a tutta larghezza, testo e colonna laterale al centro */
#page {
	display: grid;
	grid-template-columns:
		minmax(1.25rem, 1fr)
		minmax(0, calc(var(--a-larghezza) - 24.5rem))
		3.5rem
		minmax(0, 21rem)
		minmax(1.25rem, 1fr);
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

#page > .skip-link { position: absolute; }

/* Testata */
#masthead {
	grid-column: 1 / -1;
	display: block;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 1.75rem max(1.25rem, calc((100% - var(--a-larghezza)) / 2)) 0;
	background: var(--a-notte);
	color: #fff;
}

#masthead .site-logo {
	position: relative;
	z-index: 1;
	width: 5.5rem;
	height: 5.5rem;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: left;
}

#masthead .site-logo .custom-logo {
	display: block;
	width: 5.5rem;
	height: 5.5rem;
	max-width: none;
	max-height: none;
	border-radius: 22%;
}

/* La linea sotto il titolo e' il filo: sale nella mappa fino al punto d'arrivo */
#masthead .site-branding {
	margin: -5.5rem 0 0;
	padding: 6.5rem 0 1.25rem;
	max-width: none;
	border-bottom: .25rem solid var(--a-lampada);
	background: url(mappa.svg) no-repeat right bottom / auto 100%;
}

#masthead .site-title {
	margin: 0;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.1;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
}

#masthead .site-title a { color: #fff; font-weight: 700; text-decoration: none; }
#masthead .site-title a:hover { text-decoration: underline; }

#masthead .site-description {
	margin: .375rem 0 0;
	font-size: 1.3125rem;
	line-height: 1.3;
	color: #fff;
}

/* Menu */
#masthead .primary-navigation { margin: 0; max-width: none; color: #fff; }
#masthead .primary-menu-container { margin: 0; padding: 0; }

#masthead .primary-navigation > div > .menu-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0 1.75rem;
	margin: 0;
	padding: .375rem 0 .5rem;
}

#masthead .primary-navigation .menu-wrapper > li { margin: 0; }

#masthead .primary-navigation .menu-wrapper > li > a {
	display: block;
	padding: .625rem 0;
	font-size: 1.125rem;
	font-weight: 400;
	color: #fff;
	text-decoration: none;
}

#masthead .primary-navigation .menu-wrapper > li > a:hover,
#masthead .primary-navigation .current-menu-item > a {
	text-decoration: underline;
	text-decoration-color: var(--a-lampada);
	text-decoration-thickness: .1875rem;
	text-underline-offset: .35em;
}

#masthead .primary-navigation .current-menu-item > a { font-weight: 700; }
#masthead .primary-navigation .lang-item:not(.lang-item ~ .lang-item) { margin-left: auto; }
#masthead .primary-navigation .lang-item a { font-size: 1rem; }

#masthead .menu-button-container .button { color: #fff; background: none; border: 0; }

/* Colonna del testo */
#content {
	grid-column: 2;
	min-width: 0;
	margin: 0;
	padding: 2.75rem 0 3.5rem;
}

#primary, .site-main { max-width: none; margin: 0; padding: 0; }
.site-main > article, .entry-header, .entry-content, .entry-footer, .page-header { max-width: none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.singular .entry-header, .entry-header, .page-header { border: 0; padding-bottom: 0; margin-bottom: 1.5rem; }
.site-main > article { margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: .0625rem solid var(--a-bordo); }
.singular .site-main > article { border: 0; margin-bottom: 0; padding-bottom: 0; }
.entry-content p, .entry-content li { line-height: 1.6; }
.entry-content > p, .entry-content > ul, .entry-content > ol { max-width: 41rem; margin-left: 0; }

/* Video e audio */
.entry-content iframe.ariadne-video { display: block; width: 100%; max-width: 41rem; height: auto; aspect-ratio: 16 / 9; margin: 0 0 1.5rem; border: 0; border-radius: .5rem; }
.entry-content audio { display: block; width: 100%; max-width: 41rem; }

/* Rassegna stampa */
.ariadne-rassegna { padding-left: 1.25rem; }
.ariadne-rassegna li { margin-bottom: .875rem; line-height: 1.45; }
.ariadne-rassegna audio { margin-top: .5rem; }

/* Colonna laterale */
aside.widget-area {
	grid-column: 4;
	display: block;
	max-width: none;
	margin: 2.75rem 0 3.5rem;
	padding: 0;
	font-size: 1rem;
}

aside.widget-area > * { margin: 0 0 2.25rem; }

aside.widget-area .widget-title,
aside.widget-area h2 {
	margin: 0 0 .75rem;
	font-size: 1.25rem;
	text-transform: none;
	letter-spacing: 0;
}

aside.widget-area ul { margin: 0; padding: 0; list-style: none; }
aside.widget-area li { margin: 0 0 .75rem; color: var(--a-tenue); line-height: 1.4; }
aside.widget-area a { color: var(--a-link); }
aside.widget-area li a { font-weight: 700; }
aside.widget-area li li { margin-top: .75rem; }
aside.widget-area .ariadne-dicono li { margin-bottom: .875rem; }
aside.widget-area .ariadne-dicono span { display: block; }
aside.widget-area .textwidget p { margin: 0 0 .625rem; }

.ariadne-collegamenti p { margin: 0 0 .625rem; }

/* Piede */
#colophon {
	grid-column: 1 / -1;
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 1.5rem max(1.25rem, calc((100% - var(--a-larghezza)) / 2));
	border: 0;
	background: var(--a-notte);
	color: #fff;
	font-size: 1rem;
}

#colophon a { color: #fff; }
#colophon .footer-navigation { margin: 0; text-align: left; }
#colophon .footer-navigation-wrapper { justify-content: flex-start; margin: 0; }
#colophon .footer-navigation-wrapper li { line-height: 1.6; }
#colophon .footer-navigation-wrapper li a { padding: .25rem 0; color: #fff; }
#colophon .site-info { display: none; }

/* Home */
.home .entry-header { display: none; }

.home .entry-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); column-gap: 3rem; }
.home .entry-content > * { grid-column: 1 / -1; width: 100%; max-width: none; margin-top: 0; }

.home .entry-content > .ariadne-motto {
	grid-column: 1;
	margin: 0 0 1.25rem;
	font-size: 2.75rem;
	line-height: 1.12;
}

.home .entry-content > .ariadne-motto + p {
	grid-column: 1;
	margin: 0 0 1.75rem;
	font-size: 1.3125rem;
	line-height: 1.5;
}

.home .entry-content > .ariadne-appstore { grid-column: 1; margin: 0 0 2.5rem; }

.home .entry-content > .wp-block-image { grid-column: 2; margin-bottom: 2rem; }
.home .entry-content > h2 ~ .wp-block-image:first-of-type { grid-row: 1 / span 3; margin-top: .375rem; }
.home .entry-content .wp-block-image figure { margin: 0; }
.home .entry-content .wp-block-image img { display: block; width: 100%; max-width: none !important; height: auto; border-radius: .5rem; }

.site .ariadne-appstore a {
	display: inline-block;
	padding: .75rem 1.5rem;
	border-radius: .5rem;
	background: var(--a-notte);
	color: #fff;
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.site .ariadne-appstore a:hover { text-decoration: underline; text-decoration-color: var(--a-lampada); text-decoration-thickness: .1875rem; }
.site .ariadne-appstore a:focus { color: #fff; background: var(--a-notte); }

@media (prefers-color-scheme: dark) {
	.site .ariadne-appstore a { background: var(--a-lampada); color: #0d2142; }
	.site .ariadne-appstore a:focus { background: var(--a-lampada); color: #0d2142; }
}

.home .entry-content > h2:not(.ariadne-motto) { margin: 0 0 1rem; }

.home .entry-content > ul {
	grid-column: 1;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.home .entry-content > ul li { margin: 0 0 1.125rem; padding-left: 1.125rem; border-left: .25rem solid var(--a-lampada); }
.home .entry-content > ul li strong { display: block; font-size: 1.25rem; }

.home .entry-content > p:last-child {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: .0625rem solid var(--a-bordo);
	font-size: 1rem;
	color: var(--a-tenue);
}

/* Moduli e pulsanti */
input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea, select {
	background: #fff;
	color: #0d2142;
	border: .125rem solid var(--a-tenue);
	border-radius: .25rem;
}

.wp-block-button__link, input[type="submit"], button[data-ariadne-stat], .site .button:not(.menu-button-container .button) {
	padding: .625rem 1.25rem;
	border: 0;
	border-radius: .5rem;
	background: var(--a-notte);
	color: #fff;
	font-family: var(--global--font-primary);
	font-size: 1.0625rem;
	font-weight: 700;
	cursor: pointer;
}

/* Sotto questa larghezza una colonna sola, nell'ordine del documento */
@media (max-width: 60rem) {
	#masthead .site-branding { background-image: none; }
	#masthead .primary-navigation .lang-item:not(.lang-item ~ .lang-item) { margin-left: 0; }
	#page { grid-template-columns: minmax(1.25rem, 1fr) minmax(0, 46rem) minmax(1.25rem, 1fr); }
	#content, aside.widget-area { grid-column: 2; }
	aside.widget-area { margin-top: 0; padding-top: 2rem; border-top: .0625rem solid var(--a-bordo); }
	.home .entry-content { display: block; }
	.home .entry-content > .wp-block-image { margin: 0 0 2rem; max-width: 22rem; }
}

@media (max-width: 42rem) {
	body { font-size: 1.125rem; }
	#masthead .site-title { font-size: 2.25rem; }
	#masthead .site-description { font-size: 1.125rem; }
	.singular .entry-title, .singular .site-main .entry-title, h1.entry-title, .page-title { font-size: 2rem; }
	.home .entry-content > .ariadne-motto { font-size: 2.125rem; }
}

/* Stessa soglia del tema per il menu a comparsa */
@media (max-width: 481.98px) {
	#masthead .primary-menu-container { background: var(--a-notte); }
	#masthead .primary-navigation > div > .menu-wrapper { display: block; padding: 5rem 1.25rem 2rem; }
	#masthead .primary-navigation .menu-wrapper > li > a { padding: .75rem 0; font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}