/*
Theme Name: Body Sense
Theme URI: https://example.com/
Author: Custom build
Description: Elegant spa/massage salon theme with service catalogue, three-tier price tables, gallery lightbox, voucher pages and Bookings CTA. Structure modelled on a typical Polish wellness-salon site.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: bodysense
*/

/* ============ tokens ============ */
:root{
  --brown:#6d5149;
  --brown-dark:#58403a;
  --sand:#c4ab96;
  --sand-light:#e8ded3;
  --gold:#ebc858;
  --ink:#2f2f2f;
  --grey:#727475;
  --line:#e6e0da;
  --cream:#faf7f4;
  --white:#fff;
  --font-h:"Playfair Display",Georgia,serif;
  --font-b:"Open Sans",-apple-system,"Segoe UI",sans-serif;
  --font-a:"Cinzel",Georgia,serif;
  --wrap:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--font-b);font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brown);text-decoration:none;transition:color .25s var(--ease)}
a:hover{color:var(--sand)}
h1,h2,h3,h4{font-family:var(--font-h);color:var(--brown);line-height:1.25;margin:0 0 .5em;font-weight:400}
h1{font-size:clamp(2rem,4.6vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.6rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem)}
p{margin:0 0 1.1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:clamp(56px,7vw,108px) 0}
.section--cream{background:var(--cream)}
.section--dark{background:var(--brown);color:#f3ece6}
.section--dark h2,.section--dark h3{color:#fff}

/* ============ buttons ============ */
.btn{
  display:inline-block;padding:14px 34px;border:1px solid var(--brown);
  font-family:var(--font-a);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brown);background:transparent;cursor:pointer;
  transition:all .3s var(--ease);
}
.btn:hover{background:var(--brown);color:#fff}
.btn--solid{background:var(--brown);color:#fff}
.btn--solid:hover{background:var(--brown-dark);border-color:var(--brown-dark)}
.btn--light{border-color:#fff;color:#fff}
.btn--light:hover{background:#fff;color:var(--brown)}
.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--brown-dark)}
.btn--gold:hover{background:transparent;color:var(--gold)}

/* ============ section heading ============ */
.head{max-width:720px;margin:0 auto clamp(34px,4vw,58px);text-align:center}
.head__kicker{
  display:block;font-family:var(--font-a);font-size:.75rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sand);margin-bottom:14px;
}
.head p{color:var(--grey);margin:.6em 0 0}
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.ornament::before,.ornament::after{content:"";height:1px;width:52px;background:var(--sand)}
.ornament span{width:7px;height:7px;background:var(--gold);transform:rotate(45deg)}

/* ============ header ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:900;
  padding:18px 0;transition:all .35s var(--ease);
  background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent);
}
.site-header.is-stuck{background:#fff;padding:10px 0;box-shadow:0 6px 26px rgba(0,0,0,.09)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;flex-direction:column;line-height:1.05}
.brand__name{
  font-family:var(--font-h);font-size:1.5rem;color:#fff;letter-spacing:.03em;
  transition:color .3s var(--ease);
}
.brand__tag{font-family:var(--font-a);font-size:.58rem;letter-spacing:.34em;color:var(--sand);text-transform:uppercase;margin-top:5px}
.is-stuck .brand__name{color:var(--brown)}

.nav{display:flex;align-items:center;gap:30px}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav a{
  font-family:var(--font-a);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;position:relative;padding:6px 0;
}
.is-stuck .nav a{color:var(--ink)}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);
  transition:width .3s var(--ease);
}
.nav a:hover::after,.nav .current-menu-item>a::after{width:100%}
.nav a:hover{color:var(--gold)}
.is-stuck .nav a:hover{color:var(--brown)}

/* dropdown */
.nav li{position:relative}
.nav .sub-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:250px;background:#fff;padding:14px 0;margin:0;display:block;
  box-shadow:0 18px 44px rgba(0,0,0,.14);opacity:0;visibility:hidden;
  transition:all .28s var(--ease);list-style:none;
}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav .sub-menu li{display:block}
.nav .sub-menu a{display:block;padding:9px 26px;color:var(--ink)}
.nav .sub-menu a::after{display:none}
.nav .sub-menu a:hover{background:var(--cream);color:var(--brown)}

/* menu toggle */
.nav-toggle{
  display:none;background:none;border:0;padding:10px;cursor:pointer;color:#fff;
}
.is-stuck .nav-toggle{color:var(--brown)}
.nav-toggle span{display:block;width:26px;height:2px;background:currentColor;margin:5px 0;transition:.3s var(--ease)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ hero ============ */
.hero{
  position:relative;min-height:min(88vh,760px);display:grid;place-items:center;
  text-align:center;color:#fff;padding:140px 24px 100px;
  background:linear-gradient(115deg,#4a352f,#6d5149 55%,#8d7166);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 40%,rgba(0,0,0,.15),rgba(0,0,0,.55));
}
.hero__media{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.55}
.hero__inner{position:relative;z-index:1;max-width:860px}
.hero__kicker{
  font-family:var(--font-a);font-size:.8rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--sand);margin-bottom:22px;display:block;
}
.hero h1{color:#fff;margin-bottom:.35em}
.hero p{font-size:1.08rem;color:#f0e8e2;max-width:620px;margin:0 auto 2em}
.hero__actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:1;
  width:22px;height:36px;border:1px solid rgba(255,255,255,.55);border-radius:12px;
}
.scroll-hint::after{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:3px;height:7px;background:#fff;border-radius:2px;animation:hint 1.8s infinite}
@keyframes hint{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* ============ cards ============ */
.grid{display:grid;gap:26px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  position:relative;display:block;overflow:hidden;background:var(--brown);
  min-height:420px;color:#fff;
}
.card__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);opacity:.9;
}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(38,26,22,.86) 8%,rgba(38,26,22,.15) 62%);
  transition:opacity .4s var(--ease);
}
.card:hover .card__img{transform:scale(1.07)}
.card__body{position:relative;z-index:1;padding:34px;height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.card__kicker{font-family:var(--font-a);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.card h3{color:#fff;margin:0 0 8px}
.card p{color:#e9ddd5;font-size:.94rem;margin:0}
.card__more{
  margin-top:18px;font-family:var(--font-a);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;border-bottom:1px solid var(--gold);align-self:flex-start;padding-bottom:4px;
}

/* service list rows */
.service-row{
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  padding:16px 0;border-bottom:1px dashed var(--line);
}
.service-row__name{font-family:var(--font-h);font-size:1.12rem;color:var(--ink)}
.service-row__desc{display:block;font-family:var(--font-b);font-size:.85rem;color:var(--grey);margin-top:3px}
.service-row__price{font-family:var(--font-a);font-size:1rem;color:var(--brown);white-space:nowrap}

/* ============ price tabs ============ */
.tabs__nav{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-bottom:38px}
.tabs__btn{
  padding:12px 26px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-family:var(--font-a);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);
  transition:all .25s var(--ease);
}
.tabs__btn:hover{border-color:var(--sand);color:var(--brown)}
.tabs__btn[aria-selected="true"]{background:var(--brown);border-color:var(--brown);color:#fff}
.tabs__panel[hidden]{display:none}
.price-box{background:#fff;border:1px solid var(--line);padding:clamp(22px,3vw,44px)}
.price-box h3{text-align:center;margin-bottom:8px}
.price-box__note{text-align:center;color:var(--grey);font-size:.86rem;margin-bottom:26px}

/* ============ gallery ============ */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery__item{position:relative;overflow:hidden;aspect-ratio:1;background:var(--sand-light);cursor:zoom-in;border:0;padding:0}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gallery__item:hover img{transform:scale(1.08)}
.gallery__item::after{
  content:"+";position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(109,81,73,.55);color:#fff;font-size:1.9rem;font-family:var(--font-b);
  opacity:0;transition:opacity .3s var(--ease);
}
.gallery__item:hover::after{opacity:1}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:2000;background:rgba(24,17,14,.94);
  display:none;place-items:center;padding:40px;
}
.lightbox.is-open{display:grid}
.lightbox img{max-width:min(1100px,92vw);max-height:86vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__close{
  position:absolute;top:22px;right:26px;background:none;border:0;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer;opacity:.8;
}
.lightbox__close:hover{opacity:1}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;
  font-size:2.4rem;cursor:pointer;padding:20px;opacity:.7;
}
.lightbox__nav:hover{opacity:1}
.lightbox__nav--prev{left:10px}
.lightbox__nav--next{right:10px}

/* ============ info cards (contact) ============ */
.info-card{background:#fff;border:1px solid var(--line);padding:34px;text-align:center;transition:all .3s var(--ease)}
.info-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(109,81,73,.12);border-color:var(--sand)}
.info-card__icon{width:46px;height:46px;margin:0 auto 16px;display:grid;place-items:center;border:1px solid var(--sand);border-radius:50%;color:var(--brown)}
.info-card h3{font-size:1.15rem;margin-bottom:6px}
.info-card p{color:var(--grey);font-size:.92rem;margin:0}
.info-card a{color:var(--brown)}

/* ============ forms ============ */
.form{display:grid;gap:16px;max-width:640px;margin:0 auto}
.form input,.form textarea,.form select{
  width:100%;padding:14px 16px;border:1px solid var(--line);background:#fff;
  font-family:var(--font-b);font-size:.95rem;color:var(--ink);
  transition:border-color .25s var(--ease);
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--sand)}
.form textarea{min-height:150px;resize:vertical}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ============ accordion ============ */
.accordion{border-top:1px solid var(--line)}
.accordion__item{border-bottom:1px solid var(--line)}
.accordion__btn{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:none;border:0;padding:22px 0;cursor:pointer;text-align:left;
  font-family:var(--font-h);font-size:1.1rem;color:var(--brown);
}
.accordion__btn::after{content:"+";font-size:1.3rem;color:var(--sand);transition:transform .3s var(--ease)}
.accordion__btn[aria-expanded="true"]::after{transform:rotate(45deg)}
.accordion__panel{padding:0 0 22px;color:var(--grey);font-size:.95rem}
.accordion__panel[hidden]{display:none}

/* ============ vouchers ============ */
.voucher{
  background:#fff;border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;
  transition:all .3s var(--ease);
}
.voucher:hover{box-shadow:0 20px 44px rgba(109,81,73,.14);transform:translateY(-4px)}
.voucher__top{background:var(--brown);color:#fff;padding:26px;text-align:center}
.voucher__top h3{color:#fff;margin:0 0 4px}
.voucher__amount{font-family:var(--font-a);font-size:1.9rem;color:var(--gold);margin-top:10px}
.voucher__body{padding:24px;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.voucher__body p{color:var(--grey);font-size:.9rem}

/* ============ footer ============ */
.site-footer{background:#2a1f1c;color:#cbbfb7;padding:70px 0 0;font-size:.9rem}
.site-footer h3{color:#fff;font-size:1.05rem;margin-bottom:18px}
.site-footer a{color:#cbbfb7}
.site-footer a:hover{color:var(--gold)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:44px;padding-bottom:50px}
.footer-brand__name{font-family:var(--font-h);font-size:1.5rem;color:#fff}
.footer-brand__tag{font-family:var(--font-a);font-size:.6rem;letter-spacing:.3em;color:var(--sand);text-transform:uppercase;margin:6px 0 18px}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{margin-bottom:9px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#9c8f88}

/* ============ utilities ============ */
.cookie{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:1500;
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.16);
  padding:20px 26px;display:flex;gap:20px;align-items:center;justify-content:space-between;
  max-width:980px;margin:0 auto;flex-wrap:wrap;
}
.cookie[hidden]{display:none}
.cookie p{margin:0;font-size:.86rem;color:var(--grey);flex:1;min-width:240px}

.call-float{
  position:fixed;right:22px;bottom:22px;z-index:1400;
  width:58px;height:58px;border-radius:50%;background:var(--brown);color:#fff;
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(109,81,73,.4);
  transition:transform .25s var(--ease);
}
.call-float:hover{transform:scale(1.08);color:#fff}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============ responsive ============ */
@media(max-width:1024px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:96px 26px 40px;
    transform:translateX(100%);transition:transform .4s var(--ease);
    box-shadow:-20px 0 60px rgba(0,0,0,.18);overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav ul{flex-direction:column;align-items:stretch;gap:0}
  .nav li{border-bottom:1px solid var(--line)}
  .nav a{display:block;padding:16px 0;color:var(--ink)!important;font-size:.85rem}
  .nav a::after{display:none}
  .nav .sub-menu{
    position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;
    padding:0 0 0 16px;min-width:0;display:none;
  }
  .nav li.is-expanded>.sub-menu{display:block}
  .nav .sub-menu a{padding:11px 0;font-size:.78rem;color:var(--grey)}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .card{min-height:340px}
  .form__row{grid-template-columns:1fr}
  .hero{min-height:74vh;padding-top:120px}
}
@media(max-width:600px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .grid--4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .btn{padding:13px 24px;font-size:.74rem}
  .cookie{left:12px;right:12px;bottom:12px;padding:16px}
}

/* WordPress core alignment classes */
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{display:block;margin:0 auto 16px}
.wp-caption{max-width:100%}
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.skip-link:focus{
  position:fixed;top:10px;left:10px;z-index:3000;background:#fff;padding:12px 18px;
  clip:auto;width:auto;height:auto;color:var(--brown);
}

/* inner-page hero band */
.page-hero{
  margin-top:0;padding:calc(112px + clamp(36px,5vw,64px)) 0 clamp(36px,5vw,64px);
  background:linear-gradient(115deg,#4a352f,#6d5149 60%,#8d7166);
  color:#fff;text-align:center;
}
.page-hero h1{color:#fff;margin:0}
.page-hero p{color:#efe4dc;max-width:640px;margin:.8em auto 0}
.page-hero .head__kicker{display:block;margin-bottom:12px}

/* price rows list */
.price-list{display:block}
.post-content h2{margin-top:1.6em}
.post-content ul,.post-content ol{padding-left:22px}
.post-content li{margin-bottom:.5em}
.post-content a{border-bottom:1px solid var(--sand)}

/* pagination */
.pagination,.nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.page-numbers{
  display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--line);color:var(--brown);font-family:var(--font-a);font-size:.8rem;
}
.page-numbers.current,.page-numbers:hover{background:var(--brown);color:#fff;border-color:var(--brown)}