/*
 * What every reworked section of the old site needs to fit a phone and a
 * desktop: the wrapper, the side column and the footer they all share, and
 * content that stays within the width and reads on a phone. Loaded by
 * old/header.php before the section's own stylesheet, if it has one (see
 * old/sn-sections.php). Everything here applies below 1024px: a desktop
 * stays exactly as it was.
 */

@media (max-width: 1023px) {
  /* The old wrapper column is 100% wide plus 15px margins on both sides;
     below the desktop layout it takes the room there is. (On a desktop it
     stays as it is: the text column and the side column need that width.) */
  #page > .columns { float: none; width: auto; }

  /* The text column and the side column one under the other. */
  #main, #content, #sidebar, .sidebar { float: none; width: auto; max-width: 100%; }

  /* The Facebook box starts at 1000px until Facebook sizes it. */
  .fb-page, .fb-page span, .fb-page iframe { max-width: 100% !important; }

  /* The footer and its bands take the width there is. */
  #pagefooter { float: none; width: auto; margin-left: 0; margin-right: 0; }
  #bookmarks-inner, #support-inner { width: auto; max-width: 100%; box-sizing: border-box; }
}

@media (max-width: 1023px) {
  /* Nothing in the text column wider than the screen. (#main holds the
     column on every template; not every page has a #content in it.) */
  #main img, #main iframe, #main video { max-width: 100%; height: auto; }
  #main input, #main select, #main textarea { max-width: 100%; box-sizing: border-box; }
  /* A fieldset is as wide as its widest content unless told otherwise. */
  #main fieldset { min-width: 0; }
  #main table { max-width: 100%; }
}

@media (max-width: 767px) {
  /* Page titles at a size that keeps a long word on one line. */
  #main h1.page-title { font-size: 32px; line-height: 1.15; }

  /* Text at a size that reads on a phone; the old pages set 13px. */
  #main p, #main li, #main td, #main th, #main label, #main dd, #main dt { font-size: 16px; line-height: 1.45; }
  #main p a, #main li a, #main td a { font-size: inherit; }

  /* Blocks set side by side in narrow columns (the trivia scoreboards, the
     E-cards categories) sit one under the other, each under its own title
     (the titles stand together in a bar above the columns). */
  #main .interactief-box.two-column { display: flex; flex-direction: column; }
  #main .interactief-box.two-column > .interactief-headers,
  #main .interactief-box.two-column > .interactief-columns { display: contents; }
  #main .interactief-box.two-column .clear { display: none; }
  #main .interactief-box.two-column .first-title { order: 1; }
  #main .interactief-box.two-column .first-column { order: 2; }
  #main .interactief-box.two-column .second-title { order: 3; }
  #main .interactief-box.two-column .second-column { order: 4; }
  #main .interactief-box.two-column .title { float: none; width: auto; }
  #main .interactief-box.two-column .interactief-column { float: none; width: auto; margin-bottom: 16px; border: 0; }
  #main .interactief-column .quiz-title-padding-reset { float: none; width: auto; }

  /* A table with more columns than a phone has room for scrolls within its
     own box, so the page itself never moves sideways. */
  #main table { display: block; overflow-x: auto; }

  /* Old blocks with a fixed width in pixels (padding included), and long
     words or addresses, stay within the column. */
  #main * { max-width: 100%; box-sizing: border-box; }
  #main { overflow-wrap: break-word; }
  /* Text printed before the page itself (PHP notices on some old pages)
     wraps as well. */
  body { overflow-wrap: break-word; }
  /* Content pictures carry 10px margins on both sides (detailpagina.css). */
  #main img { max-width: calc(100% - 20px); }

  /* A picture of the newsletter with its field placed over it by fixed
     margins: it cannot fit a phone, and the header links to the magazine. */
  .nb-inschrijven-footer { display: none; }
}