/* Metro District Management — site-wide styles.
   Each page holds a desktop layout (.v-desktop) and a phone/tablet layout (.v-mobile);
   the screen width decides which one shows. */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: 'Jost', system-ui, sans-serif; color: #14213D; background: #FAF8F3; }
a { color: #14213D; }
a:hover { color: #8A6D12; }
input, select, textarea, button { font-family: 'Jost', system-ui, sans-serif; }
img { max-width: 100%; }

/* Which layout shows */
@media (min-width: 1280px) { .v-mobile { display: none !important; } .site-menu { display: none !important; } }
@media (max-width: 1279.98px) { .v-desktop { display: none !important; } }

/* Keep the page from scrolling sideways on narrow desktop windows */
.v-desktop { overflow-x: hidden; }

/* Phone menu */
.site-menu { position: fixed; inset: 0; z-index: 1000; }
.site-menu[hidden] { display: none !important; }
body.menu-is-open { overflow: hidden; }

/* Privacy and Accessibility pages on phones (they reuse the desktop text) */
.v-mobile .from-desktop { padding: 40px max(20px, calc((100% - 680px) / 2)) 48px !important; }
.v-mobile .from-desktop h1 { font-size: 40px !important; }
.v-mobile .from-desktop h2 { font-size: 26px !important; }
.v-mobile .from-desktop article { width: auto !important; max-width: 100%; }
.v-mobile .from-desktop p, .v-mobile .from-desktop li { font-size: 16px !important; }

/* Forms: spam trap, focus, validation */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #C9A227; outline-offset: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid #C9A227; outline-offset: 3px; border-radius: 2px; }
button[type="submit"] { cursor: pointer; }
button[type="submit"]:hover { background: #22325A !important; }
input[type="file"] { max-width: 100%; }

/* Skip link for keyboard users */
.skip { position: absolute; left: 12px; top: -60px; z-index: 2000; background: #C9A227; color: #14213D; padding: 12px 18px; border-radius: 4px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide, .dot span { transition: none !important; }
}

/* Keep header links and buttons on one line */
.v-desktop header nav a, .v-desktop header a { white-space: nowrap; }

/* Smaller laptop screens: give the logo and menu a little more room */
@media (max-width: 1439.98px) {
  .v-desktop header { padding-left: 40px !important; padding-right: 40px !important; gap: 24px; }
  .v-desktop header nav { gap: 20px !important; }
}

/* Resources guide articles */
.guide-body { color: #3E4560; }
.guide-body > p, .guide-body li { font-size: 17px; line-height: 1.75; color: #3E4560; margin: 0; }
.guide-body > p:first-child { font-size: 19px; color: #14213D; }
.guide-body h2 { margin: 20px 0 0; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 30px; line-height: 1.15; color: #14213D; }
.guide-body ul, .guide-body ol { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.guide-body li::marker { color: #8A6D12; }
.guide-body strong { color: #14213D; font-weight: 600; }
.guide-body a { color: #14213D; font-weight: 500; text-decoration-color: #C9A227; text-underline-offset: 3px; }
.guide-body ul.checklist { list-style: none; padding-left: 0; }
.guide-body li.check { position: relative; padding-left: 34px; }
.guide-body li.check::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border: 1.5px solid #C9A227; border-radius: 3px; background: #FFFFFF; }
.guide-body .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #E4DCC6; border-radius: 6px; background: #FFFFFF; }
.guide-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.guide-body th, .guide-body td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid #EFE8D6; color: #3E4560; }
.guide-body th { background: #F3EEE2; color: #14213D; font-weight: 600; }
.guide-body tr:last-child td { border-bottom: 0; }
.guide-body .guide-back { margin-top: 24px; padding-top: 20px; border-top: 1px solid #E4DCC6; font-size: 15px; }
.v-mobile .guide-body table { min-width: 520px; font-size: 14px; }
.v-mobile .from-desktop .guide-body li { font-size: 16px !important; }
.guide-body .guide-note { font-size: 14px !important; line-height: 1.6; color: #5B6278; margin-top: -4px; }