/*
Theme Name: Melanie's Hair Expressions
Theme URI: https://example.com/
Author: ChatGPT
Description: Clean, modern salon theme with sage green accents.
Version: 1.0.0
Text Domain: melanies-hair-expressions
*/

/* CSS Reset (minimal) */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #1f2937; background: #ffffff; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: #2f6d4a; text-decoration: none; }
a:hover { text-decoration: underline; }

:root{
  --sage: #8AA88B;        /* main accent */
  --sage-700: #2f6d4a;
  --ink: #1f2937;         /* dark text */
  --muted: #6b7280;       /* secondary text */
  --bg-soft: #f6f8f7;     /* subtle gray-green */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(31,41,55,0.08);
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #e5e7eb; }
.nav { display:flex; align-items:center; justify-content:space-between; gap: 20px; height: 72px; }
.brand { display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:0.2px; }
.brand-mark { width:36px; height:36px; border-radius: 10px; background: var(--sage); display:grid; place-items:center; color:#fff; font-weight:800; box-shadow: var(--shadow); }
.nav ul { list-style:none; margin:0; padding:0; display:flex; gap:20px; }
.nav a { font-weight:600; color: var(--ink); }
.nav a.cta { background: var(--sage); color: #fff; padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow); }
.nav a.cta:hover{ filter: brightness(0.95); text-decoration:none; }

/* Hero */
.hero { display:grid; align-items:center; padding: clamp(40px, 6vw, 96px) 0; background: linear-gradient(180deg, #ffffff 0%, var(--bg-soft) 100%); }
.hero-inner{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(24px,4vw,48px); }
.hero h1{ font-size: clamp(28px, 5vw, 46px); margin: 0 0 12px; line-height:1.15; }
.hero p{ color: var(--muted); font-size: 18px; margin:0 0 20px; }
.hero .cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius: 12px; border:1px solid transparent; font-weight:700; box-shadow: var(--shadow); }
.btn-primary{ background: var(--sage); color:#fff; }
.btn-outline{ background:#fff; border-color:#e5e7eb; color: var(--ink); }
.hero-card{ background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); }
.hero-card h3{ margin:0 0 8px; font-size:16px; }
.hero-card p{ margin:0; color: var(--muted); font-size:14px; }

/* Sections */
.section { padding: clamp(36px,5vw,72px) 0; }
.section h2 { font-size: clamp(22px,3.5vw,32px); margin:0 0 16px; }
.section .lead { color: var(--muted); margin:0 0 28px; }

/* Services */
.services-grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(260px,1fr) ); gap: 16px; }
.service-card { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding:18px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:6px; }
.service-name { font-weight:700; }
.service-price { margin-left:auto; white-space:nowrap; color: var(--sage-700); font-weight:700; }
.service-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 0; border-bottom: 1px dashed #e5e7eb; }
.service-row:last-child{ border-bottom:0; }
.service-desc { color: var(--muted); font-size:14px; }

/* Cards / panels */
.panel { background:#fff; border:1px solid #e5e7eb; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }

/* Footer */
.site-footer { background:#0f172a; color:#e5e7eb; }
.site-footer a{ color:#d1fae5; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; padding: 40px 0; }
.footer-legal{ border-top:1px solid rgba(255,255,255,.1); padding:16px 0; font-size:14px; color:#a1a1aa; }

/* Responsive tweaks */
@media (max-width: 900px){ .hero-inner { grid-template-columns: 1fr; } }