/* =========================================================
   DAISY'S SIGNATURE ICON NAVIGATION
========================================================= */

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(250,248,246,.91);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid rgba(139,113,133,.12);
  box-shadow:0 10px 34px rgba(84,62,76,.055);
}

.header-inner{
  width:min(1680px,calc(100% - 40px));
  min-height:112px;
  margin:0 auto;
  display:grid;
  grid-template-columns:132px minmax(0,1fr) 52px;
  align-items:center;
  gap:18px;
}

.brand-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.brand-logo img{
  width:112px;
  height:auto;
  max-width:112px;
  max-height:88px;
  object-fit:contain;
  transition:transform 280ms ease;
}

.brand-logo:hover img{
  transform:translateY(-2px) scale(1.025);
}

.main-nav{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(8,minmax(92px,1fr));
  align-items:stretch;
  gap:18px;
  padding-left:18px;
  padding-right:8px;
}

.nav-tile{
  position:relative;
  min-width:0;
  min-height:82px;
  padding:8px 5px 7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  overflow:hidden;
  color:#514a4f;
  text-align:center;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
  transition:
    color 240ms ease,
    background 240ms ease,
    border-color 240ms ease,
    box-shadow 240ms ease,
    transform 240ms ease;
}

.nav-tile::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:28px;
  height:2px;
  border-radius:999px;
  background:#8b7185;
  opacity:0;
  transform:translateX(-50%) scaleX(.35);
  transition:opacity 240ms ease,transform 240ms ease;
}

.nav-tile__icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  transition:transform 260ms cubic-bezier(.2,.8,.2,1);
}

.nav-tile__icon img{
  width:100%;
  height:100%;
  max-width:50px;
  max-height:50px;
  display:block;
  object-fit:contain;
  opacity:.92;
  filter:
    brightness(0)
    saturate(100%)
    invert(41%)
    sepia(6%)
    saturate(378%)
    hue-rotate(281deg)
    brightness(92%)
    contrast(88%);
  transition:opacity 240ms ease,filter 240ms ease,transform 240ms ease;
}

.nav-tile__label{
  max-width:100%;
  overflow:hidden;
  color:currentColor;
  font-family:"Poppins",sans-serif;
  font-size:.74rem;
  font-weight:600;
  line-height:1.15;
  letter-spacing:.01em;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.nav-tile:hover,
.nav-tile:focus-visible{
  color:#8b7185;
  border-color:rgba(139,113,133,.14);
  background:rgba(255,255,255,.72);
  box-shadow:0 10px 24px rgba(93,67,85,.09);
  transform:translateY(-3px);
}

.nav-tile:hover .nav-tile__icon,
.nav-tile:focus-visible .nav-tile__icon{
  transform:translateY(-2px) scale(1.06);
}

.nav-tile:hover .nav-tile__icon img,
.nav-tile:focus-visible .nav-tile__icon img{

    opacity:1;

    filter:
        brightness(0)
        saturate(100%)
        invert(31%)
        sepia(15%)
        saturate(1008%)
        hue-rotate(268deg)
        brightness(92%)
        contrast(87%);

}

.nav-tile:hover::after,
.nav-tile:focus-visible::after{
  opacity:.75;
  transform:translateX(-50%) scaleX(1);
}

.nav-tile.is-active{
  color:#7047a3;
  border-color:rgba(112,71,163,.16);
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.88),
      rgba(199,173,182,.12)
    );
  box-shadow:
    0 11px 26px rgba(112,71,163,.11),
    inset 0 0 0 1px rgba(255,255,255,.55);
}

.nav-tile.is-active .nav-tile__icon img{
  opacity:1;
  filter:
    brightness(0)
    saturate(100%)
    invert(34%)
    sepia(25%)
    saturate(1035%)
    hue-rotate(246deg)
    brightness(89%)
    contrast(91%);
}

.nav-tile.is-active::after{
  opacity:1;
  background:#7047a3;
  transform:translateX(-50%) scaleX(1);
}

.nav-tile--portal{
  background:rgba(255,255,255,.38);
}

.nav-tile--book{
  margin-left:18px;
  color:#fff;
  border-color:rgba(139,113,133,.18);
  background:linear-gradient(145deg,#a68492,#8b7185);
  box-shadow:0 16px 30px rgba(139,113,133,.22);
}

.nav-tile--book .nav-tile__icon img{
  opacity:1;
  filter:none;
}

.nav-tile--book:hover,
.nav-tile--book:focus-visible{
  color:#fff;
  background:linear-gradient(145deg,#8b7185,#7047a3);
  box-shadow:0 16px 32px rgba(112,71,163,.24);
}

.nav-tile--book:hover .nav-tile__icon img,
.nav-tile--book:focus-visible .nav-tile__icon img,
.nav-tile--book.is-active .nav-tile__icon img{
  opacity:1;
  filter:brightness(0) invert(1);
}

.nav-tile--book::after{
  background:#fff;
}

.mobile-menu-button{
  display:none;
  width:46px;
  height:46px;
  padding:0;
  border:1px solid rgba(139,113,133,.16);
  border-radius:50%;
  background:rgba(255,255,255,.72);
  box-shadow:0 8px 20px rgba(89,63,81,.08);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:2px;
}

.mobile-menu-button span{
  width:19px;
  height:2px;
  background:#8b7185;
  border-radius:999px;
  transition:transform 220ms ease,opacity 220ms ease;
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}

.mobile-menu-button[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* =========================================================
   MOBILE ICON NAVIGATION
========================================================= */

.mobile-navigation{
  position:absolute;
  top:100%;
  right:0;
  left:0;
  z-index:1001;
  max-height:calc(100dvh - 78px);
  overflow-x:hidden;
  overflow-y:auto;
  padding:18px 18px 26px;
  border-bottom:1px solid rgba(199,173,182,.28);
  background:rgba(250,248,246,.985);
  box-shadow:0 24px 48px rgba(89,63,81,.16);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  overscroll-behavior:contain;
}

.mobile-navigation[hidden]{
  display:none;
}

.mobile-navigation nav{
  width:min(720px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.mobile-navigation a{
  position:relative;
  min-width:0;
  min-height:86px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:13px;
  padding:14px 16px;
  overflow:hidden;
  color:#514a4f;
  border:1px solid rgba(139,113,133,.13);
  border-radius:20px;
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 20px rgba(89,63,81,.045);
  font-family:"Poppins",sans-serif;
  font-size:.82rem;
  font-weight:600;
  line-height:1.3;
  text-align:left;
  transition:
    color 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}

.mobile-navigation a::after{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:0;
  width:3px;
  border-radius:0 999px 999px 0;
  background:#7047a3;
  opacity:0;
  transform:scaleY(.35);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.mobile-navigation a img{
  width:54px;
  height:54px;
  max-width:none;
  display:block;
  padding:7px;
  object-fit:contain;
  object-position:center;
  border:1px solid rgba(139,113,133,.1);
  border-radius:17px;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(199,173,182,.16)
    );
  filter:
    brightness(0)
    saturate(100%)
    invert(41%)
    sepia(8%)
    saturate(576%)
    hue-rotate(274deg)
    brightness(91%)
    contrast(87%);
  transform:scale(1.08);
  transform-origin:center;
}

.mobile-navigation a span{
  min-width:0;
  display:block;
  overflow-wrap:normal;
  word-break:normal;
}

.mobile-navigation a:hover,
.mobile-navigation a:focus-visible{
  color:#8b7185;
  border-color:rgba(139,113,133,.28);
  background:#fff;
  box-shadow:0 13px 28px rgba(89,63,81,.1);
  transform:translateY(-2px);
}

.mobile-navigation a.is-active{
  color:#7047a3;
  border-color:rgba(112,71,163,.24);
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(199,173,182,.2)
    );
  box-shadow:
    0 12px 26px rgba(112,71,163,.1);
}

.mobile-navigation a.is-active::after{
  opacity:1;
  transform:scaleY(1);
}

.mobile-navigation a.is-active img{
  border-color:rgba(112,71,163,.16);
  background:rgba(255,255,255,.9);
  filter:
    brightness(0)
    saturate(100%)
    invert(34%)
    sepia(25%)
    saturate(1035%)
    hue-rotate(246deg)
    brightness(89%)
    contrast(91%);
}

.mobile-navigation-book{
  color:#fff!important;
  border-color:rgba(139,113,133,.2)!important;
  background:
    linear-gradient(
      145deg,
      #a68492,
      #8b7185
    )!important;
  box-shadow:
    0 14px 28px
    rgba(139,113,133,.22)!important;
}

.mobile-navigation-book img,
.mobile-navigation-book.is-active img{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.13);
  filter:brightness(0) invert(1);
}

.mobile-navigation-book::after{
  background:#fff!important;
}

@media (max-width:560px){

  .mobile-navigation{
    padding:
      14px
      12px
      calc(22px + env(safe-area-inset-bottom));
  }

  .mobile-navigation nav{
    grid-template-columns:1fr;
    gap:9px;
  }

  .mobile-navigation a{
    min-height:72px;
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
    padding:10px 14px;
    border-radius:17px;
    font-size:.82rem;
  }

  .mobile-navigation a img{
    width:48px;
    height:48px;
    padding:6px;
    border-radius:15px;
    transform:scale(1.08);
  }

}

/* =========================================================
   RESPONSIVE HEADER
========================================================= */

@media (max-width:1260px){
  .header-inner{
    width:min(1180px,calc(100% - 24px));
    grid-template-columns:100px minmax(0,1fr) 46px;
    gap:10px;
  }

  .brand-logo img{
    width:94px;
  }

  .main-nav{
    gap:5px;
  }

  .nav-tile{
    min-height:78px;
    border-radius:15px;
  }

  .nav-tile__icon{
    width:36px;
    height:36px;
  }

  .nav-tile__label{
    font-size:.59rem;
  }
}

@media (max-width:1020px){
  .header-inner{
    min-height:86px;
    grid-template-columns:112px 1fr 48px;
  }

  .brand-logo img{
    width:104px;
    max-height:72px;
  }

  .main-nav{
    display:none;
  }

  .mobile-menu-button{
    display:flex;
    justify-self:end;
  }
}

@media (max-width:560px){
  .header-inner{
    width:calc(100% - 24px);
    min-height:78px;
    grid-template-columns:96px 1fr 44px;
  }

  .brand-logo img{
    width:92px;
    max-height:66px;
  }

  .mobile-navigation nav{
    grid-template-columns:1fr;
  }

  .mobile-navigation a{
    min-height:70px;
  }
}

@media (prefers-reduced-motion:reduce){
  .brand-logo img,
  .nav-tile,
  .nav-tile__icon,
  .nav-tile__icon img,
  .nav-tile::after,
  .mobile-menu-button span{
    transition:none !important;
  }
}