/*
Theme Name: Marki Blog
Theme URI: https://marki.com.br
Author: Marki
Author URI: https://marki.com.br
Description: Tema do Blog da Marki, com a mesma identidade de marki.com.br (roxo da marca, Inter, navbar, cards e rodapé do site). Block theme (FSE) com foco em SEO e performance.
Version: 2.1.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marki-blog
*/

/* ════════════════ Tokens da marca (portados de marki.com.br) ════════════════ */
:root {
  --brand-700:#581FC2; --brand-600:#702AE9; --brand-500:#8A54EE; --brand-300:#B597F4; --brand-100:#E0D5FB; --brand-50:#F3EFFE;
  --ink-900:#141019; --ink-800:#241E2D; --ink-700:#3A3446; --ink-500:#6C6676; --ink-400:#9A94A4; --ink-300:#CCC8D4;
  --surface:#FFFFFF; --surface-alt:#F7F6F9; --surface-tint:#F3EFFE; --surface-dark:#141019;
  --border:#E9E6EF; --border-strong:#D6D2DF;
  --shadow-sm:0 1px 2px rgba(20,16,25,.05); --shadow-md:0 6px 20px rgba(20,16,25,.08); --shadow-lg:0 18px 50px rgba(20,16,25,.12);
  --radius-sm:10px; --radius-md:16px; --radius-lg:20px; --radius-full:999px;
  --t:.2s ease; --container:1200px;
}

body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; color:var(--ink-900); background:var(--surface); }
.marki-container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:1.5rem; }
a { text-decoration:none; }

/* ════════════════ Eyebrow / lead / accent ════════════════ */
.eyebrow { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--brand-600); }
.lead { font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--ink-500); line-height:1.6; }
.grad { color:var(--brand-600); }

/* ════════════════ Botões (pílula, igual ao site) ════════════════ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.5rem;
  font-weight:600; font-size:.95rem; border-radius:var(--radius-full); border:1px solid transparent; cursor:pointer;
  transition:transform var(--t), background var(--t), box-shadow var(--t), color var(--t), border-color var(--t); white-space:nowrap; }
.btn:hover { transform:translateY(-2px); }
.btn--primary { background:var(--brand-600); color:#fff; box-shadow:0 4px 14px rgba(20,16,25,.14); }
.btn--primary:hover { background:var(--brand-700); box-shadow:0 8px 22px rgba(20,16,25,.18); color:#fff; }
.btn--ghost { background:transparent; color:var(--ink-900); border-color:var(--border-strong); }
.btn--ghost:hover { border-color:var(--brand-500); color:var(--brand-700); }
.btn--sm { padding:.6rem 1.1rem; font-size:.85rem; }
.btn--lg { padding:1.05rem 1.85rem; font-size:1rem; }

/* ════════════════ Navbar (réplica do site) ════════════════ */
.marki-nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent; }
.marki-nav__inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:72px; }
.marki-nav__logo img { height:30px; width:auto; display:block; object-fit:contain; }
.marki-nav__links { display:flex; align-items:center; gap:.25rem; }
.marki-nav__link { color:var(--ink-700); font-weight:500; font-size:.95rem; padding:.5rem .8rem; border-radius:10px; transition:color var(--t), background var(--t); }
.marki-nav__link:hover { color:var(--brand-700); background:var(--brand-50); }
.marki-nav__link.is-active { color:var(--brand-700); }
.marki-nav__actions { display:flex; align-items:center; gap:.5rem; }
.marki-nav__login { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; color:var(--ink-900); padding:.5rem .6rem; transition:color var(--t); }
.marki-nav__login:hover { color:var(--brand-700); }
.marki-nav__burger, .marki-nav__check { display:none; }

/* ════════════════ Hero (split: texto + órbita, igual ao CRM) ════════════════ */
.marki-hero { padding:clamp(3rem,5.5vw,5rem) 0; background:
  radial-gradient(1100px 520px at 100% -10%, rgba(112,42,233,.12), transparent 60%),
  linear-gradient(180deg, var(--surface-tint), var(--surface)); }
/* o hero é bloco de topo → o WP injeta margin-block-start (block-gap). Remove. */
.wp-site-blocks > .marki-hero, .marki-hero { margin-block-start:0; }
.marki-hero__inner { display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; }
.marki-hero__text h1 { font-size:clamp(2.3rem,1.4rem+3.4vw,3.5rem); line-height:1.08; letter-spacing:-.025em; font-weight:800; color:var(--ink-900); margin:0; }
.marki-hero__text .lead { margin:1.25rem 0 0; max-width:560px; }
.marki-hero__ctas { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.marki-hero__trust { display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; margin-top:1.25rem; color:var(--ink-500); font-size:.85rem; font-weight:500; }
.marki-hero__trust span { display:inline-flex; align-items:center; gap:.4rem; }
.marki-hero__trust svg { color:var(--accent-green,#3E7D5A); }
.marki-hero__visual { display:flex; justify-content:center; }

/* ════════════════ Órbita (porte do hero da home) ════════════════ */
.orbit { position:relative; width:100%; aspect-ratio:1; max-width:480px; margin:0 auto; }
.orbit__core { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:26%; aspect-ratio:1; border-radius:50%;
  background:var(--brand-600); display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.4rem; letter-spacing:-.02em;
  box-shadow:0 16px 40px rgba(112,42,233,.35); z-index:5; }
.orbit__core::before { content:''; position:absolute; inset:-10%; border-radius:50%; border:2px dashed rgba(112,42,233,.22); animation:spin-cw 60s linear infinite; }
.orbit__ring { position:absolute; top:50%; left:50%; border-radius:50%; border:1.5px dashed rgba(112,42,233,.18); translate:-50% -50%; }
.orbit__ring--inner { width:60%; aspect-ratio:1; animation:spin-cw 50s linear infinite; }
.orbit__ring--outer { width:95%; aspect-ratio:1; animation:spin-ccw 75s linear infinite; }
.orbit__icon { position:absolute; width:54px; height:54px; background:#fff; border-radius:50%; display:grid; place-items:center; box-shadow:var(--shadow-md); top:50%; left:50%; transform-origin:center; }
.orbit__icon img { width:28px; height:28px; }
.orbit__icon--lg { width:64px; height:64px; }
.orbit__icon--lg img { width:34px; height:34px; }
@keyframes spin-cw { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes spin-ccw { from { transform:rotate(0deg); } to { transform:rotate(-360deg); } }

/* ════════════════ Post em destaque (último, horizontal) ════════════════ */
.marki-featured .wp-block-post-template { margin:0; }
.marki-featured li { list-style:none; }
.marki-featured__card { display:grid; grid-template-columns:1.05fr .95fr; gap:0; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.marki-featured__card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand-300); }
.marki-featured__card .wp-block-post-featured-image { margin:0; height:100%; }
.marki-featured__card .wp-block-post-featured-image img { width:100%; height:100%; min-height:280px; object-fit:cover; display:block; }
.marki-featured__body { padding:clamp(1.5rem,3vw,2.5rem); display:flex; flex-direction:column; justify-content:center; }
.marki-featured__tag { display:inline-block; align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-600); background:var(--brand-tint,var(--brand-50)); padding:.3rem .7rem; border-radius:999px; margin-bottom:.9rem; }
.marki-featured__card .wp-block-post-title { font-size:clamp(1.5rem,1.1rem+1.4vw,2rem); line-height:1.2; font-weight:800; margin:0; }
.marki-featured__card .wp-block-post-title a { color:var(--ink-900); }
.marki-featured__card .wp-block-post-title a:hover { color:var(--brand-700); }
.marki-featured__card .wp-block-post-excerpt__excerpt { color:var(--ink-500); font-size:1rem; line-height:1.6; margin:.75rem 0 0; }
.marki-featured__card .wp-block-post-date { color:var(--ink-400); font-size:.82rem; font-weight:600; margin-top:1rem; }

/* ════════════════ Faixa de conversão (home) ════════════════ */
.marki-band { background:var(--brand-600); border-radius:var(--radius-lg); color:#fff; text-align:center; padding:clamp(2.5rem,5vw,4rem) 1.5rem; }
.marki-band h2 { color:#fff; font-size:clamp(1.55rem,1.1rem+1.8vw,2.3rem); font-weight:800; line-height:1.15; margin:0; }
.marki-band p { color:rgba(255,255,255,.9); max-width:520px; margin:.85rem auto 1.6rem; line-height:1.55; }
.marki-band__ctas { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }
.marki-band .btn--dark { background:var(--ink-900); color:#fff; }
.marki-band .btn--dark:hover { background:#000; color:#fff; }
.marki-band .btn--soft { background:var(--brand-300); color:#fff; }
.marki-band .btn--soft:hover { background:var(--brand-100); color:var(--brand-700); }
.marki-band__trust { color:rgba(255,255,255,.82); font-size:.83rem; margin-top:1.1rem; }

/* ════════════════ Cards de post (query loop) ════════════════ */
.marki-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; height:100%;
  transition:transform var(--t), box-shadow var(--t), border-color var(--t); }
.marki-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand-300); }
.marki-card .wp-block-post-featured-image { margin:0; }
.marki-card .wp-block-post-featured-image img { aspect-ratio:16/9; object-fit:cover; width:100%; display:block; }
.marki-card .wp-block-post-title { margin:0; line-height:1.3; font-weight:800; }
.marki-card .wp-block-post-title a { color:var(--ink-900); }
.marki-card .wp-block-post-title a:hover { color:var(--brand-700); }
.marki-card .wp-block-post-excerpt__excerpt { color:var(--ink-500); font-size:.95rem; line-height:1.55; }
.marki-meta { color:var(--ink-400); font-size:.8rem; font-weight:600; letter-spacing:.02em; }
.marki-meta a { color:var(--brand-600); }

/* ════════════════ Conteúdo do post ════════════════ */
.wp-block-post-content { font-size:1.1rem; line-height:1.8; color:var(--ink-700); }
.wp-block-post-content > * { margin-block:1.1rem; }
.wp-block-post-content h2 { margin-top:2.4rem; font-size:1.7rem; }
.wp-block-post-content h3 { margin-top:1.8rem; font-size:1.35rem; }
.wp-block-post-content a { color:var(--brand-600); text-decoration:underline; text-underline-offset:2px; }
.wp-block-post-content img { border-radius:var(--radius-md); }
.wp-block-post-content blockquote { border-left:4px solid var(--brand-500); background:var(--surface-tint); border-radius:0 12px 12px 0; padding:1rem 1.25rem; font-style:normal; }

/* ════════════════ Faixa CTA (fim do post) ════════════════ */
.marki-cta { background:linear-gradient(120deg, var(--brand-600), var(--brand-500)); border-radius:var(--radius-lg); color:#fff; }
.marki-cta h2, .marki-cta p { color:#fff; }
.marki-cta .btn--light { background:#fff; color:var(--brand-700); }
.marki-cta .btn--light:hover { background:#fff; color:var(--brand-700); box-shadow:0 10px 24px rgba(0,0,0,.18); }

/* ════════════════ Rodapé (réplica do site) ════════════════ */
.marki-foot { background:var(--ink-900); color:#B8BDD0; padding:4rem 0 2rem; }
.marki-foot__grid { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:2rem; margin-bottom:3rem; }
.marki-foot__brand img { height:28px; width:auto; filter:brightness(0) invert(1); }
.marki-foot__brand p { color:#8B92A8; font-size:.9rem; margin-top:1rem; max-width:300px; line-height:1.6; }
.marki-foot__col h5 { color:#fff; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; margin:0 0 1rem; }
.marki-foot__col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem; }
.marki-foot__col a { color:#B8BDD0; font-size:.93rem; }
.marki-foot__col a:hover { color:#fff; }
.marki-foot__bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.85rem; }
.marki-foot__social { display:flex; gap:.6rem; }
.marki-foot__social a { color:#B8BDD0; display:inline-flex; }
.marki-foot__social a:hover { color:#fff; }

/* ════════════════ Paginação + busca ════════════════ */
.wp-block-query-pagination a, .wp-block-query-pagination .wp-block-query-pagination-numbers .current {
  color:var(--ink-700); font-weight:600; }
.wp-block-query-pagination a:hover { color:var(--brand-700); }
.wp-block-search__button { background:var(--brand-600)!important; color:#fff!important; border:none!important; border-radius:var(--radius-full)!important; padding:.55rem 1.1rem!important; font-weight:600; }
.wp-block-search__input { border-radius:var(--radius-full)!important; border:1px solid var(--border)!important; }

a:focus-visible, .btn:focus-visible { outline:3px solid var(--brand-500); outline-offset:2px; }

/* ════════════════ Responsivo ════════════════ */
@media (max-width:980px) {
  .marki-hero__inner { grid-template-columns:1fr; gap:2rem; }
  .marki-hero__visual { max-width:360px; margin:0 auto; }
  .marki-featured__card { grid-template-columns:1fr; }
  .marki-featured__card .wp-block-post-featured-image img { min-height:200px; aspect-ratio:16/9; }
}
@media (max-width:900px) {
  .marki-foot__grid { grid-template-columns:1fr 1fr; gap:1.75rem; }
}
@media (max-width:680px) {
  .marki-hero__visual { display:none; }
}
@media (max-width:820px) {
  .marki-nav__check:checked ~ .marki-nav__links { display:flex; }
  .marki-nav__links { display:none; position:absolute; left:0; right:0; top:72px; flex-direction:column; align-items:flex-start;
    background:#fff; border-bottom:1px solid var(--border); padding:1rem 1.5rem; gap:.25rem; box-shadow:var(--shadow-md); }
  .marki-nav__links .marki-nav__link { width:100%; }
  .marki-nav__burger { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--border); border-radius:12px; background:#fff; cursor:pointer; color:var(--ink-900); }
  .marki-nav__login-label { display:none; }
}
@media (max-width:560px) {
  .marki-foot__grid { grid-template-columns:1fr; }
}