/* =============================================================================
   temp.css — 2026 styles the new navigation menu needs on pages that use this
   (old) template. The 2026 global stylesheet is not loaded on these pages, so
   the classes the 2026 Navbar, MenuLink and MenuPromotionCard use are copied
   here from Advania.Theme.2026/Styles.

   Remove this file once the pages use the 2026 template.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   Typography (Advania.Theme.2026/Styles/Base/_typography.scss)

   Scoped to .navbar: this template has its own .text-small, .heading-5 and
   element styles that the rest of the page still uses.
   ----------------------------------------------------------------------------- */

/* The 2026 reset gives every element margin: 0; this template's h1–h5 have 2rem */
.navbar h1,
.navbar h2,
.navbar h3,
.navbar h4,
.navbar h5,
.navbar h6 {
    margin: 0;
}

/* .text-normal, p, li */
.navbar p,
.navbar li {
    font-family: 'Adelle Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.875rem;
}

.navbar .text-small {
    font-family: 'Adelle Sans', Arial, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4375rem;
}

/* Semibold in Figma. 2026 writes these as 500, which its fonts.css maps to the Semibold file;
   this template registers Semibold at 600 only, so 500 would fall back to Regular. */
.navbar .text-small--bold {
    font-family: 'Adelle Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4375rem;
}

.navbar .desktop-navigation-link {
    font-family: 'Adelle Sans', Arial, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.225rem;
    letter-spacing: 0;
}

/* Vefverslun / Spjöllum saman: button text is 500 in buttons.css, Semibold in Figma */
.navbar .button-primary {
    font-weight: 600;
}

/* Figma arrow is 20 × 20; icons.css sizes the svg to the icon's 1em (16px) */
.navbar .button-primary svg {
    width: 20px;
    height: 20px;
}

/* MenuPromotionCard title */
.navbar .heading-5 {
    font-family: 'Adelle', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.25rem, calc(1.2038rem + 0.190vw), 1.375rem);
    line-height: clamp(1.875rem, calc(1.8288rem + 0.190vw), 2rem);
    letter-spacing: 0;
    font-feature-settings: 'lnum', 'pnum';
}


/* -----------------------------------------------------------------------------
   Container grid (Advania.Theme.2026/Styles/_container.scss)

   Undoes this template's .container (max-width, auto margins, 25px/82px
   padding) inside the navbar and applies the 2026 grid instead.
   ----------------------------------------------------------------------------- */

.navbar .container {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    position: relative;
    display: grid;
    /* XSmall: 16px + 4 cols + 16px */
    grid-template-columns: 1rem repeat(4, minmax(0, 1fr)) 1rem;
}

/* Small (720px+): 16px + 8 cols + 16px */
@media (min-width: 720px) {
    .navbar .container {
        grid-template-columns: 1rem repeat(8, minmax(0, 1fr)) 1rem;
    }
}

/* Medium (1080px+): 32px + 12 cols + 32px */
@media (min-width: 1080px) {
    .navbar .container {
        grid-template-columns: 2rem repeat(12, minmax(0, 1fr)) 2rem;
    }
}

/* Large (1440px+): fluid gutters + 12 cols, capped at this template's content width
   (.container: max-width 1818px less 2 × 82px padding), so the navbar lines up with the page */
@media (min-width: 1440px) {
    .navbar .container {
        grid-template-columns: 2.5rem 1fr repeat(12, minmax(0, calc((1818px - 164px) / 12))) 1fr 2.5rem;
    }
}


/* -----------------------------------------------------------------------------
   Button icons take the button's text colour (Advania.Theme.2026/Styles/Base/_buttons.scss)

   icons.css sets every icon path's stroke to var(--color) / var(--stroke-color),
   overriding the SVG's own currentColor, and the icon provider writes
   --color:#000 on the <i>. Setting both on the <svg> lets the paths inherit the
   button's colour.
   ----------------------------------------------------------------------------- */

:is(.button-primary, .button-secondary, .button-ghost, .button-outline, .button-link) :is(i, .svg-icon, .svg-wrapper) > svg {
    --color: currentColor;
    --stroke-color: currentColor;
}


/* -----------------------------------------------------------------------------
   Outline button (Advania.Theme.2026/Styles/Base/_buttons.scss)

   Used by the navbar's link buttons in the mobile/tablet menu:
   <a class="button-outline button-outline--pink">…</a>
   (.button-link, used in the desktop mega menu, is already in buttons.css)
   ----------------------------------------------------------------------------- */

.button-outline {
    --btn-background-color: transparent;
    --btn-hover-background-color: var(--color-indigo-100);
    --btn-icon-background-color: transparent;
    font-family: "Adelle Sans", sans-serif;
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 2rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    height: 3.25rem;
    white-space: nowrap;
    position: relative;
    isolation: isolate;
    background: var(--btn-background-color);
    color: var(--color-indigo-base);
    border: 1px solid var(--color-indigo-base);
    transition: color .4s ease, border-color .4s ease;
    overflow: hidden;
    width: fit-content
}

    /* Fill that expands from right to left on hover */
    .button-outline::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--btn-hover-background-color);
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .4s ease;
        z-index: -1
    }

    .button-outline:hover::before {
        transform: scaleX(1)
    }

    .button-outline:hover {
        border-color: var(--color-indigo-800);
        color: var(--color-indigo-800)
    }

    .button-outline:active {
        color: var(--color-indigo-base)
    }

    .button-outline:focus {
        outline: 5px solid var(--color-outline);
        outline-offset: 0
    }

    .button-outline:focus-visible {
        outline: 4px solid var(--color-outline);
        outline-offset: 0
    }

    .button-outline:disabled, .button-outline[aria-disabled=true] {
        opacity: .24;
        pointer-events: none;
        cursor: not-allowed
    }

    .button-outline i, .button-outline .svg-icon, .button-outline .svg-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3.25rem;
        height: 3.25rem;
        border-radius: 50%;
        background-color: var(--btn-icon-background-color);
        aspect-ratio: 1/1;
        flex-shrink: 0;
        transition: background-color .4s ease
    }

.button-outline--pink {
    --btn-hover-background-color: var(--color-pink-100);
    color: var(--color-pink-base);
    border-color: var(--color-pink-base)
}

    .button-outline--pink:hover {
        border-color: var(--color-pink-800);
        color: var(--color-pink-800)
    }

    .button-outline--pink:active {
        color: var(--color-pink-base)
    }

.button-outline--purple {
    --btn-hover-background-color: var(--color-purple-100);
    color: var(--color-purple-base);
    border-color: var(--color-purple-base)
}

    .button-outline--purple:hover {
        border-color: var(--color-purple-800);
        color: var(--color-purple-800)
    }

    .button-outline--purple:active {
        color: var(--color-purple-base)
    }

.button-outline--white {
    --btn-hover-background-color: var(--color-grey-50);
    color: var(--color-white);
    border-color: var(--color-grey-100)
}

    .button-outline--white:hover {
        border: 1px solid var(--color-grey-100)
    }

    .button-outline--white:active {
        color: var(--color-grey-600)
    }

.button-outline--sm {
    font-size: .875rem;
    padding: .375rem 1.125rem
}

.button-outline--lg {
    font-size: 1.125rem;
    padding: .625rem 2rem
}

.button-outline--full {
    width: 100%
}