/* ============================================
   Hair Gel — Global Stylesheet
   Warm / neutral palette · No blue or purple
   ============================================ */

/* ---------- Custom Properties ---------- */
:root {
  --color-primary:    #2C2C2C;
  --color-accent:     #C8913A;
  --color-accent-dark:#A6762E;
  --color-bg:         #FAF8F5;
  --color-bg-alt:     #F2EDEA;
  --color-text:       #333333;
  --color-text-light: #6B6B6B;
  --color-border:     #E0D8D0;
  --color-white:      #FFFFFF;
  --color-dark:       #1A1A1A;
  --font-heading:     'Georgia', 'Times New Roman', serif;
  --font-body:        'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --max-width:        1140px;
  --radius:           6px;
  --shadow:           0 2px 8px rgba(0,0,0,.08);
  --transition:       .25s ease;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-accent-dark);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--color-accent)}
ul,ol{list-style:none}

/* ---------- Utility ---------- */
.container{width:90%;max-width:var(--max-width);margin:0 auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.btn{
  display:inline-block;
  padding:.75rem 1.75rem;
  border-radius:var(--radius);
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  transition:background var(--transition),color var(--transition);
  border:none;
  text-align:center;
}
.btn-primary{background:var(--color-accent);color:var(--color-white)}
.btn-primary:hover{background:var(--color-accent-dark);color:var(--color-white)}
.btn-outline{border:2px solid var(--color-accent);color:var(--color-accent);background:transparent}
.btn-outline:hover{background:var(--color-accent);color:var(--color-white)}
.section{padding:4rem 0}
.section-alt{background:var(--color-bg-alt)}
.text-center{text-align:center}
.text-accent{color:var(--color-accent)}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-primary);line-height:1.25;margin-bottom:.75rem}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.5rem}
h4{font-size:1.25rem}
p{margin-bottom:1rem}

/* ---------- Header / Nav ---------- */
.site-header{
  background:var(--color-white);
  border-bottom:1px solid var(--color-border);
  padding:1rem 0;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.logo{font-family:var(--font-heading);font-size:1.6rem;font-weight:700;color:var(--color-primary)}
.logo span{color:var(--color-accent)}

/* Hamburger */
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--color-primary)}

.main-nav ul{display:flex;gap:1.5rem}
.main-nav a{
  font-weight:500;
  color:var(--color-text);
  padding:.35rem 0;
  position:relative;
}
.main-nav a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--color-accent);transition:width var(--transition);
}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{width:100%}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--color-accent)}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg,var(--color-dark) 0%,#3E3529 100%);
  color:var(--color-white);
  padding:5rem 0;
  text-align:center;
}
.hero h1{color:var(--color-white);margin-bottom:1rem}
.hero p{color:#d5cfc9;max-width:650px;margin:0 auto 2rem;font-size:1.1rem}

/* ---------- Cards Grid ---------- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
}
.card{
  background:var(--color-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:2rem;
  transition:transform var(--transition),box-shadow var(--transition);
}
.card:hover{transform:translateY(-4px);box-shadow:0 6px 20px rgba(0,0,0,.1)}
.card h3{margin-top:.5rem}
.card-icon{font-size:2rem;color:var(--color-accent);margin-bottom:.5rem}

/* ---------- Steps ---------- */
.steps{counter-reset:step}
.step{
  counter-increment:step;
  display:flex;
  align-items:flex-start;
  gap:1.5rem;
  margin-bottom:2.5rem;
}
.step::before{
  content:counter(step);
  flex-shrink:0;
  width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-accent);color:var(--color-white);
  border-radius:50%;font-weight:700;font-size:1.2rem;
}

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
  align-items:start;
}
.pricing-card{
  background:var(--color-white);
  border:2px solid var(--color-border);
  border-radius:var(--radius);
  padding:2.5rem 2rem;
  text-align:center;
  transition:border-color var(--transition);
}
.pricing-card.featured{border-color:var(--color-accent);position:relative}
.pricing-card.featured::before{
  content:'Popular';
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--color-accent);color:var(--color-white);
  padding:.2rem 1rem;border-radius:20px;font-size:.8rem;font-weight:600;
}
.pricing-card .price{font-size:2.5rem;font-weight:700;color:var(--color-primary);margin:.75rem 0}
.pricing-card .price span{font-size:1rem;color:var(--color-text-light)}
.pricing-card ul{margin:1.5rem 0;text-align:left}
.pricing-card li{padding:.4rem 0;padding-left:1.4rem;position:relative;color:var(--color-text-light)}
.pricing-card li::before{content:'✓';position:absolute;left:0;color:var(--color-accent);font-weight:700}

/* ---------- FAQ Accordion ---------- */
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--color-border);padding:1.25rem 0}
.faq-item summary{
  font-weight:600;font-size:1.05rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;
  color:var(--color-primary);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--color-accent);transition:transform var(--transition)}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin-top:.75rem;color:var(--color-text-light)}

/* ---------- Author Bio ---------- */
.author-box{
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  background:var(--color-bg-alt);
  border-radius:var(--radius);
  padding:2rem;
  margin-top:3rem;
}
.author-avatar{
  flex-shrink:0;
  width:80px;height:80px;
  border-radius:50%;
  background:var(--color-accent);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-white);font-size:2rem;font-weight:700;
  font-family:var(--font-heading);
}
.author-info h4{margin-bottom:.25rem}
.author-info .author-title{color:var(--color-accent);font-size:.9rem;margin-bottom:.5rem}
.author-info p{font-size:.95rem;color:var(--color-text-light);margin-bottom:0}

/* ---------- Blog Cards ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:2rem;
}
.blog-card{
  background:var(--color-white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:transform var(--transition);
}
.blog-card:hover{transform:translateY(-4px)}
.blog-card-thumb{
  width:100%;
  height:200px;
  background:var(--color-bg-alt);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-text-light);font-size:.9rem;
}
.blog-card-body{padding:1.5rem}
.blog-card-body h3{font-size:1.15rem}
.blog-card-body .meta{font-size:.85rem;color:var(--color-text-light);margin-bottom:.5rem}
.blog-card-body .excerpt{font-size:.93rem;color:var(--color-text-light)}
.blog-card-body .tag{
  display:inline-block;
  background:var(--color-bg-alt);
  color:var(--color-text-light);
  padding:.15rem .6rem;
  border-radius:20px;
  font-size:.78rem;
  margin-top:.5rem;
  margin-right:.3rem;
}

/* Pagination */
.pagination{display:flex;justify-content:center;gap:.5rem;margin-top:2.5rem;flex-wrap:wrap}
.pagination a,.pagination span{
  padding:.5rem 1rem;border-radius:var(--radius);
  border:1px solid var(--color-border);color:var(--color-text);font-size:.9rem;
}
.pagination .active{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.pagination a:hover{background:var(--color-bg-alt)}

/* Filter buttons */
.filter-bar{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem;align-items:center}
.filter-btn{
  padding:.45rem 1.1rem;border-radius:20px;border:1px solid var(--color-border);
  background:var(--color-white);color:var(--color-text);cursor:pointer;font-size:.88rem;
  transition:background var(--transition),color var(--transition),border-color var(--transition);
}
.filter-btn:hover,.filter-btn.active{background:var(--color-accent);color:var(--color-white);border-color:var(--color-accent)}
.search-box{
  padding:.5rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius);
  font-size:.9rem;width:220px;max-width:100%;
}

/* ---------- Contact Form ---------- */
.contact-form{max-width:640px;margin:0 auto}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-weight:600;margin-bottom:.35rem;font-size:.95rem}
.form-group input,.form-group textarea,.form-group select{
  width:100%;padding:.7rem 1rem;border:1px solid var(--color-border);
  border-radius:var(--radius);font-size:.95rem;font-family:var(--font-body);
  background:var(--color-white);transition:border-color var(--transition);
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
  outline:none;border-color:var(--color-accent);
}
.form-group textarea{resize:vertical;min-height:140px}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--color-dark);
  color:#b8b0a5;
  padding:3rem 0 1.5rem;
  font-size:.9rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2rem;
  margin-bottom:2rem;
}
.footer-col h4{color:var(--color-white);margin-bottom:.75rem;font-size:1rem}
.footer-col a{color:#b8b0a5;display:block;padding:.25rem 0}
.footer-col a:hover{color:var(--color-accent)}
.footer-bottom{
  border-top:1px solid #3a352e;
  padding-top:1.25rem;
  text-align:center;
  font-size:.85rem;
  color:#7a7268;
}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  h1{font-size:2rem}
  h2{font-size:1.6rem}
  .hero{padding:3.5rem 0}
  .nav-toggle{display:block}
  .main-nav{
    width:100%;
    max-height:0;overflow:hidden;
    transition:max-height .35s ease;
  }
  .main-nav.open{max-height:500px}
  .main-nav ul{
    flex-direction:column;
    gap:0;
    padding-top:1rem;
  }
  .main-nav li{border-bottom:1px solid var(--color-border)}
  .main-nav a{display:block;padding:.75rem 0}
  .author-box{flex-direction:column;align-items:center;text-align:center}
  .step{flex-direction:column;align-items:center;text-align:center}
  .filter-bar{justify-content:center}
  .search-box{width:100%}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.nav-toggle{display:none}
  body{font-size:12pt;color:#000;background:#fff}
}