/* =========
   Design tokens
   ========= */
:root{
  --bg: #fafafa;
  --text: #222;
  --muted: #667085;
  --border: #e5e7eb;
  --accent: #2563eb;       /* link & focus */
  --accent-ink: #fff;
  --card: #fff;
  --table-stripe: #fafafa;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --maxw: 860px;
  --space: 1rem;
  --space-lg: 2rem;
}

/* Optional automatic dark mode (respects OS setting) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0f16; --text:#e8eaed; --muted:#9aa0a6; --border:#1f2937;
    --accent:#60a5fa; --accent-ink:#0b0f16; --card:#111827; --table-stripe:#0f1622;
    --shadow:none;
  }
}

/* =========
   Global reset-ish
   ========= */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

body {
  background: var(--bg) url("img/ely-v2.jpg") no-repeat center top fixed;
  background-size: cover; /* scale to fill viewport */
}

/* =========
   Layout
   ========= */
.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: calc(var(--space)*1.5) var(--space);
}

section{ margin-block: var(--space-lg); }

/* =========
   Headings & text
   ========= */
h1,h2,h3{
  margin: 0 0 .6rem;
  line-height:1.2;
}
h1{ font-size: clamp(28px, 4vw, 40px); letter-spacing:-.02em; }
h2{ font-size: clamp(20px, 3vw, 26px); margin-top: var(--space-lg); }
p{ margin: .5rem 0; color:var(--text); }
.muted{ color:var(--muted); }

/* =========
   Links & focus
   ========= */
a{
  color:var(--accent);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }
:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

/* =========
   Tables (for Goodreads list)
   ========= */
table{
  width:100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;         /* rounds table corners */
  box-shadow: var(--shadow);
}
thead th{
  text-align:left;
  font-weight:600;
  background: color-mix(in oklab, var(--card) 70%, var(--border));
}
th, td{
  padding: .6rem .75rem;
  border-bottom:1px solid var(--border);
  vertical-align: top;
}
tbody tr:nth-child(even){ background: var(--table-stripe); }
tbody tr:hover{ background: color-mix(in oklab, var(--table-stripe) 60%, var(--card)); }

/* Stars */
.stars{ white-space:nowrap; color:#f5b301; } /* gold */
@media (prefers-color-scheme: dark){ .stars{ color:#facc15; }}

/* =========
   Card & grid primitives (for future sections)
   ========= */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding: var(--space);
  box-shadow: var(--shadow);
}
.grid{
  display:grid;
  gap: var(--space);
  grid-template-columns: repeat(12, 1fr);
}
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }
@media (max-width: 720px){
  .col-6,.col-4{ grid-column: span 12; }
}

/* Buttons (for future controls) */
.button{
  display:inline-block;
  padding:.55rem .9rem;
  border-radius: calc(var(--radius) - 4px);
  border:1px solid var(--border);
  background: var(--card);
  color: var(--text);
  text-decoration:none;
  box-shadow: var(--shadow);
}
.button.primary{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}
.button:hover{ filter: brightness(1.03); }

/* Small utilities */
.center{ text-align:center; }
.right{ text-align:right; }
.spacious > * + *{ margin-top:.5rem; }


/* Horizontal row scroller */
.row-scroll{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 0 10px;
  scroll-snap-type: x proximity;     /* nice snap feel, not too strict */
  -webkit-overflow-scrolling: touch; /* smooth on iOS */
}
.row-scroll > *{
  flex: 0 0 auto;                    /* prevent wrapping */
  scroll-snap-align: start;
}


/* Pull quote (subtle variant) */
.pull-quote{
  margin: 1.5rem 0 2rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--border);
  background: var(--card);
   border-radius: var(--radius);
}

.pull-quote blockquote{
  margin: 0;
  font-style: italic;
  font-size: .95rem;              /* smaller than body text */
  color: var(--muted);            /* softer gray */
  line-height: 1.6;
}

.pull-quote figcaption{
  margin-top: .4rem;
  font-size: .85rem;
  color: var(--muted);
  text-align: right;
}

.pull-quote cite{ font-style: normal; }

/* Scrollable table with sticky header */
.table-scroll {
  max-height: 500px;
  overflow-y: auto;                 /* the scroller */
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* override the global table{ overflow:hidden; border-radius; box-shadow } */
.table-scroll table {
  width: 100%;
  border-collapse: separate;        /* sticky works with 'separate' */
  border-spacing: 0;
  margin: 0;
  border: none;
  overflow: visible;                /* <-- critical: cancel global overflow:hidden */
  border-radius: 0;                 /* wrapper handles rounding */
  box-shadow: none;                 /* wrapper handles shadow */
}

/* make the header stick to the top of the scroller */
.table-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 2;
  box-shadow: 0 1px 0 var(--border), 0 6px 12px rgba(0,0,0,.03);
}

.image-container {
  display: flex;
  justify-content: center;
}

.ig-container {
  max-height: 450px;   /* or whatever fits your layout */
  overflow-y: auto;    /* makes it scrollable if it overflows */
  /*border-radius: 8px;  /* optional, to match your cards */
}

/* same box for any media embed */
.embed-box{
  height: 460px;         /* pick your target height */
  overflow: auto;        /* scroll if content is taller */
  border-radius: 8px;    /* optional, looks nice under the card */
}

/* ensure these cards stretch to the same height in the grid */
.grid{ align-items: stretch; }
.grid > .col-6 > .card{ height: 100%; display: flex; flex-direction: column; }
.grid > .col-6 > .card .embed-box{ margin-top: .5rem; }

/* Map box */
#travel-map{
  height: 420px;              /* adjust to taste */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Popup styling */
.leaflet-popup-content { margin: .5rem; }
.popup img{
  width: 100%; height: auto; display: block;
  border-radius: 8px; box-shadow: var(--shadow); margin-bottom: .5rem;
}
.popup-meta{ line-height: 1.3; margin-bottom: .25rem; }
.popup-cap{ margin: .25rem 0 0; font-size: .9rem; color: var(--muted); }

/* Make leaflet controls match your vibe a bit */
.leaflet-control-zoom a { border-radius: 6px; }

#lightbox {
  position: fixed; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85);
  z-index: 9999;               /* above leaflet/popups */
  cursor: zoom-out;
  padding: 4vmin;              /* edge breathing room */
}
#lightbox.open { display: flex; }
#lightbox img {
  max-width: 92vw; max-height: 92vh;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Map-local lightbox overlay */
#travel-wrap { position: relative; }

#mapzoom{
  position: absolute;
  inset: 0;
  display: none;               /* open -> flex */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  border-radius: var(--radius);
  z-index: 1000;               /* above Leaflet controls/panes */
  cursor: zoom-out;
  padding: 2vmin;
}

/* show overlay */
#mapzoom.open{ display: flex; }

/* make the image unquestionably visible and on top */
#mapzoom img{
  display: block;
  max-width: 98%;
  max-height: 98%;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: 1 !important;
  position: relative;
  z-index: 2 !important;
}

/* close button */
#mapzoom-close{
  position: absolute;
  top: 8px; right: 8px;
  width: 36px; height: 36px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 90%, transparent);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 18px; line-height: 1;
  z-index: 3;                  /* above image */
}

#mapzoom-close:hover{ filter: brightness(1.05); }