/*
Theme Name:   HealthyWayFit
Theme URI:    https://healthywayfit.com
Description:  HealthyWayFit child theme built on Twenty Twenty-Five. Diabetes reversal
              coaching site for J-8 Growth LLP. Full-site editing (FSE) using block
              templates, template parts, and block patterns. Brand: Inter / sans-serif,
              Primary Green #1B4332, Heading #0C0A09.
Author:       J-8 Growth LLP
Author URI:   https://healthywayfit.com
Template:     twentytwentyfive
Version:      1.7.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  healthywayfit
Tags:         full-site-editing, block-patterns, health, coaching
*/

/*
 * ─────────────────────────────────────────────────────────────
 *  HealthyWayFit v1.0 — Global CSS Custom Properties
 *  All design tokens are defined here and consumed via theme.json
 *  presets and plain CSS. Do NOT override theme.json values here
 *  unless you need a runtime fallback.
 * ─────────────────────────────────────────────────────────────
 */

:root {
  /* ── Brand colours ──────────────────────────────────────────── */
  --hwf-green:          #1B4332;  /* live site: rgb(27,67,50) — CTA/accent/button */
  --hwf-green-dark:     #0A1F13;  /* darker variant for footer/dark section bgs   */
  --hwf-green-light:    #C8E6D4;
  --hwf-green-hover:    #142B22;  /* hover for #1B4332 */
  --hwf-whatsapp:       #25D366;
  --hwf-whatsapp-hover: #1DA851;

  /* ── Neutrals ────────────────────────────────────────────────── */
  --hwf-text:           #333333;  /* live site: rgb(51,51,51) */
  --hwf-text-dark:      #0C0A09;  /* live site H1/H2 color: near-black */
  --hwf-text-muted:     #6B7280;  /* live site gray text */
  --hwf-text-light:     #9CA3AF;
  --hwf-border:         #E5E7EB;
  --hwf-bg:             #FFFFFF;
  --hwf-bg-alt:         #F9FAFB;
  --hwf-bg-section:     #F5F5F0;  /* live site: rgb(245,245,240) */
  --hwf-bg-hero:        #FFF1F0;  /* live site hero: rgb(255,241,240) warm pinkish */

  /* ── Typography ──────────────────────────────────────────────── */
  --hwf-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, Helvetica, Arial, sans-serif;
  --hwf-font-size-xs:   0.75rem;   /* 12px */
  --hwf-font-size-sm:   0.875rem;  /* 14px */
  --hwf-font-size-base: 1rem;      /* 16px */
  --hwf-font-size-md:   1.0625rem; /* 17px */
  --hwf-font-size-lg:   1.125rem;  /* 18px */
  --hwf-font-size-xl:   1.25rem;   /* 20px */
  --hwf-font-size-2xl:  1.5rem;    /* 24px */
  --hwf-font-size-3xl:  1.875rem;  /* 30px */
  --hwf-font-size-4xl:  2.25rem;   /* 36px */
  --hwf-font-size-5xl:  3rem;      /* 48px */
  --hwf-font-size-hero: clamp(2.5rem, 5vw, 3.5rem); /* 40–56px */

  /* ── Spacing ─────────────────────────────────────────────────── */
  --hwf-space-xs:  0.5rem;   /*  8px */
  --hwf-space-sm:  1rem;     /* 16px */
  --hwf-space-md:  1.5rem;   /* 24px */
  --hwf-space-lg:  2rem;     /* 32px */
  --hwf-space-xl:  2.5rem;   /* 40px */
  --hwf-space-2xl: 5rem;     /* 80px */
  --hwf-space-3xl: 7.5rem;   /* 120px */

  /* ── Layout ──────────────────────────────────────────────────── */
  --hwf-container:   1280px;
  --hwf-content-max: 760px;
  --hwf-header-h:    72px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --hwf-radius-sm:  0.375rem; /* 6px */
  --hwf-radius-md:  0.75rem;  /* 12px */
  --hwf-radius-lg:  1rem;     /* 16px */
  --hwf-radius-xl:  1.5rem;   /* 24px */
  --hwf-radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --hwf-shadow-sm:  0 1px 3px 0 rgb(0 0 0 / .08), 0 1px 2px -1px rgb(0 0 0 / .08);
  --hwf-shadow-md:  0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --hwf-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);

  /* ── Transitions ─────────────────────────────────────────────── */
  --hwf-transition: 0.2s ease;
}

/* ── Base resets & body ─────────────────────────────────────────── */
body {
  font-family: var(--hwf-font-sans);
  color: var(--hwf-text);
  background-color: var(--hwf-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Skip link (accessibility) ──────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--hwf-green);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: var(--hwf-radius-sm);
  text-decoration: none;
  font-size: var(--hwf-font-size-sm);
  z-index: 9999;
  transition: top var(--hwf-transition);
}
.skip-link:focus { top: 1rem; }

/* ── Primary CTA Button ─────────────────────────────────────────── */
.wp-block-button__link,
.hwf-btn-primary {
  background-color: var(--hwf-green) !important;
  color: #fff !important;
  border-radius: var(--hwf-radius-full) !important;
  font-weight: 600;
  font-size: var(--hwf-font-size-base);
  padding: 0.875rem 2rem !important;
  border: none;
  cursor: pointer;
  transition: background-color var(--hwf-transition), transform var(--hwf-transition), box-shadow var(--hwf-transition);
  display: inline-block;
  text-decoration: none;
}
.wp-block-button__link:hover,
.hwf-btn-primary:hover {
  background-color: var(--hwf-green-hover) !important;
  transform: translateY(-1px);
  box-shadow: var(--hwf-shadow-md);
}

/* ── WhatsApp floating button ───────────────────────────────────── */
.hwf-whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3.5rem;
  height: 3.5rem;
  background-color: var(--hwf-whatsapp);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--hwf-shadow-lg);
  z-index: 1000;
  transition: background-color var(--hwf-transition), transform var(--hwf-transition);
  text-decoration: none;
}
.hwf-whatsapp-float:hover {
  background-color: var(--hwf-whatsapp-hover);
  transform: scale(1.08);
}
.hwf-whatsapp-float svg { width: 1.75rem; height: 1.75rem; fill: #fff; }

/* ── Section spacing utility ─────────────────────────────────────── */
.hwf-section {
  padding-top:    var(--hwf-space-2xl);
  padding-bottom: var(--hwf-space-2xl);
}
@media (min-width: 1024px) {
  .hwf-section {
    padding-top:    var(--hwf-space-3xl);
    padding-bottom: var(--hwf-space-3xl);
  }
}

/* ── Alternating section background ─────────────────────────────── */
.hwf-section--alt { background-color: var(--hwf-bg-section); }

/* ── Near-black heading utility ─────────────────────────────────── */
.hwf-heading-dark { color: var(--hwf-text-dark) !important; }

/* ── Container ───────────────────────────────────────────────────── */
.hwf-container {
  max-width: var(--hwf-container);
  margin-inline: auto;
  padding-inline: var(--hwf-space-md);
}
@media (min-width: 768px) {
  .hwf-container { padding-inline: var(--hwf-space-xl); }
}

/* ── Lazy YouTube embed facade ───────────────────────────────────── */
.hwf-youtube-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--hwf-radius-lg);
  overflow: hidden;
  cursor: pointer;
}
.hwf-youtube-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  transition: opacity var(--hwf-transition);
}
.hwf-youtube-facade:hover img { opacity: 0.9; }
.hwf-youtube-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hwf-youtube-facade__play svg {
  width: 4rem;
  height: 4rem;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

/* ── Responsive: hide/show helpers ──────────────────────────────── */
@media (max-width: 767px) { .hwf-hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hwf-hide-desktop { display: none !important; } }