/* ===============================
   MOBILE.CSS – CLEAN VERSION
   max-width:900px
   =============================== */

@media (max-width:900px){

  nav{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .navlinks{
    gap:16px;
    flex-wrap:wrap;
  }

  .twoCol,
  .heroGrid{
    grid-template-columns:1fr;
  }

  .heroText{
    padding:24px;
  }

  .heroMedia{
    padding:0 24px 24px 24px;
  }

  .footerGrid{
    grid-template-columns:1fr;
    gap:24px;
  }

  /* Mosaic stays 2x2 */
  .square-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }

  .mosaic.square-grid > picture{
    aspect-ratio:1 / 1;
  }

  .btn{
    white-space:normal;
  }

  /* ===== TYPOGRAPHY FIX FOR MOBILE ===== */

  h1{font-size:28px;}
  h2{font-size:20px;}

  /* Use clean desktop font on mobile */
  .heroText p,
  .section p:not(.smallNote),
  .cardPad p:not(.smallNote){
    font-family:"OpenSansLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight:600;
    font-size:1rem;
    line-height:1.6;
    letter-spacing:0;
  }

  /* Make address clearly bold */
  .addressText{
    font-family:"OpenSansLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight:700;
  }

  /* Navigation stronger */
  .navlinks a{
    font-weight:700;
  }
}

/* ===============================
   MOBILE FIXES (ADD-ONLY)
   Goal:
   - Mobile text like Desktop (no cursive), thicker
   - Reduce excessive spacing on mobile (EXCEPT menu page)
   - Keep headline "never try, never know" as allowed stylized element
   =============================== */

@media (max-width:900px){

  /* (A) MOBILE: remove cursive body text -> match Desktop (OpenSansLocal) */
  .heroText p,
  .section p:not(.smallNote),
  .cardPad p:not(.smallNote){
    font-family:"OpenSansLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight:600 !important;
    font-size:1.05rem !important;
    line-height:1.55 !important;
    letter-spacing:0 !important;
  }

  /* Make small notes still readable but not too thin */
  .smallNote{
    font-family:"OpenSansLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight:600 !important;
    opacity:.85 !important;
  }

  /* (B) MOBILE: address/contact should be thicker */
  .addressText{
    font-weight:800 !important;
  }

  /* (C) MOBILE: compress spacing on mobile EXCEPT MENU page */
  html:not([data-page="menu"]) .heroText{
    padding:18px !important;
  }

  html:not([data-page="menu"]) .heroMedia{
    padding:0 18px 18px 18px !important;
  }

  /* If your sections use .section as wrapper (you do in your CSS),
     reduce vertical whitespace */
  html:not([data-page="menu"]) .section{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  html:not([data-page="menu"]) h1{ margin:0 0 12px !important; }
  html:not([data-page="menu"]) h2{ margin:0 0 10px !important; }
  html:not([data-page="menu"]) h3{ margin:18px 0 10px !important; }

  /* Reduce paragraph gaps */
  html:not([data-page="menu"]) p{
    margin:0 0 12px !important;
  }

  /* (D) HOME headline: "never try, never know"
     - allow stylized, but bold, 2 lines, optional rotation
     - Assumption: the big headline is the H1 inside .heroText on the home page.
     - If your home page uses data-page="home" or "index", this will work.
  */

  /* Try both common identifiers safely */
  html[data-page="home"] .heroText h1,
  html[data-page="index"] .heroText h1{
    font-family:"CaveatLocal", cursive !important;  /* stylized allowed here */
    font-weight:800 !important;
    line-height:0.92 !important;

    /* force 2-line feel */
    max-width:12ch !important;
    text-wrap:balance;
    letter-spacing:-0.5px !important;

    /* make it big but not 3 lines */
    font-size:clamp(56px, 14vw, 92px) !important;

    /* optional tilt (requested) */
    transform:rotate(-35deg);
    transform-origin:left top;
  }

  /* If you DON'T use data-page="home"/"index",
     you can switch to this target (ONLY if needed):
     .heroText h1 { ... }  (but that would affect other pages too) */
}
@media (max-width:900px){

  html[data-page="home"] .heroText div[aria-label="Never try, never know"]{
    font-family:"CaveatLocal", cursive !important;
    font-weight:700 !important;
    display:inline-block !important;

    /* 2 Zeilen erzwingen */
    max-width:12ch !important;
    white-space:normal !important;
    text-wrap:balance;

    /* Fett + groß + drehen */
    font-size:clamp(52px, 13vw, 86px) !important;
    line-height:0.92 !important;
    transform:rotate(-35deg) !important;
    transform-origin:left top !important;

    /* Inline-Spacing sauber */
    margin:10px 0 10px 0 !important;
  }

  /* Und Home H1 bleibt normal */
  html[data-page="home"] .heroText h1{
    font-family:"OpenSansLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight:800 !important;
    transform:none !important;
  }
}
/* =========================================
   MOBILE: "never try, never know" stylized
   Only this line gets cursive + rotation
   ========================================= */
@media (max-width:900px){

  /* keep the H1 (Slavic Roots Cafe & Eatery) normal on mobile */
  .heroText h1{
    font-family:"OpenSansLocal", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-weight:800 !important;
    transform:none !important;
  }

  /* ONLY the "never try, never know" block */
  .heroText [aria-label="Never try, never know"]{
    font-family:"CaveatLocal", cursive !important;
    font-weight:700 !important;

    /* override your inline style safely */
    font-size:clamp(56px, 14vw, 92px) !important;
    line-height:0.92 !important;
    margin:10px 0 12px 0 !important;

    /* make it look like a signature */
    display:inline-block !important;
    max-width:12ch !important;
    letter-spacing:-0.5px !important;

    /* tilt */
    transform:rotate(-15deg) !important;
    transform-origin:left top !important;
  }
}
/* =====================================
   MOBILE SIGNATURE FIX
   ===================================== */

@media (max-width:900px){

  .signature-line{
    font-family:"CaveatLocal", cursive !important;
    font-weight:700 !important;

    font-size:clamp(56px, 14vw, 90px) !important;
    line-height:0.9 !important;

    display:inline-block;
    max-width:12ch;

    transform:rotate(-18deg);
    transform-origin:left top;

    margin:12px 0 16px 0 !important;
  }

}