/*
Theme Name: Nutrox Health & Wellness
Theme URI: https://nutrox.in
Author: Nutrox Health Pvt. Ltd.
Author URI: https://nutrox.in
Description: Premium Indian health and wellness brand theme. Nutrition · Wellness · Transformation. Built with Stitch AI design system featuring deep forest green (#1B4332) branding, gold accents, and INR pricing for personalized diet plans and wellness programs.
Version: 1.0.5
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
License URI: https://nutrox.in/license
Text Domain: nutrox
Tags: health, wellness, nutrition, diet, green, premium, blog, e-commerce
*/

/* =====================================================
   NUTROX BRAND DESIGN TOKENS
   Matches the Stitch design system
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --nutrox-forest:    #1B4332;
  --nutrox-forest-70: #2D6A4F;
  --nutrox-forest-50: #40916C;
  --nutrox-forest-10: #D8F3DC;
  --nutrox-forest-05: #E8F0E4;
  --nutrox-gold:      #D4A030;
  --nutrox-gold-light: #FDF8ED;
  --nutrox-bg:        #FAFDF7;
  --nutrox-surface:   #FFFFFF;
  --nutrox-border:    #E8F0E4;
  --nutrox-text:      #0A1F12;
  --nutrox-text-muted: #5A6B5A;
  --font-headline: 'Playfair Display', Georgia, serif;
  --font-body:     'Inter', -apple-system, sans-serif;
  --radius-md:  8px;
  --radius-lg:  12px;
  --shadow-card: 0 2px 12px rgba(27,67,50,0.06), 0 0 0 1px rgba(27,67,50,0.04);
  --shadow-hover: 0 12px 40px rgba(27,67,50,0.14);
}

/* Base reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  background: var(--nutrox-bg);
  color: var(--nutrox-text);
  line-height: 1.6;
}

/* WordPress-specific fixes */
.wp-block-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.wp-block-button__link {
  background-color: var(--nutrox-forest);
  color: white;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  padding: 12px 24px;
  transition: all 0.28s ease;
}
.wp-block-button__link:hover { background-color: var(--nutrox-forest-70); }

/* Navigation */
#site-navigation,
.site-header { background-color: var(--nutrox-forest) !important; }

#site-navigation ul li a,
#site-navigation .desktop-nav-wrapper > a,
.main-navigation a {
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important; /* premium compact 13px font size */
  font-weight: 600 !important; /* font-semibold */
  letter-spacing: 0.06em !important; /* tracking-wider */
  text-transform: uppercase !important; /* uppercase */
  text-decoration: none !important;
  transition: all 0.28s ease !important;
  display: inline-block !important;
  position: relative !important;
  padding-bottom: 2px !important;
}

#site-navigation ul li a:hover,
#site-navigation .desktop-nav-wrapper > a:hover,
.main-navigation a:hover {
  color: var(--nutrox-gold) !important;
}

/* Premium bottom line transition on hover */
#site-navigation ul li a::after,
#site-navigation .desktop-nav-wrapper > a::after,
.main-navigation a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--nutrox-gold) !important;
  transform: scaleX(0) !important;
  transform-origin: right !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#site-navigation ul li a:hover::after,
#site-navigation .desktop-nav-wrapper > a:hover::after,
.main-navigation a:hover::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
}

/* Active page line highlight */
#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current_page_item > a,
#site-navigation .desktop-nav-wrapper > a.active-assessment,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
  color: var(--nutrox-gold) !important;
  font-weight: 700 !important;
}
#site-navigation ul li.current-menu-item > a::after,
#site-navigation ul li.current_page_item > a::after,
#site-navigation .desktop-nav-wrapper > a.active-assessment::after,
.main-navigation .current-menu-item > a::after,
.main-navigation .current_page_item > a::after {
  transform: scaleX(1) !important;
  background-color: var(--nutrox-gold) !important;
}

/* Logo & Navigation Alignment Fixes */
.logo-custom-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
}
.logo-custom-wrapper a.custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  max-width: 188px !important;
}
.logo-custom-wrapper img.custom-logo,
.logo-custom-wrapper img {
  height: 32px !important;
  max-height: none !important;
  max-width: 188px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}
.footer-logo-wrapper {
  max-height: none;
}
.footer-logo-wrapper a.custom-logo-link {
  max-width: 220px !important;
}
.footer-logo-wrapper img {
  height: 64px !important;
  max-width: 220px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

@media (min-width: 1024px) {
  .logo-custom-wrapper a.custom-logo-link {
    max-width: 235px !important;
  }
  .logo-custom-wrapper img.custom-logo,
  .logo-custom-wrapper img {
    height: 40px !important;
    max-width: 235px !important;
  }
}

@media (max-width: 640px) {
  .footer-logo-wrapper a.custom-logo-link {
    max-width: 190px !important;
  }
  .footer-logo-wrapper img {
    height: 56px !important;
    max-width: 190px !important;
  }
}

/* Layout overrides to prevent browser splitting/wrapping bugs */
.desktop-nav-wrapper {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
  flex: none !important;
}

/* Ensure dynamic wp_nav_menu styling matches static layout */
#site-navigation ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
  flex: none !important;
  gap: 1rem !important; /* gap-4 = 16px */
}

@media (min-width: 1280px) {
  #site-navigation ul {
    gap: 1.5rem !important; /* xl:gap-6 = 24px */
  }
}

#site-navigation ul li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Site header */
.site-title a { color: white; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.site-description { color: rgba(255,255,255,0.6); font-size: 0.8rem; }

/* Content */
.entry-title { font-family: var(--font-headline); color: var(--nutrox-text); }
.entry-content { color: var(--nutrox-text-muted); font-size: 1.0625rem; line-height: 1.75; }
.entry-content h2, .entry-content h3 { font-family: var(--font-headline); color: var(--nutrox-text); margin: 1.5em 0 0.5em; }
.entry-content a { color: var(--nutrox-forest); text-decoration: underline; }

/* WooCommerce product overrides */
.woocommerce .price { color: var(--nutrox-forest); font-weight: 700; font-size: 1.25rem; }
.woocommerce .button,
.woocommerce button[type="submit"] {
  background-color: var(--nutrox-forest) !important;
  color: white !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
.woocommerce .button:hover { background-color: var(--nutrox-forest-70) !important; }
.woocommerce-product-gallery__image img { border-radius: var(--radius-lg); }
.woocommerce ul.products li.product { border: 1px solid var(--nutrox-border); border-radius: var(--radius-lg); padding: 16px; transition: all 0.28s ease; }
.woocommerce ul.products li.product:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }

/* Footer */
.site-footer { background-color: var(--nutrox-forest); color: rgba(255,255,255,0.75); padding: 60px 0 24px; }
.site-footer a { color: rgba(255,255,255,0.7); }
.site-footer a:hover { color: var(--nutrox-gold); }
.site-footer .widget-title { color: white; font-weight: 700; }

/* Brochure link/button — match site UI */
.brochure-link,
.site-footer .brochure-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 12px 22px;
  background-color: var(--nutrox-forest) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), box-shadow 0.28s ease, opacity 0.2s ease;
}
.brochure-link:hover,
.site-footer .brochure-link:hover {
  background-color: var(--nutrox-forest-70) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* Comments */
.comment-form input, .comment-form textarea {
  border: 1.5px solid var(--nutrox-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-family: var(--font-body);
}
.comment-form input:focus, .comment-form textarea:focus {
  border-color: var(--nutrox-forest-50);
  outline: none;
}

/* Widgets */
.widget { margin-bottom: 32px; }
.widget-title { font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--nutrox-text); margin-bottom: 16px; }

/* Responsive */
@media (max-width: 768px) {
  .main-navigation ul { display: none; }
  .menu-toggle { display: block; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; }
}

/* Premium Micro-animations & Interactive Elements */
a.bg-secondary, button.bg-secondary, .btn-primary, .btn-gold, .wp-block-button__link, .woocommerce .button, .woocommerce button[type="submit"] {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
a.bg-secondary:hover, button.bg-secondary:hover, .btn-primary:hover, .btn-gold:hover, .wp-block-button__link:hover, .woocommerce .button:hover, .woocommerce button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(212, 160, 48, 0.3) !important;
}
.wa-animated {
  animation: wa-wiggle 6s ease-in-out infinite;
}
@keyframes wa-wiggle {
  0%, 90%, 100% { transform: scale(1) rotate(0deg); }
  92% { transform: scale(1.08) rotate(-8deg); }
  94% { transform: scale(1.08) rotate(8deg); }
  96% { transform: scale(1.08) rotate(-8deg); }
  98% { transform: scale(1.08) rotate(8deg); }
}

/* Premium Sticky Header Polish */
nav.sticky, nav[class*="sticky"], header nav, .site-header {
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
nav > div, header nav > div, .site-header > div {
  transition: padding 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.header-is-sticky {
  background-color: rgba(27, 67, 50, 0.82) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  box-shadow: 0 10px 30px rgba(10, 31, 18, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.header-is-sticky > div {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Premium Perpetual Botanical sway Motion */
.animate-sway {
  animation: botanical-sway 7.5s ease-in-out infinite;
  transform-origin: bottom center;
  will-change: transform;
}
@keyframes botanical-sway {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  50% { transform: translateY(-10px) rotate(1.8deg) scale(1.015); }
}

/* Premium Announcement Bar Marquee */
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.ticker {
  display: inline-block;
  animation: announcement-marquee 24s linear infinite;
  will-change: transform;
}
.ticker:hover {
  animation-play-state: paused;
}
.ticker span {
  display: inline-block;
  padding: 0 16px;
}
@keyframes announcement-marquee {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Premium SVG hamburger menu morphing to Close (X) icon */
#mobile-menu-btn svg line {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  transform-origin: center;
}
#mobile-menu-btn[aria-expanded="true"] svg line:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
#mobile-menu-btn[aria-expanded="true"] svg line:nth-child(2) {
  opacity: 0;
}
#mobile-menu-btn[aria-expanded="true"] svg line:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Premium Mobile Menu Drawer Transitions */
#mobile-menu {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
#mobile-menu.active {
  opacity: 1;
  transform: translateY(0);
}
