/* ─────────────────────────────
   CONTATTI.CSS — Lo Castro contact page
   wp-content/themes/twentytwentyfive-child/styles/contatti.css

   Ports the Next.js frontend's Contatti page into plain CSS on
   [lc_contatti]'s markup, using the same --lc-* tokens as the rest of
   the WooCommerce side.
   ───────────────────────────── */

:root {
  --lc-border-strong: rgba(74, 47, 27, 0.32);
  --lc-track-wide: 0.14em;
  --lc-track-default: 0.06em;
}

.lc-contatti {
  font-family: var(--lc-font-serif);
  color: var(--lc-text);
}

/* WordPress's block-theme "constrained" layout caps width and adds side
   padding around the Post Content block regardless of page template.
   Since this file only ever loads on the Contatti page
   (is_page('contatti') in functions.php), it's safe to fully neutralize
   it here — same fix as the other custom pages. */
.entry-content.is-layout-constrained {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* WordPress's global block-spacing style also injects max-width and
   margin-block-start on every direct child of .is-layout-constrained
   (all via low-specificity :where() selectors, easily overridden
   here) — neutralize both, or the first section gets squeezed width
   and an unwanted gap under the header. */
.entry-content.is-layout-constrained > * {
  max-width: none !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

/* ── Hero ── */
.lc-contatti-hero {
  padding: 34px 20px;
  text-align: center;
  border-bottom: 1px solid var(--lc-border-subtle);
}

.lc-contatti-hero-title {
  margin: 12px 0 0;
  font-family: var(--lc-font-display);
  font-size: 14px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  font-weight: 600;
}

.lc-contatti-hero-desc {
  margin: 14px auto 0;
  max-width: 74ch;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.7;
}

/* ── Toolbar ── */
.lc-contatti-toolbar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-bottom: 1px solid var(--lc-border-subtle);
}

.lc-contatti-toollink {
  color: var(--lc-text);
  text-decoration: none;
  font-family: var(--lc-font-display);
  font-size: 12px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.lc-contatti-toollink:hover {
  opacity: 1;
}

/* ── Shell: two-panel bordered fold ── */
.lc-contatti-shell {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 20px 70px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-top: 1px solid var(--lc-border-strong);
  border-left: 1px solid var(--lc-border-strong);
  box-sizing: border-box;
}

@media (max-width: 980px) {
  .lc-contatti-shell {
    grid-template-columns: 1fr;
  }
}

.lc-contatti-panel {
  border-right: 1px solid var(--lc-border-strong);
  border-bottom: 1px solid var(--lc-border-strong);
  padding: 48px 34px 54px;
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .lc-contatti-panel {
    padding: 28px 18px 32px;
  }
}

.lc-contatti-section-title {
  margin: 0;
  font-family: var(--lc-font-display);
  font-size: 14px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  font-weight: 600;
}

.lc-contatti-sub {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.7;
}

.lc-contatti-divider {
  height: 1px;
  background: var(--lc-border-subtle);
  margin: 22px 0;
}

/* ── Form ── */
.lc-contatti-form {
  margin-top: 22px;
  display: grid;
  gap: 18px;
}

.lc-contatti-field {
  display: grid;
  gap: 8px;
}

.lc-contatti-label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.lc-contatti-label-row svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.lc-contatti-input,
.lc-contatti-textarea {
  width: 100%;
  border: 1px solid var(--lc-border);
  background: transparent;
  color: var(--lc-text);
  padding: 12px;
  outline: none;
  font-size: 13px;
  font-family: var(--lc-font-serif);
  box-sizing: border-box;
}

.lc-contatti-input:focus,
.lc-contatti-textarea:focus {
  border-color: var(--lc-border-strong);
}

.lc-contatti-textarea {
  min-height: 150px;
  line-height: 1.6;
  resize: vertical;
}

.lc-contatti-inline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 560px) {
  .lc-contatti-inline-row {
    grid-template-columns: 1fr;
  }
}

.lc-contatti-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.7;
}

.lc-contatti-primarybtn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--lc-text);
  background: var(--lc-text);
  color: var(--lc-bg);
  padding: 12px 14px;
  font-family: var(--lc-font-display);
  font-size: 12px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  transition: opacity 0.15s ease;
}

.lc-contatti-primarybtn:hover:not(:disabled) {
  opacity: 0.85;
}

.lc-contatti-primarybtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.lc-contatti-primarybtn svg {
  width: 16px;
  height: 16px;
}

.lc-contatti-error {
  margin: 8px 0 0;
  font-size: 12px;
  color: #a33f3f;
  min-height: 1em;
}

/* ── Info panel ── */
.lc-contatti-info-grid {
  margin-top: 18px;
  display: grid;
  gap: 14px;
}

.lc-contatti-info-card {
  border: 1px solid var(--lc-border);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.lc-contatti-info-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.lc-contatti-info-top svg {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.lc-contatti-info-value {
  font-size: 13px;
  line-height: 1.6;
}

.lc-contatti-minilinks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.lc-contatti-minilink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--lc-text);
  text-decoration: none;
  border: 1px solid var(--lc-border);
  padding: 10px 12px;
  font-family: var(--lc-font-display);
  font-size: 12px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  opacity: 0.75;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lc-contatti-minilink:hover {
  opacity: 1;
  border-color: var(--lc-border-strong);
}

.lc-contatti-minilink svg {
  width: 14px;
  height: 14px;
}

/* ── Map ── */
.lc-contatti-map-wrap {
  margin-top: 18px;
  border: 1px solid var(--lc-border);
  height: 360px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .lc-contatti-map-wrap {
    height: 280px;
  }
}

.lc-contatti-map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(100%) contrast(105%);
}

/* ── Success state ── */
.lc-contatti-success-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 34px 20px 70px;
  border-top: 1px solid var(--lc-border-strong);
  border-left: 1px solid var(--lc-border-strong);
  box-sizing: border-box;
}

.lc-contatti-success-card {
  border-right: 1px solid var(--lc-border-strong);
  border-bottom: 1px solid var(--lc-border-strong);
  padding: 64px 34px 70px;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .lc-contatti-success-card {
    padding: 44px 18px 54px;
  }
}

.lc-contatti-success-kicker {
  margin: 0;
  font-family: var(--lc-font-display);
  font-size: 10px;
  letter-spacing: var(--lc-track-wide);
  text-transform: uppercase;
  opacity: 0.7;
}

.lc-contatti-success-title {
  margin: 14px 0 0;
  font-family: var(--lc-font-display);
  font-size: 16px;
  letter-spacing: var(--lc-track-default);
  text-transform: uppercase;
  font-weight: 600;
}

.lc-contatti-success-text {
  margin: 14px auto 0;
  max-width: 66ch;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.7;
}

.lc-contatti-actions {
  margin-top: 22px;
  display: grid;
  gap: 12px;
  justify-items: center;
}

.lc-contatti-actions .lc-contatti-minilinks {
  margin-top: 0;
  justify-content: center;
}