/* Fonts (DESIGN.md § Type): Instrument Sans + Noto Sans KR, loaded via the single Google Fonts
   <link> in base.njk. */

/* Mobile-first reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Anchor jumps (e.g. the nav "Regions" link and the breadcrumb, both targeting /#map) ease into
   place instead of snapping — guarded so anyone with reduced-motion set still gets the instant jump. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  font-size: 1rem; /* iOS Safari zooms on focus below 16px — never go smaller on form fields */
}

/* Base typography */
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
}

.page {
  flex: 1;
  padding: var(--space-5) var(--space-4);
}

/* Site-shell width (DESIGN.md "One container width site-wide") — the same --content-max-width
   cap as the header/footer/hero/region pages, not a page-specific narrower column. Text-heavy
   content inside caps itself further (the page sheets, region-page.css's region-header__intro)
   rather than the whole page running narrow. */
.content-page {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

h1,
h2,
h3,
h4 {
  line-height: var(--line-height-tight);
  font-weight: 600;
}

h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

a {
  color: var(--color-link);
}

/* DESIGN.md palette, one site-wide rule each instead of repeating the colour per component:
   in-site links darken to Green deep on hover, outbound (target="_blank") links are Orange
   text, Orange ink on hover. `html a:hover` (not bare `a:hover`) is deliberate: most components
   set their rest colour via a descendant selector like `.eligibility-result a`, which is the
   same specificity as a bare `a:hover` (one class + one element) — a tie that source order
   would resolve in the *component's* favour, since every component stylesheet loads after this
   one, silently blocking the hover colour. The extra `html` keeps this rule a plain element
   selector (no class) while adding a specificity point nothing else has, so it wins
   unconditionally over any single-class `.foo a`/`.foo a:hover`, regardless of load order.
   A component that genuinely needs different hover behaviour (hero.css .hero__scroll-cue's
   white photo-overlay text, region-page.css .region-breadcrumb's muted→soft-grey) uses two
   classes/pseudo-classes of its own to still outrank this — see those files for the exceptions. */
html a:hover {
  color: var(--color-primary-dark);
}

a[target="_blank"] {
  color: var(--color-accent);
}

a[target="_blank"]:hover {
  color: var(--color-accent-ink);
}

/* No global :visited dimming — nearly every link on this site is navigation or a CTA (nav,
   region cards, "Open <region>", map, breadcrumbs), and slate-blue "visited" links there read
   as broken. Prose links can opt back in via a scoped rule if that's ever wanted. */

/* Accessible focus state, visible on keyboard nav only */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: var(--z-nav-overlay);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-dark);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-2);
}

/* 44px touch targets for standalone text links/buttons: an invisible ::after enlarges the hit
   area without moving any layout. Inline prose links are exempt. */
@media (pointer: coarse) {
  .site-footer__link,
  .region-card__link,
  .dish-card__restaurant,
  .study-cafes__search,
  .region-guides__link,
  .settling-coliving-row__name,
  .settling-otherresult__link,
  .visa-inline-link,
  .note-plate__link,
  .about-why__card-link,
  .calculator-form__reset {
    position: relative;
  }
  .site-footer__link::after,
  .region-card__link::after,
  .dish-card__restaurant::after,
  .study-cafes__search::after,
  .region-guides__link::after,
  .settling-coliving-row__name::after,
  .settling-otherresult__link::after,
  .visa-inline-link::after,
  .note-plate__link::after,
  .about-why__card-link::after,
  .calculator-form__reset::after {
    content: "";
    position: absolute;
    inset: -14px -4px;
  }
  /* Already ~31px tall, so less slop is needed to reach 44px. */
  .region-card__link::after,
  .dish-card__restaurant::after {
    inset: -7px -4px;
  }
  .region-hero-gallery__nav {
    width: 44px;
    height: 44px;
  }
}