/*
Theme Name: Studio Amosso
Theme URI: https://studioamosso.it/
Author: Rebelpug S.R.L.
Description: Block (FSE) theme for Studio Odontoiatrico Amosso, Biella.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Version: 0.2.0
License: GPL-2.0-or-later
Text Domain: studioamosso
*/

/* Tokens live in theme.json. This file only holds what theme.json can't express. */

/* ---------- Top bar ---------- */
.sa-topbar { font-size: 1rem; letter-spacing: 1px; }
.sa-topbar p { margin: 0; }
.sa-topbar a { text-decoration: none; }
.sa-topbar a:hover { text-decoration: none; opacity: .85; }
.sa-topbar__contacts { display: flex; flex-wrap: wrap; gap: .25rem 5.5rem; }
.sa-ico::before {
	content: "";
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-right: .75rem;
	vertical-align: -1px;
	background: currentColor;
	-webkit-mask: var(--sa-ico) center / contain no-repeat;
	mask: var(--sa-ico) center / contain no-repeat;
	opacity: .8;
}
.sa-ico--phone { --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Crect x='4' y='1' width='8' height='14' rx='1.5'/%3E%3Cpath d='M7 12.5h2'/%3E%3C/svg%3E"); }
.sa-ico--mail { --sa-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Crect x='1' y='3' width='14' height='10' rx='1'/%3E%3Cpath d='m1.5 3.5 6.5 5 6.5-5'/%3E%3C/svg%3E"); }

/* ---------- Header ---------- */
.sa-header { border-bottom: 1px solid var(--wp--preset--color--rule); }
.sa-logo { margin: 0; }
.sa-logo img { display: block; height: auto; max-width: 46vw; }
.sa-nav .wp-block-navigation-item__content { color: var(--wp--preset--color--contrast); }
.sa-nav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); text-decoration: none; }
.sa-nav .wp-block-navigation__submenu-icon { display: none; }
.sa-nav .wp-block-navigation__submenu-container {
	border: 0 !important;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--soft);
	padding: .5rem 0;
	text-transform: none;
	letter-spacing: 0;
	min-width: 220px !important;
}
.sa-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .45rem 1.25rem; }

/* ---------- Title band + chevron divider ---------- */
.sa-page-hero .wp-block-post-title {
	color: inherit;
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
}
/* Divider: two 50px lines with a chevron in the middle. Colours via --sa-line / --sa-chevron. */
.wp-block-separator.is-style-chevron {
	--sa-line: #fff;
	--sa-chevron: #fff;
	position: relative;
	overflow: visible;
	width: 150px !important;
	max-width: 150px;
	height: 14px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	border: 0 !important;
	opacity: 1;
	background:
		linear-gradient(var(--sa-line), var(--sa-line)) left center / 50px 1px no-repeat,
		linear-gradient(var(--sa-line), var(--sa-line)) right center / 50px 1px no-repeat !important;
}
.wp-block-separator.is-style-chevron::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--sa-chevron);
	border-bottom: 1.5px solid var(--sa-chevron);
	transform: translate(-50%, -80%) rotate(45deg);
}
.sa-band .wp-block-separator.is-style-chevron { --sa-line: var(--wp--preset--color--rule); --sa-chevron: var(--wp--preset--color--primary); }

/* ---------- Service page content ---------- */
.sa-service__content > * + h2,
.sa-service__content > * + .wp-block-columns:has(> .wp-block-column > h2:first-child) { margin-top: 3.75rem; }

/* Section headings get the short grey rule underneath (H2 sections, H3 sub-sections). */
.sa-service__content :is(h2, h3):not(.sa-band *):not(.amosso-case *)::after {
	content: "";
	display: block;
	width: 150px;
	height: 1px;
	margin-top: 1.9rem;
	margin-bottom: .6rem;
	background: var(--wp--preset--color--rule);
}
.sa-service__content h4 { margin-top: 1.5rem; margin-bottom: .25rem; }
.sa-service__content p { margin-block: 0 .85rem; }
.sa-service__content ul { margin-block: 0 .85rem; }
.sa-service__content li + li { margin-top: 0; }
.sa-service__content strong { color: var(--wp--preset--color--heading); font-weight: 600; }
.sa-service__content .wp-block-columns { margin-block: 1.25rem; }
.sa-service__content .wp-block-image img { display: block; width: 100%; height: auto; }
/* Linked images: core makes the <a> inline-block, so width:100% above resolves against the image's own size
   (3000px placeholder from sizes="auto" while lazy-loading) and overflows on phones (/servizi/ cards). */
.wp-block-image > a { display: block; max-width: 100%; }

/* ---------- Clinical cases ---------- */
.sa-band { margin-top: var(--wp--preset--spacing--50) !important; }
.sa-band__title {
	color: var(--wp--preset--color--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
}
.amosso-case { margin-top: 3.25rem !important; }
.amosso-case__title {
	color: var(--wp--preset--color--dark);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}
.amosso-case__title::after {
	content: "";
	display: block;
	width: 150px;
	height: 1px;
	margin: 1.9rem auto 0;
	background: var(--wp--preset--color--rule);
}
.amosso-case__caption {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: 1.125rem;
	color: var(--wp--preset--color--muted);
	margin-top: 1rem !important;
}
.amosso-case__pair { margin-top: 2.5rem !important; }
.amosso-case__label {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--dark);
	margin-bottom: 1.1rem !important;
}
.amosso-case .wp-block-image img { display: block; width: 100%; height: auto; }

/* ---------- Footer ---------- */
.sa-footer .wp-block-amosso-contact-info { gap: 0; }
.sa-footer .amosso-contact-info__title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: 2px;
	margin-bottom: 1.6rem;
}
.sa-footer .amosso-contact-info__item p { line-height: 2.3; }
.wp-block-amosso-contact-info.is-style-divided .amosso-contact-info__item { padding: 0 1.9rem; }
.wp-block-amosso-contact-info.is-style-divided .amosso-contact-info__item:first-child { padding-left: 0; }
.wp-block-amosso-contact-info.is-style-divided .amosso-contact-info__item + .amosso-contact-info__item { border-left: 1px solid rgba(255, 255, 255, .55); }
.sa-footer__bottom p { margin: 0; }
.sa-footer a:hover { text-decoration: underline; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.sa-topbar__contacts { gap: .25rem 1.5rem; font-size: .875rem; }
	.sa-topbar .wp-block-social-links,
	.sa-topbar .sa-ico--mail { display: none; }
	.sa-page-hero { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
	.sa-page-hero .wp-block-post-title { font-size: 1.125rem; }
	.wp-block-amosso-contact-info.is-style-divided .amosso-contact-info__item { padding: 0; border: 0 !important; }
	.amosso-case__pair { gap: 1.5rem !important; }
}

/* ---------- Photo title band (generic pages) ---------- */
.sa-page-hero--photo { padding-top: 4.6rem !important; padding-bottom: 4.6rem !important; }
.sa-page-hero--photo .wp-block-post-title { color: #fff; font-size: var(--wp--preset--font-size--xx-large); margin: 0; }
.sa-page-hero__intro { margin: 0; }
.sa-page-hero__intro .wp-block-post-excerpt__excerpt { margin: 0; font-size: 1.125rem; }
.sa-page-hero__intro .wp-block-post-excerpt__more-text { display: none; }
/* No featured image: same look as the blue band. */
.sa-page-hero--photo:not(:has(.wp-block-cover__image-background)) { background: var(--wp--preset--color--primary); min-height: 0 !important; }
.sa-page-hero--photo:not(:has(.wp-block-cover__image-background)) .wp-block-cover__background { opacity: 0 !important; }
.sa-page-hero--photo:not(:has(.wp-block-cover__image-background)) { padding-top: 4.6rem !important; padding-bottom: 4.6rem !important; }
@media (max-width: 781px) {
	.sa-page-hero--photo { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; min-height: 200px !important; }
	.sa-page-hero--photo .wp-block-post-title { font-size: 1.125rem; }
}

/* ---------- Generic content helpers (converted pages) ---------- */
.sa-service__content .is-style-subtitle { font-family: var(--wp--preset--font-family--serif); font-style: italic; color: var(--wp--preset--color--muted); font-size: 1.125rem; }
.sa-panel { padding: 2rem 1.75rem; height: 100%; }
.sa-panel :is(h2, h3)::after { background: rgba(255, 255, 255, .5) !important; }
.wp-block-column:has(> .sa-panel) { display: flex; flex-direction: column; }
.wp-block-column:has(> .sa-panel) > .sa-panel { flex: 1; }
.sa-band-color, .sa-band-photo { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) !important; margin-block: var(--wp--preset--spacing--40) !important; }
.sa-band-color :is(h2, h3)::after { background: rgba(255, 255, 255, .5) !important; }
.amosso-card { background: #fff; box-shadow: var(--wp--preset--shadow--soft); padding: 0 0 1.25rem; height: 100%; }
.amosso-card > :not(.wp-block-image) { padding-inline: 1.5rem; }
.amosso-card__title { font-size: var(--wp--preset--font-size--small) !important; color: var(--wp--preset--color--dark) !important; margin-top: 1.25rem !important; }
.amosso-card__title::after { display: none !important; }
.amosso-card__meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }
.wp-block-buttons { margin-block: .5rem 1rem; }
.amosso-map { width: 100%; height: 450px; border: 0; display: block; }
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--rule); padding: .9rem 0; }
.wp-block-details summary { cursor: pointer; text-transform: uppercase; letter-spacing: 2px; color: var(--wp--preset--color--primary); }
.wp-block-table td { border: 1px solid var(--wp--preset--color--rule); padding: .5rem .75rem; }

/* ---------- Home ---------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important;
	width: 1px; word-wrap: normal !important;
}
.sa-home .wp-block-post-content > * { margin-block: 0; }
.sa-home-hero img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; }
.sa-help { padding-block: 2.5rem 2rem; }
.sa-help__head { margin-bottom: 1.25rem; padding-inline: .5rem; }
.sa-help__title { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--dark); margin: 0; }
.sa-help__grid { margin: 0 !important; }
.sa-help-card { padding: 1.5rem 1rem 1.75rem; text-align: center; }
.sa-help-card img { margin-inline: auto; }
.sa-help-card .wp-block-image { margin-bottom: 1.5rem !important; }
.sa-help-card__title { font-size: var(--wp--preset--font-size--x-small); letter-spacing: 2px; margin: 0 0 1rem !important; }
.sa-help-card__title a { color: var(--wp--preset--color--dark); }
.sa-help-card p { font-size: var(--wp--preset--font-size--small); line-height: 1.6; margin: 0; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; border: 1px solid currentColor; color: var(--wp--preset--color--primary); border-radius: 999px; padding: .65rem 1.75rem; }
.has-navy-background-color .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-radius: 0; background: #fff; color: var(--wp--preset--color--navy); }
.sa-split { min-height: 440px; }
.sa-split .wp-block-media-text__content { padding: 3.25rem clamp(1.5rem, 5vw, 4.5rem) !important; }
.sa-split .wp-block-media-text__content h2 { font-size: var(--wp--preset--font-size--small); }
.sa-split .wp-block-media-text__content h2::after { content: ""; display: block; width: 150px; height: 1px; margin: 1.9rem 0 1.5rem; background: currentColor; opacity: .35; }
.sa-split .wp-block-media-text__content h3 { font-size: var(--wp--preset--font-size--x-small); color: inherit; margin-top: 2rem; }
.sa-split:not(.has-background) .wp-block-media-text__content h2 { color: var(--wp--preset--color--dark); }
.sa-split p, .sa-split li { font-size: var(--wp--preset--font-size--small); }
.sa-home-cases { padding: 3rem var(--wp--preset--spacing--40) 3.5rem !important; }
.sa-home-cases h2 { font-size: var(--wp--preset--font-size--small); }
.sa-home-cases h2::after { content: ""; display: block; width: 150px; height: 1px; margin: 1.9rem 0 2.25rem; background: currentColor; opacity: .35; }
.amosso-slider {
	gap: 0 !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .5) transparent;
}
.amosso-slider > .wp-block-image { flex: 0 0 100%; margin: 0 !important; scroll-snap-align: start; }
.amosso-slider img { display: block; width: 100%; height: auto; }
@media (max-width: 781px) {
	.sa-help__grid { flex-wrap: wrap !important; }
	.sa-help__grid > .sa-help-card { flex-basis: calc(50% - 6px) !important; }
	.sa-split { min-height: 0; }
}

/* Small buttons inside page content (live: btn-sm) */
.sa-service__content .wp-block-button__link { font-size: 10px; letter-spacing: 1.5px; padding: .55rem 1.1rem; white-space: nowrap; }
.sa-service__content .wp-block-buttons { gap: .5rem; }
.sa-service__content .wp-block-button.is-style-outline > .wp-block-button__link { border-radius: 0; padding: calc(.55rem - 1px) calc(1.1rem - 1px); }
.sa-service__content .wp-block-columns:has(.wp-block-buttons) h3 { color: var(--wp--preset--color--dark); }

/* ---------- Reviews / contacts ---------- */
.amosso-review { border-left: 2px solid var(--wp--preset--color--primary); margin: 0 0 2.25rem; padding: .25rem 0 .25rem 1.5rem; }
.amosso-review cite { display: block; margin-top: .5rem; font-style: normal; text-transform: uppercase; letter-spacing: 2px; font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--dark); }
.amosso-review__stars { color: #f5b301; letter-spacing: 3px; margin-bottom: .35rem !important; }
.sa-service__content .wp-block-amosso-contact-info .amosso-contact-info__title { color: var(--wp--preset--color--primary); letter-spacing: 2px; }
.sa-service__content .wp-block-amosso-contact-info .amosso-contact-info__item { margin-bottom: 1.25rem; }
.sa-footer .amosso-contact-info__title { margin-top: 0; }