/**
 * Nav CTA Buttons — Module stylesheet
 * All MMW brand sites use this file as base.
 * Per-brand: copy the "Brand overrides" block, change variable values only.
 *
 * GHG diverges from CropLife/AGB/CEAg in two ways:
 *   - Per-button color overrides (Advertise = purple, Subscribe = orange)
 *   - Breakpoint-scoped :root (different design for desktop vs mobile):
 *       * Desktop: 2 colored pills + Log In hidden (lives in primary nav)
 *       * Mobile:  3 stacked items in dark drawer — Advertise/Subscribe
 *                  appear as plain text (default vars), Log In is a
 *                  blue filled button (per-button override)
 */

/* ============================================================
   BRAND VARIABLES — edit this block per brand, nothing else
   ============================================================ */
:root {
  /* BASE values — apply at all viewports unless overridden by media
     queries below. On GHG mobile these drive the look of Advertise/
     Subscribe (plain white text on dark drawer); on desktop they're
     overridden by per-button vars. */
  --nav-cta-bg:          transparent;
  --nav-cta-border:      none;
  --nav-cta-color:       #ffffff;
  --nav-cta-radius:      0;
  --nav-cta-hover-bg:    rgba(255,255,255,0.1);

  /* Mobile drawer — dark per Kait's mockup */
  --nav-cta-drawer-bg:         #1a1a1a;
  --nav-cta-drawer-border-top: 1px solid #333333;
  --nav-cta-drawer-pb:         140px;

  /* Layout — controls how close the primary nav sits to the logo at desktop.
     20px = compact (frees right-side space for many CTAs/icons).
     auto = pushes nav to the right (original Bootstrap-3 float layout). */
  --nav-cta-menu-margin-left: auto;

  /* Hover-color override (optional). Brands that want text to flip to a
     different color on hover (CEAg's outlined-to-filled pill) set this.
     Brands that don't (CropLife, AGB) leave it unset. */
  /* --nav-cta-hover-color: <unset> — fallback to --nav-cta-color */
}

/* ============================================================
   DESKTOP-SCOPED brand variables (>= 1280px)
   GHG: rounded pills, per-button purple Advertise + orange Subscribe,
   white-fill blue-text hover treatment.
   ============================================================ */
@media (min-width: 1280px) {
  :root {
    /* Square-ish pills on desktop per Kait's GHG mockup (3px = barely rounded) */
    --nav-cta-radius: 3px;

    /* Advertise — purple */
    --nav-cta-advertise-bg:           #992E6A;
    --nav-cta-advertise-border:       2px solid #992E6A;
    --nav-cta-advertise-color:        #ffffff;
    --nav-cta-advertise-hover-bg:     #ffffff;
    --nav-cta-advertise-hover-border: 2px solid #204099;
    --nav-cta-advertise-hover-color:  #204099;

    /* Subscribe — orange */
    --nav-cta-subscribe-bg:           #E0663A;
    --nav-cta-subscribe-border:       2px solid #E0663A;
    --nav-cta-subscribe-color:        #ffffff;
    --nav-cta-subscribe-hover-bg:     #ffffff;
    --nav-cta-subscribe-hover-border: 2px solid #204099;
    --nav-cta-subscribe-hover-color:  #204099;
  }
}

/* ============================================================
   MOBILE-SCOPED brand variables (< 1280px)
   GHG: Log In becomes a blue filled button at the bottom of the drawer.
   Advertise/Subscribe fall back to base vars (transparent, plain text).
   ============================================================ */
@media (max-width: 1279px) {
  :root {
    --nav-cta-login-bg:      #22409A;
    --nav-cta-login-border:  none;
    --nav-cta-login-color:   #ffffff;
  }
}

/* ============================================================
   LEGACY WIDGET HIDE
   .cg-subscribe is a pre-existing subscribe link rendered by header.php
   when the mmw_subscribe_page option is set. The new nav-cta module
   replaces this affordance, so hide the legacy element to avoid a
   duplicate "Subscribe" appearing in the navbar (which the :has()
   primary-nav hide rule can't reach since .cg-subscribe is a sibling
   of #header-nav, not a child).

   Specificity note: header.php emits the element as
     <div class="cg-subscribe visible-md visible-lg">
   which makes Bootstrap's `.visible-md.visible-lg { display: block !important }`
   rule apply (specificity 0,2,0). A bare `.cg-subscribe { display: none
   !important }` has specificity 0,1,0 and LOSES the cascade despite
   being !important. Selector below matches the element's full class
   combination (specificity 0,3,0) so it wins everywhere Bootstrap
   would otherwise force display:block.
   ============================================================ */
.cg-subscribe.visible-md.visible-lg {
  display: none !important;
}

/* ============================================================
   BASE STYLES — do not modify per brand
   ============================================================ */

/* Hide both wraps by default; desktop/mobile rules show them */
.nav-cta-wrap {
  display: none;
}
.nav-cta-wrap--mobile {
  display: none;
}

/* Remove list styling from wp_nav_menu output */
.nav-cta-wrap .nav-cta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* All CTA links — primary (default) style */
.nav-cta-wrap .nav-cta-list a {
  display: inline-block;
  background-color: var(--nav-cta-bg);
  border: var(--nav-cta-border);
  color: var(--nav-cta-color) !important;
  border-radius: var(--nav-cta-radius);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 16px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.2s ease, border 0.2s ease, color 0.2s ease;
}

.nav-cta-wrap .nav-cta-list a:hover {
  background-color: var(--nav-cta-hover-bg);
  /* Fallback chain: --nav-cta-hover-color -> --nav-cta-color */
  color: var(--nav-cta-hover-color, var(--nav-cta-color)) !important;
}

/* Advertise — per-button override.
   Desktop: vars are set in :root (purple/orange/white). Hover swaps to
            white bg + blue border + blue text.
   Mobile:  vars NOT set in :root, fall through to base (transparent +
            white text — looks like a plain drawer item). */
.nav-cta-wrap .nav-cta-list li.nav-cta-advertise a {
  background-color: var(--nav-cta-advertise-bg, var(--nav-cta-bg));
  border: var(--nav-cta-advertise-border, var(--nav-cta-border));
  color: var(--nav-cta-advertise-color, var(--nav-cta-color)) !important;
}
.nav-cta-wrap .nav-cta-list li.nav-cta-advertise a:hover {
  background-color: var(--nav-cta-advertise-hover-bg, var(--nav-cta-hover-bg));
  border: var(--nav-cta-advertise-hover-border, var(--nav-cta-border));
  color: var(--nav-cta-advertise-hover-color, var(--nav-cta-color)) !important;
}

/* Subscribe — per-button override (same pattern as Advertise) */
.nav-cta-wrap .nav-cta-list li.nav-cta-subscribe a {
  background-color: var(--nav-cta-subscribe-bg, var(--nav-cta-bg));
  border: var(--nav-cta-subscribe-border, var(--nav-cta-border));
  color: var(--nav-cta-subscribe-color, var(--nav-cta-color)) !important;
}
.nav-cta-wrap .nav-cta-list li.nav-cta-subscribe a:hover {
  background-color: var(--nav-cta-subscribe-hover-bg, var(--nav-cta-hover-bg));
  border: var(--nav-cta-subscribe-hover-border, var(--nav-cta-border));
  color: var(--nav-cta-subscribe-hover-color, var(--nav-cta-color)) !important;
}

/* Log In — identified by WP menu item class on <li>, not href.
   GHG only: variables are set inside @media (max-width: 1279px), so
   on desktop the per-button rule resolves to base (effectively no-op
   since Log In is hidden on desktop anyway). */
.nav-cta-wrap .nav-cta-list li.nav-cta-login a {
  background-color: var(--nav-cta-login-bg, var(--nav-cta-bg));
  border: var(--nav-cta-login-border, var(--nav-cta-border));
  color: var(--nav-cta-login-color, var(--nav-cta-color)) !important;
}
.nav-cta-wrap .nav-cta-list li.nav-cta-login a:hover {
  background-color: var(--nav-cta-login-hover-bg, var(--nav-cta-login-bg, var(--nav-cta-hover-bg)));
}

/* ============================================================
   NAVBAR FLEX INTEGRATION
   ============================================================ */
@media (min-width: 1280px) {
  .top-navbar {
    display: flex;
    align-items: center;
  }

  .top-navbar > .navbar-header {
    flex: 0 0 auto;
    order: 1;
    float: none;
  }

  /* Primary nav ul — class may be navbar-nav, navbar-collapse, or both.
     Menu's left margin is brand-controlled via --nav-cta-menu-margin-left.
     flex: 0 1 auto + min-width: 0 lets the UL shrink-to-content. */
  .top-navbar > .navbar-nav,
  .top-navbar > .navbar-collapse {
    flex: 0 1 auto;
    min-width: 0;
    order: 2;
    float: none !important;
    margin-left: var(--nav-cta-menu-margin-left);
  }

  /* Desktop CTA wrap */
  .nav-cta-wrap:not(.nav-cta-wrap--mobile) {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    order: 3;
    margin-left: 12px;
  }

  /* GHG-specific: hide Log In at desktop. Log In stays as a regular
     primary-nav text item (the existing menu has 'Log In | Log Out'
     with a placeholder href #lolmiloginout# that JS swaps at runtime). */
  .nav-cta-wrap .nav-cta-list li.nav-cta-login {
    display: none;
  }

  /* Social icons — after CTA wrap. */
  .top-navbar > .header-top-icons {
    flex: 0 0 auto;
    order: 4;
    margin: 0 0 0 16px !important;
    position: static;
    display: flex;
    align-items: center;
    align-self: center !important;
  }

  /* Per-anchor flex centering for icons */
  .header-top-icons a {
    display: inline-flex;
    align-items: center;
  }

  /* Twitter / X icon alignment fix.
     GHG header.php emits the X anchor with hard-coded inline styles
       style="display: inline-block; display: inline-block; vertical-align: sub; padding-left: 4px"
     The inline `display: inline-block` wins over the
     `.header-top-icons a { display: inline-flex; align-items: center }`
     rule (inline > external specificity), and `vertical-align: sub`
     pushes the anchor's baseline below the others. The 24x26 SVG is
     also 4px taller than the 22px FA icons, and the inner `<div>`
     wrapper inherits the anchor's `line-height: normal` which adds
     extra vertical padding. Override all three so the X glyph centers
     cleanly with Facebook / LinkedIn / YouTube. */
  .top-navbar .header-top-icons a[href*="twitter"] {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    padding-left: 0 !important;
  }
  .top-navbar .header-top-icons a[href*="twitter"] > div {
    line-height: 0;
  }
  .top-navbar .header-top-icons a[href*="twitter"] svg {
    width: 20px;
    height: 22px;
  }

  /* Hide duplicate items from primary nav at desktop.
     Subscribe — real menu item, replaced by CTA pill.
     Log In — env-specific href: local uses placeholder #lolmiloginout#
       (swapped by JS at runtime), staging/prod points at /wp-login.php
       or /member-login/. All three patterns covered.
     Mobile Social Icons — wrapper menu item used to render the social
       row inside the mobile drawer; matched on the WP-emitted title attr
       (link href is just "#", which would also match dropdown parents). */
  .top-navbar #header-nav > li:has(> a[href$="/subscribe/"]),
  .top-navbar #header-nav > li:has(> a[href*="/member-login/"]),
  .top-navbar #header-nav > li:has(> a[href*="lolmiloginout"]),
  .top-navbar #header-nav > li:has(> a[href$="/wp-login.php"]),
  .top-navbar #header-nav > li:has(> a[title="Mobile Social Icons"]) {
    display: none;
  }
}

/* ============================================================
   DESKTOP LINK PADDING
   Tightens primary-nav link padding/font-size at the desktop
   breakpoint so logo + menu items + CTA pills + icons all fit on
   one row inside the navbar container.
   ============================================================ */
@media (min-width: 1280px) {
  .top-navbar #header-nav > li > a {
    padding-left: 4px !important;
    padding-right: 4px !important;
    font-size: 13px !important;
  }
}

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
@media (max-width: 1279px) {
  /* Hide duplicate Subscribe from primary nav on mobile too — it's
     in the CTA strip as a styled item. */
  #header-nav > li:has(> a[href$="/subscribe/"]),
  #header-nav > li:has(> a[href*="/member-login/"]) {
    display: none;
  }

  /* Hide JS-cloned mobile-inline duplicates inside the drawer.
     js/script.js clones <li.item-mobile-inline-hidden> and re-appends
     the clone with class item-mobile-inline. */
  #header-nav > li.item-mobile-inline {
    display: none;
  }

  /* Note: GHG does NOT include the
       .header-top-icons { display: none; }
     rule from CropLife's module — on GHG, .header-top-icons holds
     the mobile search button (other social icons have hidden-mobile
     class). Hiding the whole container would break mobile search. */

  /* Desktop wrap hidden on mobile */
  .nav-cta-wrap:not(.nav-cta-wrap--mobile) {
    display: none;
  }

  /* Mobile wrap shown only when drawer is open. */
  body.menu-open .nav-cta-wrap--mobile {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background-color: var(--nav-cta-drawer-bg);
    border-top: var(--nav-cta-drawer-border-top);
    padding: 0;
  }

  /* Reserve space so last primary nav item isn't hidden behind fixed CTA strip. */
  body.menu-open #header-nav.navbar-collapse {
    padding-bottom: var(--nav-cta-drawer-pb);
  }

  /* Mobile list — vertical stack, no gap (full-bleed bars) */
  body.menu-open .nav-cta-wrap--mobile .nav-cta-list {
    flex-direction: column;
    gap: 0;
  }

  body.menu-open .nav-cta-wrap--mobile .nav-cta-list li {
    width: 100%;
  }

  body.menu-open .nav-cta-wrap--mobile .nav-cta-list a {
    display: block;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 16px;
    font-size: 22px;
  }
}