/* =====================
   GLOBAL STYLES
   These apply to the entire page.
   Any element that doesn't have more specific styling
   will inherit these defaults.
   ===================== */

body {
  font-family: Georgia, serif;   /* Serif font gives the site a warm, editorial feel */
  background-color: #fffdf7;     /* Slightly warm white — less harsh than pure #ffffff */
  color: #2c2c2c;                /* Dark gray instead of black — easier on the eyes */
  margin: 0;                     /* Removes the default gap browsers add around the page */
  padding: 0;
}

/* =====================
   HOME PAGE LAYOUT
   index.html only (it's the one page with a <header>).
   The page is a full-height column — header, cards, footer —
   so the cards sit in the middle of the window at any size,
   the same way the city pages' heroes fill the screen.
   ===================== */

body:has(> header) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;       /* Title, tiles and links sit as one centred group */
  --home-gap: clamp(14px, 2.6vh, 40px);
  /*
    One spacing value reused between every part of the home page,
    so the title-to-tiles gap matches the tiles-to-links gap.
  */
}

body:has(> header) main {
  max-width: min(1400px, 97vw);  /* Wider than the reading pages, and it follows the window */
  margin: var(--home-gap) auto 0;
  display: flex;
  flex-direction: column;        /* Cards, then the Map · Cars links directly beneath them */
  align-items: center;
}

/* On the home page the footer lives inside <main>, tucked under the cards,
   rather than being pinned to the bottom of the window. */
body:has(> header) footer {
  margin: var(--home-gap) 0 0;
  padding: 0 20px;
}

body:has(> header) footer p {
  margin: 0;                     /* Otherwise the <p>'s own margin widens the gap */
}

/* =====================
   HEADER
   Only used on index.html — the city pages
   use the hero image instead of a header.
   ===================== */

header {
  text-align: center;
  padding: 0 20px;
}

header h1 {
  font-size: clamp(1.5rem, 5.5vw, 5rem);
  margin-top: 0;
  /*
    clamp(min, preferred, max): the middle value scales with the window width
    (4vw = 4% of it), but never shrinks below 1.6rem or grows past 3.4rem.
  */
  margin-bottom: 5px;
  letter-spacing: 2px;           /* Spreads letters slightly — feels more considered */
}

.subtitle {
  /* 
    The dot means "target any element with class='subtitle'".
    Used for the dates and tagline under the main title on index.html.
  */
  font-size: clamp(0.85rem, 2.2vw, 2rem);
  margin: 0;                     /* The gap below comes from --home-gap instead */
  color: #888;                 /* Medium gray — visually quieter than body text */
  font-style: italic;
}

/* =====================
   NAVIGATION
   Shared across all pages — same nav appears
   at the top of index.html and every city page.
   ===================== */

nav {
  display: flex;                 /* Lines all the links up in a row */
  justify-content: center;       /* Centers that row horizontally on the page */
  gap: 30px;                     /* Space between each link */
  padding: 20px;
  background-color: #f5efe6;     /* Warm cream — a shade darker than the page background */
  border-bottom: 1px solid #e8e0d0;
}

nav a {
  text-decoration: none;         /* Removes the default underline from links */
  color: #5a3e28;                /* Warm brown */
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 1px;
}

nav a:hover {
  /* 
    :hover is a pseudo-class — only applies when the mouse is over the element.
    No JavaScript needed for this interactivity — pure CSS.
  */
  color: #c0392b;                /* Turns red on hover */
}

/* =====================
   CITY CARDS
   Only used on index.html.
   The three clickable cards linking to each city page.
   ===================== */

main {
  max-width: 900px;              /* Prevents content stretching too wide on large screens */
  margin: 15px auto;             /* "auto" on left/right centers the element horizontally */
  padding: 0 20px;               /* Side padding so content doesn't touch screen edges on mobile */
}

.city-cards {
  display: flex;                 /* Lines the cards up in a row */
  gap: clamp(12px, 2vw, 32px);   /* Gap grows with the window, like the cards do */
  width: 100%;
  flex-wrap: wrap;               /* Cards drop to the next line if the screen is too narrow */
  justify-content: center;
}

.card {
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  border: 1px solid #e8e0d0;
  border-radius: 8px;            /* Rounded corners */
  padding: clamp(8px, 1.2vw, 20px);
  flex: 0 1 clamp(140px, 30vw, 560px);  /* Card width tracks the window width... */
  min-width: 140px;                     /* ...but never squeezes below this — it wraps instead */
  height: clamp(150px, 50vh, 680px);    /* Height tracks the window height */
  box-sizing: border-box;
  text-decoration: none;         /* Cards are <a> tags — this removes the link underline */
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* Positions text at the bottom of the card */
  position: relative;
  overflow: hidden;
  /*
    transition makes the hover effect animate smoothly.
    Without it the card would snap instantly instead of lifting gently.
  */
}

/* On phones the cards wrap onto two rows, so each one has to be shorter
   to keep the whole set on screen. */
@media (max-width: 600px) {
  .card {
    height: clamp(130px, 26vh, 300px);
  }
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

.card:hover {
  transform: translateY(-4px);   /* Moves the card 4px upward — the "lift" effect */
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);  /* Larger shadow as if light source is below */
}

.card h2 {
  margin: 0 0 4px 0;
  color: white;
  text-align: center;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  font-size: clamp(0.9rem, 2.3vw, 2.4rem);
}

.card p {
  font-style: italic;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  font-size: clamp(0.65rem, 1.5vw, 1.4rem);
  line-height: 1.2;
}

/* =====================
   FOOTER
   Shared across all pages.
   ===================== */

footer {
  text-align: center;
  padding: 20px 20px;
  color: #5a3e28;
  font-style: normal;
  font-size: 1rem;
  border-top: none;
  margin-top: 20px;
}

footer a {
  color: #5a3e28;
  text-decoration: none;
}

footer a:hover {
  color: #c0392b;
}

/* =====================
   HERO IMAGE
   The full-screen photo at the top of each city page,
   with the city name overlaid in the bottom-left corner.
   ===================== */

.hero {
  position: relative;
  /* 
    position: relative makes this div the anchor point
    for the absolutely-positioned .hero-title inside it.
    Without this, the title wouldn't know where to position itself.
  */
  width: 100%;
  height: calc(100vh - 65px);
  /*
    calc() lets CSS do math mixing different units.
    100vh = full viewport height (the visible screen area).
    We subtract 65px to account for the nav bar height above the hero,
    so the hero fills exactly the remaining screen without overflowing.
  */
  overflow: hidden;              /* Clips the image to fit the hero container exactly */
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 
    object-fit: cover fills the container without stretching or squishing.
    It crops the image instead — like "zoom to fill" in photo apps.
  */
  object-position: center 25%;
  /*
    Controls WHERE the image is cropped from.
    "center 25%" means: centered horizontally, cropped from 25% down from the top.
    This was tuned to show the building and sky, 
    rather than defaulting to the middle of the image.
    Adjust this percentage to reframe the crop.
  */
}

.hero-title {
  position: absolute;
  /*
    Takes the title out of normal page flow and
    positions it relative to the nearest parent with position: relative —
    which is .hero. So it sits ON TOP of the image, not below it.
  */
  bottom: 40px;                  /* Always 40px from the bottom of the hero, regardless of height */
  left: 40px;
  color: white;
  font-size: 3.5rem;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  /* 
    Text shadow makes the white title readable over any photo,
    dark or light. The "0 2px 12px" means: no horizontal offset,
    2px down, 12px blur radius.
  */
}

/* =====================
   PAGE CONTENT
   Wrapper used on all city pages to contain
   the diary text below the hero image.
   ===================== */

.page-content {
  max-width: 800px;              /* Narrower than the homepage max — better for reading long text */
  margin: 60px auto;
  padding: 0 20px;
}

/* =====================
   DAY ENTRIES
   Each day of the diary is wrapped in a .day-entry div,
   separated by a .day-divider line.
   ===================== */

.day-entry {
  margin-bottom: 60px;           /* Generous space between days */
}

.day-date {
  font-size: 0.85rem;
  text-transform: uppercase;     /* Browser converts to caps — no need to type in all-caps */
  letter-spacing: 2px;           /* Wide spacing suits the small all-caps label style */
  color: #888;
  margin-bottom: 4px;
}

.day-entry h2 {
  font-size: 1.6rem;
  color: #5a3e28;
  margin-top: 0;
  margin-bottom: 16px;
}

.day-entry p {
  line-height: 1.8;              /* 1.8x the font size between lines — comfortable for reading */
  margin-bottom: 16px;
}

.day-divider {
  border: none;                  /* Removes the default <hr> border */
  border-top: 1px solid #e8e0d0; /* Replaces it with our warm-toned subtle line */
  margin: 60px 0;
}

/* =====================
   DIARY PHOTOS
   Inline photos within day entries.
   Single photos use figure.diary-photo;
   side-by-side pairs use div.diary-photo-grid.
   ===================== */

.diary-photo {
  margin: 32px 0;
}

.diary-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.diary-photo video {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: 4px;
}

.diary-photo figcaption,
.diary-photo-grid figcaption {
  font-size: 0.8rem;
  color: #888;
  font-style: italic;
  margin-top: 8px;
  text-align: center;
  line-height: 1.4;
}

.diary-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 32px 0;
}

.diary-photo-grid figure {
  margin: 0;
  overflow: hidden;              /* Required for object-position cropping to clip correctly */
  min-width: 0;                  /* Without this, a video's native pixel size (e.g. 1080x1920) inflates the 1fr grid track and blows out the layout */
}

.diary-photo-grid figure img,
.diary-photo-grid figure video {
  width: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
  aspect-ratio: 3 / 4;          /* All Tokyo photos are portrait — this crops them consistently */
}

.diary-photo-grid figure.landscape img,
.diary-photo-grid figure.landscape video {
  aspect-ratio: 4 / 3;          /* Landscape photos keep their native ratio instead of being cropped to portrait */
}

/* =====================
   DIARY LINKS
   Place name links within diary entries.
   Styled to match the site palette rather
   than using the default browser blue.
   ===================== */

.day-entry a {
  color: #5a3e28;                     /* Warm brown, matching headings and nav */
  text-decoration-style: dotted;      /* Dotted underline — subtler than solid */
}

.day-entry a:hover {
  color: #c0392b;                     /* Red on hover, matching nav links */
}

/* =====================
   PHOTO WALL
   Used on cars.html — a plain grid of photos
   with no captions, just alt text for accessibility.
   ===================== */

.photo-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin: 40px 0;
}

.photo-wall img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
  transition: transform 0.2s;
}

.photo-wall img:hover {
  transform: scale(1.03);
}

.photo-wall img {
  cursor: zoom-in;
}

/* =====================
   LIGHTBOX
   Full-size, full-aspect-ratio view shown when a
   photo-wall thumbnail is clicked. Hidden by default;
   .open toggles it on via cars.html's inline script.
   ===================== */

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  z-index: 100;
  cursor: zoom-out;
  padding: 40px;
  box-sizing: border-box;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}


/* =====================
   MAP PAGE
   map.html — Leaflet map of every place mentioned in the diary,
   with a filterable list of names beside it.
   ===================== */

.map-page h1 {
  text-align: center;
  color: #5a3e28;
  margin-bottom: 6px;
}

.map-intro {
  text-align: center;
  color: #888;
  font-style: italic;
  margin: 0 auto 24px;
  max-width: 560px;
}

.map-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.map-filter {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 6px 14px;
  border: 1px solid #ddd3c2;
  border-radius: 20px;
  background-color: #fffdf7;
  color: #999;                   /* Dimmed when the region is filtered out */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}

.map-filter.is-on {
  background-color: #f5efe6;
  color: #5a3e28;
  border-color: #c9bba4;
}

/* The little colour key inside each filter button */
.map-filter .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-tokyo    { background-color: #c0392b; }
.dot-kyoto    { background-color: #2f6f4e; }
.dot-takayama { background-color: #2b6a9c; }

.map-layout {
  display: grid;
  grid-template-columns: 1fr 260px;   /* Map on the left, name list on the right */
  gap: 24px;
  align-items: start;
}

#map {
  height: 620px;
  border-radius: 6px;
  border: 1px solid #e8e0d0;
  z-index: 0;                    /* Keeps Leaflet's panes below the site's lightbox */
}

/* The map markers themselves — a coloured dot with a white ring */
.pin {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  box-sizing: border-box;
}

.leaflet-popup-content {
  font-family: Georgia, serif;
  line-height: 1.5;
}

.popup-region {
  color: #888;
  font-size: 0.85em;
}

.place-list {
  max-height: 620px;
  overflow-y: auto;              /* The list scrolls independently of the map */
  padding-right: 6px;
}

.place-list-heading {
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 18px 0 6px;
}

.place-list-heading:first-child {
  margin-top: 0;
}

.place-list-group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.place-list-group li {
  margin-bottom: 4px;
}

.place-list-group a {
  color: #2c2c2c;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
}

.place-list-group a:hover {
  color: #c0392b;
  border-bottom-color: #c0392b;
}

.map-note {
  text-align: center;
  color: #999;
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 18px;
}

/* On narrow screens the list drops below the map instead of beside it */
@media (max-width: 780px) {
  .map-layout {
    grid-template-columns: 1fr;
  }

  #map {
    height: 420px;
  }

  .place-list {
    max-height: none;
    overflow-y: visible;
  }
}

/* Leaflet's built-in layer switcher (English / Japanese labels) */
.leaflet-control-layers {
  font-family: Georgia, serif;
  font-size: 0.9rem;
  border-radius: 4px;
  border-color: #e8e0d0;
}

.leaflet-control-layers label {
  color: #2c2c2c;
}

/* =====================
   DEEP LINKS FROM THE MAP
   Each place name in the diary carries an id, so map.html can link
   straight to the sentence it appears in. These styles stop the target
   landing flush against the top of the window and briefly highlight it
   so you can spot it in the paragraph.
   ===================== */

.page-content a[id] {
  scroll-margin-top: 90px;       /* Leaves breathing room above the jumped-to line */
}

.page-content a[id]:target {
  background-color: #fbeec9;
  box-shadow: 0 0 0 4px #fbeec9; /* Extends the highlight slightly past the text */
  border-radius: 2px;
  animation: place-flash 2.4s ease-out 1;
}

@keyframes place-flash {
  0%, 55% { background-color: #f6d97a; box-shadow: 0 0 0 4px #f6d97a; }
  100%    { background-color: #fbeec9; box-shadow: 0 0 0 4px #fbeec9; }
}