/* mobile-sm.css
   Responsive typography and button styles tailored for small devices (max-width: 576px).
   - Scales down headings
   - Increases readability for paragraphs
   - Improves button tap-target sizes
   Place a <link rel="stylesheet" href="/css/mobile-sm.css"> in your layout head to include this file.
*/

@media (max-width: 480px) {
  /* Headings */
  h1 {
    font-size: 24px; /* ~25.6px if base 16px */
    /* line-height: 1.2; */
    margin-bottom: 0.5rem;
    /* font-weight: 700; */
    letter-spacing: 0.2px;
    word-wrap: break-word;
    -ms-hyphens: auto;
        hyphens: auto;
  }

  h2 {
    font-size: 22px;
    /* line-height: 1.25; */
    margin-bottom: 0.45rem;
    /* font-weight: 700; */
    letter-spacing: 0.15px;
    word-wrap: break-word;
    -ms-hyphens: auto;
        hyphens: auto;
  }

  h3 {
    font-size: 20px;
    /* line-height: 1.3; */
    margin-bottom: 0.45rem;
    /* font-weight: 600; */
    /* letter-spacing: 0.1px; */
    word-wrap: break-word;
    -ms-hyphens: auto;
        hyphens: auto;
  }

  h4 {
    font-size: 18px;
    /* line-height: 1.35; */
    margin-bottom: 0.4rem;
    /* font-weight: 600; */
    /* word-wrap: break-word; */
  }

  h5 {font-size: 16px;
    /* line-height: 1.4; */
    margin-bottom: 0.35rem;
    /* font-weight: 600; */
  }

  h6 {
    font-size: 13px;
    /* line-height: 1.4; */
    margin-bottom: 0.3rem;
    /* font-weight: 600; */
    /* color: #333; */
  }

  /* Paragraphs */
  p {
    font-size: 11px;
    /* line-height: 1.6; */
    margin-bottom: 0.75rem;
    /* color: #444; */
    word-wrap: break-word;
    -ms-hyphens: auto;
        hyphens: auto;
  }

  

  /* Slight spacing adjustments for compact layouts */
  small, .small {
    font-size: 0.85rem;
  }

  /* Reduce large default margins inside article-like sections */
  article h1, article h2, article h3 {
    margin-top: 0.4rem;
  }

  /* Keep long words from breaking layout */
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }

  .offcanvas.mob-offcanvas {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    
    /* Positioning is required for the backdrop to stick to this element */
    position: fixed; 
    bottom: 0;       /* Anchors it to bottom (typical for mobile) */
    left: 0;
    right: 0;
    z-index: 1050;   /* Ensures it sits on top of everything else */

    /* Animation logic */
    visibility: visible;
    -webkit-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

/* THE BACKDROP CODE */
  .offcanvas.mob-offcanvas::before {
      content: "";
      position: fixed;
      /* top: 0; */
      left: 0;
      width: 100vw;    /* Full Viewport Width */
      height: 100vh;   /* Full Viewport Height */
      background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
      z-index: -1;     /* Places it BEHIND the offcanvas content */
      
      /* Optional: Makes the background unclickable so it feels like a real modal */
      pointer-events: all; 
      -webkit-backdrop-filter: blur(2px); 
              backdrop-filter: blur(2px); /* Optional: Adds a nice blur effect */
  }



}