/*
Theme Name: YKL Studio
Theme URI: https://example.com
Author: Custom Build
Description: A boutique nails & brows studio theme — split hero, service grid, testimonials, and gallery, tied together with a hand-drawn thread motif. Built as a classic WordPress theme with Customizer controls, no page-builder dependency.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: ykl-studio
*/

/* ============ TOKENS ============ */
:root{
  --cream:#F7F4F1;
  --beige:#E9E1DA;
  --rose:#CFA6A6;
  --mauve:#A48D83;
  --ink:#1A1A1A;
  --cream-rgb:247,244,241;

  --font-display:'Playfair Display', Georgia, serif;
  --font-script:'Parisienne', cursive;
  --font-body:'Jost', -apple-system, sans-serif;

  --max:1180px;
  --gap:24px;
  --radius:2px;
  --transition:0.35s cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--max);margin:0 auto;padding:0 32px;}
@media(max-width:600px){.container{padding:0 20px;}}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  margin:0 0 .4em;
  line-height:1.15;
  color:var(--ink);
}
.eyebrow{
  font-family:var(--font-body);
  font-size:12px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mauve);
  display:inline-block;
  margin-bottom:14px;
}
.script{
  font-family:var(--font-script);
  font-weight:400;
  font-size:2rem;
  color:var(--rose);
  line-height:1;
}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 34px;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  background:transparent;
  color:var(--ink);
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.btn:hover{background:var(--ink);color:var(--cream);}
.btn.btn-fill{background:var(--ink);color:var(--cream);}
.btn.btn-fill:hover{background:var(--rose);border-color:var(--rose);color:var(--ink);}
.btn.btn-rose{border-color:var(--rose);color:var(--ink);}
.btn.btn-rose:hover{background:var(--rose);}

/* ============ DIVIDER (signature thread motif) ============ */
.thread-divider{
  display:block;
  width:100%;
  max-width:280px;
  height:36px;
  margin:0 auto;
}
.thread-divider path{
  fill:none;
  stroke:var(--mauve);
  stroke-width:1;
}
.thread-divider.align-left{margin:0;}

/* ============ HEADER ============ */
#site-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:100;
  padding:34px 0;
}
#site-header.is-solid{
  position:fixed;
  background:rgba(var(--cream-rgb),.96);
  backdrop-filter:blur(6px);
  padding:16px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
  transition:padding var(--transition);
}
.header-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
}
.site-logo{grid-column:2;text-align:center;}
.site-logo img{max-height:60px;margin:0 auto;}
.site-logo .site-title{
  font-family:var(--font-display);
  font-size:22px;
  letter-spacing:.08em;
}
.primary-nav{grid-column:1;}
.primary-nav ul{display:flex;gap:34px;}
.primary-nav a{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition);
}
.primary-nav a:hover{border-color:var(--rose);}
.header-cta{grid-column:3;text-align:right;}
.header-cta .btn{padding:11px 24px;}
.menu-toggle{
  display:none;
  grid-column:3;
  justify-self:end;
  background:none;border:none;
  width:26px;height:20px;
  position:relative;
}
.menu-toggle span,.menu-toggle::before,.menu-toggle::after{
  content:'';
  position:absolute;left:0;right:0;
  height:1px;background:var(--ink);
  transition:transform var(--transition), opacity var(--transition);
}
.menu-toggle::before{top:0;}
.menu-toggle span{top:9px;}
.menu-toggle::after{top:18px;}
.menu-toggle.is-open::before{transform:translateY(9px) rotate(45deg);}
.menu-toggle.is-open::after{transform:translateY(-9px) rotate(-45deg);}
.menu-toggle.is-open span{opacity:0;}

@media(max-width:900px){
  .primary-nav{display:none;position:fixed;inset:0;background:var(--cream);z-index:99;
    flex-direction:column;align-items:center;justify-content:center;grid-column:auto;}
  .primary-nav.is-open{display:flex;}
  .primary-nav ul{flex-direction:column;text-align:center;gap:26px;}
  .primary-nav a{font-size:16px;}
  .header-cta{display:none;}
  .menu-toggle{display:block;}
  .header-inner{grid-template-columns:auto 1fr auto;}
  .site-logo{grid-column:2;}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  background:var(--beige);
  overflow:hidden;
}
.hero .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding-top:140px;
  padding-bottom:60px;
}
.hero-copy h1{font-size:clamp(2.4rem,4vw,3.6rem);}
.hero-copy p{max-width:420px;color:#4a4a4a;margin-bottom:28px;}
.hero-script{margin:10px 0 22px;}
.hero-media{position:relative;}
.hero-media .frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:4/5;
}
.hero-media .frame img{width:100%;height:100%;object-fit:cover;}
.hero-thread{
  position:absolute;
  top:-30px;right:-40px;
  width:180px;
  z-index:2;
  pointer-events:none;
}
.hero-thread path{fill:none;stroke:var(--mauve);stroke-width:1.4;}

@media(max-width:900px){
  .hero .container{grid-template-columns:1fr;padding-top:120px;text-align:center;}
  .hero-copy p{margin-left:auto;margin-right:auto;}
  .hero-media{order:-1;max-width:320px;margin:0 auto;}
}

/* ============ SECTION SPACING ============ */
.section{padding:100px 0;}
.section.tight{padding:70px 0;}
.section-head{text-align:center;max-width:600px;margin:0 auto 56px;}
@media(max-width:600px){.section{padding:64px 0;}}

/* ============ SERVICES ============ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--mauve);
  border:1px solid var(--mauve);
}
.service-card{
  background:var(--cream);
  padding:44px 28px;
  text-align:center;
  transition:background var(--transition);
}
.service-card:hover{background:var(--beige);}
.service-icon{
  width:52px;height:52px;
  margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;
}
.service-icon img{max-width:100%;max-height:100%;}
.service-card h3{font-size:1.1rem;margin-bottom:8px;}
.service-card p{font-size:14px;color:#6b6b6b;margin:0;}
@media(max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.services-grid{grid-template-columns:1fr;}}

/* ============ ABOUT ============ */
.about-section{background:var(--cream);}
.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
  align-items:center;
}
.about-media{position:relative;}
.about-media .offset-block{
  position:absolute;
  inset:20px -20px -20px 20px;
  background:var(--mauve);
  z-index:0;
}
.about-media img{position:relative;z-index:1;width:100%;aspect-ratio:1/1;object-fit:cover;}
.about-copy p{color:#4a4a4a;margin-bottom:16px;}
.about-copy .btn{margin-top:16px;}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;}
  .about-media{order:-1;max-width:340px;margin:0 auto 20px;}
}

/* ============ TESTIMONIALS ============ */
.testimonials{background:var(--ink);color:var(--cream);}
.testimonials h2{color:var(--cream);}
.testimonial-track{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  position:relative;
  min-height:180px;
}
.testimonial-slide{
  display:none;
}
.testimonial-slide.is-active{display:block;animation:fadeUp .5s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.testimonial-slide blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.35rem;
  line-height:1.5;
  margin:0 0 22px;
}
.testimonial-name{
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
}
.testimonial-dots{display:flex;justify-content:center;gap:10px;margin-top:34px;}
.testimonial-dots button{
  width:8px;height:8px;border-radius:50%;
  background:rgba(247,244,241,.3);border:none;padding:0;
}
.testimonial-dots button.is-active{background:var(--rose);}

/* ============ GALLERY ============ */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.gallery-item{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--radius);
}
.gallery-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.gallery-item:hover img{transform:scale(1.06);}
.gallery-item::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(26,26,26,0);
  transition:background var(--transition);
}
.gallery-item:hover::after{background:rgba(26,26,26,.15);}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}

/* lightbox */
.ykl-lightbox{
  position:fixed;inset:0;z-index:1000;
  background:rgba(26,26,26,.94);
  display:none;
  align-items:center;justify-content:center;
  padding:40px;
}
.ykl-lightbox.is-open{display:flex;}
.ykl-lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;}
.ykl-lightbox-close{
  position:absolute;top:24px;right:32px;
  background:none;border:none;color:var(--cream);
  font-size:28px;line-height:1;
}

/* ============ CTA / BOOKING BAND ============ */
.cta-band{
  background:var(--beige);
  text-align:center;
}
.cta-band h2{margin-bottom:10px;}
.cta-band p{color:#4a4a4a;margin-bottom:28px;}

/* ============ FOOTER ============ */
#site-footer{background:var(--ink);color:rgba(247,244,241,.85);padding:80px 0 30px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(247,244,241,.15);
}
.footer-col h4{
  color:var(--cream);
  font-size:13px;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:20px;
  font-family:var(--font-body);
  font-weight:400;
}
.footer-col p, .footer-col a{
  font-size:14px;
  color:rgba(247,244,241,.7);
  line-height:2;
}
.footer-col a:hover{color:var(--rose);}
.footer-logo img{max-height:50px;margin-bottom:16px;filter:brightness(0) invert(1);}
.footer-social{display:flex;gap:16px;margin-top:16px;}
.footer-social a{font-size:12px;letter-spacing:.15em;text-transform:uppercase;}
.footer-bottom{
  padding-top:26px;
  text-align:center;
  font-size:12px;
  letter-spacing:.05em;
  color:rgba(247,244,241,.45);
}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .footer-grid{grid-template-columns:1fr;text-align:center;}
  .footer-social{justify-content:center;}
}

/* ============ GENERIC PAGE ============ */
.page-hero{
  padding:170px 0 60px;
  background:var(--beige);
  text-align:center;
}
.page-content{padding:80px 0;}
.page-content .container{max-width:800px;}
.page-content p{margin-bottom:1.2em;color:#3a3a3a;}