/* ═══════════════════════════════════════════════════════════════
   ILIASS — Mobile Responsive Improvements
   ═══════════════════════════════════════════════════════════════ */

/* ── Prevent horizontal overflow (clip instead of hidden to preserve sticky) ── */
body {
    overflow-x: clip;
    max-width: 100vw;
}

/* ── Scroll lock when menu open ──────────────────────────────── */
html.menu-open,
html.menu-open body {
    overflow: hidden !important;
    height: 100% !important;
    position: relative !important;
}

/* ── Mobile menu drawer ──────────────────────────────────────── */
#mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85vw;
    max-width: 380px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    -webkit-overflow-scrolling: touch;
}
#mobile-menu.menu-open {
    transform: translateX(0);
}

/* ── Overlay ─────────────────────────────────────────────────── */
#mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0);
    transition: background 0.35s ease, backdrop-filter 0.35s ease;
    pointer-events: none;
    display: none;
}
#mobile-menu-overlay.overlay-visible {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

/* ── Mobile nav menu items ────────────────────────────────────── */
#mobile-menu .mobile-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
#mobile-menu .mobile-nav li {
    margin: 0;
}
#mobile-menu .mobile-nav > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.15s ease;
}
#mobile-menu .mobile-nav > li > a:hover,
#mobile-menu .mobile-nav > li > a:active {
    background: hsl(var(--accent));
}
#mobile-menu .mobile-nav > li.current-menu-item > a,
#mobile-menu .mobile-nav > li.current-menu-ancestor > a {
    color: hsl(var(--primary));
    font-weight: 600;
    background: hsl(var(--primary) / 0.06);
}

/* Sub-menu items */
#mobile-menu .mobile-nav .sub-menu {
    list-style: none;
    padding: 0 0 0.25rem 0;
    margin: 0;
}
#mobile-menu .mobile-nav .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0.375rem 0.75rem 0.375rem 2.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
#mobile-menu .mobile-nav .sub-menu a:hover {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
}

/* ── Container overrides on mobile ────────────────────────────── */
@media (max-width: 640px) {
    .container-wide {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .section-padding {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* ── BuddyPress Activity — mobile ─────────────────────────────── */
@media (max-width: 768px) {
    /* Activity stream cards */
    .iliass-activity-card .p-4 {
        padding: 0.75rem;
    }
    .iliass-activity-card .p-6 {
        padding: 0.75rem;
    }

    /* Comment form */
    .iliass-comment-form {
        flex-wrap: wrap;
    }
    .iliass-comment-form textarea {
        min-height: 2.5rem;
    }
    .iliass-comment-form .rounded-full {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Comment zone */
    .iliass-comment-zone {
        padding-left: 0;
        padding-right: 0;
    }

    /* Action buttons — full width grid */
    .iliass-activity-card .grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }

    /* Post form */
    #whats-new-form .flex.gap-4 {
        gap: 0.5rem;
    }
    #whats-new-form textarea {
        font-size: 0.875rem;
    }
}

/* ── BuddyPress Profile — mobile ──────────────────────────────── */
@media (max-width: 768px) {
    /* Profile header */
    #buddypress .container-wide {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Profile navigation tabs — horizontal scroll */
    #buddypress nav.flex {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #buddypress nav.flex::-webkit-scrollbar {
        display: none;
    }
    #buddypress nav.flex a {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Profile avatar — smaller on mobile */
    #buddypress .p-1.rounded-full {
        max-width: 100px;
    }

    /* Profile name */
    #buddypress h1 {
        font-size: 1.75rem !important;
    }

    /* Sidebar + feed layout */
    #buddypress .grid.grid-cols-1.lg\:grid-cols-3 {
        gap: 1rem;
    }

    /* Friend cards grid */
    .grid.sm\:grid-cols-2.lg\:grid-cols-3 {
        gap: 0.75rem;
    }

    /* Profile action buttons */
    #buddypress .flex.gap-3 {
        flex-wrap: wrap;
    }
    #buddypress .px-6.py-3,
    #buddypress .px-4.py-3 {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}

/* ── BuddyPress Nested Comments ───────────────────────────────── */
#buddypress .activity-comments {
    margin-left: 0;
    padding-left: 0;
}
#buddypress .activity-comments .acomment-item {
    border-left: 2px solid hsl(var(--border));
    padding-left: 1rem;
    margin-top: 0.75rem;
}
#buddypress .activity-comments .acomment-meta {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}
#buddypress .activity-comments .acomment-content {
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
@media (max-width: 768px) {
    #buddypress .activity-comments .acomment-item {
        padding-left: 0.5rem;
        margin-left: 0;
    }
}

/* ── Members directory — mobile ───────────────────────────────── */
@media (max-width: 640px) {
    /* Search & filter bar */
    .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    /* Member cards — single column */
    .grid.xl\:grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* ── Events page — mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
    /* Event cards grid → single column */
    .grid.md\:grid-cols-3.gap-6 > .group {
        grid-column: 1 / -1;
    }

    /* Event card inner grid (date | content) */
    .group .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
}

/* ── Footer — mobile ──────────────────────────────────────────── */
@media (max-width: 640px) {
    footer .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    footer .flex.md\:flex-row {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    /* Legal links wrap */
    footer .flex.items-center.gap-4 {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ── Hero section — mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    .min-h-\[90vh\] {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    /* Hide decorative borders on mobile */
    .border-dashed {
        display: none;
    }
    /* Hero arrow */
    .animate-arrow-bounce {
        display: none;
    }
}

/* ── General utility — text overflow prevention ───────────────── */
@media (max-width: 768px) {
    h1, h2, h3, h4 {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    /* Long translated strings */
    .font-body {
        overflow-wrap: break-word;
    }
    /* Tables and pre blocks */
    table, pre {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ── Topbar is hidden on mobile (hidden md:block) — no mobile overrides needed ── */

/* ═══════════════════════════════════════════════════════════════
   GLOBAL MOBILE FIXES (Sprint Recette)
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography — responsive heading sizes ───────────────────── */
@media (max-width: 640px) {
    h1, .text-5xl, .text-4xl { font-size: 1.75rem !important; line-height: 1.2 !important; }
    h2, .text-3xl { font-size: 1.375rem !important; }
    .text-2xl { font-size: 1.25rem !important; }
    /* Profile name */
    #buddypress h1, .text-4xl.lg\:text-5xl { font-size: 1.5rem !important; }
}

/* ── Touch targets — minimum 44px on all interactive elements ── */
@media (max-width: 768px) {
    button, a.button, input[type="submit"],
    .inline-flex.items-center.justify-center {
        min-height: 44px;
    }
    /* Activity action buttons */
    .iliass-activity-card button,
    .iliass-activity-card a[class*="inline-flex"] {
        min-height: 44px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* ── Activity feed — mobile improvements ─────────────────────── */
@media (max-width: 768px) {
    /* Feed tabs */
    .bg-muted\/30.rounded-lg.p-1 {
        gap: 0.125rem;
    }
    .bg-muted\/30.rounded-lg.p-1 a {
        font-size: 0.75rem;
        padding: 0.5rem 0.375rem;
        gap: 0.25rem;
    }
    .bg-muted\/30.rounded-lg.p-1 svg { width: 14px; height: 14px; }

    /* Post form visibility selector */
    #whats-new-form select { font-size: 0.6875rem; }

    /* Activity card padding */
    .iliass-activity-card .px-5 { padding-left: 0.75rem; padding-right: 0.75rem; }
    .iliass-activity-card .pt-5 { padding-top: 0.75rem; }
}

/* ── Profile page — mobile ───────────────────────────────────── */
@media (max-width: 768px) {
    /* Avatar smaller */
    #buddypress .relative.animate-fade-in .rounded-full img,
    #buddypress .relative.animate-fade-in .rounded-full {
        width: 100px !important; height: 100px !important;
    }
    /* Stack header vertically */
    #buddypress .flex.flex-col.lg\:flex-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    /* Stats row compact */
    #buddypress .flex.gap-6.text-center {
        gap: 0.75rem;
    }
    #buddypress .flex.gap-6 .rounded-lg {
        padding: 0.375rem 0.625rem;
    }
    /* Action buttons wrap */
    #buddypress .flex.gap-3 button,
    #buddypress .flex.gap-3 a {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
    /* Sidebar cards */
    #buddypress .rounded-2xl.p-6 {
        padding: 1rem;
    }
    /* Profile tabs scroll */
    #buddypress .sticky nav.flex {
        gap: 0.25rem;
    }
    #buddypress .sticky nav.flex a {
        font-size: 0.8125rem;
        padding-bottom: 0.5rem;
    }
}

/* ── Profile edit — mobile ───────────────────────────────────── */
@media (max-width: 640px) {
    .iliass-profile-edit .editfield {
        padding: 0.875rem;
    }
    .iliass-profile-edit .editfield ul {
        grid-template-columns: 1fr !important;
    }
    .iliass-profile-edit ul.button-nav[role="navigation"] {
        gap: 0.125rem;
    }
    .iliass-profile-edit ul.button-nav li a {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }
}

/* ── Members directory — mobile refinements ──────────────────── */
@media (max-width: 768px) {
    /* Sidebar filters — full width above results */
    .flex.flex-col.lg\:flex-row > aside {
        width: 100% !important;
    }
    /* Member cards on small phones */
    #members-grid {
        gap: 0.75rem;
    }
    /* Campus badge text smaller */
    #members-grid .text-\[11px\] {
        font-size: 0.5625rem;
    }
}

/* ── Search results — mobile ─────────────────────────────────── */
@media (max-width: 640px) {
    /* Search form stacks */
    .max-w-2xl .flex.flex-1.min-w-0 {
        flex-direction: column;
    }
    .max-w-2xl .flex.flex-1.min-w-0 input {
        border-radius: 0.5rem !important;
        border-right: 1px solid hsl(var(--border)) !important;
    }
    .max-w-2xl .flex.flex-1.min-w-0 select {
        border-radius: 0.5rem !important;
        margin-top: 0.5rem;
    }
    /* Result cards */
    .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        gap: 0.75rem;
    }
    /* Pagination compact */
    .iliass-pagination .page-numbers {
        min-width: 2rem; height: 2rem;
        font-size: 0.75rem; padding: 0 0.5rem;
    }
}

/* ── Registration form — mobile ──────────────────────────────── */
@media (max-width: 640px) {
    /* Main card padding */
    #buddypress .p-6.pt-0.px-6.md\:px-8 { padding-left: 1rem; padding-right: 1rem; }
    #buddypress .flex.flex-col.space-y-1\.5.p-6 { padding: 1rem; }
    /* xProfile fields single column */
    .iliass-bp-fields { grid-template-columns: 1fr !important; gap: 0.75rem !important; }
}

/* ── Single CPT page — mobile ────────────────────────────────── */
@media (max-width: 640px) {
    /* Meta info wraps nicely */
    .flex.flex-wrap.items-center.gap-4 {
        gap: 0.5rem;
    }
    /* Info cards */
    .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Contact form — mobile ───────────────────────────────────── */
@media (max-width: 640px) {
    .grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* ── Safe area for iOS bottom bar ────────────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    footer { padding-bottom: env(safe-area-inset-bottom); }
    #mobile-menu { padding-bottom: env(safe-area-inset-bottom); }
}