/* Responsive layer for the Ano Kato site.
   Desktop keeps the original FrontPage look; below 820px the layout tables
   are stacked into a single column and media scales to the screen. */

.rk-menu-toggle { display: none; }

@media (max-width: 820px) {
  img, video, audio, iframe, embed, object {
    max-width: 100%;
  }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0 !important;
    padding: 0 10px 16px !important;
    overflow-x: hidden;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Stack every layout table into one column */
  table, tbody, thead, tfoot, tr, td, th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }
  td, th { padding-left: 0 !important; padding-right: 0 !important; }
  /* Empty spacer cells from the FrontPage layout */
  td:empty { display: none !important; }

  /* Media scales with the screen */
  img {
    height: auto !important;
  }
  img[align], img[style*="float"] {
    float: none !important;
    display: block;
    margin: 10px auto !important;
  }
  /* Keep small icons (YouTube, flags) inline and at their natural size */
  img[width="42"], img[width="54"], img[width="40"], img[width="32"] {
    display: inline-block !important;
    float: none !important;
    margin: 0 4px !important;
  }
  audio, .audiofragment { width: 100% !important; }
  iframe { width: 100% !important; }
  iframe:not([style*="absolute"]) { height: auto; aspect-ratio: 16 / 9; }

  [style*="margin-right"], [style*="margin-left"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  div[style*="width"], p[style*="width"], span[style*="width"] {
    width: auto !important;
    max-width: 100% !important;
  }
  /* Responsive video embeds: the wrapper only holds an absolutely positioned
     iframe, so "width: auto" on a floated/inline-block wrapper shrinks it to
     zero and the video vanishes. Make the wrapper span the full width. */
  span[style*="width"]:has(> span[style*="padding-top"] > iframe) {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }
  pre { white-space: pre-wrap; }

  /* Navigation: collapsible menu built by responsive.js */
  .rk-nav { padding: 0 !important; }
  .rk-nav > p > img[width="138"] { display: none; }
  .rk-nav.rk-ready .rk-links { display: none; }
  .rk-nav.rk-open .rk-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 8px 0;
    margin: 0;
  }
  .rk-nav .rk-links br { display: none; }
  .rk-nav .rk-links > a { display: block; min-width: 0; }
  /* Leftover empty link from the original FrontPage markup */
  .rk-nav .rk-links > a:not(:has(img)) { display: none; }
  .rk-nav .rk-links img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 140px;
    height: auto !important;
    margin: 0 !important;
  }

  .rk-menu-toggle {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 12px 14px;
    font: bold 16px Arial, Helvetica, sans-serif;
    color: #ffffcc;
    background: #6b4a33;
    border: 0;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
  }
  .rk-menu-toggle::before { content: "\2630\00a0\00a0"; }
  .rk-nav.rk-open .rk-menu-toggle::before { content: "\2715\00a0\00a0"; }
}