/*
Theme Name: Zahida Haircare
Theme URI: https://example.com/zahida-haircare
Author: Zahida Haircare
Author URI: https://example.com
Description: A natural, herbal-inspired WordPress theme for Zahida Haircare — hair growth formula for smooth, shiny & strong hair. Built with a hero banner, product feature grid, ingredients list, about us section and a WhatsApp ordering call-to-action. Fully editable via Appearance > Customize (WhatsApp number, phone, hero text, colors) and the WordPress menu/widget system.
Version: 1.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zahida-haircare
Tags: e-commerce, one-column, custom-menu, custom-colors, featured-images, footer-widgets, translation-ready
*/

/* =========================================================
   1. VARIABLES
========================================================= */
:root{
  --zh-dark-green: #10230b;
  --zh-dark-green-2: #16300f;
  --zh-mid-green: #2e5c1d;
  --zh-lime: #a7d13a;
  --zh-lime-light: #c7e86b;
  --zh-cream: #fbfbf5;
  --zh-white: #ffffff;
  --zh-text-dark: #1c1c1c;
  --zh-text-muted: #5c6b52;
  --zh-radius: 14px;
  --zh-shadow: 0 10px 30px rgba(16,35,11,0.15);
  --zh-container: 1180px;
  --zh-font-heading: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --zh-font-body: 'Nunito Sans', 'Segoe UI', Arial, sans-serif;
}

/* =========================================================
   2. RESET / BASE
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--zh-font-body);
  color: var(--zh-text-dark);
  background: var(--zh-cream);
  line-height:1.65;
  font-size:17px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{
  font-family: var(--zh-font-heading);
  line-height:1.2;
  margin:0 0 .5em;
  color: var(--zh-dark-green);
}
.container{
  max-width: var(--zh-container);
  margin:0 auto;
  padding:0 24px;
}
section{ padding: 72px 0; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  border-radius: 50px;
  font-weight:700;
  font-family: var(--zh-font-heading);
  font-size:16px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  border:2px solid transparent;
  cursor:pointer;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--zh-lime);
  color: var(--zh-dark-green);
  box-shadow: 0 8px 20px rgba(167,209,58,0.4);
}
.btn-primary:hover{ background: var(--zh-lime-light); }
.btn-outline{
  background: transparent;
  border-color: var(--zh-white);
  color: var(--zh-white);
}
.btn-outline:hover{ background: rgba(255,255,255,0.12); }
.btn-whatsapp{
  background:#25D366;
  color:#fff;
  box-shadow: 0 8px 20px rgba(37,211,102,0.4);
}
.btn-whatsapp:hover{ background:#1ebe5b; color:#fff; }
.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:13px;
  font-weight:700;
  color: var(--zh-mid-green);
  background: rgba(167,209,58,0.18);
  padding:6px 16px;
  border-radius: 50px;
  margin-bottom:16px;
}

/* =========================================================
   3. HEADER
========================================================= */
.site-header{
  background: var(--zh-dark-green);
  position: sticky;
  top:0;
  z-index: 999;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
}
.site-branding{ display:flex; align-items:center; gap:12px; }
.site-branding a{ display:flex; align-items:center; gap:10px; }
.site-title{
  font-family: var(--zh-font-heading);
  font-size:28px;
  font-weight:800;
  color: var(--zh-lime);
  letter-spacing:1px;
  margin:0;
}
.site-description{
  font-size:12px;
  color: rgba(255,255,255,0.65);
  margin:0;
  font-style: italic;
}
.main-navigation ul{
  display:flex;
  gap:32px;
  align-items:center;
}
.main-navigation a{
  color: var(--zh-white);
  font-weight:600;
  font-size:15px;
  padding:8px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{
  border-color: var(--zh-lime);
  color: var(--zh-lime);
}
.header-cta{ display:flex; align-items:center; gap:14px; }
.header-cta .btn{ padding:10px 20px; font-size:14px; }
.menu-toggle{
  display:none;
  background:none;
  border:2px solid var(--zh-lime);
  color: var(--zh-lime);
  border-radius:8px;
  padding:8px 12px;
  font-size:20px;
  cursor:pointer;
}

@media (max-width: 860px){
  .main-navigation{
    display:none;
    width:100%;
    order:3;
  }
  .main-navigation.is-open{ display:block; }
  .main-navigation ul{ flex-direction:column; align-items:flex-start; gap:4px; padding:16px 0; }
  .site-header .container{ flex-wrap:wrap; }
  .menu-toggle{ display:inline-block; }
  .header-cta .btn span.btn-text{ display:none; }
}

/* =========================================================
   4. HERO
========================================================= */
.hero{
  background: radial-gradient(circle at 80% 20%, var(--zh-mid-green) 0%, var(--zh-dark-green) 55%, var(--zh-dark-green-2) 100%);
  color: var(--zh-white);
  position:relative;
  overflow:hidden;
  padding: 90px 0;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: url('assets/images/poster-source.jpg') center right / cover no-repeat;
  opacity:0.14;
  mix-blend-mode: luminosity;
  pointer-events:none;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:48px;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero h1{
  color: var(--zh-white);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight:800;
  margin-bottom:14px;
}
.hero h1 .highlight{
  color: var(--zh-lime);
  display:block;
  font-size: clamp(40px, 5.5vw, 68px);
  letter-spacing: 1px;
}
.hero p.lead{
  font-size:19px;
  color: rgba(255,255,255,0.85);
  max-width: 520px;
  margin-bottom:30px;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:32px;
}
.hero-badges span{
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(167,209,58,0.4);
  color: var(--zh-lime-light);
  font-size:13px;
  font-weight:700;
  padding:8px 14px;
  border-radius:50px;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-image{
  position:relative;
  display:flex;
  justify-content:center;
}
.hero-image img{
  max-width: 360px;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.45));
}
.hero-image .badge-circle{
  position:absolute;
  top:-10px;
  left:-10px;
  width:120px;
  height:120px;
  border-radius:50%;
  background: var(--zh-lime);
  color: var(--zh-dark-green);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family: var(--zh-font-heading);
  font-weight:800;
  font-size:13px;
  line-height:1.3;
  box-shadow: var(--zh-shadow);
  transform: rotate(-12deg);
}
.hero-image .price-tag{
  position:absolute;
  bottom:6px;
  right:-6px;
  background: var(--zh-white);
  color: var(--zh-dark-green);
  border-radius: 50px;
  padding:10px 22px;
  font-family: var(--zh-font-heading);
  font-weight:800;
  font-size:18px;
  box-shadow: var(--zh-shadow);
  border: 2px solid var(--zh-lime);
  transform: rotate(4deg);
}


@media (max-width: 860px){
  .hero .container{ grid-template-columns:1fr; text-align:center; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-badges, .hero-actions{ justify-content:center; }
  .hero-image .badge-circle{ left:calc(50% - 190px); }
  .hero-image .price-tag{ right:calc(50% - 190px); }
}

/* =========================================================
   5. FEATURES
========================================================= */
.features{ background: var(--zh-cream); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head h2{ font-size: clamp(26px,3vw,38px); }
.section-head p{ color: var(--zh-text-muted); font-size:17px; }

.features-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:24px;
}
.feature-card{
  background: var(--zh-white);
  border-radius: var(--zh-radius);
  padding:32px 24px;
  text-align:center;
  box-shadow: 0 6px 20px rgba(16,35,11,0.06);
  border: 1px solid rgba(46,92,29,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{ transform: translateY(-6px); box-shadow: var(--zh-shadow); }
.feature-icon{
  width:64px;
  height:64px;
  margin:0 auto 18px;
  border-radius:50%;
  background: rgba(167,209,58,0.18);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
}
.feature-card h3{ font-size:17px; margin-bottom:6px; }
.feature-card p{ color: var(--zh-text-muted); font-size:14px; margin:0; }

@media (max-width: 860px){
  .features-grid{ grid-template-columns: repeat(2,1fr); }
}

/* =========================================================
   6. PRODUCT / INGREDIENTS
========================================================= */
.ingredients{
  background: var(--zh-dark-green);
  color: var(--zh-white);
}
.ingredients .container{
  display:grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap:56px;
  align-items:center;
}
.ingredients-image{ text-align:center; }
.ingredients-image img{ max-width:300px; margin:0 auto; filter: drop-shadow(0 25px 35px rgba(0,0,0,0.5)); }
.ingredients h2{ color: var(--zh-white); }
.ingredients .section-lead{ color: rgba(255,255,255,0.75); margin-bottom:28px; max-width:560px; }
.ingredients-list{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px 20px;
  margin-bottom:32px;
}
.ingredients-list li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  color: var(--zh-lime-light);
}
.ingredients-list li::before{
  content:"✓";
  color: var(--zh-lime);
  font-weight:900;
}
.free-from{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.free-from span{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:10px;
  padding:10px 16px;
  font-size:13px;
  font-weight:700;
}

@media (max-width: 860px){
  .ingredients .container{ grid-template-columns:1fr; text-align:center; }
  .ingredients-list{ grid-template-columns: repeat(2,1fr); text-align:left; }
  .free-from{ justify-content:center; }
}

/* =========================================================
   7. ABOUT US
========================================================= */
.about{ background: var(--zh-white); }
.about .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:56px;
  align-items:center;
}
.about-stats{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  margin-top:28px;
}
.about-stats div{
  background: var(--zh-cream);
  border-radius: var(--zh-radius);
  padding:20px 12px;
  text-align:center;
}
.about-stats strong{
  display:block;
  font-family: var(--zh-font-heading);
  font-size:26px;
  color: var(--zh-mid-green);
}
.about-stats span{ font-size:12px; color: var(--zh-text-muted); font-weight:600; }
.about-image{
  border-radius: var(--zh-radius);
  overflow:hidden;
  box-shadow: var(--zh-shadow);
}

@media (max-width: 860px){
  .about .container{ grid-template-columns:1fr; }
  .about-image{ order:-1; }
}

/* =========================================================
   8. TESTIMONIAL / RESULTS STRIP
========================================================= */
.results-strip{
  background: var(--zh-lime);
  color: var(--zh-dark-green);
  text-align:center;
  padding: 40px 0;
}
.results-strip .container{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  font-family: var(--zh-font-heading);
  font-weight:800;
}
.results-strip .item{ display:flex; flex-direction:column; }
.results-strip .item span{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; }

/* =========================================================
   9. CONTACT / ORDER
========================================================= */
.contact{
  background: var(--zh-dark-green-2);
  color: var(--zh-white);
}
.contact .container{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
}
.contact-card{
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius: var(--zh-radius);
  padding:32px;
}
.contact-card h3{ color: var(--zh-white); font-size:20px; margin-bottom:16px; }
.contact-info-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:18px;
}
.contact-info-item .icon{
  width:42px; height:42px;
  border-radius:10px;
  background: rgba(167,209,58,0.18);
  color: var(--zh-lime);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:18px;
}
.contact-info-item h4{ color:var(--zh-white); font-size:15px; margin:0 0 4px; }
.contact-info-item p, .contact-info-item a{ color: rgba(255,255,255,0.75); font-size:15px; margin:0; }
.whatsapp-order-box{
  background: var(--zh-lime);
  color: var(--zh-dark-green);
  border-radius: var(--zh-radius);
  padding:32px;
  text-align:center;
}
.whatsapp-order-box h3{ color: var(--zh-dark-green); font-size:22px; }
.whatsapp-order-box p{ color: rgba(16,35,11,0.75); margin-bottom:22px; }
.whatsapp-order-box .btn-whatsapp{ font-size:18px; padding:16px 32px; }

@media (max-width: 860px){
  .contact .container{ grid-template-columns:1fr; }
}

/* =========================================================
   10. FOOTER
========================================================= */
.site-footer{
  background: var(--zh-dark-green);
  color: rgba(255,255,255,0.7);
  padding: 56px 0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:40px;
  padding-bottom:36px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-grid h4{ color: var(--zh-white); font-size:15px; margin-bottom:16px; text-transform:uppercase; letter-spacing:1px;}
.footer-grid p, .footer-grid a{ color: rgba(255,255,255,0.65); font-size:14px; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid ul li a:hover{ color: var(--zh-lime); }
.footer-bottom{
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:13px;
}
.social-links{ display:flex; gap:12px; }
.social-links a{
  width:36px; height:36px;
  border-radius:50%;
  background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
}
.social-links a:hover{ background: var(--zh-lime); color: var(--zh-dark-green); }

@media (max-width: 860px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   11. WHATSAPP FLOAT BUTTON
========================================================= */
.whatsapp-float{
  position:fixed;
  bottom:24px;
  right:24px;
  background:#25D366;
  color:#fff;
  width:60px;
  height:60px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 998;
  transition: transform .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); color:#fff; }

/* =========================================================
   12. GENERIC PAGE / SINGLE CONTENT
========================================================= */
.page-content-wrap{ padding: 60px 0; }
.entry-content{ max-width: 820px; margin:0 auto; }
.entry-content h1{ font-size:36px; margin-bottom:24px; }
.entry-content img{ border-radius: var(--zh-radius); margin: 20px 0; }
.entry-content a{ color: var(--zh-mid-green); text-decoration:underline; }
.widget-area{ margin-top:40px; }
.widget{ margin-bottom:32px; }
.widget h2, .widget h3{ font-size:18px; }