/* ==========================================================================
   Navbar.css — Top navigation (desktop + mobile overlay)
   --------------------------------------------------------------------------
      Contents: Anchor offsets • Tokens • Desktop layout • Link states
                • Language selector • Mobile toggle/overlay

      Notes:
        • Mobile menu is driven by a hidden checkbox (.nav-toggle) and sibling
          selectors (no JS).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll behavior and anchor offsets
   -------------------------------------------------------------------------- */

#about {
    scroll-margin-top: 95px;
}

#contact-us {
    scroll-margin-top: 95px;
}


/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
    --nav-pad-x: clamp(12px, 2.5vw, 36px);
    --nav-pad-y: clamp(10px, 1.2vw, 16px);
    --nav-link-size: clamp(14px, 1.05vw, 18px);
    --brand-size: clamp(40px, 4vw, 64px);
    --nav-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}

.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* NOTE: .navbar-top overrides Bootstrap navbar defaults where applicable. */

.navbar-top {
    background: #ffffff;
    box-shadow: var(--nav-shadow);
    border: none;
    position: relative;
    z-index: 2000;
    padding: 0;
}


/* --------------------------------------------------------------------------
   Link styling + active state
   -------------------------------------------------------------------------- */

.navbar-top .nav-link,
.navbar-top .nav-link:visited {
    color: #404040 !important;
    opacity: 1 !important;
    text-decoration: none !important;
}

.navbar-top .nav-link:hover {
    color: #404040 !important;
    opacity: 1 !important;
}

.navbar-top .nav-link.active,
.navbar-top .nav-link[aria-current="page"] {
    color: #FF2D55 !important;
}

.navbar-collapse-area,
.navbar-collapse-area>div,
.navbar-collapse-area .collapse,
.navbar-collapse-area .collapsing {
    background: transparent !important;
    box-shadow: none !important;
}

.navbar-container {
    background: #ffffff;
    min-height: 85px;
    margin: 0;
    padding: var(--nav-pad-y) var(--nav-pad-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
}

.custom-navbar-brand {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.brand {
    max-width: var(--brand-size);
    width: auto;
    height: auto;
    display: block;
    cursor: pointer;
}

.custom-nav-link {
    font-family: "Fredoka", sans-serif;
    font-size: var(--nav-link-size);
    white-space: nowrap;
    color: #404040 !important;
    font-weight: 700;
    padding: 8px 10px;
}

.navbar-custom-style {
    display: flex;
    align-items: center;
    margin-left: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: clamp(10px, 1.6vw, 22px);
    padding-right: 0;
}


/* --------------------------------------------------------------------------
   Language widget overrides (kept minimal; prefer LanguageSelection.css)
   -------------------------------------------------------------------------- */

.language-selection-div img {
    width: 34px !important;
    height: 24px !important;
    object-fit: contain !important;
}

.language-selection-div .flag-circle img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}


/* --------------------------------------------------------------------------
   Mobile toggler (hamburger -> X)
   -------------------------------------------------------------------------- */

.z-nav-toggler {
    border: none;
    background: transparent;
    padding: 8px;
    display: none;
    cursor: pointer;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    --bar-h: 3px;
    --bar-gap: 5px;
    gap: var(--bar-gap);
}

.z-nav-toggler .toggler-bar {
    display: block;
    width: 24px;
    height: var(--bar-h);
    background: #404040;
    border-radius: 2px;

    margin: 0;

    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

.nav-toggle:checked+.z-nav-toggler .toggler-bar:nth-child(1) {
    transform: translateY(calc(var(--bar-h) + var(--bar-gap))) rotate(45deg);
}

.nav-toggle:checked+.z-nav-toggler .toggler-bar:nth-child(2) {
    opacity: 0;
}

.nav-toggle:checked+.z-nav-toggler .toggler-bar:nth-child(3) {
    transform: translateY(calc(-1 * (var(--bar-h) + var(--bar-gap)))) rotate(-45deg);
}

.navbar-collapse-area {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .navbar-container {
        padding: var(--nav-pad-y) clamp(10px, 2vw, 20px);
    }
}

@media (max-width: 767px) {

    .z-nav-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
    }

    .navbar-collapse-area {
        position: fixed;
        inset: 0;
        z-index: 4000;
        background: rgba(0, 0, 0, 0.18);

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

        padding: 0 16px 16px 16px;
    }

    .nav-toggle:checked~.navbar-collapse-area {
        display: flex;
    }

    .nav-overlay {
        position: absolute;
        inset: 0;
        cursor: pointer;
    }

    .navbar-custom-style {
        width: min(92vw, 420px);

        max-height: none;
        overflow: visible;
        position: relative;
        z-index: 1;
        margin-top: 60px;
        padding: 18px 16px;

        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .navbar-custom-style .nav-item {
        list-style: none;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .custom-nav-link {
        width: auto;
        text-align: center;
        display: inline-flex;
        justify-content: center;

        font-size: clamp(16px, 4.3vw, 19px);
        font-weight: 700;

        padding: 12px 14px;
        border-radius: 14px;
        color: #404040 !important;
    }

    .custom-nav-link:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    .navbar-top .nav-link.active,
    .navbar-top .nav-link[aria-current="page"] {
        color: #FF2D55 !important;
    }

    .language-selection-div .mr-3 {
        width: auto !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    .language-selection-div {
        width: 100%;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 14px 0 0 0 !important;
    }

    .language-selection-div * {
        font-size: 16px !important;
    }

    .language-selection-div img {
        width: 34px !important;
        height: 24px !important;
        object-fit: contain !important;
    }

    .language-selection-div>div {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .language-selection-div .flag-circle {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .language-selection-div img[alt="dropdown"][style*="width: 1vw"] {
        display: none !important;
    }
}