/* ---------------------------------------------------------------------------
   Responsive layer.

   The site is a port of a Drupal 7 theme built for one width: regstra_index.css
   sets `#page-wrapper { width: 1000px }` with no media query, so a phone laid
   the page out at 1000px and scaled it down — the viewport meta was present and
   had nothing to work with.

   The header is the hard part. On desktop the menu and the whole search form are
   absolutely positioned ON TOP of a 360px banner image (menu at top:57px, search
   at top:145px). That cannot reflow, so below the tablet breakpoint this file
   returns those regions to normal flow, where the DOM order — logo, banner,
   menu, search, content — already reads correctly.

   Loaded last, after modern.css and viz.css, so it can override both. Nothing in
   the original Drupal stylesheets is edited.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. Fluid below the design width. The header still works here: the menu is
   width:96% and the search form's widgets are percentage-based, so they shrink
   with the wrapper down to about the point the menu stops fitting on one row.
   =========================================================================== */
@media (max-width: 1040px) {
  #page-wrapper {
    width: 100%;
    max-width: 1000px;
    box-sizing: border-box;      /* the phone rule adds padding; without this
                                    100% + 20px made the wrapper wider than the
                                    viewport and reintroduced the overflow */
  }
  /* The branding logo is a 1200x176 image; unconstrained it sets the page width
     on its own. Constrained here rather than left to overflow:hidden to clip. */
  .region-branding #logo,
  .region-branding #logo img {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
  }
  .region-branding { overflow: hidden; }
  html, body { overflow-x: hidden; }
}

/* ===========================================================================
   2. Tablet and phone: take the header out of absolute positioning.
   =========================================================================== */
@media (max-width: 900px) {

  /* --- the header regions return to normal flow, in DOM order --- */
  .region-main-menu,
  .front .region-main-menu,
  .region-search-keyword,
  .front .region-search-keyword,
  .region-search,
  .page-database .region-search {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: auto !important;
    padding-left: 0 !important;
  }

  /* The banner was a 360px stage for the overlaid controls. With nothing on
     top of it, it only has to read as a header band. */
  #banner,
  .front #banner,
  .page-database #banner {
    height: 150px !important;
    background-size: cover !important;
    background-position: center 35% !important;
    margin-bottom: 0;
  }

  /* --- the menu: a wrapping row, no floated pair --- */
  .region-main-menu {
    background: #1c1a18;
    border-top: 0;
    border-bottom: 0;
    margin: 0 0 .6em;
  }
  #block-system-main-menu { background: transparent; }
  #block-system-main-menu .content ul.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2px;
    padding: .35em .4em !important;
  }
  /* Undo the desktop rule that floats the last two items to the right at a
     smaller size — in a wrapping row it puts them out of order. */
  #block-system-main-menu .content li,
  #block-system-main-menu .content li:nth-last-child(-n+2),
  #block-system-main-menu .content li:nth-last-child(2) {
    float: none !important;
    display: inline-block;
    margin: 0 !important;
    font-size: 1em !important;
    line-height: 1.9 !important;
  }
  #block-system-main-menu a {
    display: block;
    padding: .25em .6em !important;
    color: #fff !important;
  }
  #block-system-main-menu a:hover,
  #block-system-main-menu a:focus,
  #block-system-main-menu a.active { color: #ffb4a3 !important; }

  /* --- the search form: one field per row --- */
  .region-search-keyword {
    background: #edefed;
    padding: .8em .8em .4em !important;
    margin-bottom: 1em;
  }
  #block-views-exp-main-page { background: transparent !important; }
  .views-exposed-widgets { display: block; }
  .views-exposed-widgets .views-exposed-widget,
  .views-exposed-widgets .views-exposed-widget:not(#edit-search-api-views-fulltext-wrapper) {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 .55em !important;
    padding: 0 !important;
  }
  .views-exposed-widgets .views-exposed-widget input[type="text"],
  .views-exposed-widgets .views-exposed-widget:not(#edit-search-api-views-fulltext-wrapper) input {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 16px;            /* 16px stops iOS zooming the page on focus */
  }
  /* Labels are absolutely positioned chips on desktop; make them plain labels. */
  .views-exposed-widgets .views-exposed-widget label,
  #edit-field-rrr-wrapper label {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    margin: 0 0 .18em !important;
    background: none !important;
    color: #444 !important;
    font-size: 12.5px !important;
    font-weight: bold;
    padding: 0 !important;
  }
  /* Submit buttons: full width, and never the transparent-text icon trick. */
  .views-exposed-widgets .views-submit-button,
  #edit-field-rrr-wrapper .rrr-submit {
    width: 100% !important;
    float: none !important;
    margin: 0 0 .9em !important;
  }
  .views-exposed-widget input[type="submit"],
  #edit-field-rrr-wrapper .rrr-submit input {
    width: 100% !important;
    height: auto !important;
    color: #fff !important;
    background-image: none !important;
    background-color: #AA1A02 !important;
    border: 0 !important;
    border-radius: 3px;
    padding: .6em 1em !important;
    font-size: 15px;
    font-weight: bold;
  }

  /* --- the RRR row puts its submit button BEFORE the input in the DOM (the
         desktop layout floats it right, so order did not matter). Stacked, that
         reads button-then-field, so put it back in reading order. --- */
  /* NOTE the selector weight: the stacking rule above uses
     `:not(#edit-search-api-views-fulltext-wrapper)`, and :not() carries its
     argument's specificity — so that rule is (1,2,0) and an id-only selector
     here would lose to it even with !important. Match its weight. */
  .views-exposed-widgets .views-exposed-widget#edit-field-rrr-wrapper {
    display: flex !important;
    flex-direction: column;
  }
  #edit-field-rrr-wrapper label      { order: 1; }
  #edit-field-rrr-wrapper .views-widget { order: 2; }
  #edit-field-rrr-wrapper .rrr-submit   { order: 3; }

  /* --- in-form facet blocks: on desktop the <h2> is opacity:0 and the list is
         revealed on hover. There is no hover on touch, so the block was 33px of
         invisible dead space with its filters unreachable. Turn the heading into
         a tappable disclosure instead. --- */
  .views-exposed-widget .block-facetapi { margin: .15em 0 0; }
  .views-exposed-widget .block-facetapi > h2 {
    opacity: 1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: .45em .7em !important;
    font-size: 13px !important;
    font-weight: bold;
    text-align: left !important;
    color: #AA1A02 !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 3px;
    cursor: pointer;
  }
  .views-exposed-widget .block-facetapi > h2::after {
    content: " ▾";
    float: right;
    color: #888;
  }
  .views-exposed-widget .block-facetapi.is-open > h2::after { content: " ▴"; }
  .views-exposed-widget .block-facetapi.is-open > .content {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: 260px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-top: 0;
    padding: .4em .7em;
    font-size: 14px;
  }
  .views-exposed-widget .block-facetapi.is-open > .content ul { margin: 0; padding: 0; list-style: none; }
  .views-exposed-widget .block-facetapi.is-open > .content li { padding: .3em 0; }
  /* the block should not reveal on hover as well — that fights the toggle */
  .views-exposed-widget .block-facetapi:hover > .content { display: none; }
  .views-exposed-widget .block-facetapi.is-open:hover > .content { display: block !important; }

  /* --- facets stack --- */
  .region-search { display: block !important; padding-bottom: 1em; }
  .region-search .block { width: auto !important; float: none !important; margin: 0 0 .5em; }

  /* --- front page columns stack --- */
  #front2col {
    display: block !important;
    margin-bottom: 2em !important;
  }
  #front2col .region {
    width: auto !important;
    margin: 0 0 1em;
    /* the wp_footer script clamps these to a fixed pixel height for the
       desktop marquee; on one column that would crop the text */
    height: auto !important;
    max-height: none !important;
  }
  /* The What's New marquee only makes sense in a fixed-height box. Stacked,
     let it simply be a list. */
  #block-block-5 { overflow: visible !important; height: auto !important; }
  #block-block-5 .content { animation: none !important; transform: none !important; }

  /* --- search results: label above value, not beside --- */
  .searchdb .views-field { display: block; }
  .searchdb .views-label {
    display: block !important;
    width: auto !important;
    float: none !important;
    text-align: left !important;
    padding: .35em .5em 0 !important;
  }
  .searchdb .field-content {
    display: block !important;
    width: auto !important;
    float: none !important;
    padding: 0 .5em .35em !important;
  }

  /* --- the glossary is a two-column term/definition list: STACK it rather than
         scroll it sideways. Making the table `display:block; overflow-x:auto`
         left the 30% term column 321px wide on a 355px screen and pushed every
         definition off-screen behind a horizontal scrollbar. --- */
  table.glossary-table,
  table.glossary-table tbody,
  table.glossary-table tr,
  table.glossary-table th.gloss-term,
  table.glossary-table td.gloss-def {
    display: block;
    width: auto !important;
  }
  table.glossary-table tr {
    padding: .55em 0;
    border-bottom: 1px solid #ddd;
  }
  table.glossary-table th.gloss-term {
    font-weight: bold;
    border-bottom: 0;
    padding: 0 .2em .15em !important;
  }
  table.glossary-table td.gloss-def {
    border-bottom: 0;
    padding: 0 .2em !important;
  }
  /* the striping is per-row, and a stacked row is one block */
  table.glossary-table tr:nth-child(odd) { background: #f4f5f4; }

  /* Anything genuinely wide still scrolls in its own box, not the page. */
  .bibliography table,
  .cr-ins__scroll { display: block; overflow-x: auto; }

  /* A table that scrolls sideways with no cue just looks truncated. */
  .cr-ins__swipe {
    display: block;
    margin: 0 0 .35em;
    font-size: 12px;
    font-style: italic;
    color: #8a7f79;
  }
  /* and a fade at the right edge, so the cut is obviously a cut */
  .cr-ins__scroll {
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 22px 100% no-repeat,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 22px 100% no-repeat;
    background-attachment: local, local;
  }

  /* --- Contact Us --- */
  /* Two rules (`#block-block-8 [href*="facebook"]` in regstra_index.css and
     `#block-block-8 p > span` in style.css) push the email address and the
     Facebook link 248px to the right to sit them beside the form on a 1000px
     page. On a phone that puts them off the side of the screen. */
  #block-block-8 [href*="facebook"],
  #block-block-8 p > span,
  #webform-component-facebook--email p > span {
    position: static !important;
    left: auto !important;
  }

  /* Drupal webform fields are sized by their cols/size attributes, so the
     message box came out 147px wide on a 355px screen. */
  .webform-client-form .form-item,
  .webform-client-form .form-textarea-wrapper,
  .webform-client-form .form-text,
  .webform-client-form .form-email,
  .webform-client-form .form-textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .webform-client-form .form-text,
  .webform-client-form .form-email,
  .webform-client-form .form-textarea {
    font-size: 16px;            /* again: below 16px iOS zooms on focus */
    padding: .5em .6em;
  }
  .webform-client-form .form-textarea { min-height: 9em; resize: vertical; }
  .webform-client-form label { display: block; font-weight: bold; margin-bottom: .25em; }
  .webform-client-form .form-submit {
    width: auto !important;
    min-width: 150px;
    padding: .6em 1.4em;
    font-size: 15px;
  }

  /* --- footer --- */
  .region-footermenu ul.menu {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px;
  }
  #block-menu-block-1 .content li,
  #block-menu-block-1 .content li:nth-last-child(-n+2),
  #block-menu-block-1 .content li:nth-last-child(2) {
    float: none !important;
    display: inline-block;
  }
  #block-block-2 p,
  #block-block-2 p:last-child { font-size: 13.5px !important; text-align: left !important; }
  #block-block-2 span[style*="float"] { float: none !important; display: block; margin-top: .4em; }

  /* --- the charter watermarks are decorative and cost bandwidth --- */
  #page { background-image: none !important; }

  /* --- inner-page furniture --- */
  #stamp { display: none; }
  .region-sponsorship img { max-width: 100%; height: auto; }
}

/* ===========================================================================
   3. Phone.
   =========================================================================== */
@media (max-width: 560px) {
  #page-wrapper { padding: 0 10px; }
  #banner, .front #banner, .page-database #banner { height: 110px !important; }

  #block-system-main-menu .content ul.menu { gap: 0; }
  #block-system-main-menu a { padding: .3em .45em !important; font-size: 14px; }

  /* Long entry text and citation buttons need room */
  .cr-cite-set { gap: 5px; }
  .cr-cbtn { font-size: 11.5px; padding: .25em .7em; }

  .cr-cite__panel { padding: 20px 16px 22px; max-height: 90vh; }
  .cr-cite__panel h2 { font-size: 21px; }

  /* Research pages */
  .cr-viz__controls { gap: .5em .8em; }
  .cr-viz__legend { margin-left: 0; }
  .cr-viz__field input[type="search"] { min-width: 0; width: 100%; }
  .cr-ins__claim { font-size: 20px; }
  .rq-body { font-size: 16px; }

  /* Anything that still insists on a fixed width */
  img, svg, iframe, video { max-width: 100%; height: auto; }

  /* Insights tables: 4-5 columns of real data that cannot stack usefully, so
     they scroll in their own box. Tighten the type so more of it fits before a
     reader has to scroll at all. */
  .cr-ins__table { font-size: 13px; min-width: 460px; }
  .cr-ins__table th { padding-right: 9px; }
  .cr-ins__table td { padding: 7px 9px 7px 0; }
}

/* ===========================================================================
   4. Everywhere: images and media never force the page wider.
   =========================================================================== */
img { max-width: 100%; }
@media (max-width: 900px) {
  img[style*="width"], img[width] { max-width: 100% !important; height: auto !important; }
  .field-name-body img,
  .perticipant img { max-width: 100% !important; height: auto !important; }
  /* floated portraits go full width rather than squeezing the text */
  .page-founders .field-name-body .cr-profile-link,
  .page-founders .field-name-body img {
    float: none !important;
    display: block;
    margin: .6em auto 1.2em !important;
  }
}