/* ============================================================
   header-enhance.css
   Modern redesign of the TOP HEADER (top-bar + header + nav).
   Lives in MasterPage.master so it applies consistently on every
   page. Purely additive / overriding -- no markup changes and it
   loads AFTER theme.css/responsive.css so it wins on desktop while
   leaving the existing mobile menu behaviour untouched.
   Palette derived from the logo (logo2.png) teal:
     dark teal #006e80   base #00879d (logo)   light #00a6b8
     dark text #233a46 / #455f68
   ============================================================ */

/* ============================================================
   1) TOP BAR  ->  brand gradient strip with white content
   ============================================================ */
.top-bar {
    background: linear-gradient(90deg, #006e80 0%, #00879d 55%, #00a6b8 100%);
    padding: 10px 0;
    font-size: 13px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}
.top-bar i,
.top-bar a,
.top-bar-adress a,
.top-bar-mail a {
    color: #ffffff;
}
.top-bar i { color: rgba(255, 255, 255, .9); }

.top-bar-adress a {
    transition: opacity .25s ease;
}
.top-bar-adress a:hover { opacity: .85; color: #ffffff; }

/* social icons: white, subtle lift on hover */
.top-bar-social i {
    color: #ffffff;
    transition: transform .25s ease, color .25s ease;
}
.top-bar-social i:hover {
    color: #eafaf5;
    transform: translateY(-2px);
}

.top-bar-mail a { transition: opacity .25s ease; }
.top-bar-mail a:hover { opacity: .85; color: #ffffff; }

/* right side: social icons + email on one vertically-centred row, flush right.
   Replaces the old float layout that left the 18px icons and the email text
   sitting on different baselines. */
.top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}
.top-bar-right .top-bar-social,
.top-bar-right .top-bar-mail {
    float: none;
    margin: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.top-bar-right .top-bar-social i {
    top: 0;                 /* cancel the top:2px nudge from theme.css */
    font-size: 16px;
    margin-left: 14px;
}
.top-bar-right .top-bar-social a:first-child i { margin-left: 0; }
.top-bar-right .top-bar-mail i {
    top: 0;
    font-size: 15px;
    margin-right: 6px;
}

/* ============================================================
   2) HEADER  ->  clean white band with soft shadow
   ============================================================ */
.header {
    background: #ffffff;
    padding: 18px 0 22px 0;
    box-shadow: 0 2px 16px rgba(35, 58, 70, .06);
    position: relative;
    z-index: 50;
}
.header-logo img {
    transition: transform .3s ease;
}
.header-logo a:hover img { transform: scale(1.03); }

/* phone -> rounded pill that lifts on hover */
.header-phone {
    border: 1px solid #e1eef1;
    background: #f7fcfd;
    border-radius: 30px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.header-phone:hover {
    border-color: #00879d;
    box-shadow: 0 8px 18px rgba(0, 135, 157, .18);
    transform: translateY(-2px);
}
.header-phone a { color: #233a46; transition: color .25s ease; }
.header-phone a:hover { color: #00879d; }

/* appointment button -> gradient pill (header uses .btn-default) */
.header-button .btn,
.header-button .btn-default {
    background: linear-gradient(90deg, #00879d, #00a6b8);
    border: none;
    color: #ffffff !important;
    border-radius: 30px;
    padding: 11px 28px;
    letter-spacing: .4px;
    box-shadow: 0 6px 16px rgba(0, 135, 157, .28);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.header-button .btn:hover,
.header-button .btn:focus,
.header-button .btn-default:hover {
    background: linear-gradient(90deg, #00a6b8, #00879d);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 135, 157, .34);
}

/* ============================================================
   3) NAV MENU  ->  sticky on scroll + animated underline
   (desktop only; mobile slide-out menu is left as-is)
   ============================================================ */
@media (min-width: 769px) {
    .top-menu {
        position: sticky;
        top: 0;
        border-top: none;
        box-shadow: 0 4px 18px rgba(35, 58, 70, .08);
    }

    /* only the top-level nav items, not the dropdown links */
    .top-menu .navbar-nav > li > a {
        position: relative;
        padding: 16px 20px;
        border-bottom: none;
        transition: color .25s ease;
    }
    .top-menu .navbar-nav > li > a:after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 9px;
        width: 0;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #006e80, #00a6b8);
        transform: translateX(-50%);
        transition: width .3s ease;
    }
    .top-menu .navbar-nav > li > a:hover,
    .top-menu .navbar-nav > li > a:focus {
        background: transparent;
        color: #00879d;
    }
    .top-menu .navbar-nav > li > a:hover:after,
    .top-menu .navbar-nav > li > a:focus:after,
    .top-menu .navbar-nav > li.active > a:after,
    .top-menu .navbar-nav > li.open > a:after {
        width: calc(100% - 30px);
    }
    .top-menu .navbar-nav > li.active > a {
        color: #00879d;
        border-bottom: none;
    }
}