/*
Theme Name:   Mediax Child
Theme URI:    https://wordpress.themeholy.com/mediax
Description:  Child theme for Mediax, customised for The Vitamin Guy (performance-focused).
Author:       Themeholy
Author URI:   https://themeforest.net/user/themeholy
Template:     mediax
Version:      2.3
Text Domain:  mediax-child
Requires at least: 6.0
Tested up to: 6.7
*/

/* =========================================================
   THE VITAMIN GUY — GLOBAL (Front-end) CHILD THEME CSS (v2)
   Purpose:
   - Keep global overrides small + predictable
   - Provide brand tokens used across Elementor blocks
   - Fix recurring layout issues safely (Mediax header logo alignment)
   - Protect icon fonts from accidental typography overrides
   - Elementor-safe (no global resets, no broad destructive selectors)
========================================================= */

/* -----------------------------
   0) Brand tokens (safe + reusable)
------------------------------ */
:root{
  --tvg-pink:#ff9ec4;
  --tvg-gold:#d4af37;
  --tvg-ink:#0f0f12;
  --tvg-muted:#565a66;
  --tvg-bg:#fafafa;
  --tvg-white:#ffffff;

  --tvg-grad:linear-gradient(135deg,var(--tvg-pink),var(--tvg-gold));
  --tvg-border:rgba(15,15,18,.10);
  --tvg-shadow:0 10px 28px rgba(15,15,18,.06);
  --tvg-radius:22px;

  --tvg-focus:0 0 0 3px rgba(212,175,55,.26);
}

/* -----------------------------
   1) Typography fallbacks only
   Elementor controls final fonts.
------------------------------ */
body{
  font-family: Raleway, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--tvg-ink);
  background: var(--tvg-bg);
}

/* -----------------------------
   2) Accessibility: consistent focus
------------------------------ */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--tvg-focus);
  border-radius: 10px;
}

/* -----------------------------
   3) HEADER / LOGO ALIGNMENT (Mediax + Elementor-safe)
   Fixes "logo hanging low" caused by inline-baseline images.
   - Works for Mediax header AND Elementor logo widgets if present.
------------------------------ */

/* Mediax header rows: vertically centre content */
.header-area .row,
.header-middle .row,
.menu-area .row,
.site-header .row{
  align-items:center !important;
}

/* Logo wrappers: behave like centred flex boxes */
.header-area .logo,
.header-middle .logo,
.menu-area .logo,
.site-header .logo,
.site-header .site-logo,
header .custom-logo-link{
  display:flex !important;
  align-items:center !important;
}

/* Kill baseline/line-height spacing that drags logos down */
.header-area .logo a,
.header-middle .logo a,
.menu-area .logo a,
header .custom-logo-link{
  display:flex !important;
  align-items:center !important;
  line-height:0 !important;
  padding:0 !important;
  margin:0 !important;
}

/* Ensure logo image is not inline-baseline */
.header-area .logo img,
.header-middle .logo img,
.menu-area .logo img,
header .custom-logo-link img{
  display:block !important;
  height:auto !important;
  width:auto !important;
  margin:0 !important;
  vertical-align:middle !important;
}

/* Elementor header containers (only helps if header is built with Elementor sections) */
header .elementor-container,
header .elementor-section .elementor-container,
header .e-con,
header .e-con-inner{
  align-items:center;
}

header .elementor-widget-theme-site-logo img,
header .elementor-widget-image img{
  display:block;
  height:auto;
  width:auto;
}

/* Optional: keep header height tight on mobile */
@media (max-width:768px){
  header .elementor-widget-theme-site-logo img,
  header .elementor-widget-image img{
    max-height:44px;
  }
}

/* -----------------------------
   4) ICON FONT PROTECTION (prevents blank socials/icons)
   IMPORTANT:
   - This does NOT load Font Awesome (functions.php does).
   - This only prevents global typography rules from hijacking icon glyph nodes.
------------------------------ */
i.fa::before,
i.fas::before,
i.far::before,
i.fab::before,
i.fa-solid::before,
i.fa-regular::before,
i.fa-brands::before,
span.fa::before,
span.fas::before,
span.far::before,
span.fab::before,
span.fa-solid::before,
span.fa-regular::before,
span.fa-brands::before{
  font-family:"Font Awesome 6 Free","Font Awesome 5 Free","FontAwesome" !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:auto;
  speak:never;
}

/* Brand icons (Instagram/Facebook etc.) */
i.fab::before,
i.fa-brands::before,
span.fab::before,
span.fa-brands::before{
  font-family:"Font Awesome 6 Brands","Font Awesome 5 Brands" !important;
  font-weight:400 !important;
}

/* Solid icons */
i.fas::before,
i.fa-solid::before,
span.fas::before,
span.fa-solid::before{
  font-weight:900 !important;
}

/* -----------------------------
   5) Performance: reduce-motion respect
------------------------------ */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
  }
  .tvg-btn,
  .tvg-purpose__btn,
  .tvg-purpose__pillar,
  .tvg-apart .tvg-btn,
  .tvg-apart .tvg-step-num,
  .tvg-img-frame img{
    transition:none !important;
    animation:none !important;
  }
}

/* -----------------------------
   6) Optional: kill horizontal overflow bugs
   Uncomment ONLY if you see sideways scroll.
------------------------------ */
/*
html, body{
  overflow-x:hidden;
}
*/
/**
 * TVG: Add responsive srcset/sizes to the hero image (1-4.webp) even when used in a custom HTML block.
 * Safe: only affects this specific filename.
 */
add_filter('the_content', function ($content) {
  if (stripos($content, 'wp-content/uploads/2025/12/1-4.webp') === false) return $content;

  // Find the <img> with this src.
  $pattern = '#<img([^>]+)src=("|\')([^"\']*/wp-content/uploads/2025/12/1-4\.webp)\2([^>]*)>#i';
  return preg_replace_callback($pattern, function ($m) {
    $full = $m[0];

    // Already has srcset? Leave it.
    if (stripos($full, 'srcset=') !== false) return $full;

    // Get attachment ID from URL
    $url = $m[3];
    $id  = attachment_url_to_postid($url);
    if (!$id) return $full;

    $srcset = wp_get_attachment_image_srcset($id, 'full');
    $sizes  = '(max-width: 768px) 92vw, 627px';

    if (!$srcset) return $full;

    // Inject srcset + sizes before closing
    $injected = rtrim(substr($full, 0, -1)) . ' srcset="' . esc_attr($srcset) . '" sizes="' . esc_attr($sizes) . '">';

    return $injected;
  }, $content);
}, 20);