/* Carratu Blog — componentes e dark mode. Usa os tokens gerados pelo theme.json
   (--wp--preset--color--*, --wp--preset--font-family--*, --wp--custom--*). Carrega após o global-styles. */

/* ---------- Dark mode: sobrescreve os tokens de cor ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --wp--preset--color--brand:#f43404;
    --wp--preset--color--brand-hover:#ff5227;
    --wp--preset--color--brand-wash:#3b1a0e;
    --wp--preset--color--on-brand:#ffffff;
    --wp--preset--color--surface:#131110;
    --wp--preset--color--surface-raised:#1d1a18;
    --wp--preset--color--surface-sunken:#0e0c0b;
    --wp--preset--color--surface-inverse:#f7f6f6;
    --wp--preset--color--ink:#f4efeb;
    --wp--preset--color--ink-muted:#b6ada6;
    --wp--preset--color--ink-subtle:#9a918a;
    --wp--preset--color--on-inverse:#1a1614;
    --wp--preset--color--border:#2c2825;
    --wp--preset--color--border-strong:#423c37;
    --wp--custom--shadow--sm:0 1px 2px rgba(0,0,0,.5);
    --wp--custom--shadow--md:0 4px 16px rgba(0,0,0,.55);
    --wp--custom--shadow--lg:0 14px 36px rgba(0,0,0,.6);
    --wp--custom--shadow--brand:0 8px 24px rgba(244,52,4,.4);
  }
}
:root[data-theme="dark"]{
  --wp--preset--color--brand:#f43404;
  --wp--preset--color--brand-hover:#ff5227;
  --wp--preset--color--brand-wash:#3b1a0e;
  --wp--preset--color--on-brand:#ffffff;
  --wp--preset--color--surface:#131110;
  --wp--preset--color--surface-raised:#1d1a18;
  --wp--preset--color--surface-sunken:#0e0c0b;
  --wp--preset--color--surface-inverse:#f7f6f6;
  --wp--preset--color--ink:#f4efeb;
  --wp--preset--color--ink-muted:#b6ada6;
  --wp--preset--color--ink-subtle:#9a918a;
  --wp--preset--color--on-inverse:#1a1614;
  --wp--preset--color--border:#2c2825;
  --wp--preset--color--border-strong:#423c37;
  --wp--custom--shadow--sm:0 1px 2px rgba(0,0,0,.5);
  --wp--custom--shadow--md:0 4px 16px rgba(0,0,0,.55);
  --wp--custom--shadow--lg:0 14px 36px rgba(0,0,0,.6);
  --wp--custom--shadow--brand:0 8px 24px rgba(244,52,4,.4);
}

/* aliases curtos para uso interno */
:root{
  --brand:var(--wp--preset--color--brand);
  --brand-hover:var(--wp--preset--color--brand-hover);
  --brand-wash:var(--wp--preset--color--brand-wash);
  --on-brand:var(--wp--preset--color--on-brand);
  --surface:var(--wp--preset--color--surface);
  --surface-raised:var(--wp--preset--color--surface-raised);
  --surface-sunken:var(--wp--preset--color--surface-sunken);
  --surface-inverse:var(--wp--preset--color--surface-inverse);
  --ink:var(--wp--preset--color--ink);
  --ink-muted:var(--wp--preset--color--ink-muted);
  --ink-subtle:var(--wp--preset--color--ink-subtle);
  --on-inverse:var(--wp--preset--color--on-inverse);
  --border:var(--wp--preset--color--border);
  --border-strong:var(--wp--preset--color--border-strong);
  --r-sm:var(--wp--custom--radius--sm);
  --r-md:var(--wp--custom--radius--md);
  --r-lg:var(--wp--custom--radius--lg);
  --r-xl:var(--wp--custom--radius--xl);
  --r-pill:var(--wp--custom--radius--pill);
  --sh-sm:var(--wp--custom--shadow--sm);
  --sh-md:var(--wp--custom--shadow--md);
  --sh-lg:var(--wp--custom--shadow--lg);
  --sh-brand:var(--wp--custom--shadow--brand);
  --f-display:var(--wp--preset--font-family--display);
  --f-body:var(--wp--preset--font-family--body);
  --f-mono:var(--wp--preset--font-family--mono);
}

*{box-sizing:border-box}
img{max-width:100%;height:auto}
::selection{background:var(--brand-wash);color:var(--brand)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}

/* ---------- Header ---------- */
.carratu-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--border);
}
.carratu-header .carratu-logo a,
.carratu-header .carratu-logo{display:inline-flex;align-items:center;color:var(--brand);line-height:0}
.carratu-header .carratu-logo svg{height:24px;width:auto}
.carratu-nav a{font-weight:600;color:var(--ink-muted);text-decoration:none}
.carratu-nav a:hover{color:var(--brand)}

.carratu-search{display:flex;align-items:center;gap:8px;flex:1;max-width:320px;
  background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:6px 6px 6px 14px}
.carratu-search:focus-within{border-color:var(--brand)}
.carratu-search svg{width:18px;height:18px;color:var(--ink-subtle);flex:none}
.carratu-search input[type="search"],
.carratu-search .wp-block-search__input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-family:var(--f-body);font-size:15px}
.carratu-search input:focus{outline:none}
.carratu-search .wp-block-search__button,
.carratu-search button{flex:none;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;cursor:pointer}
.carratu-search .wp-block-search__button svg{width:16px;height:16px;color:var(--on-brand)}

.carratu-theme-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--border);background:var(--surface-raised);color:var(--ink);cursor:pointer}
.carratu-theme-toggle:hover{border-color:var(--border-strong)}
.carratu-theme-toggle svg{width:19px;height:19px}

@media (max-width:781px){
  .carratu-search{order:5;flex-basis:100%;max-width:none}
}

/* ---------- Reading progress (single) ---------- */
.carratu-progress{position:sticky;top:0;height:3px;background:transparent;z-index:49}
.carratu-progress__bar{height:100%;width:0;background:var(--brand);border-radius:var(--r-pill)}
body:not(.single) .carratu-progress{display:none}

/* ---------- Button styles ---------- */
.wp-block-button.is-style-secondary .wp-block-button__link{
  background:var(--surface-raised);color:var(--ink);border:1px solid var(--border-strong);box-shadow:none}
.wp-block-button.is-style-secondary .wp-block-button__link:hover{border-color:var(--ink)}
.wp-block-button.is-style-ghost .wp-block-button__link{
  background:transparent;color:var(--brand);box-shadow:none}
.wp-block-button.is-style-ghost .wp-block-button__link:hover{background:var(--brand-wash)}
.wp-block-button__link{box-shadow:var(--sh-brand)}

/* ---------- Eyebrow / terms as pills ---------- */
.carratu-eyebrow{font-family:var(--f-display);font-size:13px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--brand)}
.wp-block-post-terms{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.wp-block-post-terms a{display:inline-block;background:var(--brand-wash);color:var(--brand);text-decoration:none;padding:5px 11px;border-radius:var(--r-pill)}
.wp-block-post-terms a:hover{filter:brightness(.97)}

/* ---------- Post grid / cards ---------- */
.carratu-grid .wp-block-post-template{
  display:grid;grid-template-columns:1fr;gap:22px;margin:0;padding:0;list-style:none}
@media (min-width:600px){.carratu-grid .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.carratu-grid .wp-block-post-template{grid-template-columns:repeat(3,1fr)}}
.carratu-grid .wp-block-post-template > li{
  display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);transition:box-shadow .2s, transform .2s}
.carratu-grid .wp-block-post-template > li:hover{box-shadow:var(--sh-lg);transform:translateY(-3px)}
.carratu-grid .wp-block-post-featured-image{margin:0}
.carratu-grid .wp-block-post-featured-image img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.carratu-card__body{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}
.carratu-card__body .wp-block-post-title{font-family:var(--f-display);font-size:20px;line-height:1.2;font-weight:600;margin:0}
.carratu-card__body .wp-block-post-title a{color:var(--ink);text-decoration:none}
.carratu-card__body .wp-block-post-title a:hover{color:var(--brand)}
.carratu-card__body .wp-block-post-excerpt{margin:0}
.carratu-card__body .wp-block-post-excerpt__excerpt{font-size:15px;line-height:1.5;color:var(--ink-muted)}
.carratu-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto;font-size:13px;color:var(--ink-subtle)}
.carratu-meta .wp-block-post-author__name,
.carratu-meta .wp-block-post-date{font-size:13px;color:var(--ink-subtle)}
.carratu-meta .sep{width:3px;height:3px;border-radius:50%;background:currentColor}

/* ---------- Hero (featured) ---------- */
.carratu-hero{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--surface-raised);box-shadow:var(--sh-md)}
.carratu-hero .wp-block-post-featured-image img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
.carratu-hero .carratu-hero__body{padding:clamp(22px,4vw,40px)}

/* ---------- Newsletter ---------- */
.carratu-newsletter{background:var(--surface-inverse);color:var(--on-inverse);border-radius:var(--r-xl);
  padding:clamp(28px,5vw,52px);box-shadow:var(--sh-lg)}
.carratu-newsletter :where(h2,h3){color:var(--on-inverse)}
.carratu-newsletter .carratu-eyebrow{color:var(--brand)}
.carratu-newsletter input[type="email"],
.carratu-newsletter input[type="text"]{font-family:var(--f-body);font-size:16px;padding:14px 16px;border-radius:var(--r-md);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);width:100%}
.carratu-newsletter .carratu-note{font-size:13px;opacity:.7}

/* ---------- Article ---------- */
.wp-block-post-content{font-family:var(--f-body);font-size:19px;line-height:1.75;color:var(--ink)}
.wp-block-post-content p{margin:0 0 22px}
.wp-block-post-content :where(h2,h3){margin:38px 0 14px}
.wp-block-post-content blockquote{margin:28px 0;padding:6px 0 6px 22px;border-left:3px solid var(--brand);
  color:var(--ink-muted);font-style:italic}
.wp-block-post-content :where(code,pre){font-family:var(--f-mono);font-size:14px;background:var(--surface-sunken);border-radius:var(--r-sm)}
.wp-block-post-content code{padding:2px 6px}
.wp-block-post-content pre{padding:16px;overflow-x:auto}
.wp-block-post-content a{color:var(--brand);text-underline-offset:3px}

.carratu-single-header{max-width:760px;margin-inline:auto}
.carratu-toc{position:sticky;top:88px;border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;background:var(--surface-raised)}
.carratu-toc .wp-block-heading{font-family:var(--f-display);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-subtle);margin:0 0 12px}

.carratu-authorbox{border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;background:var(--surface-raised)}

/* ---------- AEO: answer box + FAQ ---------- */
.carratu-answer{background:var(--brand-wash);border-radius:var(--r-lg);padding:20px 24px}
.carratu-answer strong{color:var(--brand)}
.carratu-faq .wp-block-details{border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px;background:var(--surface-raised);margin-bottom:12px}
.carratu-faq .wp-block-details summary{font-family:var(--f-display);font-weight:700;cursor:pointer;color:var(--ink)}

/* ---------- Section headers ---------- */
.carratu-section-head{display:flex;align-items:end;justify-content:space-between;gap:16px}
.carratu-section-head h2{font-size:clamp(1.4rem,3.4vw,1.75rem)}

/* ---------- Footer ---------- */
.carratu-footer{background:var(--surface-raised);border-top:1px solid var(--border)}
.carratu-footer .carratu-logo svg{height:30px;width:auto}
.carratu-footer a{color:var(--ink-muted);text-decoration:none}
.carratu-footer a:hover{color:var(--brand)}

/* ---------- 404 ---------- */
.carratu-404__big{font-family:var(--f-display);font-weight:800;font-size:clamp(5rem,20vw,11rem);line-height:.9;
  letter-spacing:-4px;background:linear-gradient(135deg,var(--brand),#ff9a6b);-webkit-background-clip:text;background-clip:text;color:transparent}