/*
 * OutHistory — mobile / small-screen layout for the outhistory-new theme.
 * Loaded AFTER css/style.css. Screens wider than 1220px are unaffected.
 * To roll back: remove the <link> to this file from common/header.php.
 * Based on Greyson Fowler's media-query proposal (Sept 2026).
 */

/* Media never wider than its container, at any screen size */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }
table { max-width: 100%; }

/* ---------- Below the full desktop width: let the page shrink ---------- */
@media (max-width: 1220px) {
  #paper { width: auto; max-width: 1200px; }
  #contents { width: auto; margin: 20px 16px; }
  #banner { width: auto; height: auto; }
  img#logo { width: 100%; max-width: 800px; height: auto; box-sizing: border-box; }
  #menu-main::after, #contents::after, #banner::after { content: ""; display: table; clear: both; }
  #contents img.full { width: 100%; }
  /* Embedded YouTube/Vimeo players keep their shape as they shrink */
  iframe[src*="youtube"], iframe[src*="vimeo"] { height: auto; aspect-ratio: 16 / 9; }
}

/* ---------- Small laptops / landscape tablets: keep the desktop header on one row ---------- */
@media (min-width: 801px) and (max-width: 1220px) {
  img#logo { max-width: calc(100% - 260px); } /* leave room for the search box */
  .navbar a, .dropdown .dropbtn { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Exhibit lists (Featured, Browse Exhibits) ----------
   The theme cuts each entry off at 152px, which chops titles once the columns narrow.
   Show the full title and end the description neatly after 3 lines instead. */
@media (max-width: 1220px) {
  #contents .exhibit-list .list li { max-height: none; }
  #contents .exhibit-list .list li p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    padding-left: 0; margin-left: 0; /* the theme's 106px indent would add to the image width */
  }
}
@media (max-width: 900px) {
  #contents .exhibit-list ul.list { width: 100%; float: none; box-sizing: border-box; } /* one column; the theme's 24px right padding made it 14px too wide */
}

/* ---------- Tablets and phones ---------- */
@media (max-width: 800px) {
  /* Header: search/top links sit above the logo instead of floating over it */
  #menu-top { float: none; height: auto; }
  #menu-top ul { float: none; padding: 8px 12px 0; height: auto; text-align: right; }
  #menu-top #query { width: 140px; }
  #logo { float: none; padding: 8px 12px 0; }
  img#logo { margin-top: 0; } /* desktop pulls the logo up under the search bar (-35px) */

  /* Main menu: smaller buttons that wrap onto extra lines */
  #menu-main { height: auto; }
  .navbar a, .dropdown .dropbtn { padding: 6px 12px; height: auto; font-size: 15px; }
  #menu-main #social { float: none; display: block; clear: both; padding: 4px 12px; }

  /* Two-column areas become one column */
  .col-left, .col-right { width: auto; float: none; }
  div.birthday-month { width: 50%; }

  /* Boxes that were fixed-width side panels go full width */
  #simple-pages-breadcrumbs,
  #contents .browse-prev-next-box,
  #contents .browse-metadata-box,
  #contents .metadata-box,
  #exhibit .item-prev-next-box,
  .quick-search ul.pagination {
    width: auto; float: none; margin: 0 0 12px;
  }

  /* Exhibit page navigation stacks */
  #exhibit .exhibit-nav-prev,
  #exhibit .exhibit-nav-contents,
  #exhibit .exhibit-nav-next { width: auto; float: none; text-align: left; }
  #exhibit #itemfiles img { width: 100%; }

  /* Forms fit the screen */
  #advanced-search-form #keyword-search,
  #contributor-name, #contributor-email,
  #ContributorFields-1,
  #contribution-type-form textarea,
  #contribution-confirm-submit,
  #find-on-page-bar input[type="search"] { width: 100%; max-width: 100%; box-sizing: border-box; }
}

/* ---------- Hamburger menu (needs js/mobile.js; without it the wrapped menu above is used) ---------- */
.menu-toggle, .submenu-toggle { display: none; }

@media (max-width: 800px) {
  .js-mobile-nav #menu-main { position: relative; height: auto; padding: 0; }
  .js-mobile-nav .menu-toggle {
    display: inline-block; background: none; border: 0; color: #fff; cursor: pointer;
    font-family: Miller, Times, serif; font-weight: 700; font-size: 16px; padding: 10px 16px;
  }
  .menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after {
    display: inline-block; width: 20px; height: 2px; background: #fff; vertical-align: middle;
  }
  .menu-toggle-icon { position: relative; margin-right: 6px; }
  .menu-toggle-icon::before, .menu-toggle-icon::after { content: ""; position: absolute; left: 0; }
  .menu-toggle-icon::before { top: -6px; }
  .menu-toggle-icon::after { top: 6px; }
  .js-mobile-nav #menu-main #social { position: absolute; top: 0; right: 0; float: none; padding: 9px 12px 0; }

  /* Items hidden until "Menu" is tapped, then one per row */
  .js-mobile-nav #menu-main > a,
  .js-mobile-nav #menu-main > .dropdown { display: none; }
  .js-mobile-nav #menu-main.is-open > a,
  .js-mobile-nav #menu-main.is-open > .dropdown { display: block; float: none; }
  .js-mobile-nav #menu-main.is-open > a,
  .js-mobile-nav #menu-main.is-open .dropbtn {
    display: block; width: 100%; box-sizing: border-box; float: none; height: auto;
    padding: 10px 16px; text-align: left; font-size: 16px; line-height: 1.4;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }
  /* Arrow at the right of About/Participate/Search/Donate opens the sub-links;
     tapping the name itself still goes to that page */
  .js-mobile-nav #menu-main.is-open .dropdown { position: relative; }
  .js-mobile-nav #menu-main.is-open .dropbtn { padding-right: 60px; }
  .js-mobile-nav #menu-main.is-open .submenu-toggle {
    display: block; position: absolute; top: 0; right: 0; width: 52px; height: 44px;
    background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff; font-size: 18px; cursor: pointer;
  }
  .js-mobile-nav .dropdown.is-open .submenu-toggle span { display: inline-block; transform: rotate(90deg); }

  /* Dropdowns open on tap, not hover; same pink-on-white style as desktop */
  .js-mobile-nav .dropdown:hover .dropdown-content { display: none; }
  .js-mobile-nav .dropdown.is-open .dropdown-content { display: block; position: static; min-width: 0; box-shadow: none; }
  .js-mobile-nav .dropdown-content a { float: none; height: auto; padding: 9px 16px 9px 32px; line-height: 1.4; }
}

/* ---------- Long text and browse-by tables on small screens ---------- */
@media (max-width: 800px) {
  /* Long web addresses typed as link text (e.g. fellowship pages) can't otherwise wrap */
  #contents { overflow-wrap: break-word; }
  #contents a { overflow-wrap: anywhere; }
}
@media (max-width: 600px) {
  /* People / Places / Subject / Time Period pages: the term list is a 1-row, 4-column table
     (~630px wide). Stack the four columns one under another. */
  #outhistory-vocab-list,
  #outhistory-vocab-list tbody,
  #outhistory-vocab-list tr,
  #outhistory-vocab-list td { display: block; width: auto; }
}

/* ---------- Small tablets and phones: exhibit images above their text ---------- */
@media (max-width: 600px) {
  /* Exhibit Builder caps side images at 40% width, too small on a phone */
  .exhibit-block .exhibit-items.left,
  .exhibit-block .exhibit-items.right {
    float: none; max-width: 100%; width: auto; margin: 0 auto 12px;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 480px) {
  #contents { margin: 12px 10px; }
  #contents h2 { font-size: 150%; }
  #contents h3 { font-size: 125%; }
  div.birthday-month { width: 100%; float: none; }
}

/* ---------- Image captions: all styled like the <h3> captions (all screen sizes) ----------
   Exhibit captions were typed as <p>, <h3>, <h2>, <h1>, <div> or plain text, so they looked
   different from exhibit to exhibit. Marc wants them all to look like the <h3> ones
   (WindsorLC bold, 140% of the 11px caption text, black, centered). No caption text is changed. */
#exhibit .exhibit-item-caption {
  font-family: WindsorLC, serif; font-weight: 700; font-size: 15.4px; line-height: 1.1;
  color: #000; text-align: center;
}
/* "#exhibit #primary" matches the theme's exhibit-title rule, which would otherwise enlarge <h1> captions */
/* Any depth, because some captions were pasted with extra wrappers, e.g. Red Scare, Lavender Song:
   <div class="exhibit-block layout-file"><h1 class="exhibit-items fullsize">…</h1></div> */
#exhibit #primary .exhibit-item-caption :is(p, div, section, strong, h1, h2, h3, h4, h5, h6) {
  font: inherit; color: inherit; text-align: inherit;
}
#exhibit #primary .exhibit-item-caption :is(p, h1, h2, h3, h4, h5, h6) { margin: 0; padding: 0 0 10px; }
/* Pasted Exhibit Builder classes inside a caption would otherwise make it a full-width image block */
#exhibit #primary .exhibit-item-caption :is(.exhibit-block, .exhibit-items) {
  float: none; width: auto; max-width: 100%; margin: 0; padding: 0; border: 0;
}

/* ---------- Carousels on phones: show the slides as a simple list ----------
   jCarousel has no swipe support, tiny arrows, and reserves the height of its tallest slide,
   so on small screens each slide (image + caption) is shown one after another instead. */
@media (max-width: 600px) {
  .layout-carousel .jcarousel { overflow: visible; height: auto; }
  .layout-carousel .jcarousel > ul {
    display: block; width: auto !important; left: 0 !important; transform: none !important;
    height: auto; padding: 0 !important;
  }
  .layout-carousel .jcarousel > ul > li { float: none; width: auto !important; margin: 0 0 24px; }
  .layout-carousel .jcarousel .slide-meta { width: auto !important; padding: 8px 0 0 !important; }
  .layout-carousel .jcarousel-control-prev,
  .layout-carousel .jcarousel-control-next,
  .layout-carousel .jcarousel-pagination { display: none; }
}