/* ═══════════════════════════════════════════════════════════════════════════
   PyStatR+ MOBILE CORE - Safety Rules Only
   
   This file contains ONLY:
   - Overflow prevention
   - Image safety
   - Typography wrapping
   - Table/code scrolling
   
   NO hero styles, NO page-specific styles, NO layout overrides.
   Each page owns its own hero and mobile behavior.
   
   USAGE: Load after styles.css, before page-specific CSS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   1. GLOBAL OVERFLOW PREVENTION
   ========================================================================== */

html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Sections that might extend beyond viewport */
[class*="section-"] {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ==========================================================================
   2. IMAGE SAFETY
   ========================================================================== */

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

/* ==========================================================================
   3. MOBILE SAFETY (max-width: 767px)
   ========================================================================== */

@media only screen and (max-width: 767px) {
  
  /* Prevent any element from causing horizontal scroll */
  * {
    max-width: 100vw;
  }
  
  /* Prevent fixed navbar from overlapping first hero */
  main.content > section.hero:first-child {
    margin-top: 0.75rem;
  }
  
  /* Container padding safety */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
  }
  
  /* Typography wrapping */
  h1, h2, h3, h4, h5, h6,
  p, li, span, a {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Table horizontal scrolling */
  table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Code block scrolling */
  pre {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  
  code {
    word-break: break-word;
  }
}

/* ==========================================================================
   4. QUARTO ARTICLE PAGE SPACING
   ========================================================================== */

@media only screen and (max-width: 767px) {
  
  /* Article content needs space below fixed navbar */
  .quarto-title-block,
  #title-block-header,
  article > section:first-child,
  article > h1:first-child,
  article > h2:first-child,
  main.content > section:first-child,
  #quarto-content > section:first-child {
    padding-top: 1rem !important;
    margin-top: 0.5rem !important;
  }
  
  article > *:first-child {
    margin-top: 1rem !important;
  }
}

/* ==========================================================================
   5. FOOTER MOBILE LAYOUT
   ========================================================================== */

@media only screen and (max-width: 767px) {
  
  /* Footer grid - single column layout */
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  
  /* Footer brand section - full width, centered */
  .footer-brand {
    display: block !important;
    text-align: center !important;
    max-width: 100% !important;
    margin-bottom: 1rem !important;
  }
  
  .footer-logo {
    justify-content: center !important;
  }
  
  .footer-tagline {
    text-align: center !important;
  }
  
  /* Show footer columns but arrange in 2-column grid */
  .footer-column {
    display: block !important;
    text-align: center !important;
  }
  
  /* Footer links container - 2 columns side by side */
  .footer-links-container,
  .footer-columns-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 2rem 1.5rem !important;
    text-align: center !important;
  }
  
  .footer-column h4,
  .footer-column-title {
    text-align: center !important;
    margin-bottom: 1rem !important;
  }
  
  .footer-column ul,
  .footer-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }
  
  .footer-column li,
  .footer-links li {
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }
  
  .footer-column a,
  .footer-links a {
    display: inline-block !important;
    text-align: center !important;
  }
  
  /* Connect section centered */
  .footer-connect,
  .footer-contact {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .footer-connect-item,
  .footer-contact-item {
    justify-content: center !important;
  }
  
  .footer-social {
    justify-content: center !important;
    display: flex !important;
    gap: 0.75rem !important;
  }
  
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 1rem !important;
  }
  
  .footer-legal {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 0.5rem 1rem !important;
  }
  
  .footer-copyright {
    text-align: center !important;
  }
}

@media only screen and (min-width: 768px) {
  
  .footer-column {
    display: block !important;
  }
  
  .footer-grid {
    display: grid !important;
  }
}

/* ==========================================================================
   6. DARK SECTION OVERFLOW SAFETY
   ========================================================================== */

.section-team-dark,
.section-ethics-dark,
.section-blog-dark,
.section-final-cta,
.section-final-cta-v2,
.footer {
  overflow-x: hidden !important;
}