/* ==========================================================================
   JDR NAV FIXES — upload to public_html/css/jdr-nav.css
   Load AFTER css/style.css.

   This file deliberately sets NO colours on the top bar or navbar.
   Your header keeps its own classes (.wrap, .ftco_navbar, .ftco-navbar-light,
   .navbar-dark, .bg-dark), so every colour, the transparent-over-hero look and
   the scroll behaviour still come from YOUR css/style.css and js/main.js.

   What it fixes:
     1. Phone numbers and email: larger and bolder (colour unchanged)
     2. Logo: fixed height instead of width="40%" (which ate the navbar)
     3. Dropdowns: open directly under the menu, not pushed down the page
        (replaces the truncated .dropdown-menu rule that ended "box-shadow:")
     4. Services: a wide mega menu instead of one long list
   ========================================================================== */

/* ---- 1. contact details: highlighted pills on the theme gradient ------- */
.wrap{padding:8px 0}
.wrap .jdr-contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0}
.wrap .jdr-contact .jdr-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:30px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);
  color:#fff !important;font-size:15px !important;font-weight:700 !important;line-height:1.2;
  letter-spacing:.2px;white-space:nowrap;text-decoration:none;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.wrap .jdr-contact .jdr-pill .fa{font-size:15px;color:#fff}
.wrap .jdr-contact .jdr-pill:hover,
.wrap .jdr-contact .jdr-pill:focus{background:#fff;color:#00bd56 !important;transform:translateY(-1px)}
.wrap .jdr-contact .jdr-pill:hover .fa{color:#00bd56}
.wrap .jdr-contact .jdr-pill-mail{font-weight:600 !important}
.wrap .jdr-contact .jdr-pill-wa{background:#fff;color:#128c4a !important;border-color:#fff}
.wrap .jdr-contact .jdr-pill-wa .fa{color:#25d366;font-size:17px}
.wrap .jdr-contact .jdr-pill-wa:hover{background:#25d366;color:#fff !important;border-color:#25d366}
.wrap .jdr-contact .jdr-pill-wa:hover .fa{color:#fff}
.wrap .social-media p a{margin-left:6px}
@media (max-width:991px){
  .wrap .jdr-contact{justify-content:center;width:100%}
}
@media (max-width:575px){
  .wrap{padding:8px 0 6px}
  .wrap .jdr-contact{gap:6px}
  .wrap .jdr-contact .jdr-pill{padding:6px 12px;font-size:13.5px !important}
  .wrap .jdr-contact .jdr-pill-mail{display:none}        /* email stays in footer + bottom bar area */
}

/* ---- 2b. compact menu: theme gives each link 2.3rem top+bottom padding,
         which is what makes the navbar so tall. Reduce on desktop only. ----- */
@media (min-width:992px){
  .jdr-nav.ftco-navbar-light .navbar-nav > .nav-item > .nav-link{
    padding-top:1.5rem;padding-bottom:1.5rem;padding-left:14px;padding-right:14px;font-size:13.5px}
  .jdr-nav .dropdown-toggle::after{vertical-align:.18em;margin-left:.3em}
}
@media (min-width:992px) and (max-width:1199px){
  .jdr-nav.ftco-navbar-light .navbar-nav > .nav-item > .nav-link{padding-left:10px;padding-right:10px;font-size:12.5px}
}

/* ---- 2. logo ------------------------------------------------------------ */
.jdr-nav .navbar-brand{padding-top:6px;padding-bottom:6px;margin-right:12px}
.jdr-nav .navbar-brand img{height:54px;width:auto;max-width:230px;display:block}
@media (max-width:991px){.jdr-nav .navbar-brand img{height:46px}}

/* ---- 3. dropdowns (Bootstrap's own .dropdown-menu, positioned properly) - */
@media (min-width:992px){
  .jdr-nav .navbar-nav{align-items:stretch}
  .jdr-nav .navbar-nav > .nav-item{display:flex;align-items:center}
  .jdr-nav .jdr-dd{position:relative}
  .jdr-nav .jdr-dd > .dropdown-menu{
    position:absolute;top:100%;left:0;margin-top:0;
    min-width:240px;padding:8px 0;
    border:1px solid #e5e5e5;border-radius:4px;
    box-shadow:0 14px 34px rgba(0,0,0,.15);
    z-index:1050;
  }
  /* hover bridge so the pointer never falls into a gap */
  .jdr-nav .jdr-dd > .dropdown-menu::before{
    content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
}
.jdr-nav .jdr-dd > .dropdown-menu .dropdown-item{
  font-size:13px;padding:9px 20px;white-space:normal;line-height:1.4}

/* ---- 4. Services mega menu ---------------------------------------------- */
@media (min-width:992px){
  .jdr-nav > .container{position:relative}
  .jdr-nav .jdr-dd-mega{position:static}          /* anchor to the container */
  .jdr-nav .jdr-dd-mega > .jdr-mega{
    left:15px;right:15px;width:auto;padding:24px 26px 18px;
  }
}
.jdr-mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 26px}
.jdr-mega-col h6{
  margin:0 0 8px;padding-bottom:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#000;position:relative;
}
.jdr-mega-col h6::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;background:#00bd56}
.jdr-mega-col h6 + ul{margin-bottom:16px}
.jdr-mega-col ul{list-style:none;margin:0;padding:0}
.jdr-nav .jdr-dd > .jdr-mega .jdr-mega-col .dropdown-item{padding:5px 0;font-size:13.5px;background:none}
.jdr-nav.ftco-navbar-light .jdr-mega .jdr-mega-col .dropdown-item:hover,
.jdr-nav.ftco-navbar-light .jdr-mega .jdr-mega-col .dropdown-item:focus{background:none;color:#00bd56}
.jdr-mega-foot{
  margin-top:14px;padding-top:14px;border-top:1px solid #e5e5e5;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:#333;
}
.jdr-mega-foot .btn{white-space:nowrap}

/* ---- mobile: dropdowns become simple accordions inside the collapse -----
   Your style.css forces ".dropdown-menu{display:block !important}" below 992px,
   which would show all 55 service links permanently. This restores tap-to-open. */
@media (max-width:991.98px){
  .jdr-nav.ftco-navbar-light .navbar-nav > .nav-item.jdr-dd > .dropdown-menu{display:none !important}
  .jdr-nav.ftco-navbar-light .navbar-nav > .nav-item.jdr-dd.show > .dropdown-menu{display:block !important}
  .jdr-nav.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover{color:#00bd56}
  .jdr-nav .jdr-dd > .dropdown-menu{
    position:static;float:none;border:0;box-shadow:none;margin:0;padding:4px 0 10px 12px;
    background:transparent;
  }
  .jdr-mega-grid{grid-template-columns:1fr}
  .jdr-mega-col h6{color:inherit;border-color:rgba(127,127,127,.3);margin-top:10px}
  .jdr-nav .jdr-dd > .dropdown-menu .dropdown-item{color:inherit;padding:8px 0}
  .jdr-mega-foot{display:none}
}

/* keyboard focus */
.jdr-nav a:focus-visible,.wrap a:focus-visible{outline:3px solid #00bd56;outline-offset:2px}

/* ---- 5. footer tidy (bugs in the existing live footer) -------------------
   The Services column uses .block-21, a theme block meant for blog thumbnails
   that reserves 100px beside the text - which is why "Product Registration"
   breaks onto two lines. The link lists also never had their bullets reset. */
.footer .block-21 .text{width:100%}
.footer .footer-links{list-style:none;padding-left:0;margin-bottom:0}
.footer .footer-links li{margin-bottom:4px}
.footer .footer-heading{margin-bottom:24px}

/* theme rule ".wrap .phone span{color:#fff}" also hits the text inside the pills;
   keep pill text readable in every state */
.wrap .jdr-contact .jdr-pill span{color:inherit !important}
.wrap .jdr-contact .jdr-pill-wa span:not(.fa){color:#128c4a !important}
.wrap .jdr-contact .jdr-pill-wa:hover span:not(.fa){color:#fff !important}
.wrap .jdr-contact .jdr-pill:hover span:not(.fa){color:#00bd56 !important}
.wrap .jdr-contact .jdr-pill-wa:hover span{color:#fff !important}

/* =====================================================================
   v3 — correct JDR logo + dropdowns tight under their menu item
   ===================================================================== */

/* logo: the JDR Insecticides mark is detailed, so it needs more height */
.jdr-nav .navbar-brand{padding-top:6px;padding-bottom:6px}
.jdr-nav .navbar-brand img{height:72px;width:auto;max-width:260px}
@media (max-width:991px){.jdr-nav .navbar-brand img{height:54px}}

@media (min-width:992px){
  /* items no longer stretch to the full navbar height, so a dropdown
     opens directly under its own link rather than at the navbar's edge */
  .jdr-nav .navbar-nav{align-items:center}
  .jdr-nav .navbar-nav > .nav-item{align-self:center}
  .jdr-nav.ftco-navbar-light .navbar-nav > .nav-item > .nav-link{padding-top:.85rem;padding-bottom:.85rem}

  .jdr-nav .jdr-dd > .dropdown-menu{
    top:100%;margin-top:0;padding:6px 0;
    border:1px solid #e8ecef;border-top:3px solid #00bd56;border-radius:0 0 6px 6px;
    box-shadow:0 16px 32px -10px rgba(0,0,0,.22);
  }
  .jdr-nav .jdr-dd > .dropdown-menu::before{top:-10px;height:10px}      /* hover bridge */
  .jdr-nav .jdr-dd > .dropdown-menu .dropdown-item{padding:8px 20px}

  /* mega menu: spans the container; its top is set by jdr-nav.js to sit
     right under the Services link (falls back to the container edge) */
  .jdr-nav .jdr-dd-mega > .jdr-mega{top:100%;padding:18px 26px 16px}
}

/* theme sets ".ftco-navbar-light .navbar-nav > .nav-item .dropdown-menu{border:none}"
   (4 classes) - these selectors outrank it so the panel shows its green top edge */
@media (min-width:992px){
  .jdr-nav.ftco-navbar-light .navbar-nav > .nav-item.jdr-dd > .dropdown-menu{
    border:1px solid #e8ecef;border-top:3px solid #00bd56;border-radius:0 0 6px 6px;
    box-shadow:0 16px 32px -10px rgba(0,0,0,.22);margin-top:0;
  }
}