/* =====================================================================
   ZAAI — mobil navigationsbar, klonad rakt av från t1energy.com
   Alla mått, färger, radier, easings och timings är hämtade ur deras
   egna stilmallar (_nuxt/css/b373bea.css) och deras Vue-komponent
   (_nuxt/66911ba.js). Deras rot-fontstorlek är 10px, så 1rem = 10px.
   Här är allt omräknat till px så att vår 16px-rot inte påverkas.
   Färger och typsnitt är däremot ZAAI:s egna (lila/mörk paletten, Inter),
   inte T1:s gråskala och husfonter. Form, mått och rörelse = T1.
   Endast mobil (<= 767px). Desktop och tablet rörs inte.
   ===================================================================== */

@media (max-width: 767px) {

  /* --- Dölj vår gamla mobilnav helt --------------------------------- */
  #hero-nav { display: none !important; }
  .nav-mobile-menu { display: none !important; }

  /* --- Header ------------------------------------------------------- */
  header.t1-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 14px 12px 0;      /* T1 har 3.6rem; nedkortat så headern inte skymmer lika mycket */
    pointer-events: none;
  }

  header.t1-header .t1-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  /* --- Logotyp ------------------------------------------------------- */
  header.t1-header .t1-header-logo {
    position: relative;
    z-index: 100;
    display: block;
    color: #fff;
    pointer-events: auto;
    transition: all .35s ease;   /* var(--duration-long,.35s) */
  }

  header.t1-header .t1-header-logo img {
    display: block;
    height: 72px;
    width: auto;
    transition: height .35s ease;
  }

  /* Loggan krymper när man scrollar, samma trigger som menyknappen.
     Full storlek högst upp och när menyn är öppen. */
  header.t1-header.is-compact:not(.is-nav-open) .t1-header-logo img {
    height: 56px;
  }

  /* --- Menyknappen --------------------------------------------------- */
  header.t1-header .t1-header-toggle {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .57em;
    padding: .8571em;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 16px;                     /* var(--radius-button,1.6rem) */

    /* Sajtens liquid glass — samma recept som .hero-btn-ghost /
       .nav-btn-outline, så menyknappen hör ihop med övriga knappar. */
    background:
      linear-gradient(160deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.34) 52%, rgba(255,255,255,0.5) 100%),
      radial-gradient(120% 140% at 22% 10%, rgba(192,132,252,0.24), transparent 62%),
      radial-gradient(110% 130% at 82% 88%, rgba(232,121,168,0.22), transparent 64%);
    border: 1px solid rgba(255,255,255,0.8);
    -webkit-backdrop-filter: blur(14px) saturate(1.7);
    backdrop-filter: blur(14px) saturate(1.7);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.95),
      inset 0 -1px 2px rgba(159,128,218,0.18),
      0 10px 26px -12px rgba(107,83,145,0.45);
    color: rgba(46,32,70,0.9);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;                         /* var(--size-body,1.4rem) */
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    -webkit-user-select: none;
    user-select: none;
    will-change: transform;
    transition: box-shadow .22s ease, gap .35s ease,
                transform 140ms cubic-bezier(.16, 1, .3, 1);
  }

  header.t1-header .t1-header-toggle:active {
    transform: scale(.97);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,1),
      inset 0 -1px 3px rgba(159,128,218,0.24),
      0 14px 32px -12px rgba(107,83,145,0.55);
  }

  /* Knappen krymper till bara prickarna så fort sidan scrollas.
     Full storlek med text bara högst upp — och när menyn är öppen. */
  header.t1-header .t1-header-toggle .text-wrapper {
    display: block;
    max-width: 8em;
    overflow: hidden;
    white-space: nowrap;
    opacity: 1;
    transition: max-width .35s ease, opacity .22s ease;
  }

  header.t1-header.is-compact:not(.is-nav-open) .t1-header-toggle { gap: 0; }

  header.t1-header.is-compact:not(.is-nav-open) .t1-header-toggle .text-wrapper {
    max-width: 0;
    opacity: 0;
  }

  header.t1-header .t1-header-toggle .t1-icon-wrapper {
    position: relative;
    display: block;
    width: 1.7143em;
    height: 1.7143em;
  }

  header.t1-header .t1-header-toggle svg {
    display: block;
    width: 1.7143em;   /* 24px vid 14px font-size */
    height: auto;
  }

  /* T1 morfar rutnätet till krysset med GSAP MorphSVG (betalplugin).
     Här ligger båda formerna på varandra och korsblandas i samma
     tidsrymd, .66s power4.inOut, som deras timeline. */
  header.t1-header .t1-header-toggle svg.t1-icon-x {
    position: absolute;
    inset: 0;
  }

  header.t1-header .t1-header-toggle .t1-icon-grid,
  header.t1-header .t1-header-toggle .t1-icon-x {
    transition: opacity .66s cubic-bezier(.77, 0, .175, 1),
                transform .66s cubic-bezier(.77, 0, .175, 1);
  }

  header.t1-header .t1-header-toggle .t1-icon-x {
    opacity: 0;
    transform: rotate(-90deg) scale(.85);
  }

  header.t1-header.is-nav-open .t1-header-toggle .t1-icon-grid {
    opacity: 0;
    transform: rotate(90deg) scale(.85);
  }

  header.t1-header.is-nav-open .t1-header-toggle .t1-icon-x {
    opacity: 1;
    transform: none;
  }

  /* --- Fullskärmsmenyn ------------------------------------------------ */
  .t1-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: none;
    max-height: 0;
    overflow: hidden;
    background-color: #1C1628;   /* ZAAI --dark */
    color: #fff;
    pointer-events: auto;
    transform: translateZ(0);
    will-change: max-height;
  }

  .t1-nav.is-visible { display: block; }

  .t1-nav .t1-nav-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 130px 12px 48px;   /* följer headerns nya höjd, samma luft som T1 */
  }

  .t1-nav .t1-nav-inner::-webkit-scrollbar,
  .t1-nav .t1-nav-inner ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
  }

  /* Toningen som gör att listan försvinner in i toppen */
  .t1-nav .t1-nav-inner:before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(28, 22, 40, 0), #1C1628 95%);
  }

  .t1-nav ul.t1-nav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;                    /* var(--gutter,.8rem) */
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item {
    position: relative;
    display: block;
    width: 100%;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item.is-cta { margin-top: 36px; }
  .t1-nav ul.t1-nav-list .t1-nav-item.is-cta + .is-cta { margin-top: 0; }

  /* --- Pilen för undermenyer ------------------------------------------ */
  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-arrow {
    position: absolute;
    top: 11px;
    right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-arrow:before {
    content: "";
    position: absolute;
    top: -25%;
    right: -25%;
    bottom: -25%;
    left: -25%;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-arrow svg {
    display: block;
    transition: transform .5s linear(0, .1641 3.52%, .311 7.18%, .4413 10.99%, .5553 14.96%, .6539 19.12%, .738 23.5%, .8086 28.15%, .8662 33.12%, .9078 37.92%, .9405 43.12%, .965 48.84%, .9821 55.28%, .992 61.97%, .9976 70.09%, 1);
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-arrow svg path { stroke: #9E90C4; }

  .t1-nav ul.t1-nav-list .t1-nav-item.is-open .t1-nav-item-arrow svg { transform: rotate(180deg); }

  /* --- Länkarna -------------------------------------------------------- */
  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link:not(.is-cta) {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 20px;              /* var(--size-heading-xs,2rem) */
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.3;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link:not(.is-cta)[target="_blank"] .text-wrapper {
    display: flex;
    align-items: center;
    gap: .2em;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link:not(.is-cta)[target="_blank"] .text-wrapper:after {
    content: "↗";
    display: block;
    font-size: .9em;
    transform: translateY(-5%);
  }

  /* --- CTA-knapparna ---------------------------------------------------- */
  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link.is-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 1em 1.3333em;
    border: none;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;   /* calc(var(--radius-button) - var(--gutter)) */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;      /* var(--size-caption,1.2rem) */
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    text-wrap: balance;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color .25s, color .25s;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link.is-cta .text-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75em;
    width: 100%;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link.is-cta .text-wrapper:after {
    content: "→";
    display: block;
    flex: none;
    transform: translateY(-5%);
  }

  /* Primärknapp — ZAAI:s egen gradient, samma som på resten av sajten */
  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link.is-cta.is-cta-grey3 {
    background-image: linear-gradient(120deg, #8b5cf6 0%, #c084fc 33%, #e879a8 50%, #c084fc 67%, #8b5cf6 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    color: #fff;
    transition: background-position .5s ease;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link.is-cta.is-cta-grey3:active {
    background-position: 100% 50%;
  }

  /* Sekundärknapp — dämpad yta på den mörka bakgrunden */
  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link.is-cta.is-cta-grey1 {
    background-color: rgba(255, 255, 255, .07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    color: #fff;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-item-link.is-cta.is-cta-grey1:active {
    background-color: rgba(255, 255, 255, .14);
  }

  /* --- Undermenyn ------------------------------------------------------- */
  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-submenu {
    display: block;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .5s linear(0, .1641 3.52%, .311 7.18%, .4413 10.99%, .5553 14.96%, .6539 19.12%, .738 23.5%, .8086 28.15%, .8662 33.12%, .9078 37.92%, .9405 43.12%, .965 48.84%, .9821 55.28%, .992 61.97%, .9976 70.09%, 1);
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-submenu .t1-nav-submenu-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
    margin: 0;
    padding: 4px 0 1.7em;
    list-style: none;
    color: #B9AFD0;              /* ZAAI dämpad på mörkt */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;             /* var(--size-body,1.4rem) */
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.3;
    opacity: 0;
    transform: translate3d(0, -10px, 0);
    transition: all 666ms linear(0, .1641 3.52%, .311 7.18%, .4413 10.99%, .5553 14.96%, .6539 19.12%, .738 23.5%, .8086 28.15%, .8662 33.12%, .9078 37.92%, .9405 43.12%, .965 48.84%, .9821 55.28%, .992 61.97%, .9976 70.09%, 1);
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-submenu .t1-nav-submenu-list .t1-nav-submenu-item,
  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-submenu .t1-nav-submenu-list .t1-nav-submenu-link {
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-submenu.is-open {
    max-height: var(--submenu-height);
    pointer-events: auto;
  }

  .t1-nav ul.t1-nav-list .t1-nav-item .t1-nav-submenu.is-open .t1-nav-submenu-list {
    opacity: 1;
    transform: translateZ(0);
  }

  /* --- Fotdelen i menyn --------------------------------------------------- */
  .t1-nav ul.t1-nav-list .t1-nav-footer {
    display: block;
    margin-top: 96px;   /* var(--margin-5xl,9.6rem) */
  }

  .t1-nav ul.t1-nav-list .t1-nav-footer .t1-nav-footer-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 45px;
  }

  .t1-nav ul.t1-nav-list .t1-nav-footer .t1-nav-footer-section {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.3;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .t1-nav ul.t1-nav-list .t1-nav-footer .t1-nav-footer-title {
    margin: 0 0 12px;
    font: inherit;
    color: #B9AFD0;
  }

  .t1-nav ul.t1-nav-list .t1-nav-footer .t1-nav-footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .t1-nav ul.t1-nav-list .t1-nav-footer .t1-nav-footer-links .t1-nav-footer-link {
    color: inherit;
    text-decoration: none;
  }

  .t1-nav ul.t1-nav-list .t1-nav-footer .t1-nav-footer-links .t1-nav-footer-link[target="_blank"] .text-wrapper {
    display: flex;
    align-items: center;
    gap: .2em;
  }

  .t1-nav ul.t1-nav-list .t1-nav-footer .t1-nav-footer-links .t1-nav-footer-link[target="_blank"] .text-wrapper:after {
    content: "↗";
    display: block;
    font-size: .9em;
    transform: translateY(-5%);
  }

  .t1-nav ul.t1-nav-list .t1-nav-copyright {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 48px;
    margin-bottom: 36px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.3;
    text-transform: uppercase;
    text-wrap: balance;
  }

  .t1-nav ul.t1-nav-list .t1-nav-copyright .text { color: #B9AFD0; }

  html.t1-nav-open,
  body.t1-nav-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* iOS Safari målar remsan vid statusfältet med sidans bakgrund.
     Utan detta blir toppen en vit list ovanför den mörka menyn.
     Egen klass, för den måste släppas redan när menyn börjar stängas —
     annars skymtar en mörk bakgrund bakom menyn medan den fälls ihop. */
  html.t1-nav-dark,
  body.t1-nav-dark { background-color: #1C1628 !important; }

  /* Chattbubblan ligger annars ovanpå menyn */
  body.t1-nav-open #zaai-bubble,
  body.t1-nav-open #zaai-panel { display: none !important; }
}

/* Aldrig synlig över mobilbrytpunkten */
@media (min-width: 768px) {
  header.t1-header,
  .t1-nav { display: none !important; }
}