/* Nullarbor Net — refurbished stylesheet
   Colors verified against the live site: blue page (#0000FF) with a
   decorative spiral rail, pure green (#00FF00) links, black body text,
   no boxes/borders around content — matching the original design exactly. */

:root {
  --blue: #0000ff;
  --green: #00ff00;
  --cream: #ece9d8;
  --white: #ffffff;
  --text: #000000;
  --max-width: 1100px;
}

* { box-sizing: border-box; }

/* Visually hidden but readable by search engines/screen readers - used to
   give the homepage's image-based logo heading real text content (search
   engines weight actual text in an h1 more than an image's alt attribute). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Verdana, Arial, sans-serif;
  background: var(--blue) url("data:image/png;base64,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") repeat-y;
  background-size: 84px 123px;
  color: var(--white);
  line-height: 1.6;
}

/* Replaces the original nnetPaper.jpg rail: that was a small 84x123px JPEG
   that looked visibly blurry on modern high-DPI screens with no
   higher-resolution source available. This is the exact same artwork
   (traced from its own pixels: thresholded to flat colors to strip JPEG
   noise, then supersampled 4x) so it's genuinely the original design,
   just rendered crisply at any zoom or pixel density.
   On narrow viewports it doesn't scale, so it collides with reflowed
   text. Drop it below the breakpoint where an 84px margin would eat too
   much of the content width. */
@media (max-width: 700px) {
  body { background-image: none; }
}

a {
  color: var(--green);
  text-decoration: underline;
}
a:hover, a:focus {
  color: var(--white);
}

img { max-width: 100%; height: auto; border: 0; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
/* Keep body copy clear of the ~90px decorative rail whenever it's shown
   (container hugs the viewport's left edge below ~1140px wide, same as
   the rail does, so it needs its own clearance rather than relying on
   the auto-centering margin). */
@media (min-width: 701px) {
  .container { padding-left: 110px; }
}

/* Header / splash */
.site-header {
  padding: 32px 0 40px;
  text-align: center;
}
.site-header .logo {
  width: 110px;
  height: 110px;
  margin-bottom: 8px;
}
.site-header h1 { margin: 0; }
.site-header .splash-logo {
  max-width: 420px;
  width: 100%;
  margin: 8px auto 20px;
  display: block;
}
.site-header .intro {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.05rem;
  color: var(--white);
}

/* Town quick-links nav */
.town-nav {
  margin: 0 auto;
  max-width: 900px;
  padding: 0 24px;
}
/* .town-nav's own padding shorthand above resets the left clearance the
   .container media rule gives it (same element, both classes) — reassert
   it here so town links don't run under the decorative rail. */
@media (min-width: 701px) {
  .town-nav { padding-left: 110px; }
}
.town-nav h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cream);
  font-weight: bold;
  margin: 0 0 12px;
  text-align: center;
}
.town-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  text-align: center;
}
.town-groups p { margin: 6px 0; }

section { padding: 40px 0; }
section h2 {
  text-align: center;
  color: var(--green);
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 24px;
  text-shadow: 1px 1px 0 #000088;
}

/* Maps grid */
.maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 20px;
  text-align: center;
}
.maps-grid figure { margin: 0; }
.maps-grid figcaption {
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Quote / themes */
.quote-section blockquote {
  max-width: 680px;
  margin: 0 auto 20px;
  text-align: center;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--white);
  border: none;
}
.quote-section .intro-text {
  max-width: 700px;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--white);
}
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}
.themes-grid figure { margin: 0; }
.themes-grid figcaption { margin-top: 8px; font-weight: 600; }

/* Trip planners */
.planners-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  padding: 20px;
}
@media (min-width: 800px) {
  .planners-grid { grid-template-columns: 1fr auto 1fr; }
}
.planner-copy {
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
}
.planner-copy h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.planner-copy p { color: var(--white); }
.planner-buttons {
  display: flex;
  justify-content: center;
  gap: 0;
}
.planner-swap {
  position: relative;
  display: inline-block;
}
.planner-swap img { display: block; }
.planner-swap .alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.planner-swap:hover .alt,
.planner-swap:focus .alt {
  opacity: 1;
}

/* Sponsor / ads */
.sponsor-section {
  text-align: center;
}
.sponsor-section h3 { margin: 0 0 4px; color: var(--white); }
.sponsor-section p { color: var(--white); font-style: italic; }
.sponsor-section .ad-block { margin: 24px auto; }

/* Donate */
.donate-section {
  text-align: center;
  padding-top: 20px;
}
.donate-section h2 {
  color: var(--cream);
  font-style: italic;
  font-weight: normal;
  text-shadow: none;
}
.donate-section p { color: var(--white); }

/* Footer */
.site-footer {
  text-align: center;
  padding: 30px 0 40px;
  color: var(--white);
  font-weight: bold;
}
.site-footer a { color: var(--green); font-weight: bold; }

@media (max-width: 600px) {
  .site-header { padding: 24px 0 32px; }
  section { padding: 28px 0; }
}

/* ============================================================
   Content-page theme (town / map / theme / planner pages)
   Verified against the live site: cream page (#FFFFCC) with an
   orange rail (wallpaperOrangeBuff.gif), navy headings (#000088),
   default blue links (#0000EE) — a distinct theme from the blue/
   green splash homepage, restored to match the original exactly.
   ============================================================ */
body.content-page {
  background: #ffffcc url("/graphics/wallpaperOrangeBuff.gif") repeat-y;
  color: #000000;
}
body.content-page a { color: #0000ee; }
body.content-page a:hover, body.content-page a:focus { color: #000088; }

@media (max-width: 760px) {
  body.content-page { background-image: none; }
}
@media (min-width: 761px) {
  body.content-page .container { padding-left: 160px; }
}

.content-page .page-header {
  padding: 20px 0;
  text-align: center;
}
.content-page .page-header .brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Shifts the whole icon+text group left by half the icon's footprint
     (48px width + 10px gap) so the "Nullarbor Net" text itself lands on
     the page's true center line, matching the heading below it, rather
     than the icon+text pair as a unit being centered (which pushes the
     text off to one side). */
  margin-left: -58px;
  text-decoration: none;
  color: #000088;
  font-weight: bold;
  font-size: 1.1rem;
}
.content-page .page-header .brand-link img { width: 48px; height: 48px; }

.content-page .page-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.content-page .page-nav a {
  font-weight: bold;
}

.content-page h1.town-title {
  text-align: center;
  color: #000088;
  font-size: 2rem;
  margin: 10px 0 30px;
}

.content-page main {
  padding-bottom: 40px;
}
.content-page main .prose {
  max-width: 720px;
  margin: 0 auto;
}
.content-page main h1,
.content-page .NullaHeading {
  color: #000088;
  font-size: 1.3rem;
  margin: 28px 0 8px;
}
.content-page main p,
.content-page .NullaNormal {
  color: #000000;
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 16px;
}
.content-page main img {
  display: block;
  margin: 16px auto;
  border-radius: 4px;
  max-width: 100%;
  height: auto;
}
.content-page .small { font-size: 0.85rem; }
.content-page .tan { color: #b36b00; }
.content-page .green { color: #007a00; }

.content-page .all-towns {
  margin-bottom: 40px;
}
.content-page .all-towns .prose {
  max-width: 720px;
  margin: 0 auto;
}
.content-page .all-towns summary {
  cursor: pointer;
  font-weight: bold;
  color: #000088;
  margin-bottom: 12px;
}
.content-page .all-towns .town-groups {
  text-align: left;
  columns: 2;
  gap: 24px;
}
.content-page .all-towns .town-groups a { display: block; margin-bottom: 4px; }

.content-page .themes-bar {
  text-align: center;
  padding: 20px;
  font-weight: bold;
}
.content-page .themes-bar a { margin: 0 4px; }
.content-page .page-footer {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 40px;
}

/* Interactive region maps: a stitched composite background image with
   percentage-positioned hotspot links overlaid, so the whole thing scales
   responsively while keeping every clickable region aligned. */
.content-page .map-frame {
  position: relative;
  width: 100%;
  margin: 20px auto;
}
.content-page .map-bg {
  display: block;
  width: 100%;
  height: auto;
}
.content-page .map-hotspot {
  position: absolute;
  display: block;
}
.content-page .map-hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  margin: 0;
}
.content-page .map-hotspot .over {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.content-page .map-hotspot:hover .over,
.content-page .map-hotspot:focus .over {
  opacity: 1;
}
.content-page .ad-block {
  text-align: center;
  margin-top: 20px;
}

/* ============================================================
   Planner-page theme (trip distance tables)
   Verified against the live site: flat khaki background (#CCCC99),
   no decorative rail (boomer2.gif is just a solid-color tile, unlike
   the other pages' rail art) — content already carries its own
   orange/cream/navy colors matching the rest of the site.
   ============================================================ */
body.planner-page {
  background-color: #cccc99;
  background-image: none;
  color: #000000;
}
/* Unlike every other theme, planner-page never set its own link colors, so
   any anchor without the legacy pages' own inline font-color wrapper fell
   through to the homepage's bright green (designed for a blue background)
   - on this khaki page and its pale table-cell backgrounds that comes out
   at roughly 1.2:1 contrast, functionally invisible (e.g. the "Switch to
   ..." and "[via ...]" route links on every trip-planner page). */
.planner-page a { color: #000088; }
.planner-page a:hover, .planner-page a:focus { color: #663300; }
.planner-page .page-header {
  padding: 20px 0;
  text-align: center;
}
.planner-page .page-header .brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: -58px;
  text-decoration: none;
  color: #000088;
  font-weight: bold;
  font-size: 1.1rem;
}
.planner-page .page-header .brand-link img { width: 48px; height: 48px; }
.planner-page main {
  padding-bottom: 40px;
}
.planner-page h1.town-title {
  text-align: center;
  color: #000088;
  font-size: 1.7rem;
  margin: 0 0 20px;
}
/* planner-page has no decorative rail (unlike the homepage), so it
   shouldn't inherit the homepage's rail-clearance padding-left. */
@media (min-width: 701px) {
  body.planner-page .container { padding-left: 20px; }
}

/* ============================================================
   Links-page theme (Cool Links directory page)
   Flat blue background matching the homepage's blue/green identity,
   but no decorative rail (the original used a plain solid-color tile,
   not rail art), so — like planner-page — it must opt out of the
   homepage's rail-clearance padding.
   ============================================================ */
body.links-page {
  background-color: var(--blue);
  background-image: none;
  color: var(--white);
}
@media (min-width: 701px) {
  body.links-page .container { padding-left: 20px; }
}
.links-page .page-header {
  padding: 20px 0;
  text-align: center;
}
.links-page .page-header .brand-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: -58px;
  text-decoration: none;
  color: var(--green);
  font-weight: bold;
  font-size: 1.1rem;
}
.links-page .page-header .brand-link img { width: 48px; height: 48px; }
.links-page main { padding-bottom: 40px; }
.links-page .prose { max-width: 720px; margin: 0 auto; }
.links-page h1.town-title {
  text-align: center;
  color: var(--green);
  font-size: 2rem;
  margin: 10px 0 30px;
}
.links-page .link-card {
  text-align: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
.links-page .link-card h2 { margin: 0 0 12px; font-size: 1.2rem; }
.links-page .link-card img { display: block; margin: 0 auto 12px; border-radius: 4px; }
.links-page .link-card p { color: var(--white); text-align: left; margin: 0; }
.links-page .page-footer {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 40px;
}

/* Legacy tables (driving-distance grids etc.) can be wider than a phone
   screen - let them scroll horizontally instead of clipping columns. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-bottom: 16px;
}
.table-scroll table {
  margin-bottom: 0;
}
.table-scroll td, .table-scroll th {
  white-space: nowrap;
}