/* --- Header --- */
.header {
    height: var(--header-height);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: var(--transition-duration);
}

.transparent-header:not(.scrolled, .password-protected) .header {
    background: transparent;
}

.transparent-header .main {
    margin-top: calc(var(--header-height) * -1);
}

.transparent-header .main > .section-wrapper:first-child .section-content {
    padding-top: var(--header-height);
}

.top-bar {
    width: 100%;
    height: var(--top-bar-height);
    background: var(--light);
    padding: 0 var(--horizontal-section-padding);
    position: relative;
    transition-duration: var(--transition-duration);
}

.top-bar-content {
    display: flex;
    justify-content: end;
    align-items: center;
    font-size: var(--font-size-small);
    width: 100%;
    height: 100%;
    max-width: var(--width-default);
    margin: 0 auto;
}

.top-bar .main-menu-desktop {
    z-index: 300;
}

.main-header {
    width: 100%;
    height: var(--main-header-height);
    background: var(--white);
    padding: 0 var(--horizontal-section-padding);
    position: relative;
    z-index: 100;
    transition-duration: var(--transition-duration);
}

.main-header-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2rem;
    width: 100%;
    height: 100%;
    max-width: var(--width-default);
    margin: 0 auto;
}

/* .scrolled .top-bar,
.scrolled .main-header {
    transform: translateY(calc(var(--top-bar-height) * -1));
} */
.header-left-column {
    display: flex;
    align-items: center;
}

.header-center-column {
    display: flex;
    align-items: stretch;
}

.header-right-column {
    display: flex;
    align-items: center;
}

.header-logo {
    display: flex;
    align-items: center;
    z-index: 1000;
}

.header-logo img {
    width: 9.5rem;
    margin-top: -2rem;
}

@media (max-width: 640px) {
    .header-logo img {
        width: 8rem;
        margin-top: -2.5rem;
    }
}

/* --- Header --- */
/* --- Main Menu Desktop --- */
.main-menu-desktop {
    display: flex;
    margin-right: -1rem;
    height: 100%;
}

.main-menu-desktop .menu-list {
    display: flex;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu-desktop a,
.main-menu-desktop button {
    color: var(--black);
    padding: 0 1rem;
    height: 100%;
    word-break: keep-all;
    display: flex;
    align-items: center;
    font-weight: 600;
}

.top-bar .main-menu-desktop a,
.top-bar .main-menu-desktop button {
    font-size: var(--font-size-tiny);
}

.top-bar .main-menu-desktop a:hover,
.top-bar .main-menu-desktop button:hover {
    text-decoration: underline;
}

.top-bar .main-menu-desktop a::after,
.top-bar .main-menu-desktop button::after {
    display: none;
}

.top-bar .main-menu-desktop .sub-menu a:hover,
.top-bar .main-menu-desktop .sub-menu button:hover {
    text-decoration: none;
}

.main-menu-desktop a:hover,
.main-menu-desktop button:hover,
.main-menu-desktop .current-menu > a,
.main-menu-desktop .current-menu > button,
.main-menu-desktop .menu-item:has(.current-menu) > a,
.main-menu-desktop .menu-item:has(.current-menu) > button {
    color: inherit;
}

.main-menu-desktop .sub-menu a {
    border-radius: var(--border-radius-small);
}

.main-menu-desktop .sub-menu a:hover {
    background: var(--light);
}

.top-bar-content a:hover,
.top-bar-content button:hover {
    color: var(--black);
}

.transparent-header:not(.scrolled) .main-menu-desktop a,
.transparent-header:not(.scrolled) .main-menu-desktop button {
}

.main-menu-desktop .menu-item {
    position: relative;
    padding: 0;
}

.main-menu-desktop .has-children > a,
.main-menu-desktop .has-children > button {
    padding-right: 2rem;
}

.main-menu-desktop .menu-item > .sub-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    margin: 0;
    padding: .75rem;
    width: 13rem;
    list-style-type: none;
    background: var(--white);
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
    font-size: var(--font-size-small);
    display: none;
    opacity: 0;
    transform: translateY(-.5rem);
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.top-bar .main-menu-desktop .menu-item > .sub-menu {
    width: 16rem;
}

.transparent-header:not(.scrolled) .main-menu-desktop .menu-item > .sub-menu {
    background: var(--black-alpha-3);
}

.main-menu-desktop .has-children:last-child > .sub-menu {
    left: auto;
    right: 0;
    margin-right: .5rem;
}

.main-menu-desktop .menu-item.hover > .sub-menu {
    display: flex;
    opacity: 1;
    transform: translateY(0);

    @starting-style {
        opacity: 0;
        transform: translateY(-.5rem);
    }
}

.main-menu-desktop .sub-menu-icon {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    display: block;
    position: absolute;
    top: calc(50% - 0.4rem);
    right: 0.9rem;
    transform: rotate(45deg);
    border-bottom: 1px solid var(--black);
    border-right: 1px solid var(--black);
    opacity: 0.5;
    transition-duration: var(--transition-duration);
    pointer-events: none;
}

.transparent-header:not(.scrolled) .main-menu-desktop .sub-menu-icon {
    border-color: var(--white);
}

.main-menu-desktop .menu-item > .sub-menu > .menu-item > .sub-menu {
    display: none;
    opacity: 0;
    transform: translateX(-.5rem) translateY(0);
    position: absolute;
    top: -1rem;
    left: 100%;
    border-radius: var(--border-radius-small);
}

.main-menu-desktop .menu-item > .sub-menu > .menu-item.hover > .sub-menu {
    display: flex;
    opacity: 1;
    transform: translateX(0) translateY(0);

    @starting-style {
        opacity: 0;
        transform: translateX(-.5rem) translateY(0);
    }
}

.main-menu-desktop .menu-item > .sub-menu .sub-menu-icon {
    top: calc(50% - 0.25rem);
    transform: rotate(-45deg);
}

.main-menu-desktop .sub-menu a,
.main-menu-desktop .sub-menu button {
    padding: 0.5rem 1rem;
}

@media (max-width: 960px) {
    .main-menu-desktop.main-menu {
        display: none;
    }
}

.top-bar .menu-item-icon {
    display: inline-flex;
    align-items: center;
}

.top-bar .menu-item-icon button {
    padding-left: .3rem;
}

.top-bar .menu-item-icon::before {
    content: "";
    display: inline-block;
    margin-left: .8rem;
    width: 20px;
    height: 20px;
    background-color: var(--color-2);

    /* Här styr du färgen! */
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 64C284.7 64 256 92.7 256 128L256 192L128 192C92.7 192 64 220.7 64 256L64 512C64 547.3 92.7 576 128 576L512 576C547.3 576 576 547.3 576 512L576 128C576 92.7 547.3 64 512 64L320 64zM160 400C160 391.2 167.2 384 176 384L208 384C216.8 384 224 391.2 224 400L224 432C224 440.8 216.8 448 208 448L176 448C167.2 448 160 440.8 160 432L160 400zM336 416C327.2 416 320 408.8 320 400L320 368C320 359.2 327.2 352 336 352L368 352C376.8 352 384 359.2 384 368L384 400C384 408.8 376.8 416 368 416L336 416zM448 400L448 368C448 359.2 455.2 352 464 352L496 352C504.8 352 512 359.2 512 368L512 400C512 408.8 504.8 416 496 416L464 416C455.2 416 448 408.8 448 400zM176 288L208 288C216.8 288 224 295.2 224 304L224 336C224 344.8 216.8 352 208 352L176 352C167.2 352 160 344.8 160 336L160 304C160 295.2 167.2 288 176 288zM320 176C320 167.2 327.2 160 336 160L368 160C376.8 160 384 167.2 384 176L384 208C384 216.8 376.8 224 368 224L336 224C327.2 224 320 216.8 320 208L320 176zM464 160L496 160C504.8 160 512 167.2 512 176L512 208C512 216.8 504.8 224 496 224L464 224C455.2 224 448 216.8 448 208L448 176C448 167.2 455.2 160 464 160zM320 304L320 272C320 263.2 327.2 256 336 256L368 256C376.8 256 384 263.2 384 272L384 304C384 312.8 376.8 320 368 320L336 320C327.2 320 320 312.8 320 304zM464 320C455.2 320 448 312.8 448 304L448 272C448 263.2 455.2 256 464 256L496 256C504.8 256 512 263.2 512 272L512 304C512 312.8 504.8 320 496 320L464 320z"/></svg>');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

/* Hover Style */
/* Underlined Fade In */
.main-menu-desktop a:after,
.menu-item.has-children .placeholder-menu-item:after,
.footer-link a,
.footer-menu .menu-item a:after {
    content: "";
    width: calc(100% - 2rem);
    height: 2px;
    position: absolute;
    left: 1rem;
    top: calc(45% + 1rem);
    transition-duration: var(--transition-duration);
    transform: scaleX(0);
    will-change: transform;
    transform-origin: right center;
    transition: transform .4s cubic-bezier(1, 0, 0, 1);
    background: var(--color-1);
}

.footer-menu .menu-item a {
    position: relative;
}

.footer-menu .menu-item a:after {
    width: 100%;
    top: calc(35% + 1rem);
    left: 0;
}

.main-menu-desktop .menu-item.hover > a:after,
.main-menu-desktop .current-menu > a:after,
.main-menu-desktop .menu-item:has(.current-menu) > a:after,
.menu-item.has-children .placeholder-menu-item:hover:after,
.menu-item.has-children.hover .placeholder-menu-item:after,
.footer-menu .menu-item a:hover:after {
    transform: scaleX(1);
    transform-origin: left center;
}

.sub-menu .menu-item a:after,
.top-bar .menu-item .placeholder-menu-item:after {
    display: none;
}

.transparent-header:not(.scrolled) .main-menu-desktop .menu-item.hover > a:before,
.transparent-header:not(.scrolled) .main-menu-desktop .current-menu > a:before,
.transparent-header:not(.scrolled) .main-menu-desktop .menu-item:has(.current-menu) > a:before {
    background: var(--white);
}

/* Mega menu */
.main-menu-desktop .menu-item > .mega-menu {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    background: var(--pale);
    display: none;
    opacity: 0;
    transform: translateY(-.5rem);
    transition-duration: var(--transition-duration);
    transition-behavior: allow-discrete;
    flex-direction: column;
}

.main-menu-desktop .menu-item.hover > .mega-menu {
    display: flex;
    opacity: 1;
    transform: translateY(0);

    @starting-style {
        opacity: 0;
        transform: translateY(-.5rem);
    }
}

/* --- Main Menu Desktop --- */
/* --- Hamburger --- */
.header {
    --hamburger-width: 40px;
    --hamburger-height: 20px;
    --hamburger-bar-width: 2px;
    --hamburger-top-bar-width: 100%;
    --hamburger-middle-bar-width: 100%;
    --hamburger-bottom-bar-width: 100%;
    --hamburger-top-bar-rotation: 45deg;
    --hamburger-bottom-bar-rotation: -45deg;
    --hamburger-animation-duration-1: 0.2s;
    --hamburger-animation-duration-2: 0.2s;
    --hamburger-animation-duration-total: calc(var(--hamburger-animation-duration-1) + var(--hamburger-animation-duration-2));
}

.hamburger {
    display: none;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: transparent;
    cursor: pointer;
    outline: none;
    border: 0;
    margin: 0;
    padding: 10px;
    margin-right: -10px;
    z-index: 1000;
}

.hamburger-inner {
    width: var(--hamburger-width);
    height: var(--hamburger-height);
    display: flex;
    position: relative;
    margin-top: calc(var(--hamburger-bar-width) * -1);
}

.hamburger-top-bar,
.hamburger-middle-bar,
.hamburger-bottom-bar {
    position: absolute;
    background: var(--black);
    height: var(--hamburger-bar-width);
}

.transparent-header:not(.scrolled, .off-canvas-open) .hamburger-top-bar,
.transparent-header:not(.scrolled, .off-canvas-open) .hamburger-middle-bar,
.transparent-header:not(.scrolled, .off-canvas-open) .hamburger-bottom-bar {
    background: var(--white);
}

.hamburger-top-bar {
    top: 0;
    transition: top var(--hamburger-animation-duration-1) ease-in-out var(--hamburger-animation-duration-2), transform var(--hamburger-animation-duration-2) ease-in-out 0s, width 0s ease-in-out var(--hamburger-animation-duration-2), background var(--hamburger-animation-duration-total) ease-in-out 0s;
    width: var(--hamburger-top-bar-width);
}

.hamburger-middle-bar {
    opacity: 1;
    top: 50%;
    transition: opacity 0s ease-in-out var(--hamburger-animation-duration-2), width 0s ease-in-out var(--hamburger-animation-duration-2), background var(--hamburger-animation-duration-total) ease-in-out 0s;
    width: var(--hamburger-middle-bar-width);
}

.hamburger-bottom-bar {
    top: 100%;
    transition: top var(--hamburger-animation-duration-1) ease-in-out var(--hamburger-animation-duration-2), transform var(--hamburger-animation-duration-2) ease-in-out 0s, width 0s ease-in-out var(--hamburger-animation-duration-2), background var(--hamburger-animation-duration-total) ease-in-out 0s;
    width: var(--hamburger-bottom-bar-width);
}

.off-canvas-open .hamburger-top-bar {
    top: 50%;
    transform: rotate(var(--hamburger-top-bar-rotation));
    transition: top var(--hamburger-animation-duration-1) ease-in-out, transform var(--hamburger-animation-duration-2) ease-in-out var(--hamburger-animation-duration-1), width 0s ease-in-out var(--hamburger-animation-duration-1), background var(--hamburger-animation-duration-total) ease-in-out 0s;
}

.off-canvas-open .hamburger-middle-bar {
    opacity: 0;
    transition: opacity 0s ease-in-out var(--hamburger-animation-duration-1), width 0s ease-in-out var(--hamburger-animation-duration-1), background var(--hamburger-animation-duration-total) ease-in-out 0s;
}

.off-canvas-open .hamburger-bottom-bar {
    top: 50%;
    transform: rotate(var(--hamburger-bottom-bar-rotation));
    transition: top var(--hamburger-animation-duration-1) ease-in-out, transform var(--hamburger-animation-duration-2) ease-in-out var(--hamburger-animation-duration-1), width 0s ease-in-out var(--hamburger-animation-duration-1), background var(--hamburger-animation-duration-total) ease-in-out 0s;
}

.off-canvas-open .hamburger-top-bar,
.off-canvas-open .hamburger-middle-bar,
.off-canvas-open .hamburger-bottom-bar {
    width: 100%;
}

@media (max-width: 960px) {
    .hamburger {
        display: flex;
    }
}

/* --- Hamburger --- */
/* --- Off-canvas --- */
.off-canvas {
    position: fixed !important;
    top: 0;
    left: -100vw;
    width: 100vw;
    height: 100%;
    background: var(--white);
    display: flex;
    align-items: start;
    justify-content: center;
    transform: translateX(0);
    transition-duration: var(--hamburger-animation-duration-total);
    z-index: 95;
    padding-top: var(--header-height);
}

.scrolled .off-canvas {
    padding-top: var(--header-height);
}

.off-canvas-open .off-canvas,
.off-canvas-open.off-canvas {
    transform: translateX(100vw);
}

.off-canvas-content {
    max-width: 40rem;
    width: 100%;
    height: 100%;
    padding: var(--spacing-large) var(--spacing-small);
    padding-top: 5rem;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none;

    /* Hide scrollbar for IE, Edge */
    scrollbar-width: none;

    /* Hide scrollbar for Firefox */
    display: none;
    flex-direction: column;
    transition-delay: var(--hamburger-animation-duration-total);
    transition-behavior: allow-discrete;
}

.off-canvas-open .off-canvas-content {
    display: flex;
}

/* Hide scrollbar for IE, Edge and Firefox */
.off-canvas-content {
    -ms-overflow-style: none;

    /* IE and Edge */
    scrollbar-width: none;

    /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.off-canvas-content::-webkit-scrollbar {
    display: none;
}

/* --- Off-canvas --- */
/* --- Accordion Menu --- */
.accordion-menu {
    --accordion-menu-item-height: 2em;
    width: 100%;
}

.accordion-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.accordion-menu a,
.accordion-menu button {
    min-height: var(--accordion-menu-item-height);
    padding-right: var(--accordion-menu-item-height) + .5em;
    display: flex;
    align-items: center;
    color: var(--text-color);
    font-size: var(--font-size-medium);
}

.accordion-menu .menu-item {
    position: relative;
    width: 100%;
    font-size: var(--font-size-medium);
    padding: 0;
}

.accordion-menu .menu-item .sub-menu-icon {
    width: var(--accordion-menu-item-height);
    height: calc(var(--accordion-menu-item-height) - 0.2rem);
    position: absolute;
    top: 0;
    right: 0;
    border-radius: var(--border-radius-small);
    transition-duration: var(--transition-duration);
    background: var(--pale);
}

.accordion-menu .has-children > .sub-menu-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.accordion-menu .menu-item > .sub-menu-icon::after {
    content: "";
    display: block;
    width: .5em;
    height: .5em;
    border-bottom: 2px solid var(--black);
    border-left: 2px solid var(--black);
    transform: rotate(45deg) translate(.1em, -.1em);
    transition-duration: var(--transition-duration);
}

.accordion-menu .open > .sub-menu-icon::after {
    transform: rotate(-45deg) translate(1px, -1px);
}

.accordion-menu .sub-menu {
    height: 0;
    opacity: 0;
    transform: translateY(.5rem);
    overflow: hidden;
    transition-duration: var(--transition-duration);
    padding-left: 1rem;
}

.accordion-menu .open > .sub-menu {
    height: auto;
    opacity: 1;
    transform: translateY(0);
}

/* --- Accordion Menu --- */
.header-top-bar {
    height: 1.5rem;
    background: var(--light);
}

@media (max-width: 960px) {
    .header-button {
        display: none;
    }
}

.main-mobile-menu .menu-item:after,
.main-mobile-menu button::after {
    display: none;
}

.main-mobile-menu a,
.accordion-menu.main-mobile-menu button,
.main-mobile-menu .menu-item.has-children {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semi-bold);
    width: 100%;
}

.main-mobile-menu .menu-item.has-children .menu-item a {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
}

.main-mobile-menu .menu-item.has-children .menu-item:last-child {
    margin-bottom: 1rem;
}

.secondary-mobile-menu {
    margin-top: 2rem;
}

.secondary-mobile-menu a,
.secondary-mobile-menu button {
    width: 100%;
    border-top: 1px solid var(--black-alpha-1);
    padding: .6rem 0;
}

.secondary-mobile-menu li:last-child a,
.secondary-mobile-menu li:last-child button {
    border-bottom: 1px solid var(--black-alpha-1);
}

.mobile-header-button {
    margin-top: var(--spacing-medium);
}

.off-canvas  .locations-menu {
    display: none;
}

.locations-menu .menu-item a {
    font-size: .9rem;
}

.menu-item .sub-title a::before {
    color: rgba(20, 29, 37, 1) !important;
    font-size: .65rem;
    position: absolute;
    bottom: .35rem;
    left: .7rem;
    border-radius: 2px;
    font-weight: var(--font-weight-normal);
    transition-duration: var(--transition-duration);
}

.menu-item.sub-title a {
    padding: .3rem .7rem 1.25rem .7rem;
}

.menu-item.sub-title.hast a::before {
    content: "Hästklinik";
}

.menu-item.sub-title.smadjur a::before {
    content: "Smådjur";
}

.menu-item.sub-title.both a::before {
    content: "Hästklinik • Smådjur";
}

.menu-item.current-website {
    margin-bottom: .5rem;
}

.menu-item.current-website::after {
    margin-bottom: .5rem;
}

.menu-item.current-website a {
    background: var(--pale) !important;
    border: 1px solid var(--black-alpha-2);
}

.menu-item.current-website.sub-title a {
    padding: .3rem .7rem 1.8rem .7rem;
}

.menu-item.current-website.sub-title a::before {
    background: var(--color-1);
    color: var(--white) !important;
    bottom: .6rem;
    padding: 1px 6px;
}

@media (max-width: 960px) {
    .top-bar-content .hide-on-mobile {
        display: none;
    }
}