*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.65;
  margin: 0;
  padding: 1rem;
  color: #1a1a1a;
  background: #fff;
}

a { color: #005fcc; text-decoration: underline; text-underline-offset: 3px; }
a:visited { color: #7a26b5; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; border-radius: 2px; }

header {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  text-align: center;
}

header > a:first-child {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
  text-decoration: none;
  color: #1a1a1a;
}
header > a:first-child:visited { color: #1a1a1a; }

nav { margin-bottom: 0.4rem; font-size: 0.9rem; }

details { display: inline-block; vertical-align: middle; }
details + details { margin-left: 1rem; }
summary { cursor: pointer; list-style: none; font-size: 0.9rem; }
summary::-webkit-details-marker, summary::marker { display: none; }
summary::after { content: " ▾"; font-size: 0.7em; }
details[open] summary::after { content: " ▴"; }
details > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
  gap: 0.2rem;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid #ddd;
  margin-top: 0.25rem;
}
details > div a { text-decoration: none; padding: 0.2rem 0.3rem; font-size: 0.8rem; text-align: center; display: block; color: #1a1a1a; }
details > div a:visited { color: #1a1a1a; }
details > div a:hover, details > div a[aria-current] { background: #f0f0f0; font-weight: 600; }
details > div.country-list { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
details > div.country-list a { text-align: left; white-space: nowrap; }

h1 { margin: 0 0 1rem; font-size: 1.6rem; }
h1 small { font-size: 0.55em; color: #666; font-weight: normal; }
h2 { font-size: 1.15rem; border-bottom: 1px solid #eee; padding-bottom: 0.25rem; }
h3 { font-size: 1rem; margin-bottom: 0.4rem; }

section { margin-bottom: 2rem; }
article { margin-bottom: 1.25rem; }

.emnum { font-size: 1.5rem; font-weight: bold; }
.emrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; border: 3px solid #1a1a1a; padding: 0.5rem 0.75rem; }
.emrow span { display: inline-flex; align-items: baseline; gap: 0.4rem; flex: 1 1 auto; justify-content: center; }
.emrow span:first-child { flex: 0 0 100%; justify-content: center; }
.emrow-center { justify-content: center; gap: 1rem; }

ul { list-style: none; padding-left: 0; margin: 0.25rem 0; }
li { margin-bottom: 0.3rem; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
tr:nth-child(even) td { background: #f7f7f7; }
td { padding: 0.35rem 0.6rem; border-bottom: 1px solid #eee; vertical-align: top; }
td:first-child, th { color: #555; white-space: nowrap; }
th { font-weight: 600; text-align: left; }

strong { color: inherit; }

.disclaimer-text {
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid #ddd;
  font-size: 0.75rem;
  color: #666;
}
.disclaimer-text p { margin: 0; }

/* ── Index / start page ── */
.lang-grid { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.lang-btn {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border: 2px solid #ccc;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: #1a1a1a;
}
.lang-btn:visited { color: #1a1a1a; }
.lang-btn.lang-active { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
.lang-btn:hover:not(.lang-active) { border-color: #555; }

.country-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.5rem;
}
.country-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.75rem 0.4rem;
  border: 1px solid #ddd;
  text-align: center;
}
.country-card { text-decoration: none; color: #1a1a1a; }
.country-card:visited { color: #1a1a1a; }
.country-card:hover { border-color: #555; background: #f8f8f8; }
.cflag { font-size: 1.75rem; line-height: 1; display: block; margin-bottom: 0.25rem; }
.cname { font-weight: 600; font-size: 0.875rem; display: block; }
.cnative { font-size: 0.75rem; color: #666; display: block; }


/* ── Desktop: A4 single-page layout (794 × 1123 px at 96 dpi) ── */
@media (min-width: 720px) {
  body {
    padding: 1.25rem 1.5rem;
    font-size: 0.7rem;
    line-height: 1.5;
    background: #e8e8e8;
  }

  main {
    max-width: 794px;
    min-height: 1123px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
  }

  header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
  }

  h1 { font-size: 1.3rem; margin-bottom: 0.6rem; }
  h2 { font-size: 1rem; }
  h3 { font-size: 0.875rem; margin-bottom: 0.25rem; }

  section { margin-bottom: 0.85rem; }
  article { margin-bottom: 0.55rem; }

  .emrow span { justify-content: flex-start; }

  li { margin-bottom: 0.15rem; }
  ul { margin: 0.15rem 0; }

  td { padding: 0.15rem 0.35rem; }
  table { font-size: 0.7rem; }

  .country-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 0.2rem;
  }
  .country-card { padding: 0.2rem 0.15rem; }
  .cflag { font-size: 1rem; margin-bottom: 0.1rem; }
  .cname { font-size: 0.6rem; }
  .cnative { font-size: 0.5rem; }

  /* Tips + Recovery sections: 3 columns */
  .col3 > ul {
    columns: 3;
    column-gap: 1rem;
  }
  .col3 > ul > li {
    break-inside: avoid;
  }
}

/* ── Print: same 3-column layout, clean for A4 paper ── */
@media print {
  details { display: none; }
  main::after {
    content: "helphelphelp.org";
    display: block;
    text-align: center;
    margin-top: 4mm;
    padding-top: 2mm;
    border-top: 0.5pt solid #aaa;
    font-size: 7pt;
    color: #666;
  }
  @page { size: A4 portrait; margin: 0; }

  body {
    padding: 10mm 14mm;
    font-size: 7.5pt;
    line-height: 1.4;
    background: #fff;
    color: #000;
  }

  header { border-bottom: 0.5pt solid #aaa; margin-bottom: 4mm; padding-bottom: 2mm; }
  nav, header > a { display: none; }

  h1 { font-size: 13pt; margin-bottom: 3mm; }
  h2 { font-size: 10pt; }
  h3 { font-size: 7.5pt; margin-bottom: 1mm; }

  section { margin-bottom: 3mm; }
  article { margin-bottom: 2mm; }
  li { margin-bottom: 0; }

  td { padding: 0.4mm 1.5mm; }
  table { font-size: 7pt; }

  strong { color: inherit; }

  .col3 > ul {
    columns: 3;
    column-gap: 6mm;
  }
  .col3 > ul > li {
    break-inside: avoid;
  }
}