/*
Theme Name: CK Kubiaki (Storefront Child)
Theme URI: https://claudiokubiaki.com
Description: Child theme do Storefront para uso exclusivo em claudiokubiaki.com. Substitui header/footer nativos por um cabeçalho e rodapé próprios (CK Design System), aplicados a todas as páginas do site.
Author: K-Plugins WP
Author URI: https://k-plugins.com
Template: storefront
Version: 1.0.0
Text Domain: ck-kubiaki
*/

@import url("../storefront/style.css");

/* ===========================================================
   CK DESIGN SYSTEM — aplicado globalmente em claudiokubiaki.com
   =========================================================== */
:root{
  --ck-bg: #fdfcfa;
  --ck-bg-alt: #f2efe6;
  --ck-ink: #1a1a1a;
  --ck-ink-soft: #5c574c;
  --ck-accent: #4a8a54;
  --ck-accent-soft: rgba(74,138,84,0.10);
  --ck-border: rgba(26,26,26,0.10);
  --ck-radius: 14px;
  --ck-font-head: 'Georgia', 'Playfair Display', serif;
  --ck-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ck-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* -----------------------------------------------------------
   1. OCULTAR HEADER E FOOTER NATIVOS DO STOREFRONT
   Aplica-se a QUALQUER página/post/produto do site, não só à home.
   ----------------------------------------------------------- */
#masthead.site-header,
#colophon.site-footer,
.storefront-primary-navigation,
.site-header-cart,
.top-bar,
.handheld-navigation{
  display:none !important;
}

/* Storefront adiciona padding/margin no #page pensando no header nativo;
   zeramos para nosso próprio header (sticky, injetado via wp_body_open) ocupar o lugar */
#page.hfeed.site{
  padding-top:0 !important;
}

body{
  background:var(--ck-bg);
  color:var(--ck-ink);
  font-family:var(--ck-font-body);
  line-height:1.6;
}
a{color:var(--ck-accent);}

.ck-wrap{max-width:1040px;margin:0 auto;padding:0 24px;}

/* -----------------------------------------------------------
   2. HEADER CK (injetado via wp_body_open em functions.php)
   ----------------------------------------------------------- */
.ck-header{
  position:sticky; top:0; z-index:9999;
  background:rgba(253,252,250,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ck-border);
}
.ck-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  position:relative;
  max-width:1040px; margin:0 auto;
}
.ck-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--ck-font-mono);
  font-weight:700; font-size:18px; letter-spacing:0.5px;
  color:var(--ck-ink); text-decoration:none;
}
.ck-logo:hover{color:var(--ck-ink);}
.ck-logo-mark{
  width:34px; height:34px; border-radius:8px;
  background:linear-gradient(145deg,#1e1e1e,#0a0a0a);
  border:1px solid var(--ck-border);
  display:flex; align-items:center; justify-content:center;
  color:var(--ck-accent); font-weight:800; font-size:15px;
}
.ck-nav{display:flex; gap:28px;}
.ck-nav a{
  color:var(--ck-ink-soft); text-decoration:none; font-size:14px;
  transition:color .2s ease;
}
.ck-nav a:hover{color:var(--ck-accent);}
.ck-nav a.ck-current{color:var(--ck-accent);}

/* Substitui o outline de foco padrão do navegador (geralmente azul/lilás)
   pela cor de acento do CK em QUALQUER link do site — inclui páginas
   internas de plugins como o KontaFull, que renderizam fora do .ck-header
   e do .site-content e por isso não seguiam a regra anterior. */
a:focus-visible,
a:focus{
  outline: 2px solid var(--ck-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Hamburger CSS-only (checkbox hack) */
.ck-burger-toggle{display:none;}
.ck-burger-label{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:28px; height:22px; cursor:pointer; z-index:60;
}
.ck-burger-label span{
  display:block; height:2px; width:100%; background:var(--ck-ink);
  border-radius:2px; transition:transform .25s ease, opacity .25s ease;
}
.ck-burger-toggle:checked ~ .ck-burger-label span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.ck-burger-toggle:checked ~ .ck-burger-label span:nth-child(2){opacity:0;}
.ck-burger-toggle:checked ~ .ck-burger-label span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:700px){
  .ck-header-inner{padding:12px 20px;}
  .ck-burger-label{display:flex;}
  .ck-nav{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--ck-bg-alt);
    border-bottom:1px solid var(--ck-border);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .ck-nav a{padding:14px 20px; font-size:14px; border-top:1px solid var(--ck-border);}
  .ck-burger-toggle:checked ~ .ck-nav{max-height:320px;}
}

/* -----------------------------------------------------------
   3. CONTEÚDO GENÉRICO (páginas/posts existentes)
   Estiliza o miolo padrão do WordPress para casar com o tema escuro,
   já que essas páginas não usam as classes ck- específicas da home.
   ----------------------------------------------------------- */
.site-content,
#primary.content-area{
  background:var(--ck-bg);
  color:var(--ck-ink);
  max-width:1040px; margin:0 auto; padding:48px 24px 80px;
}
.site-content h1, .site-content h2, .site-content h3{
  font-family:var(--ck-font-head); color:var(--ck-ink);
}
.site-content a{color:var(--ck-accent);}
.site-content .entry-content{color:var(--ck-ink-soft); font-size:16px;}

/* -----------------------------------------------------------
   4. FOOTER CK (injetado via wp_footer em functions.php)
   ----------------------------------------------------------- */
.ck-footer{
  border-top:1px solid var(--ck-border);
  padding:32px 0; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
  max-width:1040px; margin:0 auto;
}
.ck-footer small{color:var(--ck-ink-soft); font-size:13px;}
.ck-footer a{color:var(--ck-accent);}

.ck-wa-float{
  position:fixed; bottom:22px; right:22px; z-index:9999;
  background:var(--ck-accent); color:#0a1a0c;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; text-decoration:none;
  box-shadow:0 10px 28px rgba(92,163,100,0.4);
}

/* -----------------------------------------------------------
   5. COMPONENTES DA HOME (hero, cards, about) — reutilizáveis
   ----------------------------------------------------------- */
.ck-hero{padding:96px 0 72px; border-bottom:1px solid var(--ck-border);}
.ck-hero-eyebrow{
  font-family:var(--ck-font-mono); color:var(--ck-accent); font-size:13px;
  text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; display:block;
}
.ck-hero h1{
  font-family:var(--ck-font-head); font-size:clamp(32px,5vw,52px);
  margin:0 0 18px; font-weight:600; line-height:1.15;
}
.ck-hero p{color:var(--ck-ink-soft); font-size:17px; max-width:560px; margin:0 0 32px;}
.ck-credentials{display:flex; gap:24px; flex-wrap:wrap; margin-bottom:36px;}
.ck-credential{
  font-family:var(--ck-font-mono); font-size:13px; color:var(--ck-ink-soft);
  border:1px solid var(--ck-border); border-radius:999px; padding:6px 14px;
}
.ck-credential strong{color:var(--ck-ink);}
a.ck-cta{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ck-accent); color:#0a1a0c !important; font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 24px rgba(92,163,100,0.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
a.ck-cta:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(92,163,100,0.35); color:#0a1a0c !important;}

.ck-services{padding:72px 0;}
.ck-section-title{font-family:var(--ck-font-head); font-size:28px; margin:0 0 8px;}
.ck-section-sub{color:var(--ck-ink-soft); margin:0 0 40px; font-size:15px;}
.ck-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
@media(max-width:700px){.ck-cards{grid-template-columns:1fr;}}
.ck-card{
  background:var(--ck-bg-alt); border:1px solid var(--ck-border);
  border-radius:var(--ck-radius); padding:32px;
  transition:border-color .2s ease, transform .2s ease;
}
.ck-card:hover{border-color:var(--ck-accent); transform:translateY(-3px);}
.ck-card-icon{
  width:44px; height:44px; border-radius:10px; background:var(--ck-accent-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--ck-accent); font-size:20px; margin-bottom:20px;
}
.ck-card h3{font-family:var(--ck-font-head); font-size:20px; margin:0 0 6px;}
.ck-card .ck-tag{
  font-family:var(--ck-font-mono); font-size:18px; color:var(--ck-accent);
  display:block; margin-bottom:16px;
}
.ck-card ul{margin:0; padding-left:18px; color:var(--ck-ink-soft); font-size:14px;}
.ck-card li{margin-bottom:6px;}

.ck-about{padding:64px 0; border-top:1px solid var(--ck-border);}
.ck-about .ck-wrap{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center;}
@media(max-width:700px){.ck-about .ck-wrap{grid-template-columns:1fr; text-align:left;}}
.ck-about-mark{
  width:88px; height:88px; flex-shrink:0; border-radius:var(--ck-radius);
  background:linear-gradient(160deg,#1e1e1e,#0a0a0a);
  border:1px solid var(--ck-border);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--ck-font-mono); font-size:32px; font-weight:800; color:var(--ck-accent);
}
.ck-about p{color:var(--ck-ink-soft); font-size:15px;}