/**
 * mobile-universal.css
 * Consciousness Revolution — Universal Mobile-First Responsive Stylesheet
 *
 * • Injected automatically by /js/mobile-responsive.js on every page.
 * • Mobile-first: base styles target phones, media queries scale up.
 * • Covers viewport, typography, layout, navigation, images, forms,
 *   tables, touch targets, and device-specific quirks.
 * • Uses !important only where override of legacy fixed/absolute rules
 *   is required for correctness on mobile.
 * • Add class .no-mobile-fix to any element to opt out of overrides.
 */

/* ══════════════════════════════════════════
   0. CSS CUSTOM PROPERTIES (Device-aware)
   ══════════════════════════════════════════ */
:root {
  /* Breakpoints (reference only — used in JS too) */
  --cr-bp-xs:  320px;
  --cr-bp-sm:  480px;
  --cr-bp-md:  768px;
  --cr-bp-lg: 1024px;
  --cr-bp-xl: 1280px;

  /* Fluid spacing */
  --cr-space-xs:  0.25rem;
  --cr-space-sm:  0.5rem;
  --cr-space-md:  1rem;
  --cr-space-lg:  1.5rem;
  --cr-space-xl:  2rem;

  /* Touch target minimum */
  --cr-touch-min: 44px;

  /* Safe area insets (notch / dynamic island) */
  --cr-safe-top:    env(safe-area-inset-top,    0px);
  --cr-safe-right:  env(safe-area-inset-right,  0px);
  --cr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cr-safe-left:   env(safe-area-inset-left,   0px);
}

/* ══════════════════════════════════════════
   1. GLOBAL BOX MODEL & SCROLL
   ══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /* Smooth scrolling */
  scroll-behavior: smooth;
  /* Prevent font size inflation on orientation change (iOS) */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Prevent horizontal overflow */
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  /* Momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Word wrap */
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ══════════════════════════════════════════
   2. FLUID TYPOGRAPHY (Mobile → Desktop)
   ══════════════════════════════════════════ */
body {
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  line-height: 1.6;
}

h1 { font-size: clamp(1.5rem,  5vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 4vw, 2rem);   }
h3 { font-size: clamp(1.1rem,  3vw, 1.5rem); }
h4 { font-size: clamp(1rem,    2.5vw, 1.25rem); }
h5, h6 { font-size: clamp(0.9rem, 2vw, 1rem); }

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

p, li, td, th, label, span, a {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ══════════════════════════════════════════
   3. CONTAINER / LAYOUT
   ══════════════════════════════════════════ */
.container,
.wrapper,
.content,
.page-wrapper,
.inner,
.site-wrapper,
.main-content,
[class*="container"],
[class*="wrapper"] {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--cr-space-md);
  padding-right: var(--cr-space-md);
  box-sizing: border-box;
}

/* Standard max-width containers at larger screens */
@media (min-width: 768px) {
  .container,
  .page-wrapper {
    padding-left: var(--cr-space-xl);
    padding-right: var(--cr-space-xl);
  }
}

@media (min-width: 1280px) {
  .container,
  .page-wrapper {
    max-width: 1400px;
  }
}

/* ══════════════════════════════════════════
   4. MOBILE LAYOUT FIXES (≤ 768 px)
   ══════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Prevent any element from causing horizontal scroll */
  * {
    max-width: 100%;
  }

  /* Preserve horizontal scrolling for code / tables */
  pre,
  code,
  table,
  .horizontal-scroll,
  .code-block,
  .scroll-x {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* ─── Header & Navigation ─── */
  header {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    box-sizing: border-box !important;
    padding-top: var(--cr-safe-top) !important;
  }

  nav,
  .nav,
  .navbar,
  .navigation,
  .site-nav,
  .top-nav {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box !important;
  }

  nav ul,
  .nav ul,
  .navbar ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0.25rem !important;
    list-style: none !important;
  }

  nav ul li,
  .nav ul li {
    width: 100% !important;
    margin: 0 !important;
  }

  nav ul li a,
  .nav ul li a {
    display: block !important;
    width: 100% !important;
    min-height: var(--cr-touch-min) !important;
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* ─── Main / Sidebar layout → single column ─── */
  main,
  .main,
  #main,
  #main-content,
  .main-content,
  [role="main"] {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    float: none !important;
  }

  aside,
  .sidebar,
  .side-panel,
  .left-panel,
  .right-panel {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    right: auto !important;
    float: none !important;
    margin: 0.5rem 0 !important;
  }

  /* ─── Footer ─── */
  footer,
  .footer,
  .site-footer {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    padding: 1rem !important;
    padding-bottom: calc(1rem + var(--cr-safe-bottom)) !important;
    box-sizing: border-box !important;
    margin-top: 1rem !important;
  }

  /* ─── Sections / Articles ─── */
  section,
  article,
  .section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* ─── Grid overrides ─── */
  .grid,
  [class*="grid-"]:not(.no-mobile-fix) {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ─── Flex overrides ─── */
  .flex-row:not(.no-mobile-fix),
  .row:not(.no-mobile-fix),
  [class*="flex-"]:not(.no-mobile-fix) {
    flex-wrap: wrap !important;
  }

  /* Common two-column / three-column Bootstrap-like classes */
  [class*="col-"]:not(.no-mobile-fix) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ─── Images & Media ─── */
  img,
  video,
  svg,
  canvas,
  iframe,
  embed,
  object {
    max-width: 100% !important;
    height: auto !important;
  }

  iframe {
    width: 100% !important;
  }

  /* ─── Buttons & Touch Targets ─── */
  button,
  [type="button"],
  [type="submit"],
  [type="reset"],
  a.btn,
  .btn,
  .button,
  .cta-button,
  .action-btn {
    min-height: var(--cr-touch-min) !important;
    min-width: var(--cr-touch-min) !important;
    padding: 0.6rem 1rem !important;
    cursor: pointer;
    touch-action: manipulation;
  }

  /* ─── Forms ─── */
  input,
  select,
  textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 1rem !important; /* Prevent iOS zoom on focus */
  }

  form,
  fieldset,
  .form,
  .form-group,
  .form-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  label {
    display: block;
    margin-bottom: 0.25rem;
  }

  /* ─── Tables ─── */
  table:not(.no-mobile-fix) {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ─── Cards ─── */
  .card,
  .panel,
  .tile,
  .box,
  [class*="card"],
  [class*="panel"] {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ─── Modals / Overlays ─── */
  .modal,
  .modal-content,
  .dialog,
  .popup,
  [class*="modal"],
  [class*="dialog"],
  [class*="overlay"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* ─── Fixed/absolute elements that break mobile ─── */
  [style*="position: fixed"],
  [style*="position:fixed"] {
    /* Allow JS to handle these — avoid blanket override that breaks toasts/modals */
  }
}

/* ══════════════════════════════════════════
   5. EXTRA-SMALL PHONES (≤ 480 px)
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
  body {
    font-size: 0.9rem;
  }

  nav ul li a,
  .nav ul li a {
    padding: 0.65rem 0.75rem !important;
    font-size: 0.875rem !important;
  }

  footer,
  .footer {
    font-size: 0.8rem !important;
    padding: 0.75rem !important;
    padding-bottom: calc(0.75rem + var(--cr-safe-bottom)) !important;
  }

  .container,
  .wrapper,
  main,
  section,
  article {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  h1 { font-size: clamp(1.25rem, 7vw, 1.75rem) !important; }
  h2 { font-size: clamp(1.1rem,  6vw, 1.4rem)  !important; }
  h3 { font-size: clamp(1rem,    5vw, 1.2rem)  !important; }
}

/* ══════════════════════════════════════════
   6. LANDSCAPE PHONE (height ≤ 500 px)
   ══════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  nav ul,
  .nav ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }

  nav ul li,
  .nav ul li {
    width: auto !important;
  }

  nav ul li a,
  .nav ul li a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  header,
  nav,
  footer {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
}

/* ══════════════════════════════════════════
   7. TABLET (769 px – 1023 px)
   ══════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1023px) {
  .grid-3:not(.no-mobile-fix),
  .grid-4:not(.no-mobile-fix) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  [class*="col-md-"]:not(.no-mobile-fix) {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

/* ══════════════════════════════════════════
   8. HIGH-DPI / RETINA
   ══════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Prefer sharper borders over hairlines on retina */
  :root {
    --cr-border-width: 0.5px;
  }
}

/* ══════════════════════════════════════════
   9. TOUCH-SPECIFIC IMPROVEMENTS
   ══════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* Enlarge all interactive elements for finger navigation */
  button,
  [type="button"],
  [type="submit"],
  a,
  select,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: var(--cr-touch-min);
    min-width: var(--cr-touch-min);
  }

  /* Remove hover-only effects that don't work on touch */
  *:hover {
    transition: none;
  }
}

/* ══════════════════════════════════════════
   10. HAMBURGER MENU (auto-injected by JS)
   ══════════════════════════════════════════ */
.cr-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  gap: 5px;
  z-index: 9999;
}

.cr-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

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

@media (max-width: 768px) {
  .cr-hamburger {
    display: flex;
  }

  .cr-nav-menu.cr-nav-collapsed {
    display: none !important;
  }

  .cr-nav-menu.cr-nav-open {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════
   11. PRINT
   ══════════════════════════════════════════ */
@media print {
  nav,
  .nav,
  .navbar,
  footer,
  .footer,
  .sidebar,
  aside,
  .cr-hamburger {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  main,
  .main-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }
}

/* ══════════════════════════════════════════
   12. REDUCED MOTION
   ══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}