/*
Theme Name: Mallva Salon Masażu
Theme URI: https://mallva.pl
Author: Mallva
Author URI: https://mallva.pl
Description: Autorski motyw WordPress dla salonu masażu Mallva w Gdyni. Zabiegi, opinie i galeria są edytowalne z poziomu panelu WordPress.
Version: 1.1.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: mallva
*/

:root{
  --bg:#F5F9FB;
  --bg-alt:#EAF5FC;
  --ink:#0A0A0A;
  --ink-soft:#3F4C54;
  --accent:#98DEFF;
  --accent-deep:#1C8FC4;
  --deep:#0E2430;
  --sand:#DCCFBC;
  --line:rgba(10,10,10,0.08);
  --radius:2px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--ink);
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 32px;
}
.eyebrow{
  font-family:'Manrope',sans-serif;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent-deep);
  font-weight:700;
}
button, .btn{
  cursor:pointer;
  border:none;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.02em;
  border-radius:var(--radius);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary{
  background:var(--ink);
  color:#fff;
  padding:15px 30px;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn-primary:hover{background:var(--accent-deep); transform:translateY(-2px);}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  padding:14px 26px;
  border:1px solid var(--line);
}
.btn-ghost:hover{border-color:var(--ink);}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ===== TOPBAR ===== */
.topbar{
  background:var(--accent);
  color:var(--ink);
  font-size:0.78rem;
  border-bottom:1px solid rgba(255,255,255,0.45);
}
.topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:9px;
  padding-bottom:9px;
  flex-wrap:wrap;
  gap:6px;
}
.topbar a{opacity:.85; font-weight:600;}
.topbar a:hover{opacity:1; color:var(--deep);}
.topbar .hours{opacity:.85; letter-spacing:.02em;}

/* ===== HEADER ===== */
header{
  background:var(--accent);
  position:sticky;
  top:0;
  z-index:50;
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo-mark{height:150px;width:auto;flex-shrink:0;object-fit:contain;display:block;}
.custom-logo-link{display:block;}
nav.links{
  display:flex;
  gap:34px;
  font-size:0.92rem;
  font-weight:600;
}
nav.links ul{list-style:none; display:flex; gap:34px;}
nav.links li{position:relative;}
nav.links a{position:relative; padding:4px 0;}
nav.links a::before{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:var(--deep);
  transition:width .25s ease;
}
nav.links a:hover::before{width:100%;}

/* Rozwijane podmenu (dropdown) na desktopie */
nav.links .sub-menu{
  display:block;
  list-style:none;
  position:absolute;
  top:100%; left:0;
  min-width:220px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 20px 40px -18px rgba(10,10,10,0.25);
  padding:8px 0;
  margin-top:14px;
  gap:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  z-index:60;
}
nav.links li:hover > .sub-menu,
nav.links li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear 0s;
}
nav.links .sub-menu li{width:100%;}
nav.links .sub-menu a{
  display:block;
  padding:11px 20px;
  font-weight:600;
  font-size:0.88rem;
  color:var(--ink);
  white-space:nowrap;
}
nav.links .sub-menu a::before{display:none;}
nav.links .sub-menu a:hover{background:var(--bg-alt); color:var(--accent-deep);}
nav.links .menu-item-has-children > a{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
nav.links .menu-item-has-children > a::after{
  content:"";
  width:6px; height:6px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  opacity:.6;
}

.nav-actions{display:flex; align-items:center; gap:18px;}
.nav-phone{font-weight:700; font-size:0.92rem; white-space:nowrap;}

/* ===== BURGER / MOBILE MENU ===== */
.burger{
  display:none;
  background:none;
  padding:6px;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.burger-box{position:relative; width:22px; height:16px; display:block;}
.burger-line{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:var(--deep);
  border-radius:2px;
  transition:transform .3s ease, opacity .3s ease, top .3s ease;
}
.burger-line:nth-child(1){top:0;}
.burger-line:nth-child(2){top:7px;}
.burger-line:nth-child(3){top:14px;}
.burger.is-active .burger-line:nth-child(1){top:7px; transform:rotate(45deg);}
.burger.is-active .burger-line:nth-child(2){opacity:0;}
.burger.is-active .burger-line:nth-child(3){top:7px; transform:rotate(-45deg);}

.mobile-menu{
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--accent);
  display:flex;
  flex-direction:column;
  padding:20px 28px 40px;
  transform:translateX(100%);
  opacity:0;
  visibility:hidden;
  transition:transform .35s ease, opacity .35s ease, visibility 0s linear .35s;
  overflow-y:auto;
}
.mobile-menu.open{
  transform:translateX(0);
  opacity:1;
  visibility:visible;
  transition:transform .35s ease, opacity .35s ease, visibility 0s linear 0s;
}
.mobile-menu-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 0 20px;
  border-bottom:1px solid rgba(14,36,48,0.15);
}
.mobile-menu-top .logo img{height:80px; width:auto;}
.mobile-menu-close{
  background:transparent;
  border:1px solid rgba(14,36,48,0.35);
  color:var(--deep);
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:1.2rem;
  line-height:1;
  flex-shrink:0;
}
.mobile-menu-close:hover{border-color:var(--deep);}
.mobile-nav{display:flex; flex:1; align-items:center;}
.mobile-nav ul{list-style:none; width:100%; display:flex; flex-direction:column; gap:6px; padding:20px 0;}
.mobile-nav li{border-bottom:1px solid rgba(14,36,48,0.12);}
.mobile-nav a{display:block; padding:16px 4px; font-family:'Fraunces',serif; font-size:1.5rem; color:var(--deep);}
.mobile-nav .sub-menu{list-style:none; padding:0 0 8px 18px;}
.mobile-nav .sub-menu a{font-size:1.05rem; padding:10px 4px;}
.mobile-menu-footer{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:20px;
  border-top:1px solid rgba(14,36,48,0.15);
}
.mobile-menu-footer .nav-phone{font-size:1rem;}
.mobile-menu-footer .btn-primary{justify-content:center;}
body.mobile-menu-is-open{overflow:hidden;}

@media (max-width:900px){
  nav.links{display:none;}
  .nav-phone{display:none;}
  .burger{display:flex;}
}
@media (min-width:901px){
  .mobile-menu{display:none;}
}

/* ===== HERO ===== */
.hero{
  position:relative;
  background:var(--accent);
  padding:76px 0 150px;
  overflow:hidden;
}
.hero-arcs{
  position:absolute;
  top:-120px; right:-120px;
  width:520px; height:520px;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:50%;
  z-index:0;
}
.hero-arcs::before{
  content:"";
  position:absolute;
  inset:60px;
  border:1px solid rgba(255,255,255,0.35);
  border-radius:50%;
}
.hero-divider{
  position:absolute;
  bottom:-1px; left:0;
  width:100%; height:90px;
  z-index:1;
  display:block;
}
.hero .container{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.6rem, 5vw, 4.1rem);
  line-height:1.06;
  margin:18px 0 26px;
  color:var(--deep);
}
.hero h1 em{
  font-style:italic;
  color:var(--ink);
}
.hero p.lead{
  font-size:1.08rem;
  color:#12333f;
  opacity:.82;
  max-width:46ch;
  margin-bottom:38px;
}
.hero .eyebrow{color:var(--deep);}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.hero .btn-ghost{border-color:rgba(14,36,48,0.35); color:var(--deep);}

.hero-visual{position:relative;}
.photo-frame{
    position: relative;
    width: 90%;
    margin-left: auto;
    background: #fff;
    padding: 14px 14px 50px;
    border-radius: 2px;
    box-shadow: 0 40px 70px -25px rgba(14, 36, 48, 0.45);
    cursor: pointer;
}

.hero .container {
    padding-right: 0;
}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.photo-frame .cap{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:0.95rem;
  color:var(--ink);
  text-align:center;
  margin-top:10px;
}
.play-btn{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:74px; height:74px;
  border-radius:50%;
  background:rgba(10,10,10,0.55);
  border:2px solid rgba(255,255,255,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease, background .25s ease;
  z-index:3;
}
.play-btn svg{width:26px; height:26px; fill:#fff; margin-left:4px;}
.photo-frame:hover .play-btn{transform:translate(-50%,-50%) scale(1.08); background:rgba(10,10,10,0.72);}

.video-modal{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,0.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999;
  padding:24px;
}
.video-modal.open{display:flex;}
.video-modal .video-wrap{
  position:relative;
  width:100%;
  max-width:960px;
  aspect-ratio:16/9;
}
.video-modal iframe{
  width:100%; height:100%;
  border:none;
  border-radius:2px;
}
.video-modal .close-video{
  position:absolute;
  top:-44px; right:0;
  background:transparent;
  border:none;
  color:#fff;
  font-size:1.6rem;
  cursor:pointer;
  line-height:1;
  padding:6px 10px;
}

.stat-strip{
  display:flex;
  gap:0;
  margin-top:56px;
  border-top:1px solid rgba(14,36,48,0.2);
  padding-top:28px;
}
.stat{flex:1; padding-right:24px;}
.stat b{
  font-family:'Fraunces',serif;
  font-size:2rem;
  font-weight:400;
  display:block;
  color:var(--deep);
}
.stat span{font-size:0.82rem; color:#12333f; opacity:.75;}

@media (max-width:900px){
  .hero .container{grid-template-columns:1fr;}
  .stat-strip{flex-direction:column; gap:18px;}
  .photo-frame{width:100%; margin-top:20px;}
}

/* ===== SECTION GENERIC ===== */
section{padding:100px 0;}
.section-head{
  max-width:640px;
  margin-bottom:60px;
}
.section-head h2{
  font-size:clamp(2rem, 3.4vw, 2.7rem);
  margin-top:14px;
  font-weight:400;
}
.section-head p{color:var(--ink-soft); margin-top:18px; font-size:1.02rem;}

.bg-alt{background:var(--bg-alt);}

/* ===== ABOUT ===== */
.about .container{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:70px;
  align-items:center;
}
.about-visual{
  aspect-ratio:1/1.1;
  border-radius:4px;
  position:relative;
  overflow:hidden;
}
.about-visual img{width:100%; height:100%; object-fit:cover; display:block;}
.about-heading{margin-top:14px; font-size:2.4rem; line-height:1.18;}
@media (max-width:600px){ .about-heading{font-size:1.9rem;} }
.about p{color:var(--ink-soft); margin-bottom:18px; font-size:1.02rem; max-width:52ch;}
.signature-line{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:30px;
}
.signature-line span{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:1.15rem;
}

/* ===== SERVICES ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.service-card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
  transition:background .3s ease, box-shadow .3s ease;
}
.service-card:hover{background:#fff; box-shadow:0 18px 40px -22px rgba(10,10,10,0.25);}
.service-photo{
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--bg-alt);
}
.service-photo img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(0.95);}
.service-card-body{padding:32px 34px 34px;}
.service-card .num{
  font-family:'Fraunces',serif;
  font-style:italic;
  color:var(--accent-deep);
  font-size:0.95rem;
  display:block;
  margin-bottom:14px;
}
.service-card h3{font-size:1.25rem; font-weight:500; margin-bottom:10px;}
.service-card p{color:var(--ink-soft); font-size:0.92rem; margin-bottom:18px;}
.service-card .price{
  font-weight:700; font-size:0.9rem;
  border-top:1px solid var(--line);
  padding-top:16px;
  display:flex; justify-content:space-between;
}
.service-card .price em{font-style:normal; color:var(--accent-deep);}

.service-list{list-style:none; margin-top:6px;}
.service-list li{
  padding:14px 0;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.service-list li:first-child{border-top:none;}
.service-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px;}
.service-row .s-name{font-weight:600; font-size:0.95rem;}
.service-row .s-price{font-weight:700; font-size:0.95rem; color:var(--accent-deep); white-space:nowrap;}
.service-row .s-old{font-weight:400; text-decoration:line-through; color:var(--ink-soft); font-size:0.78rem; margin-right:6px;}
.service-list .s-meta{font-size:0.78rem; color:var(--ink-soft);}

@media (max-width:900px){
  .services-grid{grid-template-columns:1fr;}
  .about .container{grid-template-columns:1fr;}
}

/* ===== PROCESS ===== */
.process{background:var(--deep); color:#EAF6FD;}
.process .section-head h2, .process .section-head p{color:#EAF6FD;}
.process .section-head p{opacity:.75;}
.process .eyebrow{color:var(--accent);}
.process-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
}
.process-step .step-no{
  font-family:'Fraunces',serif;
  font-size:3rem;
  color:var(--accent);
  font-weight:300;
  line-height:1;
  margin-bottom:18px;
}
.process-step h3{color:#fff; font-size:1.2rem; font-weight:500; margin-bottom:10px;}
.process-step p{color:#B9CDD6; font-size:0.92rem;}
@media (max-width:900px){.process-steps{grid-template-columns:1fr; gap:40px;}}

/* ===== TESTIMONIALS ===== */
.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:36px;
}
.t-card{
  background:#fff;
  border:1px solid var(--line);
  padding:32px 28px;
  border-radius:4px;
}
.t-card .quote-mark{
  font-family:'Fraunces',serif;
  font-size:2.6rem;
  color:var(--accent);
  line-height:1;
  display:block;
  margin-bottom:6px;
}
.t-card p{color:var(--ink-soft); font-size:0.95rem; margin-bottom:20px;}
.t-card .who{font-weight:700; font-size:0.88rem;}
.t-card .who span{display:block; font-weight:400; color:var(--ink-soft); font-size:0.8rem;}
@media (max-width:900px){.testimonials-grid{grid-template-columns:1fr;}}

/* ===== CONTACT / CTA ===== */
.cta-section {
    position: relative;
    background: linear-gradient(135deg, #98deff 0%, #98deff 100%);
    color: var(--deep);
    overflow: hidden;
}
.cta-section .container{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:50px;
  align-items:center;
  position:relative;
  z-index:2;
}
.cta-section h2{color:var(--deep); font-size:clamp(2rem,3.6vw,2.8rem);}
.cta-section p{color:#0E2430; opacity:.8; margin-top:16px; max-width:44ch;}
.cta-card{
  background:var(--bg);
  padding:36px;
  border-radius:4px;
}
.cta-card .row{
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:0.92rem;
}
.cta-card .row:last-of-type{border-bottom:none;}
.cta-card .row span:first-child{color:var(--ink-soft);}
.cta-card .row span:last-child{font-weight:700;}
.cta-card .btn-primary{width:100%; justify-content:center; margin-top:22px;}

.cta-dots{
  position:absolute;
  right:-10px; top:-20px;
  width:220px; height:220px;
  opacity:.35;
  z-index:0;
}
.cta-dots circle{fill:#0E2430;}

@media (max-width:900px){
  .cta-section .container{grid-template-columns:1fr;}
  .cta-dots{width:140px; height:140px;}
}

.seo-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:44px 60px;
}
.seo-block h3{font-size:1.15rem; font-weight:500; margin-bottom:12px;}
.seo-block p{color:var(--ink-soft); font-size:0.92rem; max-width:60ch;}
@media (max-width:900px){
  .seo-grid{grid-template-columns:1fr;}
}

.frame-break{
  padding:70px 0 0 0;
}
.frame-break.bg-alt{background:var(--bg-alt);}
.frame-gallery{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:28px;
  flex-wrap:wrap;
  max-width:1300px;
  margin:0 auto;
  padding:0 32px;
}
.mini-frame{
  width:220px;
  background:#fff;
  padding:10px 10px 30px;
  box-shadow:0 24px 50px -22px rgba(14,36,48,0.28);
  flex-shrink:0;
}
.mini-frame img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block;}
.mini-frame .cap{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:0.82rem;
  color:var(--ink-soft);
  text-align:center;
  margin-top:8px;
}
.mini-frame:nth-child(4n+1){transform:rotate(-3deg);}
.mini-frame:nth-child(4n+2){transform:rotate(1.5deg); margin-top:22px;}
.mini-frame:nth-child(4n+3){transform:rotate(-1deg);}
.mini-frame:nth-child(4n+4){transform:rotate(2deg); margin-top:10px;}
@media (max-width:700px){
  .mini-frame{width:42%;}
  .mini-frame:nth-child(4n+2){margin-top:0;}
  .mini-frame:nth-child(4n+4){margin-top:0;}
}
@media (max-width:480px){
  .mini-frame{width:100%; max-width:260px;}
}

/* ===== FOOTER ===== */
footer{background:var(--deep); color:#B9CDD6; padding:70px 0 30px;}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 0.8fr 0.8fr 1fr;
  gap:40px;
  padding-bottom:50px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-grid h4{color:#fff; font-size:0.82rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; font-weight:700;}
.footer-grid ul{list-style:none;}
.footer-grid li{margin-bottom:10px; font-size:0.9rem;}
.footer-grid a:hover{color:var(--accent);}
.footer-logo{
  font-family:'Fraunces',serif;
  font-size:1.6rem;
  color:#fff;
  margin-bottom:14px;
}
.footer-grid .about-blurb{font-size:0.88rem; max-width:34ch; opacity:.75;}
.footer-bottom{
  padding-top:26px;
  display:flex;
  justify-content:space-between;
  font-size:0.8rem;
  opacity:.6;
  flex-wrap:wrap;
  gap:10px;
}

.logo img {
    height: 150px;
    width: auto;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}
.frame-gallery img {
    height: auto;
}

.menu-item-has-children a {
    padding-top: 0 !important;
}
ul.sub-menu li a {
    padding-top: 15px !important;
}

@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}

/* ===== WP DEFAULTS / EDITOR CONTENT SAFETY ===== */
.screen-reader-text{position:absolute!important;left:-9999px;top:-9999px;}
.page-content, .single-content{padding:100px 0;}
.page-content .container, .single-content .container{max-width:820px;}
.page-content img, .single-content img{border-radius:4px; margin:20px 0;}