/*
Theme Name: Serenity Therapeutic Massage Spa
Theme URI:  https://serenitytherapeuticspa.com
Author:     Cut Throat Marketing
Description: Astra child theme for Serenity Therapeutic Massage Spa, LLC (Liberty, NC). Brand palette teal #1D4250 / sage #6F8173 / cream #F6F1E7, Fraunces + Nunito Sans. Built for Astra + WPBakery. The serenity-* design classes cover Home, About, the Services parent, all six service child pages, and Contact — one theme, no per-page versions. Booking links out to MassageBook.
Template:   astra
Version:    1.0.8
*/

:root{
  --serenity-teal:#1D4250;
  --serenity-teal-dark:#14313B;
  --serenity-sage:#6F8173;
  --serenity-sage-btn:#5C6E60;   /* white text passes WCAG AA on this */
  --serenity-sage-tint:#E9EEE8;
  --serenity-cream:#F6F1E7;
  --serenity-white:#FDFBF7;
  --serenity-charcoal:#2E3338;
  --serenity-muted:#586058;
  --serenity-line:#DED8CA;
  --serenity-maxw:1080px;
}

/* ============ Base typography ============ */
body,
.ast-container{
  font-family:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color:var(--serenity-charcoal);
}
h1,h2,h3,h4,h5,h6,
.entry-title,
.serenity-hero__title{
  font-family:"Fraunces", Georgia, "Times New Roman", serif !important;
  color:var(--serenity-teal);
  font-weight:500;
  line-height:1.15;
}
a{color:var(--serenity-teal);}
a:hover{color:var(--serenity-teal-dark);}

/* ============ Section framework (reuse on every page) ============ */
.serenity-section{padding:80px 0;}
.serenity-section--cream{background:var(--serenity-cream);}
.serenity-section--white{background:var(--serenity-white);}
.serenity-section--tint{background:var(--serenity-sage-tint);}
.serenity-section--teal{background:var(--serenity-teal);}
.serenity-section--sage{background:var(--serenity-sage);}
.serenity-section--teal, .serenity-section--sage{color:#FDFBF7;}
.serenity-section--teal h1,.serenity-section--teal h2,.serenity-section--teal h3,
.serenity-section--teal p,
.serenity-section--sage h1,.serenity-section--sage h2,.serenity-section--sage h3,
.serenity-section--sage p{color:#FDFBF7 !important;}

.serenity-section__head{max-width:720px;margin:0 auto 8px;text-align:center;}
.serenity-section__head h2{font-size:clamp(26px,4vw,34px);margin:0 0 12px;}
.serenity-section__head p{color:var(--serenity-muted);font-size:17px;margin:0 auto;max-width:640px;}
.serenity-section--teal .serenity-section__head p,
.serenity-section--sage .serenity-section__head p{color:#E7ECE7;}

.serenity-eyebrow{display:block;text-transform:uppercase;letter-spacing:.18em;font-size:13px;font-weight:700;color:var(--serenity-sage);margin:0 0 10px;}
.serenity-section--teal .serenity-eyebrow,
.serenity-section--sage .serenity-eyebrow{color:#CBD6CC;}
.serenity-lead{font-size:19px;line-height:1.6;color:var(--serenity-charcoal);max-width:760px;}
.serenity-center{text-align:center;}

/* ============ Buttons (reuse everywhere) ============ */
.serenity-btn{display:inline-block;padding:14px 30px;border-radius:8px;font-family:"Nunito Sans",sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1;text-decoration:none !important;transition:all .18s ease;border:2px solid transparent;cursor:pointer;}
.serenity-btn--primary{background:var(--serenity-teal);color:#fff !important;border-color:var(--serenity-teal);}
.serenity-btn--primary:hover{background:var(--serenity-teal-dark);border-color:var(--serenity-teal-dark);color:#fff !important;}
.serenity-btn--secondary{background:var(--serenity-sage-btn);color:#fff !important;border-color:var(--serenity-sage-btn);}
.serenity-btn--secondary:hover{background:#4e5e52;border-color:#4e5e52;color:#fff !important;}
.serenity-btn--ghost{background:transparent;color:var(--serenity-teal) !important;border-color:var(--serenity-teal);}
.serenity-btn--ghost:hover{background:var(--serenity-teal);color:#fff !important;}
.serenity-btn--light{background:var(--serenity-white);color:var(--serenity-teal) !important;border-color:var(--serenity-white);}
.serenity-btn--light:hover{background:#fff;color:var(--serenity-teal-dark) !important;}
.serenity-btn--ghost-light{background:transparent;color:#fff !important;border-color:rgba(255,255,255,.7);}
.serenity-btn--ghost-light:hover{background:#fff;color:var(--serenity-teal) !important;border-color:#fff;}
.serenity-btn--block{display:block;width:100%;text-align:center;}
.serenity-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.serenity-hero .serenity-btn-row,
.serenity-cta .serenity-btn-row{justify-content:center;}

/* ============ Hero ============ */
.serenity-hero{position:relative;padding:96px 0 84px;text-align:center;overflow:hidden;}
.serenity-hero__inner{max-width:760px;margin:0 auto;position:relative;z-index:2;}
.serenity-kicker{display:block;text-transform:uppercase;letter-spacing:.22em;font-size:13px;font-weight:700;color:#9DB0A2;margin:0 0 18px;}
.serenity-hero__title,.serenity-hero h1{font-size:clamp(38px,7vw,60px);margin:0 0 16px;color:#FDFBF7 !important;}
.serenity-hero__sub{font-size:clamp(17px,2.4vw,20px);line-height:1.55;color:#D9E1DA !important;max-width:600px;margin:0 auto;}
.serenity-trust{margin-top:22px;color:#CBD6CC !important;font-weight:600;letter-spacing:.02em;font-size:15px;}
.serenity-trust .serenity-stars{color:#E7C98B;letter-spacing:.1em;margin-right:8px;}
/* shorter hero for interior pages */
.serenity-hero--page{padding:64px 0 56px;}
.serenity-hero--page .serenity-hero__title,.serenity-hero--page h1{font-size:clamp(30px,5vw,44px);}

/* ============ Credentials strip ============ */
.serenity-creds{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:26px;}
.serenity-creds span{background:var(--serenity-sage-tint);color:var(--serenity-teal);border-radius:20px;padding:7px 16px;font-size:13px;font-weight:700;letter-spacing:.02em;}

/* ============ Value pillars ============ */
.serenity-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 44px;max-width:var(--serenity-maxw);margin:38px auto 0;}
.serenity-pillar{display:flex;gap:18px;align-items:flex-start;}
.serenity-pillar__num{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--serenity-teal);color:#fff;font-family:"Fraunces",serif;font-weight:600;font-size:19px;display:flex;align-items:center;justify-content:center;}
.serenity-pillar__title{font-family:"Fraunces",serif;font-weight:600;color:var(--serenity-teal);font-size:20px;margin:2px 0 6px;}
.serenity-pillar__text{color:var(--serenity-muted);font-size:16px;margin:0;line-height:1.55;}

/* ============ Service cards ============ */
.serenity-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;max-width:var(--serenity-maxw);margin:38px auto 0;}
.serenity-card{background:var(--serenity-white);border:1px solid var(--serenity-line);border-radius:14px;padding:26px 24px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;display:flex;flex-direction:column;}
.serenity-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(29,66,80,.12);border-color:var(--serenity-sage);}
.serenity-card__title{font-family:"Fraunces",serif;font-weight:600;color:var(--serenity-teal);font-size:21px;margin:0 0 8px;}
.serenity-card__desc{color:var(--serenity-muted);font-size:15.5px;line-height:1.55;margin:0 0 18px;flex:1;}
.serenity-card__link{font-weight:700;color:var(--serenity-sage-btn) !important;text-decoration:none !important;font-size:15px;}
.serenity-card__link::after{content:" \2192";}
.serenity-card:hover .serenity-card__link{color:var(--serenity-teal) !important;}

/* ============ Feature (image + text; service pages, red light) ============ */
.serenity-feature{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:var(--serenity-maxw);margin:0 auto;}
.serenity-feature--reverse .serenity-feature__media{order:2;}
.serenity-feature__media{background:var(--serenity-sage-tint);border-radius:16px;min-height:320px;background-size:cover;background-position:center;}
.serenity-feature__body h2{font-size:clamp(24px,3.4vw,32px);margin:0 0 14px;}
.serenity-feature__body p{color:var(--serenity-muted);font-size:17px;line-height:1.6;margin:0 0 22px;}
.serenity-section--teal .serenity-feature__body p,
.serenity-section--sage .serenity-feature__body p{color:#EBEFEA;}
.serenity-section--teal .serenity-feature__media,
.serenity-section--sage .serenity-feature__media{background:rgba(255,255,255,.12);}

/* ============ Intro offer ============ */
.serenity-offer{max-width:760px;margin:0 auto;text-align:center;}
.serenity-offer h2{font-size:clamp(24px,3.4vw,32px);margin:6px 0 12px;}
.serenity-offer p{color:var(--serenity-muted);font-size:17px;line-height:1.6;margin:0 auto 8px;max-width:600px;}
.serenity-offer__price{font-family:"Fraunces",serif;color:var(--serenity-teal);font-size:22px;font-weight:600;margin:14px 0 4px;}

/* ============ Reviews ============ */
.serenity-reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;max-width:var(--serenity-maxw);margin:38px auto 0;}
.serenity-review{background:var(--serenity-white);border:1px solid var(--serenity-line);border-radius:14px;padding:26px 24px;}
.serenity-review__stars{color:#E7C98B;letter-spacing:.12em;font-size:16px;margin-bottom:12px;}
.serenity-review__text{font-family:"Fraunces",serif;font-size:19px;line-height:1.5;color:var(--serenity-teal);margin:0 0 14px;font-weight:500;}
.serenity-review__name{color:var(--serenity-muted);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

/* ============ Contact / hours ============ */
.serenity-contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:var(--serenity-maxw);margin:0 auto;align-items:start;}
.serenity-nap p{margin:0 0 6px;font-size:17px;color:var(--serenity-charcoal);}
.serenity-nap .serenity-nap__label{color:var(--serenity-sage-btn);font-weight:700;}
.serenity-nap a{color:var(--serenity-teal);font-weight:700;}
.serenity-hours table{width:100%;border-collapse:collapse;}
.serenity-hours th,.serenity-hours td{padding:9px 4px;border-bottom:1px solid var(--serenity-line);font-size:15.5px;}
.serenity-hours th{font-family:"Fraunces",serif;color:var(--serenity-teal);font-weight:600;text-align:left;}
.serenity-hours td{color:var(--serenity-muted);text-align:right;}

/* ============ CTA band ============ */
.serenity-cta{text-align:center;}
.serenity-cta h2{color:#FDFBF7 !important;font-size:clamp(30px,5vw,46px);margin:0 0 12px;}
.serenity-cta p{color:#D9E1DA !important;max-width:560px;margin:0 auto;font-size:17px;}

/* ============ Checklist (service pages) ============ */
.serenity-list{list-style:none;padding:0;margin:20px 0;max-width:640px;}
.serenity-list li{position:relative;padding:0 0 12px 32px;color:var(--serenity-charcoal);font-size:16.5px;line-height:1.5;}
.serenity-list li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--serenity-sage-tint);}
.serenity-list li::after{content:"\2713";position:absolute;left:5px;top:2px;color:var(--serenity-sage-btn);font-size:12px;font-weight:700;}

/* ============ FAQ / WPBakery accordion theming (service pages) ============ */
.serenity-faq .vc_tta-panel{border:1px solid var(--serenity-line) !important;border-radius:10px !important;margin-bottom:12px !important;background:var(--serenity-white) !important;overflow:hidden;}
.serenity-faq .vc_tta-panel-heading{border:0 !important;background:transparent !important;}
.serenity-faq .vc_tta-panel-title>a{position:relative;display:block;font-family:"Fraunces",serif !important;color:var(--serenity-teal) !important;font-weight:600 !important;font-size:18px !important;padding:18px 52px 18px 20px !important;background:transparent !important;}
.serenity-faq .vc_tta-controls-icon{display:none !important;}
.serenity-faq .vc_tta-panel-title>a::after{content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;border-right:2px solid var(--serenity-sage-btn);border-bottom:2px solid var(--serenity-sage-btn);transform:translate(0,-50%) rotate(45deg);transition:transform .2s ease;}
.serenity-faq .vc_tta-panel.vc_active .vc_tta-panel-title>a::after{transform:translate(0,-50%) rotate(-135deg);}
.serenity-faq .vc_tta-panel-body{color:var(--serenity-muted) !important;font-size:16px;line-height:1.6;padding:0 20px 20px !important;}

/* ============ Responsive ============ */
@media (max-width:900px){
  .serenity-feature,.serenity-contact{grid-template-columns:1fr;gap:28px;}
  .serenity-feature--reverse .serenity-feature__media{order:0;}
}
@media (max-width:782px){
  .serenity-section{padding:56px 0;}
  .serenity-pillars{grid-template-columns:1fr;gap:24px;}
  .serenity-hero{padding:72px 0 60px;}
}
@media (max-width:560px){
  .serenity-btn{display:block;text-align:center;}
  .serenity-btn-row{flex-direction:column;}
}

/* =========================================================
   GLOBAL HEADER — brand Astra's native header (not rebuilt)
   ========================================================= */
#masthead{position:sticky;top:0;z-index:999;background:var(--serenity-white);} /* remove position/top/z-index if you use Astra Pro Sticky Header */
.ast-primary-header-bar,.main-header-bar,.site-header{background:var(--serenity-white) !important;border-bottom:1px solid var(--serenity-line);}
.main-header-menu a,.ast-nav-menu > .menu-item > a,.site-header .menu-item > a{color:var(--serenity-teal) !important;font-family:"Nunito Sans",sans-serif !important;font-weight:600 !important;letter-spacing:.01em;}
.main-header-menu a:hover,.site-header .menu-item > a:hover,.site-header .current-menu-item > a,.site-header .current-menu-ancestor > a{color:var(--serenity-sage-btn) !important;}
/* dropdown (Massage Services children) */
.site-header .sub-menu{background:var(--serenity-white) !important;border-top:2px solid var(--serenity-sage) !important;box-shadow:0 10px 24px rgba(29,66,80,.12);}
.site-header .sub-menu .menu-item > a{color:var(--serenity-teal) !important;font-weight:600 !important;}
.site-header .sub-menu .menu-item > a:hover{background:var(--serenity-sage-tint) !important;color:var(--serenity-teal) !important;}
/* Book Now nav item as a button — add CSS class serenity-nav-book to the menu item.
   Scoped under .site-header so it outranks the general menu-link color rule above. */
.site-header .serenity-nav-book{display:flex;align-items:center;}
.site-header .serenity-nav-book > a{
	display:inline-flex;align-items:center;
	height:auto !important;line-height:1.1 !important;align-self:center;
	background:var(--serenity-teal) !important;color:#fff !important;
	border-radius:8px;padding:11px 22px !important;font-weight:700 !important;
	margin:0 0 0 8px;transition:background .18s ease;
}
.site-header .serenity-nav-book > a .ast-nav-text,
.site-header .serenity-nav-book > a span{color:#fff !important;}
.site-header .serenity-nav-book > a:hover{background:var(--serenity-teal-dark) !important;color:#fff !important;}
.site-header .serenity-nav-book > a:hover .ast-nav-text,
.site-header .serenity-nav-book > a:hover span{color:#fff !important;}
/* off-canvas (mobile) menu */
.ast-mobile-popup-drawer{background:var(--serenity-cream) !important;}
.ast-mobile-popup-drawer .menu-item > a{color:var(--serenity-teal) !important;font-weight:600 !important;}
.ast-mobile-popup-drawer .serenity-nav-book > a{display:inline-block;}

/* =========================================================
   GLOBAL FOOTER (injected via astra_footer_before)
   ========================================================= */
footer.site-footer{display:none;} /* hide Astra's default footer so ours is the only one */
.serenity-footer{background:var(--serenity-teal);color:#EAF0EB;}
.serenity-footer__inner{max-width:var(--serenity-maxw);margin:0 auto;padding:58px 22px 38px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;}
.serenity-footer__name{font-family:"Fraunces",serif;font-size:22px;color:#FDFBF7;line-height:1.15;}
.serenity-footer__tag{font-family:"Fraunces",serif;font-style:italic;color:#CBD6CC;margin:6px 0 14px;font-size:16px;}
.serenity-footer__note{color:#B9C6BB;font-size:14.5px;line-height:1.55;margin:0;}
.serenity-footer__col h4,.serenity-footer__visit h4{font-family:"Fraunces",serif;color:#FDFBF7;font-size:16px;margin:0 0 14px;font-weight:600;}
.serenity-footer__col ul{list-style:none;padding:0;margin:0;}
.serenity-footer__col li{margin:0 0 9px;}
.serenity-footer a{color:#D7E0D8;text-decoration:none;font-size:15px;}
.serenity-footer a:hover{color:#fff;}
.serenity-footer__visit p{color:#CBD6CC;font-size:15px;line-height:1.55;margin:0 0 8px;}
.serenity-footer__hours{font-size:13.5px !important;color:#A9B8AB !important;}
.serenity-footer__visit .serenity-btn{margin-top:8px;}
.serenity-footer__bar{max-width:var(--serenity-maxw);margin:0 auto;padding:18px 22px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;}
.serenity-footer__bar span{color:#A9B8AB;font-size:13.5px;}
.serenity-footer__legal{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;}
.serenity-footer__legal a{color:#A9B8AB;font-size:13.5px;}
.serenity-footer__legal a:hover{color:#fff;}
@media (max-width:900px){.serenity-footer__inner{grid-template-columns:1fr 1fr;gap:30px;}}
@media (max-width:560px){.serenity-footer__inner{grid-template-columns:1fr;}.serenity-footer__bar{flex-direction:column;align-items:flex-start;}}

/* =========================================================
   HOMEPAGE IMAGERY
   Image paths are root-relative so they survive the staging -> live domain move.
   If images 404, open any Media item, check its File URL, and adjust the /2026/09/ folder here + in the homepage shortcode.
   ========================================================= */
.serenity-card__img{width:100%;height:180px;object-fit:cover;border-radius:10px;margin:0 0 16px;background:var(--serenity-sage-tint);display:block;}
.serenity-feature__img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:16px;display:block;}
/* hero with photo + teal overlay (overlay is a real background layer, not a ::before, so WPBakery's row clearfix can't kill it) */
.serenity-hero--home{position:relative;background-color:var(--serenity-teal);background-image:linear-gradient(rgba(20,49,59,.80),rgba(20,49,59,.80)),url('/wp-content/uploads/2026/09/walk-in-float-out-serenity-therapeutic-massage.jpg');background-position:center;background-size:cover;background-repeat:no-repeat;}
.serenity-hero--home .serenity-hero__title,.serenity-hero--home .serenity-hero__sub,.serenity-hero--home .serenity-kicker,.serenity-hero--home .serenity-trust{text-shadow:0 1px 4px rgba(0,0,0,.35);}
.serenity-hero--home .serenity-hero__inner{position:relative;z-index:2;}
/* bottom CTA with photo + teal overlay */
.serenity-cta--photo{position:relative;background-color:var(--serenity-teal);background-image:linear-gradient(rgba(20,49,59,.85),rgba(20,49,59,.85)),url('/wp-content/uploads/2026/09/book-now-with-serenity-therapeutic-massage.jpg');background-position:center;background-size:cover;background-repeat:no-repeat;}
.serenity-cta--photo h2,.serenity-cta--photo p{text-shadow:0 1px 4px rgba(0,0,0,.35);}
.serenity-cta--photo .vc_column-inner{position:relative;z-index:2;}

/* =========================================================
   CONTACT PAGE — large button + Google Map wrapper
   Paste a Google Maps iframe inside a <div class="serenity-map"> and it goes
   full-width and rounded automatically. Empty box shows a sage placeholder.
   ========================================================= */
.serenity-btn--lg{padding:18px 44px;font-size:17px;}
.serenity-map{min-height:440px;background:var(--serenity-sage-tint);border-radius:16px;overflow:hidden;line-height:0;box-shadow:0 10px 30px rgba(29,66,80,.10);max-width:var(--serenity-maxw);margin:28px auto 0;}
.serenity-map iframe{width:100%;height:100%;min-height:440px;border:0;display:block;}

/* =========================================================
   LEGAL PAGES (Privacy, Terms) — readable long-form typography
   ========================================================= */
.serenity-legal{max-width:820px;margin:0 auto;text-align:left;}
.serenity-legal h2{font-size:24px;margin:38px 0 12px;}
.serenity-legal h2:first-child{margin-top:0;}
.serenity-legal h3{font-size:18px;font-weight:600;color:var(--serenity-teal);margin:24px 0 8px;}
.serenity-legal p{margin:0 0 14px;color:var(--serenity-charcoal);line-height:1.65;}
.serenity-legal ul{margin:0 0 16px;padding-left:22px;}
.serenity-legal li{margin:6px 0;color:var(--serenity-charcoal);line-height:1.55;}
.serenity-legal a{color:var(--serenity-teal);text-decoration:underline;}
.serenity-legal strong{color:var(--serenity-teal);}
.serenity-legal hr{border:0;border-top:1px solid var(--serenity-line);margin:30px 0;}