/* Oztrovok, Australian Islands Guide
   Lightweight stylesheet, system fonts only, no external dependencies. */

:root {
  --ink: #1a2332;
  --ink-soft: #4b5563;
  --paper: #fbfaf6;
  --paper-warm: #f3eee2;
  --sea: #0c4a6e;
  --sea-light: #38bdf8;
  --sand: #c98a3a;
  --line: #e7e2d3;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3, h4 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}
h1 { font-size: 2.6rem; letter-spacing: -0.01em; }
h2 { font-size: 1.8rem; margin-top: 2.5rem; }
h3 { font-size: 1.25rem; margin-top: 1.8rem; }

p { margin: 0 0 1.1em; }
a { color: var(--sea); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--sand); }

.wrap { max-width: 880px; margin: 0 auto; padding: 0 1.25rem; }
.wrap-wide { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
}
.brand {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand span { color: var(--sand); }
.nav { display: flex; gap: 1.5rem; font-size: 0.95rem; }
.nav a { color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--sea); }

@media (max-width: 600px) {
  .nav { gap: 1rem; font-size: 0.85rem; }
  .brand { font-size: 1.2rem; }
  h1 { font-size: 2rem; }
}

.hero {
  position: relative;
  height: 60vh;
  min-height: 380px;
  max-height: 560px;
  background-size: cover;
  background-position: center;
  background-color: var(--sea);
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding: 2.5rem 1.25rem;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
.hero h1 { color: #fff; margin-bottom: 0.25rem; }
.hero-meta {
  font-size: 0.95rem;
  opacity: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intro {
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 2rem 0 1rem;
  font-family: Georgia, serif;
  line-height: 1.55;
}

.quickfacts {
  background: var(--paper-warm);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem 2rem;
}
.quickfacts dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-bottom: 0.15rem;
}
.quickfacts dd { margin: 0; font-weight: 600; font-size: 1rem; }

section { margin-bottom: 2rem; }

.costs {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0 1.5rem;
  font-size: 0.97rem;
}
.costs th, .costs td {
  text-align: left;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.costs th {
  font-family: Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-warm);
}
.costs td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.bring-list {
  columns: 2;
  column-gap: 2rem;
  margin: 1rem 0;
  padding-left: 1.2rem;
}
.bring-list li { margin-bottom: 0.4rem; break-inside: avoid; }
@media (max-width: 600px) { .bring-list { columns: 1; } }

figure { margin: 2rem 0; }
figure img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  background: var(--paper-warm);
}
figcaption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
  font-style: italic;
}

.pullquote {
  border-left: 3px solid var(--sand);
  padding: 0.5rem 0 0.5rem 1.25rem;
  margin: 2rem 0;
  font-family: Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.45;
}

.map-section {
  background: var(--paper-warm);
  padding: 3rem 0 4rem;
}
.map-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Leaflet map container */
#island-map {
  width: 100%;
  height: 520px;
  margin-top: 1rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  background: #f5f1e8;
}
@media (max-width: 700px) {
  #island-map { height: 400px; }
}
/* Tweak Leaflet popup to match site type */
.leaflet-popup-content-wrapper {
  border-radius: 4px;
}
.leaflet-popup-content {
  margin: 10px 14px;
  font-family: Georgia, serif;
}
.leaflet-popup-content a {
  color: var(--sea);
  font-weight: 600;
  text-decoration: none;
}
.leaflet-popup-content a:hover { text-decoration: underline; }
.leaflet-tooltip {
  font-family: -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.leaflet-container a.leaflet-popup-close-button {
  color: var(--ink-soft);
}

.island-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}
.island-card {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.island-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(20, 30, 50, 0.08);
  color: var(--ink);
}
.island-card .thumb {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-warm);
}
.island-card .body { padding: 1rem 1.2rem 1.2rem; }
.island-card h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.island-card .state {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sand);
  font-weight: 600;
}
.island-card p {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}


/* Island search and filter controls */
.island-filters {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.1rem;
  margin: 1.2rem 0 2rem;
  box-shadow: 0 2px 12px rgba(20, 30, 50, 0.04);
}
.filter-search label,
.filter-grid label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 700;
}
.filter-search input,
.filter-grid select {
  width: 100%;
  margin-top: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.98rem;
}
.filter-search input {
  padding: 0.8rem 0.9rem;
}
.filter-grid select {
  padding: 0.62rem 0.7rem;
}
.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.9rem;
  margin-top: 1rem;
}
.filter-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  margin-top: 1rem;
}
.checkbox-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--ink);
}
.checkbox-filter input {
  width: 1rem;
  height: 1rem;
}
#clear-filters {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper-warm);
  color: var(--ink);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
#clear-filters:hover {
  border-color: var(--sand);
  background: #fff;
}
#filter-count {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.no-results {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  color: var(--ink-soft);
}
.island-card[hidden] {
  display: none;
}

@media (max-width: 700px) {
  .island-filters { padding: 1rem; }
  #filter-count { margin-left: 0; flex-basis: 100%; }
}

/* Theme row for cross-cutting articles */
.theme-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}
.theme-row a {
  display: block;
  background: var(--paper-warm);
  color: var(--ink);
  padding: 0.85rem 1.1rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  text-decoration: none;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.theme-row a:hover {
  background: #fff;
  border-color: var(--sand);
  transform: translateY(-1px);
}
.theme-row a span {
  display: block;
  font-family: -apple-system, sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 0.15rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Article-specific layout for cross-cutting pages */
.article-island {
  margin: 2.5rem 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.article-island:last-of-type { border-bottom: none; }
.article-island h2 {
  margin-top: 0;
  margin-bottom: 0.3rem;
}
.article-island .meta-line {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.8rem;
}
.article-island .read-more {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
}

.related {
  background: var(--paper-warm);
  padding: 3rem 0;
  margin-top: 3rem;
}
.related h2 { margin-top: 0; }

.footer {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
  padding: 2rem 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-align: center;
}
.footer a { color: var(--ink-soft); }

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 1.5rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.breadcrumb a { color: var(--ink-soft); }

.mini-map {
  background: var(--paper-warm);
  border-radius: 4px;
  padding: 1rem;
  margin: 1.5rem 0;
}
.mini-map svg { width: 100%; max-width: 480px; height: auto; display: block; margin: 0 auto; }
.mini-map .land { fill: #d8c79a; stroke: #a08850; stroke-width: 1.5; }
.mini-map .pin { fill: #c1272d; stroke: #fff; stroke-width: 2; }
.mini-map p {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.5rem 0 0;
}

@media print {
  .site-header, .footer, .related, .hero { display: none; }
  body { font-size: 11pt; }
}

.map-popup-link {
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: #0c4a6e;
  text-decoration: none;
}

.leaflet-interactive {
  cursor: pointer;
}


/* Clickable island map pins */
.leaflet-interactive[role="link"],
.leaflet-overlay-pane svg path.leaflet-interactive {
  cursor: pointer;
  pointer-events: auto;
}

/* Native clickable island map pins (v3): actual anchor elements, not SVG paths */
.island-link-marker {
  background: transparent;
  border: 0;
}
.island-map-pin {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #c1272d;
  border: 2px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.22);
  cursor: pointer;
  text-decoration: none;
  pointer-events: auto;
}
.island-map-pin:hover,
.island-map-pin:focus {
  transform: scale(1.25);
  outline: 2px solid rgba(193,39,45,0.25);
  outline-offset: 2px;
}


.table-scroll { overflow-x: auto; }
.credits-table td, .credits-table th { vertical-align: top; }
.photo-credits-page .intro { max-width: 780px; }


/* OZTROVOK BUILD ADDITIONS */

/* New colour: deep navy used by the header and the homepage hero, intended
   to match the background colour of the hero illustration. Sample your
   image's actual background colour and paste the hex here for a perfect
   match. Used by .site-header, .header-breadcrumb, and .hero--graphic. */
:root {
  --hero-navy: #00132c;
}

/* Anchor-link offset under sticky header */
html { scroll-padding-top: 5rem; }

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 4px 0;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--sand);
  outline-offset: 2px;
}

/* Hero image as a real <img> child rather than CSS background */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero::after { z-index: 1; }
.hero-inner { z-index: 2; }

/* Homepage hero variant: graphic illustration on a deep-navy backdrop that
   matches the image's own background. Header above is navy too, so the top
   of the page reads as one continuous dark band. The hero fades to paper
   at the very bottom so it transitions smoothly into body content below. */
.hero--graphic {
  background-color: var(--hero-navy);
  color: #fff;
  align-items: center;
}
.hero--graphic h1 { color: #fff; }
.hero--graphic .hero-meta {
  color: var(--sand);
  opacity: 1;
  font-weight: 600;
}
.hero--graphic .hero-image {
  object-fit: contain;
  object-position: right center;
}
/* Photo darkening gradient is unhelpful on a flat illustration */
.hero--graphic::after { display: none; }

/* The whole hero is one solid navy (no gradient). The body content below
   meets the hero with a hard edge. */

/* Hero text: left-aligned, line-length-capped so it doesn't run into the right-side image */
.hero--graphic .hero-inner {
  text-align: left;
}
@media (min-width: 700px) {
  .hero--graphic .hero-inner {
    max-width: 880px; /* matches .wrap so hero text aligns vertically with body text */
  }
  .hero--graphic .hero-inner > * {
    max-width: 30rem;
  }
}

/* Sticky header: navy background to match the hero illustration. The brand
   wordmark, nav links, and breadcrumb sub-bar all flip to light-on-dark.
   Subtle shadow on scroll provides elevation feedback. z-index sits above
   Leaflet's pane stack (which goes up to ~800 for controls) so the map
   never paints over the navigation. */
.site-header {
  background: var(--hero-navy);
  border-bottom-color: transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  z-index: 1000;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
  border-bottom-color: transparent;
}

/* Brand wordmark on dark header: white "Oz", sand "trovok" stays */
.brand { color: #fff; }
/* (.brand span keeps its var(--sand) colour from the original CSS) */

/* Nav links: light by default, sand on hover, white when current section */
.nav a { color: rgba(255, 255, 255, 0.78); }
.nav a:hover { color: var(--sand); }

/* Breadcrumb sub-bar inside the header on inner pages — also navy now,
   with light text. The faint top border separates it visually from the
   main header row. */
.header-breadcrumb {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--hero-navy);
}
.header-breadcrumb .breadcrumb {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.header-breadcrumb .breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-weight: 600;
}
.header-breadcrumb .breadcrumb a:hover {
  color: var(--sand);
}

/* Active section indicator on the homepage nav (scrollspy) */
.nav a {
  position: relative;
  padding-bottom: 4px;
}
.nav a.is-current {
  color: #fff;
}
.nav a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--sand);
  border-radius: 1px;
}

/* Card thumbs are now <img>; keep visual parity with the old div */
.island-card img.thumb {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  background-color: var(--paper-warm);
}

/* Keyboard focus indicator on every interactive element.
   The skip-link and map pins keep their own (more visible) styling via
   later, more-specific rules. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 3px;
}

/* Map pin colour-coding by primary access mode */
.island-map-pin.pin-ferry  { background: #0c4a6e; }
.island-map-pin.pin-flight { background: #c98a3a; }
.island-map-pin.pin-bridge { background: #5b8c5a; }

/* Map legend below the Leaflet map */
.map-legend {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.map-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.legend-dot.pin-ferry  { background: #0c4a6e; }
.legend-dot.pin-flight { background: #c98a3a; }
.legend-dot.pin-bridge { background: #5b8c5a; }

/* Page meta footer (Published / Edited dates + share buttons) */
.page-meta {
  margin-top: 3em;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.page-dates {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 1rem;
}
.page-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.share-label {
  color: var(--ink-soft);
  margin-right: 0.25rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.share-btn:hover {
  border-color: var(--sand);
  background: #fff;
  color: var(--ink);
}
.share-btn:active { transform: scale(0.97); }

/* Visually hidden helper for screen-reader-only headings */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Higher-contrast focus state on map pins (was 25% opacity) */
.island-map-pin:hover,
.island-map-pin:focus,
.island-map-pin:focus-visible {
  transform: scale(1.25);
  outline: 3px solid #1a2332;
  outline-offset: 2px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .island-card:hover,
  .theme-row a:hover,
  .island-map-pin:hover,
  .island-map-pin:focus { transform: none; }
}