/*
Theme Name: NaijaPulse
Theme URI: https://example.com/naijapulse
Author: NaijaPulse Team
Author URI: https://example.com
Description: Production-ready WordPress theme converted from a React/TSX project (NaijaPulse).
Version: 1.0.1
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naijapulse
Tags: custom-menu, featured-images, blog, one-column, responsive-layout
*/

:root{
  --naija-green:#008751;
  --naija-accent:#FCD116;
  --naija-dark:#0f141a;
  --naija-light:#f1fbf6;

  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#6b7280;
  --border:rgba(15,20,26,.12);
  --shadow:0 14px 40px rgba(0,0,0,.12);
  --radius:18px;

  --container:1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}

.site{
  min-height:100%;
  display:flex;
  flex-direction:column;
}

.site-main{ flex:1; }

/* Accessibility */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem;
  width:auto; height:auto;
  background:#000; color:#fff;
  padding:.75rem 1rem;
  border-radius:12px;
  z-index:99999;
}

/* ---------------------------
   NAVBAR (from Navbar.tsx)
---------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:999;
  background:var(--naija-dark);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}

.header-inner{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.65rem;
  cursor:pointer;
}

.brand-badge{
  width:32px;
  height:32px;
  border-radius:999px;
  background:var(--naija-green);
  color:#fff;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
}

.brand-title{
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:-.02em;
  color:#fff;
}
.brand-title .pulse{
  color:var(--naija-green);
}

.primary-nav{
  display:flex;
  align-items:center;
  gap:2rem;
}

.primary-nav ul{
  list-style:none;
  display:flex;
  align-items:center;
  gap:1.75rem;
  margin:0;
  padding:0;
}

.primary-nav a{
  font-size:.9rem;
  font-weight:700;
  color:#fff;
  transition:color .2s ease;
}
.primary-nav a:hover{ color:var(--naija-accent); text-decoration:none; }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{
  color:var(--naija-accent);
}

.menu-toggle{
  display:none;
  border:1px solid rgba(255,255,255,.18);
  background:transparent;
  color:#fff;
  border-radius:12px;
  padding:.55rem .75rem;
  font-weight:800;
  cursor:pointer;
}

/* Mobile nav */
@media (max-width: 900px){
  .menu-toggle{ display:inline-flex; align-items:center; gap:.55rem; }
  .primary-nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:64px;
    background:#fff;
    border-bottom:1px solid var(--border);
  }
  .primary-nav.is-open{ display:block; }
  .primary-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    padding:1rem;
  }
  .primary-nav a{
    color:#111827;
    padding:.65rem .85rem;
    border-radius:12px;
  }
  .primary-nav a:hover{
    background:rgba(0,0,0,.05);
    color:#111827;
  }
  .primary-nav .current-menu-item > a,
  .primary-nav .current_page_item > a{
    background:rgba(0,135,81,.12);
    color:#0b1220;
  }
}

/* ---------------------------
   PAGE SECTIONS
---------------------------- */
.section{
  padding:3rem 0;
}

.page-wrap{
  padding:3rem 0;
}

/* HERO (Home.tsx) */
.hero{
  position:relative;
  background:var(--naija-dark);
  color:#fff;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:.30;
  filter:grayscale(100%);
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(15,20,26,1) 0%, rgba(15,20,26,.92) 50%, rgba(15,20,26,0) 100%);
}

.hero-inner{
  position:relative;
  padding:6.25rem 0;
}

.hero h1{
  margin:0 0 1rem 0;
  font-weight:950;
  letter-spacing:-.03em;
  font-size:clamp(2.1rem, 4.2vw, 3.6rem);
}

.hero p{
  margin:0;
  max-width:68ch;
  font-size:1.15rem;
  color:rgba(255,255,255,.78);
}

.hero-actions{
  margin-top:2.2rem;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:.85rem 1.2rem;
  font-weight:800;
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:#fff;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); background:rgba(255,255,255,.08); }

.btn.primary{
  background:var(--naija-green);
  border-color:rgba(0,0,0,.12);
}
.btn.primary:hover{ background:#066b43; }

/* Proverb Section */
.proverb{
  background:var(--naija-light);
}

.proverb-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  font-size:1.9rem;
  font-weight:900;
  margin:0 0 1.5rem 0;
  color:var(--naija-dark);
}

.proverb-card{
  position:relative;
  background:#fff;
  border-radius:22px;
  box-shadow:var(--shadow);
  border:1px solid rgba(0,135,81,.12);
  padding:2rem;
  overflow:hidden;
}

.proverb-accent{
  position:absolute;
  top:0; left:0;
  width:8px;
  height:100%;
  background:var(--naija-green);
}

.proverb-quote{
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:clamp(1.4rem, 2.4vw, 2.1rem);
  margin:0 0 1rem 0;
  color:#1f2937;
}

.proverb-divider{
  width:64px;
  height:4px;
  border-radius:999px;
  background:var(--naija-accent);
  margin:1.2rem auto;
}

.proverb-meaning{
  margin:0;
  font-size:1.05rem;
  color:#4b5563;
  font-weight:650;
}

.proverb-origin{
  margin:.9rem 0 0 0;
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--naija-green);
  text-transform:uppercase;
}

/* Features grid */
.features{
  background:#fff;
}
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
@media (max-width: 900px){
  .grid-3{ grid-template-columns:1fr; }
}

.feature-card{
  background:#f9fafb;
  border-radius:16px;
  padding:1.4rem;
  transition:box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover{
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  transform:translateY(-1px);
}
.feature-icon{
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem;
  font-weight:900;
}

.icon-green{ background:#dcfce7; color:var(--naija-green); }
.icon-yellow{ background:#fef9c3; color:#a16207; }
.icon-purple{ background:#ede9fe; color:#6d28d9; }

.feature-card h3{
  margin:.2rem 0 .35rem 0;
  font-weight:900;
}
.feature-card p{
  margin:0;
  color:#4b5563;
}

/* Page header */
.page-title{
  text-align:center;
  margin:0 0 2.25rem 0;
}
.page-title h1{
  margin:0;
  font-size:2.35rem;
  font-weight:950;
  letter-spacing:-.03em;
}
.page-title p{
  margin:.55rem 0 0 0;
  font-size:1.1rem;
  color:var(--muted);
}

/* Culture layout */
.culture-two-col{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:2.25rem;
  align-items:center;
  margin-bottom:3rem;
}
@media (max-width: 980px){
  .culture-two-col{ grid-template-columns:1fr; }
}

.media-tilt{
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  transform:rotate(1deg);
  transition:transform .5s ease;
}
.media-tilt:hover{ transform:rotate(0deg); }

.culture-h2{
  color:var(--naija-green);
  font-size:1.85rem;
  font-weight:950;
  margin:0 0 .8rem 0;
}
.lead{
  font-size:1.08rem;
  color:#374151;
  margin:0 0 1rem 0;
}
.lead strong{ font-weight:900; }

/* Cards grid */
.grid-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
@media (max-width: 980px){
  .grid-cards{ grid-template-columns:1fr; }
}
.card{
  background:#f9fafb;
  border-radius:16px;
  overflow:hidden;
  transition:box-shadow .2s ease;
}
.card:hover{ box-shadow:0 12px 28px rgba(0,0,0,.10); }
.card img{ width:100%; height:190px; object-fit:cover; }
.card .card-body{ padding:1.3rem; }
.card h3{ margin:0 0 .45rem 0; font-weight:950; }
.card p{ margin:0; color:#4b5563; }

/* Gallery */
.grid-gallery{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.25rem;
}
@media (max-width: 1100px){
  .grid-gallery{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 650px){
  .grid-gallery{ grid-template-columns:1fr; }
}
.gallery-item{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.14);
  transition:box-shadow .25s ease, transform .25s ease;
  background:#000;
}
.gallery-item:hover{
  box-shadow:0 18px 46px rgba(0,0,0,.22);
  transform:translateY(-2px);
}
.gallery-item img{
  width:100%;
  height:260px;
  object-fit:cover;
  transition:transform .5s ease;
  opacity:.98;
}
.gallery-item:hover img{ transform:scale(1.10); }
.gallery-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding:1rem;
  background:linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.85) 100%);
  opacity:0;
  transition:opacity .25s ease;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay p{
  margin:0;
  color:#fff;
  font-weight:950;
  font-size:1.05rem;
}

/* Kitchen */
.kitchen-wrap{
  padding:3rem 0;
}
.kitchen-box{
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.10);
  padding:1.5rem;
  margin-bottom:1.5rem;
}
.kitchen-form{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}
.kitchen-form input[type="text"]{
  flex:1;
  min-width:240px;
  border:1px solid rgba(17,24,39,.18);
  border-radius:14px;
  padding:1rem 1rem;
  font-size:1.05rem;
  outline:none;
}
.kitchen-form input[type="text"]:focus{
  border-color:rgba(0,135,81,.55);
  box-shadow:0 0 0 4px rgba(0,135,81,.12);
}
.kitchen-form button{
  border:0;
  border-radius:14px;
  padding:1rem 1.2rem;
  font-weight:950;
  background:var(--naija-green);
  color:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
}
.kitchen-form button:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.alert{
  border-radius:14px;
  padding:1rem 1rem;
  background:#fef2f2;
  border:1px solid rgba(239,68,68,.22);
  color:#991b1b;
  margin-bottom:1.5rem;
}
.recipe{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.16);
}
.recipe-head{
  background:var(--naija-dark);
  padding:1.4rem 1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.recipe-head h2{
  margin:0;
  color:#fff;
  font-weight:950;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size:1.75rem;
}
.badges{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem .65rem;
  border-radius:999px;
  font-size:.9rem;
  font-weight:850;
  border:1px solid rgba(255,255,255,.14);
  color:#e5e7eb;
  background:rgba(255,255,255,.10);
}
.badge.accent{
  background:var(--naija-accent);
  color:#0b1220;
  border-color:rgba(0,0,0,.08);
}
.recipe-body{
  padding:1.6rem;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:1.6rem;
}
@media (max-width: 980px){
  .recipe-body{ grid-template-columns:1fr; }
}
.ingredients{
  background:var(--naija-light);
  border:1px solid rgba(0,135,81,.16);
  border-radius:16px;
  padding:1.2rem;
  height:fit-content;
}
.ingredients h3{
  margin:0 0 .85rem 0;
  font-weight:950;
  color:var(--naija-green);
  border-bottom:1px solid rgba(0,135,81,.18);
  padding-bottom:.6rem;
}
.ingredients ul{
  margin:0;
  padding:0;
  list-style:none;
}
.ingredients li{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.45rem 0;
  color:#374151;
}
.bullet{
  width:9px; height:9px;
  border-radius:999px;
  background:var(--naija-green);
  margin-top:.55rem;
  flex:0 0 auto;
}
.instructions h3{
  margin:0 0 .85rem 0;
  font-weight:950;
  border-bottom:1px solid rgba(0,0,0,.08);
  padding-bottom:.6rem;
}
.instructions ol{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset: step;
}
.instructions li{
  display:flex;
  gap:.85rem;
  padding:.75rem 0;
}
.step{
  width:34px;
  height:34px;
  border-radius:999px;
  background:var(--naija-dark);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:.9rem;
  flex:0 0 auto;
}
.instructions p{
  margin:0;
  color:#374151;
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns:1fr; }
}

.contact-info{
  background:var(--naija-dark);
  color:#fff;
  border-radius:22px;
  padding:2rem;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.contact-info h3{
  margin:0 0 1.5rem 0;
  font-weight:950;
  font-size:1.45rem;
}
.contact-row{
  display:flex;
  gap:1rem;
  align-items:flex-start;
  padding:1rem 0;
}
.contact-icon{
  width:28px;
  height:28px;
  border-radius:10px;
  background:rgba(0,135,81,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--naija-green);
  font-weight:950;
  flex:0 0 auto;
}
.contact-row p{
  margin:0;
}
.contact-row .label{
  font-weight:900;
  margin-bottom:.15rem;
}
.contact-row .value{
  color:rgba(255,255,255,.70);
}
.quote{
  margin-top:1.5rem;
  padding:1.1rem;
  border-radius:16px;
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.82);
  font-style:italic;
  font-size:.95rem;
}

.form-card{
  background:#fff;
  border-radius:22px;
  padding:2rem;
  box-shadow:0 18px 44px rgba(0,0,0,.12);
}

.form-card label{
  display:block;
  font-size:.92rem;
  font-weight:800;
  color:#374151;
  margin-bottom:.35rem;
}
.form-card input,
.form-card textarea{
  width:100%;
  border:1px solid rgba(17,24,39,.16);
  border-radius:14px;
  padding:.9rem 1rem;
  outline:none;
}
.form-card input:focus,
.form-card textarea:focus{
  border-color:rgba(0,135,81,.55);
  box-shadow:0 0 0 4px rgba(0,135,81,.12);
}
.form-card textarea{ resize:vertical; min-height:140px; }

.form-card button{
  width:100%;
  border:0;
  border-radius:14px;
  padding:.95rem 1rem;
  font-weight:950;
  background:var(--naija-green);
  color:#fff;
  cursor:pointer;
}
.form-card button:hover{ background:#067145; }

.success{
  min-height:320px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.5rem;
}
.success .tick{
  width:64px;
  height:64px;
  border-radius:999px;
  background:#dcfce7;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--naija-green);
  font-weight:950;
  font-size:1.8rem;
  margin-bottom:1rem;
}

/* ---------------------------
   FOOTER (Footer.tsx)
---------------------------- */
.site-footer{
  background:#111827;
  color:#fff;
  padding:2rem 0;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
  flex-wrap:wrap;
}

.footer-brand{
  display:flex;
  flex-direction:column;
  gap:.2rem;
}
.footer-brand .name{
  font-weight:950;
  font-size:1.5rem;
}
.footer-brand .name .pulse{ color:var(--naija-green); }
.footer-brand .tagline{
  color:rgba(255,255,255,.60);
  font-size:.9rem;
}

.footer-links{
  display:flex;
  gap:1.25rem;
  flex-wrap:wrap;
  color:rgba(255,255,255,.60);
  font-size:.92rem;
}
.footer-links a:hover{ color:#fff; text-decoration:none; }

.footer-copy{
  color:rgba(255,255,255,.45);
  font-size:.92rem;
}

/* WP core content (basic) */
.entry-content{ padding:0; }
.entry-content p{ margin:0 0 1rem 0; }
.entry-content a{ color:var(--naija-green); }