/* ---------------------------------------------------------------------------
   munich.css — the travel-specific components of this guide.

   Load order is theme-google.css → shared.css → this file. Everything here
   consumes theme tokens; nothing here defines a colour the theme could own.

   What is NOT in this file, deliberately: cards, card photos, photo insets
   and credits. Those started here and were lifted into shared.css section 18
   when photos became a guide-wide capability, so this guide now inherits
   them. Do not re-add local .card rules — they would silently win over the
   shell and this guide would drift out of the design system again.

   What is also gone: the .spectrum rule. It was a decorative 6px blue→gold
   stripe across the top, and the shell now pins a 6px reading-progress bar in
   exactly that spot — with the Google four-colour fill, which is the same
   idea. Two stacked stripes read as a rendering bug, so the decorative one
   gave way to the functional one.

   Font sizes are mostly absent on purpose. The originals ran 11px–18px, below
   the 20px body / 13px floor; the shell's scale is correct, so these rules
   set size only where a component genuinely needs one (the uppercase
   micro-labels), and never below 0.8125rem = 13px.
   --------------------------------------------------------------------------- */

:root {
  /* The one colour with no honest role token. Munich's gold is decorative —
     it marks festive content (beer, food, tips) as a nod to the '72 Olympic
     palette. Mapping it to --warning would be wrong in the way that matters:
     every .tip box and rule-list bullet would then read as a caution. It
     stays guide-local, which is why it carries a guide prefix. */
  --munich-gold: #B8842A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --munich-gold: #E0A83C;   /* lifted, like every accent in dark mode */
  }
}

/* --- section headers ----------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--grey-900);
  padding-bottom: 8px;
}
.section-head .icon,
.place-callout .icon {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.subhead {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-700);
  margin: 26px 0 10px;
}

.history-lede {
  color: var(--grey-700);
  margin: -4px 0 18px;
  max-width: 56ch;
}

/* --- the map link that ends most cards ----------------------------------- */

a.pin {
  align-self: flex-start;
  margin-top: 2px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-hover);
  padding-bottom: 1px;
}
a.pin:hover { color: var(--accent-hover); }

.tip {
  color: var(--grey-900);
  background: color-mix(in srgb, var(--munich-gold) 14%, transparent);
  border-left: 3px solid var(--munich-gold);
  padding: 8px 10px;
}
/* Links here take the hover blue at rest. The gold tint composites to #F5EEE1
   in light mode, where the resting --accent lands at 3.90:1 — under AA. The
   darker --accent-hover gives 6.02:1, and 8.81:1 against the dark tint. No
   affordance is lost: link hover in this shell is the underline, not a colour
   change, so the hover state still reads. */
.tip a { color: var(--accent-hover); }

/* --- beer + food: chalkboard-style list ---------------------------------- */

.menu {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 4px 20px;
}
.menu-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
}
.menu-row + .menu-row { border-top: 1px dashed var(--grey-200); }
.menu-row .thumb,
.place-callout .thumb {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.menu-row .text { flex: 1; min-width: 0; }
.menu-row .name {
  display: block;
  font-weight: 700;
}
.menu-row .note {
  color: var(--grey-700);
  text-align: right;
  max-width: 30ch;
}
.menu-row .text .note {
  text-align: left;
  max-width: none;
  margin-top: 2px;
}

/* --- place callout --------------------------------------------------------

   Named .place-callout, NOT .callout. The shell owns .callout and its
   --info/--warning/--tip variants, and this file loads after it, so a local
   .callout rule wins at equal specificity: writing `class="callout
   callout--info"` in this guide would render the shell's blue info box with
   this rule's background instead. Same trap as a local .card, which the header
   above forbids for the same reason.
   -------------------------------------------------------------------------- */

.place-callout {
  margin-top: 14px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.place-callout-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.place-callout h3 { margin: 0; }
.place-callout p { margin: 0 0 12px; color: var(--grey-700); }
.place-callout a.pin { display: inline-block; }

/* --- rule list ------------------------------------------------------------ */

.rule-list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rule-list li {
  color: var(--grey-700);
  padding-left: 18px;
  position: relative;
}
.rule-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  background: var(--munich-gold);
}
.rule-list b { color: var(--grey-900); }
.rule-list a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-hover);
  font-weight: 700;
}

/* --- the walking route ---------------------------------------------------- */

.route {
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
}
.route-stop {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
}
.route-stop + .route-stop { border-top: 1px solid var(--grey-200); }
.route-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--grey-700);
  flex: none;
  width: 22px;
  padding-top: 1px;
}
.route-stop h4 { margin: 0 0 4px; }
.route-stop p { margin: 0; color: var(--grey-700); }
.route-stop .aside {
  display: block;
  margin-top: 6px;
  color: var(--grey-900);
}
.route-stop a.pin { display: block; margin-top: 8px; }

/* --- memorial: quiet, no festive accents ---------------------------------- */

.memorial {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-top: 3px solid var(--grey-900);
  border-radius: var(--radius-sm);
  padding: 20px 20px 18px;
}
.memorial h3 { margin: 0 0 8px; }
.memorial p { margin: 0 0 10px; color: var(--grey-700); }
.memorial .logistics {
  color: var(--grey-900);
  background: color-mix(in srgb, var(--grey-500) 20%, transparent);
  border-left: 3px solid var(--grey-700);
  padding: 10px 12px;
  margin-top: 12px;
}
.memorial .logistics + .logistics { margin-top: 8px; }

/* --- masthead + share ----------------------------------------------------- */

/* Class, not a bare `header`: the shell's mobile top bar is also a <header>,
   and a bare selector would style both. */
.guide-header {
  padding: 8px 0 28px;
}
/* The shell's .eyebrow is drawn for the sidebar header. Scoped here so the
   masthead keeps the wider tracking the original was set in. */
.guide-header .eyebrow {
  letter-spacing: 0.16em;
}

/* Dropped with the old markup: the footer and its .sig. The <footer> was
   empty — the sign-off lives in the masthead — so its rules were dead. */

.share-box {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 24px;
}
.share-box img {
  width: 76px;
  height: 76px;
  flex: none;
  /* Stays literal white: a QR code needs a white quiet zone to scan, in dark
     mode too. This is the one place a surface token would break function. */
  background: #FFFFFF;
  padding: 5px;
  border-radius: var(--radius-sm);
}
.share-box .label {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-700);
  font-weight: 700;
  margin: 0 0 4px;
}
.share-box p { margin: 0 0 2px; color: var(--grey-700); }
.share-box a.url {
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-hover);
}

@media (max-width: 720px) {
  .menu-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .menu-row .note { text-align: left; max-width: none; }
  .share-box { flex-direction: column; align-items: flex-start; }
}
</content>