/* ============================================================
   ACTA Shop — Blocksy child theme
   Kleurenpalet: officiële ACTA huisstijl
   ============================================================ */

/* 0 ── ACTA kleurenpalet ─────────────────────────────────── */
:root {
  /* Primair */
  --acta-navy:          #000066;
  --acta-navy-dark:     #00004d;
  --acta-navy-soft:     #e6e6f2;
  --acta-navy-xsoft:    #f4f4fb;

  /* Secundaire ACTA kleuren */
  --acta-lichtblauw:    #00c9ff;
  --acta-lichtblauw-dk: #00a8d6;
  --acta-oranje:        #ff8233;
  --acta-groen:         #00e4bd;
  --acta-roze:          #ff99af;
  --acta-limegroen:     #cce433;
  --acta-lila:          #cc99ff;

  /* Grijs */
  --acta-gray-9:        #787878;
  --acta-gray-3:        #cccccc;
  --acta-black:         #000000;
  --acta-white:         #ffffff;

  /* Functioneel */
  --acta-text:          #000000;
  --acta-text-soft:     #787878;
  --acta-border:        #e0e0e0;
  --acta-border-dark:   #cccccc;
  --acta-bg:            #ffffff;
  --acta-bg-alt:        #f7f7f7;

  --acta-success:       #00e4bd;
  --acta-success-bg:    #e6fdf9;
  --acta-error:         #d0021b;
  --acta-error-bg:      #fff0f2;
  --acta-warn:          #ff8233;
  --acta-warn-bg:       #fff4ee;
  --acta-info:          #00c9ff;
  --acta-info-bg:       #e6f9ff;

  /* Typografie */
  --acta-font:          'Source Sans 3', system-ui, -apple-system, sans-serif;
  --acta-radius:        4px;
  --acta-radius-lg:     8px;
  --acta-shadow:        0 4px 12px rgba(0,0,102,.10);
  --acta-shadow-hover:  0 8px 24px rgba(0,0,102,.18);
  --acta-focus:         0 0 0 3px rgba(0,201,255,.40);
  --acta-t:             160ms ease;

  /* Blocksy palette overschrijven */
  --theme-palette-color-1: #000066;   /* primary: navy */
  --theme-palette-color-2: #00c9ff;   /* secondary: lichtblauw */
  --theme-palette-color-3: #000000;   /* headings */
  --theme-palette-color-4: #000000;   /* body text */
  --theme-palette-color-5: #e0e0e0;   /* borders */
  --theme-palette-color-6: #f7f7f7;   /* lichte achtergrond */
  --theme-palette-color-7: #ffffff;
  --theme-palette-color-8: #ffffff;
}

/* 1 ── Typografie ────────────────────────────────────────── */
body,
.ct-header,
input, select, textarea, button {
  font-family: var(--acta-font) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--acta-black) !important;
  font-family: var(--acta-font) !important;
}

a { color: var(--acta-navy); }
a:hover { color: var(--acta-lichtblauw-dk); }

/* 2 ── Buttons ───────────────────────────────────────────── */
.ct-button,
.button:not(.menu-toggle),
a.button,
input[type="submit"],
.wc-block-components-button,
.wp-block-button__link {
  background: var(--acta-navy) !important;
  color: var(--acta-white) !important;
  border-color: var(--acta-navy) !important;
  border-radius: var(--acta-radius) !important;
  font-family: var(--acta-font) !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  transition: background var(--acta-t), border-color var(--acta-t) !important;
}
.ct-button:hover,
.button:not(.menu-toggle):hover,
a.button:hover,
input[type="submit"]:hover {
  background: var(--acta-lichtblauw-dk) !important;
  border-color: var(--acta-lichtblauw-dk) !important;
  color: var(--acta-white) !important;
}

/* 3 ── Focus-ring ────────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--acta-lichtblauw) !important;
  outline-offset: 2px !important;
}

/* 4 ── Skip link ─────────────────────────────────────────── */
.acta-skip-link {
  position: absolute;
  top: -9999px; left: 16px;
  z-index: 9999;
  padding: 10px 18px;
  background: var(--acta-navy);
  color: var(--acta-white);
  font-weight: 700;
  font-size: .9rem;
  border-radius: 0 0 var(--acta-radius) var(--acta-radius);
  text-decoration: none;
}
.acta-skip-link:focus { top: 0; outline: none; box-shadow: var(--acta-focus); }

/* 5 ── Producten: categorie-badge met ACTA accent-kleuren ── */
/* Elke categorie krijgt een eigen ACTA-kleur */
.acta-product-category { border-radius: 2px; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px;
  display: inline-block; margin-bottom: .4rem; }

.term-scrub-tops        .acta-product-category { background: #e6f9ff; color: #007a9e; }
.term-scrub-broeken     .acta-product-category { background: #e6fdf9; color: #007a60; }
.term-polo-shirts       .acta-product-category { background: #f4f4fb; color: var(--acta-navy); }
.term-lab-coats         .acta-product-category { background: #fff4ee; color: #a0420a; }
.term-t-shirts          .acta-product-category { background: #fef5f7; color: #9e3050; }
.term-outerwear         .acta-product-category { background: #f9f6ff; color: #6b3a9e; }
.term-accessoires       .acta-product-category { background: #f9fce8; color: #5a6b00; }

/* 6 ── Sale-badge: ACTA-oranje ──────────────────────────── */
.onsale,
.woocommerce span.onsale {
  background: var(--acta-oranje) !important;
  color: var(--acta-white) !important;
}

/* 7 ── Prijzen ───────────────────────────────────────────── */
.price, .woocommerce-Price-amount {
  color: var(--acta-navy) !important;
  font-weight: 700 !important;
}
.price del { color: var(--acta-gray-9) !important; opacity: .7; }

/* 8 ── WooCommerce notices ───────────────────────────────── */
.woocommerce-message {
  border-top-color: var(--acta-groen) !important;
  background: var(--acta-success-bg) !important;
}
.woocommerce-info {
  border-top-color: var(--acta-lichtblauw) !important;
  background: var(--acta-info-bg) !important;
}
.woocommerce-error {
  border-top-color: var(--acta-error) !important;
  background: var(--acta-error-bg) !important;
}

/* 9 ── Formulieren ───────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="search"],
input[type="url"], select, textarea {
  font-family: var(--acta-font) !important;
  border-color: var(--acta-border-dark) !important;
  border-radius: var(--acta-radius) !important;
  color: var(--acta-text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--acta-lichtblauw) !important;
  box-shadow: var(--acta-focus) !important;
  outline: none !important;
}

/* 10 ── Disclaimer banner ────────────────────────────────── */
.acta-disclaimer {
  background: var(--acta-warn-bg);
  color: var(--acta-warn);
  border-left: 4px solid var(--acta-oranje);
  padding: .85rem 1.1rem;
  border-radius: 0 var(--acta-radius) var(--acta-radius) 0;
  margin-bottom: 1.5rem;
  font-size: .9rem;
}

/* 11 ── Tabs (productpagina) ────────────────────────────── */
.woocommerce-tabs ul.tabs li.active a {
  color: var(--acta-navy) !important;
  border-bottom-color: var(--acta-lichtblauw) !important;
}

/* 12 ── Sidebar filters ─────────────────────────────────── */
.ct-sidebar .widget-title,
.ct-sidebar .widgettitle {
  font-size: .8rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--acta-gray-9) !important;
  margin-bottom: .75rem !important;
  padding-bottom: .5rem !important;
  border-bottom: 2px solid var(--acta-navy) !important;
}

/* Categorielijst */
.ct-sidebar .product-categories li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
}
.ct-sidebar .product-categories li a {
  color: var(--acta-text) !important;
  font-size: .9rem;
  padding: 3px 0;
  transition: color var(--acta-t);
}
.ct-sidebar .product-categories li a:hover { color: var(--acta-navy) !important; }
.ct-sidebar .product-categories li.current-cat > a { color: var(--acta-navy) !important; font-weight: 700; }
.ct-sidebar .product-categories .count {
  color: var(--acta-gray-9);
  font-size: .8rem;
  white-space: nowrap;
}
/* Subcategorie-lijst op eigen regel, ingesprongen */
.ct-sidebar .product-categories .children {
  flex-basis: 100%;
  width: 100%;
  padding-left: 1rem;
  margin-top: .2rem;
}

/* Prijsfilter slider */
.ct-sidebar .price_slider_wrapper .ui-widget-header { background: var(--acta-navy) !important; }
.ct-sidebar .price_slider_wrapper .ui-slider-handle {
  background: var(--acta-navy) !important;
  border-color: var(--acta-navy) !important;
}
.ct-sidebar .price_slider_amount .button {
  background: var(--acta-navy) !important;
  color: #fff !important;
  border: none !important;
  font-size: .85rem !important;
  padding: 6px 14px !important;
}

/* Actieve filters */
.ct-sidebar .wc-layered-nav-term a { color: var(--acta-navy) !important; font-size: .9rem; }
.ct-sidebar .chosen a { color: var(--acta-error) !important; }

/* Sidebar widget spacing */
.ct-sidebar .widget { margin-bottom: 2rem; }

/* 14 ── Product grid: 3 kolommen op desktop ─────────────── */
@media (min-width: 1000px) {
  [data-products] {
    --shop-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 16 ── Footer ───────────────────────────────────────────── */
.ct-footer {
  background-color: var(--acta-navy) !important;
  color: var(--acta-white) !important;
}
.ct-footer,
.ct-footer a,
.ct-footer .ct-footer-copyright {
  color: var(--acta-white) !important;
}
.ct-footer a:hover {
  color: var(--acta-lichtblauw) !important;
}
/* Footer zoekbalk in header: volle breedte, subtiel */
.ct-header [data-id="search"] .ct-search-form {
  max-width: 420px;
  width: 100%;
}

/* 15 ── Responsive ───────────────────────────────────────── */
@media (max-width: 767px) {
  body { font-size: 16px; }
}

@media print {
  .ct-header, .ct-footer, .acta-skip-link { display: none; }
}