/* STC layout for phones, tablets and wide screens. Loaded AFTER main.css.
   Everything here is for the screen only: printing is not affected.
   To undo it, remove the <link> to this file from includes/header.php. */

/* The reCAPTCHA badge floats over the page (it sat on top of the vote buttons on phones).
   It is hidden here, and the footer carries the notice Google requires when it is hidden. */
.grecaptcha-badge { visibility: hidden; }
.stc-recaptcha-note { font-size: .75em; color: #a8a8a8 !important; padding-left: 1em; }
.stc-recaptcha-note a { color: #a8a8a8; text-decoration: underline; }

@media screen {

  /* ---------- 1. The title and buttons scroll with the page (they used to float over it) ---------- */
  .stc-filters { position: static !important; top: auto !important; margin-top: 0 !important; width: 100% !important; z-index: auto !important; }
  .stc-filter-buttons { margin: 0 auto; }
  .stc-filters .stc-program-h1 { font-size: 1.7em; margin: .6em 0 .3em; }
  .stc-filters-row-1 { width: 100% !important; max-width: 72em; margin: 0 auto !important; padding: 0 1em !important; }

  /* the three big buttons become one tidy, centred row */
  .stc-filters-row-1 > .row:not(.collapse) { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; gap: .5em; }
  .stc-filters-row-1 > .row:not(.collapse) > a { flex: 1 1 12em; max-width: 22em; width: auto !important; margin: 0 !important; padding: .6em 1em; font-size: .95em; border-width: .15em; color: #6b6b6b; }
  .stc-filters-row-1 > .row:not(.collapse) > #print-button { color: #fff; }

  /* the filter panel stays closed until the Filter button opens it */
  #filter.collapse:not(.show) { display: none; }

  /* ---------- 2. Results and map ---------- */
  .stc-left, .stc-print-left, .stc-low-left { margin-top: 1em !important; min-height: 0 !important; }
  .stc-body-h3, .stc-program-h1 { margin-left: auto; margin-right: auto; }
  .stc-h2 { font-size: 1.35em; margin: 1.2em 0 .2em; padding-left: .6em; border-left: .3em solid #1e6294; }

  /* stored text and links are easier to read a little darker */
  .stc-program-table, .stc-program-listing { color: #4d5a61; }
  .stc-program-listing a:link, .stc-program-listing a:visited, .stc-program-listing a:active, .stc-program-listing a:hover { color: #1e6294; font-weight: 600; }
  .stc-program-list-link:link, .stc-program-list-link:visited, .stc-program-list-link:active { color: #1e6294; }

  /* "Is this relevant? Votes: 6" and the two arrows stay on one line */
  .stc-votes-wrapper { display: flex; flex-wrap: nowrap; align-items: center; margin: .6em 0 !important; }
  .stc-votes-wrapper > .stc-votes { flex: 1 1 auto; max-width: none; width: auto; padding: 0; }
  .stc-votes-wrapper > .stc-vote { flex: 0 0 auto; max-width: none; width: auto; padding: 0 .5em; }

  /* the map stays in view beside the list while you scroll (it used to be pinned over the page) */
  @media (min-width: 768px) {
    .stc-left { width: 58%; }
    .stc-map { display: block !important; position: sticky !important; top: 4.5em !important; right: auto !important; width: 42% !important; align-self: flex-start; margin: 1em 0 0 0 !important; padding-left: 1em; }
    #map { height: calc(100vh - 7em) !important; min-height: 22em; }
  }
  @media (min-width: 992px) {
    .stc-left { width: 60%; }
    .stc-map { width: 40% !important; }
  }


  /* ---------- 2b. The Filters panel: a tidy card, label above each input ---------- */
  #filter.collapse.show { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8em 1.4em; width: 100%; max-width: 72em; margin: .6em auto !important; padding: .9em 1.1em; border: 1px solid #dde3e6; border-radius: .5em; background: #fafafa; }
  #filter > br { display: none; }
  #filter .stc-floating-label-wrapper { display: flex; flex-direction: column; position: static; flex: 1 1 16em; max-width: 28em; width: auto !important; margin: 0 !important; padding: 0; }
  #filter .stc-floating-label-wrapper > label { order: -1; position: static !important; top: auto !important; margin: 0 0 .2em 0 !important; background: none; font-size: .85em; }
  #filter .stc-floating-input, #filter .stc-floating-select { width: 100% !important; margin: 0 !important; }
  #filter .stc-label { order: 1; flex: 0 1 auto; width: auto; max-width: none; margin: 0; padding: 0; align-self: center; font-weight: 600; font-size: .95em; }
  #filter .switch { order: 2; flex: 0 0 auto; align-self: center; }
  #filter .stc-search-link, #filter .stc-return-link { order: 3; flex: 0 0 auto; width: auto !important; min-width: 12em; max-width: none !important; margin: 0 !important; }
  @media (max-width: 575.98px) {
    #filter .stc-floating-label-wrapper { max-width: none; }
    #filter .stc-search-link, #filter .stc-return-link { flex: 1 1 100%; }
  }

  /* ---------- 3. Tablets and phones: each program is a card ---------- */
  @media (max-width: 991.98px) {
    .stc-program-table-head { display: none !important; }
    .stc-body-row-program-head:has(> .stc-program-table-head) { display: none; }

    .stc-body-row-program { margin: .8em 0 !important; padding: .6em 1em; border: 1px solid #dde3e6 !important; border-radius: .6em; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
    .stc-body-row-program > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding: .35em 0; border-bottom: 0 !important; }
    .stc-body-row-program .stc-program-listing { font-size: 1.15em; font-weight: 700; padding-bottom: .5em; margin-bottom: .25em; border-bottom: 1px solid #e6ebed !important; }
    .stc-body-row-program .stc-program-listing a, .stc-body-row-program .stc-program-listing a:link, .stc-body-row-program .stc-program-listing a:visited,
    .stc-body-row-program .stc-program-listing a:hover, .stc-body-row-program .stc-program-listing a:active { color: #1e6294; font-weight: 700; }
    .stc-body-row-program .stc-program-list-link { color: #1e6294 !important; font-weight: 600; font-size: 1.1em; padding: .3em 0; display: inline-block; }
    .stc-body-row-program .stc-empty { display: none !important; }
    .stc-votes-wrapper { align-items: center; margin: .5em 0 !important; font-size: .9em; }
    .stc-vote { text-align: center; font-size: 1.6em; padding: .15em 0; }
  }

  /* ---------- 4. Phones: the map folds away until you ask for it ---------- */
  @media (max-width: 767.98px) {
    .stc-filters .stc-program-h1 { font-size: 1.4em; }
    .stc-filters-row-1 > .row:not(.collapse) > a { flex: 1 1 45%; max-width: none; }
    .stc-map { display: block !important; position: static !important; width: 100% !important; max-height: 0; overflow: hidden; order: -1; margin: 0 !important; padding: 0; transition: max-height .3s ease; }
    body.stc-show-map .stc-map { max-height: 60vh; margin: .5em 0 !important; }
    #map { height: 55vh !important; min-height: 16em; }
    .stc-left { width: 100% !important; padding: 0 !important; }
  }
  @media (min-width: 768px) { .stc-map-toggle { display: none !important; } }
}

/* ---------- Plain-language search box ---------- */
.stc-ai-search { max-width: 48em; margin: 1em auto; padding: 0 1em; text-align: left; }
.stc-ai-label { display: block; font-weight: 700; font-size: 1.15em; margin-bottom: .35em; color: #283c43; }
.stc-ai-row { display: flex; gap: .5em; }
.stc-ai-input { flex: 1 1 auto; min-width: 0; font-size: 1.1em; padding: .7em .9em; border: .15em solid #1e6294; border-radius: .4em; background: #fff; color: #283c43; }
.stc-ai-input:focus { outline: .2em solid #cc3827; outline-offset: 1px; }
.stc-ai-button { flex: 0 0 auto; font-size: 1.1em; font-weight: 700; padding: .7em 1.5em; border: 0; border-radius: .4em; background: #1e6294; color: #fff; cursor: pointer; }
.stc-ai-button:hover, .stc-ai-button:focus { background: #cc3827; }
.stc-ai-button[disabled] { opacity: .6; cursor: wait; }
.stc-ai-hint { font-size: .85em; color: #5f6b73; margin: .45em 0 0; }
.stc-ai-status { min-height: 1.4em; margin: .35em 0 0; font-weight: 600; color: #283c43; }
.stc-ai-crisis, .stc-crisis-banner { margin: .6em 0; padding: .8em 1em; border: .2em solid #cc3827; border-radius: .5em; background: #fff4f2; color: #283c43; }
.stc-ai-crisis[hidden] { display: none; }
.stc-ai-crisis ul, .stc-crisis-banner ul { margin: .4em 0 0; padding-left: 1.2em; }
.stc-ai-crisis a, .stc-crisis-banner a { color: #a02a1c; font-weight: 700; }
.stc-crisis-banner { max-width: 48em; margin: 1em auto; text-align: left; }
/* on the dark photo banner of the home page */
.stc-ai-hero { max-width: 44em; margin: 1.5em auto; }
.stc-ai-hero .stc-ai-label, .stc-ai-hero .stc-ai-hint, .stc-ai-hero .stc-ai-status { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.75); }
.stc-ai-hero .stc-ai-button { background: #cc3827; }
.stc-ai-hero .stc-ai-button:hover, .stc-ai-hero .stc-ai-button:focus { background: #1e6294; }
@media (max-width: 575.98px) {
  .stc-ai-row { flex-direction: column; }
  .stc-ai-button { width: 100%; }
}

/* ---------- Plain-language search results ---------- */
.stc-find-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; margin: .6em 0; }
.stc-chip { display: inline-block; padding: .25em .8em; border-radius: 1em; background: #e8f0f6; color: #1e6294; font-size: .9em; font-weight: 600; }
.stc-chip-place { background: #f3efe6; color: #6b5a2e; }
.stc-find-note, .stc-find-count { text-align: center; color: #5f6b73; margin: .4em 0; }
.stc-find-empty { padding: 1em 0; }
.stc-match-tags { margin-top: .4em; }
.stc-tag { display: inline-block; margin: .15em .3em .15em 0; padding: .1em .6em; border-radius: .8em; background: #e8f0f6; color: #1e6294; font-size: .75em; font-weight: 600; }