/* =====================================================================
   Studio Dentistico Dr. Tommaso Martella — site.css

   Palette: the practice's navy, rebuilt as a real scale, on a warm bone
   ground with a sand accent. The navy is the one thing carried over from
   the old site so returning patients still recognise it.

   Section banners divide the file — search "=====" to jump.
   ===================================================================== */

/* ================= FONTS ================= */
/* Self-hosted: no third-party request, and no Google Fonts CDN call from an
   Italian medical site. Variable files, one per subset. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ================= TOKENS ================= */
:root {
  /* Navy — the brand anchor, as a scale rather than one flat blue. */
  --navy-900: #071F5A;
  --navy-800: #0B2A6F;
  --navy-700: #133A8E;
  --navy-600: #1E4FB0;
  --navy-500: #2F6BD4;
  --navy-200: #C5D6F5;
  --navy-100: #E7EEFB;
  --navy-050: #F3F7FE;

  /* Sand — the warm accent. Decorative and for small emphasis, never body text. */
  --sand-700: #8A5F22;
  --sand-600: #A9762F;
  --sand-500: #C89457;
  --sand-300: #E3C39A;
  --sand-100: #F6EADB;

  /* Wine — card headings only, so a title reads as a title and not as more
     body copy. Deep enough to sit beside the navy without competing with it:
     12:1 on white, 10.3:1 on bone-2, both well past AAA. */
  --wine-800: #730505;

  /* Urgent red: the emergency button and page only. 6.4:1 with white text. */
  --urgent: #B42318;
  --urgent-dark: #912018;

  /* Grounds */
  --bone:   #FBF8F3;
  --bone-2: #F3EDE3;
  --white:  #FFFFFF;

  /* Ink */
  --ink:      #14203B;
  --ink-soft: #46516C;
  --muted:    #6E7793;

  --line:        rgba(20, 32, 59, 0.10);
  --line-strong: rgba(20, 32, 59, 0.20);

  --shadow-sm: 0 1px 2px rgba(7, 31, 90, .06), 0 2px 8px rgba(7, 31, 90, .05);
  --shadow-md: 0 6px 16px rgba(7, 31, 90, .09), 0 16px 40px rgba(7, 31, 90, .07);
  --shadow-lg: 0 14px 36px rgba(7, 31, 90, .14), 0 36px 72px rgba(7, 31, 90, .10);

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 36px;
  --r-pill: 999px;

  --serif: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --easing: cubic-bezier(.2, .8, .2, 1);
  --dur: 300ms;

  --nav-h: 76px;
  --gutter: clamp(1.1rem, 4vw, 2rem);
}

/* ================= RESET ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bone);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, picture { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--navy-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy-900); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: -.015em;
  line-height: 1.15;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.2vw + .4rem, 3.9rem); font-weight: 500; letter-spacing: -.025em; }
h2 { font-size: clamp(1.7rem, 2.4vw + .55rem, 2.6rem); }
h3 { font-size: clamp(1.25rem, 1.1vw + .8rem, 1.6rem); }
h4 { font-size: 1.06rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
p { margin: 0 0 1em; }

::selection { background: var(--navy-700); color: #fff; }

:focus-visible {
  outline: 3px solid var(--sand-500);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy-900); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ================= LAYOUT ================= */
.container        { width: min(1220px, 100% - var(--gutter) * 2); margin-inline: auto; }
.container--narrow{ width: min(760px,  100% - var(--gutter) * 2); margin-inline: auto; }
/* Between narrow and full: wide enough for legal prose and its tables,
   still short enough a line does not run edge to edge on a monitor. */
.container--text  { width: min(980px,  100% - var(--gutter) * 2); margin-inline: auto; }
.container--wide  { width: min(1440px, 100% - var(--gutter) * 2); margin-inline: auto; }

main { padding-top: var(--nav-h); }

.section        { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section--tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.section--bone2 { background: var(--bone-2); }
.section--navy  { background: var(--navy-900); color: #E8EEF9; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
/* Inline links only. Without :not(.btn) this descendant selector outranks
   .btn--onnavy and paints sand text on a white button — 1.67:1, unreadable. */
.section--navy a:not(.btn) { color: var(--sand-300); }

.section__head { max-width: 62ch; margin-bottom: clamp(1.8rem, 3vw, 2.8rem); }
.section__head--center { margin-inline: auto; text-align: center; }

/* A short sand rule above a heading — the accent's main job. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sand-700); margin: 0 0 .9rem;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--sand-500); }
.section--navy .eyebrow { color: var(--sand-300); }
.section__head--center .eyebrow::before { display: none; }

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--sans); font-size: .97rem; font-weight: 600;
  padding: .52rem 1.6rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing),
              border-color var(--dur) var(--easing), transform var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy-800); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--navy-900); color: #fff; box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--navy-050); border-color: var(--navy-600); color: var(--navy-900); }

/* Sand is a light fill, so its label must be near-black, never white or
   another warm tone — that pairing was the weakest contrast on the site. */
.btn--sand { background: var(--sand-300); color: #2A1B06; }
.btn--sand:hover { background: var(--sand-500); color: #241703; }

/* On the navy band: one solid white button, one outlined. Both keep a
   navy or white label, so neither relies on warm-on-warm. */
.btn--onnavy { background: #fff; color: var(--navy-900); }
.btn--onnavy:hover { background: var(--navy-100); color: var(--navy-900); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

/* ================= HEADER / NAV ================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
/*
 * The frosted glass lives on ::before, NOT on .site-header itself.
 *
 * backdrop-filter (like transform and filter) turns the element into the
 * containing block for every position:fixed descendant. The mobile drawer is
 * one: its `inset: var(--nav-h) 0 0 0` then resolved against the 76px header
 * instead of the viewport, leaving it 76 - 76 = 0px of content height — a
 * 67px strip that was only its own padding, showing a few of 23 links. On the
 * pseudo-element the blur is identical and nothing is anyone's ancestor.
 * z-index:-1 stays inside the header, which is already a stacking context.
 */
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(251, 248, 243, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.site-header__inner { height: 100%; display: flex; align-items: center; gap: 1.2rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 0 0 auto; }
.brand img { width: auto; height: 34px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name { font-family: var(--serif); font-size: 1.02rem; font-weight: 600; color: var(--navy-900); }
.brand__role { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* The CTA is a sibling of the list, so the nav itself has to be the flex
   container — otherwise the button drops onto its own line. */
.nav { margin-left: auto; display: flex; align-items: center; gap: .6rem; min-width: 0; }
.nav__list { list-style: none; display: flex; align-items: center; gap: .2rem; margin: 0; padding: 0; flex-wrap: nowrap; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .58rem .85rem; border-radius: var(--r-pill);
  font-size: .95rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
  transition: color var(--dur) var(--easing), background var(--dur) var(--easing);
}
/* navy-100 was too pale against the bone header to read as a hover at all. */
.nav__link:hover { color: var(--navy-900); background: var(--navy-200); }

.nav__link[aria-current="page"],
.nav__item.is-active > .nav__link { color: var(--navy-900); font-weight: 600; }

/* Bold alone is not a clear enough "you are here" — add a sand underline.
   Sits below the pill, centred, and only on the active top-level item. */
.nav__link[aria-current="page"]::after,
.nav__item.is-active > .nav__link::after {
  content: '';
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: .1rem; width: 18px; height: 2px;
  background: var(--sand-500); border-radius: 2px;
}
.nav__link svg { width: 10px; height: 10px; transition: transform var(--dur) var(--easing); }

.nav__cta { margin-left: .5rem; }

/* Submenu: closed by default; opened on hover only where hover is real. */
.nav__sub {
  list-style: none; margin: 0; padding: .5rem;
  display: none;
}
.nav__item--has-sub { position: relative; }

@media (hover: hover) and (min-width: 1201px) {
  /* Anchored to the item's LEFT edge, not centred: with 16 treatments in two
     columns a centred panel runs off the right of the viewport. `max-width`
     plus the right-edge clamp below keeps it on screen at any width. */
  .nav__sub {
    /* Sits flush against the link and fakes the visual gap with padding.
       A real `top: calc(100% + .4rem)` gap is dead space: the pointer leaves
       the link, is over neither element, the panel closes — and it only
       "sometimes" works because it depends how fast you cross those 6px. */
    position: absolute; top: 100%; left: 0; transform: translateY(-6px);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem;
    width: max-content; max-width: min(560px, calc(100vw - 2rem));
    padding: .9rem .5rem .5rem;          /* top padding IS the gap */
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing), visibility var(--dur);
  }
  /* Widen the hover target under the link so a diagonal mouse path toward the
     panel's far column never crosses uncovered ground. */
  .nav__item--has-sub::after {
    content: ''; position: absolute; left: 0; right: 0; top: 100%;
    height: .9rem; display: none;
  }
  .nav__item--has-sub:hover::after { display: block; }
  /* Items near the right edge open leftwards instead. */
  .nav__item--has-sub:nth-last-child(-n+2) > .nav__sub { left: auto; right: 0; }

  .nav__item--has-sub:hover > .nav__sub,
  .nav__item--has-sub:focus-within > .nav__sub {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .nav__item--has-sub:hover > .nav__link svg { transform: rotate(180deg); }
  .nav__sub a {
    display: block; padding: .5rem .8rem; border-radius: var(--r-sm);
    font-size: .9rem; color: var(--ink-soft); text-decoration: none;
    overflow-wrap: anywhere;
  }
  .nav__sub a:hover { background: var(--navy-050); color: var(--navy-900); }
}

/* Drawer toggle — a real <button>, so keyboard and screen readers work. */
.nav-toggle {
  display: none; margin-left: auto;
  width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: transparent; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 20px; height: 2px; background: var(--navy-900); border-radius: 2px;
  transition: transform var(--dur) var(--easing), opacity var(--dur) var(--easing);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* Drawer below 1201px.
   Measured, not guessed: brand + the seven links (Home, Urgenze, Trattamenti,
   Il Dottore, Blog, Dove siamo, Contatti — 2026-09-18) + the CTA need about
   1092px of container, and the container is the viewport less two 32px
   gutters and the scrollbar — so the row stops fitting just under 1171, where
   "Il Dottore", "Dove siamo" and the CTA wrap to two lines. The extra ~30px
   of slack is for a font that renders wider. */
@media (max-width: 1200px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--nav-h) 0 0 0;
    background: var(--bone);
    padding: 1.2rem var(--gutter) 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* visibility as well as the transform: a translated drawer is still in the
       tab order, so a keyboard user tabbed through every hidden link before
       reaching the page. The delay on close lets the slide-out finish first. */
    visibility: hidden;
    transition: transform var(--dur) var(--easing), visibility 0s linear var(--dur);
    margin-left: 0;

    /* The desktop rule makes .nav a centred flex ROW so the CTA can sit beside
       the list. The drawer needs the opposite, and without this reset the menu
       and the button pile up side by side off-screen — the "hamburger does
       nothing" symptom. */
    display: block;
    gap: 0;
  }
  .nav.is-open {
    transform: translateX(0); visibility: visible;
    transition: transform var(--dur) var(--easing), visibility 0s;
  }
  /* The page behind is locked with body.scroll-locked, shared with the
     lightbox and set from site.js. overflow:hidden alone, which this used to
     be, is ignored by iOS Safari for touch scrolling. */

  .nav__list { flex-direction: column; align-items: stretch; gap: .15rem; }
  /* The whole row is the tap target, not just the word: the desktop link is
     inline-flex (as wide as its label), so without this "Home" was a 67px
     target in a 340px row and a tap on the empty part of the row did nothing. */
  .nav__link { display: flex; width: 100%; padding: .95rem .6rem; font-size: 1.06rem; border-radius: var(--r-sm); justify-content: space-between; }
  /* No submenu in the drawer. "Trattamenti" is a plain link here: that page IS
     the list, laid out properly, while sixteen names stacked in a phone menu
     were a wall to scroll past on the way to "Contatti". The chevron goes too,
     so nothing promises an expansion that never comes. */
  .nav__link svg, .nav__sub { display: none; }
  .nav__cta { margin: 1.2rem 0 0; }
  .nav__cta .btn { width: 100%; }

  /* Drawer rows are full-width, so a centred underline would float in the
     middle of the row. Tuck it under the label instead. */
  .nav__link[aria-current="page"]::after,
  .nav__item.is-active > .nav__link::after {
    left: .6rem; transform: none; bottom: .45rem;
  }
}

/* ================= HERO ================= */
.hero { position: relative; padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3.4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 861px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }

.hero__body p { font-size: clamp(1.02rem, .4vw + .95rem, 1.16rem); color: var(--ink-soft); max-width: 54ch; }
.hero__media { position: relative; }
.hero__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-xl);
  /* No drop shadow: on the doctor page it collided with the decorative
     picture behind the rail, and the frame line below already lifts the
     photo off the ground. */
}
/* Sand frame offset behind the photo. */
.hero__media::after {
  content: ''; position: absolute; inset: 14px -14px -14px 14px;
  border: 1.5px solid var(--sand-300); border-radius: var(--r-xl); z-index: -1;
}
/* Studio and Dottore: 5:3, lower and wider than the default 4:3. Both source
   photos are taller than that (the studio one is a portrait), so a centred
   crop is rarely right. Each template sets --focus for its own photo; re-check
   it when the photo changes. */
.hero__media--wide img { aspect-ratio: 5 / 3; object-position: var(--focus, 50% 50%); }


/* ================= HOME HERO ================= */
/*
 * Backdrop that fades into the bone ground (the same gesture as the
 * treatments index), copy and shortcut chips on the left, a callback card on
 * the right, a trust strip under both. No button pair.
 */
.hero--home { padding: 0; overflow: hidden; isolation: isolate; margin-top: calc(-1 * var(--nav-h)); }
.hero--home > .container { position: relative; z-index: 1; padding-top: calc(var(--nav-h) + clamp(2.4rem, 5vw, 4rem)); }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 35%, rgba(251, 248, 243, .25) 70%, var(--bone) 100%),
    radial-gradient(60% 90% at 25% 55%, rgba(251, 248, 243, .55), rgba(251, 248, 243, 0) 70%),
    rgba(251, 248, 243, .22);
}
.hero__grid--home { align-items: center; padding-bottom: clamp(2rem, 4vw, 3rem); }
@media (min-width: 861px) {
  .hero__grid--home { grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px); justify-content: space-between; }
}

.hero__q { font-family: var(--serif); font-size: 1.05rem; color: var(--navy-800); margin: .2rem 0 .6rem; }

/* Chips for the needs people arrive with. */
.needs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; }
.needs a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .42rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .8);
  font-size: .84rem; font-weight: 600; color: var(--navy-800); text-decoration: none;
  transition: border-color var(--dur) var(--easing), background var(--dur) var(--easing);
}
.needs a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sand-500); }
.needs a:hover { border-color: var(--navy-500); background: var(--navy-050); color: var(--navy-900); }

/* The doctor as a signature. */
.who { display: flex; align-items: center; gap: .9rem; }
.who img {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  outline: 1px solid var(--sand-300); outline-offset: 3px; flex: none;
}
.who span { font-size: .86rem; color: var(--ink-soft); line-height: 1.35; }
.who b { display: block; color: var(--navy-900); font-weight: 600; font-family: var(--serif); font-size: 1rem; }

/* The callback card. */
.callback {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line); border-left: 3px solid var(--sand-500);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: clamp(1.2rem, 2.5vw, 1.6rem) clamp(1.2rem, 2.5vw, 1.7rem);
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}
.callback__title { font-family: var(--serif); font-size: 1.35rem; color: var(--navy-900); margin: 0 0 .25rem; }
.callback__intro { font-size: .9rem; color: var(--ink-soft); margin: 0 0 1rem; }
.callback .alert { margin-bottom: .9rem; font-size: .88rem; padding: .7rem .9rem; }
.form--callback { gap: .85rem; }
.form--callback .field input { background: var(--white); width: 100%; }
/* Doubled selector: the generic .form__row goes to three columns at 620px
   and would otherwise win, leaving name and phone in two of three. */
.form--callback .form__row--cb { grid-template-columns: 1fr; gap: .85rem; }
@media (min-width: 480px) { .form--callback .form__row--cb { grid-template-columns: 1fr 1fr; } }
/* The sum on one line, pushed to the right so its box shares the card's
   right edge with the phone field above it. */
.form--callback .field--captcha-inline {
  grid-template-columns: auto 76px; justify-content: end; align-items: center; gap: .8rem;
}
.form--callback .field--captcha-inline input { max-width: none; text-align: center; }
.callback .field--check { align-items: center; }
.callback .field--check input { margin-top: 0; }
.callback .field--check label { font-size: .84rem; }
.callback__foot { margin-top: .2rem; }
.callback__foot .btn { width: 100%; }
.callback__alt {
  display: flex; align-items: center; gap: .5rem;
  margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--ink-soft);
}
.callback__alt img { width: 18px; height: 18px; }
.callback__alt a { color: var(--navy-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.callback__alt a:hover { color: var(--navy-900); }

/* The trust strip. */
.trust {
  list-style: none; margin: 0; padding: 1rem 0 1.3rem;
  display: flex; flex-wrap: wrap; gap: .5rem 2.2rem;
  border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-soft);
}
.trust b { color: var(--navy-900); font-weight: 600; }
.trust__stars { color: var(--sand-700); font-weight: 600; }
.trust__stars span { color: var(--sand-500); letter-spacing: .05em; font-weight: 400; }
.trust a { color: inherit; text-decoration: none; }
.trust a:hover b { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 600px) {
  .hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(251, 248, 243, .3) 0%, rgba(251, 248, 243, .7) 55%, var(--bone) 100%),
      rgba(251, 248, 243, .2);
  }
  .trust { gap: .45rem 1.4rem; }
}

/* ================= PROSE (rich text from the database) ================= */
.prose { max-width: 68ch; color: var(--ink-soft); min-width: 0; overflow-wrap: break-word; }
/* Pasted content can carry a wide table or code block; let it scroll inside
   itself so the page body never scrolls sideways. */
.prose table, .prose pre { display: block; max-width: 100%; overflow-x: auto; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child  { margin-bottom: 0; }
.prose h2 { margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose p { margin: 0 0 1.15em; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--sand-600); }
.prose a { color: var(--navy-700); text-decoration: underline; }
.prose a:hover { color: var(--navy-900); }
.prose img { border-radius: var(--r-md); margin: 1.6em 0; }
.prose blockquote {
  margin: 1.8em 0; padding: .2em 0 .2em 1.4em;
  border-left: 3px solid var(--sand-500);
  font-family: var(--serif); font-size: 1.16rem; font-style: italic; color: var(--navy-800);
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose--lead { font-size: 1.12rem; color: var(--ink-soft); }
/* Pages with no sidebar have the room; 68ch leaves them looking like a column
   that lost its neighbour. Still short of a full-width line. */
.prose--wide { max-width: 80ch; }
/* No measure at all: for prose that IS the container's only content and is
   already bounded by the gutters. */
.prose--open { max-width: none; }

/* ================= FEATURE ROWS (home "slides", now real content rows) ================= */
.features { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.feature {
  display: grid; gap: clamp(1.4rem, 3vw, 3rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 821px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature:nth-child(even) .feature__media { order: -1; }
}
.feature__media img {
  width: 100%; aspect-ratio: 5 / 3; object-fit: cover;
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.feature__body p { color: var(--ink-soft); }

/*
 * Single column: picture ABOVE its own text.
 *
 * In DOM order the text comes first, so stacked it read title, text, button,
 * picture — and each picture landed directly on top of the NEXT row's title,
 * looking like that section's image. Picture-first makes every row one unit,
 * and the gap inside a row is now a third of the gap between rows, so
 * proximity alone says what belongs together. DOM order is unchanged: the
 * picture link is aria-hidden and out of the tab order, so screen readers and
 * keyboards still meet the heading first.
 */
@media (max-width: 820px) {
  .features { gap: 3.2rem; }
  .feature { gap: 1.1rem; }
  .feature__media { order: -1; }
}

/* ================= CARDS ================= */
.card-grid {
  display: grid; gap: clamp(1.1rem, 2.2vw, 1.8rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}
/* Explicit column counts. auto-fill leaves ragged last rows (4 + 2); a fixed
   count keeps the grid even, which is what these sections want. */
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .card-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .card-grid--3 { grid-template-columns: 1fr; } }

.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .card-grid--2 { grid-template-columns: 1fr; } }

/* Long medical terms must wrap rather than push the card wider than its column. */
.card, .card__body, .card__title, .card__text { min-width: 0; overflow-wrap: anywhere; }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: inherit; height: 100%;
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing),
              border-color var(--dur) var(--easing);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--navy-200); }
.card:focus-within { box-shadow: var(--shadow-md); }

.card__media { position: relative; overflow: hidden; background: var(--bone-2); }
.card__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 600ms var(--easing);
}
.card:hover .card__media img { transform: scale(1.04); }

.card__body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__title { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; color: var(--wine-800); margin: 0 0 1rem; }
.card__text { font-size: .93rem; color: var(--ink-soft); margin: 0 0 1rem; }
.card__more {
  margin-top: auto; font-size: .87rem; font-weight: 600; letter-spacing: .02em;
  color: var(--navy-700); display: inline-flex; align-items: center; gap: .4rem;
}
.card__more::after { content: '→'; transition: transform var(--dur) var(--easing); }
.card:hover .card__more::after { transform: translateX(4px); }

/*
 * Horizontal card: picture left, text right.
 *
 * The picture is absolutely positioned rather than sized with height:100%.
 * .card__media is a flex item whose height comes from `stretch`, and a
 * percentage height against a stretched (not definite) height is the kind of
 * thing browsers have historically disagreed about. inset:0 has no such
 * argument — and the parent is already position:relative for .card__link.
 */
.card--row { flex-direction: row; align-items: stretch; min-height: 172px; }

.card--row .card__media { flex: 0 0 38%; align-self: stretch; }
.card--row .card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;        /* the row's height decides, not a fixed ratio */
  object-fit: cover;
}

/* Vertically centred: the text is the shorter element and a top-aligned block
   leaves a gap under it that reads as a mistake. */
.card--row .card__body { justify-content: center; padding: 1.15rem 1.35rem; }
.card--row .card__more { margin-top: 0; }

/*
 * Three lines, hard stop.
 *
 * Not cosmetic. In a horizontal card the TEXT sets the height and the picture
 * fills what is left, so an excerpt that wraps to five lines in a narrow
 * column turns the picture column portrait and crops a landscape illustration
 * to 3:4. Bounding the text bounds the card, which keeps the crop landscape at
 * every width. At the full 368px column these excerpts are three lines anyway,
 * so nothing is lost where there is room.
 */
.card--row .card__text {
  margin-bottom: .85rem;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Below this the text column is too narrow to hold a title and three lines of
   prose beside a picture, so the card goes back to being a stack. */
@media (max-width: 600px) {
  .card--row { flex-direction: column; min-height: 0; }
  .card--row .card__media { flex: none; }
  .card--row .card__media img { position: static; aspect-ratio: 4 / 3; height: auto; }
  .card--row .card__body { justify-content: flex-start; }
}

/* Whole card clickable without nesting interactive elements. */
.card__link::after { content: ''; position: absolute; inset: 0; }

/* Shortcut cards: image with a navy scrim and the label over it. */
.shortcut {
  position: relative; display: block; min-height: 260px; border-radius: var(--r-lg);
  overflow: hidden; text-decoration: none; color: #fff; box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.shortcut:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: #fff; }
.shortcut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shortcut::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7, 31, 90, .86) 0%, rgba(7, 31, 90, .48) 45%, rgba(7, 31, 90, .12) 100%);
}
.shortcut__body { position: relative; z-index: 1; padding: 1.4rem; margin-top: auto; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; }
.shortcut__title { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: #fff; margin: 0 0 .25rem; }
.shortcut__more { font-size: .85rem; font-weight: 600; color: var(--sand-300); display: inline-flex; align-items: center; gap: .4rem; }
.shortcut__more::after { content: '→'; transition: transform var(--dur) var(--easing); }
.shortcut:hover .shortcut__more::after { transform: translateX(4px); }

/* ================= GALLERY ================= */
.gallery {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.gallery__item {
  border: 0; padding: 0; background: var(--bone-2); cursor: zoom-in;
  border-radius: var(--r-md); overflow: hidden; display: block;
}
.gallery__item img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform 600ms var(--easing), opacity var(--dur) var(--easing);
}
.gallery__item:hover img { transform: scale(1.05); opacity: .92; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  width: 100%; height: 100%; max-width: 100%; max-height: 100%;
  background: rgba(7, 16, 38, .93);
  padding: clamp(1rem, 4vw, 3rem);
  border: 0; overflow: hidden;
}
/* Layout goes on [open], NOT on .lightbox. An author `display` on the bare
   selector beats the UA's `dialog:not([open]) { display: none }`, so the
   closed dialog stays in the layout as a stray box in the corner. */
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(7, 16, 38, .93); }
.lightbox img {
  max-width: 100%; max-height: 82vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  transition: opacity 140ms var(--easing);
}
/* Held blank while a new source decodes — see show() in site.js. */
.lightbox img.is-loading { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .lightbox img { transition: none; } }
.lightbox__close, .lightbox__nav {
  position: absolute; width: 48px; height: 48px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  color: #fff; font-size: 1.4rem; cursor: pointer; display: grid; place-items: center;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .24); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav--prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.72); font-size: .85rem; }

/* ================= TREATMENTS INDEX (/trattamenti/) ================= */
/*
 * A directory, not a card wall.
 *
 * The card grid put a 4:3 clinical close-up on top of every entry — a dry
 * socket, a panoramic x-ray, a carious molar — sixteen of them at once. The
 * single-treatment page already learnt this lesson and shrank its picture to
 * a 200px "diagram"; the index goes further and makes it a 76px medallion
 * beside the title, where it identifies the row without illustrating the
 * discomfort. What carries the page instead is typography: serif titles,
 * hairlines between rows, and one faint sand numeral per group as the only
 * ornament.
 */

/*
 * The hero. Short on purpose, and it has no bottom edge: the picture fades
 * into the page ground over its lower half, so the list below reads as a
 * continuation rather than a second section.
 *
 * It runs up under the fixed header (negative top margin, padding to match),
 * which the header's frosted-glass ::before was built for. The picture's own
 * tones run bluish; the warm wash on the scrim pulls it toward the bone
 * ground so the fade lands on the same colour it dissolves into.
 */
.tx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + clamp(2rem, 5vw, 3.6rem)) 0 clamp(1.6rem, 3vw, 2.4rem);
  min-height: clamp(300px, 40vh, 440px);
  display: flex; align-items: flex-end;
  background: var(--bone);
}
.tx-hero__img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
}
/* Three washes in one layer: a warm tint over everything, a soft pool
   behind the text column, and the fade to bone along the bottom. */
.tx-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 35%, rgba(251, 248, 243, 0) 72%, #FBF8F3 100%),
    radial-gradient(60% 80% at 22% 60%, rgba(251, 248, 243, .45), rgba(251, 248, 243, 0) 70%),
    rgba(251, 248, 243, .22);
}
.tx-hero__body { position: relative; }
.tx-hero .section__head { margin-bottom: 1.4rem; }
/* On Contatti and Blog nothing follows the heading inside the hero, so its
   bottom margin would only stack on the hero's own padding. */
.tx-hero .section__head:last-child { margin-bottom: 0; }
.tx-hero .prose--lead { color: var(--ink); }
.tx-hero .tx-jump { margin: 0; }

/* The list starts where the hero ends; it needs no top gap of its own. */
/* The section right under a tx-hero starts close: the hero's own bottom
   padding already separates them. */
.tx-index.section--tight, .after-hero.section--tight { padding-top: .5rem; }

@media (max-width: 600px) {
  .tx-hero { min-height: 0; }
  .tx-hero::before {
    background:
      linear-gradient(to bottom, rgba(251, 248, 243, .35) 0%, rgba(251, 248, 243, .82) 60%, var(--bone) 100%),
      rgba(251, 248, 243, .2);
  }
}

/* Jump chips under the intro. Two groups, and the second starts a long way
   down on a phone. */
.tx-jump { display: flex; flex-wrap: wrap; gap: .6rem; margin: -.4rem 0 clamp(1.6rem, 3vw, 2.4rem); }
.tx-jump a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--white);
  font-size: .9rem; font-weight: 600; color: var(--navy-800); text-decoration: none;
  transition: border-color var(--dur) var(--easing), background var(--dur) var(--easing);
}
.tx-jump a span {
  font-size: .75rem; font-weight: 600; color: var(--sand-700);
  background: var(--sand-100); border-radius: var(--r-pill); padding: .1rem .5rem;
}
.tx-jump a:hover { border-color: var(--navy-500); background: var(--navy-050); color: var(--navy-900); }

.tx-group { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.tx-group + .tx-group { margin-top: clamp(2.6rem, 5vw, 4.5rem); }

/* Group head: label, title and lead on the left, the numeral on the right,
   both sitting on one rule. */
.tx-group__head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: .5rem 2rem; padding-bottom: .9rem; margin-bottom: .25rem;
  border-bottom: 1.5px solid var(--navy-200);
}
.tx-group__head .eyebrow { margin-bottom: .6rem; }
.tx-group__head h2 { margin: 0; font-size: clamp(1.55rem, 1.6vw + .7rem, 2.15rem); }
.tx-group__lead { margin: .4rem 0 0; color: var(--ink-soft); font-size: .98rem; max-width: 48ch; }

/* The watermark. Display serif, sand, faint enough to be texture rather
   than a number you read. Sits on the baseline of the rule. */
.tx-group__num {
  font-family: var(--serif); font-weight: 500; line-height: .78;
  font-size: clamp(4.2rem, 9vw, 7.4rem); letter-spacing: -.05em;
  color: var(--sand-300); opacity: .8; user-select: none;
  margin-bottom: -.04em;
}

/* Rows: one column, two side by side once there is room for a medallion,
   a title and two lines of text in each half. */
.tx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
@media (min-width: 861px) {
  .tx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
}

.tx-item { min-width: 0; border-bottom: 1px solid var(--line); }
.tx-item__link {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: 1.15rem; padding: 1.05rem .75rem; margin: 0 -.75rem;
  border-radius: var(--r-md); text-decoration: none; color: inherit;
  transition: background var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.tx-item__link:hover, .tx-item__link:focus-visible {
  background: var(--white); box-shadow: var(--shadow-sm); color: inherit;
}
.tx-item__link:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; }

/* The medallion. The hero photo's offset sand frame, shrunk to a ring. */
.tx-item__thumb {
  width: 76px; height: 76px; border-radius: 50%; overflow: hidden; flex: none;
  background: var(--bone-2); border: 1px solid var(--line);
  outline: 1px solid var(--sand-300); outline-offset: 3px;
}
.tx-item__thumb img {
  width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover;
  transition: transform 600ms var(--easing);
}
.tx-item__link:hover .tx-item__thumb img { transform: scale(1.07); }

.tx-item__body { display: block; min-width: 0; overflow-wrap: anywhere; }
.tx-item__n {
  display: block; font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  color: var(--sand-700); margin-bottom: .2rem;
}
.tx-item__title {
  display: block; font-family: var(--serif); font-size: 1.44rem; font-weight: 600;
  line-height: 1.2; color: var(--wine-800); margin: 0 0 .3rem; letter-spacing: -.015em;
  transition: color var(--dur) var(--easing);
}
.tx-item__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  font-size: .9rem; line-height: 1.5; color: var(--ink-soft);
}

/* Arrow in a white disc with a hairline ring; fills navy on hover.
   The list sits on bone (the treatments page) and on bone-2 (the homepage).
   navy-100 read as a stray blue smudge on the warm bone-2; white plus the
   ring reads as a deliberate chip on both, and the ring is what keeps the
   disc visible on bone, where white alone is nearly the ground. An inset
   shadow rather than a border, so the ring adds no size. */
.tx-item__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--white); color: var(--navy-800); font-size: 1.05rem;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background var(--dur) var(--easing), color var(--dur) var(--easing),
              box-shadow var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.tx-item__link:hover .tx-item__arrow { background: var(--navy-800); color: #fff; transform: translateX(3px); }

@media (max-width: 600px) {
  .tx-item__thumb { width: 60px; height: 60px; }
  .tx-item__link { gap: .9rem; padding: .9rem .5rem; margin: 0 -.5rem; }
  .tx-item__arrow { width: 32px; height: 32px; font-size: .95rem; }
  .tx-group__head { gap: .5rem 1rem; }
}

/* ================= TREATMENT PAGE ================= */
/* Title row: a small clinical illustration beside the heading, in place of the
   full-bleed hero these pages used to open with. See templates/treatment.php
   for why the picture got smaller rather than better. */
.t-head {
  display: grid; gap: 1.1rem 1.7rem;
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}
@media (min-width: 560px) {
  .t-head { grid-template-columns: 200px minmax(0, 1fr); }
}
.t-head__figure { margin: 0; }
/*
 * One shape for all sixteen, now that the two square diagrams (pulpite,
 * endodonzia) have landscape replacements. The remaining sources run 1.25 to
 * 1.68, so a 4/3 crop takes at most 21% off the widest — and that one is a
 * before/after split whose two panels both survive it.
 */
.t-head__figure img {
  width: 100%; max-width: 200px;      /* also the cap when the row is stacked */
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--bone-2);          /* cut-out renders sit on white */
}
/* The row supplies the spacing; the heading's own bottom margin would push the
   title off centre against the picture. */
.t-head__text h1 { margin: 0; }

.split {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 981px) { .split { grid-template-columns: minmax(0, 1fr) 300px; } }

.aside { align-self: start; }
@media (min-width: 981px) { .aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }

.aside__box {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
}
.aside__title {
  font-family: var(--sans); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 .9rem;
}
.aside__list { list-style: none; margin: 0; padding: 0; }
.aside__list li + li { margin-top: .15rem; }
.aside__list a {
  display: block; padding: .5rem .65rem; border-radius: var(--r-sm);
  font-size: .92rem; color: var(--ink-soft); text-decoration: none;
  overflow-wrap: anywhere;
}
.aside__list a:hover { background: var(--navy-050); color: var(--navy-900); }
.aside__list a[aria-current="page"] {
  background: var(--navy-900); color: #fff; font-weight: 600;
}

.pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.pager a { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; max-width: 46%; }
.pager__label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pager__title { font-family: var(--serif); font-size: 1rem; color: var(--navy-800); }
.pager a:hover .pager__title { color: var(--navy-900); text-decoration: underline; }
.pager__next { text-align: right; margin-left: auto; }

.disclaimer {
  margin-top: 2.8rem; padding: 1.2rem 1.35rem;
  background: var(--bone-2); border-left: 3px solid var(--sand-500); border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: .88rem; color: var(--ink-soft);
}
.disclaimer p { margin-bottom: .7em; }
.disclaimer > :last-child { margin-bottom: 0; }
.disclaimer summary {
  cursor: pointer; font-weight: 600; color: var(--navy-800);
  font-size: .92rem; list-style: none;
}
.disclaimer summary::-webkit-details-marker { display: none; }
.disclaimer summary::before { content: '▸ '; color: var(--sand-600); }
.disclaimer[open] summary::before { content: '▾ '; }
.disclaimer summary + * { margin-top: .9rem; }

/* ================= CONTACT ================= */
.contact-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 921px) { .contact-grid { grid-template-columns: 1fr 1.05fr; } }

.info-list { display: grid; gap: 1rem; }
.info {
  display: flex; gap: .95rem; align-items: flex-start;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.05rem 1.15rem;
}
.info__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-pill);
  background: var(--navy-050); color: var(--navy-700);
  display: grid; place-items: center;
}
.info__icon svg { width: 19px; height: 19px; }
.info__label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 .2rem; }
.info__value { margin: 0; font-weight: 500; color: var(--ink); }
.info__value a { color: var(--navy-800); text-decoration: none; }
.info__value a:hover { text-decoration: underline; }

/*
 * "Dove trovarci" as one white sheet divided into rows.
 *
 * It used to be six separate white, bordered, rounded cards stacked in a
 * column, right beside a column of white, bordered, rounded form fields: the
 * same component twice. Rows inside a single card read as information, and the
 * form now sits on the warm panel, so the two columns no longer echo each
 * other. Remove the contact-col--info modifier to get the cards back.
 */
.contact-col--info {
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.contact-col--info .info-list { gap: 0; }
.contact-col--info .info {
  background: none; border: 0; border-radius: 0;
  border-top: 1px solid var(--line);
  padding: 1.05rem 0;
}
.contact-col--info .info:first-child { border-top: 0; padding-top: 0; }
.contact-col--info .info:last-child  { padding-bottom: 0; }

.hours { width: 100%; border-collapse: collapse; font-size: .94rem; }
.hours th, .hours td { text-align: left; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 500; color: var(--ink-soft); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours .is-closed { color: var(--muted); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--navy-900); font-weight: 700; }

.map-frame {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); background: var(--bone-2);
}
.map-frame iframe { display: block; width: 100%; height: clamp(280px, 40vw, 420px); border: 0; }

/* ================= LOCAL SEO: hub list, homepage line, location pages ================= */
/* All of this renders only once a location page is published. */
.zones { max-width: 760px; }
.zones__title { font-size: clamp(1.35rem, 1.1vw + .9rem, 1.7rem); margin: 0 0 .4rem; }
.zones__intro { color: var(--ink-soft); margin: 0 0 1rem; }
.zones__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.zones__list a {
  display: inline-flex; align-items: center; padding: .45rem 1rem;
  border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--line-strong);
  color: var(--navy-800); font-size: .94rem; font-weight: 500; text-decoration: none;
  transition: border-color var(--dur) var(--easing), color var(--dur) var(--easing);
}
.zones__list a:hover { border-color: var(--navy-600); color: var(--navy-900); }

.zones-line { margin: 1.2rem auto 0; max-width: 70ch; text-align: center; font-size: .95rem; color: var(--ink-soft); }
.zones-line a { color: var(--navy-700); }

.loc-body { margin-top: 1.8rem; }
.loc-back { margin: 2rem 0 0; font-size: .92rem; }
.loc-back a { color: var(--navy-700); }
.loc-address { margin: 0 0 .3rem; font-weight: 500; color: var(--ink); }

/* ================= FORMS ================= */
.form { display: grid; gap: 1rem; }
.field { display: grid; gap: .38rem; }
.field__label { font-size: .86rem; font-weight: 600; color: var(--ink); }
.field__label .req { color: var(--sand-700); }
.field input, .field textarea, .field select {
  font: inherit; font-size: .97rem; color: var(--ink);
  width: 100%; padding: .78rem .95rem;
  background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px var(--navy-100);
}
.field textarea { min-height: 148px; resize: vertical; }
.field small { display: block; margin-top: 4px; color: var(--muted); font-size: .82rem; }

.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; }
.field--check input { width: 18px; height: 18px; margin-top: .2rem; }
.field--check label { font-size: .88rem; color: var(--ink-soft); }

/* Short enquiry form, embedded below a treatment's prose. Two columns on a
   wide article, one on a narrow one — container queries would be nicer, but
   the article is inside a grid whose width is already known at these widths. */
.form--compact .field textarea { min-height: 104px; }
.form__row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .form__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form__row--foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.4rem; }
}

/* The warm form panel. One rule for the short form on treatment pages and the
   full form on /contatti/, so the two forms cannot drift into different boxes. */
.ask, .contact-col--form {
  padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--bone-2); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.ask { margin-top: 1.6rem; }
.ask__head { margin-bottom: 1.3rem; }
.ask__title { font-family: var(--serif); font-size: 1.32rem; color: var(--navy-900); margin: 0 0 .35rem; }
.ask__intro { font-size: .93rem; color: var(--ink-soft); margin: 0; }
/* The box already sits on bone-2; white fields are what keeps it legible. */
.ask .field input, .ask .field textarea,
.contact-col--form .field input, .contact-col--form .field textarea { background: var(--white); }

/* Bots fill this; people never see it. */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert { padding: .95rem 1.15rem; border-radius: var(--r-md); font-size: .94rem; margin-bottom: 1.2rem; }
.alert--ok   { background: #E7F4EC; border: 1px solid #B6DEC6; color: #17552F; }
.alert--err  { background: #FCEBEA; border: 1px solid #F0C0BC; color: #7A241D; }

/* ================= BLOG ================= */
.post-meta { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.post-meta time { font-variant-numeric: tabular-nums; }
.post-meta .dot::before { content: '·'; margin-right: .9rem; }

.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.post-lead { font-family: var(--serif); font-size: 1.2rem; font-style: italic; color: var(--navy-800); margin: 1.4rem 0 2rem; }

.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2.6rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; padding: .55rem .8rem; border-radius: var(--r-sm);
  border: 1px solid var(--line); text-align: center; text-decoration: none;
  font-size: .92rem; color: var(--ink-soft); background: var(--white);
}
.pagination a:hover { border-color: var(--navy-600); color: var(--navy-900); }
.pagination .is-current { background: var(--navy-900); border-color: var(--navy-900); color: #fff; font-weight: 600; }

.empty {
  text-align: center; padding: clamp(2.5rem, 6vw, 5rem) 1rem;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); color: var(--muted);
}

/* ================= FOOTER ================= */
.site-footer { background: var(--navy-900); color: #C9D6EE; margin-top: clamp(3rem, 6vw, 5rem); }
/* :not(.btn) for the same reason as the navy band above — a link colour set
   on an ancestor otherwise outranks the button's own colour. */
.site-footer a:not(.btn) { color: #C9D6EE; text-decoration: none; }
.site-footer a:not(.btn):hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid; gap: clamp(1.8rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding: clamp(2.6rem, 5vw, 4rem) 0 clamp(1.6rem, 3vw, 2.2rem);
}
@media (min-width: 721px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1021px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.footer__brand .brand__name { color: #fff; }
.footer__brand p { font-size: .92rem; color: #9FB2D4; max-width: 34ch; }

/* The logo artwork is navy on transparent and would disappear against the
   navy footer. brightness(0) crushes it to black, invert(1) lifts it to
   solid white — one filter, no second asset to keep in sync. */
.footer__logo {
  width: 220px; max-width: 100%; height: auto;
  margin-bottom: 1rem;
  filter: brightness(0) invert(1);
  opacity: .95;
}

.footer__social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.social {
  width: 42px; height: 42px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  transition: background var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.social svg { width: 21px; height: 21px; }
.social:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); color: #fff; }

.footer__directions { display: inline-flex; align-items: center; gap: .4rem; }
.footer__directions svg { width: 15px; height: 15px; flex: 0 0 auto; }

.footer__title {
  font-family: var(--sans); font-size: .76rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sand-300); margin: 0 0 .9rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.footer__list li { margin-bottom: .45rem; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 1.1rem 0 1.6rem;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between;
  font-size: .82rem; color: #8FA3C8;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }
/* Legal basis for the health information on the site. Sits between the legal
   links and the build credit, in the same quiet register as both. */
.footer__note { margin: 0; padding: 0 0 .8rem; font-size: .8rem; line-height: 1.5; color: #8FA3C8; }

/* Floating call button — mobile only, where tapping to call is the fast path.
   It sits above the WhatsApp bubble rather than beside it. */
.quick-actions {
  position: fixed; right: 1rem; bottom: 5.4rem; z-index: 90;
  display: flex; flex-direction: column; gap: .6rem;
}
.quick-actions .btn {
  width: 54px; height: 54px; padding: 0; border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
}
.quick-actions .btn svg { width: 24px; height: 24px; }
@media (min-width: 981px) { .quick-actions { display: none; } }

/* ================= WHATSAPP BUBBLE ================= */
/* Always visible, every breakpoint. Deliberately two-step: the bubble opens a
   card, and only the card's button leaves the site — so a stray tap never
   throws the visitor into WhatsApp. */
.wa { position: fixed; right: 1rem; bottom: 1rem; z-index: 95; }

.wa__btn {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  border: 0; padding: 0; cursor: pointer;
  background: #25D366;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42), var(--shadow-md);
  display: grid; place-items: center;
  transition: transform var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.wa__btn:hover { transform: scale(1.06); }
.wa__btn img { width: 34px; height: 34px; }
/* The icon art is already a green rounded square; drop it onto the circle
   without a second background showing at the corners. */
.wa__btn img { border-radius: var(--r-pill); }

.wa__panel {
  position: absolute; right: 0; bottom: calc(100% + .7rem);
  width: min(320px, calc(100vw - 2rem));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: wa-in 220ms var(--easing) both;
}
@keyframes wa-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.wa__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .8rem .9rem; background: #075E54; color: #fff;
}
.wa__head img { border-radius: 6px; flex: 0 0 auto; }
.wa__head div { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wa__head strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa__head span { font-size: .74rem; opacity: .8; }
.wa__x {
  margin-left: auto; background: none; border: 0; color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 .2rem; opacity: .85;
}
.wa__x:hover { opacity: 1; }

.wa__msg {
  margin: 0; padding: 1rem .9rem;
  font-size: .9rem; color: var(--ink-soft); background: #ECE5DD;
}
.wa__cta {
  display: block; margin: .9rem; padding: .75rem 1rem;
  background: #25D366; color: #06301A;
  border-radius: var(--r-pill); text-align: center;
  font-weight: 600; font-size: .93rem; text-decoration: none;
  transition: background var(--dur) var(--easing);
}
.wa__cta:hover { background: #1FBA59; color: #06301A; }

/* ================= 404 ================= */
.error-page { text-align: center; padding: clamp(3rem, 9vw, 7rem) 0; }
.error-page__code { font-family: var(--serif); font-size: clamp(4rem, 14vw, 8rem); color: var(--navy-100); line-height: 1; margin: 0; }

/* Arrow affordance on a "see everything" button. */
.btn--arrow::after { content: '→'; transition: transform var(--dur) var(--easing); }
.btn--arrow:hover::after { transform: translateX(4px); }

/* Body scroll lock, shared by the lightbox (and anything else modal).
   width:auto with left:0 + right:var(--sbw) gives viewport-minus-scrollbar;
   width:100% would re-fill the reclaimed width and defeat the point. */
body.scroll-locked {
  position: fixed; left: 0; right: var(--sbw, 0); width: auto; overflow: hidden;
}

/* Contact columns: both start with an h2 on the same baseline, so the form
   and the details line up instead of one floating half a heading higher. */
.contact-col { min-width: 0; }
.contact-col__title {
  font-size: clamp(1.35rem, 1.1vw + .9rem, 1.7rem);
  margin: 0 0 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

/* Directions link inside an info card. */
.info__action {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .5rem; font-size: .88rem; font-weight: 600;
  color: var(--navy-700); text-decoration: none;
}
.info__action svg { width: 15px; height: 15px; flex: 0 0 auto; }
.info__action:hover { color: var(--navy-900); text-decoration: underline; }

/* Brand tints for the two social rows. */
.info__icon--wa { background: #E3F7E8; color: #128C4A; }
.info__icon--fb { background: #E7EEFB; color: #1877F2; }

/* Feature-row heading as the link. Inherits the serif heading style; only the
   hover state marks it as interactive. */
.feature__link { color: inherit; text-decoration: none; }
.feature__link:hover { color: var(--navy-700); text-decoration: underline; text-decoration-thickness: 2px; }
.feature__media a { display: block; border-radius: var(--r-lg); overflow: hidden; }

/* The doctor page's inline section photo. */
.prose figure { margin: 1.8em 0; }
.prose figure img { border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 100%; }

/* Captcha field: a short numeric answer needs a short box, not a full-width one. */
.field--captcha input { max-width: 120px; }

/* ================= PARTNERSHIP ================= */
.partner-group {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sand-700);
  margin: 0 0 1rem;
}
.partner-list {
  list-style: none; margin: 0 0 2.6rem; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
/* Flat: a hairline and a fill, no shadow and no lift. These are credits, not
   calls to action, and shadowed cards would out-shout the treatment grid. */
.partner {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1.2rem 1.35rem;
  transition: border-color var(--dur) var(--easing), background var(--dur) var(--easing);
}
.partner:hover { border-color: var(--navy-200); background: var(--navy-050); }
.partner__name {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--serif); font-size: 1.12rem; font-weight: 600;
  color: var(--navy-800); text-decoration: none; word-break: break-word;
}
.partner__name svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .55; }
.partner__name:hover { color: var(--navy-900); text-decoration: underline; }
.partner__name:hover svg { opacity: 1; }
.partner__desc { margin: .45rem 0 0; font-size: .93rem; color: var(--ink-soft); }

/* Build credit. Quieter than the legal row above it — it is an attribution,
   not navigation. */
.footer__credit {
  margin: 0; padding: 0 0 1.6rem;
  font-size: .8rem; color: #7F92B6;
}
.footer__credit a { color: #A8BBDB; }
.footer__credit a:hover { color: #fff; }

/* ================= REVIEWS ================= */
.review-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  align-items: start;
}
.review-grid--strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .review-grid--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .review-grid--strip { grid-template-columns: 1fr; } }

.review {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 1.25rem 1.3rem 1.1rem;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.review__head { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.review__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 1.05rem;
}
.review__id { min-width: 0; flex: 1 1 auto; }
.review__name {
  margin: 0; font-weight: 600; font-size: .96rem; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review__date { margin: .1rem 0 0; font-size: .8rem; color: var(--muted); }
/* The source is now the platform mark, not a text badge. */
.review__source {
  flex: 0 0 auto; position: relative;
  width: 26px; height: 26px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--bone-2); border: 1px solid var(--line);
  cursor: help;
}
.review__source img { width: 16px; height: 16px; object-fit: contain; }

/* Tooltip. Shown on hover AND on keyboard focus, which is why the wrapper
   carries tabindex — a hover-only tip is invisible to anyone not using a
   mouse. pointer-events:none keeps it from swallowing the hover it caused. */
.review__source::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + .45rem); right: 0;
  padding: .35rem .6rem; border-radius: var(--r-sm);
  background: var(--navy-900); color: #fff;
  font-size: .74rem; font-weight: 500; letter-spacing: .01em;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--dur) var(--easing), transform var(--dur) var(--easing);
  box-shadow: var(--shadow-md);
}
.review__source:hover::after,
.review__source:focus-visible::after { opacity: 1; transform: translateY(0); }

.review__stars { display: flex; gap: 1px; margin: 0 0 .6rem; color: var(--ink); }
.review__text { margin: 0; font-size: .93rem; line-height: 1.6; color: var(--ink-soft); overflow-wrap: anywhere; }

/* Clamp on the homepage strip only; <details> lifts it via :has(). */
.review:not(.review--expanded) .review__text {
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.review:has(.review__more[open]) .review__text {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.review__more { margin-top: .7rem; font-size: .85rem; }
.review__more summary {
  cursor: pointer; list-style: none; color: var(--navy-700);
  font-weight: 600; display: inline-block;
}
.review__more summary::-webkit-details-marker { display: none; }
.review__more summary:hover { color: var(--navy-900); text-decoration: underline; }
.review:has(.review__more[open]) .review__more summary { font-size: 0; }
.review:has(.review__more[open]) .review__more summary::before { content: 'Chiudi'; font-size: .85rem; }

.review-note { font-size: .9rem; color: var(--muted); margin: .6rem 0 0; }

/* ================= CREDENTIALS ================= */
.credentials {
  margin: 2.6rem 0 0; padding: 1.4rem 1.5rem;
  background: var(--bone-2); border-left: 3px solid var(--sand-500);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.credentials__title {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--sand-700); margin: 0 0 1rem;
}
.credentials__list { margin: 0; display: grid; gap: .9rem; }
.credentials__list > div { display: grid; gap: .15rem; }
.credentials__list dt {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.credentials__list dd { margin: 0; font-size: .95rem; color: var(--ink); }
.credentials__updated { margin: 1.1rem 0 0; font-size: .82rem; color: var(--muted); }

/* ================= DOCTOR PAGE BODY ================= */
/*
 * Two columns: prose left, a rail right with the register card (it scrolls
 * with the page, like everything else), and
 * a decorative picture bleeding in from the right edge of the viewport
 * behind the rail. The picture is bluish; the washes on ::after pull it
 * toward the bone ground and fade it out on its left, top and bottom so it
 * has no edge anywhere.
 */
.doc-body { position: relative; }
.doc-body__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; position: relative; }

.doc-body__art { display: none; }

@media (min-width: 981px) {
  .doc-body__grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  .doc-body__art {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    top: -2rem; bottom: -2rem;
    right: calc(50% - 50vw);              /* bleed to the viewport edge */
    width: min(46vw, 660px);
    overflow: hidden;
  }
  .doc-body__art img {
    width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
    opacity: .85;
  }
  .doc-body__art::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(to right, var(--bone) 0%, rgba(251, 248, 243, .6) 30%, rgba(251, 248, 243, 0) 60%),
      linear-gradient(to bottom, var(--bone) 0%, rgba(251, 248, 243, 0) 22%, rgba(251, 248, 243, 0) 78%, var(--bone) 100%),
      rgba(251, 248, 243, .28);
  }
  .doc-body__grid { z-index: 1; }
}

/* The register card, on the rail: a translucent white card instead of the
   sand slab it is elsewhere, so the picture shows through its edges. */
.doc-body__rail .credentials {
  margin: 0; background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line); border-left: 3px solid var(--sand-500);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* The prose itself. The column bounds the measure now, so no max-width;
   headings get the site's short sand rule, and the two long course lists
   sit a little tighter. */
.prose--doc { max-width: none; }
.prose--doc > p:first-child { font-size: 1.06rem; }
.prose--doc h2 { margin-top: 2.4em; }
.prose--doc h2::before {
  content: ''; display: block; width: 28px; height: 2px;
  background: var(--sand-500); margin-bottom: .8rem;
}
.prose--doc ul { padding-left: 1.2em; }
.prose--doc li { margin-bottom: .35em; font-size: .97rem; }
.prose--doc li strong { font-weight: 600; }

/* Footer variant: one quiet line under the columns. */
.footer__albo {
  margin: 0; padding: 1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .82rem; color: #8FA3C8;
}

/* Footer opening-hours row. */
.footer__hours { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; }
.footer__hours-days { color: #C9D6EE; }
.footer__hours-times { display: flex; flex-wrap: wrap; gap: .5rem; color: #9FB2D4; font-variant-numeric: tabular-nums; }

/* Two ranges stack inside one cell on the contact page. */
.hours__range { display: block; }

/* MioDottore's mark is a coloured raster, unlike the inline SVGs beside it;
   flatten it to white so the three social chips read as one set. */
.social__img { width: 21px; height: 21px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.social:hover .social__img { opacity: 1; }

/* "Lascia una recensione" — a star marks it as the outbound action rather
   than another internal link. */
.footer__review { display: inline-flex; align-items: center; gap: .35rem; }
.footer__review svg { flex: 0 0 auto; color: var(--sand-300); }

/* Under the map: the address in text plus a real Maps link. The embed cannot
   report failure to the page, so this is the fallback — it is always correct
   whatever the iframe decided to draw. */
.map-fallback {
  margin: .8rem 0 0; text-align: center;
  font-size: .9rem; color: var(--ink-soft);
}
.map-fallback a { color: var(--navy-700); font-weight: 600; }

/* ================= URGENZE ================= */
/* Homepage hero: sits under the needs chips, before the doctor's signature. */
.urgent-cta {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: -.5rem 0 1.5rem; padding: .6rem 1.15rem;
  border-radius: var(--r-pill); background: var(--urgent); color: #fff;
  font-size: .95rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 16px rgba(180, 35, 24, .22);
  transition: background var(--dur) var(--easing), transform var(--dur) var(--easing);
}
.urgent-cta:hover { background: var(--urgent-dark); color: #fff; transform: translateY(-1px); }
.urgent-cta svg { width: 18px; height: 18px; flex: none; }

.btn--urgent { background: var(--urgent); color: #fff; border-color: var(--urgent); }
.btn--urgent:hover { background: var(--urgent-dark); border-color: var(--urgent-dark); color: #fff; }
.btn--urgent svg { width: 18px; height: 18px; }
.urgent-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.urgent-actions + .loc-body,
.btn-row + .loc-body { margin-top: 3rem; }

/* Hours in an aside box (urgenze, location pages). */
.hours-list { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.hours-list li { display: flex; flex-direction: column; padding: .5rem 0; border-top: 1px solid var(--line); }
.hours-list li:first-child { border-top: 0; padding-top: 0; }
.hours-list span { color: var(--ink-soft); }
.hours-list b { color: var(--navy-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.loc-note { margin: 0 0 .3rem; font-size: .88rem; color: var(--ink-soft); }
.hours-list + .loc-note { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--line); }

/* Footer: the one red cue in the navy footer, kept small. */
.footer__urgent::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: .5rem;
  border-radius: 50%; background: #F97066; vertical-align: middle;
}

/* ================= PRIVACY MODAL ================= */
/* Layout on the panel, never on the bare dialog: an author display rule would
   override the UA's dialog:not([open]) { display: none }. */
.privacy-modal {
  width: min(680px, calc(100% - 2rem)); max-height: min(85vh, 760px);
  padding: 0; border: 0; background: transparent; overflow: visible;
}
.privacy-modal::backdrop { background: rgba(7, 16, 38, .6); }
.privacy-modal__panel {
  display: flex; flex-direction: column; max-height: min(85vh, 760px);
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.privacy-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--line);
}
.privacy-modal__title { margin: 0; font-size: 1.25rem; }
.privacy-modal__close {
  width: 38px; height: 38px; flex: none; border: 0; border-radius: 50%;
  background: var(--navy-050); color: var(--navy-900); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.privacy-modal__close:hover { background: var(--navy-100); }
.privacy-modal__body { max-width: none; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.3rem; font-size: .92rem; }
.privacy-modal__body h1, .privacy-modal__body h2 { font-size: 1.1rem; margin-top: 1.2em; }
.privacy-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.3rem; border-top: 1px solid var(--line); font-size: .9rem;
}
.privacy-modal__foot a { color: var(--navy-700); }
/* ================= DOVE SIAMO (hub) ================= */
.zone-cards { margin-top: 2.6rem; }
.zone-cards h2 { margin: 0 0 1rem; }
.zone-cards__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.zone-card {
  display: flex; flex-direction: column; gap: .25rem; height: 100%;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); text-decoration: none;
  transition: border-color var(--dur) var(--easing), box-shadow var(--dur) var(--easing);
}
.zone-card:hover { border-color: var(--navy-600); box-shadow: var(--shadow-sm); }
.zone-card__title { font-weight: 600; color: var(--navy-900); }
.zone-card__towns { font-size: .88rem; color: var(--ink-soft); }
.zones-pointer { margin: 0; text-align: center; color: var(--ink-soft); }
.zones-pointer a { color: var(--navy-700); font-weight: 600; margin-left: .3rem; }

/* ================= BLOG ARTICLE EXTRAS ================= */
.prose h2[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.prose .toc {
  margin: 1.8em 0; padding: 1.1rem 1.4rem; border-radius: var(--r-md);
  background: var(--bone-2); border: 1px solid var(--line);
}
.prose .toc__title { margin: 0 0 .5rem; font-weight: 600; color: var(--navy-900); }
.prose .toc ol { margin: 0; }
.prose .toc a { text-decoration: none; }
.prose .toc a:hover { text-decoration: underline; }
.prose blockquote p { margin: 0 0 .4em; }
.prose blockquote .quote-source {
  font-family: var(--sans); font-style: normal; font-size: .88rem; color: var(--ink-soft);
}
.prose blockquote .quote-source::before { content: '— '; }
/* Blog sidebar lists (related treatments, latest articles): a sand dot per
   item, so each entry reads as its own line. The treatment sidebar keeps its
   plain list, where the current page is highlighted instead. */
.is-post .aside__list a { position: relative; padding-left: 1.45rem; }
.is-post .aside__list a::before {
  content: ''; position: absolute; left: .6rem; top: 1.02em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sand-500);
}
/* An icon inside a button ("Indicazioni stradali" on /dove-siamo/). */
.btn > svg { width: 1.1em; height: 1.1em; flex: none; }

/* "Si riceve per appuntamento." — the note that goes with every timetable. */
.hours-note { margin: .7rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.hours-list + .hours-note { padding-top: .6rem; border-top: 1px solid var(--line); }
.footer__hours-note { margin-top: .4rem; color: #9FB2D4; font-size: .85rem; }