/* =========================================================
   SIMCITY.LT
   Portal / Mega-menu design
   ========================================================= */

:root {
    --background: #f5f6f8;
    --white: #ffffff;
    --text: #171a21;
    --muted: #697180;
    --border: #e4e7ec;

    --commerce: #ffb52e;
    --business: #4387f5;
    --entertainment: #916cf4;
    --personal: #40b982;
    --admin: #36b9c9;

    --header-height: 76px;

    --shadow-small:
        0 5px 18px rgba(20, 30, 50, 0.06);

    --shadow-menu:
        0 24px 60px rgba(20, 30, 50, 0.16);

    --shadow-card:
        0 10px 30px rgba(20, 30, 50, 0.07);
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 95px;
}

body {
    margin: 0;

    background: var(--background);
    color: var(--text);

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}


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

.site-header {
    z-index: 1000;
    position: sticky;
    top: 0;

    z-index: 1000;

    height: var(--header-height);

    background: rgba(255,255,255,0.96);

    border-bottom: 1px solid var(--border);

    backdrop-filter: blur(18px);
}

.header-inner {
    width: min(1440px, calc(100% - 50px));

    height: 100%;
    margin: 0 auto;

    display: flex;
    align-items: center;
}


/* =========================================================
   BRAND
   ========================================================= */

.brand {
    flex: 0 0 auto;

    margin-right: 55px;

    font-size: 24px;
    font-weight: 850;

    letter-spacing: -0.06em;
}

.brand-main {
    color: var(--text);
}

.brand-domain {
    color: #9ca3af;
}


/* =========================================================
   MAIN NAV
   ========================================================= */

.main-nav {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: stretch;

    height: 100%;
}

.nav-category {
    position: relative;
    z-index: 1002;
    position: relative;

    height: 100%;
}

.nav-category-link {
    position: relative;

    height: 100%;
    padding: 0 18px;

    display: flex;
    align-items: center;
    gap: 7px;

    color: #444b57;

    font-size: 14px;
    font-weight: 650;

    transition:
        color 160ms ease,
        background 160ms ease;
}

.nav-category-link:hover {
    color: var(--text);
    background: #f7f8fa;
}

.nav-chevron {
    color: #9ba2ad;

    font-size: 15px;

    transition: transform 160ms ease;
}

.nav-category:hover .nav-chevron {
    transform: rotate(180deg);
}


/* =========================================================
   CATEGORY UNDERLINE
   ========================================================= */

.nav-category::after {
    content: "";

    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 0;

    height: 3px;

    border-radius: 3px 3px 0 0;

    background: var(--category-color);

    transform: scaleX(0);

    transition: transform 160ms ease;
}

.nav-category:hover::after {
    transform: scaleX(1);
}

.category-commerce {
    --category-color: var(--commerce);
}

.category-business {
    --category-color: var(--business);
}

.category-entertainment {
    --category-color: var(--entertainment);
}

.category-personal {
    --category-color: var(--personal);
}

.category-admin {
    --category-color: var(--admin);
}


/* =========================================================
   MEGA MENU
   ========================================================= */

.mega-menu {
    z-index: 1100;
    position: absolute;

    top: calc(100% + 1px);
    left: 50%;

    width: min(780px, 80vw);

    padding: 25px;

    background: var(--white);

    border: 1px solid var(--border);
    border-top: 3px solid var(--category-color);

    border-radius: 0 0 20px 20px;

    box-shadow: var(--shadow-menu);

    opacity: 0;
    visibility: hidden;

    transform: translate(-50%, -8px);

    transition:
        opacity 150ms ease,
        transform 150ms ease,
        visibility 150ms ease;
}

.nav-category:hover .mega-menu {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, 0);
}

.mega-menu-inner {
    display: grid;
    grid-template-columns: 185px 1fr;

    gap: 30px;
}


/* =========================================================
   MEGA MENU HEADING
   ========================================================= */

.mega-heading {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding-right: 20px;

    border-right: 1px solid var(--border);
}

.mega-number {
    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: var(--category-color);

    font-size: 11px;
    font-weight: 850;
}

.mega-title {
    font-size: 21px;
    font-weight: 800;

    letter-spacing: -0.035em;
}


/* =========================================================
   MEGA SERVICES
   ========================================================= */

.mega-services {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 5px 20px;
}

.mega-service {
    min-width: 0;
}

.mega-service-link {
    min-height: 43px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 9px 11px;

    border-radius: 9px;

    font-size: 14px;
    font-weight: 650;

    transition:
        background 130ms ease,
        color 130ms ease;
}

.mega-service-link:hover {
    background: #f2f5f8;
    color: var(--category-color);
}

.mega-service-count {
    min-width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #eef0f3;

    color: #737b88;

    font-size: 10px;
    font-weight: 800;
}


/* Nested menu */

.mega-service-children {
    padding: 0 11px 8px 22px;
}

.mega-service-children .mega-service-link {
    min-height: 32px;

    padding: 5px 8px;

    color: #707784;

    font-size: 12px;
    font-weight: 550;
}

.mega-service-children .mega-service-link::before {
    content: "—";

    margin-right: 7px;

    color: var(--category-color);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-button {
    display: none;

    margin-left: auto;

    width: 43px;
    height: 43px;

    padding: 10px;

    border: 1px solid var(--border);
    border-radius: 11px;

    background: white;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    height: 2px;

    margin: 4px 0;

    background: var(--text);

    border-radius: 2px;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-menu {
    display: none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #ffffff;
}

.hero-inner {
    position: relative;
    z-index: 2;

    width: min(1250px, calc(100% - 50px));

    margin: 0 auto;

    padding: 90px 0;
}

.hero-eyebrow {
    display: inline-flex;

    padding: 7px 12px;

    border-radius: 7px;

    background: #171a21;
    color: white;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.hero h1 {
    margin: 25px 0 18px;

    max-width: 850px;

    font-size: clamp(65px, 8vw, 115px);
    line-height: 0.88;

    letter-spacing: -0.075em;

    font-weight: 850;
}

.hero h1 span {
    color: var(--business);
}

.hero p {
    max-width: 600px;

    margin: 0;

    color: var(--muted);

    font-size: 20px;
    line-height: 1.5;
}


/* =========================================================
   HERO BACKGROUND
   ========================================================= */

.hero-background {
    position: absolute;

    border-radius: 50%;

    filter: blur(2px);
}

.hero-background-one {
    width: 430px;
    height: 430px;

    right: 5%;
    top: 60px;

    background:
        radial-gradient(
            circle,
            rgba(67,135,245,0.18),
            rgba(145,108,244,0.04) 70%,
            transparent
        );
}

.hero-background-two {
    width: 300px;
    height: 300px;

    left: 35%;
    bottom: -160px;

    background:
        radial-gradient(
            circle,
            rgba(64,185,130,0.15),
            transparent 70%
        );
}


/* =========================================================
   HERO CATEGORY LINKS
   ========================================================= */

.hero-links {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 35px;
}

.hero-category {
    display: flex;
    align-items: center;

    gap: 8px;

    padding: 9px 13px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: white;

    color: #555d69;

    font-size: 12px;
    font-weight: 650;

    box-shadow: var(--shadow-small);

    transition:
        transform 150ms ease,
        border-color 150ms ease;
}

.hero-category:hover {
    transform: translateY(-2px);

    border-color: var(--category-color);
}

.hero-category-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--category-color);
}


/* =========================================================
   DIRECTORY
   ========================================================= */

.directory {
    width: min(1250px, calc(100% - 50px));

    margin: 0 auto;
}


/* =========================================================
   CATEGORY SECTION
   ========================================================= */

.category-section {
    scroll-margin-top: 95px;

    margin: 75px 0;
}

.category-header {
    display: flex;
    align-items: flex-start;

    gap: 20px;

    margin-bottom: 28px;
}

.category-number {
    width: 56px;
    height: 56px;

    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;

    background: var(--category-color);

    font-size: 14px;
    font-weight: 850;
}

.category-eyebrow {
    color: #9ca3ae;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.category-header h2 {
    margin: 2px 0 0;

    font-size: clamp(38px, 5vw, 62px);

    line-height: 0.95;

    letter-spacing: -0.06em;
}

.category-header p {
    max-width: 650px;

    margin: 9px 0 0;

    color: var(--muted);

    font-size: 14px;
}


/* =========================================================
   SERVICE GRID
   ========================================================= */

.category-content {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 16px;
}

.category-content > .service-group {
    grid-column: span 4;
}

.category-content > .service-group:has(.service-children) {
    grid-column: span 12;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.service-card {
    position: relative;

    display: block;

    min-height: 170px;

    overflow: hidden;

    background: white;

    border: 1px solid var(--border);
    border-radius: 17px;

    box-shadow: var(--shadow-small);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.service-card:hover {
    transform: translateY(-4px);

    border-color: var(--category-color);

    box-shadow: var(--shadow-card);
}

.service-color {
    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background: var(--category-color);
}

.service-card-content {
    position: relative;

    min-height: 170px;

    padding: 24px;
}

.service-type {
    color: #a0a6af;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.service-card h3 {
    margin: 9px 0 0;

    font-size: 26px;

    line-height: 1.05;

    letter-spacing: -0.045em;
}

.service-card p {
    max-width: 500px;

    margin: 9px 0 0;

    color: var(--muted);

    font-size: 13px;
}

.service-arrow {
    position: absolute;

    right: 20px;
    bottom: 18px;

    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f3f6;

    font-size: 17px;

    transition:
        background 160ms ease,
        transform 160ms ease;
}

.service-card:hover .service-arrow {
    background: var(--category-color);

    transform: translate(2px, -2px);
}


/* =========================================================
   CHILDREN
   ========================================================= */

.service-children {
    margin-top: 10px;

    padding: 18px;

    background: #eef1f5;

    border-radius: 15px;
}

.children-title {
    margin-bottom: 11px;

    color: #737b87;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.children-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 10px;
}

.children-grid .service-card {
    min-height: 110px;
}

.children-grid .service-card-content {
    min-height: 110px;

    padding: 17px;
}

.children-grid .service-card h3 {
    font-size: 17px;
}

.children-grid .service-card p {
    display: none;
}

.children-grid .service-arrow {
    width: 27px;
    height: 27px;

    right: 12px;
    bottom: 12px;

    font-size: 13px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    margin-top: 110px;

    background: #202632;

    color: white;
}

.footer-inner {
    width: min(1250px, calc(100% - 50px));

    min-height: 115px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr auto auto;

    align-items: center;

    gap: 35px;
}

.footer-text {
    color: #9da6b4;

    font-size: 13px;
}

.footer-year {
    color: #6f7988;

    font-size: 12px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 1000px) {

    .brand {
        margin-right: 20px;
    }

    .nav-category-link {
        padding: 0 10px;

        font-size: 12px;
    }

    .mega-menu {
        width: min(650px, 90vw);
    }

    .category-content > .service-group {
        grid-column: span 6;
    }

    .category-content > .service-group:has(.service-children) {
        grid-column: span 12;
    }

    .children-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

    :root {
        --header-height: 68px;
    }

    .header-inner {
        width: calc(100% - 30px);
    }

    .brand {
        margin-right: 0;
    }

    .main-nav {
        display: none;
    }

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

    .mobile-menu {
        position: fixed;

        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;

        z-index: 999;

        display: block;

        background: white;

        overflow-y: auto;

        transform: translateX(100%);

        transition: transform 200ms ease;
    }

    .menu-open .mobile-menu {
        transform: translateX(0);
    }

    .mobile-menu-inner {
        padding: 15px;
    }

    .mobile-category {
        padding: 17px 0;

        border-bottom: 1px solid var(--border);
    }

    .mobile-category-title {
        display: block;

        font-size: 22px;
        font-weight: 800;

        letter-spacing: -0.04em;
    }

    .mobile-services {
        margin-top: 9px;

        padding-left: 12px;

        border-left: 3px solid var(--category-color);
    }

    .mobile-service-link {
        display: block;

        padding: 8px 5px;

        color: #4e5662;

        font-size: 14px;
        font-weight: 600;
    }

    .mobile-service-children {
        padding-left: 15px;

        border-left: 1px solid var(--border);
    }

    .mobile-service-children .mobile-service-link {
        color: #7b838e;

        font-size: 13px;
        font-weight: 500;
    }

    .hero {
        min-height: auto;
    }

    .hero-inner {
        width: calc(100% - 30px);

        padding: 70px 0;
    }

    .hero h1 {
        font-size: clamp(55px, 16vw, 90px);
    }

    .hero p {
        font-size: 17px;
    }

    .directory {
        width: calc(100% - 30px);
    }

    .category-content > .service-group {
        grid-column: span 12;
    }

    .category-content > .service-group:has(.service-children) {
        grid-column: span 12;
    }

    .children-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        width: calc(100% - 30px);

        grid-template-columns: 1fr;

        gap: 7px;

        padding: 28px 0;
    }

}


@media (max-width: 430px) {

    .hero h1 {
        font-size: 53px;
    }

    .hero-links {
        gap: 6px;
    }

    .hero-category {
        padding: 8px 10px;

        font-size: 11px;
    }

    .category-header {
        gap: 13px;
    }

    .category-number {
        width: 46px;
        height: 46px;

        border-radius: 13px;
    }

    .category-header h2 {
        font-size: 39px;
    }

}

/* =========================================================
   FIRST NAV DROPDOWNS
   Keep Commerce and Business fully inside the viewport.
   ========================================================= */

.nav-category.category-commerce .mega-menu,
.nav-category.category-business .mega-menu {
    left: 0;
    right: auto;
    transform: none;
}

/* The first two menus should not be shifted toward the
   following navigation item. */
.nav-category.category-commerce,
.nav-category.category-business {
    position: relative;
}

/* Keep the mega menu above every page section. */
.nav-category.category-commerce .mega-menu,
.nav-category.category-business .mega-menu {
    z-index: 1100;
}


/* =========================================================
   ADMIN DROPDOWN
   Admin is the last navigation item, so its mega menu
   should open toward the left instead of overflowing right.
   ========================================================= */

.nav-category.category-admin .mega-menu {
    left: auto;
    right: 0;
    transform: none;
}

.nav-category.category-admin {
    position: relative;
}


/* =========================================================
   ADMIN MEGA MENU — FINAL POSITION / STACKING FIX
   ========================================================= */

/* Lift the complete Admin navigation item above the page. */
.site-header .main-nav .nav-category.category-admin {
    position: relative;
    z-index: 10000;
}

/* Admin menu opens leftward from the right edge. */
.site-header .main-nav .nav-category.category-admin .mega-menu {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;

    z-index: 10001;

    transform: none;

    /* Prevent the dropdown from being clipped horizontally. */
    max-width: calc(100vw - 24px);
}

/* Make the dropdown's inner content itself a stacking layer. */
.site-header .main-nav .nav-category.category-admin .mega-menu-inner {
    position: relative;
    z-index: 10002;
}

/* Keep Admin dropdown above hero/content stacking layers. */
.site-header {
    z-index: 10000;
}


/* =========================================================
   ADMIN DROPDOWN — FIXED OVERLAY
   Keep it completely outside the hero stacking/overflow
   context while preserving the existing mega-menu design.
   ========================================================= */

.site-header .main-nav .nav-category.category-admin .mega-menu {
    position: fixed;

    top: var(--header-height);
    right: max(25px, calc((100vw - 1440px) / 2));

    left: auto;

    width: min(780px, 80vw);
    max-width: calc(100vw - 50px);

    z-index: 99999;

    transform: translateY(-8px);
}

.site-header .main-nav .nav-category.category-admin:hover .mega-menu {
    transform: translateY(0);
}


/* =========================================================
   ADMIN SERVICE GRID
   3 × 3 layout for the nine Admin services.
   Only affects the Admin mega menu.
   ========================================================= */

.site-header .main-nav .nav-category.category-admin .mega-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 12px;
}

/* Keep each Admin item compact and consistent. */
.site-header .main-nav .nav-category.category-admin .mega-service {
    min-width: 0;
}

/* Make the Admin links fill their grid cells. */
.site-header .main-nav .nav-category.category-admin .mega-service-link {
    width: 100%;
}

/* Admin has no need for a second-level horizontal submenu
   taking up additional space. */
.site-header .main-nav .nav-category.category-admin .mega-service-children {
    display: none;
}


/* =========================================================
   ADMIN DROPDOWN HORIZONTAL POSITION
   Move the fixed Admin menu slightly further left.
   ========================================================= */

.site-header .main-nav .nav-category.category-admin .mega-menu {
    right: max(40px, calc((100vw - 1440px) / 2));
}


/* =========================================================
   ADMIN DROPDOWN — ALIGN TO ADMIN CATEGORY LEFT EDGE
   The menu remains fixed so it is not clipped by the hero,
   but its horizontal position is controlled by JavaScript.
   ========================================================= */

.site-header .main-nav .nav-category.category-admin .mega-menu {
    right: auto;
    left: var(--admin-menu-left, 0px);
}


/* =========================================================
   PORTFOLIO DROPDOWN — FIXED OVERLAY
   Keep the merged Portfolio/Business menu above the page
   and outside the hero overflow context.
   ========================================================= */

.site-header .main-nav .nav-category.category-personal {
    position: relative;
    z-index: 10000;
}

.site-header .main-nav .nav-category.category-personal .mega-menu {
    position: fixed;

    top: var(--header-height);

    left: var(--portfolio-menu-left, 0px);
    right: auto;

    width: min(780px, 80vw);
    max-width: calc(100vw - 50px);

    z-index: 99999;

    transform: translateY(-8px);
}

.site-header .main-nav .nav-category.category-personal:hover .mega-menu {
    transform: translateY(0);
}



/* =========================================================
   MOBILE MENU — FIXED OVERLAY
   The header's backdrop-filter can create a containing block
   for fixed descendants. Disable it while the mobile menu
   is open so the menu is positioned against the viewport.
   ========================================================= */

@media (max-width: 760px) {

    .site-header {
        z-index: 100000;
    }

    .menu-open .site-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .mobile-menu {
        position: fixed;

        top: var(--header-height);
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        height: calc(100dvh - var(--header-height));

        z-index: 99999;

        display: block;

        overflow-x: hidden;
        overflow-y: auto;

        background: #ffffff;

        transform: translateX(100%);
    }

    .menu-open .mobile-menu {
        transform: translateX(0);
    }

}