/* Base element styles — the plain-CSS equivalent of theme.json "styles". */

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

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: hidden;
	background: linear-gradient( 135deg, #ffffff 0%, #eef1e8 45%, #dcead9 100% );
	background-attachment: fixed;
	color: var( --color-text-primary );
	font-family: var( --font-family );
	font-size: var( --font-size-medium );
	line-height: var( --line-height-body );
}

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

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	line-height: var( --line-height-heading );
	margin: 0;
	text-wrap: balance;
}

/* Page title (page.php / single.php / blog index) — one consistent size
   and gap to whatever follows, regardless of template. */
.tg-page-title {
	font-size: var( --font-size-x-large );
	margin-bottom: var( --space-stack );
}

/* One single style for every "section heading" in the site — whether it's
   a template's .tg-section-title (homepage blocks, banners) or a plain H2
   an editor typed in page/post content (.entry-content h2). Deliberately
   modest: same weight as body headings, no color/size shouting, just a
   clear, consistent gap to the paragraph that follows it. */
.tg-section-title,
.entry-content h2 {
	position: relative;
	display: block;
	width: fit-content;
	font-size: var( --font-size-large );
	font-weight: 600;
	color: var( --color-text-primary );
	padding-bottom: 6px;
	margin-bottom: var( --space-tight );
}

/* Content H2s additionally need breathing room from whatever precedes
   them (a .tg-section-title never does — its wrapper handles that). */
.entry-content h2 {
	margin-top: var( --space-stack );
}

.entry-content h2:first-child {
	margin-top: 0;
}

.tg-section-title::after,
.entry-content h2::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 44px;
	height: 3px;
	background: rgba( 171, 200, 109, 0.5 );
}

/* Small label sitting above a heading ("La nostra storia", "Recensioni
   Google — 4.9/5 (19)"...) — signals "this introduces what follows"
   without competing with the heading itself. */
.tg-eyebrow {
	display: inline-block;
	font-size: var( --font-size-small );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --color-accent );
}

/* Descriptive line under a section heading — a notch bigger/lighter than
   the small card copy (.tg-card-text), so it reads as the section's
   intro sentence rather than fine print. */
.tg-subheading {
	font-size: var( --font-size-medium );
	color: var( --color-text-secondary );
	max-width: 60ch;
}

p {
	margin: 0;
}

/* Long-form body copy (page/post content, i.e. the_content() output only):
   justified with hyphenation, so the justify doesn't create ugly gaps on a
   narrow (720px) column. Deliberately scoped to .entry-content, NOT the
   generic .tg-stack spacing helper — that one is reused all over the site
   (card grids, homepage sections) and must stay left-aligned. */
.entry-content p {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Editor-inserted images get the same radius + soft shadow as .tg-img,
   without needing that class added by hand in the editor. */
.entry-content img {
	border-radius: var( --radius );
	box-shadow: var( --shadow-soft );
}

/* Bulleted lists — a small accent-lime square (same 50% transparency as
   the heading underline) instead of the browser's default disc,
   flush-left instead of the default indent. */
.entry-content ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-tight );
}

.entry-content ul li {
	position: relative;
	padding-left: 20px;
}

/* Icon-driven lists (e.g. the contact list) bring their own marker and
   spacing — skip the generic bullet/gap treatment for those. */
.entry-content ul.content-sidebar__contact-list {
	gap: var( --space-related );
}

.entry-content ul.content-sidebar__contact-list li {
	padding-left: 0;
}

.entry-content ul.content-sidebar__contact-list li::before {
	content: none;
}

.entry-content ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: rgba( 171, 200, 109, 0.5 );
}

/* Numbered lists — same flush-left treatment, accent-colored numbers. */
.entry-content ol {
	list-style: none;
	counter-reset: tg-ol;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --space-tight );
}

.entry-content ol li {
	position: relative;
	padding-left: 24px;
	counter-increment: tg-ol;
}

.entry-content ol li::before {
	content: counter( tg-ol ) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 600;
	color: var( --color-accent );
	/* Un ol dentro un ul eredita il quadratino della lista puntata: lo azzera. */
	width: auto;
	height: auto;
	background: none;
	border-radius: 0;
}

a {
	color: var( --color-accent );
	text-decoration: none;
}

a:hover {
	color: var( --color-text-primary );
}

/* Layout containers — equivalent of theme.json contentSize / wideSize. */
.tg-container {
	width: 100%;
	max-width: var( --content-size );
	margin-inline: auto;
	padding-inline: var( --space-gutter );
}

.tg-container-wide {
	width: 100%;
	max-width: var( --wide-size );
	margin-inline: auto;
	padding-inline: var( --space-gutter );
}

.tg-full {
	width: 100%;
}

/* Every full-bleed section (hero, page-hero, the banners) breaks out of
   the 1200px content width by 10% on tablet/desktop, mirroring the
   floating header — full-bleed, square corners on mobile, where there's
   no room to spare for the effect. The footer is deliberately NOT
   .tg-full, so it's unaffected. */
@media ( min-width: 782px ) {
	.tg-full {
		max-width: calc( var( --wide-size ) * 1.1 );
		margin-inline: auto;
		border-radius: var( --radius );
		box-shadow: var( --shadow-soft );
		overflow: hidden;
	}
}

/* Buttons */
.tg-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var( --font-family );
	font-weight: 600;
	font-size: 0.9rem;
	padding: 12px 24px;
	border-radius: var( --radius );
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	box-shadow: var( --shadow-soft );
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* A hint of depth on every filled button — a faint light-to-dark overlay
   on top of whatever solid color the variant sets, so it reads as a
   gently convex surface rather than a flat color swatch. Skipped on the
   outline variants, which have no fill to layer it over. */
.tg-btn:not( .tg-btn-outline ):not( .tg-btn-outline-light ) {
	background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.1 ), rgba( 0, 0, 0, 0.08 ) );
	background-blend-mode: overlay;
}

.tg-btn-primary {
	background: var( --color-accent );
	color: var( --color-surface-2 );
}

.tg-btn-primary:hover {
	background: var( --color-text-primary );
	color: var( --color-surface-2 );
}

.tg-btn-outline {
	background: transparent;
	color: var( --color-text-primary );
	border-color: var( --color-text-primary );
}

.tg-btn-outline:hover {
	background: var( --color-text-primary );
	color: var( --color-surface-2 );
}

.tg-btn-whatsapp {
	background: var( --color-whatsapp );
	color: #fff;
}

.tg-btn-whatsapp:hover {
	background: var( --color-accent-dark );
	color: #fff;
}

/* Outline button for dark/tinted surfaces — text-primary's own outline
   would be invisible there. */
.tg-btn-outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba( 255, 255, 255, 0.6 );
}

.tg-btn-outline-light:hover {
	background: #fff;
	color: var( --color-text-primary );
	border-color: #fff;
}

/* Icon-only variant (header actions): rounded square, no label. */
.tg-btn-icon {
	padding: 10px;
	border-radius: var( --radius );
	line-height: 0;
}

.tg-btn-lime {
	background: var( --color-accent-lime );
	color: #fff;
	border-color: transparent;
}

.tg-btn-lime:hover {
	background: var( --color-accent-light );
	color: #fff;
}

/* Header icon buttons — first, middle and last stop of the logo's own
   gradient (teal → light → lime), so the three sit as one family. */
.tg-btn-teal {
	background: var( --color-accent-teal );
	color: #fff;
	border-color: transparent;
}

.tg-btn-teal:hover {
	background: var( --color-accent-light );
	color: #fff;
}

.tg-btn-accent-light {
	background: var( --color-accent-light );
	color: #fff;
	border-color: transparent;
}

.tg-btn-accent-light:hover {
	background: var( --color-accent-lime );
	color: #fff;
}

/* Images & cards share the same radius + soft shadow. */
.tg-img,
.tg-card {
	border-radius: var( --radius );
	box-shadow: var( --shadow-soft );
}

.tg-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Fixed-ratio crop for thumbnails in a card grid (e.g. blog cards) so
   every card lines up regardless of the source image's own proportions. */
.tg-img-cover {
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.tg-card {
	background-color: var( --color-surface-2 );
	background-image: linear-gradient( 180deg, rgba( 255, 255, 255, 0.6 ), rgba( 0, 0, 0, 0.02 ) );
	padding: var( --space-card );
}

/* Card with its icon repeated as a faint, oversized watermark in the
   bottom-right corner. The icon comes from --tg-card-icon (set inline, see
   termogas_card_icon_style()); size and offsets are relative to the card so
   it reads the same at 1, 2 or 3 columns. Decorative only. */
.tg-card--icon {
	position: relative;
	overflow: hidden;
}

.tg-card--icon::before {
	content: '';
	position: absolute;
	right: -10%;
	bottom: -14%;
	width: clamp( 6rem, 55%, 12rem );
	aspect-ratio: 1;
	background: var( --color-accent );
	opacity: 0.04;
	-webkit-mask: var( --tg-card-icon ) center / contain no-repeat;
	mask: var( --tg-card-icon ) center / contain no-repeat;
	pointer-events: none;
}

/* Keep real content above the watermark. */
.tg-card--icon > * {
	position: relative;
}

/* Vertical rhythm helpers (mirrors the block theme's spacing tokens). */
.tg-stack-tight > * + * { margin-top: var( --space-tight ); }
.tg-stack-related > * + * { margin-top: var( --space-related ); }
.tg-stack > * + * { margin-top: var( --space-stack ); }

/* A heading is always followed by --space-tight, no matter which stack
   wrapper (tight/related/stack) it happens to sit in — keeps the
   title-to-text gap consistent everywhere, while later siblings (e.g. a
   CTA button after the paragraph) still get that wrapper's own gap. */
.tg-stack-related > h1 + *,
.tg-stack-related > h2 + *,
.tg-stack-related > h3 + *,
.tg-stack-related > h4 + *,
.tg-stack > h1 + *,
.tg-stack > h2 + *,
.tg-stack > h3 + *,
.tg-stack > h4 + * {
	margin-top: var( --space-tight );
}

.tg-grid {
	display: grid;
	gap: var( --space-stack );
}

@media ( min-width: 600px ) {
	.tg-grid-3 { grid-template-columns: repeat( 3, 1fr ); }
	.tg-grid-4 { grid-template-columns: repeat( 4, 1fr ); }
}

@media ( min-width: 782px ) {
	.tg-split {
		grid-template-columns: 35% 65% !important;
		align-items: center;
	}
	.tg-split-reverse {
		grid-template-columns: 65% 35% !important;
	}
}