/*
Services Dropdown
Purpose: Header service menu styles live here instead of custom.css.
Each list item has a separate class and comment so future service-specific
menu styling stays easy to find.
*/

/* Dropdown shell: shared layout for the services menu panel. */
.header__main .main-menu ul li .sub-menu.services-dropdown {
    top: calc(100% + 14px);
    left: 50%;
    width: 330px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border-top: 3px solid var(--dotin-accent);
    border-radius: 0 0 8px 8px;
    transform: translateX(-50%) translateY(10px);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 46px rgba(17, 24, 39, 0.14);
    z-index: 9999;
}

.header__main .main-menu ul li:hover .sub-menu.services-dropdown,
.header__main .main-menu ul li.has-megamenu:hover .sub-menu.services-dropdown {
    transform: translateX(-50%) translateY(0);
}

.header__main .main-menu ul li .sub-menu.services-dropdown li {
    margin: 0;
    width: 100%;
    border: 0 !important;
}

/* Shared service menu link foundation. Individual services override colors below. */
.header__main .main-menu ul li .sub-menu.services-dropdown li a {
    --service-menu-accent: var(--dotin-accent);
    --service-menu-bg: #f8fbff;
    --service-menu-hover-bg: #fff4ec;
    --service-menu-border: #edf1f8;

    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px !important;
    border-radius: 7px;
    color: #1a1a3e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal !important;
    overflow-wrap: anywhere;
    background: linear-gradient(90deg, var(--service-menu-bg) 0%, #ffffff 100%);
    border: 1px solid var(--service-menu-border);
    box-shadow: inset 4px 0 0 var(--service-menu-accent);
}

.header__main .main-menu ul li .sub-menu.services-dropdown li a:hover {
    padding-left: 14px !important;
    background: var(--service-menu-hover-bg);
    border-color: var(--service-menu-accent);
    color: var(--service-menu-accent) !important;
}

/* All service menu items now use the CCTV page accent for a consistent dropdown theme. */
.services-dropdown li a {
    --service-menu-accent: #2563eb;
    --service-menu-bg: #eef5ff;
    --service-menu-hover-bg: #eaf2ff;
}

@media (max-width: 1199px) {
    .header__main .main-menu ul li .sub-menu.services-dropdown {
        width: 330px;
    }
}