/* =========================================================
   Defacto Katwijk – menu en footer in de oranje logokleuren
   Wordt automatisch geladen door de plugin "Defacto Update"
   (plugin deactiveren = terug naar origineel)
   ---------------------------------------------------------
   PAS ALLEEN DEZE DRIE KLEUREN AAN als ze niet exact op het logo lijken.
   Tip: met een kleurpipet (bv. de Chrome-extensie "ColorZilla") op het logo
   lees je de exacte hexcodes af.
   ========================================================= */
:root {
  --df-oranje:        #F7941D; /* hoofdkleur oranje uit het logo   */
  --df-oranje-donker: #E0661B; /* donkerder oranje (hover/actief)   */
  --df-oranje-licht:  #FBB040; /* licht oranje (accenten)           */
}

/* ---------- Menu (header) ---------- */
header a,
.site-header a,
#masthead a,
nav a,
.main-navigation a,
.menu a {
  color: var(--df-oranje) !important;
  transition: color .2s ease;
}

header a:hover, header a:focus,
.site-header a:hover, .site-header a:focus,
nav a:hover, nav a:focus,
.main-navigation a:hover, .main-navigation a:focus,
.menu a:hover, .menu a:focus {
  color: var(--df-oranje-donker) !important;
}

/* Actieve menupagina */
.current-menu-item > a,
.current_page_item > a,
.current-menu-ancestor > a {
  color: var(--df-oranje-donker) !important;
}

/* Mobiele menuknop (hamburger) */
.menu-toggle,
button.menu-toggle {
  color: var(--df-oranje) !important;
  border-color: var(--df-oranje) !important;
}

/* ---------- Kruimelpad ("Home > Welkom") ---------- */
[class*="breadcrumb"] a,
[class*="breadcrumb"] li,
[class*="breadcrumb"] span,
nav[aria-label*="readcrumb"] a,
a[href="https://defactokatwijk.nl"],
a[href="http://defactokatwijk.nl"],
.entry-header a,
.page-header a {
  color: var(--df-oranje) !important;
}
[class*="breadcrumb"] a:hover,
nav[aria-label*="readcrumb"] a:hover {
  color: var(--df-oranje-donker) !important;
}

/* ---------- Telefoon- en maillinks (contactpagina en overal) ---------- */
a[href^="tel:"],
a[href^="mailto:"] {
  color: var(--df-oranje) !important;
}
a[href^="tel:"]:hover,
a[href^="mailto:"]:hover {
  color: var(--df-oranje-donker) !important;
}

/* ---------- Rode scheidingslijnen tussen menu-items weg ---------- */
header nav li, header nav a,
.main-navigation li, .main-navigation a,
#site-navigation li, #site-navigation a,
#masthead nav li, #masthead nav a {
  border: 0 !important;
  box-shadow: none !important;
}
header nav li::before, header nav li::after,
header nav li > a::before, header nav li > a::after,
.main-navigation li::before, .main-navigation li::after,
.main-navigation li > a::before, .main-navigation li > a::after {
  border: 0 !important;
  background: none !important;
  content: none !important;
}
/* Ook de actieve pagina geen lijn, alleen de donkerdere kleur */
header nav .current-menu-item > a,
header nav .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  border: 0 !important;
}

/* ---------- Menu netjes uitgelijnd op mobiel en tablet ---------- */
@media (max-width: 900px) {
  header nav ul,
  .main-navigation ul,
  #site-navigation ul,
  #masthead nav ul {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  header nav li,
  .main-navigation li,
  #site-navigation li,
  #masthead nav li {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: left !important;
  }
  header nav li > a,
  .main-navigation li > a,
  #site-navigation li > a,
  #masthead nav li > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }
}

/* ---------- Footer ---------- */
footer a,
.site-footer a,
#colophon a {
  color: var(--df-oranje) !important;
  transition: color .2s ease;
}
footer a:hover, footer a:focus,
.site-footer a:hover, .site-footer a:focus,
#colophon a:hover, #colophon a:focus {
  color: var(--df-oranje-licht) !important;
}

/* ---------- Knoppen in menu en footer ---------- */
header .button, header button:not(.menu-toggle), header .wp-block-button__link,
footer .button, footer button, footer .wp-block-button__link,
.site-footer .button, .site-footer .wp-block-button__link {
  background-color: var(--df-oranje) !important;
  border-color: var(--df-oranje) !important;
  color: #fff !important;
}
header .button:hover, header .wp-block-button__link:hover,
footer .button:hover, footer button:hover, footer .wp-block-button__link:hover,
.site-footer .button:hover, .site-footer .wp-block-button__link:hover {
  background-color: var(--df-oranje-donker) !important;
  border-color: var(--df-oranje-donker) !important;
}

/* "Terug naar boven"-knop */
a[href="#totop"],
#totop, .totop, .back-to-top, .scroll-to-top {
  background-color: var(--df-oranje) !important;
  border-color: var(--df-oranje) !important;
  color: #fff !important;
}
a[href="#totop"]:hover,
#totop:hover, .totop:hover, .back-to-top:hover, .scroll-to-top:hover {
  background-color: var(--df-oranje-donker) !important;
}

/* ---------- Alle scheidingslijnen in (mobiele) menu's weg ----------
   Breed opgezet, omdat het mobiele menu van het thema buiten de header
   kan staan. De menuknop (hamburger) wordt bewust overgeslagen. */
html body nav ul, html body nav li,
html body [class*="menu"] ul, html body [class*="menu"] li,
html body [id*="menu"] ul, html body [id*="menu"] li,
html body [class*="nav"] ul, html body [class*="nav"] li,
html body [id*="nav"] ul, html body [id*="nav"] li,
html body nav a:not([class*="toggle"]),
html body [class*="menu"] a:not([class*="toggle"]),
html body [id*="menu"] a:not([class*="toggle"]),
html body [class*="nav"] a:not([class*="toggle"]),
html body [id*="nav"] a:not([class*="toggle"]) {
  border: 0 !important;
  box-shadow: none !important;
  outline-color: transparent;
  background-image: none !important;
}
html body nav li::before, html body nav li::after,
html body [class*="menu"] li::before, html body [class*="menu"] li::after,
html body [id*="menu"] li::before, html body [id*="menu"] li::after,
html body [class*="nav"] li::before, html body [class*="nav"] li::after,
html body [id*="nav"] li::before, html body [id*="nav"] li::after,
html body nav li > a:not([class*="toggle"])::before, html body nav li > a:not([class*="toggle"])::after,
html body [class*="menu"] li > a:not([class*="toggle"])::before, html body [class*="menu"] li > a:not([class*="toggle"])::after,
html body [id*="menu"] li > a:not([class*="toggle"])::before, html body [id*="menu"] li > a:not([class*="toggle"])::after {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
  content: none !important;
}
html body nav hr,
html body [class*="menu"] hr,
html body [id*="menu"] hr {
  display: none !important;
}

/* =========================================================
   Mobiele weergave – koppen passend maken en netjes uitlijnen
   ========================================================= */
@media (max-width: 782px) {
  /* Paginatitel bovenin (bv. "Inkomstenbelasting", "Salarisadministratie"):
     schaalt mee met de schermbreedte, zodat het langste woord op één regel past. */
  h1, .page-title, .entry-title, .page-header h1, .entry-header h1 {
    font-size: clamp(22px, calc((100vw - 40px) / 12.5), 44px) !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Tussenkoppen in de tekst */
  .entry-content h2, .site-main h2, main h2 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
  .entry-content h3, .site-main h3, main h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.3 !important;
  }

  /* Kruimelpad (Home / pagina) netjes gecentreerd en op één lijn */
  [class*="breadcrumb"] {
    text-align: center !important;
    line-height: 1.5 !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Lopende tekst: prettig leesbaar, niets buiten beeld */
  .entry-content, .site-main, main {
    overflow-wrap: break-word;
  }
  .entry-content p, .site-main p, main p {
    font-size: 16px;
    line-height: 1.65;
  }
  .entry-content img, .site-main img, main img,
  .entry-content iframe, .site-main iframe, main iframe,
  .entry-content table, .wpforms-container {
    max-width: 100% !important;
    height: auto;
  }
  .entry-content table { display: block; overflow-x: auto; }

  /* Contactformulier (WPForms) volle breedte */
  .wpforms-container input,
  .wpforms-container textarea,
  .wpforms-container select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Footer-tekst gecentreerd en leesbaar */
  footer, .site-footer, #colophon {
    text-align: center;
    line-height: 1.7;
  }
}

/* Voorkomt horizontaal scrollen op mobiel */
html, body { overflow-x: clip; } /* "clip" i.p.v. "hidden": laat een vaste/sticky header werken */