/*
 * Skillit BDS onboarding foundation.
 * Canonical source: skillit-bds@1c8fa81 (tokens/tokens.json5, components/*.md, approved SVG assets).
 */
:root {
  --color-background: #FAF7F3;
  --color-surface: #FFFFFF;
  --color-foreground: #232F36;
  --color-primary: #EF6F1A;
  --color-warning: #FEB11C;
  --color-error: #C8102E;
  --color-success: #33663D;
  --color-link: #007CA6;

  --color-background-hover: #EAE6DE;
  --color-surface-hover: #EFEDE9;
  --color-foreground-hover: #212C31;
  --color-primary-hover: #E06718;
  --color-warning-hover: #EEA51A;
  --color-error-hover: #BB0F2A;
  --color-success-hover: #305F38;
  --color-link-hover: #007398;

  --space-1: 0.25rem;
  --space-1\.5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-128: clamp(48px, 10vw, 128px);
  --space-256: clamp(96px, 18vw, 256px);

  --font-primary: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-8x: 8rem;
  --text-6x: 6rem;
  --text-4x: 4rem;
  --text-3x: 3rem;
  --text-2x: 2rem;
  --text-2x-sm: clamp(1.5rem, 1.2928rem + 0.884vw, 2rem);
  --text-1\.5x: 1.5rem;
  --text-1\.5x-sm: clamp(1.125rem, 0.9696rem + 0.663vw, 1.5rem);
  --text-1x: 1rem;
  --text-0\.75x: 0.75rem;
  /* Local aliases. BDS retired the functional UI scale in favour of the numbered
   * tiers; these keep older rules readable and resolve to those tiers. */
  --text-ui: var(--text-1x);
  --text-ui-lg: 1.125rem;
  --text-mono: 0.875rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  --radius-sharp: 16px;
  --radius-pill: 9999px;
  --max-width-content: 1168px;
  --column-min-width: 326px;
  --max-width-app: 480px;
  --max-width-text: 70ch;
  --field-max-width: 18ch;
  --touch-target-min: 40px;
  --nav-height: 64px;
  --logo-mark-min: 21px;
  --wordmark-min: 16px;
  --logo-height: 24px;
}

.bds,
.bds *,
.bds *::before,
.bds *::after {
  box-sizing: border-box;
}

.bds {
  color: var(--color-foreground);
  background: var(--color-background);
  font-family: var(--font-primary);
  font-size: var(--text-1x);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.bds :where(button, input, select, textarea) {
  color: inherit;
  font: inherit;
}

.bds :where(img, svg) {
  max-width: 100%;
}

.bds :where(a, button, input, select, textarea):focus-visible,
.peer:focus-visible + .bds-choice,
.check-button:focus-visible + .bds-choice {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* position: relative makes the shell the containing block for its absolutely
 * positioned descendants (sr-only legends and labels among them). Without it they
 * resolve against the viewport, and the document gains a second scroll range the
 * height of the page below the shell's own scroll container. */
.bds-shell {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
}

.bds-skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 50;
  display: inline-flex;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--color-background);
  background: var(--color-foreground);
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-100% - var(--space-4)));
}

.bds-skip-link:focus {
  transform: translateY(0);
}

.bds-shell__header {
  min-height: var(--nav-height);
  flex: 0 0 auto;
  background: var(--color-surface);
}

/* One content block for header, step indicator, body, and footer. Mobile keeps the
 * hand-width gutter; desktop trades the phone-width column for a 128px gutter and
 * left-aligned content (Chiyo, Sep 9). The block caps at the BDS content width plus
 * its gutters, so ultra-wide screens center a 1200px column instead of stretching. */
.bds-shell__header-inner,
.bds-shell__progress-inner,
.bds-shell__main,
.bds-shell__footer-inner {
  width: 100%;
  min-width: 0;
  max-width: calc(var(--max-width-content) + 2 * var(--space-128));
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .bds-shell__header-inner,
  .bds-shell__progress-inner,
  .bds-shell__main,
  .bds-shell__footer-inner {
    padding-inline: var(--space-128);
  }
}

.bds-shell__header-inner {
  display: flex;
  min-height: var(--nav-height);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
}

.bds-shell__brand {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-foreground);
}

.bds-shell__account-nav {
  display: flex;
  max-width: 100%;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1) var(--space-3);
  margin-left: auto;
}

.bds-nav-link {
  display: inline-flex;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-1);
  color: var(--color-foreground);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  text-decoration: none;
}

.bds-nav-link:hover {
  color: var(--color-foreground-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Header logo is 24px tall whichever asset shows (BDS logo tokens, Sep 2026). */
.bds-shell__lockup {
  display: block;
  width: auto;
  height: var(--logo-height);
}

.bds-shell__mark {
  display: none;
  width: auto;
  height: var(--logo-height);
  color: var(--color-foreground);
}

.bds-shell__main {
  flex: 1 0 auto;
  padding-block: var(--space-8);
}

/* Step indicator: the thin horizontal bar (Chiyo, Sep 11, in place of the dot row).
 * Iron fill on the Canvas hover tone, directly beneath the header. Non-interactive,
 * so it stays off the accent color. Shown contextually: not on the signup screen. */
.bds-shell__progress {
  flex: 0 0 auto;
}

.bds-shell__progress-inner {
  padding-block: var(--space-3);
}

.bds-shell__progress-track {
  height: 4px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-background-hover);
}

.bds-shell__progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-foreground);
  transition: width 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .bds-shell__progress-fill {
    transition: none;
  }
}

/* Back and forward buttons (Chiyo, Sep 11): two 40px filled circles, not a bar.
 * Iron arrows on a Canvas circle (Back) and a Traffic Cone circle (Next). The
 * footer itself is transparent at every width; on phones it stays pinned to the
 * bottom so the buttons are always within thumb reach, from tablet up it is static. */
.bds-shell__footer {
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex: 0 0 auto;
  background: transparent;
}

.bds-shell__footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.bds-shell__nav-button {
  display: inline-flex;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  box-shadow: none;
  cursor: pointer;
}

.bds-shell__nav-icon {
  width: var(--space-6);
  height: var(--space-6);
}

.bds-shell__back {
  background: var(--color-background);
}

.bds-shell__back:hover {
  background: var(--color-background-hover);
}

.bds-shell__next {
  margin-left: auto;
  background: var(--color-primary);
}

.bds-shell__next:hover {
  background: var(--color-primary-hover);
}

/* A Next that cannot go anywhere yet reads disabled at 50% opacity (the BDS disabled
 * rule) rather than hiding, so a first step never shows an empty footer. */
.bds-shell__next:disabled,
.bds-shell__next.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bds-shell__next:disabled:hover,
.bds-shell__next.disabled:hover {
  background: var(--color-primary);
}

@media (min-width: 768px) {
  .bds-shell__footer {
    position: static;
  }
}

.bds-heading,
.bds-question {
  max-width: var(--max-width-text);
  color: var(--color-foreground);
  text-align: left;
}

.bds-heading {
  margin: 0;
  font-size: var(--text-2x);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.bds-question {
  margin: 0;
  font-size: var(--text-1\.5x);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.bds-supporting-copy {
  margin: 0;
  max-width: var(--max-width-text);
  color: var(--color-foreground);
  font-size: var(--text-1x);
  line-height: 1.6;
}

.bds-label {
  display: block;
  color: var(--color-foreground);
  font-size: var(--text-1x);
  font-weight: var(--weight-medium);
  line-height: 1.4;
}

.bds-meta {
  margin: 0;
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.4;
}

.bds-card,
.bds-skill-row,
.bds-removable-item {
  border: 0;
  border-radius: var(--radius-sharp);
  background: var(--color-surface);
  box-shadow: none;
}

.bds-card {
  padding: var(--space-16);
}

.bds-skill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
}

.bds-skill-row > .bds-label,
.bds-skill-row > .bds-supporting-copy {
  flex: 1 1 12rem;
}

.bds-skill-row > .bds-stepper {
  flex: 0 0 auto;
}

.bds-removable-item {
  display: flex;
  min-width: 0;
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.bds-job-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-4);
  border: 0;
  border-radius: var(--radius-sharp);
  background: var(--color-surface);
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}

.bds-job-card:hover {
  background: var(--color-surface-hover);
}

.bds-job-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bds-job-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
}

.bds-job-card__action p {
  margin: 0;
}

.bds-job-card__arrow {
  flex: 0 0 auto;
  width: var(--space-5);
  height: var(--space-5);
  color: var(--color-foreground);
}

.bds-button,
.bds-icon-button,
.bds-link {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

.bds-button,
.bds-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: none;
  cursor: pointer;
}

.bds-button {
  gap: var(--space-2);
  padding: 0.5em 1em;
  font-size: var(--text-1x);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}

/* BDS secondary: Iron on Plaster, no border, same pill and padding as primary. */
.bds-button--secondary {
  color: var(--color-foreground);
  background: var(--color-surface);
}

.bds-button--secondary:hover {
  background: var(--color-surface-hover);
}

.bds-button--primary {
  color: var(--color-foreground);
  background: var(--color-primary);
}

.bds-button--primary:hover {
  background: var(--color-primary-hover);
}

/* The shared ring is Traffic Cone, which disappears against a Traffic Cone fill. */
.bds-button--primary:focus-visible {
  outline-color: var(--color-foreground);
}

.bds-button:disabled,
.bds-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bds-icon-button {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  flex: 0 0 var(--touch-target-min);
  padding: var(--space-2);
  color: var(--color-foreground);
  background: transparent;
}

.bds-icon-button:hover {
  background: var(--color-surface-hover);
}

.bds-stepper,
.bds [data-controller~="stepper"] {
  display: grid;
  width: fit-content;
  max-width: 100%;
  grid-template-columns: var(--touch-target-min) minmax(0, 1fr) var(--touch-target-min);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
  border: 0;
  border-radius: var(--radius-sharp);
  background: var(--color-surface);
  box-shadow: none;
}

.bds-stepper-button {
  display: inline-flex;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  background: transparent;
  box-shadow: none;
  font-size: var(--text-ui-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.bds-stepper-button:hover {
  background: var(--color-surface-hover);
}

.bds-stepper-value {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
}

.bds .bds-stepper-input {
  width: 4rem;
  min-width: 0;
  min-height: var(--touch-target-min);
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sharp);
  color: var(--color-foreground);
  background: transparent;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  text-align: center;
  appearance: textfield;
}

.bds .bds-stepper-input::-webkit-inner-spin-button,
.bds .bds-stepper-input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.bds-stepper-prefix,
.bds-stepper-unit {
  color: var(--color-foreground);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.4;
}

.bds-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-link);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.bds-link:hover {
  color: var(--color-link-hover);
}

/* A link inside a sentence keeps the sentence's line box. The 44px target belongs
 * to standalone action links, not to words in a consent label. */
.bds-link--inline {
  display: inline;
  min-width: 0;
  min-height: 0;
}

/* Inputs are Plaster on Canvas with square corners: 16px is for cards, the pill is
 * for actions, and a field is neither. A lone field caps at ~18ch; stacked text
 * fields sit on the two-column field grid and fill their column (Chiyo, Sep 11),
 * and inside the work-history modal they fill the card. */
.bds-field {
  width: 100%;
  max-width: var(--field-max-width);
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-radius: 0;
  color: var(--color-foreground);
  background: var(--color-surface);
  box-shadow: none;
  font-family: var(--font-primary);
  font-size: var(--text-1x);
  font-weight: var(--weight-regular);
}

textarea.bds-field,
.bds-grid--fields .bds-field,
.bds-grid--fields .bds-select,
.bds-modal .bds-field,
.bds-modal .bds-select {
  max-width: none;
}

.bds-field:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.bds-field::placeholder {
  color: var(--color-foreground-hover);
}

/* Multi-select buttons: Plaster/Iron unselected, Iron/Canvas selected, pill like
 * every other actionable element. Selection is the fill swap alone, no icon. */
.bds-choice {
  display: flex;
  width: 100%;
  min-height: var(--touch-target-min);
  align-items: center;
  padding: 0.5em 1em;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-foreground);
  background: var(--color-surface);
  box-shadow: none;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.bds-choice:hover {
  background: var(--color-surface-hover);
}

.bds-choice-selected,
.peer:checked + .bds-choice,
.check-button:checked + .bds-choice {
  color: var(--color-background);
  background: var(--color-foreground);
}

.bds-choice-selected:hover,
.peer:checked + .bds-choice:hover,
.check-button:checked + .bds-choice:hover {
  background: var(--color-foreground-hover);
}

/* Native select with the BDS chevron drawn over its right padding. The chevron is a
 * state indicator, 1em like the text, and turns up while the select has focus. */
.bds-select {
  position: relative;
  width: 100%;
  max-width: var(--field-max-width);
}

.bds-select > select {
  appearance: none;
  padding-right: calc(var(--space-2) + 1em + var(--space-2));
}

.bds-select__chevron {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  width: 1em;
  height: 1em;
  translate: 0 -50%;
  pointer-events: none;
  color: var(--color-foreground);
}

.bds-select:focus-within .bds-select__chevron {
  rotate: 180deg;
}

/* Checkbox: a 16px square status mark (not a container, so no radius). Unchecked is
 * Plaster with a Traffic Cone stroke; checked is Traffic Cone with the forms plugin's
 * white check, which it paints from currentColor. */
.bds .bds-checkbox {
  width: var(--space-4);
  height: var(--space-4);
  flex: 0 0 var(--space-4);
  border: 1.5px solid var(--color-primary);
  border-radius: 0;
  color: var(--color-primary);
  background-color: var(--color-surface);
}

/* This sheet loads after Tailwind, so the Surface fill above would also cover the
 * plugin's checked fill; a checked box then looked unchecked unless focused. */
.bds .bds-checkbox:checked,
.bds .bds-checkbox:checked:hover,
.bds .bds-checkbox:checked:focus {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
}

/* Multi-column on desktop, one column on mobile. No column narrower than the BDS
 * column minimum, or its content breaks. */
.bds-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--column-min-width)), 1fr));
}

/* Text fields pair up: the cap admits exactly two columns, so a four-field form reads
 * as two rows rather than three fields and an orphan. Inside the grid the column is
 * the width constraint, so fields fill it instead of stopping at the standalone cap. */
.bds-grid--fields {
  max-width: calc(2 * var(--column-min-width) + var(--space-6));
  gap: var(--space-6);
}

/* A fieldset's default min-width is min-content, which lets a field grid inside it
 * force two columns onto a phone. Let the fieldset shrink with its container. */
.bds fieldset {
  min-width: 0;
}

.bds-alert {
  display: flex;
  max-width: var(--max-width-text);
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-error);
  font-weight: var(--weight-semibold);
}

/* Tailwind's .hidden and .bds-alert share specificity, so the later rule
 * wins by load order. Pin the hidden state so the languages notice can be
 * toggled without depending on stylesheet order. */
.bds-alert.hidden {
  display: none;
}

.bds-alert--warning {
  color: var(--color-foreground);
}

.bds-alert--success {
  color: var(--color-success);
}

.bds-alert--info {
  color: var(--color-foreground);
}

.bds-status {
  margin: 0 0 var(--space-8);
}

.bds-status__mark {
  flex: 0 0 auto;
  width: var(--space-6);
  height: var(--space-6);
}

/* The work-history editor is loaded into a Turbo frame, so its BDS scope
 * lives on the modal container rather than on the onboarding page behind it. */
.bds-modal {
  width: 100%;
  max-width: var(--max-width-app);
  border: 0;
  border-radius: var(--radius-sharp);
  background: var(--color-background);
  box-shadow: none;
}

.bds-modal .modal-header {
  min-height: var(--nav-height);
  border: 0;
}

.bds-modal .modal-header p {
  color: var(--color-foreground);
  font-size: var(--text-1\.5x);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
}

.bds-modal .modal-header > span:last-child {
  display: inline-flex;
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
}

.bds-modal .modal-header > span:last-child:hover {
  background: var(--color-surface-hover);
}

.bds-modal__content {
  padding: var(--space-6);
}

.bds-modal textarea.bds-field {
  min-height: 10rem;
  resize: vertical;
}

.bds-modal .bds-autocomplete-list {
  max-height: 12rem;
  overflow-y: auto;
  border: 0;
  border-radius: var(--radius-sharp);
  box-shadow: none;
}

.bds-modal .bds-checkbox + .bds-label {
  display: flex;
  min-height: var(--touch-target-min);
  align-items: center;
}

.bds-match-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.bds-match-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-foreground);
  font-size: var(--text-1x);
}

.bds-match-list__mark {
  flex: 0 0 auto;
  width: var(--space-6);
  height: var(--space-6);
  color: var(--color-success);
}

@media (max-width: 767px) {
  .bds-shell__lockup {
    display: none;
  }

  .bds-shell__mark {
    display: block;
  }

  .bds-heading {
    font-size: var(--text-2x-sm);
  }

  .bds-question {
    font-size: var(--text-1\.5x-sm);
  }

  .bds-card {
    padding: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bds *,
  .bds *::before,
  .bds *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.form-control:focus {
  box-shadow: none;
}

/* Google Places Autocomplete (.pac-*) styles live in application.tailwind.css */

.text-area:focus {
  border-color: black;
  --tw-ring-color: unset;
  --tw-ring-offset-shadow: unset;
  --tw-ring-shadow: unset;
}

input[type='radio'].additional-radio {
  color: #fe6f31;
  border-color: #fe6f31;
}

input[type='radio'].additional-radio:active {
  outline-color: #fe6f31;
}

input[type='radio'].additional-radio:focus {
  outline-color: #fe6f31;
}

.wider-button {
  padding-left: 2rem;
  padding-right: 2rem;
}

.opaque {
  opacity: 0.5;
}

/* General styles for larger screens */
.map-container {
  width: 100%;
  height: 440px;
  background-color: var(--color-surface-hover, #e0e0e0);
  margin-bottom: 16px;
  overflow: hidden;
}

.slider-container {
  width: 100%;
  margin-bottom: 8px;
}

/* Map container height for screens with height less than 720px */
@media (max-height: 720px) {
  .map-container {
    height: 240px;
  }
}

/* Styles for medium screens */
@media (max-width: 1024px) and (max-height: 768px) {
  .map-container {
    height: 250px;
  }
}

/* Styles for smaller screens */
@media (max-width: 910px) and (max-height: 1024px) {
  .map-container {
    height: 250px;
  }
}

/* Styles for very small screens */
@media (max-width: 640px) {
  .map-container {
    height: 240px;
  }

  .slider-container {
    margin-bottom: 12px;
  }
}

/* Mono is a typeface, not a color: an inline email or phone link stays link blue. */
.bds-link.bds-meta {
  color: var(--color-link);
}

.bds-link.bds-meta:hover {
  color: var(--color-link-hover);
}