/* ============================================
   YAHASRA MOBILE STYLESHEET
   Active at: width <= 768px
   Spec: docs/mobile_spec_v1.md
   Author: Dr. Yohanan S. Ouaknine
   Date: 2026-04-30
   ============================================ */

@media (max-width: 768px) {

  /* --- Tokens (mobile scope) --- */
  :root {
    --m-bg: #FAF6EE;
    --m-surface: #FFFFFF;
    --m-text: #3A2418;
    --m-text-muted: #7A6E63;
    --m-border: #EDE3CF;
    --m-shadow: 0 1px 2px rgba(58, 36, 24, 0.06);
    --m-shadow-lift: 0 2px 8px rgba(58, 36, 24, 0.10);
    --m-gold: var(--y-gold, #C4973B);
    --m-red: var(--y-red, #8B2727);
    --m-radius: 12px;
    --m-radius-sm: 8px;
    --m-tap: 44px;
    --m-row: 52px;
    --m-bar-h: 56px;
  }

  /* --- Reset / global --- */
  html, body {
    background: var(--m-bg);
    color: var(--m-text);
    font-size: 16px;
    line-height: 1.5;
  }

  /* Hide the desktop sidebar wholesale on mobile.
     base.html will keep rendering it; this just hides it. */
  .sidebar,
  aside#sidebar {
    display: none !important;
    /* !important needed because Tailwind utility "flex" on
       the aside element would otherwise win the cascade. */
  }
  .main-wrapper {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding-top: var(--m-bar-h) !important;
    /* !important needed because the desktop rule sets the
       margin globally; we override only on mobile. */
  }

  /* --- Top app bar --- */
  .m-topbar {
    display: flex !important;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: var(--m-bar-h);
    background: var(--m-surface);
    border-bottom: 1px solid var(--m-border);
    align-items: center;
    padding: 0 16px;
    z-index: 1000;
    transition: box-shadow 0.2s ease;
  }
  .m-topbar.is-scrolled {
    box-shadow: var(--m-shadow);
  }
  .m-topbar__hamburger,
  .m-topbar__globe,
  .m-topbar__avatar {
    width: var(--m-tap);
    height: var(--m-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--m-text);
    cursor: pointer;
  }
  .m-topbar__hamburger svg,
  .m-topbar__globe svg {
    width: 24px;
    height: 24px;
    stroke: var(--m-text);
    stroke-width: 2;
    fill: none;
  }
  .m-topbar__brand {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: var(--m-gold);
    font-family: serif;
    font-size: 20px;
    font-weight: 600;
  }
  .m-topbar__brand img {
    width: 24px;
    height: 24px;
  }
  .m-topbar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-gold);
    color: white;
    font-size: 12px;
    font-weight: 600;
  }

  /* --- Drawer + backdrop --- */
  .m-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .m-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .m-drawer {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    bottom: 0;
    width: 84%;
    max-width: 320px;
    background: var(--m-surface);
    z-index: 1600;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  html[dir="rtl"] .m-drawer {
    transform: translateX(100%);
    inset-inline-start: auto;
    inset-inline-end: 0;
  }
  .m-drawer.is-open {
    transform: translateX(0);
  }
  .m-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--m-bar-h);
    padding: 0 16px;
    border-bottom: 1px solid var(--m-border);
  }
  .m-drawer__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--m-gold);
    font-family: serif;
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
  }
  .m-drawer__brand img {
    width: 24px;
    height: 24px;
  }
  .m-drawer__close {
    width: var(--m-tap);
    height: var(--m-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    font-size: 20px;
    color: var(--m-text-muted);
    cursor: pointer;
  }
  .m-drawer__section-label {
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--m-text-muted);
    padding: 16px 16px 8px;
  }
  .m-drawer__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .m-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--m-row);
    padding: 0 16px;
    color: var(--m-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    border-inline-start: 3px solid transparent;
  }
  .m-drawer__link:active,
  .m-drawer__link.is-active {
    background: var(--m-bg);
    border-inline-start-color: var(--m-gold);
    color: var(--m-red);
  }
  .m-drawer__link svg,
  .m-drawer__link img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
  }
  .m-drawer__divider {
    height: 1px;
    background: var(--m-border);
    margin: 16px 16px 0;
  }
  .m-drawer__user {
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--m-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .m-drawer__user-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .m-drawer__user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--m-gold);
    color: white;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .m-drawer__user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--m-text);
  }
  .m-drawer__user-role {
    font-size: 12px;
    color: var(--m-text-muted);
  }
  .m-drawer__lang-button,
  .m-drawer__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    color: var(--m-text);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
  }
  .m-drawer__signin {
    display: block;
    text-align: center;
    height: 48px;
    line-height: 48px;
    background: var(--m-gold);
    color: white;
    font-weight: 600;
    border-radius: var(--m-radius-sm);
    text-decoration: none;
  }

  /* --- Language sheet --- */
  .m-langsheet {
    position: fixed;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
    background: var(--m-surface);
    z-index: 1700;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    padding: 8px 0 24px;
    max-height: 70vh;
    overflow-y: auto;
  }
  .m-langsheet.is-open {
    transform: translateY(0);
  }
  .m-langsheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
  }
  .m-langsheet__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--m-text);
  }
  .m-langsheet__close {
    width: var(--m-tap);
    height: var(--m-tap);
    background: transparent;
    border: 0;
    font-size: 18px;
    color: var(--m-text-muted);
  }
  .m-langsheet__list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .m-langsheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: var(--m-row);
    padding: 0 16px;
    color: var(--m-text);
    text-decoration: none;
    font-size: 16px;
  }
  .m-langsheet__item.is-active {
    color: var(--m-red);
    font-weight: 600;
  }
  .m-langsheet__check {
    margin-inline-start: auto;
    color: var(--m-gold);
  }

  /* --- Page content area --- */
  main, .main-wrapper > main {
    padding: 16px;
    max-width: 100%;
  }
  .container, .container-fluid {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }
  h1, .page-title {
    font-family: serif;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--m-text);
  }
  h2 {
    font-family: serif;
    font-size: 18px;
    font-weight: 600;
  }
  p {
    margin: 0 0 12px;
  }
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  /* --- Forms (used by /search and burial forms) --- */
  form label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--m-text);
    margin: 12px 0 6px;
  }
  form input[type="text"],
  form input[type="number"],
  form input[type="email"],
  form select,
  form textarea {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    font-size: 16px;
    background: var(--m-surface);
    color: var(--m-text);
    box-sizing: border-box;
  }
  form input:focus,
  form select:focus,
  form textarea:focus {
    outline: 2px solid var(--m-gold);
    outline-offset: 1px;
    border-color: var(--m-gold);
  }
  form button[type="submit"],
  .btn-primary,
  .m-btn-primary {
    width: 100%;
    min-height: 48px;
    background: var(--m-gold);
    color: white;
    border: 0;
    border-radius: var(--m-radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  .m-btn-secondary {
    width: 100%;
    min-height: 48px;
    background: transparent;
    color: var(--m-text);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius-sm);
    font-size: 16px;
    font-weight: 500;
  }
  /* Hide the desktop pill row of quick links on /search;
     it duplicates drawer items and crowds the screen. */
  .quick-links-row, .pill-row, .nav-pills.search-nav {
    display: none;
  }
  /* Hide the news ticker on mobile to reduce noise. */
  .news-ticker, .marquee {
    display: none;
  }

  /* --- Search results cards --- */
  .result-card,
  .burial-result {
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    padding: 16px;
    margin-bottom: 12px;
    display: block;
    text-decoration: none;
    color: var(--m-text);
  }
  .result-card:active {
    box-shadow: var(--m-shadow-lift);
  }

  /* --- Burial detail --- */
  .burial-photo {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--m-radius);
    background: var(--m-bg);
  }
  .burial-meta {
    margin-top: 16px;
  }
  .burial-meta-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--m-border);
    gap: 16px;
  }
  .burial-meta-row:last-child {
    border-bottom: 0;
  }
  .burial-meta-label {
    color: var(--m-text-muted);
    font-size: 14px;
  }
  .burial-meta-value {
    color: var(--m-text);
    font-size: 14px;
    text-align: end;
  }
  .burial-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--m-border);
  }
  .burial-section-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--m-text-muted);
    margin-bottom: 8px;
  }

  /* --- Footer --- */
  footer, .footer {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--m-text-muted);
  }

  /* --- Hide on mobile (utility) --- */
  .desktop-only {
    display: none !important;
  }

  /* --- RTL adjustments --- */
  html[dir="rtl"] .burial-meta-value {
    text-align: start;
  }
  html[dir="rtl"] .m-drawer__link.is-active {
    border-inline-start-color: transparent;
    border-inline-end-color: var(--m-gold);
  }
  html[dir="rtl"] svg.m-flip-rtl {
    transform: scaleX(-1);
  }

  /* --- Accessibility --- */
  :focus-visible {
    outline: 2px solid var(--m-gold);
    outline-offset: 2px;
  }
  .m-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }


  /* ============================================
     DEFENSIVE MOBILE FLOOR (added 2026-04-30)
     Spec: docs/mobile_spec_v1.md, this section
     documented as "defensive floor, not the
     design".

     These rules force every page into a readable
     single-column layout on mobile, regardless of
     the template's own markup. They will be
     superseded by hand-tuned per-page styles as
     templates are refactored. Until then, this is
     the floor that prevents horizontal scroll,
     fixed-width overflow, and unreadable
     multi-column grids on a 384px phone.

     Order matters: the floor sits at the END of
     the mobile media query so it overrides any
     earlier rules that did not anticipate hostile
     markup.
     ============================================ */

  /* --- Force single column on multi-column grids --- */
  .grid-cols-2, .grid-cols-3, .grid-cols-4,
  .grid-cols-5, .grid-cols-6, .grid-cols-7,
  .grid-cols-8, .grid-cols-9,
  .md\:grid-cols-2, .md\:grid-cols-3,
  .md\:grid-cols-4, .md\:grid-cols-5,
  .md\:grid-cols-6,
  .lg\:grid-cols-2, .lg\:grid-cols-3,
  .lg\:grid-cols-4, .lg\:grid-cols-5,
  .lg\:grid-cols-6 {
    grid-template-columns: 1fr !important;
    /* !important: needed because Tailwind utilities are
       extremely specific and load after this stylesheet. */
  }

  /* --- Bootstrap-style column stack --- */
  [class*="col-md-"], [class*="col-lg-"],
  [class*="col-sm-"], [class*="col-xl-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    /* !important: same reason as above. */
  }

  /* --- Constrain ANY fixed-width container.
         Targets common patterns: 500-1500px widths,
         max-widths above 480px on root containers. --- */
  [style*="width: 500px"], [style*="width: 600px"],
  [style*="width: 700px"], [style*="width: 768px"],
  [style*="width: 800px"], [style*="width: 900px"],
  [style*="width: 1000px"], [style*="width: 1024px"],
  [style*="width: 1100px"], [style*="width: 1200px"],
  [style*="width: 1300px"], [style*="width: 1400px"],
  [style*="max-width: 800px"], [style*="max-width: 900px"],
  [style*="max-width: 1000px"], [style*="max-width: 1024px"],
  [style*="max-width: 1100px"], [style*="max-width: 1200px"],
  [style*="max-width: 1300px"], [style*="max-width: 1400px"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* !important: inline styles are otherwise unbeatable. */
  }

  /* --- Generic container classes that often have
         a fixed pixel width --- */
  .container, .container-xl, .container-lg,
  .container-md, .container-sm,
  .max-w-7xl, .max-w-6xl, .max-w-5xl,
  .max-w-4xl, .max-w-3xl, .max-w-2xl {
    max-width: 100% !important;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
  }

  /* --- Tables: wrap into a horizontally
         scrolling region rather than stacking,
         since collapsing data tables loses meaning. --- */
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  table thead, table tbody, table tr {
    display: table-row-group;
  }
  /* If the page wraps tables in a card, give that
     card breathing room. */
  .card table, .panel table, .table-responsive table {
    margin: 0;
  }

  /* --- Generic flex rows that should stack on mobile.
         We only target rows with class indicating a
         horizontal layout intent. --- */
  .flex-row, .row {
    flex-direction: column !important;
    flex-wrap: wrap;
  }
  .row > [class*="col"] {
    margin-bottom: 12px;
  }

  /* --- Cards in card grids should fill the row.
         We catch the common Bootstrap-ish .card pattern. --- */
  .card-deck, .card-group, .card-columns {
    display: block !important;
  }
  .card-deck > .card, .card-group > .card,
  .card-columns > .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 12px;
  }

  /* --- Hero sections often have hardcoded heights;
         let them shrink. --- */
  .hero, .jumbotron, .banner {
    min-height: 0 !important;
    padding: 24px 16px !important;
  }
  .hero h1, .hero h2,
  .jumbotron h1, .jumbotron h2 {
    font-size: 24px !important;
    line-height: 1.2;
  }

  /* --- Iframes should not overflow. --- */
  iframe {
    max-width: 100%;
  }

  /* --- Buttons in clusters: stack with gap rather
         than overflow horizontally. --- */
  .btn-group:not(.btn-group-vertical),
  .button-row, .actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
    align-items: stretch;
  }
  .btn-group > .btn,
  .button-row > .btn,
  .button-row > a, .button-row > button,
  .actions > .btn,
  .actions > a, .actions > button {
    width: 100% !important;
  }

  /* --- Navigation pill rows on top of pages
         (search.html has one) hide on mobile;
         they duplicate drawer items. --- */
  .nav-pills, .pill-row, .quick-links-row {
    display: none !important;
  }

  /* --- Final safety: anything wider than the
         viewport gets clipped rather than causing
         horizontal scroll. --- */
  body {
    overflow-x: hidden;
  }

} /* end @media (max-width: 768px) */

/* --- Hide mobile-only elements on desktop --- */
@media (min-width: 769px) {
  .m-only,
  .m-topbar,
  .m-drawer,
  .m-backdrop,
  .m-langsheet {
    display: none !important;
  }
}