/* DEZIPP - Responsive Design and Media Queries */
html, body { max-width: 100%; }
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
}

/* Sports mobile/tablet tightening */
@media (max-width: 767px) {
    #sport-section .results-strip { gap: .35rem; padding: .25rem .35rem; }
    #sport-section .results-strip .strip-days { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
    #sport-section .results-strip .strip-days::-webkit-scrollbar { height: 6px; }
    #sport-section .results-strip .strip-days { scrollbar-width: thin; }
    #sport-section .results-strip .strip-nav { width: 24px; height: 24px; }
    #sport-section .results-strip .strip-days { gap: .25rem; }
    #sport-section .results-strip .day { width: 40px; height: 34px; }
    #sport-section .results-strip .day .dow { font-size: 11px; }
    #sport-section .results-strip .day .dom { font-size: 11px; }
    #sport-section .results-strip .tz { font-size: .6rem; }

    #sport-section .upcoming-grid { gap: .5rem; padding: .2rem .2rem .4rem; }
    #sport-section .upcoming-day { min-width: 200px; padding: .4rem; }
    #sport-section .upcoming-day .day-title { font-size: .8rem; }
    #sport-section .upcoming-card { padding: .35rem .45rem; gap: .4rem; }
    #sport-section .upcoming-card .teams .name { font-size: .8rem; }
    #sport-section .upcoming-card .time { font-size: 11px; }
        #sport-section .chip, #sport-section .chip-live { font-size: .68rem; padding: .1rem .35rem; }
        /* High contrast for live and score badges */
        #sport-section .chip-live { background: #fee2e2; color: #b91c1c; border: 0.2px solid #fecaca; }
            #sport-section .score-badge { background: #ffffff; color: #0f172a; border: 0.2px solid rgba(0,0,0,0.12); }
            #sport-section .time { color: #0f172a; }

    #sport-section .sports-row { padding: .55rem .7rem; gap: .6rem; font-size: 11px; }
    #sport-section .sports-row .teams .team .team-name { font-size: var(--post-font-size, 0.9rem); }
    #sport-section .sports-row .scoreline { font-size: var(--post-font-size, 0.9rem); }
    #sport-section .sports-table .team-name, #sport-section .sports-table .stat-cell { font-size: .8rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #sport-section .results-strip { gap: .4rem; padding: .3rem .45rem; }
    #sport-section .results-strip .day { width: 42px; height: 36px; }
    #sport-section .results-strip .day .dow { font-size: 11px; }
    #sport-section .results-strip .day .dom { font-size: 11px; }
    #sport-section .upcoming-day { min-width: 210px; }
    #sport-section .upcoming-card .teams .name { font-size: var(--post-font-size, 0.9rem); }
}

/* Base responsive containers */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Breakpoint Variables (for reference) */
/* xs: 0px - 639px (default) */
/* sm: 640px+ */
/* md: 768px+ */
/* lg: 1024px+ */
/* xl: 1280px+ */
/* 2xl: 1536px+ */

/* Grid Layout Responsive */
@media (min-width: 640px) {
    .container { padding: 0 1.5rem; }
    
    .main-grid-container {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "main-content";
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container { padding: 0 2rem; }
    
    .main-grid-container {
        grid-template-columns: 280px 1fr;
        grid-template-areas: 
            "left-sidebar main-content";
        max-width: 1000px;
    }
    
    .left-sidebar-combined {
        display: block;
        position: sticky;
        top: calc(2.5rem + 1rem);
        align-self: start;
        height: fit-content;
    max-height: calc(100vh - var(--header-offset, 6rem));
        overflow-y: hidden;
        background: linear-gradient(135deg, #48D1CC 0%, #40E0D0 50%, #20B2AA 100%);
        border-radius: 20px;
        box-shadow: 0 12px 40px rgba(72, 209, 204, 0.4);
        min-width: 280px;
        width: 280px;
    }
}

@media (min-width: 1024px) {
    .main-grid-container {
        grid-template-columns: 280px 1fr 320px;
        grid-template-areas: 
            "left-sidebar main-content right-stats";
        max-width: 1200px;
    }
    
    .insights-right-top-area {
        display: block;
    }
}

@media (min-width: 1280px) {
    .main-grid-container {
        max-width: 1400px;
        grid-template-columns: 300px 1fr 350px;
    }
}

/* Navigation Responsive */
@media (max-width: 767px) {
    .nav-desktop {
        display: none;
    }
    
    .nav-mobile {
        display: flex;
    }
    
    .left-sidebar-combined {
        display: none;
    }
    /* Hide right sidebar on mobile */
    .right-sidebar {
        display: none;
    }
    
    .mobile-menu {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid var(--gray-200);
        padding: 0.75rem;
        z-index: 40;
    }
    
    .mobile-menu-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .mobile-menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem;
        color: var(--gray-600);
        text-decoration: none;
        font-size: 11px;
        transition: color 0.2s;
    }
    
    .mobile-menu-item.active {
        color: var(--primary-blue);
    }
    
    .mobile-menu-item i {
        font-size: 14px;
        margin-bottom: 0.25rem;
    }
}

/* Hide right sidebar on tablets too */
@media (max-width: 1023px) {
    .right-sidebar { display: none; }
}

/* Mobile Create Post FAB (floating above feed) */
@media (max-width: 767px) {
    /* Reposition the existing floating FAB */
    #floating-post-btn {
        position: fixed;
        right: calc(env(safe-area-inset-right, 0px) + 16px);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 64px + 16px); /* above bottom nav + safe area */
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #429E9D;
        color: #fff;
        border: 0.2px solid #000;
        box-shadow: 0 10px 24px rgba(0,0,0,0.22);
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 70; /* above nav and overlay */
    }
    #floating-post-btn:active { transform: translateY(1px) scale(0.98); }
}

@media (min-width: 768px) {
    #floating-post-btn { display: none; }
}

@media (min-width: 768px) {
    .nav-mobile {
        display: none;
    }
    
    .nav-desktop {
        display: block;
    }
    
    .mobile-menu {
        display: none;
    }
}

/* Header Responsive */
@media (max-width: 639px) {
    .header-container {
        padding: 0.75rem 1rem;
    }
    
    .header-title {
        font-size: 14px;
    }
    
    .header-actions {
        gap: 0.5rem;
    }
    
    .header-search {
        display: none;
    }
}

@media (min-width: 640px) {
    .header-container {
        padding: 1rem 1.5rem;
    }
    
    .header-search {
        display: block;
        max-width: 300px;
    }
}

@media (min-width: 1024px) {
    .header-search {
        max-width: 400px;
    }
}

/* Cards and Content Responsive */
@media (max-width: 767px) {
    /* Keep cards within safe padding; avoid negative margins */
    .main-grid-container { padding: 0; padding-left: 0; padding-right: 0; }
    .posts-content-area { width: 100%; max-width: none; padding-left: 0; padding-right: 0; margin: 0; box-sizing: border-box; }
    .posts-content-area .post-card,
    .post-card { display: block; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 12px; border-radius: 12px; box-sizing: border-box; }
    .post-card .post-content-area { padding: 8px 8px 0 8px; }
    .card { margin: 0 0 12px 0; border-radius: 12px; }
    .card-body { padding: 12px; }
}

/* Modal Responsive */
@media (max-width: 639px) {
    .modal-container {
    width: 100%;
        height: 100vh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        margin: 0;
    }
    
    .modal-overlay {
        padding: 0;
    }
}

@media (min-width: 640px) {
    .modal-container {
        width: 90vw;
        max-width: 500px;
        max-height: 90vh;
        border-radius: 1rem;
        margin: 2rem;
    }
}

@media (min-width: 1024px) {
    .modal-container {
        max-width: 600px;
    }
}

/* Chat Popup - Hidden by default */
.chat-popup {
    display: none; /* Hide chat popup completely */
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 350px;
    height: 500px;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Typography Responsive */
@media (max-width: 639px) {
    .text-3xl { font-size: 1.5rem; }
    .text-2xl { font-size: 14px; }
    .text-xl { font-size: 1.125rem; }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 14px; }
    h3 { font-size: 1.125rem; }
}

/* Button Responsive */
@media (max-width: 639px) {
    .btn {
        padding: 0.625rem 1rem;
        font-size: var(--post-font-size, 0.9rem);
    }
    
    .btn-small {
        padding: 0.5rem 0.75rem;
        font-size: 11px;
    }
}

/* Form Responsive */
@media (max-width: 639px) {
    .form-input {
        padding: 0.625rem 0.75rem;
        font-size: var(--post-font-size, 0.9rem);
    }
    
    .form-group {
        margin-bottom: 0.75rem;
    }
}

/* Profile Responsive */
@media (max-width: 639px) {
    .profile-picture-lg {
        width: 60px;
        height: 60px;
    }
    
    .profile-stats {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .profile-info-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

@media (min-width: 640px) {
    .profile-info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .profile-info-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* News Cards Responsive */
@media (max-width: 639px) {
    .news-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .news-card {
        margin: 0 -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

@media (min-width: 640px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Sidebar Responsive */
/* Default: hide mobile-only sidebar/overlay on desktop and larger */
#mobile-sidebar,
.sidebar-mobile,
#mobile-sidebar-overlay,
.sidebar-overlay {
    display: none;
}

/* Pockets Hub Mosaic */
.pockets-hub { margin-bottom: 1rem; }
.pockets-hub-tabs { display:flex; gap:.5rem; margin-bottom:.75rem; flex-wrap:wrap; }
.pockets-hub .hub-tab { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem; border: 0.2px solid #e5e7eb; border-radius:999px; background:#fff; color:#374151; font-weight: 400; cursor:pointer; }
.pockets-hub .hub-tab.active { background:#0f766e; border-color:#0f766e; color:#fff; box-shadow:0 6px 16px rgba(15,118,110,.22); }
.pockets-mosaic-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:.65rem; }
.pocket-tile { position:relative; display:block; color:#fff; text-decoration:none; border-radius:1rem; overflow:hidden; background: var(--tile-bg, #111827); box-shadow: 0 8px 22px rgba(0,0,0,.25); border: 0.2px solid rgba(255,255,255,.08); }
.pocket-tile .tile-inner { padding: .75rem; min-height: 120px; background: linear-gradient(160deg, rgba(255,255,255,.06), transparent 40%); height:100%; display:flex; flex-direction:column; justify-content:space-between; }
.pocket-tile .tile-top { display:flex; align-items:center; justify-content:space-between; }
.pocket-tile .tile-badge { font-size:.7rem; background: rgba(255,255,255,.12); padding:.15rem .5rem; border-radius:999px; border: 0.2px solid rgba(255,255,255,.18); }
.pocket-tile .tile-trend { font-size: 11px; color: var(--tile-accent, #22d3ee); font-weight: 400; }
.pocket-tile .tile-title { font-weight: 400; font-size: 14px; letter-spacing:.02em; }
.pocket-tile .tile-footer { display:flex; justify-content:flex-end; }
.pocket-tile .tile-view-btn { background: var(--tile-accent, #22d3ee); color:#0b1220; padding:.35rem .6rem; border-radius:.6rem; border: 0.2px solid rgba(0,0,0,.25); font-weight: 400; cursor:pointer; }
.tile-lg { grid-column: span 3; min-height: 180px; }
.tile-md { grid-column: span 2; min-height: 150px; }
.tile-sm { grid-column: span 1; min-height: 140px; }

@media (max-width: 1023px) { .pockets-mosaic-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) { .pockets-mosaic-grid { grid-template-columns: repeat(2, 1fr); } .tile-lg{grid-column: span 2;} .tile-md{grid-column: span 2;} .tile-sm{grid-column: span 1;} }
/* Pockets removed */

/* Global feed mobile polish */
@media (max-width: 767px) {
    #global-feed-section .news-card, #global-feed-section .post-card { border-radius: 12px; margin: 0 0 12px 0; }
    #global-feed-section .news-grid { gap: .75rem; }
}

/* Profile layout tweaks */
#profile-section .profile-header { display:flex; gap:1rem; align-items:center; }
#profile-section .profile-header .avatar { width:80px; height:80px; border-radius:999px; border: 0.2px solid #000; }
@media (min-width: 768px) { #profile-section .profile-header .avatar { width:96px; height:96px; } }

/* --- Profile dynamic fit polish (overrides) --- */
/* Sticky profile navigation with safe-area/appbar offset */
#profile-section .profile-navigation {
    position: sticky;
    top: calc(var(--appbar-height, 56px) + var(--safe-area-inset-top, 0px));
    z-index: 20;
    backdrop-filter: saturate(140%) blur(6px);
    -webkit-backdrop-filter: saturate(140%) blur(6px);
}

#profile-section .profile-navigation.is-sticky {
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Refine posts grid for tablet widths to allow two columns earlier */
@media (min-width: 640px) and (max-width: 1023px) {
    #profile-section .profile-posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.25rem;
    }
}

/* Compact paddings and avatar scaling on small screens */
@media (max-width: 640px) {
    #profile-section .profile-main-info { padding: .5rem 1rem 16px; gap: .5rem .75rem; }
    #profile-section .profile-navigation {
        padding: 0 1rem;
    }
    #profile-section .profile-tab-content {
        padding: 24px 1rem;
    }
    #profile-section .profile-picture-section.small-left .profile-picture-wrapper-large { width: 64px; height: 64px; margin-top: 0; }
    #profile-section .profile-name {
        font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    }
    #profile-section .profile-actions { justify-content: center; }
}

/* Ultra-narrow devices tweaks */
@media (max-width: 380px) {
    #profile-section .profile-stat-card { min-width: 72px; padding: .55rem .6rem; }
    #profile-section .profile-nav-tab { padding: 8px 10px; font-size: 11px; }
    #profile-section .profile-username { font-size: .8rem; }
}

/* Tablet compact wrap */
@media (min-width: 641px) and (max-width: 1023px) {
    #profile-section .profile-main-info { padding: .75rem 1.25rem; }
    #profile-section .profile-picture-section.small-left .profile-picture-wrapper-large { width: 72px; height: 72px; margin-top: 0; }
}

/* Subtle scrollable tab shadows (visual affordance) */
#profile-section .profile-nav-tabs {
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

/* Sports page small polish */
#sport-section .section-card { border-radius: 14px; }
#sport-section .sports-grid-layout { display:grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 1024px) { #sport-section .sports-grid-layout { grid-template-columns: repeat(3, 1fr); } }
#sport-section .sports-table .table-header { position: sticky; top: 0; background:#fff; z-index:1; }
#sport-section .sports-table { overflow-x:auto; }

@media (max-width: 767px) {
    #mobile-sidebar,
    #mobile-sidebar-overlay { display: block; }
    .insights-right-top-area {
        display: none;
    }
    
    .sidebar-mobile {
        display: block;
        position: fixed;
        top: var(--header-offset, 6rem);
        left: -100%;
        width: 280px;
        height: calc(100vh - var(--header-offset, 6rem) - 64px); /* account for header and bottom nav */
        background: white;
        z-index: 50;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }
    
    .sidebar-mobile.open {
        left: 0;
    }
    
    .sidebar-overlay {
        display: block;
        position: fixed;
        top: var(--header-offset, 6rem);
        left: 0;
        right: 0;
        bottom: 64px; /* keep bottom nav clickable */
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .sidebar-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    /* Sports section mobile formatting */
    #sports-section .section-card, #sports-section .section-content { padding: 0 12px; }
    #sports-section .card { margin-left: 0; margin-right: 0; }
    #sports-section table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #sports-section th, #sports-section td { white-space: nowrap; }

    /* Friends section mobile formatting */
    #friends-section .section-card, #friends-section .section-content { padding: 0 12px; }
    .friends-main-container { grid-template-columns: 1fr; }
    .friends-main-container .friends-list, .friends-main-container .friend-details { width: 100%; }

    /* Messages section mobile formatting */
    #messages-section .section-card, #messages-section .section-content { padding: 0 12px; }
    .messages-main-container { grid-template-columns: 1fr; }
    .chat-info-panel { display: none; }
    #messages-section .messages-layout { height: calc(100vh - var(--header-offset, 6rem) - 72px); margin: 0; border-radius: 0; }
}

/* Mobile adjustments for layout */
@media (max-width: 1024px) {
    .main-content-area {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        background: white;
        max-width: none; /* remove any cap on smaller screens */
        margin: 0;       /* remove side gutters */
        box-sizing: border-box;
    }
}

/* Mobile content spacing */
@media (max-width: 767px) {
    .main-content-area { padding-bottom: 84px; }
}

/* Mobile-only header simplification: center logo, hide actions */
@media (max-width: 767px) {
    /* Hide Friends, Messages, Create (entire actions cluster) */
    #site-header .header-actions { display: none; }

    /* Center the logo within the header */
    #site-header .header-inner {
        justify-content: center;
    }

    /* Ensure the logo link doesn’t inherit left alignment */
    #site-header #logo-link {
        margin: 0 auto;
    }

    /* Hamburger visibility is controlled by dezipp-aesthetic.css on mobile */
    /* (removed forced hidden to avoid conflicts) */
}

/* Spacing Responsive */
@media (max-width: 639px) {
    .p-6 { padding: 1rem; }
    .p-5 { padding: 0.875rem; }
    .p-4 { padding: 0.75rem; }
    
    .mb-4 { margin-bottom: 0.75rem; }
    .mt-4 { margin-top: 0.75rem; }
    
    .space-x-6 > :not([hidden]) ~ :not([hidden]) { margin-left: 1rem; }
    .space-x-4 > :not([hidden]) ~ :not([hidden]) { margin-left: 0.75rem; }
}

/* Utility Classes for Responsive Design */
.hidden-mobile {
    display: block;
}

.hidden-desktop {
    display: none;
}

@media (max-width: 767px) {
    .hidden-mobile {
        display: none;
    }
    
    .hidden-desktop {
        display: block;
    }
    
    .mobile-only {
        display: block;
    }
    
    .desktop-only {
        display: none;
    }
}

/* Extra-small phones: make Pages tiles narrower to fit */
@media (max-width: 360px) {
    #pages-section #pages-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.5rem;
    }
}

@media (max-width: 767px) {
    /* Force grid mode on mobile to avoid absolute-positioned packed layout height issues */
    #pages-section #pages-list { display: grid; position: static; height: auto; }
    #pages-section.packed-layout #pages-list { display: grid; position: static; height: auto; }
    #pages-section.packed-layout #pages-list .page-tile { position: static; transform: none; width: auto; }
}

/* Ensure Pages section can expand fully and not be constrained by a parent flex sizing */
#pages-section { min-height: 60vh; }

@media (min-width: 768px) {
    .mobile-only {
        display: none;
    }
    
    .desktop-only {
        display: block;
    }
}

/* Grid Utilities Responsive */
@media (max-width: 639px) {
    .grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Text Alignment Responsive */
@media (max-width: 639px) {
    .mobile-text-center { text-align: center; }
    .mobile-text-left { text-align: left; }
}

/* Flexbox Responsive */
@media (max-width: 639px) {
    .mobile-flex-col { flex-direction: column; }
    .mobile-flex-row { flex-direction: row; }
}

/* Print Styles */
@media print {
    .no-print {
        display: none;
    }
    
    .print-only {
        display: block;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    .card, .post-card {
        box-shadow: none;
        border: 0.2px solid #ccc;
        page-break-inside: avoid;
    }
    
    a {
        text-decoration: underline;
        color: black;
    }
}

/* Ensure inline slide-out search label shows on slightly wider phones */
@media (min-width: 380px) and (max-width: 767px) {
    #mobile-slide-menu .mobile-sidebar-search .ms-label { display: inline; font-weight: 400; font-size: var(--post-font-size, 0.9rem); color:#374151; }
}