/* ============================================================
   Klassieke kop
   Geladen door de Black Deals-pagina (default.php, zelfde map), samen met
   klassieke-kop.php; top.php zet dan de class jd-klassiek op <body>. Kop en
   menu krijgen het uitzicht van de huidige site: toplinks als tabjes, menu
   als grijze knoppen in een witte balk, maar op zwart i.p.v. donkerblauw
   (Black Deals). Geladen na blackdeals.css en heeft daarop voorrang.
   ============================================================ */

body.jd-klassiek {
	--kl-achtergrond: #000;
	--kl-pil: #003651;
	--kl-pil-tekst: #accedf;
	--kl-tab: #014261;
	--kl-knop: #383838;
	--kl-knop-rand: #323535;
	--kl-knop-tekst: #cdcdcd;
	--kl-knop-hover: #060606;
	--kl-groen: #8fb806;
	--kl-groen-rand: #87b00b;
	--kl-sub: #e5f4fb;
	--kl-sub-hover: #cdeaf7;
	--kl-lijn: #262626;
}

/* Kop */
body.jd-klassiek .jd-top { background: var(--kl-achtergrond); border-bottom: 0; }
body.jd-klassiek .jd-top .container { padding-top: 0; padding-bottom: 14px; }
body.jd-klassiek .jd-top .jd-logo { width: 230px; margin-top: 14px; filter: none; }
body.jd-klassiek .jd-top-exellent { display: none; }

/* Openingsuren: blauwe pilletjes */
body.jd-klassiek .openingsuren,
body.jd-klassiek .openingsuren-dag,
body.jd-klassiek .openingsuren-notitie { color: #fff; }
body.jd-klassiek .openingsuren-notitie { font-style: normal; }
body.jd-klassiek .openingsuren-slot { background: var(--kl-pil); border-color: var(--kl-pil); color: var(--kl-pil-tekst); border-radius: 6px; }

/* Toplinks als tabjes die aan de bovenrand hangen */
body.jd-klassiek .jd-top-rechts { align-self: flex-start; gap: 14px; }
body.jd-klassiek .jd-toplinks { gap: 15px; }
body.jd-klassiek .jd-toplink { background: var(--kl-tab); border-radius: 0 0 9px 9px; padding: 6px 14px 5px; font-weight: 400; font-size: 13px; }
body.jd-klassiek .jd-toplink-groen { background: var(--jd-blauw); }
body.jd-klassiek .jd-toplink:hover { background: #000; }

/* Telefoonnummer in het wit */
body.jd-klassiek .jd-telnummer { color: #fff; font-weight: 500; font-size: 24px; }
body.jd-klassiek .jd-telnummer SVG path { stroke: #fff; }

/* Menu: grijze knoppen in een witte, afgeronde balk */
/* Zwarte strook onder de witte balk: bij het scrollen schuift de inhoud niet
   rechtstreeks tegen de menuknoppen */
body.jd-klassiek .nav { background: var(--kl-achtergrond); border-bottom: 0; box-shadow: none; padding-bottom: 12px; }
body.jd-klassiek .nav .container { position: relative; padding-top: 4px; padding-bottom: 4px; gap: 4px; }
body.jd-klassiek .nav .container::before {
	content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 28px; right: 28px;
	background: #fff; border-radius: 10px;
}
body.jd-klassiek .jd-nav-home { width: 40px; height: 30px; border-radius: 9px; background: var(--kl-groen); border: 1px solid var(--kl-groen-rand); }
body.jd-klassiek .jd-nav-home:hover { background: var(--kl-knop-hover); border-color: #000; }
body.jd-klassiek .nav UL { gap: 4px; flex-wrap: nowrap; }
body.jd-klassiek .nav UL > LI.childmenu { flex: 1; }
body.jd-klassiek .nav UL > LI > A,
body.jd-klassiek .nav UL > LI > A.jd-nav-cta {
	width: 100%; justify-content: center; padding: 4px 8px; border-radius: 9px;
	background: var(--kl-knop); border: 1px solid var(--kl-knop-rand); color: var(--kl-knop-tekst);
	font-size: 13px; font-weight: 500; line-height: 20px;
}
body.jd-klassiek .nav UL > LI > A:hover,
body.jd-klassiek .nav UL > LI > A.jd-nav-cta:hover,
body.jd-klassiek .nav UL > LI > A.active { background: var(--kl-knop-hover); border-color: #000; color: #fff; }

/* Uitklapmenu's: wit paneel met lichtblauwe knoppen */
body.jd-klassiek .submenu,
body.jd-klassiek .bizmenu { background: #fff; border-color: #fff; box-shadow: 0 18px 40px -16px rgba(0,0,0,.6); }
body.jd-klassiek .submenu A { display: flex; width: 100%; margin-bottom: 2px; background: var(--kl-sub); color: var(--jd-blauw); text-align: center; justify-content: center; }
body.jd-klassiek .submenu A:hover { background: var(--kl-sub-hover); color: var(--jd-blauw); }
body.jd-klassiek .bizmenu-titel { color: var(--jd-tekst-3); }
body.jd-klassiek .bizmenu-item { color: var(--jd-navy); }
body.jd-klassiek .bizmenu-item:hover { background: var(--kl-sub); color: var(--jd-blauw); }
body.jd-klassiek .bizmenu-icoon { background: var(--kl-sub); }

/* Desktop: geen pijltjes, zoals op de huidige site */
@media (min-width: 761px) {
	body.jd-klassiek .nav UL > LI > A SVG.jd-caret { display: none; }
}
@media (min-width: 761px) and (max-width: 1240px) {
	body.jd-klassiek .nav UL > LI > A { font-size: 12.5px; padding: 4px 4px; }
}
/* Smal desktopbeeld (o.a. gsm met "Desktopversie" aan, ±780px): knoppen naar
   hun tekst laten meegroeien i.p.v. gelijke breedte, zodat "Tablets & 2-in-1"
   en "Voor bedrijven" niet over twee regels breken */
@media (min-width: 761px) and (max-width: 960px) {
	body.jd-klassiek .nav UL > LI.childmenu { flex: 1 1 auto; }
	body.jd-klassiek .nav UL > LI > A { white-space: nowrap; font-size: 12px; padding: 4px 6px; }
	body.jd-klassiek .jd-nav-home { width: 34px; flex: 0 0 34px; }
}

/* Mobiel */
@media (max-width: 760px) {
	body.jd-klassiek .jd-top .container { padding: 8px 12px; }
	body.jd-klassiek .jd-top .jd-logo { width: 150px; margin-top: 0; }
	body.jd-klassiek .jd-top-rechts { align-self: center; }
	body.jd-klassiek .jd-nav-burger,
	body.jd-klassiek .jd-top .jd-telnummer { background: var(--kl-pil); border-color: var(--kl-pil); }
	body.jd-klassiek .jd-nav-burger svg path { stroke: #fff; }
	body.jd-klassiek .nav .container::before { display: none; }

	body.jd-klassiek .nav.jd-nav-open UL { background: var(--kl-achtergrond); border-bottom-color: var(--kl-lijn); }
	body.jd-klassiek .nav.jd-nav-open UL > LI { border-bottom-color: var(--kl-lijn); }
	body.jd-klassiek .nav.jd-nav-open UL > LI > A,
	body.jd-klassiek .nav.jd-nav-open UL > LI > A.jd-nav-cta {
		justify-content: space-between; background: none; border: 0; color: #fff; font-size: 15px;
	}
	body.jd-klassiek .nav.jd-nav-open UL > LI > A SVG.jd-caret path { stroke: #fff; }
	body.jd-klassiek .nav.jd-nav-open .submenu,
	body.jd-klassiek .nav.jd-nav-open .bizmenu { background: var(--kl-pil); }
	body.jd-klassiek .nav.jd-nav-open .submenu A,
	body.jd-klassiek .nav.jd-nav-open .bizmenu-item { background: none; color: var(--kl-pil-tekst); justify-content: flex-start; border-bottom-color: var(--kl-lijn); }
	body.jd-klassiek .nav.jd-nav-open .submenu A::before { color: var(--kl-pil-tekst); }
	body.jd-klassiek .nav.jd-nav-open .bizmenu-icoon { background: #fff; }
	body.jd-klassiek .nav.jd-nav-open .jd-nav-mobiel A:not(.jd-nav-webshop) { color: var(--kl-pil-tekst); }
	body.jd-klassiek .nav.jd-nav-open UL > LI > A.jd-nav-webshop { justify-content: center; background: var(--jd-blauw); color: #fff; }
	body.jd-klassiek .nav.jd-nav-open .childmenu + .jd-nav-mobiel { border-top-color: var(--kl-lijn); }
}