/* Voyaggora Travel Live guide strip (P2-5).
 *
 * WHY
 * Travel Live — 238 countries, per-source levels and dates — is the only data this site
 * produces itself, and until now it lived on /travel-live/, a page a traveller reading a
 * city guide never opens. Every guide now carries one strip at the top of its content:
 * "🇬🇷 Greece · US Level 2 · Updated Sep 24, 2026", clicking through to the country page.
 *
 * RULES
 *   - four severity styles: L1 quiet, L2 gold, L3 orange, L4 red. Green must not shout,
 *     so Level 1 is small type, a transparent chip and a thin rule — never a filled block
 *     and never a banner. L0 ("not listed by any of the three") is neutral grey and
 *     inherits the same quiet treatment: absence of an advisory is not news.
 *   - this file paints; it never invents. Every word on screen is written into the page
 *     by scripts/build-advisories.mjs from the Travel Live hub table and the country
 *     pages. There is no JavaScript here at all, so the strip is correct with scripts
 *     blocked and readable by a crawler.
 *   - it is linked only by the 182 guides (the generator injects the <link>), so a page
 *     without a strip loads no extra bytes and a class name like .adv cannot collide.
 *
 * SEAM
 * Markup and data attributes: scripts/build-advisories.mjs (block between
 * <!--ADV-STRIP--> and <!--/ADV-STRIP-->). Classes: .adv plus .adv-flag, .adv-name,
 * .adv-lv, .adv-say, .adv-note, .adv-upd, .adv-go, and the severity classes .adv-l0 …
 * .adv-l4 which set the single custom property --adv-c the whole card is tinted from.
 */

.adv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .7rem;
  box-sizing: border-box;
  margin: 0 0 .3rem;
  padding: .6rem .95rem;
  background: #fff;
  color: #12304a;
  text-decoration: none;
  font: inherit;
  border: 1px solid rgba(18, 48, 74, .10);
  border-left: 4px solid var(--adv-c, #4b6478);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(18, 90, 130, .10);
  transition: border-color .2s, box-shadow .2s;
}
/* Hover changes the three neutral sides only: the left rule carries the severity and
   must not turn blue under the cursor. */
.adv:hover {
  border-top-color: #0e86b0;
  border-right-color: #0e86b0;
  border-bottom-color: #0e86b0;
  box-shadow: 0 14px 32px rgba(18, 90, 130, .16);
}
.adv:focus-visible { outline: 3px solid #0e86b0; outline-offset: 2px; }

/* Severity. One custom property per level; everything below is written against it. */
.adv-l0 { --adv-c: #8a97a5; }
.adv-l1 { --adv-c: #2e8b57; }
.adv-l2 { --adv-c: #c9a227; }
.adv-l3 { --adv-c: #d2691e; }
.adv-l4 { --adv-c: #b3402c; }

.adv-flag { font-size: 1.05rem; line-height: 1; }
.adv-name { font-weight: 700; font-size: .95rem; color: #12304a; }
.adv-say { font-size: .84rem; color: #4b6478; }
.adv-note {
  font-size: .84rem;
  color: #26445c;
  border-left: 2px solid rgba(18, 48, 74, .14);
  padding-left: .55rem;
}
.adv-upd { margin-left: auto; font-size: .76rem; color: #4b6478; white-space: nowrap; }
.adv-go { font-size: .8rem; font-weight: 700; color: #0b6f95; }

.adv-lv {
  flex: none;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .03em;
  padding: .16rem .6rem;
  border-radius: 999px;
  background: var(--adv-c);
  color: #fff;
  white-space: nowrap;
}

/* Level 1 (and the neutral "not listed") are compact and quiet: transparent chip, thin
   outline, smaller type, and the generator leaves the advisory note off entirely. This
   is the whole "green must not shout" rule, in one block. */
.adv-l0, .adv-l1 { padding: .45rem .8rem; gap: .2rem .6rem; }
.adv-l0 .adv-name, .adv-l1 .adv-name { font-size: .88rem; }
.adv-l1 .adv-lv {
  background: transparent;
  color: #256b47;
  border: 1px solid rgba(46, 139, 87, .38);
  font-weight: 600;
}
.adv-l0 .adv-lv {
  background: transparent;
  color: #4b6478;
  border: 1px solid rgba(75, 100, 120, .35);
  font-weight: 600;
}

@media (max-width: 600px) {
  .adv { padding: .5rem .75rem; gap: .25rem .55rem; }
  .adv-note { flex: 1 1 100%; border-left: 0; padding-left: 0; }
  .adv-upd { margin-left: 0; }
  .adv-lv { font-size: .72rem; }
}

@media print {
  .adv { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adv { transition: none; }
}

@media (forced-colors: active) {
  .adv { border: 1px solid CanvasText; }
}