/* ==========================================================================
   Forge & Foundation — mobile.css
   Mobile-first overrides. Loaded after style.css on every page.
   Additive only — never removes or alters desktop rules.
   ========================================================================== */

/* -------------------------------------------------- Global safety rails */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:hidden;
}
img,video,canvas,svg,iframe{
  max-width:100%;
  height:auto;
}
pre,code,kbd,samp{
  word-break:break-word;
  overflow-wrap:anywhere;
}
a,button,input,select,textarea{
  -webkit-tap-highlight-color:rgba(168,85,28,.18);
}
button,input,select,textarea{
  font-size:16px; /* prevents iOS zoom-on-focus */
}

/* ================================================================ ≤900px */
@media (max-width:900px){

  :root{
    --maxw:100%;
    --header-h:60px;
  }

  body{ font-size:16.5px; line-height:1.66; }

  /* ---- Header ---- */
  .site-header{ position:sticky; }
  .header-inner{
    padding:.5rem .8rem;
    gap:.5rem;
    min-height:var(--header-h);
  }
  .brand-logo{ width:34px; height:34px; }
  .brand-title{ font-size:.92rem; letter-spacing:.08em; }
  .brand-sub{ display:none; }

  /* Larger, easier-to-tap hamburger */
  .nav-toggle{
    display:block;
    padding:.55rem .75rem;
    font-size:1.45rem;
    line-height:1;
  }

  /* Mobile nav panel — full-width, larger hit targets */
  .site-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:linear-gradient(180deg,#2c2723 0%,#1f1a16 100%);
    border-bottom:3px solid var(--accent);
    padding:.4rem .55rem .8rem;
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    box-shadow:0 12px 28px rgba(0,0,0,.45);
  }
  .site-nav.open{ display:flex; }
  .site-nav a{
    padding:.95rem 1rem;
    border-radius:3px;
    font-size:.82rem;
    letter-spacing:.14em;
    min-height:44px; /* Apple's minimum tap target */
    display:flex;
    align-items:center;
  }
  .site-nav a.kjv-link{ margin-left:0; }

  /* ---- Hero ---- */
  .hero-inner{ padding:2.4rem 1rem 2.2rem; }
  .hero-title{ font-size:clamp(1.75rem, 6.5vw, 2.4rem); }
  .hero-lead{ font-size:1rem; padding:0 .25rem; }
  .hero-cta{
    flex-direction:column;
    gap:.55rem;
    margin-top:1.2rem;
  }
  .hero-cta .btn{
    width:100%;
    padding:.95rem 1.2rem;
    min-height:48px;
    text-align:center;
    justify-content:center;
  }

  /* ---- Scripture + callouts ---- */
  .scripture{ padding:0 .9rem; margin:1.6rem auto; }
  .scripture blockquote{ padding:1.05rem 1.15rem 1.05rem 1rem; font-size:1rem; }
  .scripture blockquote::before{ font-size:2.4rem; left:.4rem; }
  .scripture blockquote p{ margin-left:.55rem; }
  .scripture cite{ margin-left:.55rem; font-size:.66rem; }

  .scripture-inline{
    padding:.95rem 1.05rem;
    margin:1.3rem 0;
    font-size:1rem;
  }
  .wisdom-quote{
    padding:1.05rem 1.15rem 1.05rem 1rem;
    font-size:1rem;
    margin:1.4rem 0;
  }
  .wisdom-quote::before{ font-size:2.4rem; left:.4rem; }
  .wisdom-quote p{ margin-left:.65rem; }
  .wisdom-quote cite{ margin-left:.65rem; font-size:.66rem; }

  .truth-callout{
    padding:1.35rem 1.15rem 1.35rem;
    margin:1.5rem 0;
  }
  .truth-callout h3{ font-size:.7rem; letter-spacing:.22em; }
  .truth-callout p{ font-size:1rem; line-height:1.68; }

  /* ---- Sections + prose ---- */
  .section{ padding:0 .9rem; margin:1.9rem auto; }
  .section h2{ font-size:1.3rem; }
  .section h3{ font-size:1.08rem; }
  .prose{ max-width:100%; }
  .prose p{ font-size:1rem; line-height:1.72; }
  .prose ul{ padding-left:1.1rem; }
  .prose li{ font-size:.98rem; }

  /* ---- TOC panel ---- */
  .section-toc{ padding:1.1rem 1rem 1.2rem; }
  .section-toc h2{ font-size:1rem; }
  .section-toc .listing{
    grid-template-columns:1fr;
    gap:.4rem;
  }
  .section-toc .listing a{
    padding:.85rem .95rem;
    min-height:44px;
    display:flex;
    align-items:center;
    font-size:.95rem;
  }

  /* ---- Cards + grid ---- */
  .grid{
    grid-template-columns:1fr;
    gap:.9rem;
  }
  .card{ padding:1.05rem 1.1rem 1.15rem; }
  .card h3{ font-size:1.05rem; }

  /* ---- Listings ---- */
  .listing{
    grid-template-columns:1fr;
    gap:.35rem;
  }
  .listing a{
    padding:.75rem .3rem .75rem .85rem;
    min-height:44px;
    display:flex;
    align-items:center;
    font-size:.96rem;
  }
  .listing a:hover{ padding-left:.9rem; }

  /* ---- Resource cards (workshop) ---- */
  .resource-grid{
    grid-template-columns:1fr;
    gap:.9rem;
  }
  .resource-card{ padding:1.05rem 1.1rem 1.15rem; }
  .resource-card h3{ font-size:1rem; }
  .resource-phone{ font-size:.86rem; padding:.35rem .7rem; }

  /* ---- Stats + charts ---- */
  .stats-grid{ grid-template-columns:1fr 1fr; gap:.7rem; }
  .stat-value{ font-size:1.35rem; }
  .stat-label{ font-size:.72rem; }
  .chart-wrap{ padding:1.05rem 1rem 1rem; }
  .chart-wrap h3{ font-size:.94rem; }
  .chart-wrap svg{ min-width:0; }

  /* ---- Tables ---- */
  .table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    margin:1.2rem -.9rem;
    padding:0 .9rem;
  }
  .compare-table{
    font-size:.84rem;
    min-width:520px;
    white-space:nowrap;
  }
  .compare-table th,
  .compare-table td{ padding:.55rem .65rem; }
  .compare-table tbody th{
    position:sticky;
    left:0;
    background:#f3ead7;
    z-index:2;
  }

  /* ---- Timeline ---- */
  .timeline ul{
    padding-left:1.1rem;
  }
  .timeline li{
    font-size:.96rem;
    line-height:1.6;
    margin:.5rem 0;
  }
  .timeline h3{ font-size:1.05rem; margin:1.4rem 0 .35rem; }

  /* ---- Profile header (apostle/father pages) ---- */
  .profile-header{
    display:block;
    text-align:center;
  }
  .profile-figure{
    margin:0 auto 1rem;
    max-width:220px;
  }
  .profile-intro p{ text-align:left; }

  /* ---- Maps ---- */
  .map-figure{
    margin:1.2rem 0;
  }
  .map-figure img{
    border-radius:3px;
  }
  .map-figure figcaption{
    font-size:.86rem;
    padding:.5rem 0 0;
  }

  /* ---- Church locator ---- */
  .church-locator{
    padding:1.15rem 1rem 1.3rem;
  }
  .church-locator-row{
    flex-direction:column;
    gap:.55rem;
  }
  .church-locator-row .btn{
    width:100%;
    min-height:48px;
    justify-content:center;
  }
  .church-locator-input{
    width:100%;
    font-size:1.15rem;
    padding:.95rem 1rem;
    letter-spacing:.24em;
  }
  .church-directory-list{
    grid-template-columns:1fr;
  }
  .church-directory-list li{
    padding:.85rem 1rem;
    min-height:44px;
  }

  /* ---- Sources block ---- */
  .source-list ul{ padding-left:1rem; }
  .source-list li{ font-size:.86rem; word-break:break-word; }

  /* ---- Footer ---- */
  .site-footer{ padding:2rem .9rem 1.6rem; margin-top:2.6rem; }
  .footer-emblem{ width:68px; height:68px; }
  .footer-nav{
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
  }
  .footer-nav a{
    padding:.7rem 1rem;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.74rem;
  }
  .footer-note{ font-size:.75rem; }

  /* ---- Back-to-top (library) ---- */
  .library-top-btn{
    right:.75rem;
    bottom:.75rem;
    padding:.55rem .85rem;
    font-size:.66rem;
  }

  /* ---- Skip link ---- */
  .skip:focus{ left:.5rem; top:.5rem; padding:.55rem .85rem; font-size:.85rem; }
}

/* ================================================================ ≤520px */
@media (max-width:520px){
  body{ font-size:16px; }
  .stats-grid{ grid-template-columns:1fr; }
  .stat-value{ font-size:1.5rem; }
  .section{ padding:0 .8rem; }
  .section h2{ font-size:1.22rem; }
  .hero-inner{ padding:2rem .85rem 1.9rem; }
  .hero-kicker{ font-size:.62rem; letter-spacing:.28em; }
  .brand-title{ font-size:.86rem; }
  .brand-logo{ width:30px; height:30px; }
  .site-nav a{ font-size:.78rem; padding:.9rem .8rem; }
  .scripture-inline,
  .wisdom-quote{ font-size:.96rem; }
  .prose p{ font-size:.98rem; }
  .btn{ font-size:.72rem; padding:.85rem 1.1rem; letter-spacing:.14em; }
}

/* ================================================ Landscape phones */
@media (max-width:900px) and (orientation:landscape){
  .hero-inner{ padding:1.6rem 1rem 1.6rem; }
  .hero-title{ font-size:1.7rem; }
  .site-nav{ max-height:70vh; }
}

/* ================================================ Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  html{ scroll-behavior:auto; }
  .library-top-btn:hover{ transform:none; }
}

/* ================================================ Hover capability */
/* Only enable hover transforms on devices that actually hover */
@media (hover:none){
  .card:hover,
  .resource-card:hover{
    transform:none;
    box-shadow:var(--shadow);
  }
}


/* === scroll safety (added by fix_library_and_scroll.py) === */
html{
  scroll-behavior:smooth;
  overflow-y:auto;
}
body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}