/*
Theme Name: A Bit of Life Clinic
Theme URI: https://abitoflifeclinic.example
Author: A Bit of Life Clinic
Author URI: https://abitoflifeclinic.example
Description: A warm, compassionate WordPress theme for A Bit of Life Clinic, built around specialist consultation, careful explanation and a clear patient pathway. Includes a scroll-triggered WhatsApp button.
Version: 1.4.2
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: abol-clinic
Tags: custom-menu, custom-logo, translation-ready, threaded-comments, healthcare, one-page

A Bit of Life Clinic is derived from the WordPress core _s starter markup conventions
but written from scratch for this brief.
*/

/* =====================================================
   0. DESIGN TOKENS
   The palette is drawn directly from the clinic mark:
   the pink/green interlocking loop around two joined
   hands, on warm paper white. Nothing here is the usual
   cream/terracotta or dark/acid-green AI default — it is
   the logo's own two-colour handshake, extended.
===================================================== */
:root{
  /* --- colour: named from the logo --- */
  --loop-pink:        #E31C79;   /* the pink arc in the mark */
  --loop-pink-deep:    #B71466;
  --loop-green:        #4CA83E;  /* the green arc in the mark */
  --loop-green-deep:   #367A2C;
  --skin-clay:         #C98554;  /* the darker joined hand */
  --skin-sand:         #E8B48A;  /* the lighter joined hand */
  --paper:             #FFFBF6;  /* warm paper white, not pure white */
  --paper-blush:       #FDF1F3;  /* pink-tinted section bg */
  --paper-mint:        #F1F8ED;  /* green-tinted section bg */
  --ink:               #2B211C;  /* warm near-black for text, ties to skin tones */
  --ink-soft:          #6E6058;

  /* --- type --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-script:  "Caveat", "Segoe Script", cursive;
  --font-body:    "Figtree", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-label:   "Space Mono", "SFMono-Regular", Consolas, monospace;

  /* --- layout --- */
  --wrap: 1160px;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 40px -20px rgba(43,33,28,0.28);
}

/* =====================================================
   1. RESET & BASE
===================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
[id]{ scroll-margin-top: 150px; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: var(--loop-pink-deep); text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0 0 0.5em; color: var(--ink); }
p{ margin: 0 0 1em; }
button{ font-family: inherit; }

.container{ max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-script); font-size: 1.6rem; color: var(--loop-pink-deep);
  transform: rotate(-2deg); margin-bottom: 4px;
}
.kicker{
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.72rem; color: var(--loop-green-deep); font-weight: 700;
}

:focus-visible{ outline: 3px solid var(--loop-pink); outline-offset: 3px; border-radius: 4px; }

/* =====================================================
   2. BUTTONS
===================================================== */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.98rem; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{ background: var(--loop-pink); color: #fff; box-shadow: var(--shadow-soft); }
.btn-primary:hover{ background: var(--loop-pink-deep); transform: translateY(-2px); color:#fff; }
.btn-outline{ border-color: var(--loop-green); color: var(--loop-green-deep); background: transparent; }
.btn-outline:hover{ background: var(--loop-green); color: #fff; transform: translateY(-2px); }

/* =====================================================
   3. SITE HEADER
===================================================== */
.site-header{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,251,246,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(43,33,28,0.08);
}
.topbar{
  background: var(--ink); color: #f4ece4; font-size: 0.82rem;
}
.topbar .container{ display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.topbar a{ color: #f4ece4; }
.topbar ul{ display: flex; gap: 22px; flex-wrap: wrap; }
.topbar li{ display:flex; align-items:center; gap:6px; }

.topbar-lang-button{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font: inherit; font-size: 0.82rem; color: #f4ece4;
  display: flex; align-items: center; gap: 6px;
}
.topbar-lang-button svg{ width: 18px; height: 18px; flex: none; }
.topbar-lang-button span{ text-decoration: underline; }
.topbar-lang-button:hover{ color: var(--loop-pink); }

.header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 0; }
.site-branding{ display: flex; align-items: center; gap: 14px; }
.site-branding img{ height: 64px; width: 64px; border-radius: 50%; }
.site-branding .site-title{ font-family: var(--font-script); font-size: 1.9rem; color: var(--loop-pink-deep); margin:0; line-height: 1; }
.site-branding .site-tagline{ font-family: var(--font-label); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--loop-green-deep); margin: 2px 0 0; }

.primary-nav ul{ display: flex; align-items: center; gap: 30px; }
.primary-nav a{ color: var(--ink); font-weight: 600; font-size: 0.96rem; position: relative; padding: 6px 0; }
.primary-nav a:hover{ color: var(--loop-pink-deep); }
.primary-nav li.menu-item-has-children{ position: relative; }
.primary-nav .sub-menu{
  position: absolute; top: 100%; left: -14px; background: var(--paper);
  border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 10px;
  min-width: 240px; max-height: 60vh; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all .18s ease; border: 1px solid rgba(43,33,28,0.06);
}
.primary-nav li.menu-item-has-children:hover > .sub-menu,
.primary-nav li.menu-item-has-children:focus-within > .sub-menu{ opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .sub-menu a{ display: block; padding: 9px 12px; border-radius: 10px; }
.primary-nav .sub-menu a:hover{ background: var(--paper-blush); }
.header-cta{ display:flex; align-items:center; gap:16px; }
.menu-toggle{ display: none; background: none; border: 2px solid var(--ink); border-radius: 10px; padding: 6px; align-items:center; justify-content:center; }
.menu-toggle .menu-toggle-icon,
img.menu-toggle-icon{ width: 26px !important; height: 26px !important; display:block; border-radius: 5px; max-width:26px; }

.under-nav-bar{ border-top: 1px solid rgba(43,33,28,0.07); background: var(--paper-blush); }
.under-nav-bar .container{ padding-top: 7px; padding-bottom: 7px; }
.under-nav-bar span{ font-size: 0.76rem; color: var(--ink-soft); }

@media (max-width: 900px){
  .primary-nav{ display: none; width: 100%; order: 3; }
  .primary-nav.is-open{ display: block; }
  .primary-nav ul{ flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 0; }
  .primary-nav .sub-menu{ position: static; max-height:none; overflow-y:visible; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; margin-left: 12px; }
  .primary-nav li.menu-item-has-children.is-open .sub-menu{ display:block; }
  /* Every top-level menu item ("Home", "Blog", "Gastro", "About",
     "Our Services", "Contact Us"...) gets the same small-caps
     section-heading treatment as the footer's column headings
     ("Resources"), regardless of whether it has a dropdown, so the
     mobile menu reads as organized sections rather than plain flat
     links. */
  .primary-nav > ul > li > a{
    font-family: var(--font-label);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.74rem;
    color: var(--loop-green-deep);
  }
  .menu-toggle{ display: inline-flex; }
  .header-inner{ flex-wrap: wrap; }
  .topbar ul{ display:none; }
  /* Copyright bar lives visually "below the menu": on mobile the menu
     itself is collapsed by default, so tie the bar's visibility to the
     same open state rather than showing it detached above a hidden menu. */
  .under-nav-bar{ display: none; }
  .under-nav-bar.is-open{ display: block; }

  /* The header is position:sticky, pinned to the viewport top. With no
     height limit of its own, an expanded mobile menu (especially with a
     long sub-menu like Services open) can grow taller than the screen —
     the overflow is then just clipped by the viewport edge with no way
     to reach the rest of the list. Cap the header's own height once the
     menu is open and let it scroll internally instead. */
  .site-header{ max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* =====================================================
   4. HERO — the loop as a signature backdrop shape
===================================================== */
.hero{
  position: relative; overflow: hidden;
  padding: 90px 0 110px;
}
.hero::before{
  content:""; position:absolute; inset: -20% -10% auto auto; width: 620px; height: 620px;
  border-radius: 50%; border: 90px solid var(--paper-mint); opacity:.6;
  clip-path: inset(0 0 45% 0);
}
.hero::after{
  content:""; position:absolute; bottom:-18%; left:-8%; width: 460px; height: 460px;
  border-radius: 50%; border: 70px solid var(--paper-blush); opacity:.7;
}
.hero .container{ position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.hero-copy .eyebrow{ display:block; }
.hero h1{ font-size: clamp(2.3rem, 4vw, 3.4rem); max-width: 15ch; }
.hero-lede{ font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; }
.hero-actions{ display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
.hero-phone{ font-weight: 700; }
.hero-visual{ position: relative; }
.hero-visual .ring{
  position: relative; border-radius: 50%; padding: 18px;
  background: conic-gradient(from 200deg, var(--loop-pink), var(--loop-green), var(--loop-pink));
}
.hero-visual .ring img{ border-radius: 50%; border: 8px solid var(--paper); aspect-ratio: 1/1; object-fit: cover; }
@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ order: -1; max-width: 320px; margin: 0 auto; }
}

/* =====================================================
   5. THREE-UP "how care works" — real sequence, numbered
===================================================== */
.value-strip{ padding: 10px 0 90px; }
.section-head{ max-width: 62ch; margin-bottom: 46px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
.value-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.value-card{
  background: var(--paper); border: 1px solid rgba(43,33,28,0.08); border-radius: var(--radius-lg);
  padding: 32px 28px; position: relative;
}
.value-card .num{
  font-family: var(--font-label); font-size: 0.85rem; color: var(--loop-pink);
  border: 1.5px solid var(--loop-pink); border-radius: var(--radius-pill);
  width: 40px; height: 40px; display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.value-card:nth-child(2) .num{ color: var(--loop-green-deep); border-color: var(--loop-green); }
.value-card:nth-child(3) .num{ color: var(--skin-clay); border-color: var(--skin-clay); }
.value-card h3{ font-size: 1.2rem; }
.value-card h3 a{ color: inherit; text-decoration: none; }
.value-card h3 a:hover{ color: var(--loop-pink-deep); }
@media (max-width: 860px){ .value-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   6. VIDEO / EXPLAINER SECTION
===================================================== */
.explainer{ background: var(--paper-mint); padding: 80px 0; }
.explainer .container{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:50px; align-items:center; }
.video-frame{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); aspect-ratio: 16/10; background:#111; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.explainer .kicker{ display:block; margin-bottom: 10px; }
@media (max-width: 900px){ .explainer .container{ grid-template-columns: 1fr; } }

/* =====================================================
   7. SPECIALIST CARE BAND
===================================================== */
.care-band{ padding: 90px 0; text-align:center; }
.care-band .container{ max-width: 780px; }
.care-band .kicker{ display:block; margin-bottom: 10px; }
.care-band p{ font-size: 1.08rem; color: var(--ink-soft); }

/* =====================================================
   8. SERVICES GRID
===================================================== */
.services{ background: var(--paper-blush); padding: 90px 0; }
.services-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.service-card{
  background: var(--paper); border-radius: var(--radius-md); padding: 28px 24px;
  border: 1px solid rgba(43,33,28,0.07); transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.service-card .icon{
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 16px;
  background: linear-gradient(135deg, var(--loop-pink), var(--loop-green));
}
.service-card h3{ font-size: 1.08rem; }
.service-card h3 a{ color: var(--ink); text-decoration: none; }
.service-card h3 a:hover{ color: var(--loop-pink-deep); }
.service-content h2{ font-size: 1.5rem; margin-top: 1.6em; }
.service-content h3{ font-size: 1.15rem; margin-top: 1.4em; }
.service-content ul{ list-style: disc; padding-left: 1.4em; margin-bottom: 1em; }
.service-content li{ margin-bottom: 0.4em; }
.service-content p{ color: var(--ink-soft); }

/* =====================================================
   13b. CONTACT PAGE
===================================================== */
.contact-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap: 32px; align-items:start; margin-top: 20px; }
.contact-info .value-card p{ margin-bottom: 10px; }
.contact-info .value-card p:last-child{ margin-bottom: 0; }
.contact-form-wrap{ background: var(--paper); border: 1px solid rgba(43,33,28,0.08); border-radius: var(--radius-lg); padding: 30px; }
.contact-form .form-row{ margin-bottom: 18px; }
.contact-form .form-row-split{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label{ display:block; font-weight:600; font-size:0.9rem; margin-bottom:6px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea{
  width:100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid rgba(43,33,28,0.15);
  background: var(--paper); font-family: var(--font-body); font-size: 0.98rem; color: var(--ink);
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ outline:none; border-color: var(--loop-pink); }
.contact-form .hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-notice{ padding: 16px 20px; border-radius: var(--radius-md); margin-bottom: 24px; font-size: 0.95rem; }
.form-notice-success{ background: var(--paper-mint); border: 1px solid var(--loop-green); color: var(--loop-green-deep); }
.form-notice-error{ background: var(--paper-blush); border: 1px solid var(--loop-pink); color: var(--loop-pink-deep); }

/* =====================================================
   13d. NEWSLETTER MODAL + FOOTER "BUTTON THAT LOOKS LIKE A LINK"
===================================================== */
.footer-link-button{
  background:none; border:none; padding:0; margin:8px 0 0; cursor:pointer;
  font: inherit; font-size: 0.94rem; color: var(--ink); text-align:left;
  display: block; text-decoration: underline;
}
.footer-link-button:hover{ color: var(--loop-pink-deep); }

/* Icon + label footer buttons (Newsletter, Language switcher) */
.footer-icon-button{
  background:none; border:none; padding:0; margin:12px 0 0; cursor:pointer;
  font: inherit; text-align:left;
  display: flex; align-items: center; gap: 10px;
}
.footer-icon-badge{
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.footer-icon-badge svg{ width: 26px; height: 26px; }
.footer-icon-badge-newsletter{ background: #FFC93C; }
.footer-icon-badge-language{ background: #fff; border: 1px solid rgba(43,33,28,0.1); }
.footer-icon-badge-appointment{ background: #fff; border: 1px solid rgba(43,33,28,0.1); }
.footer-icon-badge-report{ background: #fff; border: 1px solid rgba(43,33,28,0.1); }

.footer-cta-group{
  display: flex; flex-direction: column; gap: 12px; margin: 20px 0 4px;
}
.footer-cta-btn{
  width: 100%; justify-content: center;
}
.footer-cta-btn svg{ width: 20px; height: 20px; flex: none; }
.footer-icon-label{
  font-size: 0.94rem; color: var(--ink); text-decoration: underline;
}
.footer-icon-label-signature{
  font-family: var(--font-script); font-size: 1.5rem; line-height: 1;
  color: var(--loop-green-deep); text-decoration: none;
}
.footer-icon-button:hover .footer-icon-badge{ transform: scale(1.08); }
.footer-icon-button:hover .footer-icon-label{ color: var(--loop-pink-deep); }
.footer-icon-button:hover .footer-icon-label-signature{ color: var(--loop-green); }

.modal-overlay{
  position: fixed; inset: 0; z-index: 200; background: rgba(43,33,28,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease;
}
.modal-overlay.is-open{ opacity: 1; visibility: visible; }
.modal-box{
  position: relative; background: var(--paper); border-radius: var(--radius-lg);
  padding: 32px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow-soft); transform: translateY(14px); transition: transform .2s ease;
}
.modal-overlay.is-open .modal-box{ transform: translateY(0); }
.modal-close{
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--paper-blush); color: var(--ink); font-size: 1.3rem; line-height:1;
  cursor: pointer; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background: var(--loop-pink); color:#fff; }
.modal-box h3{ font-size: 1.4rem; margin-right: 30px; }

/* Footer widget areas (Appearance > Widgets), and the small secondary
   footer-menu row next to the copyright line */
.footer-widget{ margin-bottom: 18px; }
.footer-widget:last-child{ margin-bottom: 0; }
.footer-widget ul{ list-style:none; padding:0; margin:0; }
.footer-widget li{ margin-bottom: 9px; }
.footer-widget a{ color: var(--ink); font-size: 0.94rem; }
.footer-widget a:hover{ color: var(--loop-pink-deep); }
.footer-nav ul{ display:flex; gap: 16px; list-style:none; padding:0; margin:0; flex-wrap: wrap; }
.footer-nav a{
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.74rem;
  color: var(--loop-green-deep);
}
.footer-nav a:hover{ color: var(--loop-pink-deep); }
@media (max-width: 860px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-form .form-row-split{ grid-template-columns: 1fr; }
}

/* =====================================================
   13c. PAGE IMAGE GALLERY (illustrations on service/content pages)
===================================================== */
.page-gallery{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin: 18px 0 10px; }
.page-gallery-item{ margin:0; background: var(--paper); border: 1px solid rgba(43,33,28,0.08); border-radius: var(--radius-md); overflow:hidden; }
.page-gallery-item img{ width:100%; display:block; }
.page-gallery-item figcaption{ padding: 12px 16px; font-size: 0.86rem; color: var(--ink-soft); }
@media (max-width: 700px){ .page-gallery{ grid-template-columns: 1fr; } }
.service-card p{ color: var(--ink-soft); font-size: 0.96rem; margin-bottom:0; }
@media (max-width: 900px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .services-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   9. ABOUT
===================================================== */
.about{ padding: 90px 0; }
.about .container{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center; }
.about-visual{ position: relative; }
.about-visual img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.about-badge{
  position:absolute; bottom:-22px; right:-22px; background: var(--paper);
  border-radius: var(--radius-md); padding: 16px 20px; box-shadow: var(--shadow-soft);
  font-family: var(--font-script); font-size: 1.3rem; color: var(--loop-green-deep);
  transform: rotate(3deg); border: 1px solid rgba(43,33,28,0.06);
}
@media (max-width: 900px){ .about .container{ grid-template-columns: 1fr; } }

/* =====================================================
   10. PATHWAY (real 3-step sequence)
===================================================== */
.pathway{ background: var(--ink); color: #f4ece4; padding: 90px 0; }
.pathway .kicker{ color: var(--loop-green); }
.pathway h2{ color: #fff; }
.pathway-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 40px; counter-reset: step; }
.pathway-step{ position: relative; padding-left: 54px; }
.pathway-step::before{
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position:absolute; left:0; top:0; font-family: var(--font-label); font-size: 0.85rem;
  width: 40px; height: 40px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--loop-pink), var(--loop-green)); color:#fff;
}
.pathway-step h3{ color:#fff; font-size: 1.1rem; }
.pathway-step p{ color: #cabfb6; font-size: 0.96rem; margin-bottom:0; }
@media (max-width: 860px){ .pathway-grid{ grid-template-columns:1fr; } }

/* =====================================================
   11. APPOINTMENTS CTA
===================================================== */
.cta-band{ padding: 90px 0; text-align:center; }
.cta-band .container{ max-width: 700px; }
.cta-band .eyebrow{ justify-content:center; }
.cta-band-actions{ display:flex; justify-content:center; gap:16px; margin-top: 26px; flex-wrap:wrap; }

/* =====================================================
   12. FOOTER
===================================================== */
.site-footer{ background: var(--paper-mint); padding: 60px 0 26px; border-top: 1px solid rgba(43,33,28,0.08); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.footer-brand .site-title{ font-family: var(--font-script); font-size: 1.7rem; color: var(--loop-pink-deep); }
.footer-brand p{ color: var(--ink-soft); font-size: 0.94rem; max-width: 34ch; }
.footer-address-icon{
  display: inline-flex; vertical-align: -3px;
  width: 16px; height: 16px;
}
.footer-address-icon svg{ width: 100%; height: 100%; }
.footer-col h4{ font-family: var(--font-label); text-transform:uppercase; letter-spacing:0.1em; font-size:0.74rem; color: var(--loop-green-deep); margin-bottom: 14px; }
.footer-col li{ margin-bottom: 9px; }
.footer-col a{ color: var(--ink); font-size: 0.94rem; }
.footer-col a:hover{ color: var(--loop-pink-deep); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; font-size:0.84rem; color: var(--ink-soft); border-top: 1px solid rgba(43,33,28,0.08); padding-top: 20px; }
.footer-tagline{
  width: 100%; text-align: center; order: 5;
  color: var(--loop-pink); font-weight: 600;
}
.site-disclaimer{
  font-size: 0.8rem; color: var(--ink-soft); line-height: 1.55;
  background: var(--paper); border: 1px solid rgba(43,33,28,0.08); border-radius: var(--radius-md);
  padding: 16px 20px; margin-bottom: 24px;
}
.site-disclaimer strong{ color: var(--ink); }
@media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }

/* =====================================================
   13. WHATSAPP — floating, appears on scroll
   Positioned as a "peeking" tab on the left edge on desktop/tablet,
   vertically centered. On mobile, vertical centering means the
   button sits in the middle of the reading column and overlaps
   whatever text is scrolled underneath it — so on small screens it
   drops down to a fixed low position instead (like the back-to-top
   button), clear of body copy, with a small vertical offset from
   back-to-top so the two never overlap each other.
===================================================== */
.whatsapp-float{
  position: fixed; left: 0; top: 50%; transform: translateY(-50%) translateX(-18px) scale(.92);
  right: auto; bottom: auto; z-index: 90;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  padding: 8px 8px 8px 6px; box-shadow: var(--shadow-soft);
  border: 1px solid rgba(43,33,28,0.08); border-left: none;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.whatsapp-float.is-visible{ opacity: 1; transform: translateY(-50%) translateX(0) scale(1); pointer-events: auto; }
.whatsapp-float:hover{ transform: translateY(-50%) translateX(0) scale(1.04); }
.whatsapp-float .wa-icon{
  width: 50px; height: 50px; border-radius: 50%; flex: none;
  background: #25D366; display:flex; align-items:center; justify-content:center;
  animation: wa-pulse 2.6s ease-in-out infinite;
}
.whatsapp-float .wa-icon svg{ width: 26px; height: 26px; fill: #fff; }
.whatsapp-float .wa-label{
  max-width: 0; overflow: hidden; white-space: nowrap; font-weight: 700; font-size: 0.9rem;
  transition: max-width .3s ease, padding .3s ease; padding-right: 0;
}
.whatsapp-float:hover .wa-label{ max-width: 160px; padding-right: 14px; }
@keyframes wa-pulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0.45); }
  50%{ box-shadow: 0 0 0 10px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){ .whatsapp-float .wa-icon{ animation:none; } }

.back-to-top{
  position: fixed; left: 26px; bottom: 26px; z-index: 90;
  width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--loop-pink); box-shadow: var(--shadow-soft);
  display:flex; align-items:center; justify-content:center;
  opacity: 0; transform: translateY(18px) scale(.92); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .18s ease;
}
.back-to-top.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover{ background: var(--loop-pink-deep); }
.back-to-top svg{ width: 22px; height: 22px; fill: #fff; }
@media (max-width: 600px){
  /* Drop out of the vertical-center position (which overlaps body
     text on narrow screens) and pin low on the left edge instead,
     matching back-to-top's approach but offset above it so the two
     buttons never collide. */
  .whatsapp-float{
    left: 0; top: auto; bottom: 86px;
    transform: translateX(-18px) scale(.92);
    padding: 6px 6px 6px 4px;
  }
  .whatsapp-float.is-visible{ transform: translateX(0) scale(1); }
  .whatsapp-float:hover{ transform: translateX(0) scale(1.04); }
  .whatsapp-float .wa-icon{ width: 44px; height: 44px; }
  .back-to-top{ left: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* =====================================================
   14. UTILITIES
===================================================== */
.reveal{ opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity: 1; transform: translateY(0); }
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--ink); color:#fff; padding:12px 18px; border-radius:8px; z-index:200; }
.skip-link:focus{ left: 16px; top: 16px; }

/* =====================================================
   15. BLOCK-EDITOR CONTENT (.entry-content)
   Styles for whatever staff write in the block editor on
   pages/posts, including third-party Gutenberg blocks such
   as the MerPress Mermaid-diagram block.
===================================================== */
.entry-content{ font-size: 1rem; line-height: 1.7; color: var(--ink); }
.entry-content > *:first-child{ margin-top: 0; }
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4{
  font-family: var(--font-display); color: var(--ink); line-height: 1.25;
  margin: 1.6em 0 0.6em;
}
.entry-content p{ margin: 0 0 1.1em; }
.entry-content a{ color: var(--loop-pink-deep); }
.entry-content ul, .entry-content ol{ padding-left: 1.4em; margin: 0 0 1.1em; }
.entry-content blockquote{
  margin: 1.4em 0; padding: 0.6em 0 0.6em 1.2em;
  border-left: 3px solid var(--loop-green); color: var(--ink-soft); font-style: italic;
}
.entry-content figure{ margin: 1.6em 0; }
.entry-content img{ border-radius: var(--radius-md); }
.entry-content table{ width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.entry-content table th, .entry-content table td{
  border: 1px solid rgba(43,33,28,0.14); padding: 10px 14px; text-align: left;
}
.entry-content table th{ background: var(--paper-blush); font-family: var(--font-label); font-size: 0.82rem; }

/* Wide/full alignment breakout, for content that opts in to it
   (e.g. a large diagram set to "wide" in the block editor). The
   .care-band container that wraps .entry-content is capped at
   820px, so wide/full need to break out of that explicitly. */
.entry-content .alignwide{
  width: 100%; max-width: 1100px;
  margin-left: 50%; transform: translateX(-50%);
}
.entry-content .alignfull{
  width: 100vw; margin-left: 50%; transform: translateX(-50%);
}

/* MerPress Mermaid-diagram block: the plugin renders an SVG diagram
   into a wrapper on the front end. Card-style container matches the
   theme's existing value-card/service-card look, keeps the SVG from
   overflowing the narrow reading column on mobile, and centres it —
   Mermaid's own SVG width is intrinsic to the diagram, not the page. */
.entry-content div[class*="mermaid"],
.entry-content .wp-block[class*="merpress"]{
  background: #fff;
  border: 1px solid rgba(43,33,28,0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: 20px;
  margin: 1.6em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.entry-content div[class*="mermaid"] svg,
.entry-content .wp-block[class*="merpress"] svg{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
@media (max-width: 600px){
  .entry-content .alignwide,
  .entry-content .alignfull{ width: 100%; margin-left: 0; transform: none; }
}

/* =====================================================
   16. COOKIE CONSENT BANNER
===================================================== */
.cookie-consent{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--ink); color: #f4ece4;
  padding: 22px 20px; box-shadow: 0 -10px 30px -12px rgba(0,0,0,0.35);
  transform: translateY(100%); transition: transform .3s ease;
}
.cookie-consent.is-visible{ transform: translateY(0); }
.cookie-consent-inner{
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.cookie-consent p{ margin: 0; font-size: 0.88rem; line-height: 1.55; }
.cookie-consent-link a{ color: #f4ece4; text-decoration: underline; font-size: 0.8rem; }
.cookie-consent-link a:hover{ color: var(--loop-pink); }
.cookie-consent-actions{
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 6px;
}
.cookie-consent .btn{ padding: 8px 20px; font-size: 0.82rem; }
.cookie-consent .cookie-btn-accept{
  background: var(--loop-pink); color: #fff; border: 2px solid var(--loop-pink);
}
.cookie-consent .cookie-btn-accept:hover{ background: var(--loop-pink-deep); border-color: var(--loop-pink-deep); }
.cookie-consent .cookie-btn-reject{
  background: #E3B341; color: #fff; border: 2px solid #E3B341;
}
.cookie-consent .cookie-btn-reject:hover{ background: #C99A2E; border-color: #C99A2E; }
@media (max-width: 600px){
  .cookie-consent-actions{ flex-wrap: nowrap; width: 100%; }
  .cookie-consent .btn{ width: auto; flex: 1 1 0; max-width: 160px; }
}

/* =====================================================
   17. LANGUAGE PREFERENCE POPUP (India-only)
===================================================== */
.lang-popup-overlay{
  position: fixed; inset: 0; z-index: 400; background: rgba(43,33,28,0.6);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.lang-popup-overlay.is-visible{ opacity: 1; visibility: visible; }
.lang-popup-box{
  background: var(--paper); border-radius: var(--radius-lg);
  padding: 32px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-soft);
  transform: translateY(14px); transition: transform .25s ease;
}
.lang-popup-overlay.is-visible .lang-popup-box{ transform: translateY(0); }
.lang-popup-box h3{ font-size: 1.4rem; margin: 0 0 10px; text-align: center; }
.lang-popup-note{
  font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft);
  text-align: center; margin: 0 0 20px;
}
.lang-popup-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.lang-popup-option{
  font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(43,33,28,0.12); background: #fff; color: var(--ink);
  transition: border-color .15s ease, background .15s ease;
}
.lang-popup-option:hover{ border-color: var(--loop-green); background: var(--paper-blush); }
@media (max-width: 480px){
  .lang-popup-grid{ grid-template-columns: 1fr; }
  .lang-popup-box{ padding: 24px 20px; }
}

/* Suppress Google's own translate banner/toolbar and body-shifting —
   the theme provides its own language choice UI, so Google's default
   top bar would just duplicate that and visually clash. */
.goog-te-banner-frame{ display: none !important; visibility: hidden !important; height: 0 !important; }
.goog-te-banner-frame.skiptranslate{ display: none !important; }
body{ top: 0 !important; position: static !important; }
body > .skiptranslate{ display: none !important; }
#google_translate_element{ display: none !important; }