/* Mobile overlay for gwfhegel.org.
   Loaded after the legacy styles by __m/serve.php; never edit legacy files.
   Everything is inside a max-width media query, so desktop pages look exactly as before.
   !important is only used where the legacy markup has inline styles or HTML attributes. */

:root {
  --maroon: #7a1f1a;
  --gold: #f0b850;
  --sand: #f1bd5c;
  --cream: #fff8e8;
  --forest: #224433;
  --ink: #2a1a12;
  --tap: 48px;
}

#m-bar, #m-menu { display: none; }

@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0 !important;
    overflow-wrap: break-word;
  }
  img, video, object, embed, iframe { max-width: 100% !important; height: auto !important; }
  pre { white-space: pre-wrap; }
  table { max-width: 100% !important; }
  /* Legacy small-print markup: keep it a little smaller than body text but readable on a phone */
  font[size="1"], font[size="2"], small, .MsoFootnoteText { font-size: .95rem !important; }
  font[size="2"] small, small small { font-size: inherit !important; }
  /* Fixed table/row heights from the desktop layout would make stacked rows overlap */
  table[height], tr[height], td[height], th[height] { height: auto !important; }
  /* Chapter buttons on the Phenomenology contents pages (see mobile.js) */
  input[type="button"] { min-height: 40px; padding: 0 12px; margin: 4px 8px 4px 0; font-size: .95rem; }

  /* ---------- Phone header bar + menu (built from nav-right.inc) ---------- */
  #m-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 8px 0 16px;
    background: var(--maroon);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
    text-align: left;
  }
  #m-bar .m-site {
    color: var(--gold) !important;
    font: 600 1.15rem/1.2 Georgia, "Times New Roman", serif;
    text-decoration: none;
    background: none !important;
  }
  #m-bar .m-contents {
    margin-left: auto;
    padding: 10px 4px;
    color: var(--gold) !important;
    font: .95rem/1 Arial, Helvetica, sans-serif;
    text-decoration: underline;
    background: none !important;
  }
  #m-menu-btn {
    min-width: var(--tap);
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(240, 184, 80, .6);
    border-radius: 4px;
    background: transparent;
    color: var(--gold);
    font: 500 .95rem/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
  }
  #m-menu-btn::before { content: "\2630\00a0"; }
  #m-menu-btn[aria-expanded="true"]::before { content: "\2715\00a0"; }

  #m-menu:not([hidden]) {
    display: block;
    position: fixed;
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 49;
    overflow-y: auto;
    padding: 8px 16px 32px;
    background: var(--cream);
    text-align: left;
    font: 1rem/1.4 Arial, Helvetica, sans-serif;
  }
  #m-menu .m-menu-h {
    margin: 18px 0 4px;
    color: var(--maroon);
    font: 700 .8rem/1.2 Arial, Helvetica, sans-serif;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
  }
  #m-menu ul { list-style: none; margin: 0; padding: 0; }
  #m-menu li { margin: 0; border-bottom: 1px solid #ecdcc0; }
  #m-menu a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--ink) !important;
    font-size: 1rem;
    text-decoration: none;
    background: none !important;
  }
  body.m-menu-open { overflow: hidden; }

  /* ---------- Main pages (hegel.css + topper/nav-right/footer includes) ---------- */
  body[data-tpl="main"] { background-color: var(--forest); font-size: 17px; }
  body[data-tpl="main"] #Content { width: auto; padding: 8px; }
  body[data-tpl="main"] .main { width: auto; border: 0; border-radius: 4px; overflow: hidden; }
  body[data-tpl="main"] .head { padding-top: 8px; height: auto !important; }
  body[data-tpl="main"] .leftcol,
  body[data-tpl="main"] .rightcol {
    float: none;
    width: auto !important;
    padding: 0 14px;
  }
  /* Masthead: portrait beside the title instead of a 12% column */
  body[data-tpl="main"] .main > .head { display: flex; align-items: flex-start; gap: 4px; }
  body[data-tpl="main"] .main > .head > .leftcol { flex: 0 0 76px; padding: 8px 0 0 12px; }
  body[data-tpl="main"] .main > .head > .leftcol br { display: none; }
  body[data-tpl="main"] .main > .head > .leftcol img { width: 60px !important; }
  body[data-tpl="main"] .main > .head > .rightcol { flex: 1; padding: 0 12px 8px 4px; }
  body[data-tpl="main"] h1 { font-size: 2rem; line-height: 1.15; }
  body[data-tpl="main"] h2 { font-size: 1.45rem; line-height: 1.2; margin: .3em 0; }
  body[data-tpl="main"] h3 { font-size: 1.15rem; line-height: 1.25; margin: .3em 0; }
  body[data-tpl="main"] p { text-align: left; line-height: 1.55; }
  body[data-tpl="main"] p.quote { font-size: .92rem; }

  /* Date bar: its links are in the phone menu, the date stays */
  body[data-tpl="main"] #nav { height: auto; padding: 6px 0; font-size: .85rem; }
  body[data-tpl="main"] #nav .rightcol { display: none; }
  /* Right-hand link column: everything in it is in the phone menu */
  body[data-tpl="main"] .linkscolumn { display: none; }

  body[data-tpl="main"] .textcolumn { width: auto; padding: 4px 16px 16px; }
  body[data-tpl="main"] .textcolumn .head { height: auto !important; display: flex; align-items: center; }
  body[data-tpl="main"] .textcolumn .head .leftcol { flex: 1; padding: 0; }
  body[data-tpl="main"] .textcolumn .head .rightcol { flex: 0 0 auto; padding: 0; }
  body[data-tpl="main"] .textcolumn img[align="right"],
  body[data-tpl="main"] .textcolumn img[align="left"] { float: none; display: block; margin: 12px auto; }

  body[data-tpl="main"] #foot { height: auto; display: flex; justify-content: space-between; padding: 8px 14px; }
  body[data-tpl="main"] #foot .leftcol,
  body[data-tpl="main"] #foot .rightcol { padding: 0; }
  body[data-tpl="main"] #foot a { display: inline-block; padding: 6px 0; }

  /* Tables inside main pages (contact, mailing lists, ...) */
  body[data-tpl="main"] table { width: 100% !important; }
  body[data-tpl="main"] td { display: block; width: auto !important; }

  /* ---------- Phenomenology text (Word 97 exports, English + German) ---------- */
  body[data-tpl="phen"] {
    padding: 0 0 24px;
    font: 1.06rem/1.65 Georgia, "Times New Roman", serif;
  }
  body[data-tpl="phen"] > :not(#m-bar):not(#m-menu) {
    margin-left: 16px !important;
    margin-right: 16px !important;
  }
  body[data-tpl="phen"] p,
  body[data-tpl="phen"] li,
  body[data-tpl="phen"] td {
    font-size: 1.06rem !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }
  body[data-tpl="phen"] font { font-size: inherit !important; }
  body[data-tpl="phen"] h1, body[data-tpl="phen"] h2, body[data-tpl="phen"] h3 { line-height: 1.25; }
  body[data-tpl="phen"] table { width: 100% !important; }
  body[data-tpl="phen"] td { display: block; width: auto !important; }

  /* ---------- Mailing-list archives ---------- */
  body[data-tpl="archive"] { padding: 0 0 24px; font: 1rem/1.6 Arial, Helvetica, sans-serif; }
  body[data-tpl="archive"] table,
  body[data-tpl="archive"] tbody,
  body[data-tpl="archive"] tr,
  body[data-tpl="archive"] td,
  body[data-tpl="archive"] th {
    display: block;
    width: auto !important;
    max-width: 100% !important;
  }
  body[data-tpl="archive"] td { padding: 0 16px !important; }
  body[data-tpl="archive"] font { font-size: inherit !important; }
  body[data-tpl="archive"] p, body[data-tpl="archive"] li, body[data-tpl="archive"] dd { line-height: 1.6; }
  body[data-tpl="archive"] blockquote { margin: 8px 0 8px 4px; padding-left: 12px; border-left: 3px solid #c9a35a; }
  body[data-tpl="archive"] dl, body[data-tpl="archive"] dd { margin-left: 0; }

  /* ---------- Other pages: Books, Nature, Aesthetics, Religion, Gallery, ... ---------- */
  body[data-tpl="generic"] { padding: 0 0 24px; font-size: 17px; line-height: 1.55; }
  body[data-tpl="generic"] table,
  body[data-tpl="generic"] tbody,
  body[data-tpl="generic"] tr,
  body[data-tpl="generic"] td,
  body[data-tpl="generic"] th {
    display: block;
    width: auto !important;
    height: auto !important;
  }
  body[data-tpl="generic"] td, body[data-tpl="generic"] th { padding: 4px 16px !important; }
  body[data-tpl="generic"] > p,
  body[data-tpl="generic"] > blockquote,
  body[data-tpl="generic"] > ul,
  body[data-tpl="generic"] > ol,
  body[data-tpl="generic"] > h1, body[data-tpl="generic"] > h2,
  body[data-tpl="generic"] > h3, body[data-tpl="generic"] > h4,
  body[data-tpl="generic"] > div:not(#m-bar):not(#m-menu),
  body[data-tpl="generic"] > center { margin-left: 16px; margin-right: 16px; }
  body[data-tpl="generic"] p, body[data-tpl="generic"] li { text-align: left !important; line-height: 1.6; }
  body[data-tpl="generic"] font[size="1"], body[data-tpl="generic"] font[size="2"] { font-size: .95rem !important; }
  body[data-tpl="generic"] img[align] { float: none; display: block; margin: 12px auto; }
}