/*
Theme Name: aidevtube
Theme URI: https://aidevtube.com
Description: Product-landing theme for the aidevtube weekly AI-dev digest. Design language ported from the Morning Lens system (dark, amber accent, Fraunces serif). Replaces the OceanWP blog look with a tool/product feel.
Version: 0.1.0
Author: Bastian Brand
Text Domain: aidevtube
*/

/* ── Design system (ported from Morning Lens ~/cc-dev/media-intelligence/site) ── */
:root{
  --serif:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bg:#0e1013; --surface:#15181e; --surface-2:#1b1f27; --raise:#21252f;
  --line:#282d38; --line-soft:#1e222b;
  --fg:#e9eaed; --mut:#9aa2b0; --faint:#727b8a;
  --accent:#f2b350; --accent-hi:#f8ca77; --accent-dim:rgba(242,179,80,.13);
  --accent-line:rgba(242,179,80,.40); --on-accent:#181103;
  --r1:7px; --r2:11px; --r3:14px; --r-pill:999px;
  --z-nav:50;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.28);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.62 var(--sans);-webkit-font-smoothing:antialiased;}
h1,h2,h3{text-wrap:balance;}
p{text-wrap:pretty;}
a{color:var(--accent);}
img{max-width:100%;height:auto;}

.ml-kicker{letter-spacing:.16em;text-transform:uppercase;font-size:12px;color:var(--accent);font-weight:700;}

/* Sticky header */
.ml-top{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:11px clamp(16px,4vw,28px);background:rgba(14,16,19,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);}
.ml-brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg);}
.ml-mark{color:var(--accent);font-size:19px;line-height:1;transform:translateY(1px);}
.ml-word{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.01em;color:var(--fg);}
.ml-nav{display:flex;align-items:center;gap:clamp(11px,2.4vw,20px);font-size:13.5px;}
.ml-nav a{color:var(--mut);text-decoration:none;white-space:nowrap;transition:color .15s;}
.ml-nav a:hover{color:var(--fg);}
.ml-nav a.on{color:var(--fg);position:relative;}
.ml-nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:var(--accent);}
/* Language switcher — EN · DE · FR, current in accent */
.ml-langs{display:inline-flex;align-items:center;gap:9px;margin-left:4px;padding-left:13px;border-left:1px solid var(--line);}
.ml-lang{font-size:12.5px;letter-spacing:.05em;color:var(--mut);text-decoration:none;transition:color .15s;}
a.ml-lang:hover{color:var(--fg);}
.ml-lang.on{color:var(--accent);font-weight:600;}
/* Rendered WP menu (primary location) */
.ml-menu{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(10px,2.2vw,18px);list-style:none;margin:0;padding:0;font-size:13.5px;}
.ml-menu li{margin:0;padding:0;}
.ml-menu a{color:var(--mut);text-decoration:none;white-space:nowrap;transition:color .15s;}
.ml-menu a:hover{color:var(--fg);}
.ml-menu .current-menu-item>a,.ml-menu .current_page_item>a{color:var(--fg);font-weight:500;}
/* dropdown for grouped items (e.g. Pro > Account/API/Alerts) */
.ml-menu li{position:relative;}
.ml-menu .menu-item-has-children>a::after{content:"\25BE";margin-left:5px;color:var(--faint);font-size:.8em;}
.ml-menu .sub-menu{position:absolute;top:calc(100% + 9px);left:0;min-width:158px;list-style:none;margin:0;
  padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
  box-shadow:var(--shadow);display:none;flex-direction:column;gap:1px;z-index:var(--z-nav);}
.ml-menu li:hover>.sub-menu,.ml-menu li:focus-within>.sub-menu{display:flex;}
.ml-menu .sub-menu li{width:100%;}
.ml-menu .sub-menu a{display:block;padding:7px 11px;border-radius:6px;font-size:13.5px;color:var(--mut);}
.ml-menu .sub-menu a:hover{background:var(--surface-2);color:var(--fg);}
/* hamburger + injected caret: hidden on desktop */
.ml-hamburger{display:none;background:none;border:0;color:var(--fg);font-size:22px;line-height:1;cursor:pointer;padding:4px 6px;}
.ml-caret{display:none;}

/* Mobile: collapse the whole nav behind the hamburger; groups tap-to-expand */
@media(max-width:900px){
  .ml-hamburger{display:block;}
  .ml-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    padding:6px 16px 14px;display:none;}
  .ml-top.nav-open .ml-nav{display:flex;}
  .ml-menu{flex-direction:column;align-items:stretch;gap:0;width:100%;font-size:15px;}
  .ml-menu>li{padding:11px 0;border-bottom:1px solid var(--line-soft);}
  .ml-menu .menu-item-has-children>a::after{display:none;}
  .ml-caret{display:inline-block;position:absolute;right:-4px;top:6px;background:none;border:0;
    color:var(--mut);font-size:18px;padding:6px 10px;cursor:pointer;line-height:1;}
  .ml-menu .sub-menu{position:static;display:none;box-shadow:none;border:0;background:transparent;
    padding:6px 0 2px 14px;min-width:0;flex-direction:column;gap:0;}
  .ml-menu li.open>.sub-menu{display:flex;}
  .ml-menu .sub-menu li{padding:8px 0;}
  .ml-langs{margin:12px 0 0;padding:14px 0 2px;border-top:1px solid var(--line);border-left:0;}
}

/* Buttons */
.ml-btn{display:inline-block;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:600;
  font-size:14px;padding:10px 18px;border-radius:var(--r2);white-space:nowrap;transition:background .15s;}
.ml-btn:hover{background:var(--accent-hi);}
.ml-btn-ghost{display:inline-block;border:1px solid var(--accent-line);color:var(--accent);text-decoration:none;
  font-weight:600;font-size:13px;padding:9px 16px;border-radius:var(--r2);transition:background .15s,border-color .15s;}
.ml-btn-ghost:hover{background:var(--accent-dim);border-color:var(--accent);}

/* Hero — no photo, subtle gradient instead of Lenses' earth-night image */
.hero{position:relative;padding:60px 20px 44px;text-align:center;overflow:hidden;border-bottom:1px solid var(--line);}
.hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 92% at 50% 0%, var(--accent-dim) 0%, transparent 62%);
  pointer-events:none;}
.hero>*{position:relative;}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,6vw,44px);line-height:1.1;
  letter-spacing:-.015em;margin:8px auto 10px;max-width:780px;}
.hero p.tag{color:var(--mut);font-size:17px;max-width:640px;margin:0 auto;}
/* coverage / "only" line — the one accent-bright element */
.stat{margin:22px auto 4px;font-size:14px;letter-spacing:.02em;font-variant-numeric:tabular-nums;max-width:680px;}
.stat-only{color:var(--accent-hi);font-weight:600;}
.stat b{color:var(--fg);}
.hero-cta{margin-top:24px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

.wrap{max-width:960px;margin:0 auto;padding:34px 20px 70px;}

/* Feature cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 40px;}
@media(max-width:760px){.cards{grid-template-columns:1fr;}}
.c{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r3);padding:22px 22px 20px;transition:border-color .15s,transform .15s;}
.c:hover{border-color:var(--accent-line);transform:translateY(-2px);}
.c .ic{font-size:26px;}
.c h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:12px 0 5px;}
.c p{font-size:14px;color:var(--mut);margin:0;}
.c .go{margin-top:12px;font-size:13px;color:var(--accent);font-weight:600;}

/* Archive (demoted feed) */
.sec{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--faint);margin:0 0 12px;}
.arch{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:14px 18px;margin:0 0 36px;
  display:flex;flex-wrap:wrap;gap:8px 18px;}
.arch a{text-decoration:none;font-size:14px;color:var(--accent);}
.arch a:hover{color:var(--accent-hi);}

/* Podcast episodes */
.episodes{display:flex;flex-direction:column;gap:14px;}
.ep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:16px 18px;}
.ep-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;}
.ep-title{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--fg);text-decoration:none;}
.ep-title:hover{color:var(--accent);}
.ep-dur{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap;}
.ep-audio{width:100%;height:38px;}

/* How it works */
details.how-x{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);margin:0;}
details.how-x>summary{list-style:none;cursor:pointer;padding:13px 18px;display:flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);font-weight:700;}
details.how-x>summary::-webkit-details-marker{display:none;}
details.how-x>summary::before{content:"\25B8";color:var(--faint);font-size:11px;transition:transform .15s;}
details.how-x[open]>summary::before{transform:rotate(90deg);}
details.how-x[open]>summary{border-bottom:1px solid var(--line);}
details.how-x .how-body{padding:14px 18px 16px;color:var(--mut);font-size:14px;line-height:1.6;}

/* Post content (single/archive fall back to index.php) */
.entry{max-width:760px;margin:0 auto;}
.entry h1,.entry h2,.entry h3{font-family:var(--serif);}
.entry a{color:var(--accent);}
.entry-thumb{max-width:760px;margin:0 auto 20px;border-radius:var(--r3);overflow:hidden;border:1px solid var(--line);}
.entry-thumb img{display:block;width:100%;height:auto;}
.entry-meta{max-width:760px;margin:0 auto 6px;font-size:12.5px;color:var(--faint);letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.arch-list{flex-direction:column;gap:11px 0;align-items:stretch;}
.arch-list a{color:var(--fg);font-size:15px;}
.arch-list a:hover{color:var(--accent);}
.arch-date{color:var(--faint);font-variant-numeric:tabular-nums;margin-right:9px;}
.arch-more{margin:0 0 36px;}
.arch-more a{color:var(--accent);font-weight:600;font-size:14px;text-decoration:none;}
.arch-more a:hover{color:var(--accent-hi);}
.upsell{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface));
  border:1px solid var(--accent-line);border-radius:var(--r3);padding:24px;text-align:center;margin:22px 0 0;}
.upsell p{margin:0 0 14px;color:var(--foreground-2);font-size:15px;}
.pager{margin-top:28px;display:flex;gap:6px;flex-wrap:wrap;}
.pager a,.pager .current{color:var(--accent);text-decoration:none;padding:0 6px;}

/* Subscribe section (footer) */
.subscribe{border-top:1px solid var(--line);background:var(--surface);}
.subscribe-inner{max-width:960px;margin:0 auto;padding:34px 20px;display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:start;}
@media(max-width:760px){.subscribe-inner{grid-template-columns:1fr;gap:24px;}}
.subscribe h3{font-family:var(--serif);font-weight:500;font-size:18px;margin:0 0 12px;color:var(--fg);}
.sub-wa .wa-btn{display:inline-block;background:#25d366;color:#0b3d24;font-weight:700;font-size:14px;
  padding:11px 18px;border-radius:var(--r2);text-decoration:none;transition:filter .15s;}
.sub-wa .wa-btn:hover{filter:brightness(1.06);}
.subscribe .tnp{max-width:440px;}
.subscribe .tnp label{display:none;}
.subscribe .tnp-field{margin:0 0 8px;}
.subscribe .tnp input[type=email],.subscribe .tnp input[type=text]{width:100%;background:var(--bg);
  border:1px solid var(--line);color:var(--fg);border-radius:var(--r2);padding:11px 13px;font-size:14px;font-family:inherit;}
.subscribe .tnp input[type=submit],.subscribe .tnp .tnp-submit input{background:var(--accent);color:var(--on-accent);
  border:0;border-radius:var(--r2);padding:11px 20px;font-weight:700;font-size:14px;cursor:pointer;width:auto;}
.subscribe .tnp input[type=submit]:hover{background:var(--accent-hi);}
.subscribe .tnp a{color:var(--accent);}
.subscribe .tnp-privacy,.subscribe .tnp-field-privacy{font-size:12px;color:var(--faint);}

/* Footer */
.site-footer{margin-top:0;padding:24px 20px;font-size:12px;color:var(--faint);text-align:center;border-top:1px solid var(--line-soft);}
.site-footer .legalft a{color:var(--faint);text-decoration:none;margin:0 8px;}
.site-footer .legalft a:hover{color:var(--mut);}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ── Light mode (data-theme="light") — overrides the dark :root palette ── */
:root{color-scheme:dark;}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f6f9; --raise:#ffffff;
  --line:#e2e6ec; --line-soft:#eef1f5;
  --fg:#1a1d24; --mut:#586172; --faint:#8790a0;
  --accent:#b06f0a; --accent-hi:#8f5a06; --accent-dim:rgba(176,111,10,.10);
  --accent-line:rgba(176,111,10,.35); --on-accent:#ffffff;
  --shadow:0 1px 2px rgba(20,30,50,.06),0 12px 30px rgba(20,30,50,.10);
}
html{transition:background-color .2s ease,color .2s ease;}

/* Theme toggle button (replaces the wp-dark-mode floating switch) */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  margin-left:8px;padding:0;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--fg);cursor:pointer;font-size:16px;line-height:1;flex:0 0 auto;
  transition:background .15s,border-color .15s;}
.theme-toggle:hover{border-color:var(--accent-line);background:var(--surface-2);}
.theme-toggle .moon{display:none;}
.theme-toggle .sun{display:inline;}
:root[data-theme="light"] .theme-toggle .sun{display:none;}
:root[data-theme="light"] .theme-toggle .moon{display:inline;}
/* header uses a hard-coded dark blur-bg (style.css:35) — override for light */
:root[data-theme="light"] .ml-top{background:rgba(255,255,255,.88);}

/* ── Digest post-content: the bot emits hard-coded LIGHT inline-styles
   (color:#333, background:#f1f5f9, color:#4a6cf7 …). wp-dark-mode used to invert
   them; we remap to the dark palette so single posts don't show a white block. ── */
:root[data-theme="dark"] .entry-content [style*="color:#333"]{color:var(--fg)!important;}
:root[data-theme="dark"] .entry-content [style*="color:#444"],
:root[data-theme="dark"] .entry-content [style*="color:#666"],
:root[data-theme="dark"] .entry-content [style*="color:#888"]{color:var(--mut)!important;}
:root[data-theme="dark"] .entry-content [style*="color:#4a6cf7"]{color:var(--accent-hi)!important;}
:root[data-theme="dark"] .entry-content [style*="background:#f1f5f9"],
:root[data-theme="dark"] .entry-content [style*="background:#f8fafc"],
:root[data-theme="dark"] .entry-content [style*="background:#f0f4ff"]{background:var(--surface-2)!important;border-color:var(--line)!important;}
:root[data-theme="dark"] .entry-content [style*="#e5e7eb"],
:root[data-theme="dark"] .entry-content [style*="#ddd"]{border-color:var(--line)!important;}