/* CaniCo-palet, sitebreed (2026-10-04).
   Crème en lichtgroen als basis, bosgroen voor accentblokken, donkergroen enkel in tekst, oranje voor knoppen.
   Uitschakelen: deze stylesheet niet meer laden in canico-design.php. */
:root { --bosgroen: #4d6e3f; }

/* Menubalk: altijd crème met donkergroene tekst */
nav, nav.scrolled { background: var(--creme); box-shadow: 0 2px 16px rgba(0,0,0,.06); }
nav .nav-logo, nav .nav-links a:not(.nav-cta) { color: var(--groen-donker) !important; }

/* Openingsblokken lichtgroen met donkergroene tekst */
.hero-left, .pagina-hero { background: var(--groen-licht); }
.hero-h1 { color: var(--groen-donker); }
.hero-sub { color: var(--tekst-grijs); }
.hero-left .btn-ghost, .pagina-hero .btn-ghost { border-color: rgba(0,73,59,.35); color: var(--groen-donker); }
.hero-left .btn-ghost:hover, .pagina-hero .btn-ghost:hover { border-color: var(--groen-donker); }
.hero-left .reviews-link { color: var(--groen-donker); border-bottom-color: rgba(0,73,59,.25); }
.hero-right-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,73,59,.55) 100%); }

/* Accentblokken bosgroen */
.co-bar { background: var(--bosgroen); }
.co-ticker-item { color: rgba(248,247,239,.9); }
.co-ticker-item .co { color: var(--oranje); }
.co-dot { background: rgba(248,247,239,.35); }
.canicode-teaser, .driehoek, .cta-sectie, .blok.donker, .v-vreugde { background: var(--bosgroen); }
.canicode-card { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.v-vreugde-inner { background: transparent; }

/* Home: probleem in het licht, de droom in bosgroen */
body.home #herkenning { background: var(--creme); }
body.home #herkenning .welniet > div { background: #fff; }
.met-cirkels { background: var(--bosgroen); }
.met-cirkels .section-title, .met-cirkels p.scene-slot { color: var(--creme); }
.met-cirkels p.scene { color: rgba(248,247,239,.9); border-left-color: rgba(248,247,239,.45); }
.met-cirkels p { color: rgba(248,247,239,.8); }
.met-cirkels::before { filter: brightness(0) invert(1); opacity: .18; }
.met-cirkels::after { opacity: .35; }

/* CaniCode in het aanbod: dun bosgroen kader i.p.v. oranje rand */
.werken .rij.uitgelicht { border: 1.5px solid var(--bosgroen); border-left-width: 1.5px; background: rgba(77,110,63,.06); }
.rij-label { color: var(--bosgroen); }

/* Leesbaarheid: lopende tekst een maat groter */
.section-intro, .blok p, .rij-tekst p, .canicode-sub, .missie-sub, .over-bio, .cta-sub { font-size: 1.05rem; }
.vinkjes li, .aanbod-items li, .herken-tekst, .review-tekst, .stap p, .faq details p, .dtri-tekst, .v-tekst, .v-vreugde-tekst, .canicode-features li, .canicode-card-text, .over-pijler-tekst, .klanten-lijst li { font-size: 1rem; line-height: 1.7; }
.faq summary { font-size: 1.05rem; }

/* Menu op de gsm */
.nav-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--groen-donker); margin: 5px 0; border-radius: 2px; transition: transform .25s, opacity .25s; }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  nav .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--creme); flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.25rem 1.25rem; box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  nav.menu-open .nav-links { display: flex; }
  nav .nav-links li { border-bottom: 1px solid var(--lijn); }
  nav .nav-links li:last-child { border-bottom: 0; padding-top: 1rem; }
  nav .nav-links a { display: block; padding: .95rem 0; font-size: .85rem; }
  nav .nav-links a.nav-cta { text-align: center; padding: .9rem 1rem; }
  nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Leesbaarheid (2026-10-04): kleine labels groter en donkerder oranje, meer contrast op bosgroen */
:root { --oranje-tekst: #b8500c; }
.section-eyebrow, .hero-eyebrow, .rij-sub, .canicode-label, .klanten-label, .v-label, .v-vreugde-eyebrow, .dtri-sublabel, .canicode-card-label, .canicode-zonder, .rij-label, .review-tags, .label-binnenkort { font-size: .8rem !important; letter-spacing: .1em !important; }
.section-eyebrow, .hero-eyebrow, .rij-sub, .klanten-label, .v-label { color: var(--oranje-tekst); }
.review-hond { font-size: .85rem; opacity: .85; }
.review-naam { font-size: .95rem; }
.btn-primary, .btn-ghost, .btn-ghost-dark, .btn-outline-groen, .nav-cta { font-size: .85rem !important; }
.nav-links a { font-size: .82rem; }
.footer-links a, .footer-tagline, .footer-mail { font-size: .92rem; }
.footer-copy, .footer-legal a { font-size: .8rem; }
.form-noot, .noot { font-size: .88rem !important; }
.formulier label { font-size: .88rem; }

/* Bosgroene blokken: tekst volledig crème, labels licht oranje */
.met-cirkels p.scene, .met-cirkels p, .canicode-teaser .canicode-sub, .canicode-teaser .canicode-features li, .canicode-card-text, .cta-sub, .blok.donker p, .blok.donker .section-intro, .v-vreugde-tekst { color: var(--creme) !important; }
.met-cirkels p.scene { border-left-color: rgba(248,247,239,.6); }
.canicode-teaser .section-eyebrow, .canicode-label, .canicode-zonder, .canicode-card-label, .cta-sectie .section-eyebrow, .blok.donker .section-eyebrow, .v-vreugde-eyebrow, .driehoek .section-eyebrow, .met-cirkels .section-eyebrow { color: #ffc49e !important; }

/* Driehoek: duidelijker op bosgroen */
.driehoek .dtri-tekst { color: var(--creme); }
.driehoek .dtri-sublabel { color: #ffc49e; }
.driehoek .dtri-svg-wrap polygon { stroke: rgba(248,247,239,.75); stroke-width: 2; }
.driehoek .dtri-svg-wrap circle { fill: var(--creme); opacity: 1; }

/* Fix: bosgroen moet winnen van .blok.licht */
.blok.met-cirkels { background: var(--bosgroen); }

/* Menu: op middelgrote schermen al de menuknop tonen, zodat de woorden niet over twee lijnen lopen */
@media (max-width: 1180px) and (min-width: 961px) {
  .nav-toggle { display: block; }
  nav .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--creme); flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 2rem 1.25rem; box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  nav.menu-open .nav-links { display: flex; }
  nav .nav-links li { border-bottom: 1px solid var(--lijn); }
  nav .nav-links li:last-child { border-bottom: 0; padding-top: 1rem; }
  nav .nav-links a { display: block; padding: .95rem 0; }
  nav .nav-links a.nav-cta { text-align: center; padding: .9rem 1rem; }
  nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Keuze 2: labels in bosgroen, oranje enkel nog voor knoppen en de Co in de banner */
:root { --oranje-tekst: var(--bosgroen); }
.section-eyebrow, .hero-eyebrow, .rij-sub, .klanten-label, .v-label, .rij-label { color: var(--bosgroen) !important; }
.klanten-lijst li::before, .vinkjes.kruisjes li::before, .herken-tekst strong, .rust-luik-title em { color: var(--bosgroen); }
.v-nummer { color: rgba(77,110,63,.35); }
.mini-review { border-left-color: var(--bosgroen); }
.label-binnenkort { background: var(--bosgroen); }
.stap-nr { color: var(--bosgroen); }
.faq summary::after { color: var(--bosgroen); }
.melding { border-left-color: var(--bosgroen); }
.melding strong { color: var(--bosgroen); }
.review-sterren { color: var(--oranje); }
.canicode-teaser .section-eyebrow, .canicode-label, .canicode-zonder, .canicode-card-label, .cta-sectie .section-eyebrow, .blok.donker .section-eyebrow, .v-vreugde-eyebrow, .driehoek .section-eyebrow, .met-cirkels .section-eyebrow, .driehoek .dtri-sublabel { color: rgba(248,247,239,.75) !important; }
.v-vreugde-nummer { color: var(--creme); }
.canicode-features li::before { color: var(--creme); }
.blok.donker .stap-nr { color: var(--creme); }

/* Mix van 1 en 2 (2026-10-04):
   kleine tekstlabels in donker oranje (leesbaar), grote cijfers en bolletjes in fel oranje (warmte),
   bosgroen voor rustige details, licht oranje labels op bosgroen. */
.section-eyebrow, .hero-eyebrow, .rij-sub, .klanten-label, .v-label { color: #b8500c !important; }
.rij-label { color: var(--bosgroen) !important; }
.klanten-lijst li::before, .vinkjes.kruisjes li::before, .faq summary::after { color: var(--oranje); }
.stap-nr, .v-vreugde-nummer { color: var(--oranje); }
.v-nummer { color: rgba(255,117,31,.35); }
.mini-review { border-left-color: var(--oranje); }
.label-binnenkort { background: var(--oranje); }
.canicode-teaser .section-eyebrow, .canicode-label, .canicode-zonder, .canicode-card-label, .cta-sectie .section-eyebrow, .blok.donker .section-eyebrow, .v-vreugde-eyebrow, .driehoek .section-eyebrow, .met-cirkels .section-eyebrow, .driehoek .dtri-sublabel { color: #ffc49e !important; }
.canicode-features li::before { color: #ffc49e; }
.blok.donker .stap-nr { color: #ffc49e; }

/* Hoe ik het zie: de hond + jij = jullie samen (vervangt de driehoek) */
.som { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.2rem; align-items: center; margin-top: 3rem; }
.som-kaart { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: 2rem 1.6rem; text-align: center; height: 100%; }
.som-kaart.som-uitkomst { background: var(--creme); border-color: var(--creme); }
.som-icoon { font-size: 2rem; margin-bottom: .8rem; }
.som-titel { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; color: var(--creme); }
.som-sub { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffc49e; margin: .4rem 0 1rem; }
.som-kaart p { font-size: 1rem; line-height: 1.7; color: var(--creme); margin: 0; }
.som-uitkomst .som-titel { color: var(--groen-donker); }
.som-uitkomst .som-sub { color: #b8500c; }
.som-uitkomst p { color: var(--tekst-grijs); }
.som-teken { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 900; color: #ffc49e; text-align: center; }
.som-slot { max-width: 680px; margin: 3rem auto 0; text-align: center; font-family: 'Lora', serif; font-style: italic; font-size: 1.15rem; line-height: 1.7; color: var(--creme); }
@media (max-width: 960px) {
  .som { grid-template-columns: 1fr; gap: .6rem; }
  .som-teken { font-size: 2.2rem; line-height: 1; }
}
.som-driehoek { max-width: 380px; margin: 2rem auto 0; }
.som-driehoek svg { width: 100%; height: auto; display: block; overflow: visible; }
/* De kernvraag */
.kernvraag { max-width: 760px; margin: 3rem auto 0; background: #fff; border-radius: 6px; padding: 2.2rem 2.4rem; text-align: center; box-shadow: 0 8px 24px rgba(0,73,59,.06); }
.blok p.kernvraag-intro { font-size: 1.05rem; color: var(--tekst-grijs); margin: 0 0 .8rem; }
.blok p.kernvraag-vraag { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: var(--groen-donker); margin: 0; line-height: 1.2; }
/* Driehoek klein, rechtsboven naast de titel */
.driehoek-inner { position: relative; }
.som-driehoek { position: absolute; top: 0; right: 0; width: 190px; margin: 0; opacity: .9; }
.driehoek .driehoek-intro { padding-right: 230px; }
@media (max-width: 960px) { .som-driehoek { display: none; } .driehoek .driehoek-intro { padding-right: 0; } }