/* ==========================================
   Premium Header
========================================== */

.header-premium{

    display:flex;

    align-items:center;

    justify-content:flex-start;

    width:100%;

    margin-block:16px;

    padding:
        var(--header-padding-y)
        var(--header-padding-x);

    gap:var(--header-gap);

    background:var(--brand-gradient);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-brand);

    overflow:hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}


.header-premium:hover{

    transform:translateY(var(--lift-md));

    box-shadow:var(--shadow-brand-hover);

}

/* ==========================================
   Logo
========================================== */

.header-logo{

    display:block;

    width:auto;

    height:clamp(52px,4vw,68px);

    padding:6px;

    background:var(--white);

    border-radius:var(--radius-sm);

    box-shadow:var(--shadow-logo);

    animation:logoZoom var(--animation-normal) ease;

    transition:
        transform var(--transition),
        box-shadow var(--transition);

}

.header-logo:hover{

    transform:scale(1.05);

    box-shadow:var(--shadow-logo-hover);

}


/* ==========================================
   Title
========================================== */

.header-title{

    margin:0;

    color:var(--white);

    font-family:var(--font-family);

    font-size:clamp(2rem,2.3vw,2.8rem);

    font-weight:var(--fw-extrabold);

    line-height:1.2;

    letter-spacing:.4px;

    animation:titleReveal var(--animation-normal) ease forwards;

}

.header-title::after{

    content:"";

    display:block;

    width:100%;

    height:3px;

    margin-top:8px;

    background:var(--white);

    border-radius:999px;

    transform:scaleX(0);

    transform-origin:left;

    animation:underlineSlide var(--animation-slow) ease forwards;

}


/* ==========================================
   Animations
========================================== */

@keyframes logoZoom{

    0%{

        opacity:0;

        transform:scale(.6);

    }

    100%{

        opacity:1;

        transform:scale(1);

    }

}

@keyframes titleReveal{

    0%{

        opacity:0;

        transform:translateY(20px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes underlineSlide{

    from{

        transform:scaleX(0);

    }

    to{

        transform:scaleX(1);

    }

}


/* ==========================================
   CareFingers Header Responsive
   320px - 1199.98px
========================================== */

/* ==========================
   Tablet Landscape
   992px - 1199.98px
========================== */

@media (max-width:1199.98px){

    .header-premium{

        margin-block:14px;

        padding:14px 18px;

        gap:16px;

    }

    .header-logo{

        height:58px;

        padding:5px;

    }

    .header-title{

        font-size:2.15rem;

        line-height:1.15;

        letter-spacing:.3px;

    }

    .header-title::after{

        margin-top:6px;

        height:3px;

    }

}


/* ==========================
   Tablet Portrait
   768px - 991.98px
========================== */

@media (max-width:991.98px){

    .header-premium{

        margin-block:12px;

        padding:13px 16px;

        gap:14px;

    }

    .header-logo{

        height:52px;

        padding:5px;

    }

    .header-title{

        font-size:1.95rem;

    }

}


/* ==========================
   Large Mobile
   576px - 767.98px
========================== */

@media (max-width:767.98px){

    .header-premium{

        margin-block:10px;

        padding:12px 15px;

        gap:12px;

    }

    .header-logo{

        height:46px;

        padding:4px;

    }

    .header-title{

        font-size:1.65rem;

        letter-spacing:.2px;

    }

    .header-title::after{

        margin-top:5px;

        height:2px;

    }

}


/* ==========================
   Small Mobile
   320px - 575.98px
========================== */

@media (max-width:575.98px){

    .header-premium{

        margin-block:8px;

        padding:10px 12px;

        gap:10px;

        border-radius:12px;

    }

    .header-logo{

        height:40px;

        padding:3px;

        border-radius:8px;

    }

    .header-title{

        font-size:1.35rem;

        line-height:1.15;

        letter-spacing:0;

    }

    .header-title::after{

        margin-top:4px;

        height:2px;

    }

}


/* ==========================
   Extra Small Devices
   320px - 374px
========================== */

@media (max-width:374px){

    .header-premium{

        padding:8px 10px;

        gap:8px;

    }

    .header-logo{

        height:36px;

    }

    .header-title{

        font-size:1.15rem;

    }

}