/* JOURNEY ATLAS — shared visual rules across top and country pages */

:root{
  --ja-header-height:82px;
  --ja-header-mobile:70px;
  --ja-paper:#f7f3e9;
  --ja-soft:#fbf8f0;
  --ja-line:#d8d0c0;
  --ja-navy:#12365c;
  --ja-ui:"Zen Kaku Gothic New","Hanken Grotesk",sans-serif;
}

/* ---------- GLOBAL HEADER LANGUAGE ---------- */
.top-header.shell,
.site-header.page-shell{
  position:fixed!important;
  inset:0 0 auto 0!important;
  z-index:100!important;
  width:100%!important;
  height:var(--ja-header-height)!important;
  min-height:var(--ja-header-height)!important;
  margin:0!important;
  padding-inline:max(28px,calc((100vw - 1460px)/2))!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:36px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease,backdrop-filter .22s ease;
}

.top-header.shell.is-scroll-sticky,
.site-header.page-shell.is-scroll-sticky{
  background:rgba(247,243,233,.96)!important;
  border-bottom:1px solid rgba(11,44,87,.11)!important;
  box-shadow:0 3px 14px rgba(9,42,75,.045)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

html{scroll-padding-top:96px!important;}

/* Keep country identity clear of the persistent transparent header. */
.country-page .hero-copy{
  padding-top:calc(var(--ja-header-height) + 38px)!important;
}

.wordmark,
.country-brand__wordmark{
  display:block;
  color:var(--ja-navy)!important;
  font-family:"Hanken Grotesk",sans-serif!important;
  font-size:clamp(23px,1.75vw,29px)!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:.23em!important;
  white-space:nowrap;
}
.brand-block,
.country-brand{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:5px!important;
  color:inherit!important;
  text-decoration:none!important;
}
.brand-block small,
.country-brand small{
  display:block!important;
  color:#62717d!important;
  font-family:var(--ja-ui)!important;
  font-size:9.5px!important;
  font-weight:500!important;
  line-height:1.35!important;
  letter-spacing:.04em!important;
  white-space:nowrap;
}

.top-header nav,
.utility-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:clamp(22px,2.5vw,40px)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  font-family:var(--ja-ui)!important;
  font-size:12.5px!important;
  line-height:1!important;
}
.utility-nav a{
  min-width:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ja-navy)!important;
  font-family:var(--ja-ui)!important;
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  white-space:nowrap;
}
.utility-nav a:hover,
.utility-nav a:focus-visible{
  background:transparent!important;
  color:#092a4b!important;
  text-decoration:underline;
  text-underline-offset:5px;
  outline:none!important;
}

/* ---------- COUNTRY HERO: PRIMARY TRAVEL THEMES ---------- */
.country-theme-context{
  width:360px;
  max-width:100%;
  margin-top:20px;
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.country-theme-context[hidden]{display:none!important;}
.country-theme-context__label{
  flex:0 0 auto;
  padding-top:5px;
  color:#8a6b55;
  font-family:"Spline Sans Mono",ui-monospace,monospace;
  font-size:8.5px;
  font-weight:500;
  line-height:1.25;
  letter-spacing:.12em;
}
.country-theme-context__list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.country-theme-chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 9px 4px;
  border:1px solid rgba(18,54,92,.16);
  border-radius:999px;
  background:rgba(251,248,240,.78);
  color:#12365c;
  font-family:var(--ja-ui);
  font-size:10.5px;
  font-weight:600;
  line-height:1.3;
  white-space:nowrap;
}

/* ---------- TOP PAGE: SAME-LEVEL HEADINGS ---------- */
.countries .section-head h2,
.detail-heading h2,
.lens-head h2,
.about-note__label strong{
  margin-top:0!important;
  font-family:var(--ja-ui)!important;
  font-size:20px!important;
  line-height:1.35!important;
  font-weight:700!important;
  letter-spacing:0!important;
  color:var(--ja-navy)!important;
}

/* Country discovery should use the same paper panel as map/theme discovery. */
.countries{
  background:var(--ja-soft)!important;
  border-color:var(--ja-line)!important;
}

/* ---------- COUNTRY MAP / EDITORIAL HEADS ---------- */
.panel-title-wrap{
  display:block!important;
  min-height:0!important;
  margin-bottom:18px!important;
}

/* The SVGs are generated on a 1200 × 760 canvas. Match that ratio so the
   map image and coordinate marker layer share exactly the same geometry. */
.map-art{
  aspect-ratio:1200 / 760!important;
}
.map-base{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

.scenes-heading,
.atlas-extras__head,
.travel-trivia__head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,38%)!important;
  align-items:start!important;
  gap:36px!important;
  min-height:0!important;
  margin-bottom:18px!important;
}
.panel-title-copy,
.scenes-title-wrap,
.atlas-extras__head>div,
.travel-trivia__head>div{min-width:0;}

.scenes-intro,
.atlas-extras__intro,
.travel-trivia__intro{
  justify-self:end!important;
  align-self:start!important;
  width:100%!important;
  max-width:470px!important;
  margin:0!important;
  padding-top:25px!important;
  color:#66717a!important;
  font-size:11.5px!important;
  line-height:1.7!important;
  text-align:right!important;
}
.scenes-intro{white-space:nowrap;}

.map-legend--below{
  justify-content:flex-end!important;
  margin:10px 2px 0!important;
}

@media(max-width:1000px){
  .scenes-heading,
  .atlas-extras__head,
  .travel-trivia__head{
    grid-template-columns:minmax(0,1fr) minmax(270px,40%)!important;
    gap:24px!important;
  }
  .scenes-intro{white-space:normal;}
}

@media(max-width:760px){
  :root{--ja-header-height:var(--ja-header-mobile);}
  html{scroll-padding-top:82px!important;}
  .top-header.shell,
  .site-header.page-shell{
    height:var(--ja-header-mobile)!important;
    min-height:var(--ja-header-mobile)!important;
    padding-inline:18px!important;
    gap:18px!important;
  }
  .country-page .hero-copy{
    padding-top:calc(var(--ja-header-mobile) + 24px)!important;
  }
  .wordmark,
  .country-brand__wordmark{
    font-size:clamp(19px,5.8vw,23px)!important;
  }
  .brand-block small,
  .country-brand small{display:none!important;}
  .top-header nav,
  .utility-nav{
    gap:14px!important;
    font-size:11px!important;
  }
  .utility-nav a{font-size:11px!important;}

  .country-theme-context{
    margin-top:16px;
    display:block;
  }
  .country-theme-context__label{
    display:block;
    padding-top:0;
    margin-bottom:6px;
  }

  .panel-title-wrap,
  .scenes-heading,
  .atlas-extras__head,
  .travel-trivia__head{
    display:block!important;
    min-height:0!important;
  }
  .scenes-intro,
  .atlas-extras__intro,
  .travel-trivia__intro{
    max-width:none!important;
    margin-top:8px!important;
    padding-top:0!important;
    text-align:left!important;
    white-space:normal;
  }
  .map-legend--below{
    justify-content:flex-start!important;
    margin-top:8px!important;
  }
}