/*
Theme Name:   SERP Happens Kadence
Theme URI:    https://serphappens.com.br
Description:  Child theme do Kadence para o portal SERP Happens — Design System "Terminal Editorial"
Author:       Silvia Seco
Author URI:   https://silviaseco.com.br
Template:     kadence
Version:      1.0.0
Text Domain:  serphappens-kadence
*/

/* ============================================================
   FONTES AUTO-HOSPEDADAS — Bricolage Grotesque, Hanken Grotesk, JetBrains Mono
   ============================================================ */

@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-Medium.ttf') format('truetype'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-Bold.ttf') format('truetype'); }
@font-face { font-family:'Bricolage Grotesque'; font-style:normal; font-weight:800; font-display:swap;
  src:url('assets/fonts/BricolageGrotesque-ExtraBold.ttf') format('truetype'); }

@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/HankenGrotesk-Regular.ttf') format('truetype'); }
@font-face { font-family:'Hanken Grotesk'; font-style:italic; font-weight:400; font-display:swap;
  src:url('assets/fonts/HankenGrotesk-Italic.ttf') format('truetype'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/HankenGrotesk-Medium.ttf') format('truetype'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/HankenGrotesk-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/HankenGrotesk-Bold.ttf') format('truetype'); }

@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/JetBrainsMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:italic; font-weight:400; font-display:swap;
  src:url('assets/fonts/JetBrainsMono-Italic.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/JetBrainsMono-Medium.ttf') format('truetype'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/JetBrainsMono-Bold.ttf') format('truetype'); }

/* ============================================================
   DESIGN TOKENS — "Terminal Editorial"
   Warm newsprint + editorial ink + SERP-lime cursor accent
   ============================================================ */

:root {
  /* ---- Famílias tipográficas --------------------------------- */
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Paleta base ------------------------------------------ */
  --paper:        #F2ECDE;  /* warm newsprint — base da página     */
  --paper-raised: #FBF7EE;  /* cards / painéis elevados            */
  --paper-sunken: #E8E0CF;  /* wells, code blocks no claro         */
  --ink:          #1A1A15;  /* quase-preto editorial               */
  --ink-soft:     #565144;  /* texto secundário (cinza quente)     */
  --ink-muted:    #8B8576;  /* meta / legendas / desabilitado      */
  --hairline:     rgba(26,26,21,.13);
  --rule:         #D8CFBC;  /* linha divisória quente sólida       */

  --lime:         #C8F03F;  /* acento PRIMÁRIO — SERP lime         */
  --lime-deep:    #A7CE1F;  /* lime que funciona em fundo claro    */
  --lime-ink:     #44560A;  /* texto/ícones sobre lime             */

  --clay:         #D5552C;  /* acento SECUNDÁRIO — terracota       */
  --clay-deep:    #B7431F;  /* clay hover / clay como texto        */
  --clay-soft:    #F3D9C8;  /* tint de clay para fundos            */

  --pine:         #2F5A4C;  /* terciário — verde escuro (tags)     */
  --plum:         #5A3B6E;  /* terciário — para variedade de tags  */

  /* ---- Semântica — LIGHT (padrão) --------------------------- */
  --bg:             var(--paper);
  --surface:        var(--paper-raised);
  --surface-sunken: var(--paper-sunken);
  --fg:             var(--ink);
  --fg-soft:        var(--ink-soft);
  --fg-muted:       var(--ink-muted);
  --border:         var(--ink);
  --border-soft:    var(--rule);
  --accent:         var(--lime);
  --accent-text:    var(--lime-ink);
  --link:           var(--clay-deep);
  --link-hover:     var(--ink);
  --highlight:      var(--lime);
  --focus-ring:     var(--clay);

  /* ---- Radii ------------------------------------------------ */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---- Bordas e elevação ------------------------------------ */
  --bd:      1.5px;
  --bd-bold: 2.5px;
  --shadow-sticker:      4px 4px 0 0 var(--ink);
  --shadow-sticker-sm:   3px 3px 0 0 var(--ink);
  --shadow-sticker-lime: 4px 4px 0 0 var(--lime-deep);
  --shadow-soft: 0 1px 2px rgba(26,26,21,.06), 0 8px 24px -8px rgba(26,26,21,.18);

  /* ---- Escala de espaçamento (base 4px) --------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ---- Escala tipográfica (fluida, editorial) ---------------- */
  --t-mega:    clamp(3.5rem, 1.8rem + 7vw, 6.5rem);
  --t-display: clamp(2.6rem, 1.6rem + 4.2vw, 4.5rem);
  --t-h2:      clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  --t-h3:      clamp(1.45rem, 1.2rem + 1vw, 1.75rem);
  --t-h4:      1.2rem;
  --t-lead:    clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-kicker:  0.78rem;
  --t-meta:    0.8125rem;

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.62;
  --tracking-kicker: 0.14em;

  /* ---- Container -------------------------------------------- */
  --container-max: 1200px;
  --content-max:    720px;
}

/* ============================================================
   DARK MODE — data-theme="dark" no <html>
   ============================================================ */
[data-theme="dark"] {
  --bg:             #14140E;
  --surface:        #1E1E15;
  --surface-sunken: #0E0E09;
  --fg:             #F2ECDE;
  --fg-soft:        #B8B2A0;
  --fg-muted:       #807B6B;
  --border:         #F2ECDE;
  --border-soft:    rgba(52,51,38,.27);
  --accent:         #CBF24D;
  --accent-text:    #14140E;
  --link:           #E97A50;
  --link-hover:     #F2ECDE;
  --highlight:      #CBF24D;
  --focus-ring:     #CBF24D;
  --rule:           #34332A;
  --hairline:       rgba(242,236,222,.12);
  --shadow-sticker:    4px 4px 0 0 #000000;
  --shadow-sticker-sm: 3px 3px 0 0 #000000;
  --shadow-soft: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -10px rgba(0,0,0,.6);
}

/* ============================================================
   BASE — aplicado ao body via Kadence
   ============================================================ */
body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font-family: var(--font-display); font-weight: 800;
  font-size: var(--t-display); line-height: var(--lh-tight);
  letter-spacing: -0.02em; }
h2, .h2 { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h2); line-height: var(--lh-snug);
  letter-spacing: -0.015em; }
h3, .h3 { font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.01em; }
h4, .h4 { font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-h4); line-height: 1.3; }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }

code, pre { font-family: var(--font-mono); }
code { font-size: 0.92em; background: var(--surface-sunken);
  padding: 0.12em 0.38em; border-radius: var(--r-xs); }

/* Kicker — eyebrow mono com cursor lime */
.kicker {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--t-kicker); text-transform: uppercase;
  letter-spacing: var(--tracking-kicker); color: var(--clay-deep);
}
.kicker::before { content: "› "; color: var(--lime-deep); }

/* Marca-texto lime */
mark, .mark {
  background: linear-gradient(var(--highlight), var(--highlight)) no-repeat;
  background-size: 100% 42%; background-position: 0 88%;
  color: inherit; padding: 0 .05em;
}

/* ============================================================
   KADENCE OVERRIDES — mapeia nosso DS para as variáveis do Kadence
   ============================================================ */

/* Paleta global do Kadence → nossa paleta */
:root {
  --global-palette1: #C8F03F;  /* lime — acento primário           */
  --global-palette2: #A7CE1F;  /* lime-deep                        */
  --global-palette3: #D5552C;  /* clay — acento secundário         */
  --global-palette4: #1A1A15;  /* ink — texto principal            */
  --global-palette5: #565144;  /* ink-soft — texto secundário      */
  --global-palette6: #8B8576;  /* ink-muted — meta                 */
  --global-palette7: #F2ECDE;  /* paper — fundo                    */
  --global-palette8: #FBF7EE;  /* paper-raised — cards             */
  --global-palette9: #E8E0CF;  /* paper-sunken — wells             */

  /* Fontes globais do Kadence */
  --global-heading-font-family: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --global-body-font-family:    'Hanken Grotesk', system-ui, sans-serif;
}

/* Fundo e cor base do body */
body {
  background-color: #F2ECDE !important;
  color: #1A1A15 !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: 'Bricolage Grotesque', 'Hanken Grotesk', system-ui, sans-serif !important;
  color: #1A1A15 !important;
}

/* Header */
#masthead, .site-header, header.wp-block-template-part {
  background-color: #F2ECDE !important;
  border-bottom: 1.5px solid #1A1A15 !important;
}

/* Links */
a { color: #B7431F !important; }
a:hover { color: #1A1A15 !important; }

/* Cards / posts */
.entry, article, .wp-block-post {
  background: #FBF7EE !important;
  border: 1.5px solid #1A1A15 !important;
  box-shadow: 4px 4px 0 0 #1A1A15 !important;
}

/* Footer */
#colophon, .site-footer, footer.wp-block-template-part {
  background-color: #1A1A15 !important;
  color: #F2ECDE !important;
  border-top: 1.5px solid #1A1A15 !important;
}
#colophon a, .site-footer a { color: #C8F03F !important; }

/* Nome do site "My Blog" — temporário até configurar */
.site-title a { color: #1A1A15 !important; font-weight: 800 !important; }