/*
Theme Name: Checkpoint Retail Lite
Description: Vollständiges Corporate-Theme im Checkpoint® Look. Apple-inspirierte Navigation, WooCommerce, „Einfach erklärt“-URLs, Sticky Footer, Startseite (Hero + 3 Posts + 3 Produkte), Dark Mode.
Version: 2.1.2
Author: Volker Cesinger & ChatGPT
Text Domain: checkpoint-retail-lite
Requires at least: 6.0
License: GPLv2 or later
*/

:root{
  --cp-navy:#2c3947;
  --cp-blue:#c0cad3;
  --cp-blue-tint:#8d9fb0;
  --cp-grey:#d4d6d8;
  --cp-grey-tint:#ebeded;
  --cp-red:#ae153c;

  --maxw: 72rem;
  --header-width: 82%;
  --menu-gap: 1.15rem;
  --logo-max-h: 40px;
  --btn-radius: 999px;
  --footer-h: 48px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:#fff; color:var(--cp-navy); font-family:"Jano Sans Pro","Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.6; display:flex; flex-direction:column; min-height:100vh; }
.container{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto; }

/* Links */
a{ color:var(--cp-navy); text-underline-offset:.15em; }
a:hover{ color:#0d1823; }

/* Header + Global Nav */
.site-header{ background:var(--cp-navy); color:#fff; position:sticky; top:0; z-index:1000; }
.brand{ display:flex; align-items:center; gap:.75rem; padding:.5rem 0; }
.brand .custom-logo{ max-height:var(--logo-max-h); height:auto; width:auto; }
.site-title{ color:#fff; text-decoration:none; font-weight:700; }
.site-header .container.brand{ max-width: var(--header-width); }
.nav-primary{ background:var(--cp-navy); }
.nav-primary .container{ display:flex; align-items:center; justify-content:center; position:relative; max-width: var(--header-width); }
.nav-toggle{ display:none; background:transparent; border:0; color:#fff; padding:.5rem; border-radius:.4rem; }
.nav-primary .menu{ list-style:none; display:flex; gap:var(--menu-gap); margin:0; padding:.5rem 0; align-items:center; }
.nav-primary .menu > li{ position:relative; }
.nav-primary .menu a{ color:#fff; text-decoration:none; font-weight:600; letter-spacing:.01em; }
.nav-primary .menu a:hover{ text-decoration:underline; text-underline-offset:.15em; }

/* Dropdowns */
.nav-primary .sub-menu{
  position:absolute; left:0; top:calc(100% + .25rem);
  display:none; background:#fff; color:#0a0f14;
  border:1px solid var(--cp-grey); border-radius:.6rem; min-width:220px; padding:.35rem;
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.nav-primary .sub-menu li{ list-style:none; }
.nav-primary .sub-menu a{ color:#0a0f14; display:block; padding:.35rem .5rem; border-radius:.35rem; }
.nav-primary .sub-menu a:hover{ background:var(--cp-grey-tint); }
.nav-primary .menu > li:hover > .sub-menu,
.nav-primary .menu > li:focus-within > .sub-menu{ display:block; }

/* Actions rechts (Lupe / Bag) */
.global-actions{ position:absolute; right:0; display:flex; align-items:center; gap:.35rem; }
.global-actions a, .global-actions button{ color:#fff; background:transparent; border:0; padding:.35rem; border-radius:.35rem; }
.global-actions a:hover, .global-actions button:hover{ background: color-mix(in sRGB, #ffffff 12%, transparent); }
.global-actions .icon{ display:inline-block; width:20px; height:20px; line-height:0; }

/* Search overlay */
#search-overlay{ position:fixed; inset:0; background:rgba(18,24,32,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  display:none; align-items:center; justify-content:center; z-index:2000; }
#search-overlay[aria-hidden="false"]{ display:flex; }
.search-panel{ background:#fff; color:var(--cp-navy); width:min(680px,92vw); border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.25); padding:1rem; }

/* Breadcrumbs */
.breadcrumbs{ color:#6b7784; font-size:.95rem; margin:.5rem 0 1rem; }
.breadcrumbs a{ color:#4e5a66; text-decoration:none; }
.breadcrumbs a:hover{ text-decoration:underline; }

/* Cards */
.card{ background:var(--cp-grey-tint); border:1px solid color-mix(in sRGB, var(--cp-grey) 70%, transparent); border-radius:14px; overflow:hidden; }
.card-header{ padding:1rem; border-bottom:1px solid var(--cp-grey); }
.card-body{ padding:1rem; }

/* Buttons */
.button, .wp-element-button, .wp-block-button__link{ background:var(--cp-red); color:#fff; border:0; border-radius:var(--btn-radius); padding:.65rem 1rem; font-weight:600; }

/* Startseite: Hero + 3 Posts + 3 Produkte */
.tpl-hero-card{ display:grid; grid-template-columns: 1.6fr 1fr; gap:1rem; }
.tpl-hero-media img{ width:100%; height:auto; border-radius:12px; display:block; }
.tpl-hero-title{ margin:.25rem 0 .35rem; font-size:clamp(1.6rem,2.4vw,2.2rem); }
.tpl-meta{ color:#55616e; margin:.25rem 0 .75rem; }
.tpl-grid{ display:grid; gap:1rem; }
.tpl-grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 960px){ .tpl-grid-3{ grid-template-columns: repeat(2, minmax(0,1fr)); } .tpl-hero-card{ grid-template-columns: 1fr; } }
@media (max-width: 640px){ .tpl-grid-3{ grid-template-columns: 1fr; } }
.tpl-card{ background:var(--cp-grey-tint); border:1px solid color-mix(in sRGB, var(--cp-grey) 70%, transparent); border-radius:14px; overflow:hidden; }
.tpl-card-body{ padding:1rem; }
.tpl-card-title{ margin:.25rem 0 .35rem; }
.tpl-thumb img{ width:100%; height:auto; display:block; border-radius:.6rem; }
.tpl-price{ font-weight:600; margin:.25rem 0 .5rem; }

/* Footer (sticky via Customizer) */
.site-footer{ background:var(--cp-grey-tint); color:var(--cp-navy); border-top:1px solid var(--cp-grey); flex:0 0 auto; min-height:var(--footer-h); }
body.has-sticky-footer{ padding-bottom:var(--footer-h); }
.site-footer.is-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:999; }

/* Dark mode basics */
@media (prefers-color-scheme: dark){
  body, h1,h2,h3,h4,h5 { color:#fff; background:var(--cp-navy); }
  a{ color:var(--cp-blue); }
  .card, .tpl-card, .search-panel{ background:#12171d; color:#fff; border-color:#2b3540; }
  .breadcrumbs{ color:#b7c2cd; }
}

/* === v2.1.2 Mega Panels & Footer Fallback === */
.nav-primary .menu > li.mega-menu { position: static; }
.nav-primary .menu > li.mega-menu > .sub-menu{
  display:none; position:absolute; left:0; right:0; top:calc(100% + .25rem);
  background:#fff; color:#0a0f14; border-top:1px solid var(--cp-grey); padding:1.25rem 0;
  box-shadow:0 24px 48px rgba(0,0,0,.18);
}
.nav-primary .menu > li.mega-menu:hover > .sub-menu,
.nav-primary .menu > li.mega-menu:focus-within > .sub-menu{ display:block; }
.nav-primary .menu > li.mega-menu > .sub-menu{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem;
  width:min(100% - 2rem, var(--maxw)); margin:0 auto;
}
.nav-primary .menu > li.mega-menu > .sub-menu > li > a{ font-weight:700; padding:.35rem .35rem; color:#0a0f14; }
.nav-primary .menu > li.mega-menu > .sub-menu > li .sub-menu{ display:block; position:static; padding:0; margin:.25rem 0 0 0; }
.nav-primary .menu > li.mega-menu > .sub-menu > li .sub-menu a{ font-weight:400; padding:.35rem .35rem; border-radius:.4rem; }
.nav-primary .menu > li.mega-menu > .sub-menu > li .sub-menu a:hover{ background: var(--cp-grey-tint); }

.site-footer .menu{ list-style:none; display:flex; gap:1rem; justify-content:center; padding:0; margin:.25rem 0 0; }
.site-footer .menu a{ color:inherit; text-decoration:none; }
.site-footer .menu a:hover{ text-decoration:underline; }

/* Abstand oben/unten zwischen Header/Footer und Content */
.site-main {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Optional: Extra-Luft für spezielle Sektionen */
.tpl-hero,
.tpl-posts,
.tpl-top-products {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}