/*
Theme Name: Maison Atelier Salon
Theme URI: https://example.com/
Author: Cretify
Description: Premium responsive salon theme built as a lightweight classic WordPress theme.
Version: 2.1.0
Requires at least: 6.0
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: maison-atelier
*/

:root {
  --ink: #0b0b0b;
  --ink-2: #111111;
  --paper: #f4f0e8;
  --paper-2: #ebe4d7;
  --cream: #fbf9f4;
  --gold: #c7a66a;
  --gold-soft: #e2c991;
  --muted: #aaa49a;
  --line: rgba(199,166,106,.28);
  --white: #fffdf8;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 42px;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --shadow-soft: 0 12px 40px rgba(0,0,0,.16);
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--white);
  background: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.site-shell { min-height: 100vh; background:
  radial-gradient(circle at 82% 10%, rgba(199,166,106,.12), transparent 28rem),
  linear-gradient(180deg,#0b0b0b 0%,#101010 48%,#0b0b0b 100%);
}
.container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
.narrow { width: min(calc(100% - 40px), 820px); margin: 0 auto; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(18px);
  background: rgba(11,11,11,.84);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav {
  min-height: 82px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand { display:flex; align-items:center; gap:12px; font-family:"Playfair Display",serif; font-size:22px; letter-spacing:.08em; }
.brand-mark { width:38px; height:38px; border:1px solid var(--gold); border-radius:50%; display:grid; place-items:center; color:var(--gold); }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:#d8d3ca; font-size:14px; position:relative; padding:8px 0; }
.nav-links a:after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:.3s; }
.nav-links a:hover:after, .nav-links .current-menu-item a:after { width:100%; }
.nav-cta { padding:12px 20px; border:1px solid var(--gold); border-radius:999px; color:var(--gold); transition:.3s; }
.nav-cta:hover { background:var(--gold); color:var(--ink); transform:translateY(-2px); }
.menu-toggle { display:none; background:none; color:white; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:10px 14px; }

.hero { min-height: calc(100vh - 82px); display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:70px; padding:70px 0 100px; }
.eyebrow { text-transform:uppercase; letter-spacing:.22em; color:var(--gold); font-size:12px; font-weight:600; }
.hero h1 { font: 500 clamp(50px,7vw,92px)/.98 "Playfair Display",serif; margin:20px 0; letter-spacing:-.04em; }
.hero h1 em { color:var(--gold); font-style:italic; }
.hero p { max-width:560px; color:#bcb6ab; font-size:17px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; border-radius:999px; border:1px solid transparent;
  transition:transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease;
  cursor:pointer;
}
.btn:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.25); }
.btn-gold { background:var(--gold); color:#0a0a0a; }
.btn-outline { border-color:rgba(199,166,106,.55); color:var(--gold-soft); background:rgba(255,255,255,.02); }
.btn-light { background:var(--cream); color:#111; }

.hero-media { position:relative; }
.frame {
  border:1px solid var(--line); border-radius:var(--radius-xl); padding:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.015));
  box-shadow:var(--shadow);
}
.frame img { width:100%; height:620px; object-fit:cover; border-radius:calc(var(--radius-xl) - 10px); }
.hero-badge {
  position:absolute; left:-28px; bottom:35px; max-width:240px;
  background:rgba(13,13,13,.9); border:1px solid var(--line); border-radius:22px;
  padding:18px; box-shadow:var(--shadow-soft); backdrop-filter:blur(14px);
}
.hero-badge strong { display:block; font-family:"Playfair Display",serif; font-size:22px; }
.hero-badge span { color:var(--muted); font-size:12px; }

.section { padding:110px 0; }
.section.alt { background:var(--paper); color:#141311; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:45px; }
.section-title { font:500 clamp(38px,5vw,64px)/1.05 "Playfair Display",serif; margin:8px 0; }
.section-copy { color:#9d968a; max-width:560px; }
.alt .section-copy { color:#6e675d; }

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.card {
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  transition:transform .35s, border-color .35s, background .35s;
}
.card:hover { transform:translateY(-7px); border-color:rgba(199,166,106,.65); background:rgba(255,255,255,.07); }
.card h3 { font:500 27px "Playfair Display",serif; margin:12px 0; }
.card p { color:#a7a096; }
.icon { width:48px;height:48px;border:1px solid var(--line);border-radius:14px;display:grid;place-items:center;color:var(--gold); }

.image-card { overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--line); background:#111; box-shadow:var(--shadow-soft); }
.image-card img { width:100%; height:330px; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.image-card:hover img { transform:scale(1.045); }
.image-card .body { padding:22px; }

.editorial { display:grid; grid-template-columns:1fr 1.15fr; gap:50px; align-items:center; }
.editorial-media { position:relative; }
.editorial-media img { border-radius:var(--radius-lg); border:1px solid var(--line); box-shadow:var(--shadow); width:100%; height:620px; object-fit:cover; }
.editorial-stamp { position:absolute; right:-20px; top:35px; width:120px;height:120px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--gold);font-size:11px;letter-spacing:.15em;text-align:center; }

.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.price-card { padding:30px; border:1px solid rgba(199,166,106,.25); border-radius:26px; background:#121212; }
.price-card.featured { background:linear-gradient(160deg,#201a12,#111); border-color:rgba(199,166,106,.65); transform:translateY(-8px); }
.price { font:500 34px "Playfair Display",serif; color:var(--gold-soft); margin:18px 0; }
.price-list { list-style:none;padding:0;margin:0; }
.price-list li { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08); color:#bcb6ab; }

.gallery-grid { columns:3 280px; column-gap:18px; }
.gallery-item { break-inside:avoid; margin-bottom:18px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:#111; box-shadow:var(--shadow-soft); }
.gallery-item img { width:100%; height:auto; transition:transform .6s; }
.gallery-item:hover img { transform:scale(1.035); }

.page-hero { padding:110px 0 70px; border-bottom:1px solid rgba(255,255,255,.08); }
.page-hero h1 { font:500 clamp(48px,7vw,84px)/1 "Playfair Display",serif; margin:14px 0; }
.page-hero p { color:#aaa49a; max-width:650px; font-size:17px; }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1/-1; }
.field label { color:#d5cfc4; font-size:13px; }
.field input,.field select,.field textarea {
  width:100%; border:1px solid rgba(255,255,255,.12); background:#141414;
  color:#fff; border-radius:14px; padding:14px 15px; outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(199,166,106,.09); }
.field textarea { min-height:150px; resize:vertical; }

.site-footer { padding:60px 0 30px; border-top:1px solid rgba(255,255,255,.08); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:35px; }
.footer-title { color:var(--gold); text-transform:uppercase; letter-spacing:.15em; font-size:11px; }
.footer-links { display:grid; gap:8px; color:#aaa49a; font-size:14px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:45px; padding-top:20px; color:#777; font-size:12px; display:flex; justify-content:space-between; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.parallax { transform:translateY(var(--parallax,0)); will-change:transform; }

.notice { padding:14px 18px; border:1px solid var(--line); border-radius:14px; margin:0 0 24px; color:#d9d2c7; background:rgba(199,166,106,.06); }

@media (max-width: 900px) {
  .nav-links { position:absolute; left:20px; right:20px; top:76px; padding:18px; display:none; flex-direction:column; align-items:flex-start; background:#101010; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .menu-toggle { display:block; }
  .nav-cta { display:none; }
  .hero,.editorial { grid-template-columns:1fr; gap:40px; }
  .hero { padding-top:55px; }
  .frame img { height:500px; }
  .hero-badge { left:14px; bottom:20px; }
  .grid-3,.price-grid { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 600px) {
  .container,.narrow { width:min(calc(100% - 28px), var(--container)); }
  .hero h1 { font-size:48px; }
  .section { padding:75px 0; }
  .frame { padding:7px; border-radius:25px; }
  .frame img { height:420px; border-radius:19px; }
  .editorial-media img { height:430px; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .parallax { transform:none !important; }
}


/* MOBILE POLISH + CONTRAST FIXES */
.section.alt .card{color:#141311;background:rgba(255,253,248,.94);border-color:rgba(20,19,17,.12);box-shadow:0 18px 45px rgba(35,29,20,.10)}
.section.alt .card h3{color:#141311}.section.alt .card p{color:#6e675d}
.section.alt .card .icon{color:#8f6f38;border-color:rgba(143,111,56,.28);background:rgba(199,166,106,.07)}
.section.alt .image-card{color:#141311;background:#fffdf8;border-color:rgba(20,19,17,.12);box-shadow:0 18px 45px rgba(35,29,20,.12)}
.section.alt .image-card .body{background:#fffdf8}.section.alt .image-card .body h3{color:#141311;margin:8px 0 0}
.section.alt .image-card .body .eyebrow{color:#8f6f38}.section.alt .image-card img{background:#e8e1d5}
.section.alt .btn-outline{color:#715528;border-color:rgba(113,85,40,.45);background:rgba(255,255,255,.35)}
.section.alt .btn-outline:hover{background:#715528;color:#fffdf8}
h1,h2,h3,p{overflow-wrap:break-word}.section-title,.hero h1{ text-wrap:balance }.section-copy{text-wrap:pretty}

.menu-toggle{width:46px;height:46px;padding:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(255,255,255,.045);border:1px solid rgba(199,166,106,.35);border-radius:14px;color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:background .3s ease,border-color .3s ease,transform .3s ease}
.menu-toggle span{display:block;width:18px;height:1.5px;border-radius:2px;background:#e7ddce;transition:transform .3s ease,opacity .2s ease,width .3s ease}
.menu-toggle:hover{background:rgba(199,166,106,.10);border-color:rgba(199,166,106,.65)}
.menu-toggle.is-open{background:rgba(199,166,106,.10)}
.menu-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.is-open span:nth-child(2){opacity:0;width:8px}
.menu-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:900px){
  body.mobile-menu-open{overflow:hidden}
  .nav{min-height:76px;position:relative}
  .brand{min-width:0;font-size:17px;letter-spacing:.055em;gap:9px}
  .brand-mark{width:34px;height:34px;flex:0 0 34px}
  .menu-toggle{display:flex;margin-left:auto;flex:0 0 46px;position:relative;z-index:102}
  .nav-links{position:fixed;z-index:101;top:76px;left:14px;right:14px;max-height:calc(100vh - 92px);overflow:auto;padding:24px 20px 20px;display:flex;flex-direction:column;align-items:stretch;gap:4px;background:radial-gradient(circle at 90% 0%,rgba(199,166,106,.13),transparent 220px),rgba(14,14,14,.985);border:1px solid rgba(199,166,106,.24);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.55);backdrop-filter:blur(22px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px) scale(.985);transform-origin:top center;transition:opacity .28s ease,transform .28s ease,visibility .28s ease}
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-links a{display:flex;align-items:center;min-height:52px;padding:13px 12px;border-radius:13px;color:#eee7dc;font-family:"DM Sans",Arial,sans-serif;font-size:15px;letter-spacing:.01em;transition:background .25s ease,color .25s ease,padding-left .25s ease}
  .nav-links a:after{display:none}.nav-links a:hover,.nav-links .current-menu-item a{background:rgba(199,166,106,.10);color:#f0d8a4;padding-left:17px}
  .nav-links li:last-child a{margin-top:10px;justify-content:center;background:var(--gold);color:#111;font-weight:600}
  .nav-links li:last-child a:hover{background:#d7b87a;color:#111;padding-left:12px}
  .nav-cta{display:none}
  .hero{min-height:auto;grid-template-columns:1fr;gap:30px;padding:46px 0 72px}
  .hero h1{font-size:clamp(42px,13vw,60px);line-height:.98;letter-spacing:-.045em;max-width:100%}
  .hero p{font-size:15px;line-height:1.7;max-width:100%}.actions{gap:10px}.btn{min-height:48px;padding:12px 17px}
  .hero-media{width:100%}.frame img{height:clamp(340px,105vw,480px)}
  .hero-badge{left:12px;right:12px;bottom:12px;max-width:none;padding:14px 15px;border-radius:17px}.hero-badge strong{font-size:19px}
  .section{padding:78px 0}.section-head{align-items:flex-start;flex-direction:column;gap:18px;margin-bottom:30px}
  .section-title{font-size:clamp(34px,9.8vw,48px);line-height:1.03;max-width:100%}.section-copy{font-size:15px;line-height:1.7;max-width:100%}
  .grid-3,.grid-2,.price-grid{grid-template-columns:1fr}.card{padding:22px;border-radius:22px}.image-card{border-radius:22px}.image-card img{height:270px}.image-card .body{padding:18px}
  .editorial{grid-template-columns:1fr;gap:32px}.editorial-media img{height:clamp(330px,105vw,500px)}
  .editorial-stamp{right:10px;top:16px;width:92px;height:92px;font-size:9px}
  .price-card{padding:24px;border-radius:22px}.price-card.featured{transform:none}
}
@media (max-width:600px){
  .container,.narrow{width:min(calc(100% - 28px),var(--container))}
  .brand span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:185px}
  .nav-links{top:70px;max-height:calc(100vh - 84px)}.nav{min-height:70px}
  .hero h1{font-size:clamp(39px,12.5vw,53px);line-height:1}.hero h1 br{display:none}
  .section-title{font-size:clamp(33px,10vw,46px)}.actions .btn{width:100%}
  .frame{padding:6px;border-radius:23px}.frame img{height:min(112vw,430px);border-radius:17px}
  .section.alt .section-head .btn,.section-head>.btn{width:auto}
  .image-card img{height:min(74vw,320px)}.editorial-media img{height:min(110vw,430px)}.price{font-size:31px}
}
@media (max-width:380px){
  .container,.narrow{width:calc(100% - 22px)}.brand{font-size:15px}.brand-mark{width:31px;height:31px;flex-basis:31px}
  .menu-toggle{width:42px;height:42px;flex-basis:42px}.hero h1{font-size:38px}.section-title{font-size:32px}.nav-links{left:10px;right:10px;border-radius:20px}
}