/* =========================================================
   FlashReceitas — Design System
   Tipografia: Fraunces (editorial, títulos) + Poppins (corpo/UI)
   Paleta: papel amanteigado, tinta café, páprica, ervas, açafrão, ameixa
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,500;1,9..144,600&display=swap');

:root{
  /* Cores base */
  --ink:        #2B2118;   /* texto principal, café escuro */
  --ink-soft:   #5A4B3D;   /* texto secundário */
  --paper:      #F6EEDF;   /* fundo geral, papel amanteigado */
  --paper-alt:  #FFFDF9;   /* cartões / superfícies elevadas */
  --line:       #E4D8C2;   /* bordas suaves sobre o papel */

  --primary:    #B84A3E;   /* páprica — CTAs, links, destaque */
  --primary-dark:#93392F;
  --secondary:  #6B7A3A;   /* ervas — categorias, sucesso */
  --accent:     #D6A339;   /* açafrão — avaliações, selos */
  --plum:       #3B2338;   /* ameixa — header/footer escuros */
  --plum-soft:  #4F3049;

  /* Tipografia */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Poppins', system-ui, sans-serif;

  /* Escala tipográfica */
  --fs-hero: clamp(2.4rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-h3: 1.375rem;
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-meta: 0.8125rem;

  /* Layout */
  --radius-s: 6px;
  --radius-m: 14px;
  --radius-l: 26px;
  --shadow-card: 0 1px 2px rgba(43,33,24,.06), 0 10px 24px -12px rgba(43,33,24,.18);
  --shadow-pop: 0 20px 45px -18px rgba(43,33,24,.35);
  --content-max: 1220px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.18;
  font-weight: 600;
}
p{ margin: 0 0 1em; }
:focus-visible{ outline: 3px solid var(--accent); outline-offset: 2px; }

.container{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--secondary);
  background: rgba(107,122,58,.1);
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
}
.eyebrow-tag svg{ width:14px; height:14px; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background: var(--primary); color: var(--paper-alt); }
.btn-primary:hover{ background: var(--primary-dark); box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.btn-outline{ background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: var(--paper-alt); }
.btn-ghost-light{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.35); }
.btn-ghost-light:hover{ background: rgba(255,255,255,.22); }

/* ========== HEADER ========== */
.site-header{
  position: sticky; top:0; z-index: 60;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px; padding: 14px 24px;
  max-width: var(--content-max); margin: 0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand-mark{ width:42px; height:42px; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-text .brand-flash{
  font-family: var(--font-body); font-weight:800; font-size:1.05rem;
  color: var(--ink); letter-spacing:.2px;
}
.brand-text .brand-receitas{
  font-family: var(--font-display); font-style:italic; font-weight:600;
  font-size:1.05rem; color: var(--primary); margin-top:1px;
}

.main-nav{ display:flex; align-items:center; gap: 4px; }
.main-nav a{
  padding: 10px 14px; border-radius: 999px; font-weight:500;
  font-size: .95rem; color: var(--ink-soft);
  transition: background-color .15s ease, color .15s ease;
}
.main-nav a:hover, .main-nav a.active{ background: var(--paper); color: var(--primary); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--paper); border:1px solid var(--line); color: var(--ink);
  transition: background-color .15s ease;
}
.icon-btn:hover{ background: var(--line); }
.icon-btn svg{ width:19px; height:19px; }
.nav-toggle{ display:none; }

.search-panel{
  max-width: var(--content-max); margin: 0 auto; padding: 0 24px;
  max-height:0; overflow:hidden; transition: max-height .25s ease, padding .25s ease;
}
.search-panel.is-open{ max-height:90px; padding: 14px 24px; }
.search-panel form{ display:flex; gap:10px; }
.search-panel input{
  flex:1; padding: 12px 16px; border-radius: 999px; border:1px solid var(--line);
  font-family: var(--font-body); font-size: .95rem; background: var(--paper);
}

/* ========== HERO ========== */
.hero{
  padding: 40px 24px 56px;
}
.hero-grid{
  max-width: var(--content-max); margin:0 auto;
  display:grid; grid-template-columns: 1.7fr 1fr; gap: 28px;
}
.hero-feature{
  position:relative; border-radius: var(--radius-l); overflow:hidden;
  min-height: 460px; display:flex; align-items:flex-end;
  background: linear-gradient(160deg, var(--plum), var(--plum-soft));
  box-shadow: var(--shadow-pop);
}
.hero-feature img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;
}
.hero-feature::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(30,18,28,.92) 8%, rgba(30,18,28,.35) 55%, rgba(30,18,28,0) 90%);
}
.hero-feature-content{ position:relative; z-index:2; padding: 40px; color:#fff; max-width: 620px; }
.hero-feature .eyebrow-tag{ background: rgba(255,255,255,.16); color:#F7E6BF; }
.hero-feature h1{ color:#fff; font-size: var(--fs-hero); margin: 14px 0 12px; }
.hero-feature p{ color: rgba(255,255,255,.82); font-size:1.05rem; }
.hero-meta{ display:flex; gap:18px; margin: 18px 0 22px; flex-wrap:wrap; }
.hero-meta span{ display:flex; align-items:center; gap:6px; font-size:.9rem; color: rgba(255,255,255,.85); }
.hero-meta svg{ width:16px; height:16px; }

.hero-side{ display:flex; flex-direction:column; gap:18px; }
.side-panel{
  background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: 20px; box-shadow: var(--shadow-card);
}
.side-panel h3{ font-size: 1.05rem; display:flex; align-items:center; gap:8px; }
.side-panel h3 svg{ width:18px; height:18px; color: var(--primary); }
.mini-list{ display:flex; flex-direction:column; gap:14px; margin-top: 14px; }
.mini-item{ display:flex; gap:12px; align-items:center; }
.mini-item .mini-rank{
  font-family: var(--font-display); font-weight:700; font-size:1.25rem; color: var(--line-num, var(--accent));
  width: 22px; flex-shrink:0;
}
.mini-item img{ width:56px; height:56px; object-fit:cover; border-radius: var(--radius-s); flex-shrink:0; }
.mini-item .mini-info{ min-width:0; }
.mini-item .mini-info a{
  font-weight:600; font-size:.9rem; display:block; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.mini-item .mini-info a:hover{ color: var(--primary); }
.mini-info .mini-cat{ font-size: var(--fs-meta); color: var(--secondary); font-weight:600; }

/* ========== CATEGORIAS CHIPS ========== */
.categories-strip{ padding: 8px 24px 46px; }
.categories-strip .container{ max-width: var(--content-max); }
.cat-scroll{
  display:grid; grid-template-columns: repeat(6,1fr); gap:14px;
}
.cat-chip{
  background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: 18px 12px; text-align:center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.cat-chip:hover{ transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--accent); }
.cat-chip .cat-icon{
  width:46px; height:46px; margin: 0 auto 10px; border-radius:50%;
  background: var(--paper); display:flex; align-items:center; justify-content:center; color: var(--primary);
}
.cat-chip .cat-icon svg{ width:24px; height:24px; }
.cat-chip span{ font-weight:600; font-size:.88rem; }

/* ========== FEED + SIDEBAR ========== */
.content-layout{
  max-width: var(--content-max); margin: 0 auto; padding: 0 24px 70px;
  display:grid; grid-template-columns: 1fr 320px; gap: 40px; align-items:start;
}
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 20px; }
.section-head h2{ font-size: var(--fs-h2); }
.section-head a{ font-weight:600; font-size:.9rem; color: var(--primary); white-space:nowrap; }

.recipe-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.recipe-card{
  background: var(--paper-alt); border-radius: var(--radius-m); overflow:hidden;
  box-shadow: var(--shadow-card); display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.recipe-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.recipe-thumb{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.recipe-thumb img{ width:100%; height:100%; object-fit:cover; }
.recipe-thumb .thumb-cat{
  position:absolute; top:12px; left:12px; background: rgba(59,35,56,.85); color:#F7E6BF;
  font-size: var(--fs-meta); font-weight:600; padding: 5px 11px; border-radius: 999px;
}
.recipe-body{ padding: 16px 18px 20px; display:flex; flex-direction:column; flex:1; }
.recipe-body h3{ font-size: 1.15rem; margin-bottom:8px; }
.recipe-body h3 a:hover{ color: var(--primary); }
.recipe-excerpt{ font-size: .9rem; color: var(--ink-soft); flex:1; }
.recipe-meta{ display:flex; gap:14px; margin-top:10px; padding-top:12px; border-top:1px dashed var(--line); }
.recipe-meta span{ display:flex; align-items:center; gap:5px; font-size: var(--fs-meta); color: var(--ink-soft); }
.recipe-meta svg{ width:15px; height:15px; color: var(--secondary); }
.recipe-meta .rating{ margin-left:auto; color: var(--accent); font-weight:600; }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top: 36px; }
.pagination a, .pagination span{
  width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--line); font-weight:600; font-size:.9rem;
}
.pagination a:hover{ background: var(--paper); }
.pagination .current{ background: var(--primary); color:#fff; border-color: var(--primary); }

/* Sidebar */
.sidebar{ display:flex; flex-direction:column; gap: 24px; position:sticky; top: 96px; }
.ad-slot{
  background: var(--paper-alt); border: 1px dashed var(--line); border-radius: var(--radius-m);
  min-height: 250px; display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft); font-size:.8rem; text-align:center; overflow:hidden; position:relative;
}
.ad-slot .ad-label{
  position:absolute; top:8px; left:10px; font-size: 10px; letter-spacing:.5px;
  color: var(--ink-soft); opacity:.6;
}
.ad-slot--native{ min-height: 140px; }

.newsletter-box{
  background: linear-gradient(150deg, var(--plum), var(--plum-soft));
  border-radius: var(--radius-m); padding: 26px 22px; color:#fff;
}
.newsletter-box h3{ color:#fff; font-size:1.15rem; }
.newsletter-box p{ color: rgba(255,255,255,.78); font-size:.88rem; }
.newsletter-box form{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.newsletter-box input{
  padding: 11px 14px; border-radius: 10px; border:none; font-family: var(--font-body);
}
.newsletter-box .btn-primary{ justify-content:center; }

.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; }
.tag-cloud a{
  background: var(--paper); border:1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; font-size:.82rem; font-weight:500;
}
.tag-cloud a:hover{ border-color: var(--secondary); color: var(--secondary); }

/* ========== FOOTER ========== */
.site-footer{ background: var(--plum); color: rgba(255,255,255,.82); margin-top: 20px; }
.footer-top{ max-width: var(--content-max); margin:0 auto; padding: 56px 24px 40px;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; }
.footer-brand .brand-text .brand-flash{ color:#fff; }
.footer-brand p{ font-size:.9rem; color: rgba(255,255,255,.65); max-width: 320px; margin-top:14px; }
.footer-col h4{ color:#fff; font-family: var(--font-body); font-weight:600; font-size:.95rem; margin-bottom:16px; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:.9rem; color: rgba(255,255,255,.68); }
.footer-col a:hover{ color: var(--accent); }
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; background: rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:center;
}
.footer-social a:hover{ background: var(--primary); }
.footer-social svg{ width:17px; height:17px; }
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12); padding: 18px 24px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  max-width: var(--content-max); margin:0 auto; font-size:.82rem; color: rgba(255,255,255,.55);
}
.footer-bottom a{ color: rgba(255,255,255,.75); }

/* ========== RECEITA (single) ========== */
.recipe-hero{ background: var(--paper-alt); border-bottom:1px solid var(--line); padding: 28px 24px 0; }
.breadcrumb{ max-width: var(--content-max); margin:0 auto; display:flex; gap:8px; font-size:.85rem; color: var(--ink-soft); flex-wrap:wrap; }
.breadcrumb a:hover{ color: var(--primary); }
.recipe-title-block{ max-width: var(--content-max); margin: 18px auto 0; }
.recipe-title-block h1{ font-size: clamp(2rem,3.6vw,3rem); max-width: 820px; }
.recipe-sub{ color: var(--ink-soft); font-size: 1.05rem; max-width: 720px; }
.recipe-badges{ display:flex; gap:22px; flex-wrap:wrap; margin: 18px 0 26px; }
.recipe-badges .badge{ display:flex; align-items:center; gap:7px; font-size:.9rem; font-weight:500; color: var(--ink-soft); }
.recipe-badges svg{ width:18px; height:18px; color: var(--primary); }
.recipe-hero-img{ max-width: var(--content-max); margin: 0 auto; border-radius: var(--radius-l) var(--radius-l) 0 0; overflow:hidden; aspect-ratio: 21/8; }
.recipe-hero-img img{ width:100%; height:100%; object-fit:cover; }

.recipe-body-layout{
  max-width: var(--content-max); margin:0 auto; padding: 40px 24px 70px;
  display:grid; grid-template-columns: 1fr 320px; gap: 40px; align-items:start;
}
.recipe-article h2{ font-size: var(--fs-h2); margin-top: 2em; }
.ingredients-card{
  background: var(--paper-alt); border:1px solid var(--line); border-radius: var(--radius-m);
  padding: 24px 26px; box-shadow: var(--shadow-card); margin: 18px 0 36px;
}
.ingredients-card h3{ display:flex; align-items:center; gap:9px; font-size:1.2rem; }
.ingredients-card h3 svg{ width:20px; height:20px; color: var(--secondary); }
.ingredients-card ul{ display:flex; flex-direction:column; gap:11px; margin-top:16px; }
.ingredients-card li{ display:flex; align-items:flex-start; gap:10px; font-size:.96rem; }
.ing-check{
  width:19px; height:19px; border-radius:5px; border:2px solid var(--secondary); flex-shrink:0; margin-top:2px;
  transition: background-color .12s ease;
}
.ingredients-card li.is-checked{ color: var(--ink-soft); text-decoration: line-through; }
.ingredients-card li.is-checked .ing-check{ background: var(--secondary); }
.steps-list{ counter-reset: step; display:flex; flex-direction:column; gap: 22px; margin-top: 20px; }
.steps-list li{ counter-increment: step; display:flex; gap:18px; }
.steps-list li::before{
  content: counter(step);
  width:36px; height:36px; border-radius:50%; background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
  font-family: var(--font-display);
}
.steps-list p{ margin:0; padding-top:6px; }
.recipe-actions{ display:flex; gap:12px; flex-wrap:wrap; margin: 32px 0; }
.notes-box{ background: rgba(214,163,57,.12); border-left:4px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 16px 20px; font-size:.92rem; }

/* ========== RESPONSIVE ========== */
@media (max-width: 980px){
  .hero-grid, .content-layout, .recipe-body-layout{ grid-template-columns: 1fr; }
  .sidebar{ position:static; }
  .cat-scroll{ grid-template-columns: repeat(3,1fr); }
  .footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .recipe-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr; }
  .cat-scroll{ grid-template-columns: repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior:auto !important; }
}