@import "../ebmenu1-main.css";

:root {

    /* ==========================================================
       HERO SECTION
    ========================================================== */

    --ebmenu1-hro1-theme2-hero-background-color:
        #1a1a1a;

    --ebmenu1-hro1-theme2-overlay-background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .55) 0%,
            rgba(0, 0, 0, .72) 55%,
            rgba(0, 0, 0, .82) 100%);

    /* ==========================================================
       BRAND CONTAINER
    ========================================================== */

    --ebmenu1-hro1-theme2-brand-background-color:
        rgba(255, 255, 255, .08);

    --ebmenu1-hro1-theme2-brand-border-color:
        rgba(255, 255, 255, .18);

    --ebmenu1-hro1-theme2-brand-shadow:
        0 18px 40px rgba(0, 0, 0, .25);

    /* ==========================================================
       LOGO
    ========================================================== */

    --ebmenu1-hro1-theme2-logo-border-color:
        var(--ebmenu1-primary-color);

    --ebmenu1-hro1-theme2-logo-background-color:
        #ffffff;

    /* ==========================================================
       SITE TITLE
    ========================================================== */

    --ebmenu1-hro1-theme2-site-title-color:
        #ffffff;

    --ebmenu1-hro1-theme2-site-title-shadow:
        0 4px 18px rgba(0, 0, 0, .35);

    /* ==========================================================
       SITE SLOGAN
    ========================================================== */

    --ebmenu1-hro1-theme2-site-slogan-color:
        rgba(255, 255, 255, .90);

    /* ==========================================================
       INFO CARDS
    ========================================================== */

    --ebmenu1-hro1-theme2-info-card-background-color:
        rgba(255, 255, 255, .92);

    --ebmenu1-hro1-theme2-info-card-border-color:
        rgba(255, 255, 255, .18);

    --ebmenu1-hro1-theme2-info-card-shadow:
        0 14px 35px rgba(0, 0, 0, .18);

    --ebmenu1-hro1-theme2-info-card-hover-background-color:
        #ffffff;

    --ebmenu1-hro1-theme2-info-card-hover-border-color:
        var(--ebmenu1-primary-color);

    /* ==========================================================
       INFO ICON
    ========================================================== */

    --ebmenu1-hro1-theme2-info-icon-color:
        var(--ebmenu1-primary-color);

    /* ==========================================================
       INFO TEXT
    ========================================================== */

    --ebmenu1-hro1-theme2-info-text-color:
        var(--ebmenu1-secondary-color);

    /* ==========================================================
       EFFECTS
    ========================================================== */

    --ebmenu1-hro1-theme2-transition:
        .35s ease;

}

/* ==========================================================
   HERO
========================================================== */

.ebmenu1-hro1-hero {

    width: 100%;

    min-height: 100vh;

    background-color:
        var(--ebmenu1-hro1-theme2-hero-background-color);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}

/* ==========================================================
   HERO OVERLAY
========================================================== */

.ebmenu1-hro1-hero-overlay {

    width: 100%;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 2rem;

    padding:
        clamp(2rem, 5vw, 4rem) 1rem;

    background:
        var(--ebmenu1-hro1-theme2-overlay-background);

}

/* ==========================================================
   BRAND CONTAINER
========================================================== */

.ebmenu1-hro1-brand-container {

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 1rem;

    background:
        var(--ebmenu1-hro1-theme2-brand-background-color);

    border:
        1px solid var(--ebmenu1-hro1-theme2-brand-border-color);

    border-radius: 30px;

    backdrop-filter: blur(12px);

    box-shadow:
        var(--ebmenu1-hro1-theme2-brand-shadow);

}

/* ==========================================================
   LOGO
========================================================== */

.ebmenu1-hro1-logo {

    width:
        clamp(180px, 25vw, 280px);

    aspect-ratio: 1 / .60;

    object-fit: cover;

    border-radius: 22px;

    background:
        var(--ebmenu1-hro1-theme2-logo-background-color);

    border:
        4px solid var(--ebmenu1-hro1-theme2-logo-border-color);

}

/* ==========================================================
   TITLE CONTAINER
========================================================== */

.ebmenu1-hro1-title-container {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: .85rem;

    text-align: center;

    max-width: 850px;

}

/* ==========================================================
   SITE TITLE
========================================================== */

.ebmenu1-hro1-site-title {

    color:
        var(--ebmenu1-hro1-theme2-site-title-color);

    font-size:
        clamp(2.3rem, 6vw, 4rem);

    font-weight: 900;

    letter-spacing: 1px;

    text-shadow:
        var(--ebmenu1-hro1-theme2-site-title-shadow);

}

/* ==========================================================
   SITE SLOGAN
========================================================== */

.ebmenu1-hro1-site-slogan {

    max-width: 700px;

    color:
        var(--ebmenu1-hro1-theme2-site-slogan-color);

    font-size:
        clamp(1rem, 2vw, 1.35rem);

    line-height: 1.9;

    font-weight: 500;

}

/* ==========================================================
   INFO CONTAINER
========================================================== */

.ebmenu1-hro1-info-container {

    width: 100%;

    max-width: 980px;

    display: grid;

    grid-template-columns: repeat(2, minmax(260px, 1fr));

    gap: 1.2rem;

    align-items: stretch;

    justify-content: center;

}

/* ==========================================================
   INFO CARD
========================================================== */

.ebmenu1-hro1-info-card {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 1rem;

    width: 100%;

    padding: 1rem 1.35rem;

    border-radius: 22px;

    background:
        var(--ebmenu1-hro1-theme2-info-card-background-color);

    border:
        1px solid var(--ebmenu1-hro1-theme2-info-card-border-color);

    box-shadow:
        var(--ebmenu1-hro1-theme2-info-card-shadow);

    backdrop-filter: blur(14px);

    transition:
        var(--ebmenu1-hro1-theme2-transition);

}

/* ==========================================================
   CLICKABLE CARD
========================================================== */

.ebmenu1-hro1-clickable-card {

    cursor: pointer;

}

/* ==========================================================
   ICON
========================================================== */

.ebmenu1-hro1-icon-small {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        var(--ebmenu1-primary-color);

    color:
        #ffffff;

    font-size:
        1.25rem;

    transition:
        var(--ebmenu1-hro1-theme2-transition);

}

.ebmenu1-hro1-icon-small svg {

    width: 5px;

}

/* ==========================================================
   INFO TEXT
========================================================== */

.ebmenu1-hro1-info-text {

    color:
        var(--ebmenu1-hro1-theme2-info-text-color);

    font-size:
        clamp(.92rem, 2vw, 1.05rem);

    font-weight: 700;

    line-height: 1.7;

    text-align: start;

}

/* ==========================================================
   HOVER
========================================================== */

.ebmenu1-hro1-info-card:hover {

    transform:
        translateY(-8px);

    border-color:
        var(--ebmenu1-hro1-theme2-info-card-hover-border-color);

    background:
        var(--ebmenu1-hro1-theme2-info-card-hover-background-color);

    box-shadow:
        0 22px 40px rgba(0, 0, 0, .22);

}

/* .ebmenu1-hro1-info-card:hover .ebmenu1-hro1-icon-small {

    background:
        var(--ebmenu1-primary-color);

    color:
        #ffffff;

    transform:
        rotate(10deg) scale(1.08);

} */

.ebmenu1-hro1-clickable-card:hover {

    cursor: pointer;

}

/* ==========================================================
   ACTIVE
========================================================== */

.ebmenu1-hro1-clickable-card:active {

    transform:
        scale(.97);

}

/* ==========================================================
   FOCUS
========================================================== */

.ebmenu1-hro1-clickable-card:focus-visible {

    outline:
        2px solid var(--ebmenu1-primary-color);

    outline-offset: 4px;

}

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

@media (max-width:900px) {

    .ebmenu1-hro1-info-container {

        grid-template-columns: 1fr;

        max-width: 520px;

    }

}

@media (max-width:768px) {

    .ebmenu1-hro1-hero {

        min-height: auto;

    }

    .ebmenu1-hro1-hero-overlay {

        min-height: auto;

        padding:
            2rem .9rem;

        gap: 1.5rem;

    }

    .ebmenu1-hro1-brand-container {

        padding: .8rem;

    }

    .ebmenu1-hro1-logo {

        width:
            clamp(170px, 60vw, 240px);

    }

    .ebmenu1-hro1-info-card {

        padding:
            .9rem 1rem;

        border-radius: 18px;

    }

    .ebmenu1-hro1-icon-small {

        width: 42px;

        height: 42px;

        font-size: 1.05rem;

    }

}

@media (max-width:480px) {

    .ebmenu1-hro1-title-container {

        gap: .6rem;

    }

    .ebmenu1-hro1-info-card {

        gap: .8rem;

    }

    .ebmenu1-hro1-info-text {

        font-size:
            .9rem;

    }

    .ebmenu1-hro1-icon-small {

        width: 38px;

        height: 38px;

        font-size: 1rem;

    }

}