/* =========================

   ICA HOME HEADER  (used by includes/header.php)

   Logo bar + main menu + blue course nav + dropdowns + announcement ticker

========================= */





.top,

.sub {

    font-family: "Segoe UI", Roboto, Arial, sans-serif;

}



.top {

    min-height: 82px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 10px 5%;

    background: #fff;

    border-bottom: 1px solid #ddd;

}



.logo {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #0869bb;

    font-weight: 700;

    line-height: 1.2;

}



.logo img {

    width: 58px;

    height: 58px;

    object-fit: contain;

}



.logo small {

    display: block;

    margin-top: 5px;

    color: #777;

    font-size: 11px;

    font-weight: 400;

}



.main {

    display: flex;

    gap: 25px;

}



.main a {

    color: #333;

    font-weight: 600;

    padding: 10px;

}



.main a:hover,

.main a.active {

    color: #0869bb;

}



.top-actions {

    display: flex;

    align-items: center;

    gap: 20px;

    font-size: 14px;

}



.top-actions .call {

    color: #0869bb;

    font-weight: 600;

}



/* =========================

   SECOND NAVIGATION

========================= */



.sub {

    background: #0869bb;

    width: 100%;

    position: relative;

    z-index: 1000;

}



.sub .wrap {

    max-width: 1450px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

}



.nav-item {

    position: relative;

}



.nav-item > a {

    display: block;

    padding: 16px 22px;

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

}



.nav-item > a:hover,

.nav-item.open > a {

    color: #ffd200;

    background: rgba(0,0,0,0.08);

}



.arrow {

    margin-left: 5px;

    font-size: 12px;

}



/* =========================

   DROPDOWN MENU

========================= */



.dropdown {

    position: absolute;

    top: 100%;

    left: 0;



    min-width: 260px;



    background: #fff;



    display: none;



    border-top: 3px solid #ffd200;



    box-shadow: 0 7px 20px rgba(0,0,0,0.18);



    z-index: 9999;

}



.nav-item.open .dropdown {

    display: block;

}



.dropdown a {

    display: block;

    padding: 13px 18px;



    color: #333;

    background: #fff;



    font-size: 14px;

    font-weight: 500;



    border-bottom: 1px solid #eee;

}



.dropdown a:hover {

    background: #0869bb;

    color: #fff;

}



.dropdown a:last-child {

    border-bottom: none;

}



/* =========================

   TICKER

========================= */



.ticker {

    height: 36px;

    overflow: hidden;

    display: flex;

    align-items: center;

    background: #f5f5f5;

    border-bottom: 1px solid #ddd;

}



.marquee {

    color: #d60000;

    font-weight: 700;

    white-space: nowrap;

    animation: scroll 18s linear infinite;

}



@keyframes scroll {

    from {

        transform: translateX(100%);

    }



    to {

        transform: translateX(-100%);

    }

}



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



@media (max-width: 1000px) {



    .top {

        flex-wrap: wrap;

        gap: 15px;

    }



    .main {

        order: 3;

        width: 100%;

        justify-content: center;

    }



    .top-actions {

        display: none;

    }



    .sub .wrap {

        flex-wrap: wrap;

        justify-content: flex-start;

    }



    .nav-item > a {

        padding: 13px 15px;

    }

}



@media (max-width: 600px) {



    .logo {

        font-size: 13px;

    }



    .logo img {

        width: 45px;

        height: 45px;

    }



    .main {

        gap: 5px;

    }



    .main a {

        font-size: 13px;

        padding: 7px;

    }



    .sub .wrap {

        display: block;

    }



    .nav-item > a {

        border-bottom: 1px solid rgba(255,255,255,.15);

    }



    .dropdown {

        position: relative;

        top: auto;

        left: auto;

        width: 100%;

        box-shadow: none;

    }

}

/* ---- Menu button + collapsible course menu (phones and tablets) ---- */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 1px solid #cfdbe8;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #0869bb;
}

@media (max-width: 1200px) {
    .menu-toggle { display: flex; order: 2; margin-left: auto; }
    .logo { order: 1; }
    .sub { display: none; }
    body.nav-open .sub { display: block; }
    .sub .wrap { display: block; padding: 6px 14px; }
    .sub .nav-item > a {
        justify-content: space-between;
        border-bottom: 1px solid rgba(255,255,255,.15);
        min-height: 46px;
        white-space: normal;
    }
    .sub .dropdown { position: static; width: 100%; min-width: 0; box-shadow: none; }
}

/* Laptops: slightly tighter course menu so it never overflows */
@media (min-width: 1201px) and (max-width: 1320px) {
    .sub .nav-item > a { padding-left: 14px; padding-right: 14px; }
}
.top-actions .top-link{color:inherit;text-decoration:none;font-weight:600}
.top-actions .top-link:hover,.top-actions .top-link:focus{color:#0869bb;text-decoration:underline}
.top-actions .top-user{color:#0869bb;font-weight:600}