/*
Theme Name: Mijn LEGO — Speelstijl
Theme URI: https://mieso.nl
Description: Optioneel, speels Astra-childtheme voor Mijn LEGO. Eigen vormgeving, geïnspireerd op het gevoel van een moderne bouwstenenshop.
Author: Mieso
Version: 1.0.1
Template: astra
Text Domain: mijn-lego-speelstijl
*/

:root {
  --play-yellow: #ffcf00;
  --play-yellow-dark: #eab800;
  --play-red: #e21b23;
  --play-blue: #006cb7;
  --play-blue-deep: #003f73;
  --play-ink: #111827;
  --play-paper: #ffffff;
  --play-mist: #f4f6f8;
  --play-line: #dbe1e8;
}

body.mieso-playful-theme { background: var(--play-mist); }
body.mieso-playful-theme .site,
body.mieso-playful-theme #content { background: var(--play-mist); }
body.mieso-playful-theme .entry-content { margin: 0; }

/* De app krijgt de heldere, gelaagde uitstraling van een bouwstenenshop. */
body.mieso-playful-theme .lcm-app {
  --lcm-yellow: var(--play-yellow);
  --lcm-yellow-dark: var(--play-yellow-dark);
  --lcm-blue: var(--play-blue);
  --lcm-blue-dark: var(--play-blue-deep);
  --lcm-text: var(--play-ink);
  --lcm-bg: var(--play-mist);
  --lcm-card: var(--play-paper);
  --lcm-border: var(--play-line);
  background:
    radial-gradient(circle at 3% 0%, rgba(255,207,0,.23) 0 8px, transparent 9px) 0 0 / 44px 44px,
    linear-gradient(#f8fafc, #f2f5f8);
}

body.mieso-playful-theme .lcm-header {
  border: 0;
  border-bottom: 5px solid var(--play-yellow);
  background: #fff;
  box-shadow: 0 2px 0 rgba(17,24,39,.08);
}
body.mieso-playful-theme .lcm-header-inner { max-width: 1360px; padding-block: 12px; }
body.mieso-playful-theme .lcm-brand-logo {
  width: 46px; height: 46px; border-radius: 10px;
  background: var(--play-red); color: #fff;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--play-red), 0 4px 0 #ab1118;
  font-size: 1.2rem; letter-spacing: -.08em;
}
body.mieso-playful-theme .lcm-brand-title { font-size: 1.22rem; font-weight: 900; letter-spacing: -.04em; }
body.mieso-playful-theme .lcm-brand-sub { color: var(--play-blue-deep); font-weight: 700; }
body.mieso-playful-theme .lcm-main-nav { gap: 3px; }
body.mieso-playful-theme .lcm-main-nav button { border-radius: 999px; font-weight: 800; }
body.mieso-playful-theme .lcm-main-nav button:hover,
body.mieso-playful-theme .lcm-main-nav button.is-active { background: #e6f1fa; color: var(--play-blue-deep); }

body.mieso-playful-theme .lcm-btn { border-radius: 9px; font-weight: 850; }
body.mieso-playful-theme .lcm-btn-primary {
  background: var(--play-yellow); color: #101010;
  border: 1px solid #d7aa00; box-shadow: 0 4px 0 #c79900, 0 6px 13px rgba(147,113,0,.2);
}
body.mieso-playful-theme .lcm-btn-primary:hover { background: #ffda35; transform: translateY(-1px); box-shadow: 0 5px 0 #c79900, 0 9px 16px rgba(147,113,0,.2); }
body.mieso-playful-theme .lcm-btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #c79900; }
body.mieso-playful-theme .lcm-btn-outline { border-color: #b9c6d4; color: var(--play-blue-deep); background: #fff; }
body.mieso-playful-theme .lcm-btn-outline:hover { background: #edf6fc; border-color: var(--play-blue); }

body.mieso-playful-theme .lcm-dashboard-intro { max-width: 1220px; padding-top: 34px; }
body.mieso-playful-theme .lcm-eyebrow { color: var(--play-red); font-weight: 900; letter-spacing: .12em; }
body.mieso-playful-theme .lcm-dashboard-intro h2 { font-weight: 950; }
body.mieso-playful-theme .lcm-filters {
  border: 2px solid #c9d9e6;
  box-shadow: 0 5px 0 rgba(0,108,183,.12), 0 14px 28px rgba(17,24,39,.07);
}
body.mieso-playful-theme .lcm-search-input,
body.mieso-playful-theme .lcm-select { border-color: #bfcddb; }
body.mieso-playful-theme .lcm-search-input:focus,
body.mieso-playful-theme .lcm-select:focus { border-color: var(--play-blue); box-shadow: 0 0 0 3px rgba(0,108,183,.16); }
body.mieso-playful-theme .lcm-scope-tabs { background: #eaf2f8; }
body.mieso-playful-theme .lcm-scope-tabs button[aria-pressed="true"] { color: #fff; background: var(--play-blue); box-shadow: 0 2px 0 var(--play-blue-deep); }
body.mieso-playful-theme .lcm-scope-tabs button[aria-pressed="true"] span { color: #fff; }

body.mieso-playful-theme .lcm-stat-card { border: 2px solid #cfdae5; border-radius: 12px; box-shadow: 0 4px 0 rgba(0,63,115,.12); }
body.mieso-playful-theme .lcm-stat-icon { border-radius: 9px; }
body.mieso-playful-theme .lcm-grid { gap: 20px; }
body.mieso-playful-theme .lcm-card {
  overflow: hidden; border: 2px solid #dbe3ec; border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0,63,115,.1), 0 11px 20px rgba(17,24,39,.07);
}
body.mieso-playful-theme .lcm-card:hover { border-color: #7cb9df; box-shadow: 0 6px 0 rgba(0,108,183,.2), 0 18px 26px rgba(17,24,39,.12); }
body.mieso-playful-theme .lcm-card-img { background: linear-gradient(135deg, #fff 0 65%, #f2f7fb 65%); border-bottom: 2px solid #edf1f5; }
body.mieso-playful-theme .lcm-card-status { top: 10px; left: 10px; }
body.mieso-playful-theme .lcm-badge { border-radius: 7px; font-weight: 850; }
body.mieso-playful-theme .lcm-card-menu-btn { border: 1px solid #d3dce7; background: #fff !important; box-shadow: 0 2px 0 #d3dce7; }
body.mieso-playful-theme .lcm-card-title { font-weight: 900; }
body.mieso-playful-theme .lcm-card-theme { color: var(--play-blue-deep); font-weight: 700; }

body.mieso-playful-theme .lcm-modal { border: 2px solid #d5e0ea; border-radius: 18px; box-shadow: 0 12px 0 rgba(0,63,115,.12), 0 30px 70px rgba(17,24,39,.26); }
body.mieso-playful-theme .lcm-modal-header { border-bottom: 4px solid var(--play-yellow); }
body.mieso-playful-theme .lcm-quick-add { border-color: #b9d4eb; background: linear-gradient(135deg, #f1f8fd, #fff9d8); }
body.mieso-playful-theme .lcm-quick-add-step { background: var(--play-red); box-shadow: 0 2px 0 #a81218; }
body.mieso-playful-theme .lcm-set-view { background: #f3f6f9; }
body.mieso-playful-theme .lcm-set-view-top { border-bottom: 5px solid var(--play-yellow); }
body.mieso-playful-theme .lcm-set-media { border: 2px solid #d6e1ea; box-shadow: 0 6px 0 rgba(0,63,115,.12), 0 20px 42px rgba(17,24,39,.08); }
body.mieso-playful-theme .lcm-detail-kpis > div { border: 2px solid #d6e1ea; border-radius: 12px; }
body.mieso-playful-theme .lcm-set-back { border-width: 2px; color: var(--play-blue-deep); }

@media (max-width: 900px) {
  body.mieso-playful-theme .lcm-header { border-bottom-width: 4px; }
}
@media (max-width: 640px) {
  body.mieso-playful-theme .lcm-brand-logo { width: 38px; height: 38px; border-radius: 8px; }
  body.mieso-playful-theme .lcm-dashboard-intro { padding-top: 24px; }
}

/* De appskin is leidend. Hierdoor blijft dit childtheme bruikbaar, maar kan
   een gebruiker binnen Mijn LEGO altijd terug naar de rustige moderne skin. */
body.mieso-playful-theme .lcm-app.lcm-skin-modern {
  --lcm-yellow: #f5c400; --lcm-yellow-dark: #d4a707; --lcm-blue: #0195fe; --lcm-blue-dark: #0077cc;
  --lcm-bg: #f3f4f6; --lcm-card: #fff; --lcm-border: #e5e7eb; background: #f3f4f6;
}
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-header { border-bottom: 1px solid #e5e7eb; box-shadow: none; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-header-inner { max-width: 1220px; padding-block: 14px; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-brand-logo { width: 42px; height: 42px; border: 0; border-radius: 12px; background: #f5c400; color: #111; box-shadow: 0 2px 8px rgba(245,196,0,.35); font-size: 1.1rem; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-brand-title { font-weight: 800; letter-spacing: -.5px; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-brand-sub { color: #6b7280; font-weight: 400; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-main-nav button { border-radius: 9px; font-weight: 700; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-main-nav button:hover, body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-main-nav button.is-active { background: #f4f5f7; color: #151d2d; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-btn { border-radius: 8px; font-weight: 600; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-btn-primary { border: 0; background: #f5c400; box-shadow: 0 2px 8px rgba(245,196,0,.3); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-btn-primary:hover { background: #d4a707; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245,196,0,.4); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-btn-primary:active { transform: none; box-shadow: 0 2px 8px rgba(245,196,0,.3); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-btn-outline { border-color: #e5e7eb; color: #111827; background: #fff; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-eyebrow { color: #6b7280; font-weight: 700; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-filters { border: 1px solid #e5e7eb; box-shadow: 0 8px 30px rgba(17,24,39,.05); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-scope-tabs { background: #eef2f6; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-scope-tabs button[aria-pressed="true"] { background: #fff; color: #111827; box-shadow: 0 1px 4px rgba(20,32,51,.12); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-scope-tabs button[aria-pressed="true"] span { color: #0077cc; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-stat-card { border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-card { border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-card:hover { border-color: #e5e7eb; box-shadow: 0 8px 32px rgba(0,0,0,.13); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-card-img { background: #fff; border-bottom: 0; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-badge { border-radius: 999px; font-weight: 700; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-card-menu-btn { border: 0; background: none !important; box-shadow: none; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-card-title { font-weight: 800; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-card-theme { color: #6b7280; font-weight: 400; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-modal { border: 0; border-radius: 16px; box-shadow: 0 24px 64px rgba(0,0,0,.22); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-modal-header { border-bottom: 1px solid #e5e7eb; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-quick-add { border-color: #dfe9f5; background: linear-gradient(135deg, #f4f9ff, #fffdf1); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-quick-add-step { background: #172033; box-shadow: none; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-set-view { background: #f5f6f8; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-set-view-top { border-bottom: 1px solid #e4e7ec; }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-set-media { border: 1px solid #e3e6eb; box-shadow: 0 18px 50px rgba(17,24,39,.07); }
body.mieso-playful-theme .lcm-app.lcm-skin-modern .lcm-detail-kpis > div { border: 1px solid #e3e6eb; border-radius: 13px; }