/* The eligibility directory extends the approved ivory, ink, blue, and sage system. */
.countries-hero { padding: 44px 0 66px; border-bottom: 1px solid var(--line); }
.country-hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 100px; }
.country-hero-grid > * { min-width: 0; }
.countries-hero h1 { font-size: clamp(42px, 4.6vw, 66px); line-height: 1.08; letter-spacing: -.065em; }
.countries-hero h1 > span { color: var(--blue); white-space: normal; }
.countries-hero .eyebrow { margin-bottom: 25px; }
.country-hero-grid > div > p:not(.eyebrow) { color: var(--muted); font-size: 16px; line-height: 1.85; max-width: 565px; margin-top: 26px; }
.country-hero-note { padding: 32px; background: var(--sage); border: 1px solid #d6ddcd; border-radius: 12px; }
.country-hero-note > .large-icon { background: #f7f8f1; }
.country-hero-note h2 { font-size: 28px; letter-spacing: -.04em; margin-top: 19px; }
.country-hero-note p { font-size: 14px; color: #525d49; margin-top: 12px; line-height: 1.75; }
.country-hero-note ol { list-style: none; padding: 0; margin: 23px 0 0; }
.country-hero-note li { display: flex; gap: 16px; padding: 11px 0; border-top: 1px solid #ccd4c2; font-size: 13px; }
.country-hero-note li > span { font-size: 11px; color: #5d6b51; }
.country-directory { padding-top: 65px; }
.country-directory-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.country-directory-heading h2 { font-size: 46px; line-height: 1.1; }
.country-directory-heading .eyebrow { margin-bottom: 14px; }
.country-directory-heading > p { font-size: 12px; color: var(--muted); padding-bottom: 5px; }
.country-directory-heading time { display: block; color: var(--ink); }
.country-directory-intro { max-width: 850px; font-size: 15px; color: var(--muted); line-height: 1.8; margin-top: 22px; }
.country-controls { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; margin-top: 32px; }
.country-controls label, .country-state-picker label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 9px; }
.country-search > div { display: flex; gap: 12px; align-items: center; border: 1px solid #b8c2ae; border-radius: 8px; background: #fff; padding: 0 17px; }
.country-search .icon { flex-shrink: 0; height: 21px; width: 21px; color: #53674a; }
.country-search input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 17px 0; min-height: 56px; font-size: 16px; }
.country-search input::placeholder { color: #6b7165; opacity: 1; }
.country-search input::-webkit-search-cancel-button { display: none; }
.country-search button { width: 40px; height: 40px; flex-shrink: 0; border: 0; background: transparent; font-size: 25px; color: var(--ink); }
.country-account-type select, .country-state-picker select { width: 100%; min-width: 0; min-height: 58px; border: 1px solid #b8c2ae; background: #fff; border-radius: 8px; padding: 12px 16px; font: inherit; font-size: 16px; color: var(--ink); }
.country-location-help { font-size: 12px; margin-top: 12px; color: var(--muted); line-height: 1.7; }
.country-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 32px; }
.country-filters button { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 10px 15px; border: 1px solid #d1d7c9; background: transparent; color: var(--ink); border-radius: 6px; font-size: 12px; }
.country-filters button > span { font-size: 11px; opacity: .8; }
.country-filters button:hover { background: #eaf0e0; }
.country-filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.country-results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 28px 0 16px; }
.country-results-heading h3 { font-size: 16px; font-weight: 500; letter-spacing: -.02em; scroll-margin-top: 120px; }
.country-results-heading > p { font-size: 12px; color: var(--muted); }
.country-entry { border: 1px solid var(--line); border-radius: 9px; background: #fcfcf7; margin-top: 9px; overflow: clip; scroll-margin-top: 120px; }
.country-entry > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; gap: 22px; align-items: center; padding: 19px 25px; cursor: pointer; list-style: none; }
.country-entry > summary::-webkit-details-marker { display: none; }
.country-entry > summary:hover { background: #f0f2e9; }
.country-entry[open] > summary { border-bottom: 1px solid var(--line); background: #eff2e8; }
.country-entry > summary > .icon { width: 18px; height: 18px; }
.country-entry[open] > summary > .icon { transform: rotate(45deg); }
.country-name { display: flex; align-items: center; gap: 18px; min-width: 0; }
.country-name > strong { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.country-name > small { font-size: 10px; color: #686f60; letter-spacing: .07em; flex-shrink: 0; }
.country-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.5; padding: 6px 10px; border-radius: 5px; background: #e7eddf; color: #38502b; width: fit-content; }
.country-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.country-badge--review { background: #e9edf8; color: #354e91; }
.country-badge--restricted { background: #f4ecd8; color: #795616; }
.country-badge--unavailable { background: #eeeee8; color: #5f615a; }
.country-badge--prohibited { background: #f3e7e2; color: #864534; }
.country-detail { padding: 26px; }
.country-explanation { font-size: 15px; color: var(--muted); line-height: 1.8; max-width: 850px; }
.country-review-note { padding: 13px 17px; background: #eef1fa; border-radius: 6px; color: #405481; font-size: 13px; line-height: 1.7; margin-top: 17px; }
.country-detail h4 { font-size: 17px; font-weight: 500; margin-top: 25px; }
.country-detail-caption { color: var(--muted); font-size: 12px; line-height: 1.8; margin-top: 9px; max-width: 890px; }
.country-rails { padding: 0; margin: 18px 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.country-rails > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 17px; background: #f1f3eb; border-radius: 6px; border: 1px solid #dce2d3; }
.country-rails strong { display: block; font-size: 14px; font-weight: 500; }
.country-rails li > div > span { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }
.country-rail-status { font-size: 12px; color: #40572f; }
.country-rail-status.is-unavailable { color: #85482f; }
.country-detail-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); }
.country-detail-bottom a { font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; }
.country-regional-note { padding: 20px 23px; margin-top: 22px; border-left: 2px solid #a89663; border-radius: 0 7px 7px 0; background: #f5f0e2; color: #645634; }
.country-regional-note h4 { margin-top: 0; color: #4e432d; }
.country-regional-note p, .country-regional-note li { font-size: 13px; line-height: 1.85; }
.country-regional-note p, .country-regional-note ul { margin-top: 12px; }
.country-regional-note ul { padding-left: 18px; }
.country-regional-note li + li { margin-top: 10px; }
.country-regional-note a { display: inline-block; margin-top: 15px; font-size: 13px; }
.country-state-picker { max-width: 860px; margin-top: 22px; }
.country-state-picker select { max-width: 380px; }
.country-state-picker > p { font-size: 12px; color: var(--muted); margin-top: 9px; }
.country-state-result { padding: 18px 20px; margin-top: 17px; border: 1px solid #d4dcca; border-radius: 7px; background: #edf1e6; }
.country-state-result > strong { font-size: 15px; font-weight: 500; }
.country-state-result > p { font-size: 13px; line-height: 1.8; color: #58634e; margin-top: 8px; }
.country-state-result[data-status="unavailable"] { background: #f4ebe5; border-color: #e2cabe; }
.country-state-result[data-status="unavailable"] > p { color: #7b4935; }
.country-empty { border: 1px solid var(--line); padding: 45px 25px; border-radius: 10px; text-align: center; }
.country-empty .large-icon { margin: 0 auto; }
.country-empty h3 { font-size: 28px; margin-top: 20px; }
.country-empty > p { font-size: 14px; color: var(--muted); max-width: 440px; margin: 15px auto 24px; }
.country-empty > .inline-link { display: block; width: fit-content; margin: 20px auto 0; font-size: 13px; }
.country-pagination { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 25px; }
.country-pagination > button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 15px; border: 1px solid #ccd4c2; border-radius: 6px; background: transparent; color: var(--ink); font-size: 13px; }
.country-pagination > button:hover:not(:disabled) { background: var(--sage); }
.country-pagination > button:disabled { color: #777c71; cursor: default; border-color: #e0e3d9; }
.country-pagination > button > .icon { width: 16px; height: 16px; }
.country-pagination > button:first-child > .icon { transform: rotate(180deg); }
.country-pagination > span { color: var(--muted); font-size: 12px; }
.country-directory-footnote { max-width: 890px; font-size: 12px; line-height: 1.85; color: var(--muted); margin-top: 26px; }
.country-nojs-note { padding: 20px; font-size: 14px; background: var(--sage); margin-bottom: 20px; }
.country-guide { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; border-top: 1px solid var(--line); padding-top: 65px; }
.country-guide h2 { font-size: 44px; line-height: 1.15; }
.country-guide > div > p:not(.eyebrow) { font-size: 15px; line-height: 1.85; color: var(--muted); margin-top: 25px; max-width: 370px; }
.country-guide dl { margin: 0; }
.country-guide dl > div { padding: 19px 0; border-bottom: 1px solid var(--line); }
.country-guide dl > div:first-child { padding-top: 0; }
.country-guide dd { margin: 10px 0 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
@media (max-width: 1000px) {
  .country-hero-grid { gap: 40px; grid-template-columns: 1.3fr 1fr; }
  .country-hero-note { padding: 25px; }
  .country-guide { gap: 50px; }
  .country-name { flex-direction: column; align-items: flex-start; gap: 5px; }
  .country-controls { grid-template-columns: minmax(0, 1fr) 220px; }
}
@media (max-width: 650px) {
  .countries-hero { padding: 28px 0 42px; }
  .country-hero-grid { grid-template-columns: 1fr; gap: 30px; }
  .countries-hero h1 { font-size: 43px; }
  .countries-hero .eyebrow { font-size: 9px; line-height: 1.6; margin-bottom: 20px; }
  .country-hero-grid > div > p:not(.eyebrow) { font-size: 15px; margin-top: 22px; }
  .country-hero-note { padding: 25px; }
  .country-hero-note > .large-icon { display: none; }
  .country-hero-note h2 { margin-top: 0; font-size: 26px; }
  .country-hero-note ol { margin-top: 16px; }
  .country-directory { padding-top: 45px; }
  .country-directory-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .country-directory-heading h2 { font-size: 36px; }
  .country-directory-heading > p { padding-bottom: 0; }
  .country-directory-heading time { display: inline; }
  .country-directory-intro { font-size: 14px; margin-top: 16px; }
  .country-controls { grid-template-columns: 1fr; gap: 18px; margin-top: 25px; }
  .country-search input { font-size: 16px; }
  .country-search input::placeholder { font-size: 13px; }
  .country-search > div { padding-inline: 12px; gap: 9px; }
  .country-filters { gap: 7px; margin-top: 22px; }
  .country-filters button { padding: 9px 10px; gap: 7px; font-size: 11px; }
  .country-results-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
  .country-entry > summary { grid-template-columns: minmax(0,1fr) 18px; gap: 10px; padding: 17px; }
  .country-entry > summary > .country-badge { grid-column: 1; grid-row: 2; }
  .country-entry > summary > .icon { grid-column: 2; grid-row: 1 / 3; }
  .country-name > strong { font-size: 15px; }
  .country-name > small { font-size: 9px; }
  .country-badge { font-size: 11px; padding: 5px 8px; }
  .country-detail { padding: 18px; }
  .country-explanation { font-size: 14px; }
  .country-rails { grid-template-columns: 1fr; gap: 9px; }
  .country-rails > li { padding: 15px; }
  .country-detail-bottom { flex-direction: column; align-items: flex-start; gap: 9px; }
  .country-regional-note { padding: 16px; }
  .country-state-result { padding: 16px; }
  .country-pagination { gap: 9px; }
  .country-pagination > button { padding: 9px 10px; font-size: 12px; gap: 6px; }
  .country-pagination > span { font-size: 11px; }
  .country-guide { grid-template-columns: 1fr; gap: 35px; padding-top: 45px; }
  .country-guide h2 { font-size: 36px; }
}
@media (max-width: 360px) {
  .countries-hero h1 { font-size: 37px; }
  .countries-hero .eyebrow { font-size: 8px; }
}