/* Service-specific styles for Find an emergency shelter.
   Built on top of dist/styles.css using the alpha.gov.bb design tokens. */

.service-main {
  padding-block: var(--spacing-m);
}

.service-meta {
  color: var(--color-text-muted);
  margin-block: var(--spacing-xs) var(--spacing-s);
}

.service-lede {
  margin-bottom: var(--spacing-m);
  max-width: 48rem;
}

.service-divider {
  border: 0;
  border-top: 1px solid var(--color-grey-00);
  margin-block: var(--spacing-m);
  max-width: 48rem;
}

/* Source line shown at the bottom of the page, above the footer. */
.service-source {
  margin-top: var(--spacing-l);
  padding-top: var(--spacing-m);
  border-top: 1px solid var(--color-grey-00);
  color: var(--color-text-muted);
  max-width: 48rem;
}

.service-section {
  margin-bottom: var(--spacing-l);
  max-width: 48rem;
}

.service-section > h2 {
  margin-bottom: var(--spacing-s);
}

.service-section > h3 {
  margin-block: var(--spacing-m) var(--spacing-s);
}

.service-section p + p,
.service-section .govbb-list + p,
.service-section p + .govbb-list {
  margin-top: var(--spacing-s);
}

/* Back link above the H1 on inner pages */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-block: var(--spacing-s);
}
.back-link::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-right: 8px solid currentColor;
  border-left-width: 0;
}

/* Guidance page contents nav */
.guidance-contents {
  background: var(--color-teal-10);
  border-left: 8px solid var(--color-teal-00);
  padding: var(--spacing-s) var(--spacing-xm);
  margin-block: var(--spacing-m);
  max-width: 48rem;
}
.guidance-contents > h2 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin-bottom: var(--spacing-xs);
}

/* Inset callout for "How this service works" and similar info notices */
.service-callout {
  background: var(--color-blue-10);
  border-left: 8px solid var(--color-blue-100);
  padding: var(--spacing-s) var(--spacing-xm);
  margin-block: var(--spacing-m);
}
.service-callout > h2 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin-bottom: var(--spacing-xs);
}

/* Finder layout */
.finder__grid {
  display: grid;
  gap: var(--spacing-m);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .finder__grid {
    grid-template-columns: 18rem 1fr;
  }
}
.finder__filters {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
  padding: var(--spacing-m);
  background: var(--color-blue-10);
  border-radius: var(--radius-sm);
  align-self: start;
}
/* Only stick the filters on desktop, where there's a side-by-side grid.
   On mobile the filters sit above the results and must scroll out of view.
   On desktop the panel is also scrollable independently of the page so
   shorter viewports can reach all controls (max-height = visible viewport
   minus a small offset). */
@media (min-width: 1024px) {
  .finder__filters {
    position: sticky;
    top: var(--spacing-s);
    max-height: calc(100vh - 2 * var(--spacing-s));
    overflow-y: auto;
  }
}
.finder__filters h2 {
  margin: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
.finder__count {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-s);
}
.finder__list {
  display: grid;
  gap: var(--spacing-s);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .finder__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Shelter card */
.shelter {
  padding: var(--spacing-s) var(--spacing-xm);
  border: 2px solid var(--color-grey-00);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.shelter__name {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.shelter__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
}
.shelter__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
}
.tag {
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-bold);
  padding: .125rem .5rem;
  border-radius: var(--radius-sm);
  background: var(--color-grey-00);
  color: var(--color-text);
}
/* Category tags carry a short text prefix so the distinction reads even
   if you can't tell the colours apart (deuteranopia / yellow vs blue). */
.tag--cat1 { background: var(--color-yellow-40); }
.tag--cat1::before { content: "① "; font-weight: 700; }
.tag--cat2 { background: var(--color-blue-10); }
.tag--cat2::before { content: "② "; font-weight: 700; }
.tag--access { background: var(--color-teal-40); }
.tag--water { background: var(--color-green-40); }
.tag--public { background: var(--color-grey-00); }
.tag--private { background: var(--color-pink-10); }

/* Warning tag — distinct outlined treatment so it can't be confused with
   a positive amenity at a glance. */
.tag--warning {
  background: var(--color-background);
  color: var(--color-red-00);
  border: 1.5px solid var(--color-red-00);
  padding-block: 0;
}

/* Activation status — every card shows this. Default is "Not currently
   open". A live DEM feed would flip the class to shelter__status--open. */
.shelter__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-caption-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 var(--spacing-xs) 0;
  padding: 3px 10px;
  border-radius: 999px;
}
.shelter__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.shelter__status--closed {
  background: var(--color-grey-00);
  color: var(--color-text);
}
.shelter__status--closed .shelter__status-dot {
  background: var(--color-mid-grey-00);
}
.shelter__status--open {
  background: var(--color-green-10);
  color: var(--color-green-00);
}
.shelter__status--open .shelter__status-dot {
  background: var(--color-green-00);
}

/* Eligibility restriction (Women & Children only, etc.) — critical info
   styled prominently so it can't be missed. */
.shelter__restriction {
  margin: 0;
  padding: 6px 10px;
  background: var(--color-red-10);
  border-left: 4px solid var(--color-red-00);
  color: var(--color-red-00);
  font-size: var(--font-size-caption);
  border-radius: 2px;
}
.shelter--restricted {
  border-color: var(--color-red-00);
}

.shelter__link {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.shelter__link:hover {
  color: var(--color-link-hover);
  background-color: var(--color-link-hover-bg);
}
.shelter__link:focus-visible,
.shelter__link:active {
  color: var(--color-link-active);
  background-color: var(--color-link-active-bg);
  outline: none;
}
.shelter__notes {
  font-size: var(--font-size-caption);
  color: var(--color-text-muted);
  font-style: italic;
}

/* OSM-derived address line on each shelter card. Best-effort: some
   shelters didn't get a confident geocode and won't show this line. */
.shelter__address {
  margin: 0;
  font-size: var(--font-size-caption);
  color: var(--color-text);
}
.shelter__address::before {
  content: "📍 ";
}

/* Get-directions link at the foot of each card — separates "where it is"
   from "how to get there". */
.shelter__actions {
  margin: 0;
  margin-top: var(--spacing-xxs);
  font-size: var(--font-size-caption);
}

/* Sort dropdown above the result list — separate from the filter
   sidebar so users don't confuse narrowing with ordering. */
.finder__sort {
  display: flex;
  align-items: center;
  gap: var(--spacing-s);
  margin-bottom: var(--spacing-s);
  flex-wrap: wrap;
}
.finder__sort > .govbb-label {
  margin: 0;
}
.finder__sort > .govbb-select-wrapper {
  width: auto;
  flex: 1;
  max-width: 22rem;
}

/* Distance from the user's location, shown when they enable geolocation. */
.shelter__distance {
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--color-teal-00);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.shelter__distance-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* "Use my location" button — sits at the top of the filters. */
.use-location-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
}
.use-location-btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.shelter__empty {
  grid-column: 1 / -1;
  padding: var(--spacing-m);
  text-align: center;
  border: 2px dashed var(--color-grey-00);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
}
.shelter__empty p {
  margin: 0;
}
.shelter__empty p + p {
  margin-top: var(--spacing-xs);
}

/* Emergency / live-status notice on the find page */
.notice {
  padding: var(--spacing-s) var(--spacing-xm);
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing-m);
}
.notice > p {
  margin: 0;
}
.notice--emergency {
  background: var(--color-red-10);
  border-left: 8px solid var(--color-red-00);
}
.notice--info {
  background: var(--color-blue-10);
  border-left: 8px solid var(--color-blue-100);
}

/* Phone-number list */
.phone-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Hurricane terms glossary on the guidance page. */
.term-list {
  margin: 0;
  padding: 0;
}
.term-list > dt {
  font-weight: var(--font-weight-bold);
  margin-top: var(--spacing-s);
}
.term-list > dt:first-child {
  margin-top: 0;
}
.term-list > dd {
  margin: 0;
  color: var(--color-text);
}
.phone-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-s);
  padding-block: var(--spacing-xs);
  border-bottom: 1px solid var(--color-grey-00);
}
.phone-list__row:last-child {
  border-bottom: 0;
}
.phone-list__label {
  font-weight: var(--font-weight-bold);
}

/* Need-to-know: a single master accordion that wraps the six sub-accordions. */
.need-to-know-toggle {
  margin-top: var(--spacing-l);
  border: 2px solid var(--color-teal-00);
  border-radius: var(--radius-sm);
  background: var(--color-background);
}
.need-to-know-toggle__summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
  padding: var(--spacing-s) var(--spacing-xm);
  background: var(--color-teal-10);
  list-style: none;
  outline: none;
  border-radius: calc(var(--radius-sm) - 2px);
}
.need-to-know-toggle__summary::-webkit-details-marker { display: none; }
.need-to-know-toggle__summary::marker { content: ""; }
.need-to-know-toggle__summary:hover,
.need-to-know-toggle__summary:focus-visible {
  background: var(--color-teal-40);
}
.need-to-know-toggle__summary:focus-visible {
  outline: 4px solid var(--color-teal-100);
  outline-offset: -2px;
}
.need-to-know-toggle__title {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.need-to-know-toggle__title::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left: 10px solid currentColor;
  border-right-width: 0;
  transition: transform .2s;
}
.need-to-know-toggle[open] .need-to-know-toggle__title::before {
  transform: rotate(90deg);
}
.need-to-know-toggle__hint {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}
.need-to-know-toggle__content {
  padding: var(--spacing-m) var(--spacing-xm);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.need-to-know-toggle__content .govbb-show-hide {
  padding-block: var(--spacing-xs);
  border-bottom: 1px solid var(--color-grey-00);
}
.need-to-know-toggle__content .govbb-show-hide:last-child {
  border-bottom: 0;
}

/* Prominent Emergency phone numbers panel on the start page */
.emergency-phones {
  margin-block: var(--spacing-m);
  padding: var(--spacing-m) var(--spacing-xm);
  background: var(--color-red-10);
  border-left: 8px solid var(--color-red-00);
  border-radius: var(--radius-sm);
}
.emergency-phones > h2 {
  margin-bottom: var(--spacing-xs);
}
.emergency-phones > p {
  margin-bottom: var(--spacing-s);
}
.emergency-phones__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xs);
}
@media (min-width: 640px) {
  .emergency-phones__list {
    grid-template-columns: 1fr 1fr;
  }
}
.emergency-phones__link {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-s) var(--spacing-xm);
  background: var(--color-background);
  border: 2px solid var(--color-red-00);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color .15s, box-shadow .15s;
}
.emergency-phones__link:hover {
  background: var(--color-yellow-100);
  text-decoration: none;
}
.emergency-phones__link:focus-visible {
  outline: 4px solid var(--color-teal-100);
  outline-offset: 2px;
  text-decoration: none;
}
.emergency-phones__service {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  color: var(--color-text-muted);
}
.emergency-phones__number {
  font-size: var(--font-size-h2);
  line-height: 1;
  font-weight: var(--font-weight-bold);
  color: var(--color-red-00);
  margin-top: var(--spacing-xxs);
}

/* Filter group rows: scale checkboxes/radios down so the sidebar fits */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.filter-checkboxes .govbb-checkbox,
.filter-checkboxes .govbb-radio {
  /* Minimum 44px tap target, slightly smaller than the design system's
     3rem default so the filter sidebar still fits comfortably. */
  width: 2.75rem;
  height: 2.75rem;
}
.filter-checkboxes .govbb-checkbox:before,
.filter-checkboxes .govbb-radio:before {
  width: 16px;
  height: 16px;
}

/* Active-filters chip row, sits above the results so the user can
   see at a glance what's narrowing their list, and remove any one
   chip without hunting in the sidebar. */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-s);
}
.active-filters__label {
  font-weight: var(--font-weight-bold);
  margin-right: var(--spacing-xs);
}
.active-filter__chip {
  font: inherit;
  background: var(--color-blue-10);
  color: var(--color-text);
  border: 1px solid var(--color-blue-100);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: var(--font-size-caption);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.active-filter__chip:hover {
  background: #d6dde9;
}
.active-filter__chip:focus-visible {
  outline: 3px solid var(--color-teal-100);
  outline-offset: 2px;
}
.active-filters__clear {
  font: inherit;
  background: transparent;
  border: 0;
  color: var(--color-link);
  text-decoration: underline;
  cursor: pointer;
  padding: 4px 8px;
  font-size: var(--font-size-caption);
}
.active-filters__clear:hover {
  color: var(--color-link-hover);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
}
.skip-link:focus {
  left: var(--spacing-s);
  top: var(--spacing-s);
  z-index: 100;
  background: var(--color-yellow-100);
  padding: var(--spacing-xs) var(--spacing-s);
  text-decoration: none;
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

/* Related-information block on the start page */
.related-info {
  margin-top: var(--spacing-l);
  padding-top: var(--spacing-m);
  border-top: 4px solid var(--color-grey-00);
}
.related-info > h2 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  margin-bottom: var(--spacing-s);
}

/* Print: drop the chrome and lay the shelter list out compactly so a
   user can keep a paper copy on the fridge during hurricane season. */
@media print {
  .govbb-official-banner,
  .govbb-header,
  .govbb-status-banner,
  .govbb-breadcrumbs,
  .govbb-footer,
  .finder__filters,
  .emergency-phones,
  .related-info,
  .skip-link,
  #feedback,
  .back-link {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
    font-size: 11pt;
  }
  .govbb-container {
    width: 100%;
    padding: 0;
  }
  h1 { font-size: 22pt; margin-bottom: 4pt; }
  h2 { font-size: 14pt; margin-block: 12pt 4pt; }
  h3 { font-size: 12pt; }
  .service-lede { font-size: 11pt; margin-bottom: 8pt; }
  .finder__grid { display: block; }
  .finder__list { display: block; }
  .shelter {
    border: 1px solid #999;
    padding: 6pt 8pt;
    margin-bottom: 4pt;
    break-inside: avoid;
  }
  .shelter__name { font-size: 11pt; margin: 0; }
  .shelter__link { color: #000; text-decoration: none; }
  .shelter__link::after { content: ""; }
  .shelter__meta { font-size: 10pt; }
  .shelter__tags { font-size: 9pt; }
  .tag { background: #eee !important; color: #000 !important; }
  a { color: #000; text-decoration: none; }
  .service-source { margin-top: 12pt; font-size: 9pt; }
}