/*
Theme Name: Relaxology
Theme URI: https://www.relaxology.co.nz
Author: Cath Relaxology
Description: Custom mobile-first theme for Cath Relaxology, Kaiapoi. Calm sea-teal palette drawn from the studio, Marcellus and Figtree type, WCAG-friendly 19-20px base text.
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: relaxology
*/


@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/marcellus.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('fonts/figtree.woff2') format('woff2')}

:root{
  --bg:#f2f8f8;
  --surface:#ffffff;
  --ink:#122e37;
  --muted:#42626c;
  --teal:#1d7c93;
  --cyan-btn:#0d5b6e;
  --cyan-btn-hover:#0a4757;
  --amber:#c97a2b;
  --line:rgba(18,46,55,.16);
  --shadow:0 1px 2px rgba(23,51,60,.05),0 12px 32px -12px rgba(23,81,96,.18);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);color:var(--ink);
  font-family:'Figtree',system-ui,sans-serif;font-weight:400;
  line-height:1.6;font-size:19px;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:900px){body{font-size:20px}}
img{max-width:100%;display:block;border:0}
a{color:var(--cyan-btn)}
h1,h2,h3{
  font-family:'Marcellus',serif;font-weight:400;line-height:1.16;margin:0;text-wrap:balance;color:var(--ink);
}
p{margin:0 0 1em}
:where(a,button,summary):focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:24px}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(242,248,248,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;gap:20px;min-height:64px;padding-block:6px}
.wordmark{font-family:'Marcellus',serif;font-size:1.35em;color:var(--ink);text-decoration:none;letter-spacing:.02em}
.wordmark b{font-weight:400;color:var(--teal)}
nav.primary{display:none;gap:24px;margin-left:auto}
nav.primary a{color:var(--muted);text-decoration:none;font-size:1em;font-weight:600;padding:10px 2px}
nav.primary a:hover{color:var(--cyan-btn)}
.bar .btn{margin-left:auto}
@media (min-width:720px){
  nav.primary{display:flex}
  .bar .btn{margin-left:0}
}

.bar p,.ctas p,.review-ctas p,.contact-links p,.posts>p,.posts .post>p,.post .post-body>p,.about-grid>p,.cards>p,.quotes>p,.visit-grid>p,.book-panel>p:not(:nth-of-type(1)):empty{display:contents;margin:0}
p:empty{display:none}
br:only-child{display:none}

@media (max-width:480px){
  .wordmark{font-size:1.15em}
  .bar{gap:12px}
  .bar .btn{padding:8px 18px;font-size:1em}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Figtree',system-ui,sans-serif;
  font-weight:600;font-size:1.05em;text-decoration:none;
  min-height:48px;padding:10px 28px;border-radius:999px;border:2px solid transparent;white-space:nowrap;text-align:center;
  transition:background .15s ease,transform .15s ease;
}
.btn-book{
  background:var(--cyan-btn);color:#ffffff;
  box-shadow:0 6px 20px -8px rgba(13,91,110,.55);
}
.btn-book:hover{background:var(--cyan-btn-hover);transform:translateY(-1px)}
.btn-second{
  background:#ffffff;color:var(--cyan-btn);border-color:var(--cyan-btn);
}
.btn-second:hover{background:#e8f2f4}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;color:#fff;display:grid}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;z-index:-2}
.hero .scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,38,48,.42) 0%,rgba(9,38,48,.5) 45%,rgba(9,38,48,.85) 100%)}
.hero .inner{padding-top:clamp(80px,15vw,136px);padding-bottom:clamp(56px,9vw,88px)}
.eyebrow{
  font-size:.9em;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal);margin:0 0 14px;
}
.hero .eyebrow{color:#ffe1bb}
.hero h1{font-size:clamp(2.1em,7vw,3.3em);max-width:16ch;color:#fff}
.hero p.lede{max-width:44ch;font-size:clamp(1.15em,3vw,1.35em);color:rgba(255,255,255,.96);margin:1.2em 0 1.9em;text-shadow:0 1px 3px rgba(9,38,48,.5)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .trust{margin-top:2.3em;font-size:1em;color:#fff;letter-spacing:.02em;text-shadow:0 1px 3px rgba(9,38,48,.6)}

/* ---------- sections ---------- */
section{padding-block:clamp(51px,9vw,88px)}
.sect-head{max-width:640px;margin-bottom:clamp(29px,5vw,45px)}
.sect-head h2,h2{font-size:clamp(1.65em,5vw,2.3em)}
.sect-head p{color:var(--muted);margin:13px 0 0}

/* treatments */
.cards{display:grid;gap:18px}
@media (min-width:700px){.cards{grid-template-columns:repeat(3,1fr);gap:22px}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:28px 24px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;margin:0;
}
.card h3{font-size:1.5em}
.card p{margin:0;color:var(--muted);font-size:1em}
.card .meta{margin-top:auto;padding-top:1em;font-weight:600;color:var(--cyan-btn);font-variant-numeric:tabular-nums;font-size:1.05em}

/* pricing */
.pricing{background:var(--surface);border-block:1px solid var(--line)}
ul.price-list{list-style:none;margin:0;padding:0;max-width:640px}
ul.price-list li{
  display:flex;align-items:baseline;gap:13px;
  padding:18px 0;border-bottom:1px solid var(--line);margin:0;
}
.price-list .name{font-weight:600}
.price-list .time{color:var(--muted);font-size:.95em;white-space:nowrap}
.price-list .dots{flex:1;border-bottom:2px dotted var(--line);transform:translateY(-.35em)}
.price-list .amt{font-family:'Marcellus',serif;font-size:1.5em;font-variant-numeric:tabular-nums;white-space:nowrap}
.price-note{color:var(--muted);font-size:1em;max-width:40em;margin-top:1.2em}

/* about */
.about-grid{display:grid;gap:32px}
@media (min-width:760px){.about-grid{grid-template-columns:5fr 6fr;gap:48px;align-items:center}}
.about-grid img{border-radius:18px;box-shadow:var(--shadow);aspect-ratio:4/4.1;object-fit:cover;width:100%}
.about-copy p{color:var(--muted)}
.about-copy p.first{color:var(--ink)}
details.quals{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-top:19px}
details.quals summary{cursor:pointer;font-weight:600;padding:14px 18px;min-height:48px;display:flex;align-items:center;color:var(--cyan-btn)}
details.quals ul{margin:0;padding:0 22px 18px 40px;color:var(--muted);font-size:1em}
details.quals li{margin:6px 0}

/* reviews */
.stars{color:var(--amber);letter-spacing:.1em}
.hero .stars{color:#ffc76b}
.gbadge{
  display:flex;align-items:center;gap:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:12px 26px;width:fit-content;box-shadow:var(--shadow);
  margin-bottom:clamp(22px,4vw,32px);
}
.gbadge .score{font-size:1.2em;display:flex;align-items:baseline;gap:.5em}
.gbadge .score strong{font-family:'Marcellus',serif;font-size:1.6em;font-weight:400}
.gbadge .count{font-size:.95em;color:var(--muted)}
.gbadge .count a{font-weight:600}
.quotes{display:grid;gap:18px}
@media (min-width:700px){.quotes{grid-template-columns:1fr 1fr;gap:22px}}
blockquote.t{
  font-size:19px;font-style:normal;font-family:'Figtree',system-ui,sans-serif;
  color:var(--ink);line-height:1.6;quotes:none;
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:28px 26px 24px;box-shadow:var(--shadow);position:relative;
}
blockquote.t::before{
  content:"\201C";font-family:'Marcellus',serif;font-size:3.4em;line-height:0;
  color:var(--teal);position:absolute;top:30px;left:20px;opacity:.3;
}
blockquote.t p{margin:0;padding-left:30px;font-size:19px;font-style:normal;color:var(--ink);line-height:1.6;letter-spacing:normal}
@media (min-width:900px){blockquote.t,blockquote.t p{font-size:20px}}
blockquote.t p::before,blockquote.t p::after{content:none}
blockquote.t footer{padding-left:1.6em;margin-top:.9em;color:var(--muted);font-size:.9em;letter-spacing:.05em;text-transform:uppercase;font-weight:600}
blockquote.t footer .stars{font-size:.85em;display:block;margin-bottom:.3em}
.review-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,4vw,32px)}

/* news */
.news{background:var(--surface);border-block:1px solid var(--line)}
.posts{display:grid;gap:16px}
@media (min-width:700px){.posts{grid-template-columns:repeat(3,1fr)}}
.posts .post{position:relative;border:1px solid var(--line);border-radius:16px;padding:0;overflow:hidden;background:var(--bg);margin:0}
.post-link{color:var(--ink);text-decoration:none}
.post-link::after{content:"";position:absolute;inset:0}
.post img.thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin:0;border:0 !important;padding:0 !important;border-radius:0 !important;box-shadow:none !important;max-width:100%}
.post .post-body{padding:18px 24px 22px}
.post time{font-size:.85em;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.post h3{font-size:1.25em;margin:.5em 0 .6em;color:var(--ink)}
.post span{color:var(--cyan-btn);font-weight:600;font-size:1em}
.posts .post:hover .post-link{color:var(--cyan-btn)}

/* visit */
.visit-grid{display:grid;gap:35px}
@media (min-width:760px){.visit-grid{grid-template-columns:1fr 1fr;gap:48px}}
ul.hours{list-style:none;margin:16px 0 0;padding:0;max-width:384px}
ul.hours li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;margin:0}
.hours li span:first-child{font-weight:600}
.hours li.closed span:last-child{color:var(--muted)}
.visit .addr{color:var(--muted);margin:8px 0 0}
.visit .contact-links{margin-top:19px;display:grid;gap:4px}
.visit .contact-links a{font-weight:600;padding:8px 0;display:inline-block}
.book-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:36px 28px;text-align:center;align-self:start;
}
.book-panel h3{font-size:1.7em}
.book-panel p{color:var(--muted);margin:13px 0 24px}
.book-panel small{display:block;margin-top:1.1em;color:var(--muted);font-size:.95em}

/* footer */
footer.site{border-top:1px solid var(--line);padding:2.2em 0 2.4em;color:var(--muted);font-size:.95em}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:10px 32px;align-items:center;justify-content:space-between}
.concept-tag{
  font-size:.8em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:5px 14px;color:var(--muted);
}


@media (prefers-reduced-motion:reduce){
  .rev{transition:none !important;opacity:1 !important;translate:none !important}
}

/* scroll reveal */
.rev{opacity:0;translate:0 18px;transition:opacity .6s ease,translate .6s ease}
.rev.in{opacity:1;translate:0 0}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-999px;top:0;background:var(--surface);color:var(--ink);padding:10px 16px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- subpages: single post, page, archives ---------- */
.page-head{padding:48px 0 0}
.page-head .eyebrow{margin-bottom:10px}
.page-head h1{font-size:clamp(1.8em,5vw,2.6em);max-width:24ch}
.post-date{color:var(--muted);margin:10px 0 0;font-size:.95em}
.single-thumb img,.entry-content img{max-width:100%;height:auto;border-radius:16px}
.single-thumb{margin:28px 0 0}
.entry-content{max-width:720px;padding-bottom:16px}
.entry-content h2,.entry-content h3{margin:1.3em 0 .5em}
.entry-content h2{font-size:1.5em}
.entry-content h3{font-size:1.25em}
.entry-content a{color:var(--cyan-btn)}
.entry-content ul,.entry-content ol{padding-left:1.4em;color:var(--ink)}
.entry-content li{margin:.3em 0}
.entry-content blockquote{margin:1.2em 0;padding:2px 0 2px 20px;border-left:4px solid var(--teal);color:var(--muted);font-style:normal}
.back-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* card image fallback when a post has no featured image */
.thumb-fallback{aspect-ratio:16/9;background:linear-gradient(135deg,#d9edf0,#eef6f7);display:grid;place-items:center}
.thumb-fallback span{font-family:Marcellus,serif;font-size:1.6em;color:var(--teal)}

/* pagination */
.pagination{margin-top:36px}
.nav-links{display:flex;flex-wrap:wrap;gap:8px}
.nav-links .page-numbers{display:inline-flex;align-items:center;min-height:48px;padding:8px 18px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--cyan-btn);font-weight:600;background:var(--surface)}
.nav-links .page-numbers.current{background:var(--cyan-btn);color:#fff;border-color:var(--cyan-btn)}
.nav-links .page-numbers.dots{border:0;background:none}