/*
Theme Name: Salon Glow
Description: A salon theme with six colour variants, a hero, gallery and booking buttons. Works with the Salon Toolkit plugin.
Version: 1.0.0
Text Domain: salon-glow
*/
:root,.variant-plum{--main:#5B2A4E;--soft:#F7E9F1;--accent:#D9467A;--ink:#2A1A25}
.variant-teal{--main:#0F5257;--soft:#E2F2F0;--accent:#F2A541;--ink:#0E2A2C}
.variant-berry{--main:#A3153F;--soft:#FCE8EE;--accent:#1F6F8B;--ink:#2B1119}
.variant-indigo{--main:#2F3E8F;--soft:#E8EBFA;--accent:#F28F6B;--ink:#151A3A}
.variant-forest{--main:#2E5E3E;--soft:#E6F0E4;--accent:#C9A24B;--ink:#14261A}
.variant-mocha{--main:#5C3D33;--soft:#F3E8E2;--accent:#E58CA5;--ink:#2A1A15}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",system-ui,sans-serif;color:var(--ink);background:#fff;line-height:1.65;font-size:17px}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;line-height:1.15;color:var(--main);margin:0 0 .5em}
h1{font-size:clamp(2.2rem,6vw,3.8rem)}
h2{font-size:clamp(1.7rem,4vw,2.4rem)}
img{max-width:100%;height:auto;display:block}
a{color:var(--main)}
.wrap{width:min(1120px,92%);margin-inline:auto}
.btn{display:inline-block;padding:.85em 1.6em;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;border:0;cursor:pointer}
.btn:hover{filter:brightness(.92)}
.btn.alt{background:transparent;color:var(--main);border:2px solid var(--main)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* header */
.site-header{background:#fff;border-bottom:1px solid var(--soft);position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{font-family:"Fraunces",Georgia,serif;font-size:1.5rem;font-weight:700;color:var(--main);text-decoration:none}
.brand img{max-height:48px;width:auto}
.nav ul{list-style:none;display:flex;gap:22px;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--ink);font-weight:500}
.nav a:hover{color:var(--accent)}
.menu-toggle{display:none;background:none;border:2px solid var(--main);color:var(--main);border-radius:8px;padding:6px 12px;font-weight:600}
@media(max-width:820px){
 .menu-toggle{display:block}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--soft);padding:12px 4%}
 .nav.open{display:block}
 .nav ul{flex-direction:column;gap:12px}
 .header-cta{display:none}
}

/* hero */
.hero{background:var(--soft);padding:56px 0}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero p{max-width:46ch;font-size:1.1rem}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-img{border-radius:240px 240px 24px 24px;overflow:hidden;aspect-ratio:4/5;background:var(--main)}
.hero-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.hero .wrap{grid-template-columns:1fr}.hero-img{order:-1;aspect-ratio:4/3;border-radius:24px}}

/* sections */
.section{padding:64px 0}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-img img{border-radius:24px;width:100%}
@media(max-width:820px){.about .wrap{grid-template-columns:1fr}}
.gallery{background:var(--soft)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-grid img{aspect-ratio:1/1;object-fit:cover;width:100%;border-radius:14px}
@media(max-width:820px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.content-area{max-width:820px}
.cta{background:var(--main);color:#fff;text-align:center}
.cta h2{color:#fff}
.cta .btn{background:#fff;color:var(--main)}

/* footer */
.site-footer{background:var(--ink);color:#fff;padding:36px 0;text-align:center}
.site-footer a{color:#fff}