/* sesei.it base styles (frontend.md §2, §3.6, §4.1). Mobile first. */

/* normalize (essentials) */
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1 { font-size: 2em; margin: .67em 0; }
b, strong { font-weight: bolder; }
small { font-size: 80%; }
img { border-style: none; }
button, input, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }
button, select { text-transform: none; }
button, [type="button"] { -webkit-appearance: button; }
details { display: block; }
summary { display: list-item; }
[hidden] { display: none !important; }

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

:root {
	--c-page: #000000;
	--c-surface: #ffffff;
	--c-panel: #dddddd;
	--c-text: #222222;
	--c-text-strong: #111111;
	--c-muted: #707070;
	--c-divider: #c0c0c0;
	--c-green-900: #113311;
	--c-green-btn: #135c13;
	--c-green-active: #226622;
	--c-green-hover: #287828;
	--c-green-accent: #448844;
	--c-win: #228822;
	--c-tint-panel: #ddeedd;
	--c-tint-selected: #bbccbb;
	--c-tint-zebra: #eefeee;
	--c-burgundy: #880000;
	--c-burgundy-dark: #442222;
	--c-loss: #882222;
	--c-draw: #ff8c00;
	--c-seat-photo: #fdff61;
	--c-seat-photo-text: #7e2217;
	--c-seat-photo-hover: #c35617;
	--c-seat-empty: #696969;
	--c-footer: rgba(170, 170, 170, 0.5);
	--gutter: 16px;
	--space: 20px;
	--panel-pad: 10px;
}

@media (min-width: 768px) {
	:root { --gutter: 20px; --panel-pad: 20px; }
}
@media (min-width: 1024px) {
	:root { --space: 30px; }
}

html { overflow-x: hidden; }

body {
	background: var(--c-page);
	color: var(--c-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
}

/* type scale (§2.2) */
h1, .h1 { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 var(--space); }
h2, .h2 { font-size: 21px; font-weight: 700; line-height: 1.3; margin: 0 0 var(--space); }
h3, .h3 { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; }
h4, .h4, h5, .h5, h6, .h6 { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 10px; }
@media (min-width: 1024px) {
	h1, .h1 { font-size: 30px; }
	h2, .h2 { font-size: 24px; }
	h3, .h3 { font-size: 20px; }
	h4, .h4 { font-size: 17px; }
}
p, ul, ol, dl { margin: 0 0 20px; }
small, .small { font-size: 14px; line-height: 1.45; }

a { color: var(--c-green-active); }
a:hover, a:focus-visible { color: var(--c-green-900); }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--c-green-accent);
	outline-offset: 2px;
}
.page-content a, .sector-intro a, .tips-box a { text-decoration: underline; }

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

.btn {
	display: inline-block;
	background: var(--c-green-btn);
	color: #ffffff;
	font-size: 14px;
	padding: 8px 16px;
	border: 0;
	border-radius: 8px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 1);
	text-decoration: none;
	cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: var(--c-green-hover); color: #ffffff; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: #ffffff;
	color: var(--c-green-900);
	padding: 8px 12px;
	z-index: 1000;
}
.skip-link:focus { left: 10px; top: 10px; }
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* header + nav (§3.6) */
.site-header { background: var(--c-page); color: #ffffff; }
.site-header-inner {
	max-width: 1250px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	min-height: 60px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.site-logo { color: #ffffff; text-decoration: none; display: flex; flex-direction: column; gap: 4px; line-height: 1.1; padding: 10px 0; }
.site-logo:hover, .site-logo:focus-visible { color: #ffffff; }
.site-logo-image { display: block; width: auto; height: 36px; }
/* "Un progetto di [sitiscommesse.com logo]" under the logo; the logo links to sitiscommesse.com on the home only. */
.site-brand { display: flex; flex-direction: column; padding: 10px 0; }
.site-brand .site-logo { padding: 0; }
.site-network { display: inline-flex; align-items: center; gap: 6px; color: var(--c-divider); font-size: 12px; margin-top: 8px; }
.site-network a { display: block; padding: 4px 0; margin: -4px 0; } /* 26px tap target, 4px clear of the sesei logo link. */
.site-network img { display: block; width: auto; height: 18px; }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	color: #ffffff;
	border: 1px solid #555555;
	border-radius: 5px;
	padding: 12px;
	cursor: pointer;
	font-size: 14px;
}
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
	display: block;
	width: 18px;
	height: 2px;
	background: #ffffff;
	position: relative;
	content: "";
}
.nav-toggle-bar::before { position: absolute; top: -6px; }
.nav-toggle-bar::after { position: absolute; top: 6px; }

.site-nav { width: 100%; display: none; padding-bottom: 10px; }
.site-nav.is-open, .no-js .site-nav { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	padding: 10px 12px;
	border-radius: 5px;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.is-current { background: var(--c-green-active); color: #ffffff; }

@media (min-width: 1024px) {
	.site-header-inner { min-height: 80px; flex-wrap: nowrap; }
	.site-logo-image { height: 44px; }
	.site-network img { height: 20px; }
	.nav-toggle { display: none; }
	.site-nav { display: block; width: auto; padding: 0; }
	.site-nav ul { display: flex; gap: 5px; }
	.site-nav a { padding: 8px 14px; }
}

/* content surface */
.wrapper {
	max-width: 1250px;
	margin: 0 auto;
	background: var(--c-surface);
	padding: 20px var(--gutter) 30px;
}
@media (min-width: 768px) {
	.wrapper { border-radius: 10px; margin-bottom: 20px; }
}
.wrapper > article { min-width: 0; }

/* breadcrumb */
.breadcrumb { font-size: 14px; margin: 0 0 10px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.breadcrumb li + li::before { content: "\203A"; margin-right: 5px; color: var(--c-muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb [aria-current] { color: var(--c-muted); }

/* footer (§3.6) */
.site-footer { padding: 0 0 20px; }
.site-footer-inner {
	max-width: 1250px;
	margin: 0 auto;
	background: var(--c-footer);
	color: #ffffff;
	padding: 20px var(--gutter);
	font-size: 14px;
	text-align: center;
}
@media (min-width: 768px) {
	.site-footer-inner { border-radius: 10px; }
}
.site-footer a, .site-footer a:hover, .site-footer a:focus-visible { color: #ffffff; }
.footer-copy { margin-bottom: 10px; }
.footer-links { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 20px; }
.footer-note { margin: 10px 0 0; font-size: 12px; }

/* icons: CSS backgrounds only (§2.5) */
.icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	vertical-align: middle;
}
/* ?v= busts the browser cache when an icon changes (static files are cached for a day) */
.icon-facebook { background-image: url("../img/facebook.svg?v=2"); }
.icon-x { background-image: url("../img/x.svg?v=2"); }
.icon-youtube { background-image: url("../img/youtube.svg?v=2"); }
.icon-mail { background-image: url("../img/mail.svg?v=3"); }
/* footer: Facebook and YouTube keep the brand colours, the black X logo turns white on the dark band */
.site-footer .icon-x { background-image: url("../img/x-white.svg?v=2"); }

.lazy-bg { background-color: var(--c-panel); }

.page-content { max-width: 860px; }
.page-content h2 { margin-top: var(--space); }
.page-content ul, .page-content ol { padding-left: 22px; }
.page-content .breadcrumb ol { padding-left: 0; }
.back-link { margin-top: var(--space); }