/* =========================================
   NutraWag Header (Mobile + Desktop)
   ========================================= */

/* Hide GeneratePress default header completely */
#masthead {
  display: none;
}

/* Promo bar (40px)  always present */
.nw-promo-bar {
  height: 40px;
  background: var(--color-primary-blue);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-family: var(--font-family-base);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

/* -----------------------------------------
   MOBILE HEADER
   ----------------------------------------- */

.nw-mobile-nav,
.nw-mobile-menu-panel {
  display: none;
}

/* Base mobile nav styling */
.nw-mobile-nav {
  background: var(--color-white);
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nw-mobile-left,
.nw-mobile-center,
.nw-mobile-right {
  flex: 1;
  display: flex;
  align-items: center;
}

/* Center logo on mobile */
.nw-mobile-center {
  justify-content: center;
}

.nw-mobile-logo {
  display: block;
  text-decoration: none;
}

.nw-mobile-logo img {
  height: 28px;
  width: auto;
  display: block;
}

/* Right section */
.nw-mobile-right {
  justify-content: flex-end;
}

/* Hamburger icon */
.nw-hamburger {
  width: 24px;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nw-hamburger span {
  height: 3px;
  border-radius: 2px;
  background: var(--color-primary-navy);
}

/* Slide-out mobile menu panel */
.nw-mobile-menu-panel {
  position: fixed;
  top: 96px; /* 40px promo + ~56px mobile nav */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform 0.25s ease-in-out;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

/* Body class controls opening */
body.nw-menu-open .nw-mobile-menu-panel {
  transform: translateX(0);
}

/* Mobile menu inner styles */
.nw-mobile-menu-nav {
  padding: 2.5rem 1rem 2rem;
}

.nw-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nw-mobile-menu > li {
  margin-bottom: 0;
}

.nw-mobile-menu a {
  display: block;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  padding: 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}

/* Lock scroll when menu is open (mobile only) */
body.nw-menu-open {
  overflow: hidden;
}

/* Mobile menu close button */
.nw-mobile-menu-close {
  position: absolute;
  top: 0px;
  left: 4px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.nw-mobile-menu-close span {
  font-size: 36px;
  line-height: 1;
  color: var(--color-primary-navy);
  font-weight: var(--fw-normal);
}

.nw-mobile-menu-close:hover span {
  color: var(--color-gray-500);
}

/* -----------------------------------------
   DESKTOP HEADER
   ----------------------------------------- */

.nw-desktop-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px max(32px, calc((100vw - 1260px) / 2));
  background: var(--color-white);
  border-bottom: 1px solid #e5e5e5;
}

.nw-desktop-left,
.nw-desktop-center,
.nw-desktop-right {
  display: flex;
  align-items: center;
}

/* Logo on the left */
.nw-desktop-left {
  flex: 0 0 auto;
}

.nw-desktop-logo {
  display: block;
  text-decoration: none;
}

.nw-desktop-logo img {
  height: 32px;
  width: auto;
  display: block;
  transition: height 0.3s ease;
}

/* Menu in the middle */
.nw-desktop-center {
  flex: 1 1 auto;
  justify-content: center;
}

.nw-desktop-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.nw-desktop-menu > li {
  position: relative;
}

.nw-desktop-menu a {
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  color: #2e355c; /* NutraWag Navy */
  padding-bottom: 4px;
}

/* Simple underline on hover/active */
.nw-desktop-menu a:hover,
.nw-desktop-menu .current-menu-item > a {
  border-bottom: 2px solid #00637c;
}

/* Right section */
.nw-desktop-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 16px;
}

/* -----------------------------------------
   ACCOUNT LINK (Mobile + Desktop)
   ----------------------------------------- */

.nw-account-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-navy);
  text-decoration: none;
  transition: color var(--transition-base);
}

.nw-account-link:hover {
  color: var(--color-primary-blue);
}

.nw-account-icon {
  width: 24px;
  height: 24px;
}

/* Mobile-specific account link */
.nw-mobile-right {
  gap: 12px;
}

/* -----------------------------------------
   RESPONSIVE BEHAVIOUR
   ----------------------------------------- */

/* Mobile: show mobile nav + panel, hide desktop nav */
@media (max-width: 768px) {
  .nw-mobile-nav,
  .nw-mobile-menu-panel {
    display: flex;
  }
  .nw-mobile-menu-panel {
    display: block; /* override flex default */
  }

  .nw-desktop-nav {
    display: none;
  }
}

/* Desktop: hide mobile nav + slide panel */
@media (min-width: 769px) {
  .nw-mobile-nav,
  .nw-mobile-menu-panel {
    display: none !important;
  }

  .nw-desktop-nav {
    display: flex;
  }

  /* Restore scroll even if body has nw-menu-open (safety) */
  body.nw-menu-open {
    overflow: auto;
  }
}

/* ============================================
   STICKY HEADER BEHAVIOR
   ============================================ */

/* Mobile Sticky Styles */
@media (max-width: 768px) {
  /* Promo bar when sticky (scrolling down) */
  .nw-promo-bar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform: translateY(0);
    transition: transform 0.25s ease-in-out;
  }

  /* Promo bar when hidden (scrolling up) */
  .nw-promo-bar.is-hidden {
    transform: translateY(-100%);
    transition: transform 0.25s ease-in-out;
  }

  /* Mobile nav when sticky (scrolling up) */
  .nw-mobile-nav.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform: translateY(0);
    transition: transform 0.25s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* Mobile nav when hidden (scrolling down) */
  .nw-mobile-nav.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease-in-out, opacity 0.2s ease;
  }

  /* Adjust mobile menu panel position when nav is sticky */
  .nw-mobile-nav.is-sticky ~ .nw-mobile-menu-panel {
    top: 56px; /* Height of mobile nav only */
  }
}

/* Desktop Sticky Styles */
@media (min-width: 769px) {
  /* Promo bar when sticky */
  .nw-promo-bar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: 30px; /* Shrink from 40px */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs); /* Smaller text */
    transition: height 0.3s ease, font-size 0.3s ease;
  }

  /* Desktop nav when sticky */
  .nw-desktop-nav.is-sticky {
    position: fixed;
    top: 30px; /* Below sticky promo bar */
    left: 0;
    right: 0;
    z-index: 999;
    padding: 8px max(24px, calc((100vw - 1260px) / 2));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: padding 0.3s ease, top 0.3s ease;
  }

  /* When promo bar is NOT sticky, desktop nav should be at normal position */
  .nw-desktop-nav:not(.is-sticky) {
    transition: padding 0.3s ease;
  }

  /* Shrink desktop logo when sticky */
  .nw-desktop-nav.is-sticky .nw-desktop-logo img {
    height: 26px; /* Slightly smaller */
  }

  /* Shrink desktop menu when sticky */
  .nw-desktop-nav.is-sticky .nw-desktop-menu a {
    padding: 8px 12px; /* Reduced padding */
    font-size: var(--fs-sm); /* Smaller text */
    transition: padding 0.3s ease, font-size 0.3s ease;
  }
}

/* ============================================
   FOOTER STYLES
   ============================================ */

/* Hide GeneratePress default footer */
#colophon {
  display: none;
}

/* Base Footer Styles */
.nw-footer {
  background-color: var(--color-primary-navy);
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--fs-sm);
  line-height: var(--line-height-base);
}

.nw-footer a {
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.nw-footer a:hover {
  opacity: 0.8;
}

/* Mobile Footer - Stacked Layout */
.nw-mobile-footer {
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Desktop Footer - Hidden on mobile */
.nw-desktop-footer {
  display: none;
}

/* Logo Section */
.nw-footer__logo-section {
  text-align: center;
}

.nw-footer__logo {
  display: inline-block;
  text-decoration: none;
}

.nw-footer__logo img {
  height: 40px;
  width: auto;
  display: block;
}

/* Newsletter Section */
.nw-footer__newsletter {
  text-align: center;
}

.nw-footer__newsletter-heading {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-white);
}

.nw-footer__newsletter-text {
  font-size: var(--fs-sm);
  margin: 0 0 var(--space-md) 0;
  color: rgba(255, 255, 255, 0.9);
}

.nw-footer__newsletter-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 400px;
  margin: 0 auto;
}

.nw-footer__newsletter-input {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-family: var(--font-family-base);
}

.nw-footer__newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.nw-footer__newsletter-input:focus {
  outline: none;
  border-color: var(--color-white);
  background-color: rgba(255, 255, 255, 0.15);
}

.nw-footer__newsletter-button {
  padding: var(--space-sm) var(--space-lg);
  background-color: var(--color-btn-bg);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-family: var(--font-family-base);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.nw-footer__newsletter-button:hover {
  background-color: var(--color-btn-bg-hover);
}

/* Social Icons */
.nw-footer__social {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
}

.nw-footer__social-link {
  font-size: var(--fs-xl);
  display: inline-block;
  transition: transform var(--transition-fast);
}

.nw-footer__social-link:hover {
  transform: scale(1.1);
}

/* Navigation */
.nw-footer__nav {
  text-align: center;
}

.nw-footer__nav-heading {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-md) 0;
  color: var(--color-white);
}

.nw-footer__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.nw-footer__menu li {
  margin: 0;
}

.nw-footer__menu a {
  display: inline-block;
  padding: var(--space-2xs) 0;
}

/* Contact Info */
.nw-footer__contact {
  text-align: center;
}

.nw-footer__contact-heading {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-md) 0;
  color: var(--color-white);
}

.nw-footer__contact-item {
  margin: 0 0 var(--space-sm) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.nw-footer__contact-icon {
  font-size: var(--fs-lg);
}

/* Location */
.nw-footer__location {
  text-align: center;
}

.nw-footer__location-heading {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-md) 0;
  color: var(--color-white);
}

.nw-footer__address {
  font-style: normal;
  line-height: var(--line-height-relaxed);
  color: rgba(255, 255, 255, 0.9);
}

/* Copyright */
.nw-footer__copyright {
  text-align: center;
  padding-top: var(--space-lg);
  margin-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.7);
}

.nw-footer__copyright p {
  margin: 0;
}

/* Desktop Footer Styles */
@media (min-width: 769px) {
  /* Hide mobile footer */
  .nw-mobile-footer {
    display: none;
  }

  /* Show desktop footer */
  .nw-desktop-footer {
    display: block;
    padding: var(--space-2xl) var(--space-xl) var(--space-lg);
  }

  /* Main content area - 3 columns */
  .nw-footer__main {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }

  /* Column alignment */
  .nw-footer__column--left {
    text-align: left;
  }

  .nw-footer__column--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .nw-footer__column--right {
    text-align: left;
  }

  /* Logo in left column */
  .nw-footer__column--left .nw-footer__logo {
    font-size: var(--fs-2xl);
    margin-bottom: var(--space-lg);
    display: block;
  }

  /* Contact in left column */
  .nw-footer__column--left .nw-footer__contact {
    text-align: left;
    margin-bottom: var(--space-lg);
  }

  .nw-footer__column--left .nw-footer__contact-item {
    justify-content: flex-start;
  }

  /* Location in left column */
  .nw-footer__column--left .nw-footer__location {
    text-align: left;
  }

  /* Newsletter form - horizontal layout */
  .nw-footer__column--center .nw-footer__newsletter-form {
    flex-direction: row;
    max-width: 100%;
  }

  .nw-footer__column--center .nw-footer__newsletter-input {
    flex: 1;
  }

  .nw-footer__column--center .nw-footer__newsletter-button {
    white-space: nowrap;
  }

  /* Navigation in right column */
  .nw-footer__column--right .nw-footer__nav {
    text-align: left;
  }

  .nw-footer__column--right .nw-footer__menu {
    align-items: flex-start;
  }

  /* Copyright bar - full width */
  .nw-desktop-footer .nw-footer__copyright {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
  }
}