/*
  P23-EDU — mobile.css
  Global mobile stylesheet injected into all pages.
  Breakpoints: 768px (tablet), 480px (phone)
  Strategy: stack layouts, fix overflow, reduce padding. No redesign.
*/

/* ─── INDEX PAGE NAV + HERO — CRITICAL MOBILE FIXES ─── */
@media (max-width: 860px) {
  .nav-name { display: none !important; }
  .hamburger { display: flex !important; }
}

@media (max-width: 768px) {
  /* Hamburger — force visible, dark and clear */
  .hamburger {
    display: flex !important;
    background: none !important;
    border: 1px solid rgba(12,12,12,0.4) !important;
    color: #1A1A1A !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
    cursor: pointer;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
  }

  /* Hero — hard pixel top padding so title never overlaps fixed nav */
  #nav ~ * .hero,
  .hero {
    padding-top: 88px !important;
  }

  /* Nav right — hide Free Always */
  .nav-right { display: none !important; }
  .nav-name { display: none !important; }
}


/* ══════════════════════════════════════════════════
   ALL PAGE HEADERS — MOBILE SQUEEZE FIX
   Covers all 7 header patterns across 82 pages
   On mobile: keep badge + back link + downloads only.
   Hide brand text and page title — they break layout.
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Reduce header padding — was 32px each side, too wide */
  .hdr {
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  /* Hide brand text variants (all patterns) */
  .hdr-brand,
  .hdr-name,
  .hdr-div,
  span.hdr-div,
  .hdiv,
  span.hdiv,
  span.hb,
  .hdr-right,
  .hdr-meta,
  .hdr-center {
    display: none !important;
  }

  /* Hide page title from header (H1 on page still shows it) */
  .hdr-title,
  .hdr-sub,
  span.hdr-sub,
  .hsub,
  span.hsub,
  span.hs {
    display: none !important;
  }

  /* Hide version numbers */
  .hdr-ver,
  span.hdr-ver,
  .ver,
  span.ver {
    display: none !important;
  }

  /* Actions — push right, ensure visible */
  .hdr-actions,
  div.ha {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
  }

  /* Back link — bigger tap target */
  .p23-back {
    min-height: 36px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9px !important;
  }

  /* Download buttons — bigger tap targets */
  .hdr-btn,
  .p23g-btn {
    min-height: 36px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
  }

  /* P23 badge — keep but slightly smaller */
  .p23-badge,
  span.p23,
  div.p23-badge {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
}

/* Very small phones — further simplify */
@media (max-width: 380px) {
  .hdr-btn svg,
  .p23-back svg {
    display: none !important;
  }
}


/* ══════════════════════════════════════════════════
   DARK MODE TOGGLES — ALL PAGE VARIANTS
   Make visible on light backgrounds on mobile
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* v2-toggle (guide pages) — was faint gold, now readable */
  .v2-toggle {
    border-color: rgba(12,12,12,0.3) !important;
    color: rgba(12,12,12,0.75) !important;
  }

  /* theme-toggle (index page) — already fixed in index.html */
  /* art-toggle (articles) — handled in articles/index.html */

  /* Generic dark toggle buttons on calculator pages */
  button[onclick*="toggleTheme"],
  button[onclick*="toggle_theme"] {
    border-color: rgba(12,12,12,0.3) !important;
    color: rgba(12,12,12,0.75) !important;
  }

  [data-theme="dark"] .v2-toggle {
    border-color: rgba(255,255,255,.25) !important;
    color: #ccc !important;
  }
}

/* ─── GLOBAL OVERFLOW PREVENTION ─── */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  * {
    max-width: 100%;
    box-sizing: border-box;
  }

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


/* ══════════════════════════════════════════════════
   CALCULATOR PAGES
   Fix: .wrap grid collapses, .right panel stacks
   Covers all 48 calculator/tool pages
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Stack the two-column layout */
  .wrap {
    display: block !important;
    grid-template-columns: unset !important;
    min-height: unset !important;
  }

  /* Left input panel */
  .left {
    padding: 24px 16px 32px !important;
    width: 100% !important;
  }

  /* Right results panel — unstick, full width, visible */
  .right {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 2px solid var(--rule, #DEDAD2) !important;
    padding: 24px 16px 40px !important;
    overflow-y: visible !important;
  }

  /* Calculator header bar */
  .hdr {
    padding: 0 16px !important;
    height: auto !important;
    min-height: 52px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .hdr-actions {
    gap: 6px !important;
    margin-left: 0 !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .hdr-btn {
    font-size: 9px !important;
    padding: 0 10px !important;
    height: 26px !important;
    flex: 1 !important;
  }

  .hdr-sub {
    display: none !important;
  }

  /* Input sections */
  .section, .calc-section, .input-section {
    padding: 16px 0 !important;
  }

  .section-title, .sec-title, .calc-title {
    font-size: 11px !important;
  }

  /* Input groups — stack labels and inputs */
  .input-row, .field-row, .inp-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Result blocks */
  .result-grid, .res-grid, .kpi-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .result-big, .hero-val, .big-number {
    font-size: 32px !important;
  }

  /* Two-column grids inside calculators → single column */
  .g2, .grid-2, .two-col {
    grid-template-columns: 1fr !important;
  }

  /* Three-column grids → two on tablet */
  .g3, .grid-3, .three-col {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Input labels */
  .inp-label, .field-label, label {
    font-size: 10px !important;
  }

  /* Right panel result items */
  .rp-item, .res-item, .result-item {
    padding: 10px 0 !important;
  }

  /* Hero/total block in right panel */
  .hero-block, .total-block {
    padding: 16px !important;
    margin-bottom: 16px !important;
  }

  /* Scenario/comparison grids */
  .scenario-grid, .compare-grid {
    grid-template-columns: 1fr !important;
  }

  /* Tab navigation inside calculators */
  .tab-nav, .tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding-bottom: 4px !important;
  }
}

@media (max-width: 480px) {
  .left {
    padding: 20px 14px 24px !important;
  }

  .right {
    padding: 20px 14px 32px !important;
  }

  /* Result grid single column on phones */
  .result-grid, .res-grid, .kpi-row {
    grid-template-columns: 1fr !important;
  }

  .g3, .grid-3, .three-col {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════
   GUIDE / CONTENT PAGES
   Fix: padding, tables, nav, section grids
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Main content container */
  .page, .content-wrap, .content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Section padding */
  .section {
    padding: 32px 0 !important;
  }

  /* Section header — stack number + title */
  .sec-header {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Card grids */
  .cc-row, .card-grid, .cards {
    grid-template-columns: 1fr !important;
  }

  /* KPI / stat rows */
  .kpi-row, .stat-row, .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* Big stat blocks */
  .big-stat {
    grid-template-columns: 1fr !important;
    padding: 24px 20px !important;
  }

  .big-stat-num {
    font-size: 64px !important;
  }

  /* Guide in-page nav (anchor links) — scrollable */
  nav:not(#nav) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  /* Prose max-width */
  .prose {
    max-width: 100% !important;
  }

  /* Pull quotes */
  .pull-quote {
    max-width: 100% !important;
  }

  /* Hero on guides */
  .hero {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .hero h1, .hero-h1, .hero-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
  }

  /* Two-column grids → single column */
  .g2, .grid-2, [class*="two-col"] {
    grid-template-columns: 1fr !important;
  }

  .g3, .grid-3, [class*="three-col"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .kpi-row, .stat-row, .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .g3, .grid-3, [class*="three-col"] {
    grid-template-columns: 1fr !important;
  }

  .hero {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }
}


/* ══════════════════════════════════════════════════
   TABLES — universal fix
   All pages with data tables need horizontal scroll
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Wrap every table in a scroll container */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* But allow cells to be readable */
  td, th {
    min-width: 80px !important;
    white-space: normal !important;
  }

  /* Data tables */
  .data-table, .tbl-wrap table, .table-wrap table {
    min-width: 520px !important;
  }

  .tbl-wrap, .table-wrap, .table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════
   TEMPLATE PAGES
   Fix: document layout, clause grid, series nav
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Document body */
  .doc-body, .document, .template-body {
    padding: 20px 16px !important;
  }

  /* Clause / section grid */
  .clause-grid, .section-grid {
    grid-template-columns: 1fr !important;
  }

  /* Template series nav (top progress tracker) */
  nav .series-label, nav .series-item {
    font-size: 9px !important;
  }

  /* Template fill-in fields */
  .field, .fill-field {
    min-width: 60px !important;
    max-width: 100% !important;
  }
}


/* ══════════════════════════════════════════════════
   INDEX PAGE
   Fix: hero grid, card grid, controls bar
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero eyebrow repeats nav text — redundant and looks like a doubled header */
  .hero-eyebrow {
    display: none !important;
  }

  /* Index card grid */
  .idx-grid {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
  }

  /* Controls filter bar — scroll horizontally */
  .controls {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 10px !important;
    padding: 10px 16px !important;
  }

  .filter-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Map notice */
  .map-mobile-notice {
    display: block !important;
  }
}


/* ══════════════════════════════════════════════════
   EMAIL GATE MODAL
   Fix: modal too wide on phones
   ══════════════════════════════════════════════════ */

@media (max-width: 480px) {

  .p23g-modal {
    padding: 28px 20px !important;
    margin: 16px !important;
    max-width: calc(100vw - 32px) !important;
    width: 100% !important;
    border-radius: 0 !important;
  }

  .p23g-title {
    font-size: 22px !important;
  }

  .p23g-form input {
    height: 44px !important;
    font-size: 14px !important;
  }

  .p23g-submit {
    height: 48px !important;
    font-size: 12px !important;
  }
}


/* ══════════════════════════════════════════════════
   GLOBAL NAV
   Already handled per page but catch any gaps
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  #nav {
    padding: 0 16px !important;
  }
}


/* ══════════════════════════════════════════════════
   DIRECTORIES & GLOSSARY
   Fix: sidebar + content layout
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Glossary sidebar → collapse */
  .glossary-layout, .dir-layout {
    grid-template-columns: 1fr !important;
    display: block !important;
  }

  .sidebar, .glossary-sidebar {
    position: static !important;
    height: auto !important;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--rule, #DEDAD2) !important;
    overflow-x: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding: 12px 16px !important;
    gap: 8px !important;
  }

  .sidebar-link, .glossary-link {
    display: inline-block !important;
    white-space: nowrap !important;
    padding: 4px 10px !important;
    border: 1px solid var(--rule, #DEDAD2) !important;
  }
}


/* ══════════════════════════════════════════════════
   ARTICLES HUB + ARTICLE PAGES
   Fix: article card layout, hero padding
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .article-card-body {
    grid-template-columns: 1fr !important;
    padding: 24px 16px !important;
  }

  .article-read {
    display: none !important;
  }

  .list-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* ══════════════════════════════════════════════════
   BENCHMARK / TRADE SHOW PAGES
   Fix: wide stat grids and comparison tables
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  .benchmark-grid, .perf-grid, .comp-grid {
    grid-template-columns: 1fr !important;
  }

  .tier-grid, .show-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ══════════════════════════════════════════════════
   TOUCH TARGETS
   Minimum 44px tap targets on interactive elements
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  button, input[type="submit"], input[type="button"],
  .btn, .p23g-submit, .hdr-btn {
    min-height: 44px !important;
  }

  input[type="number"], input[type="text"], input[type="email"],
  select, textarea {
    min-height: 44px !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  /* Range inputs — bigger touch area */
  input[type="range"] {
    height: 36px !important;
  }
}