/* particulierbewind.nl — basis uit het ontwerp, plus de hover-/focusregels
   die in het ontwerp als style-hover / style-focus op de elementen stonden. */

html, body { margin: 0; padding: 0; background: #F7F7F4; }
body {
  font-family: 'Instrument Sans', sans-serif;
  color: #1B2559;
  -webkit-font-smoothing: antialiased;
}
a { color: #26317E; text-decoration: none; }
a:hover { color: #1B2559; text-decoration: underline; }
::selection { background: rgba(238, 117, 36, 0.22); }
input::placeholder, textarea::placeholder { color: #989DB2; }
summary::-webkit-details-marker { display: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="animation"] { animation: none !important; }
}

/* --- hover- en focusgedrag uit het ontwerp --- */
.pb-nav-link:hover        { color: #26317E !important; text-decoration: none !important; }
.pb-nav-link-actief:hover { text-decoration: none !important; }
.pb-btn:hover             { background: #D9631A !important; text-decoration: none !important; }
.pb-btn-outline:hover     { border-color: #26317E !important; color: #26317E !important; text-decoration: none !important; }
.pb-btn-wit:hover         { background: #E8E9F1 !important; text-decoration: none !important; }
.pb-toggle-uit:hover      { background: #C7C7C1 !important; }
.pb-toggle-aan:hover      { background: #D9631A !important; }
.pb-veld:focus            { border-color: #26317E !important; background: #FFFFFF !important; }
.pb-veld-rond:focus       { border-color: #26317E !important; }

/* Zichtbare toetsenbordfocus — het ontwerp zet outline:none op de velden. */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #26317E;
  outline-offset: 2px;
}

/* --- meeschalen op smallere schermen ---
   Het ontwerp is op 1440px getekend en heeft vaste kolommen. Hieronder klappen
   die om, zodat de pagina op een telefoon leesbaar blijft. De desktopweergave
   verandert hier niet door. */
@media (max-width: 900px) {
  .pb-stack       { grid-template-columns: 1fr !important; gap: 40px !important; }
  .pb-stack-2     { grid-template-columns: repeat(2, 1fr) !important; }
  .pb-nav         { flex-wrap: wrap !important; gap: 16px !important; }
  .pb-nav-menu    { gap: 18px !important; flex-wrap: wrap !important; }
  .pb-omkeren     { order: 0 !important; }
  .pb-titel-xl    { font-size: 38px !important; }
  .pb-titel-l     { font-size: 30px !important; }
  .pb-titel-m     { font-size: 26px !important; }
  .pb-ruim        { padding-left: 20px !important; padding-right: 20px !important; }
  .pb-kaart-ruim  { padding: 28px 24px !important; }
  .pb-cta         { padding: 40px 28px !important; }
  .pb-zijlijn     { border-left: 0 !important; padding-left: 0 !important; }
}
@media (max-width: 600px) {
  .pb-stack-2  { grid-template-columns: 1fr !important; }
  .pb-titel-xl { font-size: 31px !important; }
  .pb-nav-menu { gap: 14px !important; }
}