/**
 * 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.
 *
 * To add a new brand:
 *   1. Copy nav-cta.css to new theme's css/ directory
 *   2. Update the :root variables in the "Brand overrides" block
 *   3. Register nav-cta menu location in functions.php
 *   4. Include template-parts/nav-cta.php in header.php
 */

/* ============================================================
   BRAND VARIABLES — edit this block per brand, nothing else
   ============================================================ */
:root {
  /* Primary CTAs (Subscribe, Advertise) — AGB filled-red rectangular pills */
  --nav-cta-bg:          #cc0000;
  --nav-cta-border:      none;
  --nav-cta-color:       #ffffff;
  --nav-cta-radius:      3px;
  --nav-cta-hover-bg:    #a50000;

  /* Secondary CTA (Log In) — AGB has no Log In item; values inert */
  --nav-cta-login-bg:          #A87B47;
  --nav-cta-login-border:      2px solid transparent;
  --nav-cta-login-color:       #ffffff;
  --nav-cta-login-hover-bg:    #8A6535;

  /* Mobile drawer */
  --nav-cta-drawer-bg:         #333333;
  --nav-cta-drawer-border-top: 1px solid #444444;
  --nav-cta-drawer-pb:         116px;

  /* 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 (e.g. CEAg's outlined-to-filled pill) set
     this. Brands that don't (CropLife, AGB) leave it unset; the hover
     rule falls back to --nav-cta-color so text color is unchanged. */
  /* --nav-cta-hover-color: <unset> — fallback to --nav-cta-color */
}

/* ============================================================
   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 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;
}

.nav-cta-wrap .nav-cta-list a:hover {
  background-color: var(--nav-cta-hover-bg);
  /* Fallback to --nav-cta-color so brands without a hover-color
     override (CropLife, AGB) keep their current text color on hover.
     Brands like CEAg set --nav-cta-hover-color to flip the text on
     fill-on-hover (e.g. outlined-to-filled blue pill). */
  color: var(--nav-cta-hover-color, var(--nav-cta-color)) !important;
}

/* Log In — identified by WP menu item class on <li>, not href.
   WP-CLI sets --classes="nav-cta-login" on the Log In menu item.
   WP outputs this class on the <li>, so we target li.nav-cta-login a. */
.nav-cta-wrap .nav-cta-list li.nav-cta-login a {
  background-color: var(--nav-cta-login-bg);
  border: var(--nav-cta-login-border);
  color: var(--nav-cta-login-color) !important;
}

.nav-cta-wrap .nav-cta-list li.nav-cta-login a:hover {
  background-color: var(--nav-cta-login-hover-bg);
}

/* ============================================================
   NAVBAR FLEX INTEGRATION
   Makes .top-navbar a flex container so CTAs and social icons
   can be positioned right of the nav items.
   These selectors match Bootstrap 3 navbar structure used across
   all MMW brand sites. Adjust order values if structure differs.
   ============================================================ */
@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:
     20px = compact (CropLife default, frees right-side space)
     auto  = push-right (AGB default, classic Bootstrap layout)
     flex: 0 1 auto + min-width: 0 lets the UL shrink-to-content rather
     than retaining its block-default container width (caught on CEAg
     where the UL was inflating to 1388px despite ~581px of 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;
  }

  /* Social icons — after CTA wrap.
     Belt-and-suspenders centering: theme style.css sets
     `.header-top-icons { float: right; margin: 22px 0 0 0; }`
     globally (no media query). My selector has higher specificity
     (0,2,0 vs 0,1,0) and loads later, but on staging the cascade
     still loses — likely because Customizer Additional CSS adds
     padding-top:20px to nav links, making the navbar taller and
     amplifying any residual alignment offset.
     Adding !important on margin-top/-bottom and explicit
     align-self:center forces vertical centering regardless of
     what theme/Customizer CSS tries to apply.
     Note for AGB: .header-top-icons is mobile-only (carries the
     hidden-md hidden-lg classes), so this rule no-ops at desktop. */
  .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;
  }

  /* Social icon color + per-anchor flex centering.
     Each anchor wraps either an <i> (font-awesome) or an inline <svg>;
     making each anchor itself a flex container with align-items:center
     keeps the differently-shaped icons on the same baseline regardless
     of the parent's flex alignment. */
  .header-top-icons a {
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
  }

  /* Hide duplicate Subscribe + Log In from primary nav at desktop.
     :has() supported Chrome 105+, Safari 15.4+, Firefox 121+. */
  .top-navbar #header-nav > li:has(> a[href$="/subscribe/"]),
  .top-navbar #header-nav > li:has(> a[href*="/member-login/"]) {
    display: none;
  }
}

/* ============================================================
   DESKTOP LINK PADDING
   Tightens primary-nav link padding/font-size at the desktop
   breakpoint so logo + menu items + CTA pills all fit on one row
   inside the 1140px navbar container.

   Always included — required for layout fit on every MMW brand
   site. Also incidentally defeats any database-injected
   <style id="sccss"> rule that forces wider padding/font-size.
   The !important markers are required to win against theme-default
   link styling and any sccss override.
   ============================================================ */
@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 + Log In from primary nav on mobile too.
     The mobile CTA strip already shows them as pills — without this rule
     they appear twice (once as text in the drawer, once as pills below). */
  #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 every <li.item-mobile-inline-hidden>
     and re-appends the clone with class item-mobile-inline.
     Suppressing the clone here keeps the original visible. */
  #header-nav > li.item-mobile-inline {
    display: none;
  }

  /* Note: AGB does NOT include the
       .header-top-icons { display: none; }
     rule from CropLife's module — on AGB, .header-top-icons holds
     the mobile search button (with hidden-md hidden-lg classes
     so it shows only at xs/sm). Hiding it would break the mobile
     search affordance. */

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

  /* Mobile wrap shown only when drawer is open.
     Class toggled by theme JS — body.menu-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: 12px 15px;
  }

  /* 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 */
  body.menu-open .nav-cta-wrap--mobile .nav-cta-list {
    flex-direction: column;
    gap: 8px;
  }

  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: 12px 16px;
    font-size: 22px;
  }
}