/* YR Menu structural helpers on the stock Crafto application demo
   (2026-07-31). Colors deliberately UNTOUCHED - owner decision: keep the
   template exactly as shipped; palette tweaks come later. */

.yr-nav-login { color: inherit; }

/* Brand wordmark: bold; white on desktop, black on mobile (owner request) */
.yr-brand-text { color: #232323; }
@media (min-width: 992px) {
    .yr-brand-text { color: #fff; }
}

/* Phone frame for real product screenshots */
.yr-phone {
    border-radius: 34px;
    border: 8px solid #17181c;
    box-shadow: 0 30px 80px -20px rgba(23, 24, 28, .55);
    overflow: hidden;
    background: #17181c;
}
.yr-phone img { display: block; width: 100%; height: auto; }

/* Transparent variant (hero): no frame/background - for images that carry
   their own phone frame or transparency; shadow follows the alpha channel. */
.yr-phone.yr-phone-bare {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    filter: drop-shadow(0 30px 60px rgba(23, 24, 28, .35));
}

/* Footer link colors on the dark footer */
.yr-footer a { color: rgba(255, 255, 255, .65); text-decoration: none; transition: color .25s; }
.yr-footer a:hover { color: #fff; }
.yr-footer p { color: rgba(255, 255, 255, .65); }

.yr-stat { font-variant-numeric: tabular-nums; }
h1, h2, h3 { text-wrap: balance; }

/* Hero headline dropped 3px from the template sizes (owner request) */
.yr-hero-h1 { font-size: 87px; }
@media (max-width: 1399px) { .yr-hero-h1 { font-size: 77px; } }
@media (max-width: 991px) { .yr-hero-h1 { font-size: 60px; line-height: 1.05; } }
@media (max-width: 575px) { .yr-hero-h1 { font-size: 42px; } }

/* Darker h2s + h3s (owner request 2026-07-31). .text-white keeps priority
   (parallax/footer sections). */
h2, h3 { color: #191919; }
h2.text-white, h3.text-white { color: #fff; }

/* Stack-box with 5 items: template CSS supports exactly 3 (300vh + z-index
   999/99/9). Extend the scroll track and continue the z-index ladder down.
   Desktop only - below 1200px responsive.css unstacks to static flow. */
@media (min-width: 1200px) {
    .stack-box { height: 500vh; }
    .stack-box .stack-item.stack-item-04 { z-index: 6; }
    .stack-box .stack-item.stack-item-05 { z-index: 3; }
}

/* 3x3 features mega menu: crafto styles nav uls as flex-row (built for one
   card per column); our columns hold 3 cards each - stack them vertically. */
@media (min-width: 992px) {
    .navbar .navbar-nav .submenu-content .mega-menu > ul { flex-direction: column; }
}

/* Mega menu hover bridge: our navbar is taller than the template's, leaving a
   ~32px dead gap between the nav item and the dropdown top - crossing it with
   the mouse killed the hover and closed the menu. The ::before extends the
   dropdown's hover surface up through the gap (invisible, inside the li's DOM
   so both CSS :hover and JS mouseleave stay satisfied). */
@media (min-width: 992px) {
    .navbar .navbar-nav li.dropdown .dropdown-menu.submenu-content::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -40px;
        height: 40px;
    }
}

/* Mobile header: logo left; language + login + burger right (crafto's
   .menu-order{order:5} already sends the burger column last below 992px).
   Compact the login pill so the row fits 375px without wrapping. */
@media (max-width: 575px) {
    .yr-nav-login-btn {
        padding: 8px 16px;
        font-size: 12px;
        margin-left: 8px !important;
    }
    .yr-brand-text { font-size: 18px; }
}

/* Stack slide backgrounds: rich edge-to-edge washes from the hero banner's
   palette (pinks #f3578d/#fe7984, soft blue #a6cbfa) - no white endpoints,
   each slide's hues flow into the next as they stack (owner: "all color
   need to blend into a luxury website"). Opaque (slides cover each other);
   still light enough for the dark-gray text. */
.stack-item.yr-stack-1 { background: linear-gradient(135deg, #ffd3de 0%, #ffe3e4 45%, #fbd8ca 100%); }
.stack-item.yr-stack-2 { background: linear-gradient(135deg, #fbd9cb 0%, #ffd9d6 50%, #f9cad7 100%); }
.stack-item.yr-stack-3 { background: linear-gradient(135deg, #f6cbd9 0%, #e3ddf3 50%, #cfe0fb 100%); }
.stack-item.yr-stack-4 { background: linear-gradient(135deg, #d3e2fb 0%, #e9def4 50%, #ffd6e2 100%); }
.stack-item.yr-stack-5 { background: linear-gradient(135deg, #ffd6de 0%, #ffdcd2 55%, #fec9c4 100%); }