/*
Theme Name:  Write to Heal Centre
Theme URI:   https://writetohealcentre.com
Author:      Write to Heal Centre
Description: Custom WordPress theme for Write to Heal Centre. All inner pages are pre-created and editable with Elementor. Includes hero slider, responsive nav, WooCommerce support.
Version:     3.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License:     GNU General Public License v2 or later
Text Domain: wth
*/

/* =============================================
   VARIABLES
============================================= */
:root {
  --teal:     #1a3a3a;
  --teal-mid: #2d5a5a;
  --gold:     #ac872f;
  --gold-lt:  #e8d5a3;
  --off:      #f8f6f1;
  --warm:     #fdfbf7;
  --txt:      #1c2a2a;
  --txt-mid:  #4a5a5a;
  --txt-lt:   #7a8a8a;
  --border:   #ddd8cc;
  --shadow:   0 12px 40px rgba(0,0,0,.10);
  --radius:   8px;
  --tr:       .25s ease;
}

/* =============================================
   RESET & BASE
============================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; font-size:16px }
body { font-family:'Lato',sans-serif; color:var(--txt); background:var(--warm); line-height:1.6; -webkit-font-smoothing:antialiased }
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none; transition:color var(--tr) }
ul { list-style:none }
button { cursor:pointer; border:none; background:none; font-family:inherit }
h1,h2,h3,h4,h5 { font-family:'Playfair Display',serif; color:var(--teal); line-height:1.2 }
p { color:var(--txt-mid); line-height:1.7 }

/* =============================================
   UTILITY
============================================= */
.wth-container { max-width:1200px; margin:0 auto; padding:0 40px }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:12px 26px; border-radius:4px; font-size:14px; font-weight:700; letter-spacing:.4px; transition:all var(--tr); cursor:pointer; text-decoration:none; border:none; font-family:'Lato',sans-serif }
.btn-gold { background:var(--gold); color:#fff }
.btn-gold:hover { background:#a8892e; transform:translateY(-2px); color:#fff }
.btn-teal { background:var(--teal); color:#fff }
.btn-teal:hover { background:var(--teal-mid); transform:translateY(-2px); color:#fff }
.btn-outline { border:2px solid var(--teal); color:var(--teal); background:transparent }
.btn-outline:hover { background:var(--teal); color:#fff }
.btn-outline-white { border:2px solid rgba(255,255,255,.6); color:#fff; background:transparent }
.btn-outline-white:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff }
.btn-outline-gold { border:1px solid var(--gold); color:var(--gold); background:transparent; padding:7px 16px; font-size:13px }
.btn-outline-gold:hover { background:var(--gold); color:#fff }

/* Checklist */
.wth-checklist { display:flex; flex-direction:column; gap:10px }
.wth-checklist li { display:flex; align-items:center; gap:10px; color:var(--txt-mid); font-size:14.5px }
.wth-checklist li::before { content:'✓'; color:var(--gold); font-weight:700; flex-shrink:0 }

/* =============================================
   TOP BAR
============================================= */
.wth-topbar { background:var(--teal); color:#c8d8d8; font-size:12.5px; padding:8px 32px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; position:relative; z-index:9998;display: none; }
.wth-topbar a { color:inherit }
.wth-topbar a:hover { color:var(--gold) }
.wth-topbar__social { display:flex; gap:14px }
.wth-topbar__social a { font-size:13px; display:flex; align-items:center; justify-content:center; transition:color var(--tr) }

/* =============================================
   NAVIGATION
============================================= */
.wth-site-header { background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:9999; box-shadow:0 2px 12px rgba(0,0,0,.06) }
.wth-nav-inner { display:flex; align-items:center; justify-content:space-between; padding:14px 40px; max-width:1400px; margin:0 auto }

.wth-logo { display:flex; align-items:center; gap:12px; text-decoration:none }
.wth-logo__icon { width:52px; height:52px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.wth-logo__icon svg { width:30px; height:30px }
.wth-logo__text .line1 { font-weight:700; font-size:11px; letter-spacing:3px; color:var(--teal); display:block; text-transform:uppercase }
.wth-logo__text .line2 { font-family:'Playfair Display',serif; font-size:17px; color:var(--teal); display:block }

/* Desktop menu */
.wth-primary-menu { display:flex; align-items:center; gap:0; margin:0; padding:0 }
.wth-primary-menu > li { position:relative; padding:0 14px }
.wth-primary-menu > li > a { font-size:16px; color:var(--txt-mid); padding:6px 0; display:inline-block; white-space:nowrap }
.wth-primary-menu > li > a:hover,
.wth-primary-menu > li.current-menu-item > a,
.wth-primary-menu > li.current-menu-ancestor > a { color:var(--teal) }
.wth-primary-menu > li.menu-cta > a { background:var(--gold); color:#fff !important; padding:9px 20px; border-radius:4px; font-weight:700 }
.wth-primary-menu > li.menu-cta > a:hover { background:var(--teal) }

/* Dropdown */
.wth-primary-menu .sub-menu { position:absolute; top:calc(100% + 0px); left:0; min-width:210px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:8px 0; z-index:10000; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); transition:all .2s ease }
.wth-primary-menu li:hover > .sub-menu,
.wth-primary-menu li:focus-within > .sub-menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) }
.wth-primary-menu .sub-menu li a { display:block; padding:9px 18px; font-size:13.5px; color:var(--txt-mid); white-space:nowrap }
.wth-primary-menu .sub-menu li a:hover { background:var(--off); color:var(--teal) }
.wth-primary-menu li.menu-item-has-children > a::after { content:' ▾'; font-size:10px; opacity:.6 }

/* Hamburger */
.wth-hamburger { display:none; flex-direction:column; gap:5px; padding:6px; z-index:10001 }
.wth-hamburger span { display:block; width:25px; height:2px; background:var(--teal); border-radius:2px; transition:all .35s ease }
.wth-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.wth-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.wth-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Mobile nav */
.wth-mobile-nav { display:none; position:fixed; top:0; right:-100%; width:280px; height:100vh; background:#fff; z-index:100000; box-shadow:-4px 0 24px rgba(0,0,0,.12); padding:80px 28px 40px; flex-direction:column; transition:right .38s cubic-bezier(.4,0,.2,1) }
.wth-mobile-nav.open { right:0 }
.wth-mobile-nav ul { display:flex; flex-direction:column }
.wth-mobile-nav ul li a { display:block; padding:13px 0; border-bottom:1px solid var(--border); font-size:15px; color:var(--txt) }
.wth-mobile-nav ul li a:hover { color:var(--gold) }
.wth-mobile-nav .mob-cta { margin-top:22px; background:var(--gold); color:#fff; text-align:center; padding:13px; border-radius:6px; font-weight:700; display:block; transition:background var(--tr) }
.wth-mobile-nav .mob-cta:hover { background:var(--teal); color:#fff }
.wth-nav-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:99999; opacity:0; pointer-events:none; transition:opacity .3s }
.wth-nav-overlay.show { opacity:1; pointer-events:auto }

/* =============================================
   HERO SLIDER
============================================= */
.wth-hero-slider { position:relative; overflow:hidden; height:580px; background:var(--teal) }
.wth-slide { position:absolute; inset:0; display:flex; align-items:center; opacity:0; pointer-events:none; transition:opacity .15s }
.wth-slide.active { opacity:1; pointer-events:auto }
.wth-slide__bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); transition:transform 7s ease }
.wth-slide.active .wth-slide__bg { transform:scale(1) }
.wth-slide__overlay { position:absolute; inset:0; /*background:linear-gradient(105deg,rgba(15,37,37,.84) 0%,rgba(15,37,37,.48) 58%,rgba(15,37,37,.12) 100%)*/ }
.wth-slide__body { position:relative; z-index:2; max-width:1200px; margin:0 auto; width:100% }

.wth-slide__tag,.wth-slide__title,.wth-slide__desc,.wth-slide__badges,.wth-slide__ctas { opacity:0; transform:translateY(32px); transition:opacity .6s ease,transform .6s ease }
.wth-slide.active .wth-slide__tag   { opacity:1; transform:none; transition-delay:.18s }
.wth-slide.active .wth-slide__title { opacity:1; transform:none; transition-delay:.32s }
.wth-slide.active .wth-slide__desc  { opacity:1; transform:none; transition-delay:.46s }
.wth-slide.active .wth-slide__badges{ opacity:1; transform:none; transition-delay:.58s }
.wth-slide.active .wth-slide__ctas  { opacity:1; transform:none; transition-delay:.70s }

.wth-slide__tag { display:inline-block; color:var(--gold); font-size:20px; font-weight:700; letter-spacing:2px; padding:10px 0; border-radius:20px; margin-bottom:18px }
.wth-slide__title { font-family:'Playfair Display',serif; font-size:clamp(1.9rem,4.5vw,3.2rem); color:#1f1f1f; line-height:1.18; margin-bottom:14px }
.wth-slide__title em { font-style:italic; color:#1f1f1f }
.wth-slide__desc { font-size:16px; color:#1f1f1f; line-height:1.65; max-width:520px; margin-bottom:22px }
.wth-slide__badges { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px }
.wth-slide-badge { background:rgba(31,31,31,.10); border:1px solid rgba(31,31,31,.90); border-radius:20px; padding:5px 14px; font-size:12px; color:#1f1f1f; display:flex; align-items:center; gap:6px }
.wth-slide-badge::before { content:'✓'; color:var(--gold); font-weight:700 }
.wth-slide__ctas { display:none; gap:14px; flex-wrap:wrap }

.wth-sl-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:5; background:rgba(31,31,13,.82); border:1px solid rgba(255,255,255,.25); color:#fff; width:44px; height:44px; border-radius:50%; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--tr) }
.wth-sl-arrow:hover { background:var(--gold); border-color:var(--gold) }
.wth-sl-arrow.prev { left:20px }
.wth-sl-arrow.next { right:20px }
.wth-sl-dots { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:5; display:flex; gap:10px }
.wth-sl-dot { width:10px; height:10px; border-radius:50%; background:rgba(31,31,31,.35); cursor:pointer; border:none; transition:background .3s,transform .3s }
.wth-sl-dot.active { background:var(--gold); transform:scale(1.3) }
.wth-sl-progress { position:absolute; bottom:0; left:0; height:3px; background:var(--gold); width:0%; z-index:5; transition:width linear }

/* =============================================
   TRUST BAR
============================================= */
.wth-trust-bar { background:#fff; border-top:3px solid var(--gold); padding:22px 40px; text-align:center }
.wth-trust-bar h3 { font-family:'Playfair Display',serif; font-size:18px; margin-bottom:4px }
.wth-trust-bar p { color:var(--txt-mid); font-size:14px }

/* =============================================
   ACCREDITATION
============================================= */
.wth-sec-accred { background:var(--off); padding:64px 0 }
.wth-accred-grid { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:center }
.wth-accred-badge { background:var(--teal); border-radius:12px; padding:32px 20px; text-align:center; color:#fff }
.wth-accred-badge__icon { width:72px; height:72px; background:rgba(255,255,255,.12); border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:28px }
.wth-accred-badge h4 { font-family:'Playfair Display',serif; font-size:14px; line-height:1.5; color:#fff }
.wth-accred-badge__line { width:40px; height:2px; background:var(--gold); margin:12px auto }
.wth-accred-badge p { font-size:10px; color:var(--gold-lt); letter-spacing:2px; text-transform:uppercase }
.wth-accred-content h2 { font-size:1.65rem; margin-bottom:12px }
.wth-accred-content > p { margin-bottom:18px }

/* =============================================
   COURSES GRID
============================================= */
.wth-sec-courses { padding:30px 0; background:#fff }
.wth-courses-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.wth-course-card { background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:box-shadow var(--tr),transform var(--tr) }
.wth-course-card:hover { box-shadow:var(--shadow); transform:translateY(-4px) }
.wth-course-card__img { width:100%; height:158px; object-fit:cover }
.wth-course-card__body { padding:18px }
.wth-course-card__tag { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--gold); font-weight:700; margin-bottom:7px }
.wth-course-card__body h3 { font-family:'Playfair Display',serif; font-size:15px; margin-bottom:7px; line-height:1.3 }
.wth-course-card__body h3 a { color:var(--teal) }
.wth-course-card__body h3 a:hover { color:var(--gold) }
.wth-course-card__body p { font-size:12.5px; color:var(--txt-lt); margin-bottom:14px; line-height:1.5 }
.wth-course-card__price { font-size:15px; font-weight:700; color:var(--teal); margin-bottom:12px }
.wth-sec-courses .wth-courses-footer { text-align:center; margin-top:32px }

/* =============================================
   ABOUT STRIP
============================================= */
.wth-sec-about { padding:72px 0; background:var(--off) }
.wth-about-grid { display:grid; grid-template-columns:1fr 400px; gap:52px; align-items:center }
.wth-about-content h2 { font-size:1.75rem; margin-bottom:4px }
.wth-about-subtitle { font-size:14px; color:var(--gold); font-weight:700; letter-spacing:.5px; margin-bottom:16px; display:block }
.wth-about-content > p { margin-bottom:24px }
.wth-about-features { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.wth-feat-item { display:flex; align-items:flex-start; gap:12px }
.wth-feat-icon { width:42px; height:42px; flex-shrink:0; background:var(--teal); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:17px }
.wth-feat-text strong { font-size:13.5px; color:var(--teal); display:block; margin-bottom:2px }
.wth-feat-text span { font-size:12px; color:var(--txt-lt) }
.wth-about-img img { width:100%; border-radius:12px; box-shadow:0 16px 48px rgba(0,0,0,.13); object-fit:cover; height:400px }

/* =============================================
   TESTIMONIALS
============================================= */
.wth-sec-testi { background:var(--teal); padding:64px 0; text-align:center }
.wth-sec-testi h2 { color:#fff; font-size:1.7rem; margin-bottom:32px }
.wth-testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.wth-testi-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:26px 22px; text-align:left; transition:background var(--tr) }
.wth-testi-card:hover { background:rgba(255,255,255,.13) }
.wth-testi-stars { color:var(--gold); font-size:13px; margin-bottom:10px }
.wth-testi-card p { font-size:13.5px; color:#c8d8d8; line-height:1.65; margin-bottom:14px; font-style:italic }
.wth-testi-author { font-size:13px; color:var(--gold-lt); font-weight:700 }
.wth-testi-role { font-size:12px; color:#8aabab }

/* =============================================
   PAGE HERO BANNER (inner pages)
============================================= */
.wth-page-hero { background:var(--teal); padding:56px 0; text-align:center; position:relative; overflow:hidden }
.wth-page-hero::after { content:''; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23c9a84c' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E") }
.wth-page-hero__inner { position:relative; z-index:1 }
.wth-breadcrumb { font-size:13px; color:#8aabab; margin-bottom:12px }
.wth-breadcrumb a { color:var(--gold-lt) }
.wth-breadcrumb a:hover { color:var(--gold) }
.wth-breadcrumb span { color:#8aabab }
.wth-page-hero h1 { color:#fff; font-size:clamp(1.8rem,4vw,2.8rem); margin-bottom:8px }
.wth-page-hero .subtitle { color:#c8d8d8; font-size:15.5px; max-width:580px; margin:0 auto }

/* =============================================
   ELEMENTOR PAGE CONTENT WRAPPER
============================================= */
.wth-elementor-wrap { padding:0 }
.wth-elementor-wrap .elementor { width:100% }

/* Elementor full width on inner pages */
body.page-template-elementor-fullwidth .wth-elementor-wrap,
body.elementor-page .wth-content-area { padding:0 }

/* Content area for non-elementor pages */
.wth-content-area { padding:64px 0 }
.wth-content-area .entry-content { font-size:15.5px; line-height:1.75; color:var(--txt-mid) }
.wth-content-area .entry-content h2 { font-size:1.5rem; margin:32px 0 12px; color:var(--teal) }
.wth-content-area .entry-content h3 { font-size:1.2rem; margin:24px 0 8px; color:var(--teal) }
.wth-content-area .entry-content p { margin-bottom:16px }
.wth-content-area .entry-content ul { margin:0 0 16px 20px; list-style:disc }
.wth-content-area .entry-content ul li { margin-bottom:6px }

/* =============================================
   WOOCOMMERCE
============================================= */
.woocommerce ul.products { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0 !important }
.woocommerce ul.products li.product { margin:0 !important; background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:box-shadow var(--tr),transform var(--tr) }
.woocommerce ul.products li.product:hover { box-shadow:var(--shadow); transform:translateY(-4px) }
.woocommerce ul.products li.product img { height:180px; object-fit:cover; width:100% }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family:'Playfair Display',serif; font-size:16px; color:var(--teal); padding:12px 16px 4px }
.woocommerce ul.products li.product .price { color:var(--teal); font-weight:700; font-size:15px; padding:0 16px 12px }
.woocommerce ul.products li.product .button { margin:0 16px 16px; width:calc(100% - 32px); display:block; text-align:center }
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button { background:var(--gold) !important; color:#fff !important; border-radius:4px !important; font-weight:700 !important; transition:background var(--tr) !important }
.woocommerce a.button:hover,.woocommerce button.button:hover { background:var(--teal) !important }
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea { border:1px solid var(--border) !important; border-radius:4px !important; padding:10px 14px !important }
.woocommerce-message,.woocommerce-info { border-top-color:var(--gold) !important }

/* =============================================
   FOOTER
============================================= */
.wth-site-footer {color:#4a5a5a; padding:52px 0 24px;background:#1a3a2e;}
.wth-footer-top { display:grid; grid-template-columns:220px 1fr; gap:52px; margin-bottom:44px }
.wth-footer-brand__logo { display:flex; align-items:center; gap:10px; margin-bottom:14px }
.wth-footer-brand__circle { width:42px; height:42px; border-radius:50%; border:2px solid var(--gold); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0 }
.wth-footer-brand__name { font-family:'Playfair Display',serif; color:var(--gold-lt); font-size:14px; line-height:1.2 }
.wth-footer-brand > p { font-size:13px; line-height:1.6;color: #ffffff;}
.wth-footer-social { display:flex; gap:10px; margin-top:14px }
.wth-footer-social a { width:30px; height:30px; border:1px solid rgba(255,255,255,.2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:#8aabab; transition:all var(--tr) }
.wth-footer-social a:hover { border-color:var(--gold); color:var(--gold) }
.wth-footer-links { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.wth-footer-col h5 { font-size:13px; text-transform:uppercase; letter-spacing:1.5px; color: #ffffff; margin-bottom:12px; font-weight:700; font-family:'Lato',sans-serif }
.wth-footer-col ul li { margin-bottom:7px }
.wth-footer-col ul li a { font-size:13px; color: #ffffff; transition:color var(--tr) }
.wth-footer-col ul li a:hover { color:var(--gold) }
.wth-footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:18px; display:flex; align-items:center; justify-content:space-between; font-size:12px; flex-wrap:wrap; gap:10px;color: #ffffff;}
.wth-footer-badges { display:flex; gap:10px; flex-wrap:wrap }
.wth-footer-badge { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:4px; padding:4px 10px; font-size:11px }

/* =============================================
   RESPONSIVE
============================================= */
@media(max-width:1100px) { .wth-courses-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:900px) {
  .wth-primary-menu { display:none }
  .wth-hamburger { display:flex }
  .wth-mobile-nav { display:flex }
  .wth-hero-slider { height:520px }
  .wth-accred-grid,.wth-about-grid { grid-template-columns:1fr }
  .wth-testi-grid { grid-template-columns:1fr; gap:16px }
  .wth-footer-top { grid-template-columns:1fr; gap:28px }
  .wth-footer-links { grid-template-columns:repeat(2,1fr) }
  .wth-nav-inner { padding:12px 20px }
  .wth-container { padding:0 20px }
  .wth-trust-bar { padding:18px 20px }
  .wth-sl-arrow { display:none }
  .woocommerce ul.products { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:600px) {
  .wth-courses-grid { grid-template-columns:1fr }
  .wth-about-features { grid-template-columns:1fr }
  .wth-hero-slider { height:480px }
  .wth-slide__title { font-size:1.7rem }
  .wth-slide__body { padding:0 20px }
  .wth-topbar { font-size:11px; padding:7px 16px }
  .wth-footer-links { grid-template-columns:1fr 1fr }
  .woocommerce ul.products { grid-template-columns:1fr }
}