/* ============================================================
   Base: typography, rhythm, containers, utilities
   ============================================================ */

/* The page content sits on a light background, but the root AND body are dark so the mobile
   "rubber-band" overscroll matches the header/footer at BOTH ends (iOS uses the html background
   for the top overscroll and the body background for the bottom) instead of flashing white. */
html,
body.giorgio { background-color: var(--g-charcoal-deep); }

body.giorgio,
.giorgio-page {
	font-family: var(--g-font-body);
	color: var(--g-text);
	line-height: var(--g-lh-body);
	font-size: var(--g-fs-base);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.giorgio-page { background-color: var(--g-bg); }

.giorgio-page h1,
.giorgio-page h2,
.giorgio-page h3,
.giorgio-page h4 {
	font-family: var(--g-font-display);
	color: var(--g-charcoal-deep);
	line-height: var(--g-lh-head);
	letter-spacing: var(--g-ls-head);
	font-weight: 600;
	margin: 0 0 0.5em;
}

.giorgio-page h1 { font-size: var(--g-fs-h1); }
.giorgio-page h2 { font-size: var(--g-fs-h2); }
.giorgio-page h3 { font-size: var(--g-fs-h3); }

.giorgio-page p { margin: 0 0 1rem; }
.giorgio-page p:last-child { margin-bottom: 0; }

.giorgio-page a:not(.btn) {
	color: var(--g-orange);
	text-decoration: none;
	transition: color var(--g-transition);
}
.giorgio-page a:not(.btn):hover { color: var(--g-orange-hover); }
/* Buttons keep their own colors (defined in components.css), never the link color. */
.giorgio-page a.btn { text-decoration: none; }

.giorgio-page img { max-width: 100%; height: auto; display: block; }

/* Layout primitives */
.g-container {
	width: 100%;
	max-width: var(--g-container);
	margin-inline: auto;
	padding-inline: var(--g-gutter);
}
.g-container.is-narrow { max-width: var(--g-container-narrow); }

.g-section { padding-block: var(--g-section-y); }
.g-section--alt { background: var(--g-bg-alt); }
.g-section--muted { background: var(--g-bg-muted); }

/* Rich text (legal pages etc.) */
.g-richtext h2 { margin: 1.9rem 0 0.6rem; font-size: var(--g-fs-h3); }
.g-richtext h2:first-child { margin-top: 0; }
.g-richtext ul { list-style: disc; margin: 0 0 1rem 1.3rem; padding: 0; }
.g-richtext li { margin-bottom: 0.4rem; }
.g-richtext a { color: var(--g-orange); }
.g-section--dark { background: var(--g-charcoal); color: var(--g-text-on-dark); }
.g-section--dark h1,
.g-section--dark h2,
.g-section--dark h3 { color: var(--g-white); }
.g-section--tight { padding-block: clamp(2.25rem, 4.5vw, 3.5rem); }

/* Section heading block */
.g-section-head { max-width: 640px; margin-bottom: var(--g-sp-5); }
.g-section-head.is-center { margin-inline: auto; text-align: center; }

.g-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--g-fs-eyebrow);
	font-weight: 700;
	letter-spacing: var(--g-ls-eyebrow);
	text-transform: uppercase;
	color: var(--g-orange);
	margin-bottom: 0.9rem;
}
.g-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--g-orange);
	display: inline-block;
}
.g-section-head.is-center .g-eyebrow::before { display: none; }

.g-lead {
	font-size: var(--g-fs-xl);
	color: var(--g-text-muted);
}
.g-section--dark .g-lead { color: var(--g-muted-on-dark); }

/* Utilities */
.g-text-center { text-align: center; }
.g-mt-0 { margin-top: 0; }
.g-mb-0 { margin-bottom: 0; }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}

/* Icons */
.g-icon { width: 24px; height: 24px; flex: none; }
.g-icon-sm { width: 18px; height: 18px; }
.g-icon-lg { width: 28px; height: 28px; }

/* Accessibility: visible focus */
.giorgio-page a:focus-visible,
.btn:focus-visible,
.giorgio-topbar a:focus-visible,
.giorgio-lang-switch a:focus-visible {
	outline: 2px solid var(--g-orange);
	outline-offset: 2px;
	border-radius: var(--g-radius-sm);
}