/*
Theme Name: Mojo Kid 2026
Template: CirclesThemeRes
Description: mojokid.com redesign (Oct 2026): hover logo with the original letter sounds, circle grid with category filter, separate Learn section, random light/dark test with a switch. Child of the old Circles theme, whose single/page templates it reuses; it does NOT load the parent stylesheet.
Version: 1.0
*/

/* Tokens. Light is the default; html[data-theme=dark] is set before paint by the script in header.php. */
:root { --bg:#FAF8F4; --ink:#1C1B1A; --muted:#6B6762; --line:#E7E2DA; --card:#FFFFFF; --orange:#FF6501; --orange-soft:#FFE7D6;
  --header:rgba(250,248,244,.92); --chip:#EFEBE4; --chip-ink:#4A4743; --on-ink:#fff; --img:#ddd; --musify:#1C1B1A;
  --two:linear-gradient(135deg,#FFE7D6,#FFD2B3); color-scheme:light; }
[data-theme=dark] { --bg:#0F0F11; --ink:#F3F1EC; --muted:#A3A09A; --line:#2A2A2E; --card:#18181B; --orange-soft:rgba(255,101,1,.14);
  --header:rgba(15,15,17,.88); --chip:#18181B; --chip-ink:#A3A09A; --on-ink:#111; --img:#222; --musify:#0A0A0B;
  --two:linear-gradient(140deg,#2B1708,#121214); color-scheme:dark; }
[data-theme=dark] .on-light, :root:not([data-theme=dark]) .on-dark { display:none !important; }

*, *::before, *::after { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:inherit; }
img { max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--orange); outline-offset:2px; }
.wrap { max-width:1180px; margin:0 auto; padding:0 24px; }
.mk-header a, .mk-footer a, .mk-home a, .mk-archive a.card, .mk-archive a.talk, .chips a { text-decoration:none; }

/* Header */
.mk-header { position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:50; background:var(--header); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.mk-header .bar { display:flex; align-items:center; gap:28px; height:72px; }
.brand { flex:none; }
.brand img { height:34px; width:auto; max-width:none; display:block; }
.mk-nav { display:flex; gap:22px; font-weight:500; font-size:15px; margin-left:auto; }
.mk-nav a { color:var(--muted); } .mk-nav a:hover, .mk-nav a.on { color:var(--ink); }
.cta { background:var(--orange); color:#fff; font-weight:600; font-size:14px; padding:10px 18px; border-radius:999px; white-space:nowrap; }
.theme { width:36px; height:36px; flex:none; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); display:grid; place-items:center; cursor:pointer; padding:0; }
.theme:hover { border-color:var(--orange); color:var(--orange); }
.theme svg { width:18px; height:18px; }
.social { display:flex; gap:8px; }
.social a { width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); transition:color .15s, border-color .15s; }
.social a:hover, .social a:focus-visible { color:var(--orange); border-color:var(--orange); }
.social svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:1180px) { .mk-header .social { display:none; } }

/* Home: hero */
.hero { padding:56px 0 64px; }
.mklogo { position:relative; max-width:860px; }
.mklogo .base { display:block; width:100%; height:auto; }
.mklogo span { position:absolute; cursor:pointer; }
.mklogo span img { display:block; width:100%; height:100%; max-width:none; opacity:0; transition:opacity .06s; }
.mklogo span.on img { opacity:1; }
.mklogo .mk-face { position:absolute; left:78.24%; top:-3.09%; width:22.31%; height:auto; max-width:none; pointer-events:none; } /* boxes from make_logo.py */
.mklogo span img.p8d { position:absolute; left:-2.6%; top:-3.09%; width:105.2%; height:106.17%; }
.hero-txt { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-top:44px; }
.hero h1 { margin:0; font:700 40px/1.1 'Space Grotesk', Inter, sans-serif; letter-spacing:-.02em; text-wrap:balance; }
.hero p { font-size:18px; color:var(--muted); margin:0 0 24px; }
.btns { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-block; padding:13px 22px; border-radius:999px; font:600 15px/1.2 Inter, sans-serif; cursor:pointer; background:none; color:var(--ink); }
.btn.solid { background:var(--ink); color:var(--on-ink); border:1.5px solid var(--ink); } .btn.line { border:1.5px solid var(--ink); }

/* Home: doors */
.doors { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding-bottom:72px; }
.door { background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .2s, box-shadow .2s; }
.door:hover { transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(0,0,0,.35); }
.door .pic { display:block; aspect-ratio:16/10; background:var(--img) center/cover no-repeat; position:relative; }
.door .pic.two { background:var(--two); display:flex; align-items:center; justify-content:center; gap:18px; }
.door .pic.two img { width:34%; border-radius:22%; box-shadow:0 10px 20px -10px rgba(0,0,0,.4); }
.door .pic.musify { background:var(--musify); display:grid; place-items:center; }
.door .txt { display:block; padding:18px 20px 22px; }
.door h3 { margin:0; font:700 22px/1.2 'Space Grotesk', Inter, sans-serif; display:flex; justify-content:space-between; }
.door h3 span { color:var(--orange); }
.door p { color:var(--muted); font-size:15px; margin:6px 0 0; }

/* Sections, filter chips, circle grid */
.work { border-top:1px solid var(--line); padding:64px 0 72px; }
.sec-head { text-align:center; margin-bottom:24px; }
.sec-head h2, .top_title { margin:0; font:700 36px/1.1 'Space Grotesk', Inter, sans-serif; letter-spacing:-.01em; text-wrap:balance; }
.sec-head p { color:var(--muted); margin:8px 0 0; }
.chips { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:36px; }
.chips button, .chips a { border:0; font:500 13px/1 Inter, sans-serif; padding:10px 15px; border-radius:999px; background:var(--chip); color:var(--chip-ink); cursor:pointer; }
.chips button.on, .chips a.on { background:var(--orange); color:#fff; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:36px 28px; }
.card { display:block; text-align:center; }
.card[hidden] { display:none; }
.card .img { display:block; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--img); transition:transform .2s, box-shadow .2s; }
.card .img img { display:block; width:100%; height:100%; object-fit:cover; }
.card:hover .img { transform:scale(1.03); box-shadow:0 0 0 5px var(--orange); }
.card h3 { margin:14px 0 0; font:600 16px/1.3 Inter, sans-serif; }
.card .tag { display:block; font-size:13px; color:var(--muted); }
.more { text-align:center; margin-top:40px; }
.more[hidden] { display:none; }

/* Learn */
.learn { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:64px 0 72px; }
.talks { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px; }
.talk { display:flex; gap:16px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--bg); transition:border-color .2s; }
.learn .talk { background:none; }
.talk:hover { border-color:var(--orange); }
.talk .ico { flex:none; width:56px; height:56px; border-radius:50%; background:var(--orange-soft); color:var(--orange); display:grid; place-items:center; }
.talk svg { width:26px; height:26px; }
.talk h3 { margin:0; font:600 16px/1.3 Inter, sans-serif; }
.talk .tag { display:block; font-size:13px; color:var(--muted); }

/* Archive / search / 404 */
.mk-archive { padding-top:48px; padding-bottom:72px; }
.mk-archive .top_title { text-align:center; margin-bottom:24px; }

/* Posts and pages (the parent's single.php / page.php markup) */
.none_home_cont, .mk-page { max-width:820px; margin:0 auto; padding:48px 24px 72px; }
#sidebar { display:none; }
.single_title { margin:0 0 24px; font:700 40px/1.12 'Space Grotesk', Inter, sans-serif; letter-spacing:-.02em; text-wrap:balance; }
.single_inside_content { font-size:17px; line-height:1.75; overflow-wrap:break-word; }
.single_inside_content h2 { font:700 28px/1.2 'Space Grotesk', Inter, sans-serif; margin:1.6em 0 .5em; }
.single_inside_content h3 { font:700 21px/1.3 'Space Grotesk', Inter, sans-serif; margin:1.4em 0 .4em; }
.single_inside_content a { color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.single_inside_content iframe { max-width:100%; border:0; }
.single_inside_content iframe[src*="youtube"] { width:100%; height:auto; aspect-ratio:16/9; }
.single_inside_content iframe[src*="youtube"][width="315"] { width:315px; aspect-ratio:9/16; }
.single_inside_content audio { width:100%; max-width:560px; }
.single_inside_content code { font-size:.9em; background:var(--chip); padding:.1em .35em; border-radius:4px; }
.single_inside_content table { border-collapse:collapse; width:100%; }
.single_inside_content td, .single_inside_content th { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
.single_inside_content figure { margin:1.6em 0; }
/* inline colors written for the old white theme */
[data-theme=dark] .single_inside_content [style*="color: #666"], [data-theme=dark] .single_inside_content [style*="color:#666"],
[data-theme=dark] .single_inside_content [style*="color: #888"] { color:var(--muted) !important; }
[data-theme=dark] .single_inside_content [style*="color: #333"], [data-theme=dark] .single_inside_content [style*="color: #444"] { color:var(--ink) !important; }
[data-theme=dark] .single_inside_content [style*="background-color: #f2f2f2"] { background-color:var(--card) !important; }
.next_prev_cont { display:flex; justify-content:space-between; gap:24px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:15px; }
.next_prev_cont .right { text-align:right; margin-left:auto; }
.next_prev_cont a { color:var(--ink); text-decoration:none; }
.next_prev_cont a:hover { color:var(--orange); }
.next_prev_cont i { font-style:normal; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); }
.clear { clear:both; }

/* Footer */
.mk-footer { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-size:14px; }
.mk-footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.foot-nav { display:flex; flex-wrap:wrap; gap:6px 18px; font-weight:500; }
.foot-nav a { color:var(--muted); } .foot-nav a:hover, .foot-nav a:focus-visible { color:var(--orange); }

/* Phones: the menu becomes a scrollable second row */
@media (max-width:860px) {
  .mk-header .bar { flex-wrap:wrap; height:auto; gap:8px 12px; padding-top:10px; padding-bottom:8px; }
  .brand img { height:26px; }
  .theme { margin-left:auto; }
  .cta { padding:9px 14px; font-size:13px; }
  .mk-nav { order:9; width:100%; margin-left:0; gap:20px; font-size:14px; overflow-x:auto; white-space:nowrap; padding-bottom:2px; }
  .mk-footer .wrap { flex-direction:column; align-items:flex-start; }
  .hero { padding:28px 0 36px; }
  .hero-txt { grid-template-columns:1fr; gap:14px; margin-top:24px; }
  .hero h1 { font-size:28px; } .hero p { font-size:17px; }
  .doors { grid-template-columns:1fr; gap:14px; padding-bottom:44px; }
  .door { display:grid; grid-template-columns:120px 1fr; }
  .door .pic { aspect-ratio:auto; min-height:110px; }
  .door .txt { padding:14px 16px; } .door h3 { font-size:19px; }
  .work, .learn { padding:44px 0 52px; } .sec-head h2, .top_title { font-size:28px; }
  .chips { gap:6px; margin-bottom:26px; } .chips button, .chips a { padding:8px 12px; }
  .grid { grid-template-columns:repeat(2,1fr); gap:24px 18px; }
  .talks { grid-template-columns:1fr; }
  .none_home_cont, .mk-page { padding-top:32px; }
  .single_title { font-size:30px; }
  .single_inside_content { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }