/*
 * mobile.css — ProfessorCedar.com
 * Shared mobile styles applied to all pages.
 * Loaded after page-specific styles so it wins specificity.
 *
 * Breakpoints:
 *   ≤768px  tablet / large phone (landscape)
 *   ≤480px  phone (portrait) — primary target
 *   ≤360px  small phone
 */

/* ── UNIVERSAL BASE ──────────────────────────────────────────────────────────*/
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%; /* prevent iOS font inflation */
}

body {
  overflow-x: hidden;
  min-width: 0;
}

img, video, svg {
  max-width: 100%;
  height: auto;
}

/* ── SHARED NAV (pc-nav) ─────────────────────────────────────────────────────*/

/* Hide mobile-only elements on desktop by default */
.pc-hamburger    { display: none !important; }
.pc-mobile-menu  { display: none !important; }

/* FIX 2: Eliminate the gap between nav button and dropdown so hover never breaks.
   Use padding-top on the dropdown instead of top offset, and extend the
   group's hover area downward so the cursor stays inside a hover target. */
.pc-nav-group {
  padding-bottom: 8px;         /* extends hover zone below the button */
  margin-bottom: -8px;         /* compensates so layout stays the same */
}

.pc-nav-dropdown {
  top: 100% !important;        /* flush against the button — no gap */
  padding-top: 10px !important;/* invisible padding bridges button→items */
  margin-top: 0 !important;
}

@media (max-width: 768px) {
  .pc-nav {
    padding: 0 16px;
    height: 52px;
  }

  .pc-nav-groups {
    display: none; /* hide dropdown nav on mobile */
  }

  /* Show a compact hamburger-style icon strip instead */
  .pc-nav-home {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    padding: 7px 10px;
  }

  /* Mobile nav drawer — toggled by JS */
  .pc-mobile-menu {
    display: none !important; /* hidden until .open is added by JS */
    position: fixed;
    top: 52px;
    left: 0; right: 0;
    background: #0e120d;
    border-bottom: 1px solid #2a3828;
    z-index: 199;
    padding: 8px 0 12px;
    max-height: calc(100dvh - 52px);
    overflow-y: auto;
  }

  .pc-mobile-menu.open {
    display: block !important; /* JS adds .open to show it */
  }

  .pc-mobile-section {
    padding: 6px 20px 2px;
    font-size: 10px;
    font-weight: 800;
    color: rgba(255,255,255,0.3);
    text-transform: uppercase;
    letter-spacing: 1.5px;
  }

  .pc-mobile-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    transition: background 0.12s;
  }

  .pc-mobile-menu a:hover,
  .pc-mobile-menu a:active {
    background: rgba(255,255,255,0.06);
    color: #fff;
  }

  .pc-mobile-menu a .icon {
    font-size: 17px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
  }

  /* Hamburger button injected by mobile.js */
  .pc-hamburger {
    display: flex !important; /* override the desktop display:none */
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
  }

  .pc-hamburger:hover { background: rgba(255,255,255,0.08); }

  .pc-hamburger span {
    display: block;
    height: 2px;
    background: rgba(255,255,255,0.7);
    border-radius: 2px;
    transition: all 0.2s;
  }

  .pc-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pc-hamburger.active span:nth-child(2) { opacity: 0; }
  .pc-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ── INDEX PAGE ──────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
    padding-top: 52px !important;
  }

  .hero-right { display: none !important; }

  .hero-left {
    padding: 36px 24px 40px !important;
    text-align: center;
  }

  .hero-buttons {
    justify-content: center;
  }

  .about-strip {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 48px 24px !important;
  }

  .about-stats {
    grid-template-columns: 1fr 1fr !important;
  }

  .section {
    padding: 48px 20px !important;
  }

  .cards {
    grid-template-columns: 1fr !important;
  }

  .footer-nav {
    gap: 14px !important;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .hero-title { font-size: 38px !important; }
  .hero-sub   { font-size: 15px !important; }
  .btn        { padding: 12px 20px !important; font-size: 14px !important; }
  .section-title { font-size: 30px !important; }
  .stat-num { font-size: 30px !important; }
}

/* ── CHAT-MODERN ─────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  /* chat-modern has a <header> not pc-nav */
  header {
    padding: 0 12px !important;
    height: 54px !important;
    gap: 8px !important;
  }

  .header-left { gap: 8px !important; }
  .back-btn    { font-size: 12px !important; }

  .toggle-pill { font-size: 11px !important; padding: 4px 9px !important; }
  .clear-btn   { font-size: 11px !important; padding: 4px 8px !important; }
  .retro-link  { display: none !important; } /* hide on mobile, save space */

  .messages-inner { padding: 0 12px !important; }

  .msg-content   { max-width: 88% !important; }
  .bubble        { font-size: 14px !important; padding: 10px 13px !important; }

  .input-area  { padding: 10px 12px 14px !important; }
  .input-hint  { display: none; } /* hide hint text on mobile */

  .welcome h2  { font-size: 22px !important; }
  .welcome p   { font-size: 13px !important; }
  .sugg        { font-size: 12px !important; padding: 7px 13px !important; }
}

/* ── CHAT-RETRO ──────────────────────────────────────────────────────────────*/
@media (max-width: 480px) {
  .site-nav { padding: 0 12px !important; }

  .device { padding: 10px !important; border-radius: 18px !important; }

  .device-title { font-size: 12px !important; }

  .messages { height: 260px !important; }

  .msg-bubble { font-size: 6px !important; padding: 6px 8px !important; }

  .chat-input { font-size: 6px !important; }

  .dpad-area { padding: 0 4px !important; }

  .modern-link { font-size: 4px !important; }
}

/* ── QUIZ PAGE ───────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .config-grid {
    grid-template-columns: 1fr !important;
  }

  .chip {
    padding: 8px 13px !important;
    font-size: 12px !important;
  }

  .start-title { font-size: 36px !important; }

  .question-card { padding: 20px 16px !important; }

  .options-grid {
    grid-template-columns: 1fr !important;
  }

  .option-btn {
    padding: 13px 16px !important;
    font-size: 13px !important;
    min-height: 48px !important;
  }

  .timer-bar-wrap { width: 100% !important; }

  .quiz-stats { gap: 12px !important; }

  .review-list { font-size: 13px !important; }
}

/* ── WHO'S THAT POKEMON ──────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .wtp-choices {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .choice-btn {
    font-size: 12px !important;
    padding: 10px 8px !important;
    min-height: 44px !important;
  }

  .silhouette-wrap {
    width: min(260px, 80vw) !important;
    height: min(260px, 80vw) !important;
  }

  .wtp-score-bar { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ── POKÉDEX ─────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .dex-layout {
    grid-template-columns: 1fr !important;
  }

  .dex-sidebar {
    position: static !important;
    height: auto !important;
    max-height: 60vh;
  }

  .dex-detail {
    min-height: auto !important;
  }

  .filter-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .filter-select, .search-input {
    font-size: 14px !important; /* prevent iOS zoom on focus */
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .dex-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important;
    gap: 8px !important;
  }

  .poke-card { padding: 8px !important; }
  .poke-sprite { width: 56px !important; height: 56px !important; }
  .poke-name { font-size: 10px !important; }
}

/* ── TEAM BUILDER ────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  .builder-layout {
    grid-template-columns: 1fr !important;
  }

  .team-panel {
    position: static !important;
  }
}

@media (max-width: 600px) {
  .team-slots {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .slot { min-height: 80px !important; }

  .coverage-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    font-size: 10px !important;
  }

  .boss-tabs { flex-wrap: wrap !important; }
  .boss-tab { font-size: 11px !important; padding: 6px 10px !important; }

  .analysis-panel { padding: 16px !important; }
}

/* ── TIPS PAGE ───────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .tips-layout {
    grid-template-columns: 1fr !important;
  }

  .tips-sidebar { display: none !important; } /* hidden on mobile — too cramped */

  .tips-tabs { flex-wrap: wrap !important; gap: 6px !important; }
  .tips-tab  { font-size: 12px !important; padding: 7px 14px !important; }

  .tip-cards { grid-template-columns: 1fr !important; }
}

/* ── NEWS PAGE ───────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .news-layout {
    grid-template-columns: 1fr !important;
  }

  .news-sidebar { display: none !important; }

  .news-tabs { flex-wrap: wrap !important; gap: 6px !important; }

  .news-card { padding: 16px !important; }
}

/* ── ABOUT PAGE ──────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .about-hero {
    grid-template-columns: 1fr !important;
    text-align: center;
  }

  .about-hero-img { display: none !important; }

  .expertise-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .timeline-item {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .expertise-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── MATCH GAME ──────────────────────────────────────────────────────────────*/
@media (max-width: 600px) {
  .stats-bar {
    flex-wrap: wrap;
  }

  .stat {
    flex: 1 1 50% !important;
    min-width: 0;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #2a3828) !important;
  }

  .stat:nth-child(odd) { border-right: 1px solid var(--border, #2a3828) !important; }
  .stat:nth-last-child(-n+2) { border-bottom: none !important; }

  .win-card { padding: 24px 20px !important; }
  .win-stats { grid-template-columns: 1fr 1fr !important; }
  .win-title { font-size: 28px !important; }

  .share-grid { gap: 4px !important; }
  .share-tile { font-size: clamp(12px, 3.5vw, 20px) !important; }

  .share-copy-row { gap: 5px !important; }
  .share-btn { padding: 8px 10px !important; font-size: 12px !important; }
}

@media (max-width: 360px) {
  .grid { grid-template-columns: repeat(4, 1fr) !important; gap: 5px !important; }
  .card-name { display: none; } /* hide name labels on very small screens */
}

/* ── FORMS & INPUTS — prevent iOS auto-zoom (needs font-size ≥ 16px) ─────────*/
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── TOUCH TARGETS — minimum 44×44px per Apple/Google guidelines ─────────────*/
@media (max-width: 768px) {
  button, [role="button"], a.btn, a.card, .choice-btn, .option-btn {
    min-height: 44px;
  }
}

/* ── UTILITY ─────────────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}