/*
 * Patty Bakker — Contact
 * Laad dit bestand na pb-common.css.
 *
 * OPNIEUW GESCHREVEN. De pagina is in Bricks herbouwd met een nieuw
 * klassenschema (`pb-ct-…`); het oude bestand sprak nog de vorige opzet aan en
 * dekte nul van de 33 klassen. Vandaar dat er "geen css" leek te staan.
 *
 * De opmaak volgt bewust die van "Plan een kennismaking"
 * (pb-plan-kennismaking.css): dezelfde randmarge, dezelfde koptrappen,
 * dezelfde formulierkaart in #f6eee7 met ronding 26, en contactgegevens als
 * lijst met scheidingslijnen in plaats van losse witte kaartjes. Zo blijven de
 * twee "neem contact op"-pagina's van elkaars familie.
 *
 * Opbouw:
 *   section.pb-ct-contact        → gegevens + formulier naast elkaar
 *   section.pb-ct-guide-section  → "waar ben je naar op zoek"
 *   section.pb-ct-faq-section    → veelgestelde vragen (<details>)
 */

/* ==========================================================================
   Basis en secties
   ========================================================================== */

.pb-main .pb-ct-contact,
.pb-main .pb-ct-guide-section,
.pb-main .pb-ct-faq-section{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--pb-edge);
  padding-right:var(--pb-edge);
  color:var(--brown, #75543f);
}

.pb-main .pb-ct-contact{
  background:var(--paper, #fffaf5);
  padding-top:clamp(54px, 7vw, 88px);
  padding-bottom:clamp(64px, 8vw, 104px);
}

.pb-main .pb-ct-guide-section{
  background:#f6eee7;
  padding-top:clamp(56px, 7vw, 82px);
  padding-bottom:clamp(64px, 8vw, 96px);
}

.pb-main .pb-ct-faq-section{
  background:var(--paper, #fffaf5);
  padding-top:clamp(58px, 7vw, 84px);
  padding-bottom:clamp(66px, 8vw, 100px);
}

.pb-main .pb-ct-section-wrap{
  display:block;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

.pb-main .pb-ct-eyebrow{
  display:block;
  margin:0 0 15px;
  color:var(--accent, #cf7b53);
  font-family:Manrope, system-ui, sans-serif;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.pb-main .pb-ct-contact h1,
.pb-main .pb-ct-guide-section h2,
.pb-main .pb-ct-faq-section h2{
  margin:0;
  color:var(--brown, #75543f);
  font-family:Fraunces, Georgia, serif;
  font-weight:700;
  letter-spacing:-.035em;
}

.pb-main .pb-ct-contact h1{
  max-width:650px;
  line-height:.98;
}

.pb-main .pb-ct-guide-section h2,
.pb-main .pb-ct-faq-section h2{
  font-size:clamp(34px, 4vw, 50px);
  line-height:1.03;
}

/* ==========================================================================
   Gegevens en formulier
   ========================================================================== */

.pb-main .pb-ct-contact-grid{
  display:grid;
  /* Het formulier krijgt de bredere kolom — daar wordt gewerkt. */
  grid-template-columns:minmax(330px, .9fr) minmax(460px, 1.1fr);
  gap:clamp(44px, 7vw, 96px);
  align-items:start;
  width:min(1140px, 100%);
  max-width:1140px;
  margin:0 auto;
}

.pb-main .pb-ct-contact-info{display:block;width:100%;padding-top:12px}

.pb-main .pb-ct-intro{
  max-width:590px;
  margin:20px 0 0;
  color:var(--muted, #88786e);
  font-size:16px;
  line-height:1.75;
}

/* ---- Contactgegevens als lijst met scheidingslijnen ---- */

.pb-main .pb-ct-contact-list{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  width:100%;
  margin-top:30px;
  border-top:1px solid var(--line, #dfcfc1);
}

.pb-main .pb-ct-contact-item{
  display:block;
  width:100%;
  border-bottom:1px solid var(--line, #dfcfc1);
}

.pb-main .pb-ct-contact-item a,
.pb-main .pb-ct-contact-item p{
  display:block;
  margin:0;
  padding:17px 0;
  color:var(--brown, #75543f);
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  text-decoration:none;
  /* Lange e-mailadressen mogen de kolom niet oprekken. */
  overflow-wrap:anywhere;
  transition:color .15s ease;
}
.pb-main .pb-ct-contact-item p{font-weight:500;color:var(--muted, #88786e)}
.pb-main .pb-ct-contact-item a:hover{color:var(--accent, #cf7b53)}

/* De eerste regel is de gewenste route (WhatsApp). Geen blok eromheen — in
   deze lijstopmaak zou dat uit de toon vallen — maar wel een accentstreep. */
.pb-main .pb-ct-contact-item.featured a{
  color:var(--accent, #cf7b53);
  font-weight:850;
  box-shadow:inset 3px 0 0 var(--accent, #cf7b53);
  padding-left:14px;
}

.pb-main .pb-ct-note{
  margin:20px 0 0;
  color:var(--muted, #88786e);
  font-size:13px;
  line-height:1.7;
}

/* ---- Formulierkaart ---- */

.pb-main .pb-ct-form-card{
  display:block;
  width:100%;
  padding:clamp(28px, 4vw, 44px);
  border:1px solid var(--line, #dfcfc1);
  border-radius:16px;
  background:#f6eee7;
}

.pb-main .pb-ct-form-card h2{
  margin:0;
  color:var(--brown, #75543f);
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(34px, 3.7vw, 47px);
  font-weight:700;
  line-height:1.03;
  letter-spacing:-.035em;
}

.pb-main .pb-ct-form{display:block;width:100%;margin-top:25px}
.pb-main .pb-ct-form .form-group{display:block;width:100%;margin:0 0 14px}

.pb-main .pb-ct-form label{
  display:block;
  margin:0 0 7px;
  color:var(--brown, #75543f);
  font-size:13px;
  font-weight:800;
}

.pb-main .pb-ct-form input,
.pb-main .pb-ct-form select,
.pb-main .pb-ct-form textarea{
  display:block;
  width:100%;
  box-sizing:border-box;
  min-height:49px;
  padding:12px 14px;
  border:1px solid var(--line, #dfcfc1);
  border-radius:var(--btn-radius, 10px);
  background:var(--paper, #fffaf5);
  color:var(--brown, #75543f);
  font:500 14px/1.5 Manrope, system-ui, sans-serif;
  box-shadow:none;
}

.pb-main .pb-ct-form textarea{min-height:126px;resize:vertical}

.pb-main .pb-ct-form input::placeholder,
.pb-main .pb-ct-form textarea::placeholder{color:#a9968a}

.pb-main .pb-ct-form input:focus,
.pb-main .pb-ct-form select:focus,
.pb-main .pb-ct-form textarea:focus{
  outline:2px solid rgba(207, 123, 83, .2);
  border-color:var(--accent, #cf7b53);
}

/* Eigen pijltje: het systeempijltje verschilt per browser. */
.pb-main .pb-ct-form select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2375543f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:16px;
}

.pb-main .pb-ct-form .submit-button-wrapper{margin-bottom:0}

.pb-main .pb-ct-form button[type="submit"],
.pb-main .pb-ct-form .bricks-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  padding:0 20px;
  border:0;
  border-radius:var(--btn-radius, 10px);
  background:var(--accent, #cf7b53);
  color:#fff;
  font-family:Manrope, system-ui, sans-serif;
  font-size:14px;
  font-weight:850;
  line-height:1;
  cursor:pointer;
}

.pb-main .pb-ct-privacy{
  margin:12px 0 0;
  color:var(--muted, #88786e);
  font-size:12px;
  line-height:1.5;
}

/* ==========================================================================
   Waar ben je naar op zoek
   ========================================================================== */

.pb-main .pb-ct-guide-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:14px;
  margin-top:30px;
  align-items:start;
}

.pb-main .pb-ct-puppy-card{
  display:flex;
  flex-direction:column;
  padding:clamp(24px, 3vw, 34px);
  border:1px solid var(--line, #dfcfc1);
  border-radius:16px;
  background:var(--brown, #75543f);
  color:#fff;
}

.pb-main .pb-ct-card-label{
  display:inline-block;
  align-self:flex-start;
  padding:5px 11px;
  border-radius:999px;
  background:var(--accent, #cf7b53);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.pb-main .pb-ct-puppy-card h3{
  margin:24px 0 0;
  color:#fff;
  font-family:Fraunces, Georgia, serif;
  font-size:clamp(24px, 2.6vw, 32px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
}

.pb-main .pb-ct-puppy-card p{
  margin:10px 0 0;
  color:rgba(255, 255, 255, .8);
  font-size:14px;
  line-height:1.65;
}

.pb-main .pb-ct-card-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}

.pb-main .pb-ct-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 20px;
  border-radius:var(--btn-radius, 10px);
  font-family:Manrope, system-ui, sans-serif;
  font-size:13px;
  font-weight:850;
  text-decoration:none;
}
.pb-main .pb-ct-btn.primary{background:var(--accent, #cf7b53);color:#fff}
/* Tweede knop rustiger; anders vragen ze allebei even hard om aandacht. */
.pb-main .pb-ct-btn.ghost{
  background:transparent;
  color:#fff;
  border:1px solid rgba(255, 255, 255, .35);
}
.pb-main .pb-ct-btn.ghost:hover{border-color:#fff}

.pb-main .pb-ct-offers{display:grid;gap:12px}

.pb-main .pb-ct-offer{
  display:grid;
  gap:3px;
  padding:20px;
  border:1px solid var(--line, #dfcfc1);
  border-radius:16px;
  background:var(--paper, #fffaf5);
  text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.pb-main .pb-ct-offer small{
  color:var(--accent, #cf7b53);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.pb-main .pb-ct-offer strong{
  color:var(--brown, #75543f);
  font-family:Fraunces, Georgia, serif;
  font-size:22px;
  font-weight:700;
  line-height:1.1;
}
.pb-main .pb-ct-offer span{
  color:var(--muted, #88786e);
  font-size:13px;
  line-height:1.65;
}

@media (hover:hover){
  .pb-main .pb-ct-offer:hover{border-color:var(--accent, #cf7b53);transform:translateY(-2px)}
}

/* ==========================================================================
   Veelgestelde vragen
   <details>/<summary>: geen JavaScript nodig, werkt ook als een script faalt.
   ========================================================================== */

/* Kolommen en tussenruimte staan in pb-common.css: alle FAQ-lijsten op de
   site staan onder elkaar. Hier alleen de ruimte boven de lijst. */
.pb-main .pb-ct-faq{
  margin-top:28px;
}

/* Plusje dat naar een kruisje draait bij openen. */
/* ==========================================================================
   Schermbreedtes
   ========================================================================== */

@media (max-width:1024px){
  .pb-main .pb-ct-contact-grid{grid-template-columns:1fr;gap:40px}
  .pb-main .pb-ct-guide-grid{grid-template-columns:1fr}
}

@media (max-width:767px){
  .pb-main .pb-ct-guide-section h2,
  .pb-main .pb-ct-faq-section h2{font-size:clamp(28px, 8vw, 34px)}
  .pb-main .pb-ct-form-card h2{font-size:clamp(28px, 8vw, 34px)}
  /* Twee knoppen naast elkaar zijn op een telefoon allebei te smal. */
  .pb-main .pb-ct-card-buttons{flex-direction:column}
  .pb-main .pb-ct-btn{width:100%}

  /* 16px voorkomt dat iOS inzoomt zodra je een veld aantikt. */
  .pb-main .pb-ct-form input,
  .pb-main .pb-ct-form select,
  .pb-main .pb-ct-form textarea{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .pb-main .pb-ct-offer,
  }