/* stormsouth.app — one stylesheet for every page.
   Mobile-first: the base rules are the phone layout; the one min-width query
   only widens the gutters. Colors are the app's palette
   (artifacts/stormsouth-app/constants/colors.ts): dark by default, light via
   prefers-color-scheme. Nothing here loads from another host. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark light;
  --bg: #070E1A;
  --card: #1E2E52;
  --border: #315182;
  --text: #E8F4FD;
  --muted: #C7DBF0;
  --link: #42A5F5;
  --on-link: #0D1B2E;
  --scroll-shadow: rgba(66, 165, 245, 0.55);
  --header: #1565C0;
  /* Weather-safety callout: the app's solid statusWarn fill with near-black
     text (8.81:1), the same in both themes so it always reads as a warning. */
  --callout-bg: #F59E0B;
  --callout-text: #0D1117;
  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #EFF4FF;
    --card: #FFFFFF;
    --border: #C9D9EF;
    --text: #0D1117;
    --muted: #3F5170;
    --link: #1565C0;
    --on-link: #FFFFFF;
    --scroll-shadow: rgba(13, 17, 23, 0.3);
    --header: #0D47A1;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

a {
  color: var(--link);
  text-underline-offset: 0.15em;
}

a:focus-visible,
.table-wrap:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 10;
  padding: 0.625rem 1rem;
  background: var(--link);
  color: var(--on-link);
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

/* Header and footer */

.site-header {
  background: var(--header);
  color: #FFFFFF;
}

.site-header .inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

/* The white STORM/SOUTH wordmark (wordmark.png, 3x of 190x28). The header bar
   is blue in both themes, so white always has the contrast it needs. */
.brand img {
  display: block;
  width: auto;
  height: 28px;
}

.site-nav ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.625rem;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: 8px;
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.site-header a:focus-visible {
  outline-color: #FFFFFF;
}

.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9375rem;
}

.site-footer .inner {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-block;
  padding: 0.5rem 0;
}

.site-footer p {
  margin: 0;
}

/* Layout */

.inner {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

main {
  display: block;
  padding-top: 1.5rem;
}

main:focus {
  outline: none;
}

/* Text */

h1,
h2,
h3 {
  line-height: 1.25;
  letter-spacing: -0.01em;
}

h1 {
  margin: 0.5rem 0 1rem;
  font-size: 1.875rem;
  font-weight: 800;
}

h2 {
  margin: 2.25rem 0 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 1.375rem;
  font-weight: 700;
}

h3 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.375rem;
}

strong {
  font-weight: 700;
}

.muted {
  color: var(--muted);
}

/* The bracketed placeholders ("[set on publication]" and others) stay visible,
   word for word, until the attorney review fills them. The dashed outline
   keeps them easy to spot; the text itself is untouched. */
.placeholder {
  padding: 0 0.2em;
  border: 1px dashed currentColor;
  border-radius: 4px;
}

/* Weather-safety callout (Terms, Support): filled and high contrast. */

.callout {
  margin: 0 0 1.5rem;
  padding: 1rem 1.125rem;
  background: var(--callout-bg);
  color: var(--callout-text);
  border-radius: var(--radius);
  font-weight: 500;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout a {
  color: inherit;
}

/* Tables: on a phone the table scrolls sideways inside its own box; the page
   never scrolls sideways. The wrapper is focusable so keyboard users can
   scroll it too. */

.table-wrap {
  margin: 0 0 1.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Scroll shadows: a soft edge appears on whichever side has more columns
     to swipe to, and fades once you reach that end. No extra words needed. */
  background:
    linear-gradient(to right, var(--card) 30%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--card) 30%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center / 0.875rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center / 0.875rem 100% no-repeat scroll,
    var(--card);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Minimum table widths: wide enough to stay readable, so narrower screens
   swipe instead of squeezing the columns, and narrow enough to fit the widest
   content column with room to spare. That column is 46rem minus the 1.5rem
   gutters and the wrapper's 1px borders, about 686px, so 4 columns at 40rem
   (640px) and 3 at 36rem (576px) never scroll on tablets and desktops. */
.cols-4 table {
  min-width: 40rem;
}

.cols-3 table {
  min-width: 36rem;
}

th,
td {
  padding: 0.625rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

/* Outer columns get more inside padding than the middle ones, so text never
   sits near the box edge, unscrolled or scrolled to the end. */
th:first-child,
td:first-child {
  padding-left: 1rem;
}

th:last-child,
td:last-child {
  padding-right: 1rem;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

thead th {
  font-weight: 700;
  white-space: nowrap;
}

/* Home */

.hero {
  padding: 1rem 0 0.5rem;
}

.hero .lede {
  color: var(--muted);
  font-size: 1.125rem;
}

/* Official store badges, unaltered and the same height. 48px clears Apple's
   40px on-screen minimum; the 1rem gap and the 1.5rem above and below exceed
   Apple's clear space (a quarter of the badge height, 12px). */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}

.badges li {
  margin: 0;
}

.badges img {
  display: block;
  width: auto;
  height: 48px;
}

.cards {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cards li {
  margin: 0;
}

.cards a {
  display: block;
  padding: 1rem 1.125rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
}

.cards a strong {
  display: block;
  color: var(--link);
  font-size: 1.0625rem;
}

.cards a span {
  color: var(--muted);
  font-size: 0.9375rem;
}

.safety-note {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Wider screens: more breathing room, nothing that phones can't see. */

@media (min-width: 40rem) {
  .inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  main {
    padding-top: 2.5rem;
  }

  h1 {
    font-size: 2.25rem;
  }
}