/**
 * static/css/base.css
 * PatronHubDevs — Global Base Overrides
 *
 * HARDENING CHANGELOG v18
 * ─────────────────────────────────────────────────────────────────────────
 * FIX 1 — iOS INPUT ZOOM PREVENTION
 *   iOS Safari auto-zooms the viewport when a focused <input> or <select>
 *   has font-size < 16px. Bootstrap's form inputs default to ~14px → zoom.
 *   Fix: force all form inputs to minimum 16px on iOS.
 *   This is a well-known Safari bug (present since iOS 8, still present in iOS 17).
 *   Note: we do NOT set `user-scalable=no` on the viewport (accessibility violation).
 *
 * FIX 2 — iOS SAFE-AREA INSETS
 *   Devices with notches (iPhone X+, iPad with Face ID) use env() safe-area
 *   insets. The `viewport-fit=cover` on the viewport meta tag expands the
 *   viewport under the notch. We then add padding to prevent content from
 *   being hidden under the notch.
 *
 * FIX 3 — OVERFLOW-X CONTAINMENT
 *   Some animations and absolute-positioned elements cause horizontal scroll
 *   on mobile. overflow-x: hidden on html AND body (both needed — one alone
 *   is insufficient in iOS Safari < 15).
 *
 * FIX 4 — TOUCH ACTION
 *   Adding touch-action: manipulation to buttons and links prevents the
 *   300ms click delay on iOS Safari < 13 and older Android Chrome.
 *   (Modern browsers have removed this delay for fast-tap elements, but
 *   older Samsung Internet and Chrome <55 still have it.)
 *
 * FIX 5 — -webkit-tap-highlight-color
 *   Android Chrome and Samsung Internet show a tap highlight flash on
 *   interactive elements. This is usually desired, but the bright default
 *   color clashes with dark themes. Set to a transparent value.
 *
 * FIX 6 — REDUCED MOTION (accessibility)
 *   Consolidated from style.css to one definitive block here since base.css
 *   loads last and has highest specificity among our custom CSS files.
 * ─────────────────────────────────────────────────────────────────────────
 */

/* ─────────────────────────────────────────────────────────────────────────
   1. OVERFLOW CONTAINMENT — prevents horizontal scroll on mobile
   ───────────────────────────────────────────────────────────────────────── 
   IMPORTANT: overflow-x:hidden must ONLY be on body, NOT on html.
   Setting overflow-x:hidden on <html> promotes it to the scroll container,
   replacing the browser viewport. This breaks native mousewheel scroll
   (wheel events stop firing) while keyboard and touch still work — a
   confusing partial failure. The correct fix is body-only, which contains
   horizontal overflow without hijacking the scroll root.
   Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=175583
   ───────────────────────────────────────────────────────────────────────── */
html {
  /* Safe-area insets only — no overflow rule here */
  padding-left:  env(safe-area-inset-left,  0px);
  padding-right: env(safe-area-inset-right, 0px);
}

body {
  /* overflow-x:hidden on body alone is safe and correct */
  overflow-x: hidden;
  /* Prevent "bouncy" scroll revealing background on overscroll in Safari */
  overscroll-behavior-y: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   2. SELECTION PROTECTION
   Kept from original but moved here for clarity. Applies everywhere.
   ───────────────────────────────────────────────────────────────────────── */
* {
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  user-select:         none;
  -webkit-touch-callout: none;
}

/* Allow selection in form inputs and textareas (was broken by the rule above) */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select:    text;
  -ms-user-select:     text;
  user-select:         text;
}


/* ─────────────────────────────────────────────────────────────────────────
   3. IMAGE PROTECTION
   ───────────────────────────────────────────────────────────────────────── */
img {
  pointer-events:      none;
  -webkit-user-drag:   none;
  -khtml-user-drag:    none;
  -moz-user-drag:      none;
  -o-user-drag:        none;
  user-drag:           none;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. TAP HIGHLIGHT (Android Chrome, Samsung Internet)
   Transparent: avoids blue/grey flash on tap in dark themes.
   ───────────────────────────────────────────────────────────────────────── */
a,
button,
[role="button"],
.nav-link,
.btn {
  -webkit-tap-highlight-color: rgba(57, 255, 20, 0.15); /* Subtle neon flash instead */
  touch-action: manipulation; /* Eliminates 300ms click delay */
}


/* ─────────────────────────────────────────────────────────────────────────
   5. iOS INPUT ZOOM PREVENTION
   iOS Safari zooms the viewport when focused inputs have font-size < 16px.
   Minimum 16px on form elements prevents this without disabling zoom globally.
   ───────────────────────────────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) {
  /* This @supports block targets iOS Safari specifically */
  input,
  textarea,
  select {
    font-size: max(16px, 1rem) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   6. SAFE-AREA INSET — navbar and footer
   The fixed navbar must clear the iOS notch at the top.
   The footer must clear the home-indicator bar at the bottom.
   ───────────────────────────────────────────────────────────────────────── */
#mainNav {
  padding-top: env(safe-area-inset-top, 0px);
}

.footer {
  padding-bottom: calc(var(--space-xl, 2rem) + env(safe-area-inset-bottom, 0px));
}


/* ─────────────────────────────────────────────────────────────────────────
   7. BODY TOP PADDING (fixed navbar compensation)
   Bootstrap's fixed-top navbar overlaps page content. This ensures the
   first full-width section isn't hidden behind the navbar.
   Previously scattered across multiple files. Centralised here.
   ───────────────────────────────────────────────────────────────────────── */
main {
  padding-top: 56px; /* Bootstrap's default navbar height at desktop */
}

@media (max-width: 991.98px) {
  main {
    /* On mobile, navbar can be taller if it wraps or has extra padding */
    padding-top: 60px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   8. FOCUS STATES (keyboard navigation / accessibility)
   DO NOT remove :focus-visible outlines — they are required for WCAG 2.1 AA.
   We customise the color to match the neon theme instead of removing them.
   ───────────────────────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid #39ff14;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Remove focus ring for mouse/touch users only */
:focus:not(:focus-visible) {
  outline: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   9. FOOTER HEART (was an inline style= in base.html, moved to CSS)
   ───────────────────────────────────────────────────────────────────────── */
.footer-heart {
  color: var(--accent, #39ff14);
}


/* ─────────────────────────────────────────────────────────────────────────
   10. MOBILE NAVBAR COLLAPSE
   Bootstrap 5 controls .navbar-collapse visibility via:
     .collapse        → display: none   (hidden state)
     .collapse.show   → display: block  (visible state)
     .collapsing      → display: block + height transition (animating)
   We do NOT override display or max-height here — doing so fights Bootstrap
   and causes the menu to render open when Bootstrap CSS or JS fails to load.
   The only safe additions are cosmetic (padding, background) on .show state.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  /* Style the open menu panel — safe because Bootstrap already sets display */
  .navbar-collapse.show {
    padding-bottom: env(safe-area-inset-bottom, 8px);
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   11. COPY TOAST NOTIFICATION (replaces alert() in copyToClipboard)
   Add <div id="copy-toast" aria-live="polite"></div> to templates that
   use copyToClipboard(), or the function falls back to console.log.
   ───────────────────────────────────────────────────────────────────────── */
#copy-toast {
  position: fixed;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(57, 255, 20, 0.15);
  border: 1px solid rgba(57, 255, 20, 0.4);
  color: #e8edf2;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-family: var(--font-mono, monospace);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 99999;
  white-space: nowrap;
}

#copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ─────────────────────────────────────────────────────────────────────────
   12. SKIP-TO-MAIN LINK (accessibility — keyboard users)
   Visually hidden until focused. Required for WCAG 2.1 AA (2.4.1).
   Add <a href="#main-content" class="skip-link">Skip to main content</a>
   as the very first element inside <body>.
   ───────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 100000;
  padding: 0.5rem 1rem;
  background: #39ff14;
  color: #000;
  font-weight: 700;
  border-radius: 4px;
  text-decoration: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   13. REDUCED MOTION (definitive override — base.css loads last)
   Covers both animation and transition for all elements including
   Bootstrap's built-in transitions.
   ───────────────────────────────────────────────────────────────────────── */
@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;
  }

  /* Specifically stop the Bootstrap collapse animation */
  .collapsing {
    transition: none !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   14. RESPONSIVE TYPOGRAPHY — prevents text overflow on narrow screens
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* Bootstrap display classes at xs: cap to prevent overflow */
  .display-1 { font-size: clamp(2rem, 10vw, 3rem);  }
  .display-2 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .display-3 { font-size: clamp(1.6rem, 8vw, 2rem);  }
  .display-4 { font-size: clamp(1.4rem, 7vw, 1.75rem); }
  .display-5 { font-size: clamp(1.2rem, 6vw, 1.5rem); }

  /* Prevent long words/URLs from causing horizontal overflow */
  p,
  li,
  .text-break-mobile {
    overflow-wrap: break-word;
    word-break:    break-word;
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   15. DARK MODE COMPATIBILITY (prefers-color-scheme)
   The site already uses data-bs-theme="dark" on <html>. This block ensures
   any OS-level light-mode overrides don't conflict with our dark design.
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  /* Force dark scheme even if user OS is set to light.
     This prevents a partially-light flash on first paint in some browsers. */
  :root {
    color-scheme: dark;
  }
}