/*
Theme Name: De Kleindier Specialist
Theme URI: https://www.dekleindierspecialist.nl
Author: Hunebedmedia
Description: Maatwerkthema voor dierenspeciaalzaak "De Kleindier Specialist" (Gea & Hendrikus). Gebouwd naar het Figma-ontwerp met Bootstrap 5 en Advanced Custom Fields. De opmaak leunt zoveel mogelijk op Bootstrap-classes; alle teksten zijn beheerbaar via het CMS.
Version: 1.1
Requires at least: 6.4
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: kleindier-specialist
*/

/* Brand styling on top of Bootstrap: only what Bootstrap doesn't provide
   (brand colors as utilities and --bs-* overrides, button variants, the hero
   and the offer ribbon). Templates use Bootstrap utilities where possible. */

:root {
  /* Brand colors from the Figma design */
  --kds-navy:        #26344f;
  --kds-red:         #d4252a;
  --kds-red-dark:    #b81f23;
  --kds-blue:        #2f6fd6;
  --kds-blue-dark:   #1c5aa8;
  --kds-text:        #44536e;
  --kds-muted:       #7585a0;
  --kds-footer-soft: #aebdd9;
  --kds-footer-light:#dbe4f2;
  --kds-footer-sub:  #8aa6d6;
  --kds-bar-text:    #dce8fb;
  --kds-border:      #cdd9ec;

  /* Override Bootstrap variables with the brand palette */
  --bs-primary:      #2f6fd6;
  --bs-primary-rgb:  47, 111, 214;
  --bs-body-color:   #44536e;
  --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --kds-font-heading: "Archivo", system-ui, sans-serif;
}

body { font-family: var(--bs-body-font-family); color: var(--kds-text); }

h1, h2, h3, h4, h5, h6, .kds-heading { font-family: var(--kds-font-heading); font-weight: 700; }

/* Container at the design width (1180px); Bootstrap stays in charge otherwise. */
.container { max-width: 1180px; }

/* ---- Brand utilities (following the Bootstrap convention) ---- */
.text-kds-red   { color: var(--kds-red) !important; }
.text-kds-navy  { color: var(--kds-navy) !important; }
.text-kds-blue  { color: var(--kds-blue) !important; }
.text-kds-muted { color: var(--kds-muted) !important; }
.bg-kds-navy    { background-color: var(--kds-navy) !important; }
.bg-kds-red     { background-color: var(--kds-red) !important; }
.bg-kds-blue    { background-color: var(--kds-blue) !important; }

/* ---- Button variants via the Bootstrap button variables ---- */
.btn { --bs-btn-border-radius: 8px; --bs-btn-font-weight: 700; }
.btn-kds-red {
  --bs-btn-color: #fff;            --bs-btn-bg: var(--kds-red);        --bs-btn-border-color: var(--kds-red);
  --bs-btn-hover-color: #fff;      --bs-btn-hover-bg: var(--kds-red-dark); --bs-btn-hover-border-color: var(--kds-red-dark);
  --bs-btn-active-color: #fff;     --bs-btn-active-bg: var(--kds-red-dark); --bs-btn-active-border-color: var(--kds-red-dark);
}
.btn-kds-blue {
  --bs-btn-color: #fff;            --bs-btn-bg: var(--kds-blue);       --bs-btn-border-color: var(--kds-blue);
  --bs-btn-hover-color: #fff;      --bs-btn-hover-bg: var(--kds-blue-dark); --bs-btn-hover-border-color: var(--kds-blue-dark);
  --bs-btn-active-color: #fff;     --bs-btn-active-bg: var(--kds-blue-dark); --bs-btn-active-border-color: var(--kds-blue-dark);
}
.btn-kds-outline {
  --bs-btn-color: var(--kds-blue); --bs-btn-bg: #fff;                  --bs-btn-border-color: var(--kds-border);
  --bs-btn-border-width: 2px;
  --bs-btn-hover-color: var(--kds-blue); --bs-btn-hover-bg: #fff;      --bs-btn-hover-border-color: var(--kds-blue);
  --bs-btn-active-color: var(--kds-blue); --bs-btn-active-bg: #fff;    --bs-btn-active-border-color: var(--kds-blue);
}

/* ---- Buttons in rich text (Gutenberg Button block). The owner adds the
   class "primary" (red) or "secondary" (outline) via the block's Advanced ->
   Additional CSS class(es) field. ---- */
.wp-block-button__link {
  border-radius: 8px; font-weight: 700; font-family: var(--bs-body-font-family); padding: .5rem 1.25rem;
}
.wp-block-button.primary .wp-block-button__link {
  background-color: var(--kds-red); color: #fff; border: 1px solid var(--kds-red);
}
.wp-block-button.primary .wp-block-button__link:hover,
.wp-block-button.primary .wp-block-button__link:focus {
  background-color: var(--kds-red-dark); border-color: var(--kds-red-dark); color: #fff;
}
.wp-block-button.secondary .wp-block-button__link {
  background-color: #fff; color: var(--kds-blue); border: 2px solid var(--kds-border);
}
.wp-block-button.secondary .wp-block-button__link:hover,
.wp-block-button.secondary .wp-block-button__link:focus {
  border-color: var(--kds-blue); color: var(--kds-blue);
}

/* ------------------------------------------------------------------ */
/* Top bar + header                                                   */
/* ------------------------------------------------------------------ */
.kds-topbar { background: var(--kds-navy); font-size: .875rem; }
.kds-topbar a { color: #fff; }
.kds-topbar a:hover { color: var(--kds-bar-text); }

.kds-header { box-shadow: 0 2px 5px rgba(21, 41, 79, .06); }
.kds-logo__title { font-family: var(--kds-font-heading); font-weight: 700; color: var(--kds-red); font-size: 1.1875rem; line-height: 1; }
.kds-logo__sub   { color: var(--kds-blue-dark); font-weight: 700; font-size: .5938rem; letter-spacing: .2em; }

/* Navigation links (inside the Bootstrap navbar) */
.kds-header .navbar-nav .nav-link { color: var(--kds-blue); font-weight: 700; font-size: .9375rem; }
.kds-header .navbar-nav .nav-link:hover { color: var(--kds-blue-dark); }
.kds-header .navbar-nav .nav-link.active,
.kds-header .navbar-nav .current-menu-item > .nav-link { color: var(--kds-red); }

/* ------------------------------------------------------------------ */
/* Hero                                                               */
/* ------------------------------------------------------------------ */
.kds-hero { position: relative; min-height: 340px; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
/* Alleen op ruime desktopbreedtes de foto iets omhoog schuiven; daaronder is er
   te weinig verticale marge in de cover-foto en zou dit onderaan een gat geven. */
@media (min-width: 1200px) { .kds-hero { background-position: center -40px; } }
.kds-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(20,30,50,0) 35%, rgba(20,30,50,.55) 100%);
}
.kds-hero > .container { position: relative; z-index: 2; }
.kds-hero__title { font-family: var(--kds-font-heading); font-size: 2.375rem; line-height: 1.4; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
@media (max-width: 767.98px) {
  .kds-hero { min-height: 260px; }
  .kds-hero__title { font-size: 2rem; text-align: center !important; }
  .kds-hero::after { background: rgba(20,30,50,.45); }
}

/* ------------------------------------------------------------------ */
/* USP bar                                                            */
/* ------------------------------------------------------------------ */
.kds-usp { background: var(--kds-red); font-size: .9063rem; }
.kds-usp__check { font-size: 1.125rem; line-height: 1; }

/* ------------------------------------------------------------------ */
/* Offer: navy section, card + diagonal ribbon                        */
/* ------------------------------------------------------------------ */
.kds-offer__label { font-family: var(--kds-font-heading); font-size: .7188rem; letter-spacing: .14em; }
.kds-offer__new-price { font-family: var(--kds-font-heading); font-size: 2.625rem; }
/* Divider before the price: side by side from md up only */
@media (min-width: 768px) {
  .kds-offer__price { border-left: 1px solid #eef2f7; }
}
@media (max-width: 767.98px) {
  .kds-offer__price { border-top: 1px solid #eef2f7; padding-top: 1rem; margin-top: .5rem; }
}
.kds-ribbon { position: absolute; top: 0; right: -8px; width: 118px; height: 118px; overflow: hidden; pointer-events: none; }
.kds-ribbon span {
  position: absolute; display: block; width: 168px; padding: 5px 0;
  background: var(--kds-red); color: #fff; font-family: var(--kds-font-heading); font-weight: 700;
  font-size: .625rem; letter-spacing: .03em; text-align: center; text-transform: uppercase;
  white-space: nowrap; transform: rotate(45deg); top: 26px; right: -25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}

/* Offer slider: horizontal slide + side arrows outside the card (no dots).
   Bootstrap's default .carousel slide handles the transition; each slide keeps
   its own corner ribbon because .carousel-item is position:relative by default.
   Each slide clips its own rounded corners so the ribbon stays inside them:
   the card's own overflow:hidden can't clip across the transform Bootstrap puts
   on the sliding items, but a slide clipping its own (non-transformed) child
   works fine, and needs no GPU-layer hack that would shift under browser zoom. */
.kds-offer-carousel .carousel-item {
  overflow: hidden;
  border-radius: var(--bs-border-radius-lg); /* matches the card's .rounded-3 */
}

/* Arrows: round white buttons next to the card, on the navy background */
.kds-offer-arrow {
  width: 44px; height: 44px; flex: 0 0 auto;
  background: #fff; color: var(--kds-navy);
  border: 1px solid var(--kds-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: color .15s ease, border-color .15s ease;
}
.kds-offer-arrow:hover,
.kds-offer-arrow:focus { color: var(--kds-red); border-color: var(--kds-red); }

/* ------------------------------------------------------------------ */
/* About                                                              */
/* ------------------------------------------------------------------ */
.kds-about__body { color: var(--kds-text); line-height: 1.6; }
/* The heading comes from the page body (Heading block) -> style it in brand. */
.kds-about__body h1,
.kds-about__body h2,
.kds-about__body h3 {
  color: var(--kds-blue);
  font-family: var(--kds-font-heading);
  font-weight: 700;
  font-size: 1.625rem;
  margin: 0 0 1rem;
}
.kds-about__body strong, .kds-about__body b { color: var(--kds-blue); font-weight: 700; }
.kds-about__body > :last-child { margin-bottom: 0; }
.kds-about__img { max-height: 420px; object-fit: cover; }

/* ------------------------------------------------------------------ */
/* Footer                                                             */
/* ------------------------------------------------------------------ */
.kds-footer { background: var(--kds-navy); color: var(--kds-footer-soft); }
.kds-footer__title { font-family: var(--kds-font-heading); color: #fff; font-size: 1.0625rem; }
.kds-footer__sub   { color: var(--kds-footer-sub); font-weight: 700; font-size: .625rem; letter-spacing: .18em; }
.kds-footer__contact, .kds-footer__contact a { color: var(--kds-footer-light); }
.kds-footer__contact a { text-decoration: none; }
.kds-footer__contact a:hover { text-decoration: underline; }
.kds-footer__heading { font-family: var(--kds-font-heading); color: #fff; font-size: .8125rem; letter-spacing: .06em; }
.kds-footer a.kds-footer__link { color: var(--kds-footer-soft); }
.kds-footer a.kds-footer__link:hover { color: #fff; }
.kds-footer__social a {
  color: var(--kds-footer-light); display: inline-flex; width: 34px; height: 34px;
  align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%;
}
.kds-footer__social a:hover { background: rgba(255,255,255,.12); }
.kds-footer__bottom { color: var(--kds-bar-text); font-size: .8438rem; }
.kds-footer__bottom a { color: var(--kds-bar-text); }
.kds-footer__credit { display: inline-flex; align-items: center; gap: .35rem; }
.kds-footer__credit img { height: 30px; width: auto; }
/* Bottom bar: copyright left, credit logo right, both vertically centered. */
.kds-footer__bottombar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; }
@media (max-width: 575.98px) {
  .kds-footer__bottombar { justify-content: center; text-align: center; }
}

/* ------------------------------------------------------------------ */
/* Shared page head (Photos / Assortment / Where are we?)             */
/* ------------------------------------------------------------------ */
.kds-pagehead { background: #eef2f9; }
.kds-pagehead__title { font-family: var(--kds-font-heading); font-size: 2rem; }

/* Photo gallery (native WordPress gallery block on the Foto's page) */
.kds-photos .wp-block-image img { border-radius: 12px; }

/* Market cards (Where are we?) */
.kds-market-card {
  background: #fff; border: 1px solid #eef2f7; border-radius: var(--kds-radius, 12px);
  box-shadow: 0 8px 22px rgba(21, 41, 79, .06);
}
.kds-market-card__day {
  color: var(--kds-red); font-family: var(--kds-font-heading); font-weight: 700;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
}
.kds-market-card__place { color: var(--kds-navy); font-family: var(--kds-font-heading); font-weight: 700; font-size: 1.5rem; }
.kds-market-card__time { color: var(--kds-muted); font-size: .9rem; }

/* Assortment: species tabs + panel */
.kds-species-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e3e9f2; border-radius: 12px; overflow: hidden;
  padding: 0; text-align: center; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kds-species-card:hover { border-color: var(--kds-border); }
.kds-species-card.active { border-color: var(--kds-blue); box-shadow: 0 0 0 2px rgba(47, 111, 214, .18); }
.kds-species-card__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.kds-species-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kds-species-card__empty { display: block; width: 100%; height: 100%; background: #eef2f7; }
.kds-species-card__name { display: block; font-family: var(--kds-font-heading); font-weight: 700; color: var(--kds-navy); padding: .85rem .5rem; font-size: 1.05rem; margin-top: auto; }
.kds-species-panel { border-color: #e3e9f2 !important; }
.kds-species-lead { font-size: .9375rem; }
.kds-species-brands { columns: 2; column-gap: 2rem; }
@media (min-width: 768px) { .kds-species-brands { columns: 3; } }
.kds-species-brands li { color: var(--kds-text); padding: .25rem 0 .25rem 1rem; position: relative; break-inside: avoid; }
.kds-species-brands li::before { content: "·"; position: absolute; left: 0; color: var(--kds-red); font-weight: 700; }
.kds-species-note { font-size: .9375rem; }

/* Assortiment-accordion (mobiel): dier-thumbnail + naam als "tegel" in de kop */
.kds-species-accordion .accordion-button { gap: 1rem; font-size: 1.15rem; padding: .75rem 1rem; }
.kds-species-acc-thumb { width: 72px; height: 72px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.kds-species-acc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------------------------ */
/* Single pages / posts                                               */
/* ------------------------------------------------------------------ */
.kds-page__title { font-family: var(--kds-font-heading); color: var(--kds-blue); }
.kds-content { line-height: 1.7; }
.kds-content a { color: var(--kds-blue); }
.kds-acf-notice { border-left: 4px solid var(--kds-red); }