/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.14_typescript@6.0.3_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/portico/navbar.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
    /* Actual navbar height is determined by label padding
       (16px top/bottom) and line-height (28px): 16 + 28 + 16 = 60px.
       Keep this variable in sync with those values. */
    --navbar-height: 60px;
    --announcement-banner-background: hsl(216deg 90% 82%);
    --announcement-banner-foreground: hsl(240deg 100% 5.9%);
    --announcement-banner-border: hsl(240deg 100% 5.9% / 12%);
    --announcement-banner-link-underline: hsl(240deg 100% 5.9% / 80%);
}

/* Suppress rubber-band overscroll on marketing pages: the banner is
   sticky and in-flow while .top-menu is fixed, so during overscroll
   above scroll: 0 the banner briefly drifts down with the document
   while the navbar stays pinned, exposing a gap and visually
   overlapping the navbar's top edge. */
html {
    overscroll-behavior-y: none;
}

/* Announcement banner above the marketing nav, shown when
   LANDING_PAGE_NAVBAR_MESSAGE is configured. Lives in navbar.css
   (loaded by every marketing-page bundle, including landing-page-hello)
   so /hello renders it identically to /plans, /why-zulip, etc.

   position: sticky keeps the banner in flow — so .top-menu's
   `position: fixed; top: auto` still resolves to "just below this
   banner" — while pinning the banner to the viewport top on scroll.
   z-index 11 sits above .top-menu (z-index 10) so the two sit
   flush during scroll without flicker. */
#navbar-custom-message {
    position: sticky;
    top: 0;
    z-index: 11;
    padding: 10px;
    text-align: center;
    font-size: 1.125rem; /* 18px at 16px/1rem */
    font-weight: 450;
    letter-spacing: 0.01em;
    background: var(--announcement-banner-background);
    color: var(--announcement-banner-foreground);
    border-bottom: 1px solid var(--announcement-banner-border);
}
#navbar-custom-message a {
        color: var(--announcement-banner-foreground);
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-color: var(--announcement-banner-link-underline);
        text-decoration-thickness: 2px;
        text-underline-offset: 2px;
        transition: text-decoration-color 0.2s;
    }
#navbar-custom-message a:hover {
        text-decoration-color: var(--announcement-banner-foreground);
    }

details summary::-webkit-details-marker {
    /* Hide the default arrow on Safari. */
    display: none;
}

.top-menu :focus-visible {
    /* Show white outline by default */
    /* This overrides outline-style: auto which
       renders a double outline of white and dark blue */
    outline: 1px solid hsl(0deg 0% 100%);
}

.top-menu .top-menu-item:focus-visible {
        outline-offset: -2px;
    }

.top-menu .nav-menu-label:focus-visible {
        outline-offset: -2px;
    }

.nav-zulip-logo {
    background-image: url("data:image/svg+xml,%3Csvg width=%27108%27 height=%2728%27 viewBox=%270 0 108 28%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cg clip-path=%27url%28%23clip0_555_12341234%29%27%3E%3Cpath d=%27M25.0534 4.18667C25.0534 5.59714 24.4217 6.85034 23.4589 7.6106L14.1128 15.9802C13.9392 16.1294 13.7136 15.8888 13.8388 15.688L17.267 8.80536C17.3631 8.61266 17.2385 8.37582 17.0414 8.37582H3.7444C1.68498 8.37582 0 6.49104 0 4.18791C0 1.88416 1.68498 6.14715e-07 3.7444 6.14715e-07H21.309C23.3684 -0.00124264 25.0534 1.88353 25.0534 4.18667ZM3.7444 28H21.309C23.3684 28 25.0534 26.1152 25.0534 23.8121C25.0534 21.5083 23.3684 19.6242 21.309 19.6242H8.01203C7.81489 19.6242 7.69029 19.3873 7.78638 19.1946L11.2146 12.312C11.3398 12.1112 11.1142 11.8706 10.9406 12.0198L1.59447 20.3882C0.631713 21.1478 0 22.4016 0 23.8121C0 26.1152 1.68498 28 3.7444 28ZM36.136 20.2825L43.8715 9.11804V9.02107H36.8588V5.97633H48.6431V8.10292L41.0762 19.1225V19.2195H48.764V22.2642H36.136V20.2825V20.2825ZM57.1505 5.97633V15.353C57.1505 18.1559 58.2106 19.5819 60.0909 19.5819C62.0189 19.5819 63.0789 18.2286 63.0789 15.353V5.97633H66.7421V15.1105C66.7421 20.137 64.2116 22.5291 59.97 22.5291C55.8728 22.5291 53.4631 20.2576 53.4631 15.0621V5.97633H57.1505V5.97633ZM72.3333 5.97633H76.0207V19.1704H82.4792V22.2636H72.3333V5.97633ZM90.7454 5.97633V22.2636H87.058V5.97633H90.7454ZM96.3359 6.1939C97.4686 6.00058 99.0593 5.85574 101.3 5.85574C103.566 5.85574 105.181 6.29088 106.265 7.16054C107.301 7.98233 108 9.33561 108 10.9301C108 12.5252 107.47 13.8785 106.506 14.7966C105.253 15.9808 103.397 16.5123 101.228 16.5123C100.747 16.5123 100.313 16.4881 99.9756 16.4396V22.2636H96.3366V6.1939H96.3359ZM99.975 13.5888C100.288 13.6615 100.674 13.6851 101.204 13.6851C103.156 13.6851 104.361 12.6943 104.361 11.0271C104.361 9.52894 103.324 8.63442 101.493 8.63442C100.746 8.63442 100.24 8.70715 99.975 8.77926V13.5888V13.5888Z%27 fill=%27white%27%3E%3C/path%3E%3C/g%3E%3Cdefs%3E%3CclipPath id=%27clip0_555_12341234%27%3E%3Crect width=%27108%27 height=%2728%27 fill=%27white%27%3E%3C/rect%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 108px;
}

.top-menu {
    position: fixed;
    width: 100%;
    background: hsl(240deg 100% 10% / 60%);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    color: hsl(0deg 0% 100%);
    z-index: 10;
    overflow: hidden;
    transition: background-color 0.3s ease-out;
}

.top-menu:hover {
        background: hsl(240deg 100% 10% / 85%);
    }

.top-menu-container {
    /*   1280px + 32px for paddings on the edges */
    max-width: 1312px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.top-menu-logo {
    overflow: hidden;
    opacity: 0.85;
    /* 14*2 = 28px = height of logo svg */
    padding: 14px;
    margin: 0 16px;
    flex-shrink: 0;
}

.top-menu-items-group-1,
.top-menu-items-group-2 {
    display: flex;
}

.top-menu-items-group-1 {
    margin-right: 16px;
}

.top-menu-mobile a:visited {
        color: hsl(0deg 0% 100% / 80%);
    }

.top-menu-mobile a,.top-menu-mobile a:hover,.top-menu-mobile a:focus {
        color: hsl(0deg 0% 100% / 80%);
    }

.top-menu-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    padding: 14px;
    -webkit-user-select: none;
            user-select: none;
    cursor: pointer;
    transition-property: background, color;
    transition-duration: 0.05s;
    transition-timing-function: ease-out;
}

.top-menu-item,.top-menu-item:visited {
        color: hsl(0deg 0% 100% / 80%);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

.top-menu-item:hover {
    color: hsl(0deg 0% 100%);
    background: hsl(240deg 100% 10% / 10%);
    transition-duration: 0.05s;
}

.top-menu-item:active {
    color: hsl(0deg 0% 100%);
    background: hsl(240deg 100% 10% / 20%);
}

.top-menu-item.top-menu-tab,
.top-menu-item.top-menu-tab:hover,
.top-menu-item.top-menu-tab:active {
    opacity: 1;
    background: none;
}

.top-menu-item-spacer {
    flex-shrink: 1;
    flex-grow: 1;
}

.top-menu-item input[type="radio"],
.top-menu-tab-input-unselect {
    display: none;
}

.top-menu-item.top-menu-tab {
    padding: 0;
    position: relative;
    cursor: auto;
}

.top-menu-tab-unselect {
    position: absolute;
    inset: 0;
    z-index: 0;
    cursor: pointer;
}

.top-menu-tab-input:checked + label {
    transition:
        background,
        color 0.2s;
    background: hsl(240deg 100% 10% / 60%);
    color: hsl(0deg 0% 100%);
    pointer-events: none;
    -webkit-user-select: none;
            user-select: none;
}

.top-menu-tab label {
    padding: 16px;
    cursor: pointer;
    transition-property: background, color;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    z-index: 5;
    color: hsl(0deg 0% 100% / 80%);

    /* Override bootstrap */
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
}

.top-menu-tab label::after {
    pointer-events: none;
    content: " ";
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgba%28255%2c255%2c255%2c0.8%29%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 class=%27feather feather-chevron-down%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
    background-size: 16px;
    margin-left: 2px;
    margin-right: -8px;
    background-repeat: no-repeat;
}

.top-menu-tab .top-menu-tab-input:checked + label::after {
    transform: rotate(-180deg);
}

.top-menu-tab .top-menu-tab-input:not(:checked) + label:hover {
    background: hsl(240deg 100% 10% / 10%);
    color: hsl(0deg 0% 100%);
    transition-duration: 0.1s;
}

.top-menu-tab .top-menu-tab-input:not(:checked) + label:active {
    background: hsl(240deg 100% 10% / 20%);
    color: hsl(0deg 0% 100%);
}

.top-menu-tab label.top-menu-tab-user-label::after {
    display: block;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-45%);
}

.top-menu-tab
    .top-menu-tab-input:checked
    + label.top-menu-tab-user-label::after {
    transform: translateY(-45%) rotate(-180deg);
}

.top-menu-submenu-backdrop {
    background: hsl(240deg 100% 10% / 60%);
    opacity: 0;
    height: 0;
    width: 100%;
    transition: 0.05s;
    transition-property:
        height, opacity; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
}

.top-menu-tab-input-unselect:not(:checked) + .top-menu-submenu-backdrop {
    height: 334px;
    opacity: 1;
}

.top-menu-tab-label-unselect {
    position: absolute;
    display: none;
    /* To account for scrollbar if any present. */
    right: 15px;
    top: var(--navbar-height);
    width: 44px;
    height: 44px;
    background-size: 32px;
    background-repeat: no-repeat;
    /* Close menu icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgba%28255,255,255,1%29%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cline x1=%2718%27 y1=%276%27 x2=%276%27 y2=%2718%27%3e%3c/line%3e%3cline x1=%276%27 y1=%276%27 x2=%2718%27 y2=%2718%27%3e%3c/line%3e%3c/svg%3e");
    background-position: center;
    cursor: pointer;
    opacity: 0.5;
}

.top-menu-tab-label-unselect:hover {
    opacity: 0.8;
}

.top-menu-tab-label-unselect:active {
    opacity: 1;
}

.top-menu-tab-input-unselect:not(:checked) ~ .top-menu-tab-label-unselect {
    display: block;
}

.top-menu-submenu {
    position: absolute;
    top: var(--navbar-height);
    display: flex;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    transition-property: opacity, visibility;
}

#case-studies-submenu {
    width: 100vw;
    position: fixed;
    left: 0;
    justify-content: center;
}

@media (width <= 1300px) {

#case-studies-submenu {
        flex-wrap: wrap;
        place-content: baseline flex-start;
        height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
        width: 100vw;
        padding-left: 10px;
}
    }

#case-studies-submenu > .top-menu-submenu-column:last-child {
        /* Bottom padding provides space for the scroll fade
           indicator so no content is obscured at end of scroll. */
        padding-bottom: 50px;
    }

#case-studies-submenu {

    /* Fade bottom edge to hint at scrollable content. */
    mask-image: linear-gradient(
        to bottom,
        hsl(0deg 0% 0%) calc(100% - 50px),
        transparent 100%
    );
}

/* Prevent background scrolling when the case studies dropdown
   covers the full viewport height on narrower desktop screens.
   Lower bound excludes widths where the desktop navbar is hidden. */
@media (width > 1100px) and (width <= 1300px) {
    body:has(#top-menu-tab-case-studies:checked) {
        overflow: hidden;
    }
}

.top-menu-tab .top-menu-tab-user-label {
    max-width: 140px;
    padding-right: 28px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-menu-tab-user-img {
    width: 24px;
    height: 24px;
    display: inline;
    vertical-align: middle;
    border-radius: 3px;
    margin-right: 4px;
}

.top-menu-mobile-user-img {
    width: 28px;
    height: 28px;
    display: inline;
    vertical-align: text-top;
    border-radius: 3px;
    margin-right: 4px;
}

@media (width <= 1400px) {
    .top-menu-submenu.signup-column {
        justify-content: flex-end;
        right: 55px;
    }
}

@media (width <= 1024px) {
    .top-menu-tab .top-menu-tab-user-label {
        max-width: 40px;
    }

    .top-menu-tab .top-menu-tab-user-label .top-menu-tab-user-name {
        display: none;
    }
}

.top-menu-tab-input:checked ~ .top-menu-submenu {
    opacity: 1;
    visibility: visible;
}

.top-menu-submenu-column {
    display: flex;
    flex-direction: column;
    padding-top: 16px;
    flex-shrink: 0;
    max-width: 420px;
}

.top-menu-submenu-column .top-menu-submenu-list {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

.top-menu-submenu-column .top-menu-submenu-list .top-menu-submenu-list-item {
            font-size: 17px;
            font-weight: 400;
            color: hsl(0deg 0% 100% / 90%);
            border-radius: 2px;
            cursor: pointer;
        }

.top-menu-submenu-column .top-menu-submenu-list .top-menu-submenu-list-item:hover {
                background: hsl(0deg 0% 100% / 10%);
            }

.top-menu-submenu-column .top-menu-submenu-list .top-menu-submenu-list-item:active {
                background: hsl(0deg 0% 100% / 20%);
            }

.top-menu-submenu-column .top-menu-submenu-list .top-menu-submenu-list-item a {
                display: block;
                padding: 6px 16px;
                -webkit-text-decoration: none;
                text-decoration: none;
                line-height: 125%;
                color: hsl(0deg 0% 100% / 90%);
            }

.top-menu-mobile .top-menu-mobile-item a {
    padding: 10px 10px 10px 53px;
    border-radius: 2px;
    cursor: pointer;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: block;
}

.top-menu-mobile .top-menu-mobile-item a:hover {
        background: hsl(0deg 0% 100% / 10%);
    }

.top-menu-mobile .top-menu-mobile-item a:active {
        background: hsl(0deg 0% 100% / 20%);
    }

.top-menu-submenu-section {
    padding-left: 16px;
    font-size: 17px;
    opacity: 0.6;
    margin-bottom: 4px;
    letter-spacing: 2px;
}

.top-menu-mobile {
    display: none;
    background: hsl(240deg 100% 10% / 40%);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    z-index: 20;

    /* No `top` — defaults to auto, which resolves to the static
       position (just below the sticky banner when one is present,
       or at the viewport top otherwise). Same trick as .top-menu
       above. The [open] state below pins to top: 0 so the expanded
       panel covers the full viewport. */
    position: fixed;
    left: 0;
    right: 0;
    height: var(--navbar-height);

    overflow: auto;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.02em;
    font-feature-settings:
        "pnum" on,
        "lnum" on;
    color: hsl(0deg 0% 100% / 80%);

    overscroll-behavior: contain;
}

.top-menu-mobile[open] {
    top: 0;
    bottom: 0;
    height: 100%;
    background: hsl(240deg 100% 5.9% / 80%);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
}

/* When a banner is present, keep it visible above the open menu by
   pushing the panel down by the banner's actual rendered height.
   --announcement-banner-height is set by header.ts only while the menu is open
   (via a ResizeObserver scoped to that interval), so the offset
   stays accurate when the announcement wraps onto multiple lines on
   narrow viewports without paying for an observer the rest of the
   time. The 42px fallback covers the first frame before JS runs. */
:has(#navbar-custom-message) .top-menu-mobile[open] {
    top: var(--announcement-banner-height, 42px);
    height: calc(100% - var(--announcement-banner-height, 42px));
}

.top-menu-mobile-items-group-1,
.top-menu-mobile-items-group-2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

.top-menu-mobile-items-group-1 summary,
.top-menu-mobile-items-group-1 a,
.top-menu-mobile-items-group-2 summary,
.top-menu-mobile-items-group-2 a {
    cursor: pointer;
    transition: background 0.4s ease-out;
}

.top-menu-mobile-items-group-1 summary,
.top-menu-mobile-items-group-2 summary {
    padding: 10px 10px 10px 23px;
    -webkit-user-select: none;
            user-select: none;
}

.top-menu-mobile-items-group-1 a,
.top-menu-mobile-items-group-2 a {
    padding-left: 53px;
}

@media (hover: hover) and (pointer: fine) {
    .top-menu-mobile-items-group-1 summary:hover,
    .top-menu-mobile-items-group-2 summary:hover {
        background: hsl(0deg 0% 100% / 10%);
        transition: none;
    }
}

.top-menu-mobile-items-group-1 summary:active,
.top-menu-mobile-items-group-2 summary:active {
    background: hsl(0deg 0% 100% / 10%);
}

/* We display: block here instead of the default
   display: list-item largely for the sake of Safari,
   which as of early 2026 still ignores the ::marker
   line below. Because we're overriding the default
   markers on all browsers, this display mode doesn't
   impact other browsers, either. */
.top-menu-mobile-item-summary {
    display: block;
}

.top-menu-mobile-item-summary::marker {
    content: "";
}

.top-menu-mobile-item-summary::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    margin-top: -4px;
    margin-right: 4px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgba%28255%2c255%2c255%2c0.7%29%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 class=%27feather feather-chevron-down%27%3e%3cpolyline points=%276 9 12 15 18 9%27%3e%3c/polyline%3e%3c/svg%3e");
    transition: transform 0.12s ease-out;
    transform: rotate(-90deg);
}

.top-menu-mobile details[open] > summary::before {
    transform: rotate(0deg);
}

.top-menu-mobile-submenu {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    margin-bottom: 18px;
}

.top-menu-mobile-submenu .top-menu-submenu-list {
        margin: 0;
        list-style: none;
    }

.top-menu-mobile-submenu .top-menu-submenu-list .top-menu-submenu-list-item {
            font-size: 17px;
            font-weight: 400;
            line-height: 26px;
            color: hsl(0deg 0% 100% / 90%);
            border-radius: 2px;
            cursor: pointer;
        }

.top-menu-mobile-submenu .top-menu-submenu-list .top-menu-submenu-list-item:hover {
                background: hsl(0deg 0% 100% / 10%);
            }

.top-menu-mobile-submenu .top-menu-submenu-list .top-menu-submenu-list-item:active {
                background: hsl(0deg 0% 100% / 20%);
            }

.top-menu-mobile-submenu .top-menu-submenu-list .top-menu-submenu-list-item a {
                -webkit-text-decoration: none;
                text-decoration: none;
                padding: 5px 0 5px 53px;
                display: block;
            }

.top-menu-mobile-submenu-section {
    letter-spacing: 0.1em;
    color: hsl(0deg 0% 100% / 40%);
    text-transform: uppercase;
    margin-top: 8px;
    font-size: 17px;
    padding-left: 53px;
    -webkit-user-select: none;
            user-select: none;
    pointer-events: none;
}

.top-menu-mobile-summary {
    cursor: pointer;
    position: sticky;
    top: 0;
    z-index: 1;
    transition: 0.3s;
    transition-property: background, -webkit-backdrop-filter;
    transition-property: background, backdrop-filter;
    transition-property: background, backdrop-filter, -webkit-backdrop-filter;
    height: var(--navbar-height);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-menu-mobile-summary:active {
    background: hsl(229deg 47% 17% / 80%);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.top-menu-mobile[open] > .top-menu-mobile-summary {
    background: hsl(229deg 47% 17% / 80%);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

/* For browsers which don't support blur */
@supports not (
    ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) or (-webkit-backdrop-filter: blur(10px))
) {
    .top-menu {
        background: hsl(240deg 100% 10% / 80%);
    }

    .top-menu-mobile {
        background: hsl(240deg 100% 10% / 80%);
    }

    .top-menu-mobile[open] {
        background: hsl(240deg 100% 5.9% / 100%);
    }

    .top-menu-mobile-summary:active {
        background: hsl(229deg 47% 17% / 95%);
    }

    .top-menu-mobile[open] > .top-menu-mobile-summary {
        background: hsl(229deg 47% 17% / 95%);
    }
}

.top-menu-mobile[open] > .top-menu-mobile-summary:active {
    background: hsl(229deg 47% 20% / 100%);
}

.top-menu-mobile-summary::marker {
    content: "";
    display: none;
}

.top-menu-mobile-summary::after {
    display: block;
    height: 32px;
    float: right;
    content: "MENU";
    line-height: 32px;
    color: hsl(0deg 0% 100% / 80%);
    padding-right: 38px;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 2px;
    margin-right: 16px;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.9%29%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cline x1=%273%27 y1=%2712%27 x2=%2721%27 y2=%2712%27%3e%3c/line%3e%3cline x1=%273%27 y1=%276%27 x2=%2721%27 y2=%276%27%3e%3c/line%3e%3cline x1=%273%27 y1=%2718%27 x2=%2721%27 y2=%2718%27%3e%3c/line%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 32px;
    background-position: right;
    transition:
        background,
        letter-spacing 0.2s; /* stylelint-disable-line plugin/no-low-performance-animation-properties */
}

.top-menu-mobile-summary:active::after {
    letter-spacing: 2px;
}

.top-menu-mobile[open] > summary::after {
    content: "Close";
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.9%29%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3e%3cline x1=%2718%27 y1=%276%27 x2=%276%27 y2=%2718%27%3e%3c/line%3e%3cline x1=%276%27 y1=%276%27 x2=%2718%27 y2=%2718%27%3e%3c/line%3e%3c/svg%3e");
}

@media (hover: hover) and (pointer: fine) {
    .top-menu-mobile-summary:hover {
        background: hsl(229deg 47% 18% / 100%);
    }

    .top-menu-mobile[open] > .top-menu-mobile-summary:hover {
        background: hsl(229deg 47% 18% / 100%);
    }

    .top-menu-mobile-summary:hover::after {
        letter-spacing: 4px;
    }
}

/* menu responsivity */
@media (width <= 1311px) {
    .top-menu {
        background: hsl(240deg 100% 10% / 50%);
    }

    .top-menu-logo {
        margin-right: 0;
    }

    .top-menu-item {
        padding: 16px 12px;
        font-size: 18px;
        font-weight: 500;
    }
}

@media (width <= 1100px) {
    .top-menu {
        display: none;
    }

    .top-menu-logo {
        margin-right: unset;
        display: inline-block;
    }

    .top-menu-mobile {
        display: block;
    }
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/.pnpm/css-loader@7.1.4_webpack@5.106.2/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].use[1]!../node_modules/.pnpm/postcss-loader@8.2.1_postcss@8.5.14_typescript@6.0.3_webpack@5.106.2/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].use[2]!./styles/portico/footer.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
    --color-footer-background: hsl(238deg 28% 27%);
    --color-links: hsl(238deg 100% 82%);
}

@media (prefers-color-scheme: dark) {

:root {
        --color-footer-background: hsl(238deg 28% 21%);
}
    }

/* These need to be here so that other pages don't need to import a different library for these icons to work */
.footer-social-icon-mastodon {
    --footer-social-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 fill=%27none%27 viewBox=%270 0 28 28%27%3e%3cg fill=%27%23A3A5F8%27%3e%3cpath d=%27M18.42 16.43h2.38v-6.02c0-1.23-.3-2.2-.94-2.93a3.27 3.27 0 0 0-2.55-1.1c-1.22 0-2.15.47-2.76 1.41l-.6 1-.58-1a3.07 3.07 0 0 0-2.76-1.4c-1.05 0-1.9.37-2.55 1.1a4.3 4.3 0 0 0-.94 2.92v6.02H9.5v-5.84c0-1.23.52-1.86 1.55-1.86 1.15 0 1.72.74 1.72 2.2v3.2h2.38v-3.2c0-1.46.57-2.2 1.71-2.2 1.04 0 1.56.63 1.56 1.86v5.84Z%27/%3e%3cpath fill-rule=%27evenodd%27 d=%27M3 0a3 3 0 0 0-3 3v22a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3H3Zm18.39 3.6s3.26 1.45 3.26 6.43c0 0 .04 3.66-.46 6.2-.31 1.63-2.81 3.4-5.69 3.74-1.5.18-2.97.34-4.54.27-2.57-.12-4.6-.62-4.6-.62 0 .24.02.48.05.72.33 2.53 2.51 2.68 4.58 2.76 2.09.07 3.94-.52 3.94-.52l.09 1.89s-1.46.78-4.06.92c-1.43.08-3.21-.03-5.28-.58-4.5-1.19-5.27-5.98-5.39-10.84a100.6 100.6 0 0 1-.02-3v-.94c0-4.97 3.27-6.43 3.27-6.43 1.64-.76 4.46-1.07 7.39-1.1H14c2.93.03 5.75.34 7.39 1.1Z%27 clip-rule=%27evenodd%27/%3e%3c/g%3e%3c/svg%3e");
}

.footer-social-icon-bluesky {
    --footer-social-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 viewBox=%270 0 568 501%27 fill=%27none%27%3e%3cpath fill=%27%23A3A5F8%27 d=%27M123.121 33.664C188.241 82.553 257.473 181.247 284 234.247c26.527-53 95.759-151.694 160.879-200.583C491.866-1.595 568-26.713 568 60.142c0 17.34-9.945 145.713-15.778 166.555-20.275 72.453-94.155 90.933-159.875 79.706C507.222 326.108 536.444 388.731 473.333 451.355c-119.86 118.875-172.205-29.838-185.624-67.928-2.46-6.984-3.61-10.252-3.61-7.474 0-2.778-1.149.49-3.609 7.474-13.42 38.09-65.764 186.803-185.624 67.928-63.111-62.624-33.89-125.247 64.985-145.345-65.72 11.227-139.6-7.253-159.875-79.706C9.945 205.855 0 77.482 0 60.142 0-26.713 76.134-1.595 123.121 33.664Z%27/%3e%3c/svg%3e");
}

.footer-social-icon-linkedin {
    --footer-social-icon: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2728%27 height=%2728%27 fill=%27none%27 viewBox=%270 0 28 28%27%3e%3cg clip-path=%27url%28%23a%29%27%3e%3cpath fill=%27%23A3A5F8%27 d=%27M28 3a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v22a3 3 0 0 0 3 3h22a3 3 0 0 0 3-3V3ZM8.27 23.9H4.19V10.5h4.18v13.4h-.1ZM6.17 8.7A2.42 2.42 0 0 1 3.8 6.3c0-1.3 1.1-2.4 2.39-2.4 1.3 0 2.39 1.1 2.39 2.4 0 1.3-1 2.4-2.4 2.4Zm17.65 15.2h-4.09v-6.5c0-1.5 0-3.5-2.2-3.5-2.18 0-2.48 1.7-2.48 3.4v6.6h-4.09V10.5h3.99v1.8h.1c.6-1 1.89-2.2 3.88-2.2 4.19 0 4.98 2.8 4.98 6.4v7.4h-.1Z%27/%3e%3c/g%3e%3cdefs%3e%3cclipPath id=%27a%27%3e%3cpath fill=%27white%27 d=%27M0 0h28v28H0z%27/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}

#footer {
    background: var(--color-footer-background);
    box-sizing: border-box;
}

#footer ul {
        /* Override bootstrap defaults */
        list-style: none;
        margin: 0;
    }

#footer .footer__container {
        max-width: 1132px;
        padding: 52px 52px 0;
        display: flex;
        justify-content: space-between;
        gap: 40px;
        flex-flow: row wrap;
        margin: 0 auto;
    }

#footer .footer__section {
        flex-shrink: 0;
    }

#footer .footer__section-title {
        display: block;
        font-style: normal;
        font-weight: 700;
        font-size: 18px;
        line-height: 133%;
        letter-spacing: 0.1em;
        color: hsl(0deg 0% 100%);
        opacity: 0.8;
        text-transform: uppercase;
        border-bottom: 0;
        margin-bottom: 0;
        margin-block: 0;
    }

#footer .footer__section ul {
        margin: 20px 0 28px;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

#footer .footer__section ul li {
            margin-bottom: 10px;
        }

#footer li {
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: var(--color-links);
        border-bottom: 1px solid var(--color-footer-background);
    }

#footer a,#footer a:visited {
        font-weight: 400;
        font-size: 16px;
        color: var(--color-links);
        -webkit-text-decoration: none;
        text-decoration: none;
    }

#footer a:hover,#footer a:focus {
        color: var(--color-links);
        border-bottom: 1px solid var(--color-links);
        transition: none;
        -webkit-text-decoration: none;
        text-decoration: none;
        outline: none;
    }

#footer .footer__legal {
        margin: 12px 0 0;
        padding: 0 52px;
        border-top: 1px solid hsl(0deg 0% 100% / 10%);
    }

#footer .footer__legal a {
            border-bottom: 1px solid var(--color-footer-background);
        }

#footer .footer__legal a:hover {
                border-bottom: 1px solid var(--color-links);
            }

#footer .footer__legal.footer__legal_not_corporate {
            margin-top: 0;
        }

#footer .footer__legal-container {
        max-width: 1132px;
        padding: 15px 0;
        display: flex;
        place-content: center space-between;
        flex-flow: row wrap;
        margin: 0 auto;

        box-sizing: border-box;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
    }

#footer .footer__legal-spacer {
        flex-grow: 1;
    }

#footer .footer__legal-container .copyright {
        color: hsl(0deg 0% 100% / 50%);
    }

@media screen and (width <= 600px) {

#footer .footer__legal-container .copyright {
            /* Maintain space between copyright
               and legal links when flex-wrapping
               at narrower viewports. */
            margin-bottom: 8px;
    }
        }

#footer .footer__legal-container a {
        font-size: 14px;
        line-height: 18px;
    }

#footer .footer__legal-container a:not(:last-child) {
        margin-right: 2em;
    }

#footer .footer__section .extra_margin {
        margin-bottom: 40px;
    }

#footer .footer-social-links {
        margin: -25px 0 20px;
        display: flex;
        gap: 8px;
    }

#footer .footer-social-icon {
        width: 28px;
        height: 28px;
        display: inline-block;
        flex-shrink: 0;
        background-color: hsl(238.59deg 85.86% 80.59%);
        mask-position: center;
        mask-repeat: no-repeat;
        mask-image: var(--footer-social-icon);
        transition: background-color 150ms ease-out;
    }

#footer .footer-social-icon:hover {
            background-color: hsl(238.6deg 84.31% 90%);
        }

#footer .footer-social-icon:active {
            background-color: hsl(240deg 86.67% 97.06%);
        }

/* #footer responsivity and global fixes */

@media (width <= 1280px) {
        #footer .footer__container {
            justify-content: flex-start;
            row-gap: 0;
        }

        #footer .footer__legal-container {
            justify-content: flex-end;
        }
    }

@media (width <= 600px) {
        #footer .footer__legal {
            padding: 0 10px;
        }

        #footer .footer__legal-spacer {
            width: 100%;
        }

        #footer .footer__legal-container {
            column-gap: 20px;
            justify-content: center;
        }

            #footer .footer__legal-container a:not(:last-child) {
                margin-right: 0;
            }
    }

@media (width <= 400px) {
        #footer .footer__container {
            gap: 0;
            flex-direction: column;
        }

        #footer .footer__section .extra_margin {
            margin-bottom: 36px;
        }
    }


/*# sourceMappingURL=styles_portico_footer_css-styles_portico_navbar_css.css.map*/