/* ChatWithCloud theme — base styles.
   Design tokens come from theme.json (settings.custom.cwc) so the Dark style variation flips them all. */
:root{
  --bg:var(--wp--custom--cwc--bg); --bg-2:var(--wp--custom--cwc--bg-2);
  --surface:var(--wp--custom--cwc--surface); --surface-2:var(--wp--custom--cwc--surface-2);
  --text:var(--wp--custom--cwc--text); --muted:var(--wp--custom--cwc--muted); --faint:var(--wp--custom--cwc--faint);
  --border:var(--wp--custom--cwc--border); --border-strong:var(--wp--custom--cwc--border-strong);
  --accent:var(--wp--custom--cwc--accent); --accent-2:var(--wp--custom--cwc--accent-2);
  --accent-ink:var(--wp--custom--cwc--accent-ink); --accent-soft:var(--wp--custom--cwc--accent-soft);
  --good:var(--wp--custom--cwc--good); --warn:var(--wp--custom--cwc--warn); --bad:var(--wp--custom--cwc--bad); --info:var(--wp--custom--cwc--info);
  --term-bg:var(--wp--custom--cwc--term-bg); --term-bar:var(--wp--custom--cwc--term-bar);
  --term-text:var(--wp--custom--cwc--term-text); --term-dim:var(--wp--custom--cwc--term-dim);
  --code-bg:var(--wp--custom--cwc--code-bg); --code-text:var(--wp--custom--cwc--code-text);
  --shadow:var(--wp--custom--cwc--shadow); --shadow-lg:var(--wp--custom--cwc--shadow-lg); --radius:var(--wp--custom--cwc--radius);
  --mono:var(--wp--preset--font-family--jetbrains-mono); --sans:var(--wp--preset--font-family--inter);
  --header-bg:var(--wp--custom--cwc--header-bg);
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* WordPress's flow layout adds a gap above every block; converted pages manage their own spacing. */
.cwc-main{margin:0;padding:0}
.cwc-main > .wp-block-post-content{margin-block-start:0}
.cwc-page :where(.is-layout-flow > *){margin-block-start:0}

/* ---------- header ----------
   Mirrors the app header (assets/css/tool.css .nav / .nav-links / .nav-right) value for value, so both sites
   share one menu: same links, sizes, colors, buttons, breakpoints and mobile panel. */
.cwc-header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border)}
.cwc-header *,.cwc-header *::before,.cwc-header *::after{box-sizing:border-box}
/* The blur lives on a pseudo-element so the mobile panel (absolutely positioned) isn't clipped by it. */
.cwc-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--header-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.admin-bar .cwc-header{top:32px}
@media (max-width:782px){.admin-bar .cwc-header{top:46px}}
.cwc-header-inner{max-width:1160px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px;font-family:var(--sans)}
.cwc-header a{text-decoration:none}
.cwc-logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;font-size:17px;color:var(--text);flex:none}
.cwc-logo:hover{color:var(--text)}
.cwc-logo .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#22d3ee,#2563eb);display:grid;place-items:center;box-shadow:0 4px 14px -4px #2563eb}
.cwc-logo .mark svg{width:18px;height:18px}
.cwc-links{display:flex;gap:2px;margin-left:4px}
.cwc-links a{padding:8px 11px;border-radius:8px;color:var(--muted);font-size:14.5px;font-weight:500;line-height:24px;white-space:nowrap;transition:color .15s,background .15s}
.cwc-links a:hover{color:var(--text);background:var(--surface-2)}
.cwc-links a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.cwc-links a.cwc-mobile-only{display:none}
.cwc-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.cwc-icon-btn{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--muted);border:1px solid var(--border);background:transparent;padding:0;cursor:pointer;font:inherit}
.cwc-icon-btn:hover{color:var(--text);border-color:var(--border-strong)}
.cwc-icon-btn svg{width:18px;height:18px}
.cwc-menu-btn{display:none}
.cwc-signin,.cwc-cta{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:600;line-height:1;white-space:nowrap}
.cwc-signin{color:var(--text);border:1px solid var(--border-strong);transition:border-color .15s}
.cwc-signin:hover{color:var(--text);border-color:var(--text)}
.cwc-cta{padding:0 15px;background:#2563eb;color:#fff;box-shadow:0 6px 20px -8px #2563eb;transition:transform .15s}
.cwc-cta:hover{color:#fff;transform:translateY(-1px)}
@media (max-width:900px){
  .cwc-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;padding:12px 16px 18px;margin:0;background:var(--bg);border-bottom:1px solid var(--border);box-shadow:0 18px 30px -18px rgba(15,23,42,.25)}
  .cwc-links.open{display:flex}
  .cwc-links a{padding:12px}
  .cwc-menu-btn{display:grid}
}
@media (max-width:560px){.cwc-signin{display:none}.cwc-links a.cwc-mobile-only{display:block;font-weight:600;color:var(--text)}}
@media (max-width:420px){.cwc-header-inner{gap:10px;padding:0 16px}.cwc-right{gap:6px}.cwc-logo{font-size:15.5px}}

/* ---------- footer ---------- */
.cwc-footer{background:var(--bg-2);border-top:1px solid var(--border);margin-top:96px;padding:56px 0 36px}
.cwc-foot-inner{max-width:1160px;margin:0 auto;padding:0 24px}
.cwc-foot{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
@media (max-width:980px){.cwc-foot{grid-template-columns:repeat(4,1fr)}.cwc-foot > div:first-child{grid-column:1/-1}}
@media (max-width:600px){.cwc-foot{grid-template-columns:1fr 1fr;gap:28px 20px}}
.cwc-foot h2{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700}
.cwc-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.cwc-foot a{color:var(--muted);text-decoration:none}
.cwc-foot a:hover{color:var(--text)}
.cwc-foot .cwc-logo,.cwc-foot .cwc-logo:hover{color:var(--text)}
.cwc-foot p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:300px;margin:12px 0 0}
.cwc-copyright{margin-top:40px;padding-top:22px;border-top:1px solid var(--border);font-size:13px;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.cwc-copyright a{color:var(--faint);text-decoration:none}
.cwc-copyright a:hover{color:var(--text)}
@media (max-width:600px){.cwc-foot-inner{padding:0 16px}}

/* ---------- default pages, posts, blog ---------- */
.cwc-article{padding-top:56px;padding-bottom:24px}
.cwc-article .wp-block-post-title{margin-bottom:12px}
.cwc-meta{color:var(--faint);font-size:14px}
.cwc-blog-head{padding-top:56px}
.cwc-blog-head p{color:var(--muted);font-size:18px;margin-top:10px}
.cwc-posts .wp-block-post{padding:22px 0;border-bottom:1px solid var(--border)}
.cwc-posts .wp-block-post-title{font-size:22px;margin:0 0 6px}
.cwc-posts .wp-block-post-title a{color:var(--text);text-decoration:none}
.cwc-posts .wp-block-post-title a:hover{color:var(--accent)}
.cwc-posts .wp-block-post-excerpt{color:var(--muted);margin-top:8px}
.cwc-empty{padding:28px;border:1px dashed var(--border-strong);border-radius:14px;color:var(--muted);text-align:center}
.wp-block-search__input{border:1px solid var(--border-strong);border-radius:11px;padding:10px 14px;background:var(--surface);color:var(--text)}
.wp-block-search__button{border-radius:11px}
.wp-block-query-pagination{margin-top:28px}
.cwc-404{padding:96px 0 48px;text-align:center}
.cwc-404 .code{font-family:var(--mono);color:var(--accent);font-weight:700}
.cwc-cta-band{margin-top:48px;padding:28px;border-radius:18px;background:#0b1120;color:#e2e8f0}
.cwc-cta-band h2,.cwc-cta-band h3{color:#fff}
.cwc-cta-band p{color:#94a3b8}

/* ---------- dark mode ----------
   Same palette as the app. Follows the system setting until the visitor picks one with the header toggle
   (saved as "cwc-theme", applied before paint by the inline script in functions.php). */
:root[data-theme="dark"]{
  --bg:#0a0f1c; --bg-2:#0f1629; --surface:#111a2e; --surface-2:#16213a;
  --text:#e2e8f0; --muted:#94a3b8; --faint:#7c8aa0; --border:#1e293b; --border-strong:#334155;
  --accent:#3b82f6; --accent-2:#67e8f9; --accent-ink:#ffffff; --accent-soft:rgba(59,130,246,.14);
  --good:#3ccf78; --warn:#f0b54a; --bad:#ff7b7b; --info:#6aa1ff;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.25); --shadow-lg:0 30px 80px -20px rgba(0,0,0,.7);
  --header-bg:rgba(10,15,28,.82);
  --wp--preset--color--base:#0A0F1C; --wp--preset--color--surface:#111A2E; --wp--preset--color--surface-2:#16213A;
  --wp--preset--color--border:#1E293B; --wp--preset--color--border-strong:#334155; --wp--preset--color--faint:#7C8AA0;
  --wp--preset--color--muted:#94A3B8; --wp--preset--color--contrast:#E2E8F0; --wp--preset--color--primary:#3B82F6;
  --wp--preset--color--primary-hover:#60A5FA; --wp--preset--color--accent:#22D3EE; --wp--preset--color--accent-strong:#67E8F9;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0f1c; --bg-2:#0f1629; --surface:#111a2e; --surface-2:#16213a;
    --text:#e2e8f0; --muted:#94a3b8; --faint:#7c8aa0; --border:#1e293b; --border-strong:#334155;
    --accent:#3b82f6; --accent-2:#67e8f9; --accent-ink:#ffffff; --accent-soft:rgba(59,130,246,.14);
    --good:#3ccf78; --warn:#f0b54a; --bad:#ff7b7b; --info:#6aa1ff;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.25); --shadow-lg:0 30px 80px -20px rgba(0,0,0,.7);
    --header-bg:rgba(10,15,28,.82);
    --wp--preset--color--base:#0A0F1C; --wp--preset--color--surface:#111A2E; --wp--preset--color--surface-2:#16213A;
    --wp--preset--color--border:#1E293B; --wp--preset--color--border-strong:#334155; --wp--preset--color--faint:#7C8AA0;
    --wp--preset--color--muted:#94A3B8; --wp--preset--color--contrast:#E2E8F0; --wp--preset--color--primary:#3B82F6;
    --wp--preset--color--primary-hover:#60A5FA; --wp--preset--color--accent:#22D3EE; --wp--preset--color--accent-strong:#67E8F9;
    color-scheme:dark;
  }
}