/* ============================================================
   A038 — shared stylesheet (tokens, header, footer, sidebar,
   buttons, section primitives). Values measured from the source
   site nail-a038.aiopromotion.com at 1440 / 768 / 390.
   ============================================================ */

:root{
  --primary:#6D8E6F;      /* sage */
  --secondary:#899F87;    /* light sage - header bg / bands / btn hover */
  --navy:#1F3A2E;         /* dark green text */
  --accent:#474747;       /* dark grey */
  --sage-dark:#527F50;    /* button text / footer social glyph */
  --gold:#956D30;         /* gold accents */
  --gold-light:#FFF192;   /* navy-section quote */
  --white:#FFFFFF;
  --container:1120px;
  --wide:1350px;
}

/* ---- base (Tailwind preflight compatible) ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-size:1rem;                 /* trap #4 — em base = 16px */
  font-family:"Raleway",sans-serif;
  color:var(--navy);
  line-height:1.5;
  background:var(--white);
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ---- buttons (Elementor .elementor-button line-height:1 — trap #2) ---- */
.btn{
  display:inline-block;
  font-family:"Poppins",sans-serif;
  font-size:16px;font-weight:600;line-height:1;
  text-transform:uppercase;
  color:var(--sage-dark);
  background:var(--white);
  border:1px solid var(--secondary);
  box-shadow:0 0 10px 0 rgba(0,0,0,.5);
  padding:15px 40px;
  cursor:pointer;
  transition:background .3s ease,color .3s ease,transform .3s ease;
}
.btn:hover{background:var(--secondary);color:var(--navy)}
.btn-sm{padding:15px 25px}
@media(max-width:767px){
  .btn{font-size:14.4px;padding:12px 20px}
  .btn-sm{padding:10px 20px}
}

/* ---- section primitive (e-con-boxed model) ---- */
.sec{position:relative;padding:0}
.sec-inner{
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-block:80px;
}
@media(max-width:1024px){
  .sec{padding-inline:30px}
  .sec-inner{max-width:1024px;padding-block:80px}
}
@media(max-width:767px){
  .sec{padding-inline:20px}
  .sec-inner{max-width:767px;padding-block:60px}
}

/* ============================================================
   HEADER  (fixed, z-index 500)
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:500;
  background-color:var(--secondary);
  background-image:url("../images/bg-header.webp");
  background-repeat:no-repeat;background-size:cover;background-position:center;
  box-shadow:0 2px 20px 0 rgba(149,109,48,.33);
}
.header-inner{
  max-width:var(--wide);margin-inline:auto;
  min-height:90px;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.logo img{height:70px;width:auto;object-fit:contain;object-position:center left}
.nav-desktop ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav-desktop a{
  font-family:"Raleway",sans-serif;font-size:19.2px;font-weight:600;
  text-transform:capitalize;color:var(--navy);line-height:1.1;
  transition:color .2s ease;
}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--secondary)}
.btn-booknow{
  display:inline-block;font-family:"Poppins",sans-serif;font-size:16px;font-weight:600;
  line-height:1;text-transform:uppercase;color:var(--sage-dark);background:var(--white);
  border:1px solid var(--secondary);box-shadow:0 0 10px 0 rgba(0,0,0,.5);
  padding:15px 25px;transition:background .3s ease,color .3s ease,transform .3s ease;
  transform-origin:left center;white-space:nowrap;
}
.btn-booknow:hover{background:var(--secondary);color:var(--navy);transform:scaleX(1.1)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;color:var(--navy)}
.nav-toggle svg{width:30px;height:30px;fill:currentColor;display:block}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
.nav-toggle:hover{color:var(--secondary)}

/* mobile menu */
.mobile-menu{
  position:absolute;top:100%;left:0;right:0;
  background:var(--white);
  max-height:0;overflow:hidden;transform:scaleY(0);transform-origin:top;
  transition:max-height .3s ease-out,transform .3s ease-out,box-shadow .3s ease-out;
}
.mobile-menu.open{
  max-height:360px;transform:scaleY(1);
  box-shadow:0 20px 20px 0 rgba(0,0,0,.3);
  clip-path:inset(0 -20px -20px -20px);
  border-radius:0 0 15px 15px;
}
.mobile-menu ul{list-style:none;margin:0;padding:0}
.mobile-menu a{
  display:block;padding:14px 24px;
  font-family:"Poppins",sans-serif;font-size:1.2rem;font-weight:500;
  color:var(--navy);text-transform:capitalize;
}
.mobile-menu a:hover,.mobile-menu a.active{background:rgba(109,142,111,.5);color:var(--sage-dark)}

@media(max-width:1024px){
  .header-inner{padding-left:30px;padding-right:30px;min-height:85px}
  .logo img{height:65px}
  .nav-desktop{display:none}
  .nav-toggle{display:block;margin:0 auto}
}
@media(max-width:767px){
  .header-inner{padding-left:20px;padding-right:20px;min-height:70px}
  .logo img{height:50px}
  .btn-booknow{font-size:14.4px;padding:10px 20px}
  .nav-toggle svg{width:26px;height:26px}
}

/* ============================================================
   STICKY SOCIAL SIDEBAR  (fixed left, 4 icons)
   ============================================================ */
.social-sidebar{
  position:fixed;left:0;top:24vh;z-index:99;
  display:flex;flex-direction:column;gap:3px;width:34px;
}
.social-sidebar a{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10%;
  background:var(--primary);color:var(--white);
  transition:background .3s ease;
}
.social-sidebar a svg{width:18px;height:18px;fill:currentColor}
.social-sidebar a:hover{background:var(--sage-dark)}
@media(max-width:767px){
  .social-sidebar{width:30px;gap:3px}
  .social-sidebar a{width:30px;height:30px}
  .social-sidebar a svg{width:16px;height:16px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{position:relative;background:var(--navy)}
.footer-top{
  position:relative;
  background-color:#000;
  background-image:linear-gradient(180deg,#000000C2 0%,#000000AD 100%),url("../images/bg-footer.webp");
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.footer-row{
  max-width:var(--wide);margin-inline:auto;
  display:flex;flex-wrap:wrap;justify-content:space-between;
  padding:80px 0;
}
.footer-col-about{width:25%}
.footer-col-contact{width:20%}
.footer-col-hours{width:20%}
.footer-col-map{width:28%}
.footer-col h2,.footer-col .foot-h2{
  font-family:"Archivo",sans-serif;font-size:24px;font-weight:600;
  color:var(--white);text-transform:capitalize;margin:0 0 20px;
}
.footer-about-text{
  font-family:"Raleway",sans-serif;font-size:16px;font-weight:400;
  color:var(--white);line-height:1.6;margin:0;
}
.footer-about-text .salon{color:var(--gold);font-family:"Poppins",sans-serif;font-weight:600}
.footer-contact-list{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0;padding:0}
.footer-contact-list li{display:flex;align-items:center;gap:10px}
.footer-contact-list svg{width:24px;height:24px;flex:none;fill:var(--sage-dark)}
.footer-contact-list a,.footer-contact-list span{
  font-family:"Raleway",sans-serif;font-size:16px;font-weight:400;color:var(--white);
}
.footer-social{display:flex;gap:10px;margin-top:14px}
.footer-social a{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--white);color:var(--sage-dark);
  transition:background .3s ease,color .3s ease;
}
.footer-social a svg{width:20px;height:20px;fill:currentColor}
.footer-social a:hover{background:var(--sage-dark);color:var(--white)}
.footer-hours-text{
  font-family:"Poppins",sans-serif;font-size:16px;color:var(--white);line-height:1.5;margin:0 0 12px;
}
.footer-seo{
  font-family:"Poppins",sans-serif;font-size:16px;color:var(--gold);
  text-transform:capitalize;line-height:1.2;margin:0 0 6px;
}
.footer-seo a{color:var(--gold)}
.footer-map iframe{width:100%;height:280px;border:0;display:block}
.footer-bottom{
  background-color:#527F50;
  background-image:url("../images/bg-copyright.webp");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  text-align:center;padding:16px;
}
.footer-bottom p{
  margin:0;font-family:"Philosopher",sans-serif;font-size:16px;color:var(--white);
}
.footer-bottom .salon,.footer-bottom .brand{color:var(--gold)}

@media(max-width:1024px){
  .footer-row{padding:60px 30px;gap:40px}
  .footer-col-about,.footer-col-contact,.footer-col-hours,.footer-col-map{width:47%}
}
@media(max-width:767px){
  .footer-row{padding:60px 20px;gap:40px}
  .footer-col-about,.footer-col-contact,.footer-col-hours,.footer-col-map{width:100%}
}