/* Jill3D site look: tokens (Koepel-afspraak licht/donker) mapped onto Kadence's global palette.
   Light is the default; dark follows the device (auto) or html[data-theme="dark"] set by Daylit's site-branding script. */
:root {
  --bg: #f7f4ee; --surface: #ffffff; --surface-alt: #efe9df; --text: #1f2a30; --muted: #56616a;
  --brand: #2f3e46; --accent: #a54f30; --accent-hover: #873e24; --accent-contrast: #ffffff;
  --highlight: #e8b04b; --border: #e1dacd; --success: #2e7d4f; --warning: #a86b00; --danger: #b3261e; --focus: #1f6feb;
}
html:root {
  --global-palette1: var(--accent); --global-palette2: var(--accent-hover);
  --global-palette3: var(--text); --global-palette4: var(--brand); --global-palette5: var(--muted);
  --global-palette6: #8a949b; --global-palette7: var(--border); --global-palette8: var(--bg); --global-palette9: var(--surface);
  --global-palette-btn: var(--accent-contrast); --global-palette-btn-bg: var(--accent); --global-palette-btn-bg-hover: var(--accent-hover);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    --bg: #12171a; --surface: #1b2226; --surface-alt: #222b30; --text: #eef1f2; --muted: #a7b1b8;
    --brand: #dfe5e8; --accent: #e8b04b; --accent-hover: #f2c56f; --accent-contrast: #14191c;
    --highlight: #e8b04b; --border: #2e383e; --success: #5fbf86; --warning: #e8b04b; --danger: #ff8a80; --focus: #8ab4ff;
    --global-palette6: #6f7a81;
  }
}
html:root[data-theme="dark"] {
  --bg: #12171a; --surface: #1b2226; --surface-alt: #222b30; --text: #eef1f2; --muted: #a7b1b8;
  --brand: #dfe5e8; --accent: #e8b04b; --accent-hover: #f2c56f; --accent-contrast: #14191c;
  --highlight: #e8b04b; --border: #2e383e; --success: #5fbf86; --warning: #e8b04b; --danger: #ff8a80; --focus: #8ab4ff;
  --global-palette6: #6f7a81;
}
body { background: var(--bg); color: var(--text); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.site-footer .site-info, .site-footer { color: var(--muted); }

/* Buttons from our pages */
.j3d-btn .wp-block-button__link { background: var(--accent); color: var(--accent-contrast); border-radius: 999px; padding: .8em 1.5em; font-weight: 600; }
.j3d-btn .wp-block-button__link:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.j3d-btn-ghost .wp-block-button__link { background: transparent; color: var(--text); border: 2px solid var(--border); border-radius: 999px; padding: .7em 1.4em; font-weight: 600; }
.j3d-btn-ghost .wp-block-button__link:hover { border-color: var(--text); }

/* Sections */
.j3d-section { padding: clamp(40px, 6vw, 80px) 0; }
.j3d-section h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.01em; margin-bottom: .3em; }
.j3d-lead { color: var(--muted); font-size: 1.1rem; max-width: 46ch; }
.j3d-eyebrow { color: var(--accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; margin-bottom: .6em; }
.j3d-center { text-align: center; }
.j3d-center .j3d-lead { margin-left: auto; margin-right: auto; }

.j3d-hero { background: var(--surface-alt); padding: clamp(32px, 5vw, 72px) 16px; }
.j3d-hero .wp-block-columns { max-width: 1200px; margin: 0 auto; align-items: center; gap: clamp(24px, 4vw, 56px); }
.j3d-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .35em; color: var(--text); }
.j3d-hero .j3d-lead { font-size: 1.2rem; }
.j3d-hero img { border-radius: 20px; width: 100%; height: auto; box-shadow: 0 20px 50px rgba(0, 0, 0, .12); }
.j3d-trust { display: flex; flex-wrap: wrap; gap: .4em 1.4em; padding: 0; margin: 1.4em 0 0; list-style: none; color: var(--muted); font-size: .95rem; }
.j3d-trust li::before { content: "✓"; color: var(--success); font-weight: 700; margin-right: .4em; }

.j3d-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.j3d-cat { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); text-decoration: none !important; color: var(--text) !important; transition: transform .15s ease, box-shadow .15s ease; }
.j3d-cat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .10); }
.j3d-cat img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.j3d-cat span { display: block; padding: .8em 1em; font-weight: 700; }
.j3d-cat small { display: block; font-weight: 400; color: var(--muted); }

.j3d-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.j3d-step { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.4em; }
.j3d-step::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--highlight); color: #14191c; font-weight: 800; margin-bottom: .8em; }
.j3d-step h3 { margin: 0 0 .3em; font-size: 1.15rem; }
.j3d-step p { margin: 0; color: var(--muted); }

.j3d-band { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.j3d-materials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.j3d-material { border-radius: 18px; padding: 1.4em; background: var(--bg); border: 1px solid var(--border); }
.j3d-material b { display: block; font-size: 1.3rem; margin-bottom: .2em; }
.j3d-material em { display: block; font-style: normal; color: var(--accent); font-weight: 600; font-size: .9rem; margin-bottom: .6em; }
.j3d-material p { margin: 0; color: var(--muted); }

/* WooCommerce product cards */
.woocommerce ul.products li.product, .wp-block-woocommerce-product-template li { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; padding-bottom: 1em; }
.woocommerce ul.products li.product a img { border-radius: 0; margin-bottom: .6em; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1rem; }
.woocommerce ul.products li.product .price { color: var(--text); font-weight: 700; }
.woocommerce ul.products li.product, .woocommerce ul.products li.product .product-details { background: var(--surface) !important; }

@media (max-width: 900px) {
  .j3d-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j3d-steps, .j3d-materials { grid-template-columns: 1fr; }
}

/* Kadence header/footer/drawer follow the tokens (Daylit's starter writes fixed colours in the Customizer) */
#masthead, .site-header-row-container-inner, .site-main-header-wrap .site-header-row-container-inner,
.site-top-header-wrap .site-header-row-container-inner, .site-bottom-header-wrap .site-header-row-container-inner,
#mobile-header .site-header-row-container-inner, .site-footer-row-container-inner, #mobile-drawer .drawer-inner {
  background: var(--surface) !important; color: var(--text);
}
.site-branding .site-title, .site-branding a, .main-navigation .primary-menu-container > ul > li.menu-item > a,
.mobile-navigation ul li > a, .menu-toggle-open, .drawer-toggle { color: var(--text) !important; }
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a { color: var(--accent) !important; }
.site-header { border-bottom: 1px solid var(--border); }
.entry-hero .entry-hero-container-inner, .page-hero-section .entry-hero-container-inner { background: var(--surface-alt) !important; }
.entry-hero h1, .entry-hero .entry-title { color: var(--text) !important; }
.content-bg, .entry.content-bg, body.content-style-unboxed .site { background: var(--bg) !important; }
.single-content, .entry-content { color: var(--text); }
input, select, textarea { background: var(--surface); color: var(--text); border-color: var(--border); }

/* Side gutters on the full-width home page */
.j3d-hero, .j3d-section { padding-left: 16px !important; padding-right: 16px !important; }
@media (max-width: 600px) {
  .woocommerce ul.products, .woocommerce ul.products.columns-4, .woocommerce ul.products.columns-3 {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important;
  }
  .woocommerce ul.products li.product { width: auto !important; margin: 0 !important; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .9rem; }
  .j3d-hero .wp-block-buttons .wp-block-button { width: 100%; }
  .j3d-hero .wp-block-buttons .wp-block-button__link { width: 100%; text-align: center; }
}