/*
Theme Name: Harmony Space
Theme URI: https://theharmonyspace.com.au/
Author: The Harmony Space
Description: A calm, fast, accessible theme for a solo counselling practice. Sand, teal, sage and gold with Playfair Display and Lato. Includes practice schema, an appointment-friendly page template, and topic-page styling for grief, identity, transitions, coping patterns and EMDR-informed work.
Version: 1.0.6
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: harmony-space
Tags: one-column, custom-menu, featured-images, blog, accessibility-ready, translation-ready
*/

*,*::before,*::after{box-sizing:border-box}

:root{
  --ink:#3D3D3D;
  --ink-2:#4A4A46;
  --ink-3:#888880;
  --paper:#F5EFE6;
  --paper-2:#EDE4D5;
  --teal:#4A7C7E;
  --teal-l:#7AACAE;
  --teal-xl:#E6EEEE;
  --sage:#6B8F71;
  --sage-l:#A8C5AC;
  --sage-xl:#EAF0EB;
  --gold:#C9A96E;
  --gold-deep:#A8834A;
  --rule:rgba(61,61,61,.16);
  --measure:63ch;
  --pad:clamp(1.25rem,5vw,3rem);
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:"Lato",system-ui,-apple-system,sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.dev{font-family:"Noto Sans Devanagari","Lato",sans-serif}
.guj{font-family:"Noto Sans Gujarati","Lato",sans-serif}

h1,h2,h3,h4{
  font-family:"Playfair Display","Georgia",serif;
  color:var(--ink);font-weight:500;line-height:1.18;
  letter-spacing:-.012em;margin:0;
}
h1{font-size:clamp(2rem,1.3rem + 3.1vw,3.5rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);margin-bottom:.6em}
h3{font-size:clamp(1.12rem,1.02rem + .45vw,1.35rem);margin-bottom:.35em}
h4{font-size:1.05rem;margin-bottom:.3em}
p{margin:0 0 1.15em;max-width:var(--measure)}
ul,ol{max-width:var(--measure)}
a{color:var(--teal)}
a:hover{color:var(--gold-deep)}
blockquote{border-left:3px solid var(--gold);margin:1.6em 0;padding:.2em 0 .2em 1.2em;
  font-family:"Playfair Display",serif;font-size:1.15rem;color:var(--ink);font-style:italic}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;background:var(--teal);color:#fff;padding:.6rem 1rem;z-index:99}

/* ---------------- shell ---------------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.site-header{border-bottom:1px solid var(--rule);background:var(--paper);position:relative;z-index:20}
.bar{display:flex;align-items:center;gap:1.25rem;padding:1.15rem 0;flex-wrap:wrap}
.brand{font-family:"Playfair Display",serif;font-size:1.14rem;color:var(--ink);
  text-decoration:none;margin-right:auto;line-height:1.25}
.brand small{display:block;font-family:"Lato",sans-serif;font-size:.63rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.2rem}
.brand img{max-height:52px;width:auto}
.nav-toggle{display:none;background:none;border:1px solid var(--rule);border-radius:3px;
  padding:.45rem .7rem;font-size:.85rem;color:var(--ink);cursor:pointer;font-family:inherit}
.main-nav ul{list-style:none;display:flex;align-items:center;gap:1.35rem;margin:0;padding:0;flex-wrap:wrap}
.main-nav a{font-size:.88rem;text-decoration:none;color:var(--ink-2);
  border-bottom:1px solid transparent;padding-bottom:2px;transition:border-color .18s,color .18s}
.main-nav a:hover{border-color:var(--gold);color:var(--teal)}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{border-color:var(--teal);color:var(--teal)}
.nav-cta{margin-left:.25rem}

.btn{display:inline-block;background:var(--teal);color:#fff;text-decoration:none;
  font-size:.93rem;letter-spacing:.015em;padding:.82rem 1.55rem;border-radius:999px;
  border:1px solid var(--teal);transition:background .2s,color .2s;cursor:pointer;font-family:inherit}
.btn:hover{background:transparent;color:var(--teal)}
.btn.sm{padding:.55rem 1.15rem;font-size:.83rem}

section.band{padding:clamp(2.75rem,6vw,5rem) 0;border-bottom:1px solid var(--rule)}
section.band:last-of-type{border-bottom:0}
.eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  margin:0 0 1.1rem;font-weight:700}
.lead{font-size:clamp(1.06rem,1rem + .35vw,1.26rem);color:var(--ink-2)}
.note{font-size:.92rem;color:var(--ink-3);max-width:var(--measure)}
.quiet{font-size:.97rem;color:var(--ink-3);border-left:2px solid var(--gold);
  padding-left:.9rem;margin-top:1.4rem}

/* ---------------- hero ---------------- */
.hero{padding-top:clamp(2.5rem,5vw,4rem);padding-bottom:clamp(2rem,4vw,3rem)}
.hero h1{max-width:20ch}
.hero .sub{font-family:"Playfair Display",serif;font-size:clamp(1.15rem,.95rem + .85vw,1.6rem);
  color:var(--teal);margin:.7rem 0 1.4rem;font-style:italic;max-width:none}
.hero .lead{max-width:56ch}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:1.9rem}
.hero-cta small{color:var(--ink-3);font-size:.85rem}

/* ---------------- hours band ---------------- */
.hours{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.hours .inner{padding:clamp(2rem,4vw,3rem) 0}
.hband{position:relative;margin:2rem 0 .5rem;height:118px}
.hband .sky{position:absolute;inset:auto 0 34px 0;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#C9A96E 0%,#DCC79A 14%,#E4DCCB 30%,#E4DCCB 62%,#A8C5AC 78%,#6B8F71 90%,#4A7C7E 100%)}
.slots{position:absolute;inset:0;display:grid;grid-template-columns:repeat(15,1fr)}
.slot{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;padding-bottom:14px}
.slot i{display:block;width:1px;height:9px;background:var(--rule)}
.slot.on i{width:11px;height:11px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 4px var(--paper-2)}
.slot.on b{font-family:"Playfair Display",serif;font-weight:500;font-size:.95rem;
  color:var(--ink);margin-bottom:.55rem;white-space:nowrap}
.hband-axis{display:grid;grid-template-columns:repeat(15,1fr);font-size:.64rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3)}
.hband-axis span{text-align:center;visibility:hidden}
.hband-axis span.mark{visibility:visible}
.gap-label{position:absolute;left:calc(100%/15*3.5);width:calc(100%/15*6);bottom:52px;
  text-align:center;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:640px){
  .hband{height:150px}
  .slot.on b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.82rem;margin-bottom:.35rem}
  .gap-label{font-size:.6rem;bottom:78px}
}

/* ---------------- rows / cols ---------------- */
.rows{border-top:1px solid var(--rule);margin-top:2rem}
.row{display:grid;grid-template-columns:minmax(0,15rem) 1fr;gap:.4rem 2.5rem;
  padding:1.35rem 0;border-bottom:1px solid var(--rule);align-items:baseline}
.row h3{margin:0}
.row p{margin:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem 2.5rem;margin-top:2rem}
.cols h3{margin-bottom:.4rem}
.cols p{margin:0;font-size:.97rem}
@media(max-width:720px){.row{grid-template-columns:1fr}}

/* ---------------- fees ---------------- */
.fees{border-top:2px solid var(--gold);margin:2rem 0 1rem;max-width:38rem}
.fee{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;
  padding:1.05rem 0;border-bottom:1px solid var(--rule)}
.fee b{font-family:"Playfair Display",serif;font-weight:500;color:var(--ink);
  font-size:1.28rem;white-space:nowrap}
.fee span{color:var(--ink-3);font-size:.9rem;display:block}

/* ---------------- faq ---------------- */
.faq{border-top:1px solid var(--rule);margin-top:2rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;position:relative;
  font-family:"Playfair Display",serif;font-weight:500;color:var(--ink);font-size:1.06rem;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:1.5rem;width:9px;height:9px;
  border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 1.35rem}
.faq .a p:last-child{margin-bottom:0}

/* ---------------- dark ---------------- */
.dark{background:var(--teal);color:var(--teal-xl);border:0}
.dark h1,.dark h2,.dark h3{color:var(--paper)}
.dark .eyebrow{color:var(--gold)}
.dark a{color:#fff}
.dark .btn{background:var(--paper);color:var(--teal);border-color:var(--paper)}
.dark .btn:hover{background:transparent;color:var(--paper)}
.dark .rows,.dark .row{border-color:rgba(245,239,230,.22)}

/* ---------------- crisis ---------------- */
.crisis{background:var(--sage-xl);padding:1.5rem;border-left:3px solid var(--sage);max-width:38rem}
.crisis ul{margin:.6rem 0 0;padding-left:1.1rem;font-size:.95rem}
.crisis li{margin-bottom:.3rem}

/* ---------------- posts ---------------- */
.entry{padding:clamp(2.5rem,5vw,4rem) 0}
.entry-meta{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem}
.entry-content{max-width:var(--measure)}
.entry-content h2{margin-top:2.2rem}
.entry-content h3{margin-top:1.8rem}
.entry-content img{margin:2rem 0;border-radius:3px}
.post-list{border-top:1px solid var(--rule);margin-top:2rem}
.post-item{padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.post-item h2{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);margin-bottom:.35rem}
.post-item h2 a{text-decoration:none;color:var(--ink)}
.post-item h2 a:hover{color:var(--teal)}
.post-item p{margin:0;color:var(--ink-2)}
.pagination{margin-top:2.5rem;display:flex;gap:.6rem;flex-wrap:wrap}
.pagination .page-numbers{padding:.45rem .85rem;border:1px solid var(--rule);border-radius:3px;
  text-decoration:none;font-size:.9rem}
.pagination .current{background:var(--teal);color:#fff;border-color:var(--teal)}
.post-cta{margin-top:3rem;padding:1.75rem;background:var(--paper-2);border-left:3px solid var(--gold);max-width:var(--measure)}
.post-cta p:last-child{margin-bottom:0}

/* ---------------- booking (Easy Appointments) ---------------- */
.hs-booking{background:var(--paper);padding:clamp(1.25rem,4vw,2.5rem) var(--pad);border-radius:4px;max-width:1080px;margin-left:auto;margin-right:auto}
.hs-booking label,.hs-booking legend{color:var(--ink)!important;font-weight:700;font-size:.92rem;opacity:1!important}
.hs-booking input,.hs-booking select,.hs-booking textarea{
  background:#fff;border:1px solid rgba(61,61,61,.28);border-radius:3px;color:var(--ink);
  padding:.7rem .8rem;font-family:inherit;font-size:1rem;width:100%}
.hs-booking button,.hs-booking input[type=submit],.hs-booking .btn-primary{
  background:var(--teal)!important;border:1px solid var(--teal)!important;color:#fff!important;
  border-radius:999px!important;padding:.8rem 1.6rem!important;font-family:inherit;cursor:pointer}
.hs-booking button:hover,.hs-booking .btn-primary:hover{background:transparent!important;color:var(--teal)!important}
.hs-booking .active,.hs-booking td.selected{background:var(--teal)!important;color:#fff!important}

/* Easy Appointments fit + responsiveness.
   The plugin hardcodes an 800px width and its Bootstrap media queries key off
   the viewport, so on wide screens it lays the form out at 800px inside a
   narrower column and clips on the left. It also got pasted into a Preformatted
   (<pre>) block, which forces monospace + no-wrap. These scoped overrides fix
   both without leaking outside .hs-booking. */
pre.hs-booking{white-space:normal;font-family:inherit;line-height:inherit}
.hs-booking{overflow-x:auto}
.hs-booking,.hs-booking *{box-sizing:border-box}
.hs-booking .ea-bootstrap{max-width:760px!important;width:100%!important;margin-left:auto!important;margin-right:auto!important}
.hs-booking .form-horizontal,.hs-booking .row,.hs-booking .form-group{margin-left:0;margin-right:0}
.hs-booking .date,.hs-booking .ui-datepicker{width:100%!important;max-width:100%}
.hs-booking .ui-datepicker table{width:100%}
.hs-booking .col-sm-4,.hs-booking .col-sm-8{padding-left:0;padding-right:0}
@media(min-width:768px){
  .hs-booking .col-sm-4{padding-right:.75rem}
}
/* Terms & conditions checkbox: undo Bootstrap's negative margin so the box
   doesn't overlap the label text, and align box + label on one baseline. */
.hs-booking .checkbox{padding-left:0}
.hs-booking .checkbox label{display:flex;align-items:center;gap:.5rem;padding-left:0;font-weight:400}
.hs-booking .checkbox label input[type=checkbox]{position:static;margin:0;flex:0 0 auto;width:auto}
/* PayPal button lives in a cross-domain iframe (zoid). Reserve height and let
   it be full width so it isn't collapsed to zero when Easy Appointments reveals
   it for a paid service. This only sizes the button — it does NOT override EA's
   show/hide logic, so the $0 service still shows the plain Submit button. */
.hs-booking .ea-actions-group{flex-wrap:wrap;gap:.6rem;width:100%}
.hs-booking #paypal-button{width:100%;max-width:320px;min-height:45px}
.hs-booking #paypal-button .zoid-outlet,
.hs-booking #paypal-button iframe.zoid-visible{width:100%!important;min-height:45px}
.tz{max-width:760px;font-size:.92rem;color:var(--ink-3);border-left:2px solid var(--gold);
  padding-left:.9rem;margin:0 auto 1.25rem}

/* ---------------- footer ---------------- */
.site-footer{background:#3D3D3D;color:#B9B9B2;font-size:.88rem;padding:3rem 0 2.5rem;margin-top:0}
.site-footer a{color:#EDE4D5}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
.fgrid strong{color:var(--paper);font-family:"Playfair Display",serif;font-weight:500;
  font-size:1.05rem;display:block;margin-bottom:.5rem}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:.3rem}
.fine{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(245,239,230,.18);
  font-size:.78rem;color:#9A9A93;display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.fine-links{list-style:none;display:flex;gap:1.5rem;margin:0;padding:0;flex-wrap:wrap}

/* ---------------- motion ----------------
   Content is visible by default. It is only hidden (to be animated in) when
   JavaScript is running and has added the `js` class to <html>. If JS is
   disabled, deferred, or blocked by a cache/optimiser, nothing is ever hidden. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rise{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------------- mobile nav ---------------- */
@media(max-width:860px){
  .nav-toggle{display:block;order:3}
  .main-nav{display:none;width:100%;order:4}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:.85rem;padding:1rem 0 .25rem}
}

/* ---------------- WP core alignment ---------------- */
.alignwide{max-width:1080px}
.alignfull{max-width:none;width:100%}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text,figcaption{font-size:.85rem;color:var(--ink-3)}