/* Contatti (page 138) and Richiedi informazioni (patterns/contatti.php, patterns/richiedi-informazioni.php) with the
   palladio/modulo block. Loaded only where the pages are, and in the editor.
   Colors: direction A (README, "Regola dei colori"); bordeaux opening as on Calendario, gold icon #e8c46a (brief).
   Focus: palladio-focus.css of the child theme (fields, links); here only the pills, the cards and the submit button,
   whose radio inputs are invisible or whose fill is already the focus color. Margins are reset and spacing is done
   with gaps, so the layout rules of WordPress (`.is-layout-flow > *`) do not apply. */
.palladio-contatti {
  --pct-cream: var(--wp--preset--color--palladio-cream, #faf7f2);
  --pct-stone: var(--wp--preset--color--palladio-stone, #f1e9de);
  --pct-white: var(--wp--preset--color--base, #ffffff);
  --pct-ink: var(--wp--preset--color--palladio-ink-warm, #2a211c);
  --pct-secondary: var(--wp--preset--color--palladio-text-secondary, #5a4a3f);
  --pct-bordeaux: var(--wp--preset--color--palladio-bordeaux, #6b1d23);
  --pct-deep: var(--wp--preset--color--palladio-bordeaux-deep, #4a141b);
  --pct-red: var(--wp--preset--color--palladio-red, #a8342a);
  --pct-line: var(--wp--preset--color--palladio-line, #e7ded2);
  --pct-strong: var(--wp--preset--color--palladio-border-strong, #7d6858);
  --pct-gold-detail: #c99a3a;
  --pct-gold: #e8c46a;
  --pct-heading-font: var(--wp--preset--font-family--palladio-heading, 'Plus Jakarta Sans', system-ui, sans-serif);
  --pct-heading-tracking: clamp(-.03em, calc(-.02em - (1em - 23.9px) * 2.4), -.02em);
  --pct-gap: clamp(16px, 4vw, 32px);
  background: var(--pct-cream);
  color: var(--pct-ink);
  font-family: var(--wp--preset--font-family--manrope, Manrope, sans-serif);
  font-size: 1rem;
  line-height: 1.5;
}
.palladio-contatti, .palladio-contatti *, .palladio-contatti *::before, .palladio-contatti *::after { box-sizing: border-box; }
.palladio-contatti.palladio-contatti :where(h1,h2,h3,p,ol,form,fieldset,.wp-block-group,.palladio-modulo) { margin-block: 0; }
.palladio-contatti :where(h1,h2,h3) { color: inherit; font-family: var(--pct-heading-font); font-weight: 700; line-height: 1.1; letter-spacing: var(--pct-heading-tracking); overflow-wrap: break-word; }
.palladio-contatti .pct-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--pct-gap); }
.palladio-contatti :where(.pct-scheda, .pct-canale, .pct-come, .pct-dopo) a:where(:not(.pct-invia)) { color: var(--pct-red); text-decoration: underline; text-underline-offset: 3px; }
.palladio-contatti .pct-segnaposto { color: var(--pct-secondary); font-style: italic; }

/* Opening: bordeaux bar, gold icon in a rounded box left of the eyebrow and title. */
.palladio-contatti .pct-apertura {
  padding-block: 48px 52px; background: linear-gradient(145deg, var(--pct-bordeaux), var(--pct-deep)); color: var(--pct-cream);
  --palladio-focus-text: var(--pct-gold); --palladio-focus-fill: var(--pct-gold); --palladio-focus-on-fill: var(--pct-deep);
}
.palladio-contatti .pct-testa { display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 24px; row-gap: 10px; align-items: center; }
.palladio-contatti .pct-testa > * { grid-column: 2; }
.palladio-contatti .pct-testa::before, .palladio-contatti .pct-testa::after { content: ""; grid-column: 1; grid-row: 1 / span 2; place-self: center; }
.palladio-contatti .pct-testa::before { width: 60px; height: 60px; border: 1px solid color-mix(in srgb, var(--pct-gold) 40%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--pct-gold) 14%, transparent); }
.palladio-contatti .pct-testa::after { width: 28px; height: 28px; background: var(--pct-gold); mask: var(--pct-icon) center / contain no-repeat; }
.palladio-contatti .pct-eyebrow { align-self: end; color: var(--pct-gold); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.palladio-contatti .pct-apertura h1 { align-self: start; font-size: clamp(1.875rem, 5.2vw, 3.25rem); }
.palladio-contatti.palladio-contatti .pct-intro { max-width: 620px; margin-top: 8px; color: color-mix(in srgb, var(--pct-cream) 88%, transparent); font-size: 1.0625rem; }

/* Main row: form card and channels (Contatti) or form and next steps (Richiedi informazioni). */
.palladio-contatti .pct-principale { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: start; padding-block: 56px; }
.palladio-contatti .pct-principale--richiesta { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
.palladio-contatti .pct-scheda { display: grid; gap: 12px; padding: 32px; border: 1px solid var(--pct-line); border-radius: 20px; background: var(--pct-white); }
.palladio-contatti .pct-scheda--richiamami { border: 1.5px solid var(--pct-bordeaux); }
.palladio-contatti .pct-occhiello { color: var(--pct-bordeaux); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.palladio-contatti .pct-scheda h2, .palladio-contatti .pct-come h2, .palladio-contatti .pct-dopo h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); }

/* Form. */
.palladio-contatti .pct-modulo { display: grid; gap: 22px; margin-top: 8px; }
.palladio-contatti .pct-scheda--richiesta .pct-modulo { gap: 32px; margin-top: 0; }
.palladio-contatti fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.palladio-contatti legend { float: left; width: 100%; padding: 0; }
.palladio-contatti legend + * { clear: both; }
.palladio-contatti .pct-campi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.palladio-contatti .pct-campo { display: grid; gap: 6px; }
.palladio-contatti .pct-campo--messaggio { grid-column: 1 / -1; }
.palladio-contatti .pct-campo label, .palladio-contatti .pct-scelta legend { color: var(--pct-ink); font-size: .875rem; font-weight: 600; }
.palladio-contatti .pct-scelta legend { margin-bottom: 10px; }
.palladio-contatti :is(.pct-campo input, .pct-campo select, .pct-campo textarea) {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--pct-strong); border-radius: 12px;
  background: var(--pct-white); color: var(--pct-ink); font: inherit; font-size: 1rem; line-height: 1.4;
}
.palladio-contatti .pct-campo textarea { min-height: 112px; resize: vertical; }
/* Drop-downs (R-10): WebKit ignores height and padding of a native select (27px in Safari), so the box is
   drawn like the other fields and the arrow is a Lucide chevron in the ink color; the list still opens natively.
   In forced colors the native look comes back, so the arrow never disappears. */
.palladio-contatti .pct-campo select {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a211c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 14px center; background-repeat: no-repeat; background-size: 18px;
}
@media (forced-colors: active) { .palladio-contatti .pct-campo select { -webkit-appearance: auto; appearance: auto; background-image: none; padding-right: 14px; } }
.palladio-contatti :is(.pct-campo input, .pct-campo textarea):user-invalid { border-color: var(--pct-red); }

/* Pills: radio inputs laid over their label, invisible; the label draws the state. */
.palladio-contatti .pct-pillole { display: flex; flex-wrap: wrap; gap: 8px; }
.palladio-contatti :is(.pct-pillola, .pct-carta) { position: relative; cursor: pointer; }
.palladio-contatti :is(.pct-pillola, .pct-carta) input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.palladio-contatti .pct-pillola span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--pct-strong); border-radius: 999px; background: var(--pct-white); color: var(--pct-ink); font-size: .9375rem; font-weight: 600; }
.palladio-contatti .pct-pillola:hover span { border-color: var(--pct-bordeaux); }
.palladio-contatti .pct-pillola input:checked + span { border-color: var(--pct-bordeaux); background: var(--pct-bordeaux); color: var(--pct-cream); }
.palladio-contatti .pct-pillola input:focus-visible + span { border-color: var(--palladio-focus-text); text-decoration: underline 2px; text-underline-offset: 4px; }
.palladio-contatti .pct-pillola input:checked:focus-visible + span { border-color: var(--pct-deep); background: var(--pct-deep); }

/* "Chi sei" cards: title, short text and a radio mark in the corner. */
.palladio-contatti .pct-carte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.palladio-contatti .pct-carta { display: grid; align-content: start; gap: 4px; padding: 16px 44px 16px 16px; border: 1px solid var(--pct-strong); border-radius: 14px; background: var(--pct-white); }
.palladio-contatti .pct-carta::after { content: ""; position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; border: 1.5px solid var(--pct-strong); border-radius: 50%; background: var(--pct-white); }
.palladio-contatti .pct-carta:hover { border-color: var(--pct-bordeaux); }
.palladio-contatti .pct-carta:has(input:checked) { border-color: var(--pct-bordeaux); background: var(--pct-stone); box-shadow: inset 0 0 0 1px var(--pct-bordeaux); }
.palladio-contatti .pct-carta:has(input:checked)::after { border-color: var(--pct-bordeaux); background: radial-gradient(circle, var(--pct-cream) 0 3px, var(--pct-bordeaux) 3.5px); }
.palladio-contatti .pct-carta:has(input:focus-visible) { border-color: var(--palladio-focus-text); box-shadow: inset 0 0 0 1px var(--palladio-focus-text); }
.palladio-contatti .pct-carta:has(input:focus-visible) .pct-carta-titolo { text-decoration: underline 2px; text-underline-offset: 4px; }
.palladio-contatti .pct-carta-titolo { color: var(--pct-ink); font-weight: 700; }
.palladio-contatti .pct-carta-testo { color: var(--pct-secondary); font-size: .875rem; line-height: 1.35; }

/* Numbered blocks of the request form. */
.palladio-contatti .pct-blocco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding-top: 28px; border-top: 1px solid var(--pct-line); }
.palladio-contatti .pct-blocco:first-of-type { padding-top: 0; border-top: 0; }
.palladio-contatti .pct-blocco > legend { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; margin-bottom: 18px; font-family: var(--pct-heading-font); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; }
.palladio-contatti .pct-numero { display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pct-bordeaux); color: var(--pct-cream); font-size: 1rem; letter-spacing: 0; }

.palladio-contatti .pct-consenso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; color: var(--pct-secondary); font-size: 1rem; line-height: 1.45; }
/* The box sits inside its label (03/11/2026): box, gap and text are one tap area; 12px more above and below, given back
   by the margins, so it reaches 44px without moving anything (R-14). */
.palladio-contatti .pct-consenso label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding-block: 12px; margin-block: -12px; cursor: pointer; }
/* The box sits on the centre of the first line at any text size (1lh = the line of the label: font and line height inherited). */
.palladio-contatti .pct-consenso input { width: 20px; height: 20px; margin: calc((1lh - 20px) / 2) 0 0; font: inherit; line-height: inherit; accent-color: var(--pct-bordeaux); cursor: pointer; }
.palladio-contatti .pct-azioni { display: flex; }
.palladio-contatti .pct-invia {
  display: inline-flex; align-items: center; min-height: 50px; padding: 12px 30px; border: 0; border-radius: 999px;
  background: var(--pct-red); color: var(--pct-white); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.palladio-contatti .pct-invia:hover { background: var(--pct-bordeaux); }
.palladio-contatti .pct-invia:focus-visible {
  background: var(--pct-deep) !important; color: var(--pct-cream) !important;
  text-decoration: underline 2px !important; text-underline-offset: 4px !important;
}
/* The form gap (22px, 32px in the request form) keeps the message away from the button. Error variant (pct-esito--errore)
   ready for the real sending: same box, red edge. Ink on stone 13:1. */
.palladio-contatti .pct-esito { padding: 14px 16px; border-left: 4px solid var(--pct-gold-detail); border-radius: 10px; background: var(--pct-stone); color: var(--pct-ink); font-weight: 600; }
.palladio-contatti .pct-esito--errore { border-left-color: var(--pct-red); }
/* Empty live region: out of the form grid (no row, no gap, no beige bar) but still in the accessibility tree, so the
   message is announced when it is filled. A stretched empty grid item with a negative margin used to show as a bar. */
.palladio-contatti .pct-esito:empty {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Sending (Fase 2, includes/moduli-contatto.php): wrong fields with a red edge and their message under them, the error
   summary in the alert, the workshop line of the request form, the honeypot out of view, the button while sending.
   Red text on white 6.6:1. */
.palladio-contatti :is(.pct-campo input, .pct-campo select, .pct-campo textarea)[aria-invalid="true"] { border-color: var(--pct-red); box-shadow: 0 0 0 1px var(--pct-red); }
.palladio-contatti .pct-consenso input[aria-invalid="true"] { outline: 2px solid var(--pct-red); outline-offset: 2px; }
.palladio-contatti .pct-errore { color: var(--pct-red); font-size: .875rem; font-weight: 600; line-height: 1.4; }
.palladio-contatti .pct-consenso .pct-errore { padding-left: 32px; }
.palladio-contatti .pct-esito--errore p { margin: 0; }
.palladio-contatti .pct-esito--errore ul { margin: 8px 0 0; padding-left: 20px; font-weight: 500; }
.palladio-contatti .pct-esito--errore a { color: var(--pct-ink); text-underline-offset: 3px; }
.palladio-contatti .pct-esito:focus { outline: none; }
.palladio-contatti .pct-workshop { margin: 0; padding: 14px 16px; border-left: 4px solid var(--pct-bordeaux); border-radius: 10px; background: var(--pct-stone); color: var(--pct-ink); line-height: 1.45; }
.palladio-contatti .pct-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.palladio-contatti .pct-invia[disabled] { opacity: .7; cursor: progress; }

/* Channels: icon box left, name, value and note. */
.palladio-contatti .pct-canali { display: grid; gap: 16px; }
.palladio-contatti .pct-canale { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; padding: 20px; border: 1px solid var(--pct-line); border-radius: 16px; background: var(--pct-white); }
.palladio-contatti .pct-canale > * { grid-column: 2; }
.palladio-contatti .pct-canale::before, .palladio-contatti .pct-canale::after { content: ""; grid-column: 1; grid-row: 1 / span 3; align-self: start; justify-self: center; }
.palladio-contatti .pct-canale::before { width: 48px; height: 48px; border-radius: 12px; background: var(--pct-stone); }
.palladio-contatti .pct-canale::after { width: 22px; height: 22px; margin-top: 13px; background: var(--pct-bordeaux); mask: var(--pct-icon) center / contain no-repeat; }
.palladio-contatti .pct-canale-nome { color: var(--pct-secondary); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.palladio-contatti .pct-canale-valore { font-family: var(--pct-heading-font); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.palladio-contatti .pct-canale-valore.pct-segnaposto { font-family: inherit; font-size: 1.0625rem; font-weight: 600; }
.palladio-contatti .pct-canale .pct-canale-valore a { color: var(--pct-ink); text-decoration: none; }
/* Phone, WhatsApp and email (R-11): the main actions of the page get a 44px tap height, the text looks the same; the
   negative margin gives back the padding, so the cards keep their height and the tap area reaches into the gaps
   around the line (channel name above, note below: plain text). */
.palladio-contatti .pct-canale .pct-canale-valore a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 8px; margin-block: -8px; }
.palladio-contatti .pct-canale-nota { color: var(--pct-secondary); font-size: 1rem; }

/* How to get here: striped placeholder map and directions. */
.palladio-contatti .pct-arrivo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: center; padding-bottom: 72px; }
.palladio-contatti .pct-mappa { display: grid; place-items: center; min-height: 280px; border: 1px solid var(--pct-line); border-radius: 20px; background: repeating-linear-gradient(45deg, var(--pct-stone) 0 12px, var(--pct-cream) 12px 24px); }
.palladio-contatti .pct-mappa-etichetta { padding: 6px 16px; border-radius: 999px; background: var(--pct-white); color: var(--pct-secondary); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.palladio-contatti .pct-come { display: grid; gap: 12px; }
/* Contatti (138) has no map since 27/10/2026: directions on one column, «Apri in Google Maps» as a button. */
.palladio-contatti .pct-arrivo:not(:has(.pct-mappa)) { grid-template-columns: minmax(0, 1fr); }
.palladio-contatti .pct-maps { display: flex; margin: 4px 0; }
.palladio-contatti .pct-maps .wp-block-button__link {
  display: inline-flex; align-items: center; min-height: 50px; padding: 12px 30px; border-radius: 999px;
  background: var(--pct-red); color: var(--pct-white); font-size: 1rem; font-weight: 700; text-decoration: none;
}
.palladio-contatti .pct-maps .wp-block-button__link:hover { background: var(--pct-bordeaux); color: var(--pct-white); }
.palladio-contatti .pct-rimando { font-weight: 600; }

/* Next steps column. */
.palladio-contatti .pct-dopo { display: grid; gap: 20px; padding: 28px; border-radius: 20px; background: var(--pct-stone); }
.palladio-contatti .pct-passi { display: grid; gap: 18px; padding: 0; list-style: none; counter-reset: pct-passo; }
.palladio-contatti .pct-passi li { position: relative; min-height: 34px; padding-left: 50px; color: var(--pct-secondary); font-size: 1rem; counter-increment: pct-passo; }
.palladio-contatti .pct-passi li::before { content: counter(pct-passo); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pct-bordeaux); color: var(--pct-cream); font-weight: 700; }
.palladio-contatti .pct-passi strong { color: var(--pct-ink); font-size: 1rem; }
.palladio-contatti .pct-dopo .pct-rimando { padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--pct-strong) 35%, transparent); }
@media (min-width: 768px) {
  .palladio-contatti .pct-dopo { position: sticky; top: 96px; }
}

@media (max-width: 767px) {
  .palladio-contatti .pct-testa { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; }
  .palladio-contatti .pct-testa::before { width: 52px; height: 52px; border-radius: 14px; }
  .palladio-contatti .pct-testa::after { width: 24px; height: 24px; }
  /* The intro takes the full width under icon and title. */
  .palladio-contatti .pct-testa > .pct-intro { grid-column: 1 / -1; font-size: 1rem; }
  .palladio-contatti :is(.pct-principale, .pct-principale--richiesta, .pct-arrivo) { grid-template-columns: minmax(0, 1fr); }
  .palladio-contatti .pct-principale { padding-block: 32px; gap: 24px; }
  .palladio-contatti .pct-scheda, .palladio-contatti .pct-dopo { padding: 22px; }
  .palladio-contatti .pct-mappa { min-height: 200px; }
  .palladio-contatti .pct-arrivo { gap: 24px; padding-bottom: 48px; }
}
@media (max-width: 600px) {
  .palladio-contatti :is(.pct-campi, .pct-carte) { grid-template-columns: minmax(0, 1fr); }
}

/* Editor: the server preview of the form is not interactive. */
.editor-styles-wrapper .palladio-modulo { pointer-events: none; }