/* ==========================================================================
   NIBR - HCA :: Animated Menu Icons
   Font Awesome 4.7 icons + motion for the main nav and footer menus.
   Brand tokens: maroon #8C0000 | gold #EDC77E | footer blue #00549e
   ========================================================================== */

:root {
  --mi-maroon: #8C0000;
  --mi-gold: #EDC77E;
  --mi-gold-soft: rgba(237, 199, 126, .18);
  --mi-blue: #00549e;
  --mi-white: #ffffff;
  --mi-ease: cubic-bezier(.16, 1, .3, 1);
  --mi-ease-out: cubic-bezier(.22, .61, .36, 1);
  --mi-dur: .32s;
}

/* --------------------------------------------------------------------------
   1. Shared primitives
   -------------------------------------------------------------------------- */

.mi-ico {
  display: inline-block;
  font-family: 'FontAwesome';
  line-height: 1;
  text-align: center;
  transform-origin: 50% 50%;
}

.mi-txt {
  display: inline-block;
  position: relative;
}

/* Animated underline that wipes in from the left on hover / active */
.mi-txt::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--mi-gold), rgba(237, 199, 126, .35));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .38s var(--mi-ease-out);
}

/* --------------------------------------------------------------------------
   2. Main navigation (desktop)
   -------------------------------------------------------------------------- */

header nav.menu ul li.mi-item {
  position: relative;
}

header nav.menu ul li a.mi-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
  transition: color .25s ease, transform .3s var(--mi-ease);
}

header nav.menu ul li a.mi-link .mi-ico {
  font-size: 15px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  color: var(--mi-gold);
  background: var(--mi-gold-soft);
  border: 1px solid rgba(237, 199, 126, .32);
  border-radius: 50%;
  transition: transform .42s var(--mi-ease),
              background-color .3s ease,
              border-color .3s ease,
              box-shadow .3s ease,
              color .3s ease;
}

/* Hover: icon pops, spins a touch and lights up; link nudges up */
header nav.menu ul li a.mi-link:hover .mi-ico,
header nav.menu ul li a.mi-link:focus-visible .mi-ico {
  transform: translateY(-3px) scale(1.14) rotate(-8deg);
  background: var(--mi-gold);
  border-color: var(--mi-gold);
  color: var(--mi-maroon);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

header nav.menu ul li a.mi-link:hover .mi-txt,
header nav.menu ul li a.mi-link:focus-visible .mi-txt {
  transform: translateY(-2px);
}

header nav.menu ul li a.mi-link:hover .mi-txt::after,
header nav.menu ul li a.mi-link:focus-visible .mi-txt::after,
header nav.menu ul li.is-active a.mi-link .mi-txt::after {
  transform: scaleX(1);
}

/* Active page: persistent underline and a clear, static selected state. */
header nav.menu ul li.is-active a.mi-link .mi-ico {
  background: var(--mi-gold);
  border-color: var(--mi-gold);
  color: var(--mi-maroon);
  box-shadow: 0 0 0 3px rgba(237, 199, 126, .2);
}

/* First-paint reveal: icons fade + zoom in once the header is ready */
header nav.menu ul li.mi-item > a.mi-link {
  animation: mi-item-in .5s var(--mi-ease-out) backwards;
}

header nav.menu ul li.mi-item:nth-child(1) > a.mi-link { animation-delay: .05s; }
header nav.menu ul li.mi-item:nth-child(2) > a.mi-link { animation-delay: .10s; }
header nav.menu ul li.mi-item:nth-child(3) > a.mi-link { animation-delay: .15s; }
header nav.menu ul li.mi-item:nth-child(4) > a.mi-link { animation-delay: .20s; }
header nav.menu ul li.mi-item:nth-child(5) > a.mi-link { animation-delay: .25s; }
header nav.menu ul li.mi-item:nth-child(6) > a.mi-link { animation-delay: .30s; }
header nav.menu ul li.mi-item:nth-child(7) > a.mi-link { animation-delay: .35s; }
header nav.menu ul li.mi-item:nth-child(8) > a.mi-link { animation-delay: .40s; }
header nav.menu ul li.mi-item:nth-child(n+9) > a.mi-link { animation-delay: .45s; }

@keyframes mi-item-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Replay the entrance cascade (toggled by menu-icons.js) */
header nav.menu.mi-replay ul li.mi-item > a.mi-link {
  animation: none;
}

header nav.menu.mi-replay ul li.mi-item > a.mi-link {
  animation-name: mi-item-in;
}

/* --------------------------------------------------------------------------
   3. Mobile drawer (<= 980px) — staggered slide-in
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 980px) {
  header nav.menu ul li.mi-item {
    padding-left: 26px;
    border-left: 2px solid transparent;
    transition: border-color .3s ease, background-color .3s ease;
  }

  header nav.menu ul li.mi-item:hover,
  header nav.menu ul li.is-active {
    border-left-color: var(--mi-gold);
    background: rgba(0, 0, 0, .16);
  }

  header nav.menu ul li a.mi-link {
    width: 100%;
    padding: 2px 0;
    font-size: 15px;
  }

  header nav.menu ul li a.mi-link .mi-ico {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
  }

  header nav.menu ul li a.mi-link:hover .mi-ico,
  header nav.menu ul li a.mi-link:focus-visible .mi-ico {
    transform: scale(1.1) rotate(-8deg);
  }

  /* Closed state: each row rests off-canvas to the left */
  header nav.menu ul li.mi-item {
    opacity: 0;
    transform: translateX(-26px);
    transition: opacity .34s var(--mi-ease-out),
                transform .34s var(--mi-ease-out),
                border-color .3s ease,
                background-color .3s ease;
  }

  /* Open state: cascade rows in one after another */
  header nav.menu.open ul li.mi-item {
    opacity: 1;
    transform: translateX(0);
  }

  header nav.menu.open ul li.mi-item:nth-child(1) { transition-delay: .06s; }
  header nav.menu.open ul li.mi-item:nth-child(2) { transition-delay: .11s; }
  header nav.menu.open ul li.mi-item:nth-child(3) { transition-delay: .16s; }
  header nav.menu.open ul li.mi-item:nth-child(4) { transition-delay: .21s; }
  header nav.menu.open ul li.mi-item:nth-child(5) { transition-delay: .26s; }
  header nav.menu.open ul li.mi-item:nth-child(6) { transition-delay: .31s; }
  header nav.menu.open ul li.mi-item:nth-child(7) { transition-delay: .36s; }
  header nav.menu.open ul li.mi-item:nth-child(8) { transition-delay: .41s; }
  header nav.menu.open ul li.mi-item:nth-child(n+9) { transition-delay: .46s; }
}

/* --------------------------------------------------------------------------
   4. Inline icons inside buttons (Log In / Sign Up)
   -------------------------------------------------------------------------- */

.mi-ico-inline {
  font-family: 'FontAwesome';
  font-style: normal;
  font-size: .9em;
  line-height: 1;
  margin-right: 8px;
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform .4s var(--mi-ease);
}

.top-link .btn:hover .mi-ico-inline,
.top-link .btn:focus-visible .mi-ico-inline,
.top-link a:hover .mi-ico-inline {
  transform: translateY(-2px) scale(1.18) rotate(-10deg);
}

/* --------------------------------------------------------------------------
   5. Top bar actions (login / cart)
   -------------------------------------------------------------------------- */

/* The theme absolutely positions the top-bar column
   (style.css: .top-3box-holder .col-md-3 { position: absolute; right: 0 })
   on top of a full-width `nav.menu > ul` that occupies the same vertical band.
   The ul has a transparent background, so lifting the top bar above it changes
   nothing visually -- but without this the ul swallows clicks on the
   log-in button and the cart, leaving them only partly clickable. */
.top-3box-holder .col-md-3 {
  z-index: 3;
}

.top-link .mi-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 8px 4px;
  color: var(--mi-gold);
  background: var(--mi-gold-soft);
  border: 1px solid rgba(237, 199, 126, .32);
  border-radius: 50%;
  transition: transform .42s var(--mi-ease),
              background-color .3s ease,
              color .3s ease,
              box-shadow .3s ease;
}

.top-link .mi-action .mi-ico {
  font-size: 15px;
}

.top-link .mi-action:hover,
.top-link .mi-action:focus-visible {
  transform: translateY(-3px) rotate(-8deg);
  background: var(--mi-gold);
  color: var(--mi-maroon);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

.top-link .mi-action.is-bumped {
  animation: mi-bump .55s var(--mi-ease);
}

@keyframes mi-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28) rotate(8deg); }
  60%  { transform: scale(.94) rotate(-5deg); }
  100% { transform: scale(1) rotate(0); }
}

/* --------------------------------------------------------------------------
   6. Footer menus (Quick Links / Policies / Support)
   -------------------------------------------------------------------------- */

/* The theme already sets footer link colours with !important
   (.footer-first-part li a / :hover), so this block only adds motion. */
.mainfooter-wrap ul li.mi-item a.mi-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  transition: transform .3s var(--mi-ease);
}

.mainfooter-wrap ul li.mi-item a.mi-link .mi-ico {
  font-size: 13px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  flex: 0 0 24px;
  color: var(--mi-gold);
  background: rgba(237, 199, 126, .12);
  border-radius: 50%;
  opacity: .82;
  transform: translateX(-4px);
  transition: transform .38s var(--mi-ease),
              opacity .3s ease,
              background-color .3s ease,
              color .3s ease;
}

.mainfooter-wrap ul li.mi-item a.mi-link:hover,
.mainfooter-wrap ul li.mi-item a.mi-link:focus-visible,
.mainfooter-wrap ul li.mi-item a.mi-link:focus {
  transform: translateX(5px);
}

.mainfooter-wrap ul li.mi-item a.mi-link:hover .mi-ico,
.mainfooter-wrap ul li.mi-item a.mi-link:focus-visible .mi-ico,
.mainfooter-wrap ul li.mi-item a.mi-link:focus .mi-ico {
  transform: translateX(0) scale(1.16) rotate(-8deg);
  opacity: 1;
  background: var(--mi-gold);
  color: var(--mi-blue);
}

/* One concise entrance keeps the footer lively without a permanent loop. */
.mainfooter-wrap ul li.mi-item > a.mi-link {
  animation: mi-footer-in .42s var(--mi-ease-out) both;
}

.mainfooter-wrap ul li.mi-item:nth-child(2) > a.mi-link { animation-delay: .04s; }
.mainfooter-wrap ul li.mi-item:nth-child(3) > a.mi-link { animation-delay: .08s; }
.mainfooter-wrap ul li.mi-item:nth-child(4) > a.mi-link { animation-delay: .12s; }
.mainfooter-wrap ul li.mi-item:nth-child(n+5) > a.mi-link { animation-delay: .16s; }

@keyframes mi-footer-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   7. Illustrated footer used by the newer HTML pages
   -------------------------------------------------------------------------- */

.footer-section .footer-nav a.mi-footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 4px;
  padding: 2px 0;
  text-decoration: none;
  transition: transform .3s var(--mi-ease), color .25s ease;
  animation: mi-footer-in .42s var(--mi-ease-out) both;
}

.footer-section .footer-nav a.mi-footer-link:nth-of-type(2) { animation-delay: .05s; }
.footer-section .footer-nav a.mi-footer-link:nth-of-type(3) { animation-delay: .10s; }
.footer-section .footer-nav a.mi-footer-link:nth-of-type(4) { animation-delay: .15s; }
.footer-section .footer-nav a.mi-footer-link:nth-of-type(n+5) { animation-delay: .20s; }

.footer-section .footer-nav a.mi-footer-link .mi-ico {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 13px;
  color: var(--mi-maroon);
  background: var(--mi-gold);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(72, 23, 16, .18);
  transition: transform .38s var(--mi-ease),
              box-shadow .3s ease,
              background-color .3s ease,
              color .3s ease;
}

.footer-section .footer-nav a.mi-footer-link .mi-footer-text {
  margin-bottom: 0;
  transition: opacity .25s ease;
}

.footer-section .footer-nav a.mi-footer-link:hover,
.footer-section .footer-nav a.mi-footer-link:focus-visible {
  transform: translateX(5px);
}

.footer-section .footer-nav a.mi-footer-link:hover .mi-ico,
.footer-section .footer-nav a.mi-footer-link:focus-visible .mi-ico,
.footer-section .footer-nav a.mi-footer-link[aria-current="page"] .mi-ico {
  transform: rotate(-9deg) scale(1.12);
  color: var(--mi-gold);
  background: var(--mi-maroon);
  box-shadow: 0 7px 16px rgba(72, 23, 16, .28);
}

.footer-section .footer-nav a.mi-footer-link:hover .mi-footer-text,
.footer-section .footer-nav a.mi-footer-link:focus-visible .mi-footer-text {
  opacity: .82;
}

/* --------------------------------------------------------------------------
   8. Social icons
   -------------------------------------------------------------------------- */

ul.footer-social-icons li.mi-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  transition: transform .42s var(--mi-ease),
              background-color .3s ease,
              box-shadow .3s ease;
}

ul.footer-social-icons li.mi-item a .mi-ico {
  font-size: 16px;
  color: var(--mi-white);
  transition: color .3s ease, transform .42s var(--mi-ease);
}

ul.footer-social-icons li.mi-item a:hover,
ul.footer-social-icons li.mi-item a:focus-visible {
  transform: translateY(-4px) rotate(8deg);
  background: var(--mi-gold);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .3);
}

ul.footer-social-icons li.mi-item a:hover .mi-ico,
ul.footer-social-icons li.mi-item a:focus-visible .mi-ico {
  color: var(--mi-blue);
}

/* --------------------------------------------------------------------------
   9. Back-to-top
   -------------------------------------------------------------------------- */

.back-to-top .mi-ico {
  transition: transform .4s var(--mi-ease);
}

.back-to-top:hover .mi-ico {
  transform: translateY(-4px) scale(1.2);
}

/* --------------------------------------------------------------------------
   10. Accessibility
   -------------------------------------------------------------------------- */

.mi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

header nav.menu ul li a.mi-link:focus-visible,
.mainfooter-wrap ul li a.mi-link:focus-visible,
.footer-section .footer-nav a.mi-footer-link:focus-visible,
.top-link .mi-action:focus-visible,
ul.footer-social-icons li a:focus-visible,
.back-to-top:focus-visible {
  outline: 2px solid var(--mi-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  header nav.menu ul li.mi-item > a.mi-link,
  header nav.menu ul li a.mi-link .mi-ico,
  .top-link .mi-action,
  .top-link .mi-action.is-bumped,
  .mi-ico-inline,
  .top-link .btn:hover .mi-ico-inline,
  .mainfooter-wrap ul li.mi-item a.mi-link .mi-ico,
  .mainfooter-wrap ul li.mi-item a.mi-link,
  .footer-section .footer-nav a.mi-footer-link,
  .footer-section .footer-nav a.mi-footer-link .mi-ico,
  ul.footer-social-icons li.mi-item a,
  ul.footer-social-icons li.mi-item a .mi-ico,
  .back-to-top .mi-ico {
    animation: none !important;
    transition-duration: .01ms !important;
    transform: none !important;
  }

  header nav.menu ul li.mi-item {
    opacity: 1;
    transform: none;
  }

  header nav.menu ul li a.mi-link .mi-txt::after {
    transition: none;
  }
}