/*
 * Premium header refinements.
 * Loaded after app.css / pharmacy-theme.css. Everything is scoped to
 * html:not(.js-ia-accessibility-active) so the high-contrast accessibility
 * mode keeps its own colours untouched.
 */

:root {
  --ahorn-green-900: #0a4a26;
  --ahorn-green-700: #0f6e37;
  --ahorn-green-600: #138043;
  --ahorn-green-50: #eef7f0;
  --ahorn-ink: #16201b;
  --ahorn-ink-soft: #3a4640;
  --ahorn-hairline: rgba(15, 40, 25, .08);
  --ahorn-ease: cubic-bezier(.2, .7, .2, 1);

  --header-logo-width-desktop: 160px;
  --header-logo-width-mobile: 140px;
}

/* ---------- Top bar ---------- */

html:not(.js-ia-accessibility-active) .c-top-bar {
  --top-bar-color: rgba(255, 255, 255, .92);
  background: linear-gradient(90deg, var(--ahorn-green-900) 0%, var(--ahorn-green-700) 55%, var(--ahorn-green-600) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html:not(.js-ia-accessibility-active) .c-top-bar .c-top-bar__body-col .ia-contact-info-items .ia-contact-info-item * ,
html:not(.js-ia-accessibility-active) .c-top-bar .c-top-bar__body-col p {
  letter-spacing: .02em;
}

html:not(.js-ia-accessibility-active) .c-top-bar .ia-contact-info-item__icon {
  opacity: .8;
}

html:not(.js-ia-accessibility-active) .c-top-bar .ia-contact-info-items a {
  transition: opacity .2s ease;
}

html:not(.js-ia-accessibility-active) .c-top-bar .ia-contact-info-items a:hover {
  opacity: .75;
}

/* soft fade on the edges of the scrolling contact strip */
.c-top-bar__body-col__inner {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

html:not(.js-ia-accessibility-active) .c-top-bar .c-ia-social-icons__item {
  opacity: .9;
  transition: opacity .2s ease, transform .2s var(--ahorn-ease);
}

html:not(.js-ia-accessibility-active) .c-top-bar .c-ia-social-icons__item:hover {
  opacity: 1;
  transform: translateY(-1px);
}

/* opening-hours status as a pill */
html:not(.js-ia-accessibility-active) .c-top-bar__body-col__working-hours {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 5px 14px;
}

/* ---------- Header shell ---------- */

html:not(.js-ia-accessibility-active) .c-header {
  border-bottom: 1px solid var(--ahorn-hairline);
  box-shadow: none;
  padding: 21px 0;
}

/* Frosted glass on desktop only: backdrop-filter turns the header into the
   containing block for fixed children, which would trap the mobile menu panel. */
@media (min-width: 1024px) {
  html:not(.js-ia-accessibility-active) .c-header {
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }
}

/* the product search web component is not loaded on this site; drop its empty row */
.c-header__bottom:has(> ia-product-search-bar:not(:defined)) {
  display: none;
}

/* ---------- Logo ---------- */
/* The logo file is a square with the artwork in the middle band, so crop it
   instead of letting it shrink to a third of the available space. */

.c-header__top__logo .logo {
  display: block;
  transition: opacity .2s ease;
}

.c-header__top__logo .logo:hover {
  opacity: .85;
}

.c-header__top__logo img {
  /* the JPEG has a white background; multiply lets the frosted header show through */
  mix-blend-mode: multiply;
  height: 66px;
  object-fit: cover;
  object-position: 0 58.5%;
  width: var(--header-logo-width-desktop);
}

@media (max-width: 1023.98px) {
  .c-header__top__logo img {
    height: 56px;
    width: var(--header-logo-width-mobile);
  }
}

/* ---------- Desktop navigation ---------- */

@media (min-width: 1024px) {
  html:not(.js-ia-accessibility-active) .nav--header {
    background: transparent;
  }

  html:not(.js-ia-accessibility-active) .nav--header > .menu-item > a {
    color: var(--ahorn-ink);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 8px 0;
    transition: color .25s ease;
  }

  html:not(.js-ia-accessibility-active) .nav--header > .menu-item > a::before {
    background: var(--ahorn-green-600);
    border-radius: 2px;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: transform .35s var(--ahorn-ease);
  }

  html:not(.js-ia-accessibility-active) .nav--header > .menu-item:hover > a,
  html:not(.js-ia-accessibility-active) .nav--header > .menu-item > a:focus-visible {
    color: var(--ahorn-green-700);
  }

  html:not(.js-ia-accessibility-active) .nav--header > .menu-item:hover > a::before,
  html:not(.js-ia-accessibility-active) .nav--header > .menu-item > a:focus-visible::before {
    transform: scaleX(1);
  }

  /* keep the theme's active-page marker but match the new underline */
  html:not(.js-ia-accessibility-active) .nav--header--active-links-style-default .menu-item:nth-child(1 of .current-menu-item) > a::after {
    background-color: var(--ahorn-green-600);
    border-radius: 2px;
    height: 2px;
  }

  .nav--header .menu-item__dropdown-trigger {
    transition: transform .3s var(--ahorn-ease);
  }

  .nav--header .menu-item-has-children:hover .menu-item__dropdown-trigger {
    transform: rotate(180deg);
  }

  /* ---------- Dropdown ---------- */

  html:not(.js-ia-accessibility-active) .nav--header .sub-menu {
    background: #fff;
    border: 1px solid var(--ahorn-hairline);
    border-radius: 14px;
    box-shadow: 0 24px 48px -16px rgba(15, 40, 25, .28), 0 4px 12px rgba(15, 40, 25, .06);
    margin-top: 12px;
    min-width: 230px;
    padding: 8px;
  }

  /* invisible bridge so the menu stays open while the pointer crosses the gap */
  .nav--header .sub-menu::before {
    content: "";
    height: 14px;
    left: 0;
    position: absolute;
    right: 0;
    top: -14px;
  }

  .nav--header .menu-item-has-children:hover > .sub-menu {
    animation: ahorn-dropdown-in .22s var(--ahorn-ease) both;
  }

  html:not(.js-ia-accessibility-active) .nav--header .sub-menu .menu-item a {
    border-radius: 10px;
    color: var(--ahorn-ink-soft);
    font-size: .9rem;
    font-weight: 500;
    padding: 10px 14px;
    transition: background-color .2s ease, color .2s ease, padding-left .25s var(--ahorn-ease);
  }

  html:not(.js-ia-accessibility-active) .nav--header .sub-menu .menu-item a:hover {
    background: var(--ahorn-green-50);
    color: var(--ahorn-green-700);
    padding-left: 18px;
  }
}

@keyframes ahorn-dropdown-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Right-hand icons ---------- */

html:not(.js-ia-accessibility-active) .c-header__top__right .c-ia-accessibility {
  align-items: center;
  background: #f2f6f3;
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  transition: background-color .2s ease, transform .2s var(--ahorn-ease);
  width: 40px;
}

html:not(.js-ia-accessibility-active) .c-header__top__right .c-ia-accessibility:hover {
  background: #e3eee6;
  transform: translateY(-1px);
}

/* the open mobile menu panel overlaps the lower half of the circle */
html:not(.js-ia-accessibility-active) .body--menu-opened .c-header__top__right .c-ia-accessibility {
  background: transparent;
}

.c-menu-hamburger-mobile__wrapper span {
  border-radius: 2px;
}

/* ---------- Mobile menu ---------- */

@media (max-width: 1023.98px) {
  html:not(.js-ia-accessibility-active) .nav--header > .menu-item {
    border-bottom: 1px solid var(--ahorn-hairline);
    padding-bottom: var(--main-menu-gap-mobile);
  }

  html:not(.js-ia-accessibility-active) .nav--header > .menu-item > a {
    color: var(--ahorn-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-header *,
  .c-header *::before {
    animation: none !important;
    transition: none !important;
  }
}