/**
 * Contact Page Styles
 * YC Ramen & Deuren
 */

/* ── contact-page-simple ─────────────────────────────────────────────────── */
.wp-block-cover.alignfull .wp-block-cover__inner-container { width: 100%; }

.yc-ci { color: var(--ink-inverse, #ffffff); }

.yc-ci-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 0 1.25rem;
  box-shadow: 0 0 0 3px var(--border-inverse-strong, rgba(255,255,255,0.3)), var(--shadow-md);
  flex-shrink: 0;
}

.yc-ci-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yc-ci-label {
  font-size: var(--text-xs, 0.7rem);
  font-weight: 600;
  letter-spacing: var(--tracking-caps, 0.14em);
  text-transform: uppercase;
  color: var(--ink-inverse-subtle, rgba(255,255,255,0.6));
  margin: 0 0 var(--space-xs, .5rem);
}

.yc-ci-name {
  font-family: var(--font-heading, Montserrat, sans-serif);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: var(--leading-tight, 1.2);
  color: var(--ink-inverse, #ffffff);
  margin: 0 0 var(--space-xl, 2rem);
}

.yc-ci-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, .6rem);
}

.yc-ci-list li {
  display: flex;
  gap: var(--space-md, 1rem);
  align-items: baseline;
}

.yc-ci-key {
  font-size: var(--text-sm, .8rem);
  font-weight: 600;
  color: var(--ink-inverse-subtle, rgba(255,255,255,0.6));
  min-width: 6rem;
  flex-shrink: 0;
}

.yc-ci-val {
  font-size: var(--text-base, .92rem);
  color: var(--ink-inverse-muted, rgba(255,255,255,0.85));
}

.yc-ci-vat { font-size: var(--text-xs, .75rem) !important; color: var(--ink-inverse-subtle, rgba(255,255,255,0.6)) !important; }

.yc-ci-link {
  color: var(--ink-inverse-muted, rgba(255,255,255,0.85));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--transition-fast, 150ms);
}
.yc-ci-link:hover { color: var(--ink-inverse, #ffffff); }

.yc-ci-area {
  font-size: var(--text-sm, .8rem);
  color: var(--ink-inverse-subtle, rgba(255,255,255,0.6));
  margin: 0 0 var(--space-lg, 1.25rem);
}

.yc-ci-hr {
  border: none;
  border-top: 1px solid var(--border-inverse, rgba(255,255,255,0.1));
  margin: var(--space-lg, 1.5rem) 0;
}

.yc-ci-note {
  font-size: var(--text-sm, .88rem);
  color: var(--ink-inverse-muted, rgba(255,255,255,0.85));
  margin: 0 0 var(--space-lg, 1.5rem);
  line-height: var(--leading-normal, 1.6);
}

/* Button: use bouw-btn system — this only provides context-specific overrides */
.yc-ci .bouw-btn--primary {
  background: var(--color-accent, #f57c00);
  border-color: var(--color-accent, #f57c00);
}
.yc-ci .bouw-btn--primary:hover {
  background: var(--color-accent-hover, #e65100);
  border-color: var(--color-accent-hover, #e65100);
}

/* Mobiel */
@media (max-width: 781px) {
  .yc-contact-left .wp-block-column,
  .yc-contact-split .wp-block-columns { flex-direction: column !important; }
  .wp-block-columns.alignfull .wp-block-column { flex-basis: 100% !important; }
}

/* ── Split contact layout (bouw/contact-page-split pattern) ──────────────── */

/* Linker kolom: foto via CSS — werkt zonder wp:cover zodat wp:shortcode
   gewoon in de kolom-group kan zitten en correct wordt verwerkt */
.yc-contact-photo-col {
  position: relative;
  background-image: url('/wp-content/themes/YC/assets/images/services/voordeuren.jpg');
  background-size: cover;
  background-position: center top;
  min-height: 480px;
}

/* Donkere overlay voor leesbaarheid */
.yc-contact-photo-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary-dark) 78%, transparent) 0%,
    color-mix(in srgb, var(--color-primary-dark) 65%, transparent) 100%
  );
  z-index: 0;
}

/* Content boven de overlay */
.yc-contact-photo-col > .wp-block-group {
  position: relative;
  z-index: 1;
}

/* Kolommen nooit van elkaar gescheiden */
.yc-contact-split .wp-block-columns {
  gap: 0 !important;
}

/* Mobiel: foto-kolom compacter, form daarna */
@media (max-width: 781px) {
  .yc-contact-split .wp-block-columns {
    flex-direction: column !important;
  }
  .yc-contact-split .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
  .yc-contact-photo-col {
    min-height: 0;
  }
}

/* ── Shortcode output: yc_contact_info ───────────────────────────────────── */

.yc-contact-info {
  color: var(--ink-inverse, #ffffff);
  max-width: 400px;
}

.yc-contact-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-inverse-subtle, rgba(255,255,255,0.6));
  margin: 0 0 0.6rem;
}

.yc-contact-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink-inverse, #ffffff);
  margin: 0 0 1.75rem;
}

.yc-contact-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.yc-contact-details p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-inverse-muted, rgba(255,255,255,0.85));
}

.yc-contact-details strong {
  color: var(--ink-inverse, #ffffff);
}

.yc-contact-link {
  color: var(--ink-inverse-muted, rgba(255,255,255,0.85));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.yc-contact-link:hover {
  color: var(--ink-inverse, #ffffff);
}

.yc-contact-vat {
  font-size: 0.78rem !important;
  color: var(--ink-inverse-subtle, rgba(255,255,255,0.6)) !important;
}

.yc-contact-divider {
  border: none;
  border-top: 1px solid var(--border-inverse, rgba(255,255,255,0.1));
  margin: 1.5rem 0;
}

.yc-contact-personal {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-inverse-muted, rgba(255,255,255,0.85));
  margin: 0 0 0.85rem;
}

.yc-contact-area {
  font-size: 0.82rem;
  color: var(--ink-inverse-subtle, rgba(255,255,255,0.6));
  margin: 0;
}

/* Fix: zorg dat de shortcode-output zelf geen standaard WP-marges heeft */
.yc-contact-photo-col .wp-block-shortcode {
  margin: 0;
}

/* ── Contactinfo in lichte sectie (contact-page-simple) ─────────────────── */
/* Overschrijf witte tekst wanneer shortcode buiten de foto-kolom staat */
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-info {
  color: var(--wp--preset--color--contrast, #1a1a2e);
}
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-kicker {
  color: var(--wp--preset--color--muted, #4a5568);
}
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-title {
  color: var(--wp--preset--color--contrast, #1a1a2e);
}
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-details p,
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-personal,
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-area {
  color: var(--wp--preset--color--muted, #4a5568);
}
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-details strong {
  color: var(--wp--preset--color--contrast, #1a1a2e);
}
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-link {
  color: var(--wp--preset--color--primary, #1565c0);
}
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-vat {
  color: var(--wp--preset--color--muted, #4a5568) !important;
}
.wp-block-group:not(.yc-contact-photo-col) .yc-contact-divider {
  border-top-color: var(--divider-subtle, rgba(60,42,20,0.08));
}

/* ── Form card in white column — strip dubbele card-nesting ─────────────── */
/* De WP-column geeft al de witte kaart (padding 2.5rem, border-radius 8px).
   .bouw-contact-form voegt daar z'n eigen bg/border/shadow/padding bovenop.
   Hier strippen we dat zodat het form gewoon in de kolom leeft. */
.wp-block-column.has-background .bouw-contact-form {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ── Heading in witte column binnen donkere cover — herstel donkere tekst ── */
/* WP FSE's is-dark cover zet alle tekst op de base-kleur (wit).
   De witte inner column heeft een eigen background, maar erft toch de
   witte tekstkleur. Zet de heading terug naar contrast (#111). */
.wp-block-cover.is-dark .wp-block-column.has-background h2.wp-block-heading {
  color: var(--wp--preset--color--contrast, #111827);
}

/* ── FAQ in witte box ────────────────────────────────────────────────────── */
.yc-faq-title { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-secondary, #6b7280); margin:0 0 .75rem; }
.yc-faq { border-bottom:1px solid var(--bouw-border-light, #d1d5db); }
.yc-faq summary { font-size:.9rem; font-weight:600; color:var(--ink-primary, #1a1a2e); padding:.8rem 0; cursor:pointer; list-style:none; display:flex; justify-content:space-between; }
.yc-faq summary::after { content:'+'; color:var(--color-primary, #1565c0); font-size:1.1rem; font-weight:300; }
.yc-faq[open] summary::after { content:'−'; }
.yc-faq p { font-size:.85rem; color:var(--ink-secondary, #4a5568); padding-bottom:.8rem; margin:0; line-height:1.6; }
.yc-faq a { color:var(--color-primary, #1565c0); }

/* ── FAQ accordion (wp:details variant) ─────────────────────────────────── */
.yc-faq-item {
  border-bottom: 1px solid var(--divider-subtle, rgba(60,42,20,0.08));
  margin-bottom: 0 !important;
}
.yc-faq-item + .yc-faq-item {
  margin-top: 0 !important;
}
.yc-faq-item summary {
  font-weight: 600;
  font-size: 0.97rem;
  padding: 1rem 0;
  cursor: pointer;
  color: var(--wp--preset--color--contrast, #1a1a2e);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.yc-faq-item summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--wp--preset--color--primary, #1565c0);
  flex-shrink: 0;
}
.yc-faq-item[open] summary::after {
  content: '−';
}
.yc-faq-item p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--wp--preset--color--muted, #4a5568);
  padding-bottom: 1rem;
  margin: 0;
}

.contact-page-header {
  background: var(--wp--preset--color--primary);
  color: var(--ink-inverse, #ffffff);
  padding: clamp(3rem, 8vw, 5rem) 0;
  text-align: center;
}

.contact-page-header h1 {
  color: var(--ink-inverse, #ffffff);
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

.contact-info-card {
  background: var(--surface-elevated, #ffffff);
  padding: 2rem;
  border-radius: var(--card-radius, 0.75rem);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.contact-info-card svg {
  width: 48px;
  height: 48px;
  color: var(--wp--preset--color--primary);
  margin-bottom: 1rem;
}

.contact-form-section {
  background: var(--wp--preset--color--gray-100);
  padding: clamp(3rem, 8vw, 5rem) 0;
}

.contact-map {
  height: 400px;
  border-radius: var(--card-radius, 0.75rem);
  overflow: hidden;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}