/**
 * WebCilento — GeoDirectory single-listing redesign.
 * Restyles GeoDirectory's native single-listing output (hero, action bar,
 * sticky sidebar, "nearby" card grids) shared across every migrated post
 * type — see WEBCILENTO_GD_DETAIL_TYPES in functions.php. Scoped to the
 * shared ".wc-gd-detail" body class instead of repeating rules per type.
 * Loaded only on those singular pages — see webcilento_gd_detail_assets().
 *
 * Also applied to ".geodir-archive" (GD's own class on every post-type
 * archive) — found the hard way: the hub filter pills used var(--wc-navy)
 * etc. with no fallback, and on the archive page (body class
 * "geodir-archive", not "wc-gd-detail") those custom properties simply
 * didn't exist, so background/border silently resolved to their initial
 * values (transparent/none) while literal colors on the same rule (e.g.
 * color:#fff) still applied — that's why "Tutte" rendered as invisible
 * white-on-transparent instead of a navy pill.
 */

.wc-gd-detail, .geodir-archive {
	--wc-navy: #1A237E;
	--wc-text: #424242;
	--wc-navy-soft: #4a5299;
	--wc-cyan: #00BCD4;
	--wc-cyan-deep: #0092a8;
	--wc-yellow: #FFC107;
	--wc-yellow-ink: #1A237E;
	--wc-green: #4CAF50;
	--wc-live: #D9432E;
	--wc-line: #e2e5ea;
	--wc-surface-2: #eef1f5;
	--wc-radius: 12px;
	--wc-shadow: 0 1px 2px rgba(26,35,126,.06), 0 10px 28px -14px rgba(26,35,126,.22);
}

/* Astra's default title+featured-image banner (header.entry-header) is fully
   suppressed at the source now (see astra_single_layout_one_banner_visibility
   filter in inc/theme-setup.php, 2026-09-09) — it doesn't render at all on
   these pages any more, so nothing to hide here. Previously this rule just
   CSS-hid the block, leaving a duplicate hidden <h1> in the DOM. */

/* Astra's chronological prev/next-post navigation (astra_single_post_navigation_markup(),
   fired on every is_single() regardless of post type) showed up on gd_event
   pages ("Evento successivo" linking to whichever event happens to be
   next by post date - meaningless order for events, confirmed absent on
   Paesi/Alloggi so this is specifically an event-page symptom, reported by
   the user). Not relevant browsing UX for any of our GD types. */
.wc-gd-detail nav.post-navigation {
	display: none;
}

/* Astra's #primary{width:70%} (its default content/sidebar split) assumes
   a #secondary sibling always fills the remaining 30%. The astra_page_layout
   filter (functions.php) correctly stops #secondary from rendering at all,
   but Astra's CSS doesn't know that — #primary stays pinned at 70% inside
   the flex .ast-container with nothing to fill the rest, leaving ~30% of
   the page as blank flex space on the right. We already build our own
   main+sidebar split inside #primary via .wc-paese-layout, so #primary
   itself just needs to claim the full container width. */
.wc-gd-detail #primary { width: 100% !important; }

/* Same fix, for GD archive pages (e.g. Paesi) now that astra_page_layout
   forces 'no-sidebar' there too (functions.php) — #primary was still pinned
   at 70% with nothing to fill the other 30%. Scoped to .geodir-archive
   (GD's own class, present on every GD post-type archive) rather than a
   specific post type, so it covers Dormire/Mangiare/etc. automatically
   once those archives get the same no-sidebar treatment. */
.geodir-archive #primary { width: 100% !important; }
/* Astra's own default spacing (article.ast-full-width margin-bottom:24px +
   #primary margin-bottom:64px = 88px, confirmed live) is meant to cushion
   whatever comes after a normal page's content before the footer starts -
   but our archives end with a full-bleed map with nothing after it, so it
   just reads as a dead gap of white space (flagged by the user on a
   screenshot). Zeroed for archives only, so normal Astra pages elsewhere
   keep their usual spacing. */
.geodir-archive #primary,
.geodir-archive article.ast-full-width {
	margin-bottom: 0 !important;
}

/* Astra's Blog Pro renders the page_archive content wrapped in its blog/
   archive loop markup (`.ast-row > article.ast-full-width`), even though
   there's only ever one "post" here (our custom page). `.ast-row` always
   carries a -20px margin, Astra's standard row/column convention that's
   normally cancelled out by a matching 20px padding on a grid-column class
   — but `article.ast-full-width` only sets width:100%, no compensating
   padding, so the row's negative margin pushes the whole page content
   (heading, intro, filter pills, card grid) flush against the screen edges
   instead of sitting inside #primary's normal inset. Confirmed live: with
   this reset, .entry-content lines up exactly with #primary (both 20px
   inset), matching every singular GD page. Resetting the margin instead of
   adding compensating padding keeps it correct at every breakpoint
   automatically, since it just cancels the local offset rather than
   guessing Astra's current gutter width. (The JS masonry positioning
   itself — position:absolute, inline height — is separately disabled by
   stripping the 'blog-masonry' body class in functions.php; this rule
   handles what's left of the wrapper markup once that's gone.) */
.geodir-archive .ast-row { margin-left: 0; margin-right: 0; }

/* Full-width map band at the bottom of the Paesi archive — negative-margin
   breakout so it spans the viewport instead of staying inside #primary's
   own padding, matching the pattern already live on the production site
   (full-bleed map further down the archive page) rather than a mid-page
   cramped block.
   `vw` always measures the viewport INCLUDING the vertical scrollbar (a CSS
   spec detail, confirmed live: window.innerWidth 1280 vs the true visible
   documentElement.clientWidth 1265 — a 15px gap) — true regardless of which
   variant of the vw-based breakout trick is used, so a plain calc(50% -
   50vw) still undershoots by half the scrollbar width on each side. No
   pure-CSS unit maps to clientWidth, so --wc-scrollbar-w is measured once
   via a tiny inline script (webcilento_gd_detail_assets(), functions.php)
   and folded into the calc here. */
.wc-archive-fullmap {
	margin-left: calc(50% - 50vw + (var(--wc-scrollbar-w, 0px) / 2));
	margin-right: calc(50% - 50vw + (var(--wc-scrollbar-w, 0px) / 2));
	background: var(--wc-surface-2, #EEF1F5);
	margin-top: 2rem;
}
.wc-archive-fullmap h2 { max-width: 1400px; margin: 0 auto 1rem; }

/* Macro-Hub filter pills — custom markup, replacing [gd_categories]'s own
   broken card template (see webcilento_paesi_hub_filter_shortcode()). */
.wc-hub-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.wc-hub-pill {
	display: inline-flex; align-items: center; gap: .45em;
	padding: .5em 1.1em; border-radius: 100px;
	background: #fff; border: 1.5px solid var(--wc-line);
	color: var(--wc-navy); font-weight: 700; font-size: .85rem;
	text-decoration: none; white-space: nowrap;
}
/* --wc-ambito-accent (iniettata da inc/helpers.php, per tutti e 6 gli
   ambiti con colore stabile — vedi Atlante dei Colori §08): fallback
   identico al valore precedente su ogni pagina che non la imposta,
   nessuna regressione. Testo della pillola attiva su --wc-ambito-accent-text
   (stessa iniezione), calcolato per contrasto reale (webcilento_readable_
   text_on(), inc/helpers.php) invece che bianco fisso: su Eventi/Relax,
   chiari, bianco era illeggibile (contrasto 1.4 e 3.1) — segnalato
   dall'utente dal vivo, non solo a schermo. Il testo su :hover invece
   resta sempre navy fisso: qui l'accento colora solo il bordo, mai lo
   sfondo, quindi il rischio di scarso contrasto testo/sfondo non esiste. */
.wc-hub-pill:hover { border-color: var(--wc-ambito-accent, var(--wc-cyan-deep)); color: var(--wc-navy); }
.wc-hub-pill.is-active { background: var(--wc-ambito-accent, var(--wc-navy)); border-color: var(--wc-ambito-accent, var(--wc-navy)); color: var(--wc-ambito-accent-text, #fff); }
.wc-hub-pill-count { background: rgba(26,35,126,.08); border-radius: 100px; padding: .1em .6em; font-size: .82em; }
.wc-hub-pill.is-active .wc-hub-pill-count { background: rgba(255,255,255,.22); }
.wc-hub-pill-icon { font-size: 1.05em; line-height: 1; }

/* "In corso" pill (Eventi "Quando" filter, geodirectory/bootstrap/loop/
   filter.php override) - live semantic color, not the brand navy, same
   principle as the card's own "in corso" badge (event-card-mockup.html):
   state color stays separate from the accent. */
.wc-hub-pill.is-live-option { border-color: rgba(217,67,46,.35); color: var(--wc-live); }
.wc-hub-pill.is-live-option:hover { border-color: var(--wc-live); }
.wc-hub-pill.is-live-option.is-active { background: var(--wc-live); border-color: var(--wc-live); color: #fff; }
.wc-hub-pill-dot {
	width: .5em; height: .5em; border-radius: 50%; background: var(--wc-live); flex: none;
}
.wc-hub-pill.is-active .wc-hub-pill-dot { background: #fff; }

.wc-archive-fullmap .geodir_map_container { max-width: 1400px; margin: 0 auto; }

/* "Consulta gli eventi passati" - sits right after the map with normal
   spacing (not floating in the dead gap the margin-bottom fix above just
   removed). Deliberately a plain link, not a pill/button - this is a
   secondary "browse the archive" path, not a primary filter action. */
.wc-archive-past-link {
	display: block; text-align: center; margin: 1.5rem auto 0; padding-bottom: 1.5rem;
	color: var(--wc-navy-soft); font-weight: 700; font-size: .9rem; text-decoration: none;
}
.wc-archive-past-link:hover { color: var(--wc-cyan-deep); }

/* Location line on Dormire/Mangiare/Divertimento/Cosa Vedere cards
   (wc_card_location shortcode, functions.php) — quiet metadata under the
   title, not a link (unlike Paesi's hero geo-line, there's nowhere useful
   to send a click from a category-archive card). */
.wc-card-location { display: block; margin-top: .2rem; font-size: .8rem; color: var(--wc-navy-soft, #4A5299); }

/* "Tutte le localita" grid — real CSS Grid (not Bootstrap's row-cols
   flex-wrap) specifically so a full-width divider forces a clean line
   break: grid auto-placement always starts the next item on a new row
   after a `grid-column: 1 / -1` item, so short letter groups never leave
   cards misaligned with the ones before/after them. 4 columns, matching
   "Localita in primo piano" above for visual consistency. */
.wc-alpha-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
	margin: 0 0 2rem;
}
.wc-alpha-divider {
	grid-column: 1 / -1;
	display: flex; align-items: center; gap: .75rem;
	font-weight: 800; font-size: 1.1rem; color: var(--wc-navy);
	margin-top: .5rem;
}
.wc-alpha-divider:first-child { margin-top: 0; }
.wc-alpha-divider::after { content: ''; flex: 1; height: 1px; background: var(--wc-line); }
.wc-alpha-card {
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	border-radius: var(--wc-radius); overflow: hidden; background: #fff;
	border: 1px solid var(--wc-line); box-shadow: var(--wc-shadow);
}
.wc-alpha-card-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wc-surface-2, #EEF1F5); }
/* !important: a theme/GD rule targeting content images sets height:auto at
   the same selector specificity (0,1,1) as ours — on a tie the later-loaded
   rule wins, which isn't reliably us. Without this, portrait source photos
   (e.g. a 320x480 upload) render at their own intrinsic ratio instead of
   filling the 4:3 box, growing the whole card past its row's height. */
.wc-alpha-card-img img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.wc-alpha-card-badge {
	position: absolute; left: .6rem; bottom: .6rem;
	background: rgba(0,0,0,.55); color: #fff; font-size: .72rem; font-weight: 700;
	padding: .3em .7em; border-radius: 100px;
}
.wc-alpha-card-body { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .3rem; }
.wc-alpha-card-title { font-weight: 700; color: var(--wc-navy); font-size: .95rem; }
.wc-alpha-card-tag { font-size: .78rem; color: var(--wc-navy-soft); }
@media (max-width: 900px) { .wc-alpha-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wc-alpha-grid { grid-template-columns: 1fr; } }

/* Shared pagination style — generic on purpose (".wc-pagination" wraps
   WordPress's own paginate_links() output, not tied to Paesi or to this
   one grid) so every future archive page reuses the same look instead of
   inheriting the theme's unstyled default <ul> bullets. */
.wc-pagination { margin: 1rem 0 0; }
.wc-pagination ul.page-numbers {
	display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
	margin: 0; padding: 0; list-style: none;
}
.wc-pagination a.page-numbers, .wc-pagination span.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4em; height: 2.4em; padding: 0 .7em; box-sizing: border-box;
	border-radius: 100px; border: 1.5px solid var(--wc-line);
	background: #fff; color: var(--wc-navy); font-weight: 700; font-size: .9rem;
	text-decoration: none;
}
.wc-pagination a.page-numbers:hover { border-color: var(--wc-cyan-deep); color: var(--wc-cyan-deep); }
.wc-pagination span.page-numbers.current { background: var(--wc-navy); border-color: var(--wc-navy); color: #fff; }
.wc-pagination span.page-numbers.dots { border-color: transparent; background: none; color: var(--wc-navy-soft); min-width: auto; padding: 0 .2em; }
.wc-pagination a.page-numbers.prev, .wc-pagination a.page-numbers.next { padding: 0 1.1em; }

/* Native GD pagination widget ([gd_loop_paging], used by Dormire/Mangiare/
   Divertimenti/Cosa vedere — Paesi uses its own paginate_links() above
   instead) renders Bootstrap/AUI markup (.pagination > .page-item >
   .page-link, current page is a <span class="page-link current active">,
   not a normal WP page-numbers list) - completely different classes from
   .wc-pagination above, so it needs its own copy of the same visual rules
   rather than being reachable by the selectors above. Scoped to
   .geodir-archive so it never touches pagination anywhere else GD might
   use this same widget in the future. */
.geodir-archive .geodir-loop-paging-container .pagination {
	display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center;
	margin: 1rem 0 0; padding: 0; list-style: none;
}
.geodir-archive .geodir-loop-paging-container .page-link {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4em; height: 2.4em; padding: 0 .7em; box-sizing: border-box;
	/* !important: Bootstrap's own .page-item:first-child/:last-child .page-link
	   rules (loaded via AUI) set asymmetric corner radii and win the
	   specificity tie otherwise - confirmed live via computed style. */
	border-radius: 100px !important; border: 1.5px solid var(--wc-line);
	background: #fff; color: var(--wc-navy); font-weight: 700; font-size: .9rem;
	text-decoration: none;
}
.geodir-archive .geodir-loop-paging-container .page-link:hover { border-color: var(--wc-cyan-deep); color: var(--wc-cyan-deep); }
.geodir-archive .geodir-loop-paging-container .page-link.current,
.geodir-archive .geodir-loop-paging-container .page-link.active { background: var(--wc-navy); border-color: var(--wc-navy); color: #fff; }
.geodir-archive .geodir-loop-paging-container .page-link.next,
.geodir-archive .geodir-loop-paging-container .page-link.prev { padding: 0 1.1em; }

/* Card title font uniformity across archives. GD's native post-title
   widget ([gd_loop]/[gd_listings], used by Dormire/Mangiare/Divertimenti/
   Cosa vedere's main grid AND by Paesi's own "Localita in primo piano"
   section - both go through the same widget) ships completely unstyled:
   grey #424242, weight 500. Paesi's custom alpha-grid cards next to it use
   bold navy - side by side on the same page the mismatch was obvious.
   One rule fixes all 5 occurrences (4 archives + Paesi's featured section)
   since they all render through .geodir-entry-title. */
.geodir-archive .geodir-entry-title,
.geodir-archive .geodir-entry-title a {
	color: var(--wc-navy) !important;
	font-weight: 700 !important;
}
/* Title truncation eased from 1 line to 2 (GD's own `.text-truncate.ellipsis`
   classes give white-space:nowrap - a title is the single most important
   thing on a card, and single-line ellipsis was cutting most event titles
   after 3-4 words ("16° Anniversario Angelo Vas..."). Applied across every
   archive uniformly (not just Eventi) rather than a per-type exception -
   Paesi/Dormire/etc. titles are usually short enough to render on one line
   anyway, so this only ever gives them more room, never less. */
.geodir-archive .geodir-entry-title.text-truncate.ellipsis {
	white-space: normal !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* GD's own map category-filter checklist tries to print a small <img> icon
   per category (class-geodir-maps.php, get_categories_filter()) but the
   variable holding the icon URL is never actually assigned in that
   function — every row renders `src=""`. The browser falls back to showing
   the image's alt text right before the real label, reading as a duplicated
   name. Confirmed as a bug in GD's own core file, not our config — hiding
   the broken image via CSS instead of patching a core plugin file, which
   would be overwritten on the next GD update. */
.geodir-map-terms img { display: none; }

/* ---------- hero ---------- */
.wc-paese-hero { margin: 0 0 1rem; }
.wc-paese-hero-frame {
	position: relative;
	border-radius: var(--wc-radius);
	overflow: hidden;
	aspect-ratio: 16/7;
	background: var(--wc-surface-2);
	box-shadow: var(--wc-shadow);
}
/* Itinerari mobile (2026-09-12, round 19): segnalato da screenshot reale —
   le pill del toprow risultavano "addossate" al bordo superiore della
   foto. Causa reale: .wc-paese-hero-content è ancorato al bottom
   (position:absolute; bottom:0) con altezza auto — su schermi stretti il
   contenuto itinerari (2 pill + titolo su 2 righe + geoline) supera i
   ~162px che l'aspect-ratio 16/7 dà a quella larghezza, quindi il bordo
   superiore del blocco (col suo padding-top) finisce sopra il frame e
   viene tagliato dall'overflow:hidden — il padding-top esiste, solo non è
   più visibile. Fix scoped alla sola card itinerari (nuova classe
   .wc-paese-hero-frame-itin, non toccato il frame condiviso dalle altre
   CPT): più altezza solo sotto i ~600px dove il problema si manifesta. */
@media (max-width:600px){
	.wc-paese-hero-frame-itin{ aspect-ratio:3/2; }
}
.wc-paese-hero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.wc-paese-hero-scrim {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(9,20,20,.78) 0%, rgba(9,20,20,.28) 45%, rgba(9,20,20,0) 70%);
}
.wc-paese-hero-content { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem,3vw,1.75rem); color: #fff; }
.wc-paese-hero-eyebrow {
	display: inline-flex; align-items: center; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
	font-weight: 700; background: var(--wc-yellow); color: var(--wc-yellow-ink); padding: .3em .8em; border-radius: 100px; margin-bottom: .7rem;
	text-decoration: none; transition: filter .15s ease; white-space: nowrap;
}
a.wc-paese-hero-eyebrow:hover { filter: brightness(1.08); color: inherit; }
.wc-paese-hero-content h1 {
	color: #fff; font-size: clamp(1.7rem,3.6vw,2.5rem); line-height: 1.05; font-weight: 700; margin: 0;
}
/* Photo-less hero (currently: every event, plus the rare paese that somehow
   still has no image after the default-image fallback chain). Styled as a
   solid-panel "hero minus photo" — same dark/white treatment as the real
   photo hero's scrim+text, so it reads as a variant of the same component
   instead of a visually lighter, different-feeling page top. */
.wc-paese-title-fallback-wrap {
	margin: 0 0 1rem; padding: clamp(1.25rem,4vw,2rem); border-radius: var(--wc-radius);
	background: linear-gradient(135deg, var(--wc-navy) 0%, var(--wc-navy-soft) 100%);
	box-shadow: var(--wc-shadow);
}
.wc-paese-title-fallback-wrap .wc-paese-hero-eyebrow { margin-bottom: .6rem; }
.wc-paese-title-fallback { color: #fff; font-size: clamp(1.7rem,3.6vw,2.5rem); line-height: 1.05; font-weight: 700; margin: 0; }

.wc-paese-frazione-badge {
	display: inline-flex; align-items: center; gap: .35em; margin-top: .55rem;
	font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.88); text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.45);
}
.wc-paese-frazione-badge::after { content: "»"; }
.wc-paese-frazione-badge:hover { color: #fff; border-color: #fff; }

/* Alloggi/Mangiare e bere hero — "Opzione B" (2026-09-01), replacing the
   first pill-row attempt after direct user feedback ("informazioni
   disomogenee che sembrano piazzate lì a caso"): four different facts get
   four different visual treatments (position, weight, shape) instead of
   one repeated pill style, so priority reads at a glance without relying
   on color alone. */

/* Top row: categoria (plain overline, not a pill) left, Partner
   Verificato (the one real pill/badge) right — it stands out because
   it's the only pill on the row, not because it's physically isolated.
   Testo aggiornato l'8/9/2026 da "In evidenza" (nome del mockup
   originale) a "Partner Verificato" (nome deciso in un giro successivo,
   mai riallineato al badge stesso). */
.wc-hero-toprow { display: flex; align-items: center; justify-content: space-between; gap: .75em; margin-bottom: .65rem; flex-wrap: wrap; }
/* Itinerari (2026-09-12, round 11): space-between above is deliberate for
   the commercial CPTs (categoria pinned left, Partner Verificato pinned
   right — the whole point is the two ends of the row) but reads as
   "giustificato" with itinerari's own 2 pills (categoria + tipo di
   percorso, no badge to pin opposite) — reported by the user comparing a
   real screenshot. Sequential from the left instead, own modifier so the
   base rule stays untouched for the CPTs it was built for. */
.wc-hero-toprow-itin { justify-content: flex-start; }
/* Livello 3 di §08 (13/9): l'overline sta sopra la foto hero (velo scuro),
   il bianco translucido di prima leggeva su qualunque immagine — un
   accento ambito usato come colore del TESTO li' avrebbe rischiato
   l'opposto del problema gia' risolto sui badge (scuro su scuro: Dormire/
   Mangiare/Relax/Itinerari sono tutti hex piuttosto scuri). Diventa quindi
   una pillola piena (stesso pattern gia' in uso per i badge di categoria,
   sfondo+testo a contrasto calcolato) invece di ricolorare il solo testo.
   --wc-ambito-accent/-text iniettate per pagina, stesso meccanismo del
   Livello 1 - ora esteso anche alle schede singole. */
.wc-hero-overline {
	font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
	color: var(--wc-ambito-accent-text, rgba(255,255,255,.72));
	background: var(--wc-ambito-accent, transparent);
	text-decoration: none; padding: .3em .8em; border-radius: 100px;
}
a.wc-hero-overline:hover { color: var(--wc-ambito-accent-text, #fff); filter: brightness(1.08); }
/* "Partner Verificato" badge — GeoDirectory's own native [gd_post_badge] widget
   output (.gd-badge). Recolored to brand yellow (matches the approved
   mockup — the strongest color in the palette, meant to be the one thing
   that visually "shines") instead of GD's default blue; the inline style
   GD prints for both background AND text color needs !important to lose
   to it. Bigger than a normal pill since this is the one fact meant to
   stand out. Icon and label are separate inline elements in GD's own
   markup with only a plain space between them — margin-right on the icon
   guarantees real spacing regardless of how that space collapses. */
.wc-hero-toprow .gd-badge {
	background-color: var(--wc-yellow) !important; border-color: var(--wc-yellow) !important; color: var(--wc-yellow-ink) !important;
	font-size: .82rem !important; padding: .45em 1.05em !important; margin: 0 !important;
}
.wc-hero-toprow .gd-badge i.fas { margin-right: .45em; }
.wc-hero-toprow .gd-badge span { color: var(--wc-yellow-ink) !important; }

/* Geo line, below the title: comune (primary, bold+underlined link) —
   macro-hub (secondary, muted plain text) · rating (its own score-chip
   shape, neither a pill nor plain text). Extra margin-top vs. the title
   fixes the "addossata" (cramped) spacing flagged after the first pass. */
.wc-hero-geoline { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3em .5em; margin-top: 1.2rem; }
.wc-geo-place { color: #fff; font-weight: 700; font-size: .88rem; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.wc-geo-place:hover { border-color: #fff; }
.wc-locality-plain { cursor: default; }
.wc-geo-hub { color: rgba(255,255,255,.72); font-size: .78rem; text-decoration: none; }
a.wc-geo-hub:hover { color: #fff; }
/* Plain text ("★ 5.0 (1)"), not GD's [gd_post_rating] widget — that widget
   proved non-deterministic on real posts (populated when checked live,
   empty on a plain page load minutes later), so this reads overall_rating/
   rating_count directly instead. Simple text needs no internal-markup
   overrides, just the chip shell. */
.wc-geo-rating {
	display: inline-flex; align-items: center; line-height: 1; color: #fff;
	background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 6px;
	padding: .3em .6em; margin-left: .2em; text-decoration: none;
}
.wc-geo-rating:hover { background: rgba(255,255,255,.22); }

/* Review summary block ("Eccellente / 5 / ★★★★★ / N review"): GeoDirectory
   lays this out as a 2-column Bootstrap row assuming a second column with
   a per-category rating breakdown — we only have the single "Overall"
   rating configured (no extra rating categories), so that second column
   never renders and the row is left with the summary card stranded alone,
   looking broken rather than intentional (confirmed live, tried centering
   it first — still reads as "half a layout" with a huge empty gap). We
   already surface the same rating+count, better, in the hero (linked to
   #comments) — so instead of fighting GD's fixed grid for a redundant
   second copy of the same info, just hide this block. */
.wc-gd-detail .commentlist-wrap > .row.gy-4.mb-5 { display: none; }

/* ---------- action bar ---------- */
.wc-paese-actionbar { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.wc-action-btn {
	display: inline-flex; align-items: center; gap: .5em;
	font-weight: 700; font-size: .86rem;
	padding: .6em 1.05em; border-radius: 100px; border: 1.5px solid var(--wc-line);
	background: #fff; color: var(--wc-navy); text-decoration: none; cursor: pointer;
}
.wc-action-btn svg { width: 1.05em; height: 1.05em; flex: none; }
.wc-action-btn:hover { border-color: var(--wc-cyan); color: var(--wc-cyan-deep); }
.wc-action-primary { background: var(--wc-yellow); border-color: var(--wc-yellow); color: var(--wc-yellow-ink); }
.wc-action-primary:hover { filter: brightness(1.04); color: var(--wc-yellow-ink); }
.wc-action-whatsapp { background: #25D366; border-color: #25D366; color: #06210f; }
.wc-action-whatsapp:hover { color: #06210f; filter: brightness(1.05); }

/* ---------- info card ---------- */
.wc-info-link {
	display: inline-flex; align-items: center; gap: .4em; font-size: .78rem; font-weight: 700;
	padding: .4em .75em; border-radius: 100px; border: 1.5px solid var(--wc-line); text-decoration: none; color: var(--wc-navy);
}
.wc-info-link svg { width: 1em; height: 1em; }
.wc-info-link:hover { border-color: var(--wc-cyan-deep); color: var(--wc-cyan-deep); }

/* ---------- two-column layout: main content + sticky sidebar ---------- */
.wc-paese-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 2rem;
	align-items: start;
}
@media (max-width: 900px) {
	.wc-paese-layout { grid-template-columns: 1fr; }
}
.wc-paese-main { min-width: 0; }

.wc-paese-sidebar {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.wc-side-card {
	background: #fff; border: 1px solid var(--wc-line); border-radius: var(--wc-radius);
	box-shadow: var(--wc-shadow); overflow: hidden;
}
.wc-side-card-head {
	font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--wc-navy-soft); padding: .85rem 1.1rem .5rem;
}
/* Livello 3 di §08 (13/9): intestazioni delle card cross-sell nell'accordion
   "Continua a esplorare la zona" (webcilento_event_crosssell_card()) - un
   bordo sinistro nel colore dell'ambito a cui la card RIMANDA, non quello
   della pagina corrente (piu' card sulla stessa pagina, ciascuna verso un
   ambito diverso, non basta una variabile sola per pagina come nel
   Livello 1). Solo il bordo, testo fisso navy-soft come sopra - stessa
   scelta "solo bordo, mai riempimento" gia' usata per l'hover delle
   pillole filtro, nessun rischio di contrasto. */
.wc-side-card-head.wc-side-card-head-accent {
	border-left: 4px solid var(--wc-card-accent, var(--wc-navy-soft));
	padding-left: calc(1.1rem - 4px);
}
.wc-side-card-pad { padding: .9rem 1.1rem 1.1rem; }

/* Cross-sell accordion (2026-09-01) — same native <details>, closed by
   default, zero-JS pattern already used for the footer Comuni Matrix.
   Measured live: on listings with little of their own content (most Free
   ones), 3 always-open cross-sell cards alone outweighed the actual
   contact/map cards by 1.5-2x, burying the primary conversion tools. */
.wc-sidebar-accordion {
	background: #fff; border: 1px solid var(--wc-line); border-radius: var(--wc-radius); box-shadow: var(--wc-shadow); overflow: hidden;
}
.wc-sidebar-accordion summary {
	cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .5em;
	font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--wc-navy-soft);
	padding: .85rem 1.1rem;
}
.wc-sidebar-accordion summary::-webkit-details-marker { display: none; }
.wc-sidebar-accordion summary::after { content: "\25BC"; font-size: .7em; color: var(--wc-navy-soft); transition: transform .15s ease; flex: none; }
.wc-sidebar-accordion[open] summary::after { transform: rotate(180deg); }
.wc-sidebar-accordion[open] summary { border-bottom: 1px solid var(--wc-line); }
/* Cross-sell cards nested inside the accordion lose their own card chrome
   (border/shadow/radius) — they'd otherwise be cards-within-a-card. The
   same webcilento_event_crosssell_card() markup is also used standalone
   on the event sidebar (not inside an accordion there), so this override
   is scoped to the accordion body only. */
.wc-sidebar-accordion-body .wc-crosssell-card { border: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--wc-line); }
.wc-sidebar-accordion-body .wc-crosssell-card:last-child { border-bottom: none; }
.wc-frazioni-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.wc-btn-block {
	display: flex; align-items: center; justify-content: center; gap: .5em;
	font-weight: 700; font-size: .88rem; padding: .68em 1.1em; border-radius: 7px;
	background: var(--wc-yellow); color: var(--wc-yellow-ink); text-decoration: none;
}
.wc-btn-block:hover { filter: brightness(1.04); color: var(--wc-yellow-ink); }
.wc-btn-block svg { width: 1.1em; height: 1.1em; flex: none; }
.wc-report-link {
	/* [gd_report_post]'s "link" output type still renders with GD's own
	   .gd-badge/.btn/.btn-link classes (padding, border-radius, underline,
	   line-height, an inline background/border/color) regardless of the
	   output type chosen. !important throughout is the correct, update-safe
	   way to override a plugin's own inline style + Bootstrap classes from
	   our stylesheet, not a workaround to avoid — matches the sibling
	   "Segnala il tuo evento" link exactly instead of approximating it. */
	display: flex !important; align-items: center !important; gap: .5em !important;
	font-size: .82rem !important; font-weight: 400 !important; line-height: inherit !important;
	color: var(--wc-navy-soft) !important;
	text-decoration: none !important; padding: 0 .2rem !important; margin: 0 !important;
	background-color: transparent !important; border: 0 !important; border-radius: 0 !important;
	box-shadow: none !important;
}
.wc-report-link svg, .wc-report-link i { width: 1em; height: 1em; flex: none; font-size: 1em; }
.wc-report-link:hover { color: var(--wc-cyan-deep) !important; text-decoration: none !important; }

/* Sidebar info rows — one shared stacked pattern (label+icon on its own
   line, value below) used by every detail template's info card. Used to be
   an inline label-left/value-right row here, but that broke down for long
   values (a venue name spanning two locations, a date range) — unified on
   the stacked layout everywhere rather than keeping two components that
   looked like they belonged to different sites. */
.wc-paese-info-row { padding: .8rem 1.1rem; border-bottom: 1px solid var(--wc-line); }
.wc-paese-info-row:last-child { border-bottom: none; }
.wc-paese-info-label {
	display: flex; align-items: center; gap: .5em; font-size: .78rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .03em; color: var(--wc-navy-soft); margin-bottom: .3rem;
}
.wc-paese-info-label svg { width: 1.05rem; height: 1.05rem; flex: none; }
.wc-paese-info-row b { display: block; color: var(--wc-navy); font-weight: 600; line-height: 1.4; }
.wc-paese-info-row b a { color: var(--wc-cyan-deep); }
.wc-side-card .wc-paese-info-links { display: flex; gap: .5rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-top: 1px solid var(--wc-line); }

/* map shortcode output inside the sidebar card */
.wc-side-card .geodir-map-wrapper,
.wc-side-card .gd-map-canvas { border-radius: 0; }
.wc-side-card .geodir-wgt-map,
.wc-side-card .geodir-map-wrap,
.wc-side-card .geodir_map_container,
.wc-side-card .main_map_wrapper { margin: 0 !important; padding: 0 !important; }
.wc-side-card .geodir-wgt-map p:empty { display: none; }

/* ---------- native GD tabs restyle ---------- */
.wc-gd-detail .geodir-tabs-content { color: var(--wc-text); }
/* Section headings (Profilo / Foto / Recensioni...) removed on request —
   content just flows, no redundant labels above each block. */
.wc-gd-detail .gd-tab-list-title { display: none; }

/* Links inside GeoDirectory description text were showing a stray blue
   (.bsui a from AyeCode UI's Bootstrap default) instead of the site's own
   accent — unify to the same cyan already used site-wide (--wc-cyan-deep),
   explicit :visited too so it doesn't fall back to the browser's default
   purple. The breadcrumb link color used to be fixed here too
   (.trail-item a) but that's now handled by ONE sitewide rule in
   style.css (nav.breadcrumb-trail) so every page type — GD, blog, plain
   pages like Contattaci — gets the same color/size/hover instead of 3
   different rules fighting per page type (2026-09-10). */
.wc-gd-detail .bsui a { color: var(--wc-cyan-deep); }
.wc-gd-detail .bsui a:visited { color: var(--wc-cyan-deep); }

/* Same root cause as the .bsui a fix above, never caught for headings until
   now (2026-09-12, segnalato dall'utente su Sapri): AyeCode UI's Bootstrap
   reset (.bsui h1...h6, in the GeoDirectory plugin's own
   ayecode-ui-compatibility.css) sets font-family/color to `inherit` and
   font-weight to 500 — same specificity as Astra's own h1-h6 tag-selector
   rule, so on a load-order tie it can win and demote any heading typed
   directly into a GD text field (post_content, "Profilo" tab, etc. — any
   CPT, not just Paesi) to the plain body font instead of Astra's Rubik.
   Invisible until a real post actually had an H2 in its description, which
   is why it went unnoticed. Scoped to .geodir-field-post_content (GD's own
   wrapper class for that one field) rather than every .bsui heading
   sitewide, mirroring the .bsui a fix's own reasoning: fix the specific
   place text is user-authored, don't risk widgets that intentionally rely
   on Bootstrap's own heading treatment. */
.wc-gd-detail .geodir-field-post_content h1,
.wc-gd-detail .geodir-field-post_content h2,
.wc-gd-detail .geodir-field-post_content h3,
.wc-gd-detail .geodir-field-post_content h4,
.wc-gd-detail .geodir-field-post_content h5,
.wc-gd-detail .geodir-field-post_content h6,
.wc-gd-detail .wc-itin-description h1,
.wc-gd-detail .wc-itin-description h2,
.wc-gd-detail .wc-itin-description h3,
.wc-gd-detail .wc-itin-description h4,
.wc-gd-detail .wc-itin-description h5,
.wc-gd-detail .wc-itin-description h6 {
	font-family: 'Rubik', sans-serif;
	font-weight: 700;
	color: var(--wc-navy);
}
/* Dimensioni esplicite (2026-09-12, segnalato dall'utente su San Giovanni
   a Piro: un H3 scritto a mano nel testo, "Pianoro di Ciolandrea", risultava
   PIÙ GRANDE dell'H2 "Il percorso" che lo contiene). Causa: la regola sopra
   fissa solo font-family/weight/color, mai font-size — gli H1-H6 scritti a
   mano nel campo Descrizione ricadevano quindi sulla dimensione H3 di
   default di Astra, mai pensata per convivere con .wc-itin-section-title
   (22px, fissato apposta nel round 13/14 per il titolo "Il percorso"
   stesso). Scala esplicita più piccola del titolo di sezione, così la
   gerarchia visiva resta sempre: titolo sezione > sottotitoli nel testo. */
.wc-gd-detail .geodir-field-post_content h1,
.wc-gd-detail .wc-itin-description h1 { font-size: 20px; }
.wc-gd-detail .geodir-field-post_content h2,
.wc-gd-detail .wc-itin-description h2 { font-size: 19px; }
.wc-gd-detail .geodir-field-post_content h3,
.wc-gd-detail .wc-itin-description h3 { font-size: 17.5px; }
.wc-gd-detail .geodir-field-post_content h4,
.wc-gd-detail .wc-itin-description h4 { font-size: 16px; }
.wc-gd-detail .geodir-field-post_content h5,
.wc-gd-detail .wc-itin-description h5 { font-size: 15px; }
.wc-gd-detail .geodir-field-post_content h6,
.wc-gd-detail .wc-itin-description h6 { font-size: 14px; }

/* "nei dintorni" listing grids (dove dormire/mangiare/relax/cosa vedere/paesi vicini) —
   GD's own Bootstrap flex grid (.geodir-widget-posts.geodir-gridview) produced
   inconsistent item positions/heights depending on each listing's package tier
   (featured listings render extra markup, throwing off flex-basis math). A
   real CSS Grid sidesteps that entirely: DOM order is always the visual
   order, every cell is the same height, no per-item surprises. */
.wc-gd-detail .geodir-widget-posts.geodir-gridview.row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem;
}
.wc-gd-detail .geodir-widget-posts.geodir-gridview.row > .col {
	flex: 0 0 calc(50% - .5rem) !important;
	max-width: calc(50% - .5rem) !important;
	width: auto !important;
	margin: 0 !important;
}
@media (min-width: 700px) {
	.wc-gd-detail .geodir-widget-posts.geodir-gridview.row > .col {
		flex-basis: calc(25% - .75rem) !important;
		max-width: calc(25% - .75rem) !important;
	}
}
.wc-gd-detail .geodir-widget-posts .card {
	width: 100%;
	border: 1px solid var(--wc-line); border-radius: var(--wc-radius); box-shadow: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.wc-gd-detail .geodir-widget-posts .card:hover { box-shadow: var(--wc-shadow); transform: translateY(-2px); }
.wc-gd-detail .geodir-widget-posts .card .geodir-entry-title a {
	color: var(--wc-navy); font-weight: 700; font-size: .92rem;
}
/* GD's card-body is `flex: 1 1 auto` inside a flex-column .card, so it grows
   to fill the card's full height regardless of content — and the title's
   Bootstrap h5 margin-bottom (16px) is dead space since we hide location/
   description below it. Together that leaves ~16px of empty gap under every
   1-line (always-truncated) title. Confirmed live: pinning card-body to its
   natural size and zeroing the title's margin shrinks every card in a row
   uniformly (188px → 172px), so this isn't row-stretch inequality between
   cards, just unused reserved space present on every card. */
.wc-gd-detail .geodir-widget-posts .card-body { flex: 0 0 auto; }
.wc-gd-detail .geodir-widget-posts .geodir-entry-title { margin-bottom: 0; }
.wc-gd-detail .geodir-widget-posts .badge-secondary,
.wc-gd-detail .geodir-widget-posts .geodir-category-badge { background: var(--wc-cyan) !important; }
/* GD's category ribbon is bottom-left with no width limit — a long category
   name (e.g. "Gelaterie, Bar e Wine bar") runs into our distance badge,
   which used to share the same bottom-right corner. Cap the ribbon's width
   with an ellipsis as a safety net, on top of moving the distance badge to
   the opposite corner below. */
.wc-gd-detail .geodir-widget-posts .gd-badge.ab-bottom-left {
	max-width: calc(100% - 1rem);
	overflow: hidden;
	text-overflow: ellipsis;
}
.wc-gd-detail .geodir-widget-posts a.gd-list-favorite { color: var(--wc-cyan-deep); }

/* Drop rating stars, empty description/location blocks and the favorite
   heart — the mockup card is just image + category badge + name. */
.wc-gd-detail .geodir-widget-posts .card-footer,
.wc-gd-detail .geodir-widget-posts .wp-block-geodirectory-geodir-widget-post-rating,
.wc-gd-detail .geodir-widget-posts .wp-block-geodirectory-geodir-widget-post-content,
.wc-gd-detail .geodir-widget-posts .wp-block-geodirectory-geodir-widget-output-location,
.wc-gd-detail .geodir-widget-posts .wp-block-geodirectory-geodir-widget-post-fav {
	display: none !important;
}
.wc-gd-detail .geodir-widget-posts .card-body { padding: .75rem .85rem !important; }

/* GD's nativo badge "New" (post_date, meno di N giorni) è anch'esso
   ancorato top-right - stesso angolo del nostro .wc-distance-badge qui
   sotto, ci si sovrappone (segnalato dall'utente sulle card "nelle
   vicinanze" di una scheda Paese, es. palinuro/). Non è mai stato uno
   status utile su questo sito (non comunichiamo "novità" sulle schede),
   quindi neutralizzato invece di spostarlo in un terzo angolo. */
.wc-gd-detail .geodir-widget-posts .gd-badge[data-badge="post_date"] {
	display: none !important;
}

/* distance badge — injected by JS after render, matched by data-post-id.
   Anchored top-right (GD's own category ribbon owns bottom-left) so a long
   category name can never run into it, regardless of card width. Grigio
   neutro invece del navy di brand (2026-09-13, segnalato dall'utente): da
   quando il badge categoria porta l'accento ambito (§08 livello 2), un
   navy anche qui si confondeva col blu di Dormire sulla stessa card — la
   distanza e' un'informazione di servizio, non deve competere in risalto
   con l'identita' dell'ambito. */
.wc-distance-badge {
	position: absolute; right: .5rem; top: .5rem; z-index: 2;
	background: rgba(66,66,66,.82); color: #fff; font-size: .7rem; font-weight: 700;
	padding: .3em .65em; border-radius: 100px; font-variant-numeric: tabular-nums;
}

/* weather iframe (sidebar card) */
/* "real1" (situazione in tempo reale) widget — real content measures 131px
   at 340px width, unlike "day1" which needed 392px regardless of the
   requested width and got clipped in our 340px-wide sidebar. A few px of
   buffer for locations whose condition text wraps slightly differently. */
.wc-weather-iframe { width: 100%; height: 136px; border: none; display: block; }

/* GD listing cards inside "nearby" tabs — light touch, keep native structure, tidy spacing */
.wc-gd-detail .geodir-loop-actions .geodir-category-badge,
.wc-gd-detail .badge-secondary { background: var(--wc-cyan); }
.wc-gd-detail a.gd-list-favorite { color: var(--wc-cyan-deep); }

/* ---------- "nei dintorni" chip switcher ---------- */
.wc-nearby { margin-top: 2.5rem; }
.wc-nearby-label {
	font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
	color: var(--wc-navy-soft); display: flex; align-items: center; gap: .6em; margin-bottom: 1rem;
}
.wc-nearby-label::after { content: ""; flex: 1; height: 1px; background: var(--wc-line); }
.wc-nearby-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.wc-chip {
	font-weight: 700; font-size: .84rem; padding: .5em 1em; border-radius: 100px;
	border: 1.5px solid var(--wc-line); background: #fff; color: var(--wc-navy-soft);
	cursor: pointer; white-space: nowrap;
}
.wc-chip[aria-selected="true"] { background: var(--wc-cyan); border-color: var(--wc-cyan); color: #fff; }
.wc-chip:hover:not([aria-selected="true"]) { border-color: var(--wc-cyan-deep); color: var(--wc-cyan-deep); }
.wc-nearby-panel[hidden] { display: none; }

/* Reviews don't make sense for a whole town — Paesi only. This is
   WordPress's native comment form (GD's "disable_reviews" post-type
   setting doesn't remove post-type comment support), so hide the section
   at display level, scoped to gd_paesi specifically. */
.single-gd_paesi #comments.comments-area,
.single-gd_event #comments.comments-area { display: none; }

/* ================= Evento singolo (gd_event) ================= */

/* Date-range badge in the hero — same pill treatment as the frazione
   badge, reused rather than duplicated. */
.wc-event-dates-badge::after { content: none; }

/* Main content — Carmela writes these sections directly as HTML in
   post_content (intro / ospiti / programma), we just style the hooks. */
.single-gd_event .event-intro p { font-size: 1.05rem; line-height: 1.6; color: var(--wc-navy); }
.single-gd_event .section-divider { border: none; border-top: 1px solid var(--wc-line); margin: 2rem 0; }
.single-gd_event .event-guests h2,
.single-gd_event .event-schedule h2 { font-size: 1.3rem; color: var(--wc-navy); margin: 0 0 .6rem; }
.single-gd_event .guest-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .85rem; }
.single-gd_event .guest-list li {
	background: #fff; border: 1px solid var(--wc-line); border-radius: var(--wc-radius);
	padding: .9rem 1.1rem; box-shadow: var(--wc-shadow); line-height: 1.5;
}
.single-gd_event .guest-list li strong { color: var(--wc-navy); }

/* Multi-day programme accordion — native <details>/<summary>, no JS. */
.single-gd_event .day-accordion {
	background: #fff; border: 1px solid var(--wc-line); border-radius: var(--wc-radius);
	margin: 0 0 .75rem; overflow: hidden;
}
.single-gd_event .day-accordion summary {
	cursor: pointer; list-style: none; padding: 1rem 1.2rem; font-size: 1rem;
	color: var(--wc-navy); background: var(--wc-surface-2); display: flex; align-items: center; gap: .5em;
}
.single-gd_event .day-accordion summary::-webkit-details-marker { display: none; }
.single-gd_event .day-accordion summary::before {
	content: "\25B8"; color: var(--wc-cyan-deep); font-size: .85em; transition: transform .15s ease;
}
.single-gd_event .day-accordion[open] summary::before { transform: rotate(90deg); }
.single-gd_event .day-content { padding: 1rem 1.2rem; }
.single-gd_event .time-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.single-gd_event .time-list li { line-height: 1.5; padding-left: 0; }
.single-gd_event .time-list .time {
	display: inline-block; min-width: 6.5em; font-weight: 700; color: var(--wc-cyan-deep); margin-right: .4em;
}

/* Contextual internal link box, auto-appended after the real content. */
.single-gd_event .internal-link-box {
	background: var(--wc-surface-2); border-left: 4px solid var(--wc-yellow); border-radius: 0 var(--wc-radius) var(--wc-radius) 0;
	padding: 1rem 1.3rem; margin: 2rem 0 0; line-height: 1.5;
}
.single-gd_event .internal-link-box a { color: var(--wc-cyan-deep); font-weight: 700; }

/* ============================================================
   Event archive card. Scoped to .post-type-archive-gd_event (WP's own
   body class, no extra hook needed) so nothing here can leak into any
   other archive's cards. Ported from the approved mockup
   (event-card-mockup.html) after several review rounds - see
   webcilento_event_date_badge_shortcode() in functions.php for the PHP
   side of the same grammar: numbers always on navy, month always on
   white, never mixed on one line.
   ============================================================ */

/* GD's own image wrapper needs position:relative for our absolutely
   positioned badge to anchor to it - GD sets this for its own category
   badge already, but not guaranteed for every theme/version, so set it
   defensively rather than assume. */
.post-type-archive-gd_event .wp-block-geodirectory-geodir-widget-post-images {
	position: relative;
}

.post-type-archive-gd_event .date-badge {
	position: absolute; top: .6rem; left: .6rem; z-index: 2;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0,0,0,.18);
	min-width: 3.1rem;
	overflow: hidden;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.post-type-archive-gd_event .date-badge .day {
	display: block;
	background: var(--wc-navy);
	color: #fff;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.25;
	padding: .12em .55em;
	white-space: nowrap;
}
.post-type-archive-gd_event .date-badge .month {
	display: block;
	color: var(--wc-navy);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: .2em .55em;
	white-space: nowrap;
}
.post-type-archive-gd_event .date-badge.range .day { font-size: .92rem; }
.post-type-archive-gd_event .date-badge.range .month { letter-spacing: .02em; }

/* Cross-month range: two mini calendar-blocks side by side (still navy
   day / white month each) instead of one row with a repeated dash, which
   read as two numbers glued together rather than a span. Both segments
   fixed to the same width (fits 2 digits) so "3" and "28" don't throw off
   the symmetry between the two halves. */
.post-type-archive-gd_event .date-badge.split { display: flex; padding: 0; }
.post-type-archive-gd_event .date-badge.split .seg {
	display: flex; flex-direction: column;
	width: 2.1em; flex: none;
}
.post-type-archive-gd_event .date-badge.split .seg + .seg .day { border-left: 1px solid rgba(255,255,255,.4); }
.post-type-archive-gd_event .date-badge.split .seg + .seg .month { border-left: 1px solid rgba(26,35,126,.18); }
.post-type-archive-gd_event .date-badge.split .day,
.post-type-archive-gd_event .date-badge.split .month { padding-left: 0; padding-right: 0; text-align: center; }

/* "In corso": collapses to the same compact single-line pill footprint as
   every other state - the "fino al ..." detail moves to the card's meta
   line (wc_event_meta_extra) instead of a cramped second badge row. */
.post-type-archive-gd_event .date-badge.live {
	display: flex; align-items: center; gap: .35em;
	background: var(--wc-live);
	color: #fff;
	padding: .45em .75em;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .03em;
	white-space: nowrap;
}
.post-type-archive-gd_event .date-badge.live .dot {
	width: .4em; height: .4em; border-radius: 50%; background: #fff; flex: none;
	animation: wc-event-live-pulse 1.6s ease-in-out infinite;
}
@keyframes wc-event-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.post-type-archive-gd_event .date-badge.live .dot { animation: none; }
}

.post-type-archive-gd_event .wc-event-card-meta {
	display: flex; flex-direction: column; gap: .3rem;
	font-size: .82rem; color: var(--wc-navy-soft);
	margin-top: .3rem;
}
.post-type-archive-gd_event .wc-event-card-meta span {
	display: flex; align-items: flex-start; gap: .4em;
	/* Location text (comune + venue, sometimes several parts long e.g.
	   "Acciaroli, Chiesa SS. Annunziata, Arena del Mare e Piazza Vittorio
	   Emanuele") wraps to 2-3 lines - inherited body line-height (~1.6-1.7)
	   left far too much air between wrapped lines for a compact meta row. */
	line-height: 1.35;
}

/* Pins the CTA to the bottom of the card regardless of how many meta lines
   render above it (location can be 1-3 lines, the extra "Ore"/"Fino al"
   line is only present for some events - not every card has the same
   amount of content, and that's fine/honest; what wasn't fine was the
   button landing at a different height on every card in the same row).
   GD's own .card is already display:flex;flex-direction:column;height:100%
   (Bootstrap's h-100), but .card-body inside it is plain display:block, so
   it never stretched to fill the leftover space - promoting it to a flex
   column too, with the footer pushed down via margin-top:auto, is what
   actually anchors the button regardless of content-height above it. */
.post-type-archive-gd_event .card-body {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.post-type-archive-gd_event .card-footer {
	margin-top: auto;
	padding-top: .7rem;
	display: flex;
	gap: .5rem;
	border-top: 1px solid var(--wc-line);
}
.post-type-archive-gd_event .card-footer .btn {
	flex: 1;
	text-align: center;
	font-size: .78rem;
	font-weight: 700;
	border-radius: 100px;
	padding: .55em .4em;
	text-decoration: none;
	white-space: nowrap;
}

/* ============================================================
   Geolocate button on the native "Vicino" search field, every archive.
   GD's own left-side icon (.input-group-text, the pin/clear toggle) is
   position:absolute inside .input-group-inside/.position-relative with
   the input's own padding-left making room for it - same convention
   mirrored here on the right instead, rather than inventing a different
   layout technique for a field GD already built this way. See the JS
   that appends this button in functions.php (wp_footer, archives only).
   ============================================================ */
.geodir-archive .gd-search-field-near .snear {
	padding-right: 2.5em !important;
}
.geodir-archive .wc-geo-btn {
	position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
	width: 30px; height: 30px; border-radius: 50%; border: none;
	background: var(--wc-cyan); color: #fff; font-size: .8rem;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0; z-index: 2;
}
.geodir-archive .wc-geo-btn:hover { background: var(--wc-cyan-deep); }
.geodir-archive .wc-geo-btn.is-loading { opacity: .55; pointer-events: none; }
.post-type-archive-gd_event .card-footer .btn-primary { background: var(--wc-yellow); color: var(--wc-yellow-ink); }
.post-type-archive-gd_event .card-footer .btn-primary:hover { filter: brightness(1.05); }
.post-type-archive-gd_event .card-footer .btn-secondary {
	flex: 0 0 auto; width: 2.4em; background: var(--wc-surface-2); color: var(--wc-navy);
	display: inline-flex; align-items: center; justify-content: center;
}
.post-type-archive-gd_event .card-footer .btn-secondary:hover { background: var(--wc-line); }
/* Was a single emoji character (self-sized, centered by the .btn text-align
   above) - swapped for an inline SVG (webcilento_event_pdf_icon(), crisp at
   this small size unlike the emoji, confirmed low-contrast/faint in a user
   screenshot), which needs its own explicit size or it falls back to the
   browser's default replaced-element box. */
.post-type-archive-gd_event .card-footer .btn-secondary svg { width: 1.05em; height: 1.05em; }

/* Sidebar: locandina image, secondary CTA button, cross-sell boxes. */
.wc-event-locandina { width: 100%; display: block; cursor: zoom-in; }

.wc-btn-block-secondary { background: #fff; border: 1.5px solid var(--wc-line); color: var(--wc-navy); }
.wc-btn-block-secondary:hover { border-color: var(--wc-cyan-deep); color: var(--wc-cyan-deep); }

/* Alloggi/Mangiare e bere Free sidebar upsell + contact-form cards. */
.wc-upsell-card { background: var(--wc-surface-2); }
.wc-upsell-card .wc-side-card-pad { padding-top: 1.1rem; }
.wc-upsell-card p { margin: 0 0 .8rem; font-size: .88rem; line-height: 1.5; color: var(--wc-navy-soft); }
.wc-contact-form { display: flex; flex-direction: column; gap: .6rem; }
.wc-contact-form input[type="text"],
.wc-contact-form input[type="email"],
.wc-contact-form textarea {
	width: 100%; border: 1.5px solid var(--wc-line); border-radius: 7px; padding: .6em .8em;
	font: inherit; font-size: .88rem; color: var(--wc-navy); box-sizing: border-box;
}
.wc-contact-form textarea { resize: vertical; }
.wc-contact-form button { border: none; cursor: pointer; }
.wc-contact-sent { color: var(--wc-cyan-deep); font-weight: 600; font-size: .9rem; margin: 0; }
.wc-crosssell-card .wc-side-card-pad { display: flex; flex-direction: column; gap: .1rem; }
.wc-crosssell-item {
	display: flex; flex-direction: column; gap: .15rem;
	text-decoration: none; padding: .55rem .3rem; border-bottom: 1px solid var(--wc-line);
	font-size: .88rem; color: var(--wc-navy);
}
.wc-crosssell-item:last-child { border-bottom: none; }
.wc-crosssell-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; }
/* Name is the primary thing a visitor scans for — give it real weight and
   size; distance and category are supporting metadata, styled as small
   pills so they read as secondary/tertiary rather than competing text. */
.wc-crosssell-name { font-weight: 700; font-size: .95rem; color: var(--wc-navy); line-height: 1.3; }
.wc-crosssell-item b {
	flex: none; font-weight: 700; font-size: .76rem; color: #fff; background: var(--wc-cyan-deep);
	padding: .2em .55em; border-radius: 100px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wc-crosssell-item:hover .wc-crosssell-name { color: var(--wc-cyan-deep); }
.wc-crosssell-cat {
	font-size: .72rem; font-weight: 600; color: var(--wc-navy-soft); text-transform: uppercase; letter-spacing: .04em;
}

/* category chip next to the hub badge in the event hero (no-image variant) */
.wc-event-category-chip { background: var(--wc-surface-2); color: var(--wc-navy-soft) !important; margin-left: .5rem; }

/* Titolo H1 nativo di Astra sugli archivi CPT (page-title.ast-archive-title
   — Dove dormire, Cosa vedere, Paesi, Itinerari e le rispettive pagine
   categoria: nessuna di queste ha un hero custom con h1 proprio, sono
   tutte ferme al banner nativo di Astra) — segnalato dall'utente su
   Itinerari ("più grande e più sottile") confrontandolo con gli h1 del
   resto del sito. Causa trovata nel CSS compilato di Astra stesso
   (wp-content/themes/astra/assets/css/minified/style.min.css):
   .ast-archive-title{font-size:40px;font-weight:300} — mai stato 700
   (bold) come ogni altro titolo del sito, semplicemente perché
   nessuno l'aveva mai sovrascritto qui. Selettore a due classi per
   battere in modo pulito la singola classe di Astra, senza !important.
   Stessa taglia (clamp, non px fisso) dell'hero custom delle schede
   singole (.wc-paese-hero-content h1) per coerenza tra le due viste. */
.page-title.ast-archive-title {
	font-weight: 700;
	font-size: clamp(26px, 4vw, 38px);
	color: var(--wc-navy);
}
/* Bordo sinistro d'accento sull'H1 (2026-09-13, livello 1 di §08) —
   stesso --wc-ambito-accent delle pillole sopra, stessa fonte
   (webcilento_ambito_colors()). Preferito a una sottolineatura piena su
   richiesta dell'utente: piu' discreto, non allunga la riga sotto al
   testo. Spessore 6px (era 3, poi 4): a 3-4px il bordo si perdeva quasi
   del tutto, specie sugli ambiti con un accento vicino al navy del testo
   H1 stesso (es. Dormire) — verificato dal vivo dall'utente, non a
   schermo. Selettore su .geodir-archive (classe body comune a tutti gli
   archivi GD) invece che CPT per CPT: un solo posto da toccare se domani
   cambia lo stile, non 6. Su Paesi (nessun colore ambito, vedi §02/§04)
   --wc-ambito-accent non viene mai impostata e il bordo ricade sul navy
   di brand, invariato rispetto a prima di questo pilota. */
body.geodir-archive .page-title.ast-archive-title {
	border-left: 6px solid var(--wc-ambito-accent, var(--wc-navy));
	padding-left: 16px;
}

/* Archive hook line, replacing the old one-line flat description - shared
   by Eventi (page 9420) and Paesi (page 9410 + per-category via the
   [wc_paesi_hook] shortcode, since unlike Eventi each Paesi category gets
   its own distinct hook/sub text). Fraunces (a display serif, deliberately
   not the site's own Rubik) is what keeps the hook from reading as more
   body copy; the highlighter marks on the sub-line do the same job for
   the supporting sentence. Named generically (not "wc-events-*") since
   it's no longer events-only. */
.wc-archive-hook {
	font-family: "Fraunces", Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.35rem, 2.6vw, 1.7rem);
	line-height: 1.28;
	color: var(--wc-navy);
	margin: 0 0 .55rem;
}
.wc-archive-hook em {
	font-style: italic;
	font-weight: 600;
	color: var(--wc-ambito-accent-ink, var(--wc-cyan-deep));
}
.wc-archive-hook .wc-archive-hook-q {
	color: var(--wc-ambito-accent-ink, var(--wc-cyan-deep));
	font-style: normal;
}

/* Badge icona d'ambito, livello 1b (2026-09-14) — stessa logica del
   bordo H1 qui sopra: una var per pagina (--wc-ambito-icon-url, iniettata
   da inc/helpers.php), nessun markup nuovo. Su Paesi la var non viene mai
   impostata, quindi lo pseudo-elemento resta vuoto/invisibile (nessun
   fallback: un badge generico non avrebbe senso, a differenza del bordo
   H1 che ricade sul navy). 50px per coerenza con l'altezza reale della
   riga hook+sub in questo punto della pagina. */
body.geodir-archive .entry-header {
	position: relative;
}
body.geodir-archive .entry-header::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 0;
	width: 50px;
	height: 50px;
	background-image: var(--wc-ambito-icon-url);
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}
.wc-archive-sub {
	font-size: .98rem;
	line-height: 1.6;
	color: #4b5266;
	margin: 0 0 1.5rem;
	max-width: 46em;
}
.wc-archive-sub .wc-hl {
	font-weight: 600;
	color: #1c2333;
	background: linear-gradient(120deg, rgba(255,193,7,.4) 0%, rgba(255,193,7,.4) 100%);
	background-repeat: no-repeat;
	background-size: 100% .5em;
	background-position: 0 88%;
	padding: 0 .05em;
}

/* Illustrative macro-hub map (2026-09-02, QGIS export) - two placements:
   the "hero" size next to the hook text on page 9410 (landing + category
   archives, via [wc_paesi_hub_map]), and a smaller "mini" size in the
   single paese sidebar (webcilento_paesi_hub_map_for_post). Purely
   illustrative everywhere except the future homepage - no hover/click
   affordance here, so no cursor/pointer styling. */
.wc-hub-hero {
	display: flex;
	align-items: center;
	gap: 2.5rem;
	margin-bottom: 1.5rem;
}
.wc-hub-hero > .wc-hub-hero-text { flex: 1 1 auto; min-width: 0; }
.wc-hub-hero > .wc-hub-hero-text .wc-archive-sub { margin-bottom: 0; }
.wc-hub-map {
	flex: 0 0 auto;
	width: min(280px, 38vw);
	height: auto;
	display: block;
}
@media (max-width: 720px) {
	.wc-hub-hero { flex-direction: column-reverse; align-items: stretch; gap: 1rem; }
	.wc-hub-map { width: min(220px, 60vw); margin: 0 auto; }
}
.wc-hub-map-mini {
	width: 100%;
	height: auto;
	display: block;
}
.wc-hubmap-lead {
	font-size: .88rem;
	line-height: 1.5;
	color: var(--wc-navy-soft);
	margin: 0 0 .8rem;
}
.wc-hubmap-lead a { color: var(--wc-cyan-deep); text-decoration: none; }
.wc-hubmap-lead a:hover { text-decoration: underline; }
.wc-hubmap-more { margin: .8rem 0 0; }


/* ================= Recensioni — form + lista (proposta approvata 9/9,
   https://claude.ai/code/artifact/0a38adb8-f124-4073-8033-f4e786d5e8de) ================= */

.wc-gd-detail #respond .comment-reply-title{
	color:var(--wc-navy);
	font-size:24px;
	/* Sotto una certa soglia (nativo, non un util di Bootstrap nel markup -
	   niente classe pt-* sull'elemento) arriva un padding-top responsive
	   che allarga il distacco da "Recensioni" solo quando la lista è
	   vuota (senza recensioni non c'è nessun'altra cosa a riempire quello
	   spazio, quindi si nota) - segnalato da mobile su una scheda a zero
	   recensioni. Azzerato esplicitamente, stesso spazio a ogni breakpoint. */
	padding-top:0 !important;
}
.wc-gd-detail .wc-review-subtitle{ color:#6B7280; font-size:14px; margin:4px 0 20px; font-family:'Karla',sans-serif; }

/* --- Layout del form: Nome/Email affiancati + ordine dei blocchi (2026-09-10)
   Il form nativo mette ogni campo/blocco in un div a piena larghezza in
   sequenza - niente wrapper attorno a Nome+Email da riusare via CSS puro,
   quindi si trasforma #commentform stesso in una grid a 2 colonne: ogni
   figlio resta a piena larghezza (grid-column:1/-1) TRANNE Nome ed Email,
   che restano grid-column:auto e si affiancano da soli nella stessa riga
   per via dell'auto-placement. La nota privacy renderizzava già FUORI
   posto rispetto al mockup approvato (subito dopo il testo recensione,
   non prima/dopo il bottone come inteso in una sessione precedente - il
   fix di allora agiva su comment_notes_after ma GeoDirectory non lo
   stampa dove WordPress core lo stamperebbe di default) - risistemata
   con `order` sullo stesso meccanismo grid, niente PHP da toccare. */
.wc-gd-detail #commentform{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 14px;
}
.wc-gd-detail #commentform > *{ grid-column:1 / -1; }
.wc-gd-detail #commentform > [data-argument="author"],
.wc-gd-detail #commentform > [data-argument="email"]{ grid-column:auto; }

.wc-gd-detail #commentform > [data-argument="comment"]{ order:1; }
.wc-gd-detail #commentform > .gd-rating-input-group{ order:2; }
.wc-gd-detail #commentform > [data-argument="author"],
.wc-gd-detail #commentform > [data-argument="email"]{ order:3; }
.wc-gd-detail #commentform > [data-argument="wp-comment-cookies-consent"]{ order:4; }
.wc-gd-detail #commentform > .form-submit{ order:5; }
.wc-gd-detail #commentform > .wc-review-privacy-note{ order:6; margin-top:14px; }

@media (max-width:520px){
	.wc-gd-detail #commentform{ grid-template-columns:1fr; }
}

.wc-gd-detail #commentform textarea.form-control,
.wc-gd-detail #commentform input.form-control{
	border:1px solid var(--wc-line) !important;
	border-radius:10px !important;
	padding:11px 13px !important;
	font-family:'Karla',sans-serif;
	font-size:15px;
	color:var(--wc-text);
	box-shadow:none !important;
}
.wc-gd-detail #commentform textarea.form-control:focus,
.wc-gd-detail #commentform input.form-control:focus{
	border-color:var(--wc-cyan-deep) !important;
	box-shadow:0 0 0 2px rgba(0,146,168,.25) !important;
}

.wc-gd-detail #commentform .gd-rating-input-group{
	background:#fff !important;
	border:1px solid var(--wc-line) !important;
	border-radius:10px !important;
	box-shadow:none !important;
	padding:0 !important;
}
.wc-gd-detail #commentform .gd-rating-input-wrap{
	padding:12px 14px !important;
	margin:0 !important;
	border-bottom:1px solid var(--wc-line);
	/* Nativo: icone/stelle a sinistra, etichetta (es. "Pulizia") a destra -
	   il mockup approvato ha l'etichetta prima delle stelle. row-reverse
	   inverte l'ordine visivo senza toccare il markup: con
	   justify-content:space-between già presente, il primo figlio nel DOM
	   (le icone/stelle) va sul bordo main-end (destra), il secondo
	   (l'etichetta) sul bordo main-start (sinistra). */
	flex-direction:row-reverse;
}
/* Sotto ~576px, etichetta + 5 icone + badge "Seleziona un voto" non ci
   stanno più su una riga sola per le etichette più lunghe (visto su
   "Rapporto qualità/prezzo": andava a capo mentre "Pulizia"/"Servizio"
   no - stesso componente, resa incoerente a seconda della lunghezza del
   testo). Invece di lasciare che vada a capo in modo diverso riga per
   riga, sotto questa soglia si impila sempre allo stesso modo: etichetta
   sopra, icone+badge sotto, a piena larghezza - column-reverse (non
   column) perché nel DOM le icone vengono prima dell'etichetta, e va
   mantenuto "etichetta sopra" anche impilato. */
@media (max-width:576px){
	.wc-gd-detail #commentform .gd-rating-input-wrap{
		flex-direction:column-reverse;
		align-items:flex-start;
		gap:8px;
	}
}
.wc-gd-detail #commentform .gd-extra-ratings .gd-rating-input-wrap:nth-child(odd){
	background:var(--wc-surface-2);
}
.wc-gd-detail #commentform .gd-rating-input-wrap:last-child{ border-bottom:none; }
.wc-gd-detail #commentform .gd-rating-label{
	font-family:'Rubik',sans-serif;
	font-weight:600;
	font-size:14.5px;
	color:var(--wc-text);
}
.wc-gd-detail #commentform .gd-rating-foreground{ color:var(--wc-yellow) !important; }
.wc-gd-detail #commentform .gd-rating-background{ color:var(--wc-line) !important; }
.wc-gd-detail #commentform .gd-rating-text{
	background:var(--wc-surface-2) !important;
	border:none !important;
	color:var(--wc-navy-soft) !important;
	font-family:'Karla',sans-serif;
	font-weight:600;
	font-size:11.5px;
	border-radius:100px !important;
}

.wc-gd-detail .wc-review-privacy-note{
	font-size:12px;
	color:#6B7280;
	margin:0 0 14px;
	display:flex;
	align-items:center;
	gap:6px;
}
.wc-gd-detail .wc-review-privacy-note::before{
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	content:"\f023";
	font-size:12px;
	flex:none;
}

/* Checkbox "Salva il mio nome..." (2026-09-10, segnalato da mobile: il
   trucco nativo Bootstrap padding-left+margin-left negativo su .form-check
   si disallinea quando l'etichetta va su più righe, es. viewport stretto).
   Sostituito con un flex esplicito, stessa resa su qualunque numero di
   righe del testo. */
.wc-gd-detail #commentform .form-check{
	display:flex;
	align-items:flex-start;
	gap:10px;
	padding-left:0;
}
.wc-gd-detail #commentform .form-check-input{
	float:none;
	flex:none;
	width:16px;
	height:16px;
	margin:3px 0 0;
}
.wc-gd-detail #commentform .form-check-label{
	margin:0;
}

/* "Mi piace"/"Rispondi" (2026-09-10, segnalato da mobile: si toccano su
   schermo stretto). Il div del "Mi piace" nativo è d-inline-block, lo
   spazio tra i due dipendeva solo dal whitespace nel markup sorgente -
   fragile. Reso esplicito con flex+gap sul contenitore, con wrap per non
   forzare due pillole affiancate se lo spazio non basta. Aggiunta anche
   l'icona mancante su "Rispondi" (nel mockup c'è, nel link nativo no). */
.wc-gd-detail li.comment .comment-links{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
}
.wc-gd-detail li.comment .comment-reply-link::before{
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	content:"\f3e5";
	margin-right:6px;
}

/* Tab nativa "Sito web" (2026-09-10, segnalato dall'utente): per ogni
   scheda con un sito impostato, GeoDirectory ripete lo stesso link già
   presente - meglio, come pulsante "Sito ufficiale" - nella sidebar
   (shortcodes-listing.php). Qui arrivava come riga di testo nuda, senza
   stile, subito dopo il form recensioni: puro doppione, non contenuto
   nuovo (verificato: l'intera tab contiene solo questo singolo link).
   Nascosta per intero, stessa logica già applicata al blocco riepilogo
   nativo ridondante (gd-details.css, ".commentlist-wrap > .row.gy-4.mb-5"). */
.wc-gd-detail #website{ display:none; }

.wc-gd-detail #commentform .form-submit .submit{
	background:var(--wc-yellow) !important;
	color:var(--wc-yellow-ink) !important;
	border:none !important;
	border-radius:100px !important;
	font-family:'Rubik',sans-serif;
	font-weight:700 !important;
	padding:13px 26px !important;
	box-shadow:var(--wc-shadow);
}

/* --- Separatori nativi tra le "tab" (Profilo/Foto/Recensioni/Sito web -
   gli stessi la cui etichetta H2 è già .gd-tab-list-title{display:none}
   qui sopra "perché il contenuto scorre"): quell'unica scelta ha nascosto
   solo l'etichetta, non l'<hr> nativo che ciascuna tab stampa comunque in
   testa. Trovati due problemi reali (2026-09-10, segnalati dall'utente
   confrontando più schede dal vivo):
   1) peso visivo incoerente tra un <hr> e l'altro - convivono un vecchio
      reset in stile Astra (hr{background:#ccc}) e quello più recente di
      Bootstrap (hr{border-top, opacity ridotta}), e a seconda del
      contesto vince l'uno o l'altro, quindi due linee "identiche" nel
      markup finiscono per apparire una più marcata e una più tenue;
   2) spaziatura non affidabile sotto la linea - basata sul margine
      di default dell'hr, che collassa in modo diverso a seconda del
      contenuto immediatamente successivo: su alcune schede (es. Cantina
      Donnaclara, tab Foto) la linea finisce incollata alla fotogallery,
      senza respiro, mentre su altre sembra normale solo per coincidenza.
   Normalizzate tutte a un'unica regola esplicita con margin fisso (mai il
   default del browser) cosi il peso è sempre lo stesso e lo spazio sotto
   non dipende più da cosa segue. */
.wc-gd-detail #gd-single-tabs-content > div > hr{
	display:block;
	height:0;
	background:none !important;
	border:none;
	border-top:1px solid var(--wc-line);
	margin:0 0 28px;
}

/* --- Dropdown "Ordina per" (nativo del plugin, mai stilizzato prima):
   di default è un <select> Bootstrap a piena larghezza (.form-select
   .form-control sono width:100% per default, .mw-100 non lo limita, la
   limita solo al 100% del contenitore) - su una colonna di ~830px un
   controllo di ordinamento a piena larghezza legge come sproporzionato
   rispetto al resto (bottoni/badge del sito sono sempre a misura di
   contenuto). Reso compatto, pillola coerente con gli altri controlli. */
.wc-gd-detail #comment_sorting_form{ margin:0 0 20px; }
.wc-gd-detail #comment_sorting_form select.comment_sorting{
	display:inline-block;
	width:auto;
	max-width:none;
	border:1px solid var(--wc-line) !important;
	border-radius:100px;
	padding:8px 38px 8px 16px;
	font-family:'Karla',sans-serif;
	font-size:13.5px;
	font-weight:600;
	color:var(--wc-navy);
	background-color:#fff;
	box-shadow:none !important;
}
.wc-gd-detail #comment_sorting_form select.comment_sorting:focus{
	border-color:var(--wc-cyan-deep) !important;
	box-shadow:0 0 0 2px rgba(0,146,168,.2) !important;
	outline:none;
}

/* --- Titolo sezione + aggregato (sostituisce l'h3 nativo, reso
   visually-hidden dal plugin stesso in modalità Bootstrap 5 - vedi
   theme-setup.php, hook geodir_before_review_list) --- */
.wc-gd-detail .wc-review-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	flex-wrap:wrap;
	gap:12px;
	margin:0 0 18px;
}
.wc-gd-detail .wc-review-head h3{
	font-family:'Rubik',sans-serif;
	font-weight:700;
	font-size:22px;
	color:var(--wc-navy);
	margin:0;
}
.wc-gd-detail .wc-review-agg{
	display:flex;
	align-items:center;
	gap:10px;
}
.wc-gd-detail .wc-review-agg-num{
	font-family:'Rubik',sans-serif;
	font-weight:700;
	font-size:26px;
	color:var(--wc-navy);
	font-variant-numeric:tabular-nums;
}
.wc-gd-detail .wc-review-agg .gd-rating-foreground{ color:var(--wc-yellow) !important; }
.wc-gd-detail .wc-review-agg .gd-rating-background{ color:var(--wc-line) !important; }
.wc-gd-detail .wc-review-agg-cnt{
	font-size:12.5px;
	color:#6B7280;
	font-family:'Karla',sans-serif;
	white-space:nowrap;
}

/* --- Lista recensioni --- */
.wc-gd-detail li.comment .card{
	border:1px solid var(--wc-line);
	border-radius:var(--wc-radius);
	box-shadow:var(--wc-shadow) !important;
}
.wc-gd-detail li.comment .card-header{
	background:#fff !important;
	border-bottom:1px solid var(--wc-line) !important;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 18px !important;
}
.wc-gd-detail .wc-review-avatar{
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family:'Rubik',sans-serif;
	font-weight:700;
	color:#fff;
	font-size:16px;
	flex:none;
}
.wc-gd-detail li.comment .media-heading{
	font-family:'Rubik',sans-serif;
	font-weight:700;
	color:var(--wc-navy) !important;
	font-size:15.5px;
}
.wc-gd-detail li.comment .media-heading .text-reset{ color:inherit !important; }
.wc-gd-detail li.comment .geodir-review-ratings .gd-rating-foreground{ color:var(--wc-yellow) !important; }
.wc-gd-detail li.comment .geodir-review-ratings .gd-rating-background{ color:var(--wc-line) !important; }

.wc-gd-detail li.comment .comment-content{ padding:18px !important; }
.wc-gd-detail li.comment .description p{
	font-family:'Karla',sans-serif;
	font-size:15px;
	color:var(--wc-text);
	margin:0;
}

.wc-gd-detail li.comment .card-footer{
	background:#fff !important;
	border-top:1px solid var(--wc-line) !important;
	padding:12px 18px !important;
}
.wc-gd-detail li.comment .card-footer time.timeago{
	background:none !important;
	color:#6B7280;
	font-size:12px;
	padding:0 !important;
}
.wc-gd-detail li.comment .comments_review_likeunlike{
	border:1px solid var(--wc-line) !important;
	background:transparent !important;
	color:#6B7280 !important;
	border-radius:100px !important;
	font-family:'Karla',sans-serif;
	font-weight:600;
	font-size:13px;
}
.wc-gd-detail li.comment .comments_review_likeunlike:hover{ border-color:var(--wc-cyan-deep) !important; color:var(--wc-cyan-deep) !important; }
.wc-gd-detail li.comment .comment-reply-link{
	background:var(--wc-cyan-deep) !important;
	border-color:var(--wc-cyan-deep) !important;
	border-radius:100px !important;
	color:#fff !important;
	font-family:'Karla',sans-serif;
	font-weight:600;
	font-size:13px;
	padding:7px 14px !important;
}
/* .comment-reply-link is an <a> inside .wc-gd-detail, so it also matched the
   point-2 link-color fix (.wc-gd-detail .bsui a{color:var(--wc-cyan-deep)}) -
   same cyan as this button's own background, text was invisible until the
   color:#fff !important above (found live, 2026-09-09). */

/* Risposta ufficiale del gestore: usa il meccanismo nativo di WordPress
   "bypostauthor" (il commento appartiene allo stesso utente del post_author)
   invece di un flag custom - coerente col vero flusso di rivendicazione,
   perché geodir_claim_listing riassegna post_author all'utente che rivendica
   la scheda (verificato nel codice del plugin, class-geodir-claim-post.php).
   Stessa grammatica "callout" a bordo sinistro già usata nel blog
   (.wc-poi-callout), qui ricolorata per la voce ufficiale. Il badge
   "Gestore" stesso è nativo di GeoDirectory (.badge.bg-primary, tradotto via
   il filtro geodir_review_listing_owner_label in theme-setup.php) - non un
   ::after custom, per non duplicare l'informazione. */
.wc-gd-detail ul.children{
	margin:16px 0 0 32px;
	padding-left:0;
	list-style:none;
}
.wc-gd-detail li.comment.bypostauthor > .card{
	background:var(--wc-surface-2);
	border-left:3px solid var(--wc-cyan-deep);
	box-shadow:none !important;
}
.wc-gd-detail li.comment .badge.bg-primary{
	background:var(--wc-cyan-deep) !important;
	font-family:'Karla',sans-serif;
	font-weight:700;
	font-size:10.5px;
	text-transform:uppercase;
	letter-spacing:.03em;
	border-radius:100px;
	padding:3px 9px;
}

/* ==========================================================================
   Itinerari (2026-09-12, restyled 2026-09-12 later same day) — hero
   stats/warning, sidebar cards, archive card
   ========================================================================== */

/* Descrizione + Galleria (2026-09-12, round 12): tolte dai tab nativi GD
   "Profilo"/"Foto" (titoli tab nascosti via CSS altrove in questo file,
   .gd-tab-list-title{display:none} — quindi senza un vero H2 visibile) e
   rese come blocchi propri con un titolo vero, nell'ordine voluto
   dall'utente: Descrizione → Profilo altimetrico → Tappe → Galleria →
   Recensioni.
   Font corretto nel round 13 (segnalato dall'utente confrontando con
   "Recensioni", l'unico titolo che già seguiva lo stile giusto): senza
   font-weight/color espliciti questi H2 ricadevano nello stile debole di
   default di Astra (400, un blu diverso — rgb(19,81,137) da una regola
   dinamica di Astra Addon, non il nostro --wc-navy) invece di riprendere
   .wc-gd-detail .wc-review-head h3, l'unica regola "titolo di sezione"
   già esistente nel file — stessi identici valori qui. */
.wc-itin-section-title{ font-family:'Rubik',sans-serif; font-weight:700; font-size:22px; color:var(--wc-navy); margin:0 0 .75rem; }
.wc-itin-description{ font-size:15px; line-height:1.65; color:var(--wc-text); margin-bottom:1.5rem; }
.wc-itin-description p{ margin:0 0 1em; }
.wc-itin-description p:last-child{ margin-bottom:0; }
.wc-itin-gallery-wrap{ margin-bottom:1.5rem; }

/* Third toprow pill (tipo di percorso), next to the hub eyebrow and the
   muted category chip — translucent on the photo, unlike either of those
   two (which both have a solid fill), so all three still read as distinct
   facts rather than a repeated pill. No new color introduced, just the
   existing white/scrim treatment already used for hero text elsewhere. */
.wc-itin-toprow-soft{
	display:inline-flex; align-items:center; font-size:.72rem; letter-spacing:.03em;
	font-weight:600; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.4);
	color:#fff; padding:.3em .8em; border-radius:100px; margin-bottom:.7rem; white-space:nowrap;
}

/* Was a bare flex row with no visual container at all (the "ristretta,
   non a forma di ovale" feedback) — now the same bordered/shadowed card
   language as .wc-side-card, laid out as a grid with vertical dividers
   between facts instead of floating label/value pairs. */
.wc-itin-stats{
	display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
	background:#fff; border:1px solid var(--wc-line); border-radius:var(--wc-radius);
	box-shadow:var(--wc-shadow); overflow:hidden;
	margin:18px 0 1.75rem;
}
.wc-itin-stat{
	display:flex; flex-direction:column; gap:4px;
	padding:.85rem 1.1rem; border-right:1px solid var(--wc-line);
}
.wc-itin-stat:last-child{ border-right:none; }
@media (max-width:820px){ .wc-itin-stats{ grid-template-columns:repeat(2,1fr); } }
.wc-itin-stat-label{
	font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
	color:var(--wc-text); opacity:.65; font-weight:700;
}
.wc-itin-stat-value{ font-weight:700; color:var(--wc-navy); font-size:1.05rem; }
.wc-itin-diff-pill{
	display:inline-flex; align-items:center; width:fit-content; font-weight:700; font-size:.85rem;
	padding:.25em .8em; border-radius:100px; color:#fff; background:var(--wc-navy-soft);
}
.wc-itin-diff-T{ background:var(--wc-green); }
.wc-itin-diff-E{ background:var(--wc-cyan-deep); }
.wc-itin-diff-EE{ background:var(--wc-live); }
/* Scala bici (facile/media/impegnativa, 2026-09-13) — stessa rampa
   cromatica della scala CAI (T/E/EE) qui sopra, mai avuta: la classe
   modificatrice non veniva mai stampata nel markup, restava sempre sul
   grigio/navy di default di .wc-itin-diff-pill, indipendentemente dal
   livello — segnalato dall'utente confrontando i pallini in griglia. */
.wc-itin-diff-facile{ background:var(--wc-green); }
.wc-itin-diff-media{ background:var(--wc-cyan-deep); }
.wc-itin-diff-impegnativa{ background:var(--wc-live); }

.wc-itin-warning{
	margin:14px 0 1.75rem; padding:12px 20px;
	background:#FBF0DB; border:1px solid #EED9AE; border-radius:var(--wc-radius);
	color:#6B4E12; font-size:.9rem; line-height:1.55;
}
.wc-itin-warning strong{ margin-right:.4em; }

.wc-gpx-download{
	display:flex; align-items:center; gap:8px; margin:0 16px 16px;
	padding:10px 14px; border-radius:9px; background:var(--wc-surface-2);
	font-weight:700; font-size:.9rem; text-decoration:none; color:var(--wc-navy);
}
.wc-gpx-download svg{ width:18px; height:18px; flex:none; }
.wc-itin-info-row{ margin:0 0 8px; font-size:.9rem; }
.wc-itin-info-row:last-child{ margin-bottom:0; }

/* Periodo consigliato: griglia 12 mesi (2026-09-16, round 16) */
.wc-itin-period-block{ padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--wc-line); }
.wc-itin-period-block:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:none; }
.wc-itin-period-title{
	display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700;
	color:var(--wc-navy); margin-bottom:10px;
}
.wc-itin-period-title svg{ width:16px; height:16px; flex:none; color:var(--wc-cyan-deep); }
.wc-itin-month-strip{ display:grid; grid-template-columns:repeat(12,1fr); gap:3px; margin-bottom:10px; }
.wc-itin-month-cell{
	aspect-ratio:1; border-radius:5px; display:flex; align-items:center; justify-content:center;
	font-size:.68rem; font-weight:800; cursor:default;
}
.wc-itin-month-good{ background:var(--wc-green); color:#fff; }
.wc-itin-month-neutral{ background:var(--wc-yellow); color:var(--wc-yellow-ink); }
.wc-itin-month-bad{ background:var(--wc-live); color:#fff; }
.wc-itin-month-unknown{ background:var(--wc-surface-2); color:var(--wc-text); opacity:.6; }
.wc-itin-period-legend{ display:flex; flex-wrap:wrap; gap:12px; font-size:.72rem; color:var(--wc-text); opacity:.85; }
.wc-itin-legend-item{ display:inline-flex; align-items:center; gap:5px; }
.wc-itin-legend-dot{ width:9px; height:9px; border-radius:3px; flex:none; }
.wc-itin-period-disclaimer{
	margin:10px 0 0; padding:8px 12px; font-size:.72rem; font-style:italic; line-height:1.4;
	background:#FBF0DB; border:1px solid #EED9AE; border-radius:8px; color:#6B4E12;
}

.wc-itin-comuni-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.wc-itin-comuni-list li{
	background:var(--wc-surface-2); border-radius:100px; padding:5px 12px; font-size:.82rem;
}
.wc-itin-comuni-list a{ color:var(--wc-navy); text-decoration:none; font-weight:600; }
.wc-itin-comuni-list a:hover{ color:var(--wc-cyan-deep); }

/* ===== Traccia GPX: mappa + profilo altimetrico (2026-09-12, round 3) =====
   Sostituiscono il tab "Mappa" nativo [gd_map] (single-pin, generico per
   ogni CPT) e il tab "Traccia GPX" (solo download grezzo) — entrambi
   rimossi da wpv0_geodir_tabs_layout per gd_itinerari. Disegnati e popolati
   client-side da js/itinerari-track.js: nessun parsing server-side, il GPX
   resta la fonte di verità, letto una volta per rendere sia la mappa che
   il profilo. Nessuna libreria nuova: riusa Google Maps JS (già attivo sul
   sito per [gd_map]) via un enqueue mirato solo a questa pagina. */
.wc-itin-track-map{
	width:100%; height:230px; background:var(--wc-surface-2);
	display:flex; align-items:center; justify-content:center;
}
.wc-itin-map-loading{ font-size:.82rem; color:var(--wc-navy-soft); }
/* Contenuto del google.maps.InfoWindow sui waypoint (2026-09-12) — Google
   lo inietta nel DOM normale (niente iframe/shadow DOM), quindi il CSS
   del tema si applica qui senza bisogno di stili inline nel JS. */
.wc-itin-wp-infowindow{ font-size:13px; line-height:1.4; max-width:220px; }
.wc-itin-wp-infowindow strong{ display:block; margin-bottom:3px; color:var(--wc-navy); }
.wc-itin-wp-infowindow p{ margin:0; color:var(--wc-text); }

.wc-itin-elev-card{
	background:#fff; border:1px solid var(--wc-line); border-radius:var(--wc-radius);
	box-shadow:var(--wc-shadow); padding:1.1rem 1.25rem .75rem; margin-bottom:1.5rem;
}
.wc-itin-elev-head{
	display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap;
	gap:.4rem; margin-bottom:.4rem;
}
.wc-itin-elev-title{ font-family:'Rubik',sans-serif; font-weight:700; font-size:22px; color:var(--wc-navy); margin:0; }
.wc-itin-elev-meta{ font-size:.82rem; color:var(--wc-navy-soft); font-weight:600; }
.wc-itin-elev-chart{ width:100%; }
.wc-itin-elev-chart svg{ width:100%; height:auto; display:block; }
.wc-itin-elev-loading{ font-size:.82rem; color:var(--wc-navy-soft); }
.wc-itin-elev-axis-label{ font-size:10px; fill:var(--wc-text); opacity:.6; font-family:'Karla',sans-serif; }

/* ===== Tappe del percorso (2026-09-12, round 8) =====
   Stesso involucro card di .wc-itin-elev-card; lista con una linea
   verticale continua dietro i marker (stile "timeline", ispirato a Komoot
   su richiesta dell'utente) — spaziatura verticale regolare tra le righe,
   non proporzionale ai km (proporzionale richiederebbe convertire distanza
   in altezza pixel e gestire il caso di tappe molto ravvicinate che si
   sovrapporrebbero — rimandato, oggi ogni riga mostra comunque il proprio
   km reale). */
.wc-itin-tappe-card{
	background:#fff; border:1px solid var(--wc-line); border-radius:var(--wc-radius);
	box-shadow:var(--wc-shadow); padding:1.1rem 1.25rem 1.4rem; margin-bottom:1.5rem;
}
.wc-itin-tappe-title{ font-family:'Rubik',sans-serif; font-weight:700; font-size:22px; color:var(--wc-navy); margin:0 0 .6rem; }

.wc-itin-tappe-list{ list-style:none; margin:0; padding:0; position:relative; }
.wc-itin-tappe-list::before{
	content:''; position:absolute; left:13px; top:6px; bottom:6px; width:2px; background:var(--wc-line);
}
.wc-itin-tappa{
	display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px;
	padding-block:.7rem; position:relative;
}
.wc-itin-tappa-marker{
	width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
	font-size:11px; font-weight:800; color:#fff; background:var(--wc-navy-soft); position:relative; z-index:1;
}
.wc-itin-tappa-marker.has-scheda{ background:var(--wc-cyan-deep); }
.wc-itin-tappa.is-endpoint .wc-itin-tappa-marker{ background:var(--wc-navy); }
.wc-itin-tappa-role{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--wc-text); opacity:.6; font-weight:700; }
.wc-itin-tappa-name{ font-size:14.5px; font-weight:700; }
/* Link della tappa (2026-09-12, round 12): sottolineato + freccetta, non
   solo colore — tolta la legenda "con scheda / senza scheda", il link
   deve segnalarsi da solo senza bisogno di una spiegazione a parte. */
.wc-itin-tappa-link{
	display:inline-flex; align-items:center; gap:3px; color:var(--wc-navy); text-decoration:underline;
	text-underline-offset:2px; text-decoration-color:rgba(26,35,126,.35);
}
.wc-itin-tappa-link:hover{ color:var(--wc-cyan-deep); text-decoration-color:currentColor; }
.wc-itin-tappa-link svg{ width:13px; height:13px; flex:none; }
.wc-itin-tappa-plain{ color:var(--wc-text); }
/* Mini-descrizione del waypoint (2026-09-12) — da <desc> nel GPX, solo per
   i waypoint senza scheda (le tappe editoriali hanno già la loro
   descrizione nella pagina collegata, non serve doppiarla qui). */
.wc-itin-tappa-desc{ font-size:12.5px; line-height:1.4; color:var(--wc-text); opacity:.75; margin-top:2px; }
.wc-itin-tappa-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.wc-itin-tappa-km{ font-size:.78rem; font-weight:700; color:var(--wc-text); opacity:.65; white-space:nowrap; }
/* Meteo discreto per tappa (2026-09-12, round 9) — solo icona+temperatura,
   niente card: presente solo sulle tappe che risolvono a una scheda reale
   (webcilento_weather_mini() lato PHP), assente sui waypoint GPX. */
.wc-itin-tappa-weather{
	display:inline-flex; align-items:center; gap:3px; font-size:.78rem; font-weight:700; color:var(--wc-text);
	white-space:nowrap; background:var(--wc-surface-2); border-radius:100px; padding:.15em .55em;
}
.wc-itin-tappa-weather i{ font-size:.85rem; }
.wc-itin-tappe-loading{ font-size:.82rem; color:var(--wc-navy-soft); padding-block:.5rem; }

/* Widget sidebar "Tutte le tappe" (2026-09-13) — elenco delle giornate di
   uno stesso percorso a tappe (La Via Silente / Cammino di San Nilo), non
   da confondere con .wc-itin-tappe-* sopra (i punti *dentro* una singola
   giornata, sezione ora rinominata "Punti di passaggio" in pagina).
   Riusa la chrome generica .wc-side-card, nessun nuovo bordo/ombra qui. */
.wc-itin-percorso-list{ list-style:none; margin:0; padding:0 0 .4rem; }
.wc-itin-percorso-item{ border-top:1px solid var(--wc-line); }
.wc-itin-percorso-item:first-child{ border-top:none; }
.wc-itin-percorso-row{
	display:flex; align-items:center; gap:.55rem; padding:.55rem 1.1rem;
	text-decoration:none; color:var(--wc-navy); font-size:.85rem;
}
a.wc-itin-percorso-row:hover{ background:var(--wc-surface-2); color:var(--wc-cyan-deep); }
.wc-itin-percorso-num{
	flex:none; width:1.6em; height:1.6em; border-radius:50%; background:var(--wc-surface-2);
	color:var(--wc-navy-soft); font-weight:700; font-size:.78rem; display:flex; align-items:center; justify-content:center;
}
.wc-itin-percorso-label{ flex:1; min-width:0; line-height:1.3; }
.wc-itin-percorso-km{ flex:none; font-size:.78rem; color:var(--wc-text); opacity:.65; white-space:nowrap; }
.wc-itin-percorso-pin{ flex:none; width:16px; height:16px; color:var(--wc-cyan-deep); }
/* Tappa corrente: niente link (è la pagina che si sta già guardando),
   sfondo tenue + testo/numero in navy pieno per distinguerla dal resto
   della lista, oltre al pittogramma a pin sopra. */
.wc-itin-percorso-item-current .wc-itin-percorso-row{ background:var(--wc-surface-2); }
.wc-itin-percorso-item-current .wc-itin-percorso-num{ background:var(--wc-navy); color:#fff; }
.wc-itin-percorso-item-current .wc-itin-percorso-label{ font-weight:700; color:var(--wc-navy); }

/* archive card stats line (mirrors wc-card-location's role for Itinerari).
   Separatore leggero sopra la riga stats, come nel mockup di riferimento
   (dac9fe0e, .card-stats: border-top:1px solid var(--line); margin-top:
   auto) — mancava, segnalato dall'utente confrontando col mockup. Il
   margin-top:auto ha anche un effetto utile in più: .card-body di
   GeoDirectory è già flex-column con flex:1 1 auto (vedi nota più sopra
   in questo file), quindi le stats restano ancorate in fondo alla card
   anche quando titolo/località occupano più o meno spazio da una card
   all'altra nella stessa riga della griglia. */
.wc-card-itin-stats{
	display:flex; align-items:center; gap:.5rem;
	font-size:.82rem; color:var(--wc-text);
	margin-top:auto; padding-top:.4rem; border-top:1px solid var(--wc-line);
}
.wc-card-itin-stats-left{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Più respiro tra km e dislivello (2026-09-13), es. "47,2 km · +672 m" —
   uno spazio letterale intorno al · non è regolabile (l'HTML collassa gli
   spazi consecutivi), da qui un elemento a sé con margine. */
.wc-card-itin-stats-sep{ margin-inline:.4em; color:var(--wc-text); opacity:.45; }
.wc-card-itin-stats .wc-card-diff{ flex:none; margin-left:auto; }
/* Riga "📍 Partenza → Arrivo" (2026-09-13), tra titolo e statistiche —
   stesso trattamento di .wc-card-loc del mockup dac9fe0e. */
.wc-card-itin-loc{
	font-size:.78rem; color:var(--wc-navy-soft); margin-top:.15rem;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wc-card-diff{
	display:inline-block; font-weight:700; font-size:.72rem; color:#fff;
	background:var(--wc-navy-soft); border-radius:100px; padding:1px 8px;
}
.wc-card-diff-T{ background:var(--wc-green); }
.wc-card-diff-E{ background:var(--wc-cyan-deep); }
.wc-card-diff-EE{ background:var(--wc-live); }
/* Scala bici, stesso motivo/stessa rampa di .wc-itin-diff-facile e affini
   più sopra in questo file (hero scheda singola). */
.wc-card-diff-facile{ background:var(--wc-green); }
.wc-card-diff-media{ background:var(--wc-cyan-deep); }
.wc-card-diff-impegnativa{ background:var(--wc-live); }

/* ===== Meteo card sidebar (progetto meteo4webcilento, 2026-09-12) =====
   Sostituisce l'iframe ilmeteo.it. Stesso involucro .wc-side-card di ogni
   altra card sidebar (uniformità), ma con un header proprio in stile
   "widget" (barra navy) invece del testo semplice di .wc-side-card-head —
   scelta sul mockup di riferimento condiviso dall'utente. Solo token
   --wc-* già esistenti in questo file, nessun colore nuovo introdotto. */
.wc-weather-head{
	background:var(--wc-navy); color:#fff;
	display:flex; align-items:center; justify-content:space-between;
	padding:.7rem 1rem; font-weight:700; font-size:.95rem; gap:.5rem;
}
.wc-weather-head-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wc-weather-head-time{ font-weight:400; font-size:.78rem; opacity:.85; flex:none; }
.wc-weather-body{ padding:1rem 1.1rem .85rem; }
.wc-weather-now{ display:flex; align-items:center; gap:.8rem; }
.wc-weather-icon-lg{ font-size:2.1rem; line-height:1; flex:none; }
.wc-weather-now-text{ display:flex; flex-direction:column; }
.wc-weather-temp{ font-size:1.7rem; font-weight:700; color:var(--wc-navy); line-height:1.15; }
.wc-weather-cond{ font-size:.85rem; color:var(--wc-text); }
.wc-weather-stats{
	display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.75rem; padding-top:.65rem;
	border-top:1px solid var(--wc-line); font-size:.8rem; color:var(--wc-text);
}
.wc-weather-stats i{ color:var(--wc-navy-soft); margin-right:.25rem; }
.wc-weather-daily{
	display:flex; background:var(--wc-surface-2); border-top:1px solid var(--wc-line);
}
.wc-weather-day{
	flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem;
	padding:.65rem .3rem; font-size:.78rem; text-align:center;
}
.wc-weather-day-name{ color:var(--wc-navy-soft); font-weight:700; text-transform:uppercase; font-size:.7rem; }
.wc-weather-day i{ font-size:1rem; }
.wc-weather-day-temps{ color:var(--wc-text); }
.wc-weather-day-temps strong{ color:var(--wc-navy); }
.wc-weather-attribution{
	font-size:.68rem; color:var(--wc-navy-soft); opacity:.7; text-align:right; padding:.4rem 1rem .6rem;
}