/*
Theme Name: Coastal Speech & Swallow Clinic
Theme URI: https://coastalspeechswallowclinic.com.au
Author: Nasar
Author URI: 
Description: Warm, mobile-first marketing theme for Coastal Speech & Swallow Clinic — mobile speech pathology for children and adults across the Mornington Peninsula, Bayside & City of Casey. Single-page experience with client-side navigation, animated hero, scroll reveals and embedded Splose intake forms.
Version: 2.1.1
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: coastal-speech
*/

/* ---------- Resets ---------- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:#fbf8f3; }
/* Remove any accidental vibe-hide-mobile hiding */
.vibe-hide-mobile{ display:block !important; }
img{ max-width:100%; }
::selection{ background:#f3dbc8; color:#3d4f43; }
[data-nav]{ cursor:pointer; }
.admin-bar header{ top:32px; }
@media (max-width:782px){ .admin-bar header{ top:46px; } }

/* ---------- Keyframes ---------- */
@keyframes floatA { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-20px); } }
@keyframes floatB { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(16px); } }
@keyframes blobPulse { 0%,100%{ border-radius:58% 42% 47% 53% / 54% 46% 54% 46%; } 50%{ border-radius:43% 57% 56% 44% / 46% 54% 46% 54%; } }

/* ---------- View routing + transition ---------- */
.view{ display:none; }
.view.active{ display:block; animation: viewFade .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes viewFade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---------- Dropdowns (animated) ---------- */
.has-dropdown .dropdown{ display:block; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .22s ease, transform .22s ease, visibility .22s; }
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:none; }

/* ---------- Active nav underline ---------- */
header [data-desktop-nav] button[data-nav].active{ color:#5b8a72; }
header [data-desktop-nav] button[data-nav].active::after{
  content:""; position:absolute; left:15px; right:15px; bottom:4px; height:2px;
  background:#c97b5a; border-radius:2px;
}

/* ---------- Sticky header shadow ---------- */
header{ transition:box-shadow .3s ease; }
header.scrolled{ box-shadow:0 8px 24px -16px rgba(61,79,67,.5); }

/* ---------- Mobile menu ---------- */
#mobileMenu{ display:none; }
#mobileMenu.open{ display:block; }
#mobileMenu.open > div{ animation: mobileIn .32s cubic-bezier(.22,.61,.36,1) both; top:96px !important; }
@keyframes mobileIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
[data-burger]{ display:none; }
[data-header-cta]{ display:none !important; }

/* ---------- Responsive: Tablet (≤1024px) ---------- */
@media (min-width:901px){
  #mobileMenu{ display:none !important; }
  [data-header-cta]{ display:inline-flex !important; }
}
@media (max-width:1024px) and (min-width:901px){
  [data-hero-grid]{ gap:36px !important; }
  [data-h1]{ font-size:46px !important; }
  [data-section]{ padding:72px 28px !important; }
}

/* ---------- Responsive: Tablet portrait + small tablet (≤900px) ---------- */
@media (max-width:900px){
  [data-desktop-nav]{ display:none !important; }
  [data-burger]{ display:flex !important; }
  [data-site-logo]{ height:84px !important; }
  [data-hero-grid]{ grid-template-columns:1fr !important; gap:36px !important; }
  [data-hero-grid] > div:last-child{ order:-1; max-width:360px; margin:0 auto; }
  [data-split]{ grid-template-columns:1fr !important; gap:32px !important; }
  [data-split] > div[data-reveal*="scale"],
  [data-split] > div[data-reveal="left"],
  [data-split] > div[data-reveal="right"]{ max-width:100% !important; }
  [data-cards]{ grid-template-columns:1fr 1fr !important; gap:16px !important; }
  [data-h1]{ font-size:38px !important; line-height:1.1 !important; }
  [data-section]{ padding:56px 20px !important; }
  /* Tighten section paddings everywhere (overrides inline) */
  section[style*="padding:84px"],
  section[style*="padding:96px"],
  section[style*="padding:100px"]{ padding:56px 20px !important; }
  /* Shrink hero portrait wrap so it doesn't dominate */
  section [style*="max-width:340px"]{ max-width:280px !important; }
  /* Decorative blobs: scale down so they don't overflow */
  section > div[style*="border-radius:50%"][style*="position:absolute"]{ transform:scale(.6); transform-origin:center; }
}

/* ---------- Responsive: Mobile (≤640px) ---------- */
@media (max-width:640px){
  [data-site-logo]{ height:72px !important; }
  [data-cards]{ grid-template-columns:1fr !important; gap:14px !important; }
  [data-mobile-stack]{ grid-template-columns:1fr !important; gap:10px !important; }
  [data-h1]{ font-size:30px !important; line-height:1.12 !important; }
  [data-section]{ padding:20px 18px !important; }
  section[style*="padding"]{ padding-left:18px !important; padding-right:18px !important; }
  /* All headings tighter */
  h1{ font-size:30px !important; }
  h2[style*="font-size:42px"],
  h2[style*="font-size:40px"],
  h2[style*="font-size:38px"]{ font-size:28px !important; line-height:1.18 !important; }
  h2[style*="font-size:30px"]{ font-size:24px !important; }
  h3[style*="font-size:28px"]{ font-size:22px !important; }
  /* Body text size cap */
  p[style*="font-size:18"]{ font-size:16px !important; }
  /* Reduce big card paddings */
  div[style*="padding:50px"], div[style*="padding:46px"], div[style*="padding:44px"], div[style*="padding:40px"]{ padding:28px 22px !important; }
  div[style*="padding:38px"], div[style*="padding:36px"], div[style*="padding:34px"]{ padding:26px 20px !important; }
  /* CTA buttons full width */
  a[style*="padding:16px 32px"], a[style*="padding:16px 30px"], a[style*="padding:16px 28px"]{ width:100%; justify-content:center; }
  button[style*="padding:16px 32px"], button[style*="padding:16px 30px"], button[style*="padding:16px 28px"]{ width:100%; justify-content:center; }
  /* Keep leaves + decorative SVGs VISIBLE on mobile (client requested) — only hide the largest background blobs to avoid overflow */
  section > div[style*="position:absolute"][style*="width:340px"],
  section > div[style*="position:absolute"][style*="width:320px"]{ opacity:.4 !important; }
  .vibe-leaf, .vibe-dots, .vibe-heart, .vibe-bubble, .vibe-chat{ display:block !important; }
}

@media (max-width:380px){
  [data-site-logo]{ height:62px !important; }
  [data-h1]{ font-size:26px !important; }
  [data-section]{ padding:36px 16px !important; }
}

/* ---------- Embedded Splose intake forms ---------- */
.form-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:24px; }
.form-tab{
  background:#FFFFFF; border:1.5px solid #ebe0cf; color:#3d4f43;
  font-family:'Poppins',sans-serif; font-weight:700; font-size:14.5px;
  padding:12px 24px; border-radius:999px; cursor:pointer; transition:all .2s ease;
}
.form-tab:hover{ border-color:#5b8a72; transform:translateY(-1px); }
.form-tab.active{ background:#5b8a72; color:#fff; border-color:#5b8a72; }
.form-embed{
  background:#FFFFFF; border:1px solid #ebe0cf; border-radius:22px; overflow:hidden;
  box-shadow:0 24px 50px -26px rgba(61,79,67,.4);
}
.form-embed iframe{ width:100%; height:880px; border:0; display:block; background:#fff; }
@media (max-width:900px){ .form-embed iframe{ height:760px; } }
@media (max-width:640px){ .form-embed iframe{ height:680px; } }
.form-fallback{ text-align:center; margin-top:18px; font-size:14px; color:#8a8478; }
.form-fallback a{ color:#5b8a72; font-weight:700; }

/* ---------- Accordion ---------- */
.acc-item{ border:1px solid #ebe0cf; border-radius:16px; background:#FFFFFF; overflow:hidden; }
.acc-head{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:'Newsreader',serif; font-size:19px; font-weight:600; color:#3d4f43;
  padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.acc-head .acc-icon{ flex:none; transition:transform .3s ease; color:#5b8a72; font-size:22px; line-height:1; }
.acc-item.open .acc-icon{ transform:rotate(45deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc-body-inner{ padding:0 24px 22px; font-size:15.5px; line-height:1.7; color:#6b7669; }

/* ---------- Scroll progress bar ---------- */
#scrollProgress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:70; background:linear-gradient(90deg,#5b8a72,#c97b5a); transition:width .08s linear; }
.admin-bar #scrollProgress{ top:32px; }
@media (max-width:782px){ .admin-bar #scrollProgress{ top:46px; } }

/* ---------- Back to top ---------- */
#backToTop{
  position:fixed; right:24px; bottom:24px; width:50px; height:50px; border-radius:50%;
  background:#5b8a72; color:#fff; border:none; cursor:pointer; z-index:60;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -8px rgba(91,138,114,.7);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, background .25s ease;
}
#backToTop.show{ opacity:1; visibility:visible; transform:none; }
#backToTop:hover{ background:#6FA078; transform:translateY(-2px); }

/* ---------- Responsive footer ---------- */
@media (max-width:900px){
  [data-foot-grid]{ grid-template-columns:1fr 1fr !important; gap:28px !important; }
  [data-foot-grid] a[href^="mailto:"]{ white-space:normal !important; overflow:visible !important; word-break:break-word !important; }
}
@media (max-width:560px){
  [data-foot-grid]{ grid-template-columns:1fr !important; gap:24px !important; }
  footer{ padding:48px 20px 28px !important; }
}

/* ---------- Contact email box: keep email on one line on desktop, wrap on small ---------- */
.co-email-link{ display:block; }
@media (max-width:1024px){
  .co-email-link{ font-size:14px !important; }
}
@media (max-width:900px){
  .co-email-link{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; font-size:15px !important; word-break:break-word !important; }
}

/* ---------- Coastal brand decorative elements ---------- */
.coastal-brand-el{ position:absolute; pointer-events:none; opacity:.55; user-select:none; z-index:1; }
.coastal-brand-el img{ width:100%; height:auto; display:block; }
.coastal-brand-el.float-slow{ animation: floatA 14s ease-in-out infinite; }
.coastal-brand-el.float-fast{ animation: floatB 11s ease-in-out infinite; }
.vibe-leaf, .vibe-dots, .vibe-heart, .vibe-bubble{ z-index:1; }
.vibe-leaf{ animation: floatA 16s ease-in-out infinite; }
.vibe-leaf.alt{ animation-duration: 18s; }
.vibe-bubble{ animation: floatB 14s ease-in-out infinite; }
.vibe-heart{ animation: floatA 11s ease-in-out infinite; }
/* Mobile: keep leaves + dots visible (client requested) but scale them gracefully */
@media (max-width:640px){
  .coastal-brand-el{ transform:scale(.6); opacity:.45; }
  .vibe-leaf{ width:54px !important; height:78px !important; opacity:.55 !important; }
  .vibe-dots{ width:38px !important; height:24px !important; opacity:.55 !important; }
  .vibe-heart{ width:24px !important; height:22px !important; opacity:.4 !important; }
  .vibe-bubble{ width:46px !important; height:40px !important; opacity:.5 !important; }
}

/* Gentle float helper for decorative accents */
.coastal-float{ animation: floatA 9s ease-in-out infinite; }

/* ---------- IG-template "Coastal" vibe decorations ---------- */
/* Sage leaf sprigs, dot clusters, chat-bubble + heart accents and soft
   watercolor washes used in hero and testimonial sections. Mirrors the
   look of the client's Instagram post template. */
.vibe-leaf, .vibe-dots, .vibe-heart, .vibe-chat, .vibe-blob{
  position:absolute !important; pointer-events:none; user-select:none; z-index:1;
}
.vibe-leaf{ opacity:.9; animation: floatA 14s ease-in-out infinite; }
.vibe-leaf.alt{ animation: floatB 16s ease-in-out infinite; }
.vibe-dots{ opacity:.75; }
.vibe-heart{ opacity:.85; animation: floatB 11s ease-in-out infinite; }
.vibe-chat{ opacity:.95; animation: floatA 9s ease-in-out infinite; }
.vibe-blob{ opacity:.55; }
.vibe-blob.soft{ opacity:.45; }
@media (max-width:900px){
  .vibe-leaf{ transform:scale(.7); transform-origin:top center; opacity:.75; }
  .vibe-dots, .vibe-heart, .vibe-chat{ transform:scale(.75); transform-origin:center; opacity:.7; }
  .vibe-blob{ opacity:.4; }
}
@media (max-width:640px){
  .vibe-leaf{ transform:scale(.55); opacity:.65; }
}