/*
Theme Name: SoLux Jolie Studio
Theme URI: https://soluxjoliestudio.com/
Author: SoLux Jolie Studio
Description: Custom WordPress theme for SoLux Jolie Studio, based on the approved homepage prototype.
Version: 0.1.7
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: solux-jolie
*/

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f7f2ea;color:#282522;font-family:Arial,sans-serif}
a{text-decoration:none;color:inherit}.wrap{width:min(1160px,92%);margin:auto}
header{position:absolute;z-index:20;width:100%;color:#fff}nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo,h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:400}.logo{font-size:22px;letter-spacing:.07em}
.menu{display:flex;align-items:center;gap:22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-block;border:1px solid currentColor;padding:13px 20px;text-transform:uppercase;letter-spacing:.15em;font-size:11px}
.hero{height:92vh;min-height:630px;position:relative;overflow:hidden;background:#332e2a;color:#fff}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.35s ease,transform 6s ease;transform:scale(1.025)}
.slide.active{opacity:1;transform:scale(1)}.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,17,15,.56),rgba(20,17,15,.1) 68%,rgba(20,17,15,.2))}
.herocopy{position:relative;z-index:4;height:100%;display:flex;align-items:center}.hero-inner{max-width:690px}
.kicker,.ey{font-size:10px;letter-spacing:.27em;text-transform:uppercase}.kicker{color:#fff}.ey{color:#776f68}
h1{font-size:clamp(60px,8vw,105px);line-height:.88;margin:18px 0}.tag{font:italic clamp(21px,2.5vw,31px) Georgia,serif;line-height:1.3;margin:26px 0 32px}
.dots{position:absolute;z-index:6;left:4%;bottom:28px;display:flex;gap:8px}.dot{border:0;width:31px;height:2px;padding:0;background:#ffffff66;cursor:pointer}.dot.active{background:#fff}
section{padding:100px 0}.center{text-align:center}h2{font-size:clamp(41px,5vw,65px);line-height:1;margin:14px 0 22px}.lead{max-width:720px;margin:auto;color:#766e67;line-height:1.8;font-size:15px}.center .btn{margin-top:29px}
.services,.instagram{background:#fff}.head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:40px}.head .lead{max-width:430px;margin:0}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{height:365px;padding:24px;display:flex;align-items:flex-end;color:#fff;background:linear-gradient(145deg,#71645b,#c0a48f)}
.card h3{font-size:28px;margin:0 0 7px}.card p{font-size:12px;line-height:1.6;margin:0}
.service-card{position:relative;overflow:hidden;background-image:linear-gradient(180deg,rgba(26,22,19,.04) 22%,rgba(31,26,22,.18) 53%,rgba(24,20,18,.78) 100%),var(--service-image);background-size:cover;background-position:center;isolation:isolate;transition:transform .28s ease,box-shadow .28s ease}
.service-card:before{content:"";position:absolute;inset:-3%;z-index:-1;background-image:var(--service-image);background-size:cover;background-position:center;opacity:0;transform:scale(1);transition:transform .45s ease,opacity .25s ease}
.service-card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,22,19,.03) 22%,rgba(31,26,22,.16) 50%,rgba(24,20,18,.82) 100%)}
.service-card-content{position:relative;z-index:1;display:block;width:100%;text-shadow:0 1px 12px rgba(0,0,0,.16)}
.service-card-link{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(5px);transition:opacity .25s ease,transform .25s ease}
.service-card:hover,.service-card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px rgba(43,35,29,.18)}
.service-card:hover:before,.service-card:focus-visible:before{opacity:1;transform:scale(1.035)}
.service-card:hover{background-image:none}
.service-card:focus-visible{outline:2px solid #8f7b69;outline-offset:3px}
.service-card:hover .service-card-link,.service-card:focus-visible .service-card-link{opacity:1;transform:translateY(0)}
#vagaro-services{scroll-margin-top:24px}
.work{background:#e8ddd0}.gallery{display:grid;grid-template-columns:1.25fr .85fr .85fr;grid-template-rows:260px 260px;gap:12px;margin-top:35px}.pic{background-size:cover;background-position:center}.pic:first-child{grid-row:1/3}.note{text-align:center;margin-top:17px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#766e67}
.quote{background:#2b2825;color:#fff;text-align:center}.quote h2{max-width:850px;margin:auto}.quote p{color:#bbb3ac}
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.ig div{aspect-ratio:1;background:linear-gradient(145deg,#d1bcaa,#77685f)}
footer{background:#211f1d;color:#fff;padding:50px 0}.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}footer p{color:#bbb3ac;line-height:1.8;font-size:13px}
@media(max-width:800px){.menu a:not(.btn){display:none}.cards{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:1fr 1fr;grid-template-rows:320px repeat(3,220px)}.gallery-seven .gallery-slot-1{grid-column:1/3;grid-row:auto}.ig{grid-template-columns:repeat(3,1fr)}.head{display:block}.head .lead{margin-top:15px}.foot{grid-template-columns:1fr}}
@media(max-width:520px){nav{height:72px}.logo{font-size:18px}.hero{height:82vh;min-height:570px}.herocopy{text-align:center}.hero-inner{margin:auto}.slide:after{background:#17141166}.dots{left:50%;transform:translateX(-50%)}section{padding:72px 0}.cards{grid-template-columns:1fr}.card{height:280px}.gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:300px repeat(3,190px)}.gallery-seven .gallery-slot-1{grid-column:1/3;grid-row:auto}.ig{grid-template-columns:repeat(2,1fr)}}

/* Floating booking CTA */
.floating-book{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:172px;
  min-height:58px;
  padding:16px 25px;
  background:#282522;
  color:#fffaf3;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.floating-book:hover{
  transform:translateY(-2px);
  box-shadow:0 15px 34px rgba(0,0,0,.28);
  background:#3a342f;
}
.floating-book .mini{
  display:block;
  font-size:8px;
  font-weight:400;
  letter-spacing:.12em;
  opacity:.72;
  margin-top:3px;
  text-align:center;
}
@media(max-width:520px){
  body{padding-bottom:76px}
  .floating-book{
    left:14px;
    right:14px;
    bottom:12px;
    width:auto;
    min-height:58px;
    padding:13px 18px;
    box-shadow:0 8px 28px rgba(0,0,0,.28);
  }
}

/* v0.1.1 — Rice Cooker: persistent booking CTA */
.floating-book,
.floating-book-now,
.book-float,
.book-now-float,
.floating-cta,
a[href="#book"].floating,
a[href="#booking"].floating {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 99999 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prototype uses .floatbook */
.floatbook {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 99999 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 720px) {
    .floating-book,
    .floating-book-now,
    .book-float,
    .book-now-float,
    .floating-cta,
    .floatbook {
        left: 14px !important;
        right: 14px !important;
        bottom: 14px !important;
        width: auto !important;
        max-width: none !important;
        justify-content: center !important;
    }
    body { padding-bottom: 82px; }
}


/* v0.1.2 — Live Vagaro services + booking */
.vagaro-live-services { padding: 90px 0; background:#f7f2ea; color:#28231f; }
.vagaro-live-services h2 { font-size:clamp(40px,5vw,70px); margin:8px 0 12px; font-family:Georgia,serif; font-weight:400; }
.vagaro-note { max-width:650px; line-height:1.7; margin-bottom:35px; }
.vagaro-widget-shell { background:#fff; padding:24px; min-height:280px; overflow:visible; }

.vagaro-book-modal { position:fixed; inset:0; z-index:100000; display:none; }
.vagaro-book-modal.is-open { display:block; }
.vagaro-book-backdrop { position:absolute; inset:0; background:rgba(20,17,15,.72); }
.vagaro-book-dialog { position:absolute; top:5vh; left:50%; transform:translateX(-50%); width:min(94vw,900px); max-height:90vh; overflow:auto; background:#fff; padding:32px 24px; box-shadow:0 20px 70px rgba(0,0,0,.35); }
.vagaro-book-close { position:absolute; top:10px; right:14px; border:0; background:transparent; font-size:32px; line-height:1; cursor:pointer; z-index:2; }
body.vagaro-modal-open { overflow:hidden; }
@media(max-width:720px){
  .vagaro-live-services { padding:60px 0 100px; }
  .vagaro-book-dialog { top:2vh; max-height:96vh; padding:38px 12px 20px; }
}


/* v0.1.3 — Live Instagram portfolio ribbon */
.instagram-live{overflow:hidden;padding-bottom:50px}
.instagram-head{margin-bottom:30px}
.solux-instagram-feed{width:100%;overflow:hidden}
.instagram-feed-placeholder{
  min-height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  border:1px solid #ded4ca;
  background:#f7f2ea;
  color:#766e67;
  text-align:center;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
}
.instagram-follow-row{text-align:center;margin-top:28px}
.instagram-follow{color:#282522}

/* Smash Balloon Social Photo Feed: turn the photo grid into a horizontal ribbon. */
.solux-instagram-feed #sb_instagram{width:100% !important;padding:0 !important}
.solux-instagram-feed #sb_instagram #sbi_images{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:10px !important;
  width:100% !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:0 0 10px !important;
  scrollbar-width:thin;
}
.solux-instagram-feed #sb_instagram .sbi_item{
  float:none !important;
  flex:0 0 calc((100% - 40px)/5) !important;
  width:calc((100% - 40px)/5) !important;
  max-width:none !important;
  scroll-snap-align:start;
  padding:0 !important;
}
.solux-instagram-feed #sb_instagram .sbi_photo_wrap,
.solux-instagram-feed #sb_instagram .sbi_photo{
  width:100% !important;
}
.solux-instagram-feed #sb_instagram .sbi_photo{
  aspect-ratio:1/1;
  height:auto !important;
  min-height:0 !important;
  background-size:cover !important;
  background-position:center !important;
}
.solux-instagram-feed #sb_instagram .sb_instagram_header,
.solux-instagram-feed #sb_instagram .sbi_header_text,
.solux-instagram-feed #sb_instagram .sbi_load_btn,
.solux-instagram-feed #sb_instagram .sbi_follow_btn{display:none !important}

@media(max-width:900px){
  .solux-instagram-feed #sb_instagram .sbi_item{
    flex-basis:calc((100% - 20px)/3) !important;
    width:calc((100% - 20px)/3) !important;
  }
}
@media(max-width:520px){
  .instagram-head{text-align:center}
  .instagram-head .lead{margin-left:auto;margin-right:auto}
  .solux-instagram-feed #sb_instagram #sbi_images{gap:8px !important;padding-right:18% !important}
  .solux-instagram-feed #sb_instagram .sbi_item{
    flex-basis:72% !important;
    width:72% !important;
  }
}

/* SoLux v0.1.5 — seven-photo editorial Gallery */
.gallery.gallery-seven{grid-template-columns:1.18fr 1fr 1fr;grid-template-rows:repeat(3,190px);gap:12px}
.gallery.gallery-seven .gallery-slot-1{grid-column:1;grid-row:1/4}
.gallery.gallery-seven .gallery-pic{background-size:cover;background-position:center;min-height:0}
@media(max-width:800px){
  .gallery.gallery-seven{grid-template-columns:1fr 1fr;grid-template-rows:320px repeat(3,220px)}
  .gallery.gallery-seven .gallery-slot-1{grid-column:1/3;grid-row:1}
}
@media(max-width:520px){
  .gallery.gallery-seven{grid-template-columns:1fr 1fr;grid-template-rows:300px repeat(3,190px)}
  .gallery.gallery-seven .gallery-slot-1{grid-column:1/3;grid-row:1}
}


/* v0.1.6 — photographic, clickable Designed for You service cards */
@media (hover:none){.service-card-link{opacity:.88;transform:none}}
@media(max-width:520px){.service-card{height:310px}.service-card h3{font-size:27px}}


/* v0.1.7 — responsive portrait navigation ("Hamburger Hill") */
.mobile-menu-toggle{display:none;width:44px;height:44px;padding:10px;border:1px solid rgba(255,255,255,.48);background:rgba(32,28,25,.18);color:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.mobile-menu-toggle span{display:block;width:21px;height:1px;background:currentColor;transition:transform .22s ease,opacity .22s ease}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:800px){
  header nav.wrap{position:relative}
  .mobile-menu-toggle{display:flex;position:relative;z-index:32}
  header .menu{display:none;position:absolute;z-index:31;top:72px;right:0;width:min(320px,92vw);padding:18px;background:rgba(34,30,27,.97);box-shadow:0 14px 35px rgba(0,0,0,.24);flex-direction:column;align-items:stretch;gap:0}
  header .menu.is-open{display:flex}
  header .menu a:not(.btn){display:block;padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.13)}
  header .menu .btn{display:block;margin-top:12px;text-align:center}
}