/*
Theme Name: Vision Wellbeing (Astra Child)
Theme URI: https://example.com/
Description: Conversion-optimised Astra child theme for Vision Wellbeing (CBT therapist). Provides calm design system + reusable shortcodes.
Author: Vision Wellbeing
Author URI: https://example.com/
Template: astra
Version: 1.0.0
Text Domain: vision-wellbeing
*/

/* =========================================================
   Vision Wellbeing Design System
   Namespace: vw- (CSS), vw_ (PHP)
   ========================================================= */

:root{
  /* Color system */
  --vw-bg: #F7F7F5;
  --vw-surface: #FFFFFF;
  --vw-text: #1F2328;
  --vw-muted: #5B636B;
  --vw-border: rgba(31,35,40,0.12);
  --vw-accent: #1E7A78; /* calm teal */
  --vw-accent-contrast: #FFFFFF;

  /* Typography & spacing */
  --vw-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --vw-radius: 16px;
  --vw-radius-sm: 12px;
  --vw-shadow: 0 10px 24px rgba(17, 24, 39, 0.08);
  --vw-shadow-sm: 0 6px 16px rgba(17, 24, 39, 0.07);

  --vw-container: 1120px;
  --vw-gutter: 20px;

  --vw-space-lg: clamp(56px, 6vw, 84px);
  --vw-space-md: clamp(32px, 4vw, 56px);
  --vw-space-sm: clamp(18px, 2.5vw, 28px);

  --vw-focus: 0 0 0 3px rgba(30, 122, 120, 0.25);
}

/* Optional Inter font toggle (default off for speed)
   Add in wp-config.php: define('VW_USE_INTER_FONT', true);
*/
html { scroll-behavior: smooth; }

body{
  font-family: var(--vw-font);
  color: var(--vw-text);
  background: var(--vw-bg);
  line-height: 1.6;
  font-size: 17px;
}

a{ color: var(--vw-accent); }
a:hover{ opacity: 0.9; }

/* Focus styles: avoid giant square glow in menus by using outline for links */
a:focus-visible{
  outline: 3px solid rgba(30, 122, 120, 0.35);
  outline-offset: 3px;
  box-shadow: none;
  border-radius: 12px;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline: none;
  box-shadow: var(--vw-focus);
  border-radius: 12px;
}

::selection{
  background: rgba(30,122,120,0.18);
}

/* Astra compatibility: keep headings tight */
h1,h2,h3{ line-height: 1.15; letter-spacing: -0.015em; }
h1{ font-size: clamp(34px, 4vw, 54px); }
h2{ font-size: clamp(26px, 3vw, 36px); }
h3{ font-size: clamp(20px, 2.2vw, 26px); }
p{ margin: 0 0 1em; color: var(--vw-text); }
.vw-muted{ color: var(--vw-muted); }

/* =========================================================
   Layout wrappers
   ========================================================= */
.vw-container{
  max-width: var(--vw-container);
  margin: 0 auto;
  padding-left: var(--vw-gutter);
  padding-right: var(--vw-gutter);
}

.vw-section{
  padding: var(--vw-space-md) 0;
}

.vw-section--padding-lg{ padding: var(--vw-space-lg) 0; }
.vw-section--padding-md{ padding: var(--vw-space-md) 0; }
.vw-section--padding-sm{ padding: var(--vw-space-sm) 0; }

.vw-section--default{ background: var(--vw-bg); }
.vw-section--alt{ background: var(--vw-surface); }

.vw-stack{ display: grid; gap: 18px; }
.vw-stack--md{ gap: 24px; }
.vw-stack--lg{ gap: 32px; }

.vw-grid{
  display: grid;
  gap: 18px;
}
@media (min-width: 720px){
  .vw-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
  .vw-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
}

/* =========================================================
   Components
   ========================================================= */
.vw-card{
  background: var(--vw-surface);
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius);
  box-shadow: var(--vw-shadow-sm);
  padding: 22px;
}

.vw-card--flat{
  box-shadow: none;
}

.vw-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--vw-border);
  border-radius: 999px;
  background: rgba(30,122,120,0.06);
  color: var(--vw-text);
  font-size: 14px;
}

.vw-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
  line-height: 1.2;
  min-height: 44px;
}

.vw-btn:hover{ transform: translateY(-1px); }
.vw-btn:active{ transform: translateY(0); }

.vw-btn--primary{
  background: var(--vw-accent);
  color: var(--vw-accent-contrast) !important;
  box-shadow: 0 10px 20px rgba(30,122,120,0.18);
}
.vw-btn--primary:hover{ opacity: 0.95; }

.vw-btn--secondary{
  background: transparent;
  color: var(--vw-accent) !important;
  border-color: rgba(30,122,120,0.35);
}
.vw-btn--secondary:hover{
  background: rgba(30,122,120,0.06);
}

.vw-btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 520px){
  .vw-btn-row .vw-btn{ width: 100%; }
}

/* Notice component */
.vw-notice{
  border-radius: var(--vw-radius);
  border: 1px solid var(--vw-border);
  padding: 18px 18px;
  background: var(--vw-surface);
}
.vw-notice__title{
  font-weight: 700;
  margin: 0 0 8px;
}
.vw-notice--info{
  border-left: 5px solid rgba(30,122,120,0.55);
}
.vw-notice--warning{
  border-left: 5px solid rgba(245, 158, 11, 0.65);
}

/* =========================================================
   Hero
   ========================================================= */
.vw-hero{
  display: grid;
  gap: 22px;
  align-items: center;
}
@media (min-width: 900px){
  .vw-hero{ grid-template-columns: 1.25fr 0.75fr; gap: 30px; }
}

.vw-hero__title{ margin: 0; }
.vw-hero__subtitle{
  font-size: clamp(17px, 2vw, 20px);
  color: var(--vw-muted);
  margin: 10px 0 0;
}
.vw-hero__note{
  margin-top: 10px;
  color: var(--vw-muted);
  font-size: 14px;
}
.vw-hero__panel{
  border-radius: var(--vw-radius);
  border: 1px solid var(--vw-border);
  background: var(--vw-surface);
  box-shadow: var(--vw-shadow);
  padding: 22px;
}
.vw-hero__panel h3{
  margin: 0 0 10px;
}
.vw-hero__panel p{
  color: var(--vw-muted);
  margin: 0 0 12px;
}

.vw-hero__content .vw-badge { display:none; }

/* Trust bar */
.vw-trustbar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.vw-trustbar .vw-badge{
  background: rgba(255,255,255,0.65);
}

/* =========================================================
   Steps
   ========================================================= */
.vw-steps__heading{ margin: 0 0 14px; }
.vw-step{
  display: grid;
  gap: 10px;
}
.vw-step__kicker{
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(30,122,120,0.10);
  color: var(--vw-accent);
  font-weight: 800;
}
.vw-step__title{ margin: 0; }
.vw-step__text{ margin: 0; color: var(--vw-muted); }

/* =========================================================
   Cards grid
   ========================================================= */
.vw-cards__heading{ margin: 0 0 14px; }
.vw-card__title{ margin: 0 0 8px; }
.vw-card__text{ margin: 0; color: var(--vw-muted); }

/* =========================================================
   CTA banner
   ========================================================= */
.vw-cta{
  border-radius: var(--vw-radius);
  background: linear-gradient(180deg, rgba(30,122,120,0.10), rgba(30,122,120,0.04));
  border: 1px solid rgba(30,122,120,0.18);
  padding: 22px;
  box-shadow: var(--vw-shadow-sm);
}
.vw-cta__heading{ margin: 0 0 8px; }
.vw-cta__text{ margin: 0 0 14px; color: var(--vw-muted); }

/* =========================================================
   FAQ accordion (details/summary)
   ========================================================= */
.vw-faq details{
  border: 1px solid var(--vw-border);
  border-radius: 14px;
  background: var(--vw-surface);
  padding: 14px 16px;
}
.vw-faq details + details{ margin-top: 12px; }
.vw-faq summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.vw-faq summary::-webkit-details-marker{ display:none; }
.vw-faq summary:after{
  content: "＋";
  float: right;
  color: var(--vw-muted);
}
.vw-faq details[open] summary:after{ content: "－"; }
.vw-faq .vw-faq__answer{
  margin-top: 10px;
  color: var(--vw-muted);
}

/* =========================================================
   Booking embed frame
   ========================================================= */
.vw-booking{
  display: grid;
  gap: 14px;
}
.vw-booking__frame{
  border-radius: var(--vw-radius);
  border: 1px solid var(--vw-border);
  background: var(--vw-surface);
  box-shadow: var(--vw-shadow);
  overflow: hidden;
}
.vw-booking__frame-inner{
  padding: 14px;
}
.vw-booking iframe{
  width: 100%;
  border: 0;
  display: block;
  border-radius: 12px;
  background: #fff;
  min-height: 820px;
}
@media (min-width: 980px){
  .vw-booking iframe{
    min-height: min(980px, 82vh);
  }
}
.vw-booking__fallback{
  display: flex;
  justify-content: flex-end;
}

/* =========================================================
   Contact form
   ========================================================= */
.vw-form{
  display: grid;
  gap: 14px;
}
.vw-form label{
  font-weight: 600;
  font-size: 14px;
}
.vw-form input[type="text"],
.vw-form input[type="email"],
.vw-form textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--vw-border);
  background: var(--vw-surface);
  font-size: 16px;
  line-height: 1.4;
}
.vw-form textarea{ min-height: 140px; resize: vertical; }

.vw-form__row{
  display: grid;
  gap: 14px;
}
@media (min-width: 720px){
  .vw-form__row{ grid-template-columns: 1fr 1fr; }
}

.vw-form__msg{
  border-radius: 14px;
  border: 1px solid var(--vw-border);
  padding: 12px 14px;
  background: var(--vw-surface);
}
.vw-form__msg--success{
  border-left: 5px solid rgba(34, 197, 94, 0.55);
}
.vw-form__msg--error{
  border-left: 5px solid rgba(239, 68, 68, 0.55);
}

/* =========================================================
   Footer disclaimer block
   ========================================================= */
.vw-footer-disclaimer{
  margin-top: 18px;
  padding: 14px 0;
  border-top: 1px solid rgba(31,35,40,0.10);
  color: var(--vw-muted);
  font-size: 14px;
}
.vw-footer-disclaimer p{ color: var(--vw-muted); margin: 0 0 10px; }
.vw-footer-disclaimer a{ color: var(--vw-accent); }

/* =========================================================
   Sticky mobile book button (optional)
   Add in wp-config.php: define('VW_ENABLE_STICKY_BOOK', true);
   ========================================================= */
.vw-sticky-book{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  display: none;
}
.vw-sticky-book .vw-btn{ width: 100%; box-shadow: 0 14px 28px rgba(17,24,39,0.16); }

@media (max-width: 720px){
  body.vw-has-sticky-book .vw-sticky-book{ display: block; }
  body.vw-has-sticky-book{ padding-bottom: 92px; }
}

/* Utility */
.vw-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Hide WP page title on the homepage (hero already has its own heading) */
body.home .entry-header .entry-title,
body.home .entry-header .page-title {
  display: none !important;
}
body.home .entry-header {
  margin-bottom: 0 !important;
}
.main-header-menu .vw-menu-booking > a:hover,
.ast-primary-header-bar .vw-menu-booking > a:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* Header: use logo only (hide site title text) */
.site-title,
.site-description { display:none !important; }

/* Home page: hide the default page title ("Home") */
.home .entry-header { display:none !important; }


/* Remove stray <br> WordPress sometimes injects inside our section containers */
.vw-section .vw-container > br { display:none; }
.vw-section .vw-container > p:empty { display:none; }

/* ===== Vision Wellbeing: quick design pass ===== */

/* Layout rhythm */
.vw-section { padding: 0; }
.vw-section--padding-lg { padding: 72px 0; }
.vw-section--padding-md { padding: 56px 0; }
.vw-section--padding-sm { padding: 36px 0; }

@media (max-width: 768px){
  .vw-section--padding-lg { padding: 48px 0; }
  .vw-section--padding-md { padding: 40px 0; }
}

/* Section backgrounds (fix “flatness”) */
.vw-section--default { background: #ffffff; }
.vw-section--alt {
  background: linear-gradient(180deg, rgba(4,107,210,0.06), rgba(4,107,210,0.02));
}

/* Hero polish */
.vw-hero{
  gap: 28px;
  align-items: stretch;
}
.vw-hero__title{
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.vw-hero__subtitle{
  font-size: 1.125rem;
  opacity: 0.9;
  max-width: 60ch;
}
.vw-hero__panel{
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  border-radius: 16px;
}
.vw-hero__panel h3{ margin-top: 0; }

/* Buttons: slightly more “product-like” */
.vw-btn{
  border-radius: 999px;
  font-weight: 650;
  padding: 12px 18px;
}
.vw-btn-row{ gap: 10px; flex-wrap: wrap; }

@media (max-width: 768px){
  .vw-btn-row a.vw-btn{ width: 100%; text-align: center; }
}

/* Trust bar: make badges consistent and lighter */
.vw-trustbar{ gap: 10px; margin-top: 16px; }
.vw-badge{
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255,255,255,0.7);
}

/* Cards: depth + hover */
.vw-card{
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.vw-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.10);
}

/* Steps: add a clearer “signal” */
.vw-step__kicker{
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(4,107,210,0.12);
  color: #045cb4;
  font-weight: 800;
}

/* CTA: stronger, more distinct block */
.vw-cta{
  border-radius: 18px;
  border: 1px solid rgba(4,107,210,0.18);
  background: linear-gradient(135deg, rgba(4,107,210,0.10), rgba(4,107,210,0.04));
  padding: 28px;
}
.vw-cta__heading{ margin-top: 0; }