/*
 * The pre-rendered beach section — see tools/beach-pages.js.
 *
 * Linked only by the per-beach files (/whitstable), never by the app's own
 * index.html, so none of this reaches the list screen.
 *
 * TWO PLACES THIS HAS TO LOOK RIGHT, and they are not the same place:
 *
 *   1. Before the bundle runs — a crawler, a reader on a slow connection, a
 *      browser with JavaScript off. Then the section is the whole page, sitting
 *      under an empty #root.
 *   2. After it runs — components/StaticBeachSection.web.tsx moves this markup
 *      INTO the live beach page, directly under "About this beach". Same nodes,
 *      same text, now inside the app's scroller.
 *
 * So the palette is the app's (components/theme.ts) rather than a second look
 * for the same content, and the width is capped rather than stretched, because
 * in state 2 it sits in a 480px panel and in state 1 it may have a 2560px
 * monitor to itself.
 */

:root {
  --bd-bg: #07171f;
  --bd-surface: #0c2531;
  --bd-border: #173846;
  --bd-accent: #57c6c0;
  --bd-text: #eaf2f0;
  --bd-muted: #8aa6a9;
  --bd-faint: #4f6d72;
}

/*
 * The react-native-web reset sets `body { overflow: hidden }` and
 * `#root { height: 100% }`, which between them put anything after #root off
 * the bottom of a page that cannot scroll. Before hydration this section IS
 * after #root, so both have to be relaxed.
 *
 * `.bd-adopted` is set by StaticBeachSection once the node has been moved into
 * the app, at which point the app owns the scrolling again and a second,
 * page-level scrollbar is just something else to drag.
 */
body { overflow: auto; background: var(--bd-bg); }
#root { height: 100dvh; }
html.bd-adopted body { overflow: hidden; }
html.bd-adopted #root { height: 100%; }

#bd-beach-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  /* Once adopted, this is a flex item several levels down react-native-web's
     tree, and a flex item's default `min-width: auto` is the usual way a wide
     child pushes a page sideways. Measured at 390, 504 and 1440 CSS pixels it
     does not happen here — the images are the only fixed-size content and they
     are width-constrained — so this is a guard rather than a fix, on the one
     block of this app whose markup comes from outside React. */
  min-width: 0;
  margin: 0 auto;
  padding: 20px 16px 48px;
  background: var(--bd-bg);
  color: var(--bd-text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#bd-beach-content * { box-sizing: border-box; }

#bd-beach-content h1 {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--bd-text);
}

/* The kicker repeats what the app's header shows above the map: town, region,
   surface. Small and monospaced for the same reason it is there — it is a
   label, not a sentence. */
#bd-beach-content .bd-kicker {
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bd-accent);
}

#bd-beach-content h2 {
  margin: 22px 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 400;
  color: #7c9aa0;
}

#bd-beach-content p { margin: 0 0 10px; color: #bcd6d8; }

#bd-beach-content .bd-lede { font-size: 16px; color: var(--bd-text); }

/* The tide paragraph is the reason the page exists, so it is the one block
   that is given a surface of its own. */
#bd-beach-content .bd-tide {
  margin: 6px 0 16px;
  padding: 14px;
  border: 1px solid var(--bd-border);
  border-radius: 12px;
  background: var(--bd-surface);
  font-size: 16px;
  color: var(--bd-text);
}

#bd-beach-content figure {
  margin: 0 0 14px;
  border: 1px solid var(--bd-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bd-surface);
}

#bd-beach-content figure img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserved by width/height on the element itself as well; this keeps the box
     honest if the attributes are ever dropped, so the text below does not jump
     when the image lands. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #0a1f29;
}

#bd-beach-content figcaption {
  padding: 8px 12px 10px;
  font-size: 13px;
  color: var(--bd-muted);
}

#bd-beach-content figcaption b { color: var(--bd-text); font-weight: 600; }

#bd-beach-content .bd-figs { display: grid; gap: 12px; }
@media (min-width: 620px) {
  #bd-beach-content .bd-figs { grid-template-columns: 1fr 1fr; }
}
/* In the app the section lands in a 480px panel on desktop, where the viewport
   media query above would still be true and the two maps would be 230px wide.
   Container width is the thing that actually matters here. */
@supports (container-type: inline-size) {
  #bd-beach-content { container-type: inline-size; }
  #bd-beach-content .bd-figs { grid-template-columns: 1fr; }
  @container (min-width: 560px) {
    #bd-beach-content .bd-figs { grid-template-columns: 1fr 1fr; }
  }
}

#bd-beach-content .bd-credits {
  margin-top: 26px;
  padding-top: 12px;
  border-top: 1px solid var(--bd-border);
  font-size: 11px;
  line-height: 1.7;
  color: var(--bd-faint);
}

#bd-beach-content a { color: var(--bd-accent); }

#bd-beach-content .bd-nav { margin-top: 18px; font-size: 13px; }

/* Only ever rendered when scripting is off — see the noscript block in the
   page head. Styled as a note rather than a warning: the page works. */
#bd-beach-content .bd-noscript {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--bd-muted);
}