/* Responsive Utilities - Mobile First */
/* Navbar toggler and mobile nav */
@media (max-width: 991px) {
  .navbar-toggler {
    display: block !important;
    border: none;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    padding: 0.5rem;
  }
  .navbar-nav {
    flex-direction: column !important;
    align-items: flex-start;
    width: 100%;
    padding: 1rem 0;
  }
  .nav-link-custom {
    width: 100%;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--glass-border);
  }
  .navbar-collapse {
    background: rgba(3,3,12,0.95);
    backdrop-filter: blur(20px);
    border-radius: var(--radius);
    padding: 1rem;
  }
}
/* Breakpoint Variables */
:root {
  --bp-xxs: 320px;
  --bp-xs: 360px;
  --bp-sm: 375px;
  --bp-sm2: 390px;
  --bp-md: 414px;
  --bp-lg: 480px;
  --bp-lg2: 576px;
  --bp-xl: 768px;
  --bp-xl2: 820px;
  --bp-xxl: 992px;
  --bp-xxl2: 1024px;
  --bp-xxxl: 1200px;
  --bp-xxxl2: 1366px;
  --bp-xxxl3: 1440px;
  --bp-xxxl4: 1600px;
  --bp-xxxl5: 1920px;
}

/* Utility Classes */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.max-w-100 { max-width: 100% !important; }
.text-center { text-align: center !important; }
.flex { display: flex !important; }
.grid { display: grid !important; }
.hide-mobile { display: none !important; }
.show-mobile { display: block !important; }

/* Spacing */
.p-sm { padding: 0.5rem !important; }
.p-md { padding: 1rem !important; }
.m-sm { margin: 0.5rem !important; }
.m-md { margin: 1rem !important; }

/* Typography – fluid */
.fs-xs { font-size: clamp(0.75rem, 2vw, 0.9rem) !important; }
.fs-sm { font-size: clamp(0.85rem, 2.5vw, 1rem) !important; }
.fs-md { font-size: clamp(1rem, 3vw, 1.2rem) !important; }
.fs-lg { font-size: clamp(1.25rem, 4vw, 1.5rem) !important; }

/* Responsive Images */
img, video { max-width: 100%; height: auto; display: block; }

/* Inline style overrides – make fixed widths fluid */
[style*="width:"] {
  max-width: 100% !important; width: auto !important;
}
[style*="max-width:"] {
  max-width: 100% !important;
}

/* Tables – mobile scroll */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-table {
  width: 100%;
}

/* Buttons – touch friendly */
.btn-neon, .btn-outline-neon, .btn-admin, .btn-admin-sm, .btn-secondary {
  min-height: 44px;
  line-height: 44px;
}

/* Hamburger menu – ensure visibility */
.topbar-toggle { display: none; }
@media (max-width: 991px) {
  .topbar-toggle { display: block; }
}

/* Media Queries – progressive enhancement */
@media (max-width: var(--bp-xxl)) {
  .section-pad { padding: 80px 0; }
}
@media (max-width: var(--bp-sm)) {
  .hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
}

/* Ensure videos maintain aspect ratio */
.video-thumb-wrap,
.video-thumb {
  aspect-ratio: 16/9;
}

/* Modal fix for overflow on small screens */
.modal-content {
  max-width: 100%;
  margin: 0 1rem;
}