/*
Theme Name: Moa
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moa
*/

/* Base tokens and components live in assets/css/base.css; this file adds the
   pieces a static export has no need for: WordPress content, the generator's
   live panels, and the dark palette. */

/* ---------- 1. Dark palette ---------- */
/* Only the tokens change, so every component follows without a second ruleset. */
html.is-dark{
  --ink:#f2f0fa; --ink-2:#e2dff0; --body:#c3bfd6; --muted:#a9a4bf;
  --muted-2:#928da8; --faint:#807b95; --faint-2:#6b6681;
  --bg:#141221; --card:#1c1a2b; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.12);
  --tint:#241f3a; --tint-2:#2e2749; --lilac:#7c6ab5; --lilac-2:#3b3160;
  --sh-card:0 6px 26px rgba(0,0,0,.3); --sh-card-hi:0 14px 36px rgba(0,0,0,.45);
  color-scheme:dark;
}
html.is-dark body{background:linear-gradient(180deg,#191627 0%,#161327 320px,var(--bg) 760px)}
html.is-dark .site-header{background:rgba(20,18,33,.86);border-bottom-color:rgba(255,255,255,.07)}
html.is-dark .panel--violet{background:linear-gradient(180deg,#211d36,#1d1930);border-color:rgba(255,255,255,.07)}
html.is-dark .panel--plain{background:linear-gradient(180deg,#1e1b2e,#1a1829)}
html.is-dark .gen__right{background:linear-gradient(180deg,#211d36,#1c1930)}
html.is-dark .tags-box,
html.is-dark .side-card--tint,
html.is-dark .try{background:linear-gradient(180deg,#221e37,#1d1a2f);border-color:rgba(255,255,255,.08)}
html.is-dark .result:hover{background:#242038}
html.is-dark .strip__item:hover{background:#221e35}
html.is-dark .thumb{background-color:#241f3a;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 9px,rgba(255,255,255,0) 9px 18px)}
html.is-dark .feature__cover,html.is-dark .cover{background-color:#241f3a}
html.is-dark .why-card__icon,
html.is-dark .step-card__circle{filter:brightness(.34) saturate(1.5)}
html.is-dark .hero__deco{opacity:.55}

/* Several components set their own display, which would otherwise win over the
   hidden attribute the scripts toggle. */
[hidden]{display:none!important}

/* ---------- 2. Accessibility ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;border-radius:0 0 var(--r) 0;background:var(--purple);color:#fff;font-weight:700}
.skip-link:focus{left:0;color:#fff}
.anchor{display:block;position:relative;top:-88px;height:0;visibility:hidden}
#main{scroll-margin-top:88px}

/* ---------- 3. Header / footer extras ---------- */
.site-header__bar{gap:30px}
.nav{gap:0;font-size:14.5px}
.nav__list{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px;margin:0;padding:0;list-style:none}
.nav__list li{list-style:none}
.nav .current-menu-item>a{color:var(--purple);border-bottom-color:var(--purple)}
.mnav .nav__list{flex-direction:column;align-items:stretch;gap:0}
.mnav .nav__list a{display:block;padding:13px 2px;font-size:15px;font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--line)}
.logo--img{display:flex;align-items:center;flex:none}
.logo--img img{max-height:40px;width:auto}
.mnav__search{margin-top:14px;display:flex;border:1px solid var(--line-2);border-radius:10px;background:var(--card)}
.mnav__search input{flex:1;min-width:0;border:0;outline:none;background:transparent;padding:12px 14px;font-size:14px;color:var(--ink)}
.hero__in{position:relative}

.fbrand__mark{display:flex;align-items:center;gap:8px}
.fbrand__tag{margin-top:10px;font-size:12px;color:var(--faint)}
.fbrand__note{margin-top:22px}
.fcta{align-self:start}
.site-footer__note{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);font-size:11.5px;line-height:1.75;color:var(--faint)}

/* ---------- 4. Generator: live panels ---------- */
.results{scrollbar-width:thin}
.results.is-busy{opacity:.55;pointer-events:none}
.result__text{white-space:normal;word-break:break-word}
.pop{align-items:center}
.pop__text{white-space:normal;word-break:break-word}

.deco-strip{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line-2)}
.deco-strip__t{font-size:13px;font-weight:800;color:var(--muted)}
.deco-strip__row{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.deco-chip{padding:7px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);
  font-size:15px;line-height:1.2;color:var(--ink-2)}
.deco-chip:hover{border-color:var(--lilac);color:var(--purple-d)}

.comm{margin-top:26px;padding:28px 30px 30px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card)}
.comm__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.comm__loading{margin-top:16px;font-size:13px;color:var(--muted-2)}
.comm__sub{margin-top:24px;font-size:13px;font-weight:800;color:var(--muted)}
.comm__grid{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.comm__empty{margin-top:16px;font-size:13.5px;color:var(--muted-2)}
.nick{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--line-2);
  border-radius:var(--r-pill);background:var(--card);font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:100%}
.nick:hover{border-color:var(--lilac)}
.nick__t{overflow-wrap:anywhere;cursor:pointer}
.nick__like{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--tint);color:var(--purple);font-size:11.5px;font-weight:700;flex:none}
.nick__like:hover{background:var(--tint-2)}
.nick__like.is-done{opacity:.6;pointer-events:none}
.nick__by{font-size:11px;color:var(--faint);flex:none}
.comm__add{margin-top:8px}
.comm__add-row{margin-top:12px;display:flex;gap:10px;align-items:stretch}
.comm__add-row .field{flex:1;min-width:0}
.comm__add-row .field input{padding:13px 16px}
.comm__add-row .btn{padding:0 22px;flex:none}

.comm__latest{margin-top:6px}

.seo-panel{position:relative;overflow:hidden}
.seo-panel__lead{margin:22px auto 0;max-width:900px}
.seo-panel__squiggle{position:absolute;right:26px;bottom:12px}
@media (max-width:640px){.seo-panel__squiggle{display:none}}

/* ---------- 4b. Favourites drawer ---------- */
.favdrawer{position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none}
.favdrawer.is-open{visibility:visible;pointer-events:auto}
.favdrawer__veil{position:absolute;inset:0;background:rgba(23,20,46,.42);opacity:0;transition:opacity .22s ease}
.favdrawer.is-open .favdrawer__veil{opacity:1}
.favdrawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(380px,100%);display:flex;flex-direction:column;
  padding:22px 22px 26px;background:var(--card);border-left:1px solid var(--line);
  box-shadow:-14px 0 40px rgba(76,44,160,.16);transform:translateX(100%);transition:transform .24s ease}
.favdrawer.is-open .favdrawer__panel{transform:translateX(0)}
.favdrawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.favdrawer__body{flex:1;min-height:0;overflow-y:auto;margin:14px -6px 0;padding:0 6px;
  display:flex;flex-direction:column;gap:8px}
.favdrawer__empty{margin-top:20px;font-size:13.5px;line-height:1.7;color:var(--muted-2)}
.favdrawer__note{margin-top:14px;font-size:11.5px;line-height:1.6;color:var(--faint)}
.favdrawer .btn--sub{margin-top:14px;flex:none}
.favrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
  border-radius:10px;background:var(--card)}
.favrow:hover{border-color:var(--lilac-2)}
.favrow__t{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--ink-2);cursor:pointer;word-break:break-word}
html.no-scroll,html.no-scroll body{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .favdrawer__panel,.favdrawer__veil{transition:none}
}

/* ---------- 5. Lists ---------- */
.blog-wrap{padding-bottom:8px}
.list-title{margin-top:18px;font-size:clamp(26px,3.6vw,38px)}
.list-intro{margin-top:14px;max-width:680px;font-size:15.5px;line-height:1.75}
.list-intro p{margin-top:10px}
.feature__meta{margin-top:auto;padding-top:22px;font-size:12px;color:var(--faint)}
.post__thumb{background-color:#f3eeff}
.rel-head{font-size:clamp(19px,2.2vw,22px)}
.rel-grid{margin-top:20px;gap:16px}
.rel__thumb{background-position:center;background-size:cover}

.pagenav{margin-top:30px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pagenav .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;
  padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--card);
  font-size:13.5px;font-weight:700;color:var(--body)}
.pagenav a.page-numbers:hover{border-color:var(--lilac);color:var(--purple-d)}
.pagenav .page-numbers.current{background:linear-gradient(90deg,#7c3aed,#8b5cf6);border-color:transparent;color:#fff}
.pagenav .page-numbers.dots{border-color:transparent;background:none}

.empty{display:flex;flex-direction:column;align-items:center}
.chev{display:grid;place-items:center;color:var(--muted-2);transition:transform .2s ease}

/* ---------- 5b. FAQ ---------- */
/* details/summary keeps every answer in the DOM, so the visible text always
   matches the FAQ markup even while a panel is collapsed. */
.faq{margin-top:34px;max-width:820px;margin-left:auto;margin-right:auto;text-align:left;
  display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-card);overflow:hidden}
.faq__item[open]{border-color:var(--lilac-2)}
.faq__q{display:flex;align-items:flex-start;gap:12px;padding:19px 22px;cursor:pointer;
  font-size:15.5px;font-weight:700;line-height:1.5;color:var(--ink);list-style:none;text-wrap:pretty}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:'';flex:none;width:9px;height:9px;margin-top:6px;margin-left:auto;
  border-right:2px solid var(--faint-2);border-bottom:2px solid var(--faint-2);
  transform:rotate(45deg);transition:transform .18s ease}
.faq__item[open] .faq__q::after{transform:rotate(-135deg);border-color:var(--purple)}
.faq__q:hover{color:var(--purple-d)}
.faq__a{padding:0 22px 22px;font-size:14.5px;line-height:1.85;color:var(--body);text-wrap:pretty}
@media (max-width:640px){
  .faq__q{padding:16px 15px;font-size:14.5px}
  .faq__a{padding:0 15px 18px;font-size:14px}
}

/* ---------- 6. 404 ---------- */
.nf{margin-top:26px;padding:56px 32px 60px;text-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-card)}
.nf__code{font-size:clamp(58px,10vw,96px);font-weight:800;line-height:1;letter-spacing:-3px}
.nf__search{margin:26px auto 0}
.nf__btns{margin-top:22px;justify-content:center}

/* ---------- 7. Post content ---------- */
.art>*:first-child{margin-top:0}
.art h2:first-child{margin-top:0}
.art h4{margin-top:24px;font-size:15.5px;font-weight:800;color:var(--ink)}
.art ol{margin-top:16px;padding-left:22px;display:flex;flex-direction:column;gap:10px;list-style:decimal}
.art ol li{font-size:15px;line-height:1.85;color:var(--body)}
.art img{border-radius:var(--r-md);margin:26px auto 0}
.art figure{margin-top:26px}
.art figure img{margin-top:0}
.art figcaption{margin-top:10px;text-align:center;font-size:12px;color:var(--faint)}
.art a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.art hr{margin-top:34px;border:0;border-top:1px solid var(--line)}
.art code{padding:2px 6px;border-radius:6px;background:var(--tint);font-family:var(--mono);font-size:.9em;color:var(--purple-d)}
.art pre{margin-top:20px;padding:18px 20px;border-radius:var(--r);background:var(--tint);overflow-x:auto}
.art pre code{padding:0;background:none}
.art table{margin-top:22px;width:100%;border-collapse:collapse;font-size:14px}
.art th,.art td{padding:11px 14px;border:1px solid var(--line-2);text-align:left;color:var(--body)}
.art th{background:var(--tint);color:var(--ink);font-weight:800}
.nm-table-wrap,.art .wp-block-table{overflow-x:auto}
/* The scroll wrapper only earns its keep if the table may outgrow it: width:100% on its own
   lets a phone squeeze columns down to one character per line instead of scrolling. */
.nm-table-wrap>table,.art .wp-block-table>table{min-width:600px}
/* ...and a grid item defaults to min-width:auto, so without this the column stretches to fit
   that table and the whole page scrolls sideways instead of just the wrapper. */
.art-layout>*,.blog-layout>*{min-width:0}
/* In-content table of contents and the hint under a scrollable table. */
.art .nm-toc{margin-top:24px;padding:20px 22px;background:var(--tint);border:1px solid var(--line);border-radius:var(--r-md)}
.art .nm-toc__title{margin-top:0;font-size:13.5px;color:var(--ink)}
.art .nm-toc ul{margin-top:12px;padding-left:18px;gap:8px;list-style:disc}
.art .nm-toc li{font-size:14px;line-height:1.6}
.art .nm-scroll-hint{margin-top:8px;font-size:11.5px;color:var(--faint)}
.art .wp-block-image{margin-top:26px}
.art iframe,.art video{max-width:100%;margin-top:26px;border-radius:var(--r-md)}
.cover--img{padding:0;overflow:hidden;background-image:none}
.cover--img img{width:100%;height:100%;object-fit:cover}

/* FAQ groups render as bare headings + paragraphs; give them a card each. */
.art .rank-math-list-item{margin-top:16px;padding:20px 22px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md)}
.art .rank-math-question{margin-top:0;font-size:16px}
.art .rank-math-answer p:first-child{margin-top:10px}

/* ---------- 8. Comments ---------- */
.comments{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.comment-list{margin-top:20px;display:flex;flex-direction:column;gap:16px;list-style:none;padding:0}
.comment-list ol{list-style:none;padding-left:26px;margin-top:16px;display:flex;flex-direction:column;gap:16px}
.comment-body{padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.comment-meta{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--faint);flex-wrap:wrap}
.comment-author img{border-radius:var(--r-pill)}
.comment-content{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--body)}
.comment-reply-title{margin-top:34px}
.comment-form{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.comment-form label{display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line-2);border-radius:10px;outline:none;
  background:var(--card);color:var(--ink);font-size:14px}
.comment-form textarea{min-height:130px;resize:vertical}
.comment-form .submit{height:44px;padding:0 26px;align-self:flex-start}

/* ---------- 9. Responsive additions ---------- */
@media (max-width:1080px){
  .anchor{top:-72px}
}
@media (max-width:900px){
  .comm{padding:24px 20px 26px}
}
@media (max-width:640px){
  .comm{padding:20px 15px 24px}
  .comm__add-row{flex-direction:column}
  .comm__add-row .btn{width:100%}
  .nf{padding:40px 18px 44px}
  .art img,.art figure{margin-top:20px}
}

@media (prefers-reduced-motion:reduce){
  .chev{transition:none}
}