/* =====================================================
   ROYAL CAFE - LANDING PAGE
   Theme: Black / Royal Blue / Gold
   ===================================================== */


/* =====================================================
   COLORS
   ===================================================== */

:root {

    --bg-dark: #080a0d;
    --bg-secondary: #0e1116;
    --card-bg: #15191f;
    --card-hover: #1b2028;

    /* آبی لوگو */
    --royal-blue: #1762a5;
    --royal-blue-light: #2b79bd;
    --royal-blue-dark: #0d3f6e;

    /* طلایی لوگو */
    --gold: #dcae52;
    --gold-light: #f2cb72;
    --gold-dark: #956d28;

    --white: #ffffff;
    --text: #f3f3f3;
    --muted: #9299a3;

    --border: rgba(255, 255, 255, 0.07);
    --gold-border: rgba(220, 174, 82, 0.28);
    --blue-border: rgba(23, 98, 165, 0.35);
}


/* =====================================================
   RESET
   ===================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(23, 98, 165, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 30%,
            rgba(220, 174, 82, 0.035),
            transparent 40%
        ),
        var(--bg-dark);

    color: var(--white);

    direction: rtl;

    -webkit-tap-highlight-color: transparent;
}


a {
    text-decoration: none;
    color: inherit;
}


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

.hero-header {

    position: relative;

    width: 100%;

    min-height: 360px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 35px 20px 45px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #050608 0%,
            #090c10 70%,
            var(--bg-dark) 100%
        );
}


/* =====================================================
   BACKGROUND GLOW
   ===================================================== */

.glow-effect {

    position: absolute;

    width: 300px;
    height: 300px;

    top: 15px;
    left: 50%;

    transform: translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(23, 98, 165, 0.18),
            rgba(220, 174, 82, 0.05) 40%,
            transparent 70%
        );

    filter: blur(8px);

    pointer-events: none;
}


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

.logo-wrapper {

    position: relative;

    z-index: 2;

    width: min(88vw, 430px);

    display: flex;
    align-items: center;
    justify-content: center;
}


#cafe-logo {

    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    /* حذف پس‌زمینه اگر لوگو مشکی باشد، با صفحه ترکیب می‌شود */

    filter:
        drop-shadow(
            0 12px 25px rgba(0, 0, 0, 0.5)
        )
        drop-shadow(
            0 0 18px rgba(23, 98, 165, 0.08)
        );
}


/* =====================================================
   SUBTITLE
   ===================================================== */

.header-subtitle {

    position: relative;

    z-index: 2;

    margin-top: 18px;

    color: var(--muted);

    font-size: 14px;

    font-weight: 400;

    line-height: 1.8;

    text-align: center;
}


/* =====================================================
   MENU CONTAINER
   ===================================================== */

.menu-container {

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding: 10px 18px 55px;
}


/* =====================================================
   MENU GRID
   ===================================================== */

.menu-grid {

    display: grid;

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

    gap: 14px;
}


/* =====================================================
   CATEGORY CARD
   ===================================================== */

.menu-square {

    position: relative;

    min-height: 185px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 22px 15px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border: 1px solid var(--border);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;

    isolation: isolate;
}


/* نور خیلی ظریف داخل کارت */

.menu-square::before {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -80px;
    left: -60px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(23, 98, 165, 0.16),
            transparent 70%
        );

    z-index: -1;

    transition: 0.4s ease;
}


/* خط طلایی ظریف پایین */

.menu-square::after {

    content: "";

    position: absolute;

    bottom: 0;
    right: 50%;

    width: 0;
    height: 2px;

    transform: translateX(50%);

    background:
        linear-gradient(
            90deg,
            var(--royal-blue),
            var(--gold),
            var(--royal-blue)
        );

    border-radius: 10px;

    transition: width 0.35s ease;
}


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

.menu-square:hover {

    transform: translateY(-5px);

    border-color: var(--gold-border);

    background:
        linear-gradient(
            145deg,
            rgba(220, 174, 82, 0.075),
            rgba(23, 98, 165, 0.045)
        );

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(220, 174, 82, 0.04);
}


.menu-square:hover::before {

    transform: scale(1.4);

    background:
        radial-gradient(
            circle,
            rgba(23, 98, 165, 0.22),
            transparent 70%
        );
}


.menu-square:hover::after {

    width: 55px;
}


/* =====================================================
   CARD CONTENT
   ===================================================== */

.square-content {

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


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

.category-icon {

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(23, 98, 165, 0.16),
            rgba(220, 174, 82, 0.07)
        );

    border: 1px solid var(--blue-border);

    color: var(--gold);

    font-size: 25px;

    box-shadow:
        inset 0 0 15px rgba(23, 98, 165, 0.05);

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}


.menu-square:hover .category-icon {

    transform: translateY(-3px) scale(1.05);

    color: var(--gold-light);

    border-color: var(--gold-border);

    background:
        linear-gradient(
            145deg,
            rgba(23, 98, 165, 0.22),
            rgba(220, 174, 82, 0.10)
        );
}


/* =====================================================
   CATEGORY TITLE
   ===================================================== */

.square-content h2 {

    margin: 0;

    color: var(--text);

    font-size: 17px;

    font-weight: 700;

    line-height: 1.6;

    transition: color 0.3s ease;
}


.menu-square:hover .square-content h2 {

    color: var(--gold-light);
}


/* =====================================================
   CATEGORY DESCRIPTION
   ===================================================== */

.desc {

    display: block;

    margin-top: 5px;

    max-width: 150px;

    color: var(--muted);

    font-size: 10px;

    line-height: 1.7;

    font-weight: 400;
}


/* =====================================================
   DIFFERENT CATEGORY ACCENTS
   ===================================================== */

/* نوشیدنی */

.menu-drinks .category-icon {

    color: var(--gold);
}


/* دسر */

.menu-desserts .category-icon {

    color: var(--gold-light);
}


/* غذا */

.menu-food .category-icon {

    color: var(--royal-blue-light);
}


/* صبحانه */

.menu-breakfast .category-icon {

    color: var(--gold);
}


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

.cafe-footer {

    position: relative;

    margin-top: 20px;

    padding-top: 65px;

    background:
        linear-gradient(
            to bottom,
            #10141a,
            #0b0e12
        );

    border-top: 1px solid var(--border);

    overflow: hidden;
}


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

.custom-shape-divider-top {

    position: absolute;

    top: -1px;
    left: 0;

    width: 100%;

    height: 55px;

    overflow: hidden;

    line-height: 0;

    transform: rotate(180deg);
}


.custom-shape-divider-top svg {

    position: relative;

    display: block;

    width: calc(100% + 1.3px);

    height: 55px;
}


.custom-shape-divider-top .shape-fill {

    fill: var(--bg-dark);
}


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

.footer-content {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 10px 20px 35px;
}


.footer-content h3 {

    color: var(--gold-light);

    font-size: 17px;

    font-weight: 600;

    margin-bottom: 18px;
}


/* =====================================================
   SOCIAL LINKS
   ===================================================== */

.social-links {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 22px;
}


.social-links a {

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: var(--card-bg);

    border: 1px solid var(--border);

    color: var(--muted);

    font-size: 17px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.social-links a:hover {

    color: var(--gold-light);

    background:
        rgba(220, 174, 82, 0.08);

    border-color: var(--gold-border);

    transform: translateY(-3px);
}


/* =====================================================
   CONTACT INFO
   ===================================================== */

.contact-info {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;
}


.contact-info p {

    display: flex;

    align-items: center;

    gap: 7px;

    margin: 0;

    color: var(--muted);

    font-size: 11px;

    line-height: 1.8;
}


.contact-info i {

    color: var(--gold);

    font-size: 12px;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 480px) {


    .hero-header {

        min-height: 310px;

        padding:
            25px
            18px
            35px;
    }


    .logo-wrapper {

        width: min(90vw, 370px);
    }


    .header-subtitle {

        margin-top: 12px;

        font-size: 12px;
    }


    .menu-container {

        padding:
            5px
            13px
            45px;
    }


    .menu-grid {

        gap: 11px;
    }


    .menu-square {

        min-height: 165px;

        padding:
            18px
            10px;

        border-radius: 17px;
    }


    .category-icon {

        width: 54px;
        height: 54px;

        margin-bottom: 10px;

        border-radius: 15px;

        font-size: 22px;
    }


    .square-content h2 {

        font-size: 15px;
    }


    .desc {

        font-size: 9px;

        max-width: 125px;

        margin-top: 3px;
    }


    .cafe-footer {

        margin-top: 10px;

        padding-top: 60px;
    }


    .contact-info p {

        font-size: 10px;
    }
}


/* =====================================================
   VERY SMALL PHONES
   ===================================================== */

@media (max-width: 350px) {


    .hero-header {

        min-height: 275px;
    }


    .logo-wrapper {

        width: 88vw;
    }


    .header-subtitle {

        font-size: 11px;
    }


    .menu-square {

        min-height: 150px;

        padding: 14px 8px;
    }


    .category-icon {

        width: 48px;
        height: 48px;

        font-size: 19px;

        border-radius: 13px;
    }


    .square-content h2 {

        font-size: 14px;
    }


    .desc {

        display: none;
    }
}


/* =====================================================
   DESKTOP
   ===================================================== */

@media (min-width: 768px) {


    .hero-header {

        min-height: 430px;

        padding-top: 50px;
    }


    .logo-wrapper {

        width: min(55vw, 470px);
    }


    .header-subtitle {

        font-size: 15px;

        margin-top: 20px;
    }


    .menu-container {

        padding-top: 20px;

        padding-bottom: 70px;
    }


    .menu-grid {

        gap: 18px;
    }


    .menu-square {

        min-height: 210px;

        border-radius: 22px;
    }


    .category-icon {

        width: 68px;
        height: 68px;

        font-size: 28px;

        border-radius: 20px;
    }


    .square-content h2 {

        font-size: 18px;
    }


    .desc {

        font-size: 11px;

        max-width: 190px;
    }
}


/* =====================================================
   ACCESSIBILITY
   ===================================================== */

.menu-square:focus-visible,
.social-links a:focus-visible {

    outline: 2px solid var(--gold-light);

    outline-offset: 3px;
}


/* =====================================================
   REDUCE MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        transition: none !important;

        animation: none !important;

        scroll-behavior: auto !important;
    }
}