/* Phone and tablet layout, loaded after style.css. Desktop (> 980px) is unchanged.
   Phones get their own menu (.phone-nav, native <details>, no scripts: the site's CSP forbids them);
   the desktop menu (#nav) is simply hidden there. */

.phone-nav, .ll { display: none; }
br.pbr { display: none; }

@media (max-width: 980px) {
  html, body { overflow-x: hidden; }
  body { -webkit-text-size-adjust: 100%; }

  /* Page frame: one fluid column */
  #page, #header { width: auto; margin-left: 0; }
  #content-wrap { padding: 12px; }
  #content, #sidebar { float: none; width: auto; margin: 0 0 12px 0; }
  .post { width: auto; box-sizing: border-box; padding: 12px 14px; margin-bottom: 18px; }
  .post h2, .post h2 a { font-size: 19px; }
  .post h4 { font-size: 17px; margin: 5px 0 14px 0; }
  #sidebar h2 { width: auto; box-sizing: border-box; background-size: cover; }
  .entry, .entry p, .entry li, .entry td { font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
  .entry p[style] { font-size: 15px !important; }
  .entry p:empty, .entry code:empty { display: none; }
  .entry a, #sidebar a { font-size: 15px; }
  #sidebar ul li { padding: 3px 0; }
  .shortcuts a { display: inline-block; padding: 4px 0; }

  /* Header: only the main logo */
  #headerimg img[src*="sf-kuopio-logo"] { display: none !important; }
  #headerimg img[src*="sawofighters-logo"] {
    position: static !important; float: none !important; display: block !important;
    width: 80% !important; max-width: 420px; margin: 8px auto !important;
  }

  /* Menu: the desktop menu is hidden, the phone menu floats over the page */
  #nav { display: none; }
  .phone-nav {
    display: block; position: relative; z-index: 1000;
    background: #111; border-bottom: 3px solid #EB6E15;
  }
  .phone-nav ul { list-style: none; margin: 0; padding: 0; }
  .phone-nav li { list-style: none; margin: 0; padding: 0; border-top: 1px solid #333; }
  .phone-nav summary, .phone-nav a {
    display: flex; align-items: center; box-sizing: border-box; min-height: 46px;
    padding: 12px 16px; color: #fff; text-decoration: none;
    font: bold 16px/1.3 Arial, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .phone-nav summary { list-style: none; }
  .phone-nav summary::-webkit-details-marker { display: none; }
  .phone-nav summary::marker { content: ""; }
  .phone-nav summary:focus-visible, .phone-nav a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

  .pn-menu > summary { font-size: 17px; border-top: 0; }
  .pn-menu > summary::before { content: "\2630"; display: inline-block; width: 1.5em; }
  .pn-menu[open] > summary::before { content: "\2715"; }
  .pn-menu > ul {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: 75vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: #111; border-bottom: 3px solid #EB6E15; box-shadow: 0 10px 18px rgba(0, 0, 0, 0.7);
  }
  .pn-menu details > summary::after { content: "\25B8"; margin-left: auto; color: #EB6E15; font-size: 20px; }
  .pn-menu details[open] > summary::after { content: "\25BE"; }
  .pn-menu details > ul { background: #1b1b1b; }
  .pn-menu details li a {
    padding-left: 32px; font-weight: normal; font-size: 15px; color: #e8e8e8;
    border-left: 4px solid #EB6E15;
  }
  .phone-nav a[aria-current] { color: #EB6E15; font-weight: bold; }

  /* Front page: sentence per line, logo picture with links that scale with it */
  br.pbr { display: block; content: ""; margin-top: 8px; }
  .logolinks { position: relative; }
  .logolinks img { display: block; width: 100%; height: auto; }
  .ll { display: block; position: absolute; top: 0; height: 100%; }
  .ll1 { left: 0; width: 36.2%; }
  .ll2 { left: 36.2%; width: 22.4%; }
  .ll3 { left: 58.6%; width: 41.4%; }

  /* Media */
  .entry img, #sidebar img, .post img { max-width: 100%; height: auto; }
  .entry table { max-width: 100%; }
  .entry iframe { width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; box-sizing: border-box; }
  .entry iframe[src*="google.com/maps"] { aspect-ratio: 4 / 3; }

  /* Treeniajat: each time slot is a small card (day on its own line) instead of a bulleted, indented line.
     The hover tooltips are switched off: on a phone they stick after a tap and cover the slots. */
  .entry ul[style*="969696"] {
    background: none !important; box-shadow: none !important; border: 0 !important;
    padding: 0 !important; margin: 0 0 14px; text-indent: 0; list-style: none;
  }
  .entry li.training-day, .entry li.peruskurssi, .entry li.no-training {
    display: block; margin: 0 0 8px; padding: 10px 12px; text-indent: 0; list-style: none;
    border-left: 4px solid #EB6E15; border-radius: 4px; box-shadow: none;
    font-size: 15px; line-height: 1.4;
  }
  .entry li span[style*="padding-right"] { display: block; padding: 0 !important; font-size: 16px; }
  .training-day[tooltip]:hover:after, .peruskurssi[tooltip]:hover:after, .no-training[tooltip]:hover:after {
    display: none;
  }
}