/* =============================================================
   Hydroponic Research — Custom Mega Menu
   Vanilla CSS, no dependencies.
   Brand greens: #0F6E56 (deep) / #1D9E75 (bright) / #E1F5EE (tint)
   ============================================================= */

:root{
  --hr-green:#0F6E56;
  --hr-green-bright:#1D9E75;
  --hr-green-tint:#E1F5EE;
  --hr-ink:#1c1c1a;
  --hr-muted:#6b6b66;
  --hr-line:#e7e7e2;
  --hr-radius:10px;
  --hr-maxw:1200px;          /* match your site container width */
}

/* ---------- Bar ---------- */
.hr-nav{position:relative;background:#fff;border-bottom:1px solid var(--hr-line);font-family:inherit;z-index:1000;}
.hr-nav *{box-sizing:border-box;}
.hr-nav__inner{max-width:var(--hr-maxw);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:28px;height:72px;}
.hr-nav__logo{display:flex;align-items:center;flex-shrink:0;}
.hr-nav__logo img{display:block;height:auto;}

/* ---------- Menu list ---------- */
.hr-nav__menu{flex:1;}
.hr-nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;}
.hr-nav__item{position:static;}                 /* static so mega spans full width */
.hr-nav__link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:15px;font-weight:500;color:var(--hr-ink);
  background:none;border:0;cursor:pointer;
  padding:10px 14px;border-radius:8px;text-decoration:none;line-height:1;
  font-family:inherit;transition:color .15s,background .15s;
}
.hr-nav__link:hover,
.hr-nav__item:hover > .hr-nav__link,
.hr-nav__item:focus-within > .hr-nav__link{color:var(--hr-green-bright);}

.hr-caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s;}
.hr-nav__item:hover .hr-caret,
.hr-nav__item:focus-within .hr-caret{transform:rotate(-135deg);margin-top:3px;}

/* ---------- Utilities ---------- */
.hr-nav__utils{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.hr-nav__icon{font-size:14px;font-weight:500;color:var(--hr-ink);text-decoration:none;}
.hr-nav__icon:hover{color:var(--hr-green-bright);}
.hr-nav__cart{background:var(--hr-green);color:#fff;padding:8px 16px;border-radius:8px;}
.hr-nav__cart:hover{background:var(--hr-green-bright);color:#fff;}

/* ---------- Mega panel ---------- */
.hr-mega{
  position:absolute;left:0;right:0;top:100%;
  background:#fff;border-top:1px solid var(--hr-line);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .18s,transform .18s,visibility .18s;
  z-index:999;
}
.hr-nav__item:hover > .hr-mega,
.hr-nav__item:focus-within > .hr-mega,
.hr-mega.is-open{opacity:1;visibility:visible;transform:translateY(0);}

.hr-mega__grid{max-width:var(--hr-maxw);margin:0 auto;padding:28px 24px;display:grid;gap:28px;}
.hr-mega__grid--shop{grid-template-columns:1fr 1fr .95fr;}
.hr-mega__grid--commercial{grid-template-columns:1fr 1fr .95fr;}
.hr-mega__grid--learn{grid-template-columns:1fr 1fr 1fr;}

.hr-mega__heading{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--hr-muted);margin:0 0 14px;}

/* ---------- Product card ---------- */
.hr-card{display:flex;align-items:center;gap:12px;padding:9px;border:1px solid var(--hr-line);border-radius:var(--hr-radius);text-decoration:none;margin-bottom:9px;transition:border-color .15s,background .15s;}
.hr-card:hover{border-color:var(--hr-green-bright);background:var(--hr-green-tint);}
.hr-thumb{width:46px;height:50px;border-radius:8px;flex-shrink:0;background-color:var(--hr-green-tint);background-size:cover;background-position:center;}
.hr-card__text{display:flex;flex-direction:column;line-height:1.3;}
.hr-card__text strong{font-size:14px;font-weight:600;color:var(--hr-ink);}
.hr-card__text em{font-size:12px;font-style:normal;color:var(--hr-muted);}

/* Swap these background-image URLs for real product photos */
.hr-thumb--vegbloom{background-image:url('/wp-content/uploads/2021/01/vegbloom-dirty-25lb-packaging-600x600.jpg');}
.hr-thumb--dos{background-image:url('/wp-content/uploads/2021/01/dos-a-and-b-25lb-packaging-300x300.jpg');}
.hr-thumb--vbx{background-image:url('/wp-content/uploads/2021/04/vbx-25lb-packaging-600x600.jpg');}
.hr-thumb--basik{background-image:url('/wp-content/uploads/2021/04/vbx-25lb-packaging-600x600.jpg');}
.hr-thumb--phlo{background-image:url('/wp-content/uploads/2021/04/vbx-25lb-packaging-600x600.jpg');}
.hr-thumb--shine{background-image:url('/wp-content/uploads/2021/04/vbx-25lb-packaging-600x600.jpg');}

/* ---------- Plain text links (Commercial / Learn) ---------- */
.hr-link{display:block;font-size:14px;color:var(--hr-ink);text-decoration:none;padding:8px 0;border-bottom:1px solid transparent;transition:color .15s;}
.hr-link:hover{color:var(--hr-green-bright);}
.hr-link--all{color:var(--hr-green);font-weight:600;margin-top:4px;}

/* ---------- Feature tile ---------- */
.hr-feature{display:flex;flex-direction:column;border:1px solid var(--hr-line);border-radius:var(--hr-radius);overflow:hidden;text-decoration:none;margin-bottom:12px;transition:border-color .15s;}
.hr-feature:hover{border-color:var(--hr-green-bright);}
.hr-feature__img{height:78px;background:var(--hr-green-tint) center/cover no-repeat;}
.hr-feature__img--formula{/* background-image:url('/wp-content/uploads/.../formula.jpg'); */}
.hr-feature__body{padding:11px 13px;}
.hr-feature__body strong{display:block;font-size:14px;color:var(--hr-ink);margin-bottom:2px;}
.hr-feature__body em{font-size:12px;font-style:normal;color:var(--hr-muted);}

/* ---------- CTA block ---------- */
.hr-cta{display:block;background:var(--hr-green);border-radius:var(--hr-radius);padding:14px 16px;text-decoration:none;}
.hr-cta strong{display:block;font-size:15px;color:#fff;margin-bottom:4px;}
.hr-cta em{display:block;font-size:12px;font-style:normal;color:#9FE1CB;line-height:1.4;margin-bottom:8px;}
.hr-cta__link{font-size:13px;font-weight:600;color:#fff;}
.hr-cta--tall{height:100%;display:flex;flex-direction:column;justify-content:flex-end;}
.hr-cta__img{display:block;height:96px;border-radius:8px;margin:-2px 0 12px;background:#0b5643 center/cover no-repeat;}
.hr-cta__img--facility{/* background-image:url('/wp-content/uploads/.../facility.jpg'); */}

/* ---------- Mobile ---------- */
.hr-nav__toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:0;cursor:pointer;margin-left:auto;}
.hr-nav__toggle span{display:block;width:24px;height:2px;background:var(--hr-ink);transition:.25s;}
.hr-nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hr-nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hr-nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1024px){
  .hr-nav__toggle{display:flex;}
  .hr-nav__menu{
    position:absolute;top:100%;left:0;right:0;background:#fff;
    border-top:1px solid var(--hr-line);max-height:0;overflow:hidden;
    transition:max-height .3s ease;
  }
  .hr-nav__menu.is-open{max-height:85vh;overflow-y:auto;box-shadow:0 18px 40px -20px rgba(0,0,0,.25);}
  .hr-nav__list{flex-direction:column;align-items:stretch;gap:0;padding:8px 0;}
  .hr-nav__item{border-bottom:1px solid var(--hr-line);}
  .hr-nav__link{width:100%;justify-content:space-between;padding:16px 24px;border-radius:0;font-size:16px;}
  .hr-caret{transform:rotate(45deg);}
  .hr-nav__item.is-open .hr-caret{transform:rotate(-135deg);}

  /* Accordion panels on mobile */
  .hr-mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border-top:0;display:none;background:var(--hr-green-tint);}
  .hr-nav__item.is-open .hr-mega{display:block;}
  .hr-mega__grid{grid-template-columns:1fr!important;padding:8px 24px 20px;gap:18px;}

  .hr-nav__utils{display:none;}   /* or move into the mobile panel if preferred */
}