/* ─────────────────────────────────────────────────────────────────
   SE Theme — Responsive: Mobile-first breakpoints
   Breakpoints: sm=480, md=768, lg=1024, xl=1280
   ───────────────────────────────────────────────────────────────── */

/* ── Large desktop (1280+) ──────────────────────────────────── */
@media (min-width: 1280px) {
  :root { --container: 1240px; }
}

/* ── Desktop (1024–1279) ────────────────────────────────────── */
@media (max-width: 1279px) {
  .se-hero-rank-float { display: none; }
  .se-courses-grid { grid-template-columns: repeat(2, 1fr); }
  .se-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

/* ── Tablet (768–1023) ──────────────────────────────────────── */
@media (max-width: 1023px) {
  :root {
    --sidebar-w: 280px;
    --container: 100%;
  }

  /* Nav */
  #site-navigation { display: none; }
  .se-menu-toggle { display: flex; }

  /* Content grid — single column on tablet, sidebar stacks below article */
  .se-content-grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }
  /* Sidebar no longer sticky below desktop — just flows naturally */
  .se-sidebar {
    position: static;
  }
  .se-sidebar-inner {
    max-height: none;
    overflow-y: visible;
  }

  /* Cards */
  .se-card-grid { grid-template-columns: repeat(2, 1fr); }
  .se-card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .se-trending-grid { grid-template-columns: repeat(2, 1fr); }
  .se-tools-grid { grid-template-columns: repeat(2, 1fr); }

  /* Hero */
  .se-hero { min-height: 70vh; padding: var(--s7) 0; }
  .se-hero-stats { gap: var(--s4); }

  /* Gamebar */
  .se-gamebar-stat:nth-child(n+3) { display: none; }

  /* Footer */
  .se-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile (480–767) ───────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --s7: 36px;
    --s8: 48px;
    --s9: 64px;
  }

  /* Cards */
  .se-card-grid { grid-template-columns: 1fr; }
  .se-card-grid-2 { grid-template-columns: 1fr; }
  .se-card-grid-4 { grid-template-columns: 1fr; }
  .se-trending-grid { grid-template-columns: 1fr; }
  .se-tools-grid { grid-template-columns: 1fr; }
  .se-courses-grid { grid-template-columns: 1fr; }

  /* Featured card */
  .se-card--featured { display: flex; flex-direction: column; }
  .se-card--featured .se-card-thumb { aspect-ratio: 16/9; }

  /* Post nav */
  .se-post-nav { grid-template-columns: 1fr; }

  /* Hero */
  .se-hero { min-height: 60vh; padding: var(--s8) 0 var(--s7); }
  .se-hero-stats { flex-wrap: wrap; gap: var(--s4); }

  /* Author box */
  .se-author { flex-direction: column; }

  /* Footer */
  .se-footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .se-footer-bottom { flex-direction: column; text-align: center; }

  /* Gamebar — slim on mobile */
  .se-gamebar { height: 24px; }
  .se-gamebar-stats { display: none; }
  #content { padding-top: calc(var(--header-h) + 24px + var(--s6)); }

  /* Search */
  .se-search-form {
    right: var(--s4);
    left: var(--s4);
    width: auto;
  }

  /* Social share */
  .se-social-share { gap: var(--s1); }

  /* Tables — scrollable on mobile */
  .entry-content table {
    font-size: .8rem;
  }
  .entry-content .table-wrap { overflow-x: auto; }
}

/* ── Small mobile (< 480) ────────────────────────────────────── */
@media (max-width: 479px) {
  :root { --s5: 18px; --s6: 24px; }

  body { font-size: 15px; }
  .se-container { padding-left: var(--s4); padding-right: var(--s4); }

  .se-hero-actions { flex-direction: column; align-items: flex-start; }
  .se-hero-actions .se-btn { width: 100%; justify-content: center; }

  .se-post-meta { flex-direction: column; align-items: flex-start; gap: var(--s1); }
  .se-post-meta-sep { display: none; }
}


/* ── Mobile header: prevent overflow, always show hamburger ───── */
@media (max-width: 1023px) {
  /* Contain overflow — all non-shrinkable children were forcing width past viewport */
  .se-header-inner {
    overflow: hidden;
  }

  /* Hide the Log In / Join Free text labels — keep icons if any */
  .se-header-auth .se-btn-ghost { display: none; }
  .se-header-auth .se-btn-primary { padding: 6px 12px; font-size: .7rem; }

  /* Ensure hamburger is never squeezed out */
  .se-menu-toggle {
    display: flex !important;
    flex-shrink: 0;
    margin-left: var(--s2);
  }

  /* Allow actions row to shrink so header doesn't overflow */
  .se-header-actions {
    gap: var(--s2);
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }

  /* ── Logo: hide image on mobile, show text ──
   * Desktop shows the custom logo image; mobile shows "SecurityElites" text
   * to save horizontal space and prevent overflow.
   */
  .site-logo-img { display: none; }
  .site-logo-img ~ .site-logo-text { display: block; }

  /* ── Logged-in user trigger: compact pill on mobile ──
   * Hide rank name + XP text — they push the header past the viewport.
   * Just show avatar + caret (recognizable, tappable, ~50px wide).
   */
  .se-user-trigger-rank { display: none; }
  .se-user-trigger-xp   { display: none; }
  .se-user-trigger {
    padding: 3px 8px 3px 3px;
    gap: 4px;
    flex-shrink: 0;
  }

  /* Hide search toggle text if present */
  .se-search-toggle span { display: none; }
}

@media (max-width: 479px) {
  /* On very small phones, hide Log In entirely — only show Join Free + hamburger */
  .se-header-auth { display: flex; gap: var(--s2); }
  .se-header-auth .se-btn-ghost { display: none !important; }
  .se-header-auth .se-btn-primary {
    padding: 5px 10px;
    font-size: .65rem;
    white-space: nowrap;
  }
  /* Shrink logo text on very small phones */
  .site-logo-text { font-size: .75rem; letter-spacing: 1px; }

  /* User dropdown: constrain to viewport width */
  .se-user-dropdown {
    position: fixed;
    right: var(--s3);
    left: var(--s3);
    width: auto;
    max-width: calc(100vw - var(--s3) * 2);
  }
  /* Slightly smaller avatar on compact phones */
  .se-user-trigger .se-user-avatar { width: 24px; height: 24px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
  #masthead, .se-gamebar, .se-sidebar, #colophon,
  .se-social-share, .se-post-nav, .se-social-ticker,
  .se-course-progress-bar { display: none !important; }

  body { background: #fff; color: #000; }
  .se-container { max-width: 100%; }
  #content { padding-top: 0; }
  a { color: #000; }
  pre { border: 1px solid #ccc; background: #f9f9f9; }
  .entry-content { max-width: 100%; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .se-hero::before { animation: none; }
  body::after { display: none; }
}