/**
 * Rishthe — responsive layout (mobile, tablet, desktop)
 */

/* Safe areas & touch-friendly base */
html {
    -webkit-text-size-adjust: 100%;
}
body.logged-in {
    padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 992px) {
    body.logged-in {
        padding-bottom: 0;
    }
    .site-header__mobile {
        display: none !important;
    }
    .site-header__desktop {
        display: flex !important;
    }
}

/* App pages: comfortable side padding on small screens */
@media (max-width: 991.98px) {
    :root {
        --nav-height: 56px;
        --bottom-nav-height: 62px;
        --dash-subnav-height: 0px;
    }

    /* Hide desktop subnav — use bottom nav + offcanvas menu */
    .dash-subnav {
        display: none !important;
    }

    body:has(.dash-subnav),
    body.has-dash-subnav {
        padding-top: var(--nav-total-height) !important;
    }

    .dashboard-page,
    .search-page-wrap,
    body.page-app main,
    body.page-app .dashboard-layout {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }

    .container,
    .container-fluid {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }

    /* Mobile header: menu left · logo center · actions right */
    .site-header__inner {
        min-height: var(--nav-height);
        padding-top: 0;
        padding-bottom: 0;
    }
    .site-header__desktop {
        display: none !important;
    }
    .site-header__mobile {
        display: grid !important;
        grid-template-columns: 48px 1fr auto;
        align-items: center;
        width: 100%;
        min-height: var(--nav-height);
        gap: 0.35rem;
    }
    .site-header__slot--start {
        justify-self: start;
    }
    .site-header__slot--center {
        justify-self: center;
        min-width: 0;
        text-align: center;
    }
    .site-header__slot--end {
        justify-self: end;
    }
    .site-header__menu-btn {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-color, var(--lavender));
        border-radius: var(--radius-sm, 8px);
        background: var(--soft-bg);
        color: var(--primary-dark);
        font-size: 1.15rem;
        padding: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .site-header__menu-btn:hover,
    .site-header__menu-btn:focus {
        background: var(--soft-lavender);
        color: var(--primary);
        outline: none;
    }
    .site-brand--compact {
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        text-decoration: none;
        max-width: 100%;
    }
    .site-brand--compact .site-brand__logo {
        width: 34px !important;
        height: 34px !important;
    }
    .site-brand--compact .site-brand__text {
        align-items: center;
        line-height: 1.1;
    }
    .site-brand--compact .site-brand__text strong {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 42vw;
    }
    .site-header__actions--mobile {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-shrink: 0;
    }
    .site-header__icon-btn--sm {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .site-header__avatar-link {
        display: flex;
        line-height: 0;
    }
    .site-header__avatar-link .site-header__avatar {
        width: 36px;
        height: 36px;
        border: 2px solid var(--lavender);
    }
    .site-header__toggler {
        display: none !important;
    }

    /* Search sticky bar — below header only on mobile */
    .search-bar-mini {
        top: var(--nav-total-height) !important;
    }

    body.page-search.logged-in {
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
    }

    /* Profile cards — see profile-card.css */
    .profile-card__shortlist {
        min-height: 44px;
    }

    /* Member rich cards */
    .member-rich-card {
        grid-template-columns: 72px 1fr;
        grid-template-rows: auto auto;
        padding: 0.85rem;
        gap: 0.65rem 0.75rem;
    }
    .member-rich-card__photo {
        grid-row: span 2;
        width: 72px;
    }
    .member-rich-card__compat,
    .interest-status {
        grid-column: 1 / -1;
        justify-self: start;
    }
    .member-rich-card__actions {
        grid-column: 1 / -1;
        flex-wrap: wrap;
    }
    .member-rich-card__actions .btn {
        min-height: 44px;
    }

    /* Dashboard */
    .dash-hero {
        padding: 1rem;
    }
    .dash-hero__main {
        flex-wrap: wrap;
    }
    .dash-hero__aside {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .dash-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Home trust bar */
    .shaadi-trust-bar {
        gap: 1rem;
        padding: 1rem;
    }
    .shaadi-trust-bar > div {
        flex: 1 1 40%;
        text-align: center;
    }

    /* Modals full width on phone */
    .app-menu-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* Offcanvas menu — opens directly from header hamburger */
    .dash-nav-offcanvas {
        width: min(300px, 90vw);
        z-index: 1045;
    }
    .dash-nav-offcanvas .offcanvas-header {
        padding: 0.85rem 1rem;
    }
    .drawer-nav__link {
        min-height: 44px;
        padding: 0.65rem 0.75rem;
        font-size: 0.95rem;
    }

    /* Chat */
    body.page-chat:has(.dash-subnav) {
        padding-top: var(--nav-total-height) !important;
    }
    body.page-chat .chat-page {
        height: calc(100vh - var(--nav-height) - var(--bottom-nav-height) - env(safe-area-inset-bottom, 0px));
    }

    /* Tables / overflow */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }

    .results-top-bar,
    .active-filters-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .results-tabs {
        flex-wrap: nowrap;
    }
}

/* Small phones */
@media (max-width: 575.98px) {
    :root {
        --bottom-nav-height: 58px;
    }

    .dash-stats {
        grid-template-columns: 1fr;
    }

    .dash-stat-card {
        min-height: 44px;
    }

    .mobile-bottom-nav a {
        font-size: 0.58rem;
        padding: 0.2rem 0.15rem;
        min-width: 0;
        flex: 1;
    }

    .mobile-bottom-nav a i {
        font-size: 1.1rem;
    }

    .mobile-bottom-nav__more span {
        font-size: 0.58rem;
    }

    .section-title {
        font-size: 1.1rem;
    }

    .app-hero {
        padding: 1.25rem 1rem !important;
    }

    .app-hero__actions {
        flex-direction: column;
        width: 100%;
    }
    .app-hero__actions .btn {
        width: 100%;
    }

    .partner-search-box .row > [class*="col-"] {
        margin-bottom: 0.25rem;
    }


    .rishthe-footer .row > [class*="col-"] {
        text-align: center;
    }
    .social-links {
        justify-content: center;
    }
}

/* Tablet landscape & small desktop: scrollable subnav with hint */
@media (min-width: 992px) and (max-width: 1399.98px) {
    :root {
        --dash-subnav-height: 44px;
    }
    .dash-subnav__inner {
        position: relative;
    }
    .dash-subnav__scroll {
        mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent 100%);
    }
}

/* Large desktop */
@media (min-width: 1400px) {
    .dashboard-layout {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Touch devices: larger tap targets in subnav */
@media (hover: none) and (pointer: coarse) {
    .dash-subnav__link,
    .dash-subnav__drop > .dash-subnav__link.dropdown-toggle {
        min-width: 44px;
        padding: 0 0.65rem;
    }
}