/*==================================================
    COMMON.CSS — Shared Navbar + Footer
    Used on every page. Depends on variables.css
    (--white, --heading, --primary, --primary-dark,
     --secondary, --border, --light-grey, --transition)
==================================================*/

:root{
    --white:#ffffff;
    --heading:#0f172a;
    --primary:#0b3d66;
    --primary-dark:#082b49;
    --secondary:#06b6d4;
    --border:#e5e7eb;
    --light-grey:#f8fafc;
    --transition:all .25s ease;
}


/*==================================================
                NAVBAR
==================================================*/

.navbar{

    background:var(--white);
    border-bottom:1px solid var(--border);
    padding:14px 0;
    transition:box-shadow .25s ease, padding .25s ease;
}

.navbar .container{
    position:relative;
}

.navbar-toggler{
    border:1px solid var(--border);
    color:var(--heading);
    box-shadow:none;
}

.navbar-toggler:focus{
    box-shadow:0 0 0 .2rem rgba(6,182,212,.15);
}

.navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15, 23, 42, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* subtle lift once the page scrolls — add/remove this class with a tiny
   scroll listener (window.scrollY > 10) if you want the effect */
.navbar.scrolled{

    padding:8px 0;
    box-shadow:0 4px 20px rgba(15,23,42,.06);
}

.navbar-brand{
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--heading) !important;
    transition: var(--transition);
}

.brand-icon{
    height: 40px;
    width: auto;
    object-fit: contain;
}

.brand-text{
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .2px;
    white-space: nowrap;
}

.brand-divider{
    height: 32px;
    width: 1px;
    background: var(--border);
}

.brand-aalayam{
    height: 32px;
    width: auto;
    object-fit: contain;
}

.navbar-brand:hover{
    color: var(--primary) !important;
}

.navbar-nav{

    gap:2px;
}

.nav-link{

    position:relative;
    color:#374151!important;
    font-weight:500;
    font-size:.95rem;
    padding:8px 12px!important;
    border-radius:8px;
    white-space:nowrap;
    transition:var(--transition);
}

/* animated underline instead of a flat color swap */
.nav-link::after{

    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:2px;
    height:2px;
    border-radius:2px;
    background:var(--primary);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s ease;
}

.nav-link:hover{

    color:var(--primary)!important;
    background:var(--light-grey);
}

.nav-link.active{

    color:var(--primary)!important;
}

.nav-link.active::after,
.nav-link:hover::after{

    transform:scaleX(1);
}

.btn-book{

    background:var(--primary);
    color:var(--white)!important;
    font-weight:600;
    font-size:.9rem;
    padding:10px 24px;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(11,61,102,.25);
    transition:var(--transition);
    display:inline-block;
}

.btn-book:hover{

    background:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(11,61,102,.3);
    color:var(--white)!important;
}

.btn-book:active{

    transform:translateY(0);
}


/*==================================================
                OFFCANVAS (Mobile Sidebar)
==================================================*/

.offcanvas{

    width:280px;
    border:none;
    box-shadow:-8px 0 30px rgba(15,23,42,.12);
}

.offcanvas .navbar-nav{
    padding-top:6px;
}

.offcanvas-header{

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

.offcanvas-title{

    font-size:1.25rem;
    font-weight:800;
    color:var(--heading);
    display:flex;
    align-items:center;
    gap:8px;
}

.offcanvas .btn-close{

    transition:var(--transition);
}

.offcanvas .btn-close:hover{

    transform:rotate(90deg);
}

.offcanvas-body .nav-link{

    padding:12px 16px!important;
    border-radius:10px;
    display:block;
}

.offcanvas-body .nav-link::after{

    display:none; /* underline effect looks odd in a stacked sidebar */
}

.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-link.active{

    background:var(--light-grey);
    color:var(--primary)!important;
}

.offcanvas-body .nav-item + .nav-item{

    margin-top:2px;
}


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

.footer{

    background:var(--light-grey);
    color:var(--heading);
    padding:64px 0 28px;
    border-top:3px solid var(--primary);
}

.footer .brand{

    font-size:1.2rem;
    font-weight:800;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:14px;
    color:var(--heading);
}

.footer .brand i{

    color:var(--primary);
    font-size:1.15rem;
}

.footer .brand-desc{

    color:#64748b;
    font-size:.88rem;
    line-height:1.7;
    max-width:270px;
}

.footer h6{

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--heading);
    margin-bottom:18px;
}

.footer ul{

    list-style:none;
    padding-left:0;
    margin-bottom:0;
}

.footer ul li{

    margin-bottom:10px;
}

.footer ul li a{

    color:#64748b;
    font-size:.88rem;
    text-decoration:none;
    transition:var(--transition);
    position:relative;
    padding-left:0;
}

.footer ul li a:hover{

    color:var(--primary);
    padding-left:4px;
}

.footer .socials{

    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.footer .socials a{

    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--white);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--heading);
    transition:var(--transition);
}

.footer .socials a:hover{

    background:var(--primary);
    border-color:var(--primary);
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 6px 14px rgba(0,0,0,.15);
}

.footer .copyright{

    color:#94a3b8;
    font-size:.8rem;
    line-height:1.6;
    margin-bottom:0;
    padding-top:16px;
    border-top:1px solid var(--border);
}


/*==================================================
                RESPONSIVE TWEAKS
==================================================*/

@media (max-width:991.98px){

    /* mobile: show only the brand text, hide the icon/divider/aalayam logo */
    .brand-icon,
    .brand-divider,
    .brand-aalayam{

        display:none;
    }

    .footer{

        padding:48px 0 24px;
        text-align:left;
    }

    .footer .brand-desc{

        max-width:none;
    }
}