/* ==========================================================================
   E2B2 — Apply Direct Visa Guides
   Design language: the travel-document dossier. Ink navy + brass seal,
   paper-cream working surface, stamp-style status marks in place of the
   generic "card + rounded corner + shadow" kit.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:        #10233F;
  --ink-soft:   #1E3A63;
  --ink-tint:   #EAF0F7;
  --paper:      #FAF8F2;
  --paper-deep: #F2EEE3;
  --line:       #DCD5C3;
  --line-soft:  #E8E3D5;
  --brass:      #B08D3D;
  --brass-deep: #8C6E28;
  --text:       #22261F;
  --text-soft:  #5B5F55;
  --green:      #2E6E4E;
  --green-bg:   #E7F0EA;
  --green-line: #B9D2C1;
  --rust:       #9C3B2E;
  --rust-bg:    #F5E9E5;
  --rust-line:  #E0BFB6;
  --radius: 3px;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'IBM Plex Sans', -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--ink-soft); }
a:focus-visible, button:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); margin:0 0 .5em; font-weight:600; }
p{ margin:0 0 1em; max-width:68ch; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:76ch; }

/* ---------- header / masthead ---------- */
.masthead{
  background:var(--ink);
  color:#EDE7D8;
  border-bottom:4px solid var(--brass);
}
.masthead .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; padding-bottom:18px; gap:20px; flex-wrap:wrap; }
.brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:#fff; }
.brand-mark{
  font-family:var(--serif); font-weight:700; font-size:1.7rem; letter-spacing:.02em; color:#fff;
}
.brand-tag{ font-family:var(--mono); font-size:.72rem; color:#C9B98A; letter-spacing:.03em; }
.masthead nav{ display:flex; gap:26px; flex-wrap:wrap; }
.masthead nav a{ color:#D9D2BE; text-decoration:none; font-size:.95rem; border-bottom:1px solid transparent; padding-bottom:2px; }
.masthead nav a:hover{ color:#fff; border-color:var(--brass); }

/* ---------- hero ---------- */
.hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.hero h1{ font-size:clamp(2rem,4.4vw,3.3rem); line-height:1.08; max-width:16ch; }
.hero .lede{ font-size:1.15rem; color:var(--text-soft); max-width:56ch; }
.hero-note{
  margin-top:26px; display:flex; gap:14px; align-items:flex-start;
  border-left:3px solid var(--brass); padding:10px 0 10px 16px; max-width:60ch;
}
.hero-note p{ margin:0; font-size:.95rem; color:var(--text-soft); }

/* search / filter bar */
.filterbar{ margin-top:34px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.filterbar input[type="search"]{
  flex:1 1 260px; padding:12px 14px; border:1px solid var(--line); background:#fff;
  font-family:var(--sans); font-size:.98rem; border-radius:var(--radius); color:var(--text);
}
.filter-pills{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-pills button{
  font-family:var(--sans); font-size:.85rem; padding:9px 14px; border-radius:20px;
  border:1px solid var(--line); background:#fff; color:var(--text-soft); cursor:pointer;
}
.filter-pills button.active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- country grid & stamp cards ---------- */
.section-label{
  font-family:var(--mono); font-size:.78rem; color:var(--brass-deep);
  letter-spacing:.04em; margin:52px 0 6px;
}
.country-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px; margin:18px 0 60px;
}
.country-card{
  position:relative; background:#fff; border:1px solid var(--line);
  padding:22px 20px 20px; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; gap:10px; min-height:168px;
}
.country-card:hover{ border-color:var(--ink-soft); }
.country-card h3{ font-size:1.28rem; margin:0; padding-right:70px; }
.country-card .cc-note{ font-size:.9rem; color:var(--text-soft); margin:0; flex:1; }
.country-card .cc-cta{ font-family:var(--mono); font-size:.78rem; color:var(--ink-soft); }
.country-card.disabled{ cursor:default; color:var(--text-soft); }
.country-card.disabled:hover{ border-color:var(--line); }
.country-card.disabled .cc-cta{ color:var(--text-soft); }

.stamp{
  position:absolute; top:18px; right:16px; width:58px; height:58px; border-radius:50%;
  border:2px solid; display:flex; align-items:center; justify-content:center; text-align:center;
  transform:rotate(-8deg); font-family:var(--mono); font-size:.56rem; font-weight:600;
  letter-spacing:.02em; line-height:1.15; padding:4px;
}
.stamp.direct{ border-color:var(--green); color:var(--green); background:var(--green-bg); }
.stamp.agent{ border-color:var(--rust); color:var(--rust); background:var(--rust-bg); }
.stamp.mixed{ border-color:var(--brass-deep); color:var(--brass-deep); background:#FBF0DE; }
.stamp.soon{ border-color:var(--line); color:var(--text-soft); background:var(--paper-deep); }

/* ---------- status badge (inline, on dossier pages) ---------- */
.status-badge{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:.8rem; padding:7px 13px; border-radius:20px; border:1px solid;
}
.status-badge.direct{ background:var(--green-bg); border-color:var(--green-line); color:var(--green); }
.status-badge.agent{ background:var(--rust-bg); border-color:var(--rust-line); color:var(--rust); }
.status-badge.mixed{ background:#FBF0DE; border-color:#E4C685; color:var(--brass-deep); }
.status-badge::before{ content:"●"; font-size:.7rem; }

/* ---------- dossier header (country page top) ---------- */
.dossier-header{ background:var(--ink); color:#EDE7D8; padding:44px 0 34px; border-bottom:4px solid var(--brass); }
.breadcrumb{ font-family:var(--mono); font-size:.78rem; color:#B9AF8E; margin-bottom:16px; }
.breadcrumb a{ color:#D9D2BE; text-decoration:none; }
.breadcrumb a:hover{ color:#fff; }
.dossier-header h1{ color:#fff; font-size:clamp(2rem,4.2vw,2.9rem); margin-bottom:12px; }
.dossier-header .dh-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:18px; }
.dossier-header .dh-meta{ font-size:.9rem; color:#C9C1AA; }

.official-cta{
  display:inline-flex; align-items:center; gap:10px; background:var(--brass);
  color:#241D08; font-weight:600; text-decoration:none; padding:14px 22px;
  font-family:var(--sans); font-size:1rem; border-radius:var(--radius);
}
.official-cta:hover{ background:#C6A253; }
.official-cta small{ display:block; font-weight:400; font-size:.72rem; font-family:var(--mono); }

/* ---------- content sections ---------- */
.dossier-body{ padding:44px 0 20px; }
.dossier-grid{ display:grid; grid-template-columns:2.1fr 1fr; gap:44px; align-items:start; }
@media (max-width:860px){ .dossier-grid{ grid-template-columns:1fr; } }

section.block{ margin-bottom:44px; }
section.block h2{ font-size:1.5rem; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:16px; }
section.block h3{ font-size:1.08rem; margin-top:22px; }

.warn{
  background:var(--rust-bg); border:1px solid var(--rust-line); border-left:4px solid var(--rust);
  padding:14px 16px; font-size:.93rem; color:#5c2419; margin:18px 0;
}
.warn strong{ color:var(--rust); }
.tip{
  background:var(--green-bg); border:1px solid var(--green-line); border-left:4px solid var(--green);
  padding:14px 16px; font-size:.93rem; color:#1f4b35; margin:18px 0;
}

/* checklist */
ul.checklist{ list-style:none; padding:0; margin:0 0 1em; }
ul.checklist li{
  position:relative; padding:8px 0 8px 30px; border-bottom:1px solid var(--line-soft);
  font-size:.97rem;
}
ul.checklist li::before{
  content:""; position:absolute; left:0; top:11px; width:15px; height:15px;
  border:1.5px solid var(--ink-soft); border-radius:2px;
}
ul.checklist li:last-child{ border-bottom:none; }

/* step list */
ol.steps{ list-style:none; counter-reset:step; padding:0; margin:0; }
ol.steps li{
  counter-increment:step; position:relative; padding:6px 0 22px 46px; border-left:1px solid var(--line);
  margin-left:16px;
}
ol.steps li:last-child{ border-left-color:transparent; padding-bottom:0; }
ol.steps li::before{
  content:counter(step); position:absolute; left:-16px; top:0; width:32px; height:32px;
  background:var(--ink); color:#fff; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--mono); font-size:.85rem; font-weight:600;
}
ol.steps h4{ margin:0 0 4px; font-size:1.02rem; font-family:var(--sans); font-weight:600; color:var(--ink); }
ol.steps p{ margin:0; font-size:.94rem; color:var(--text-soft); }

/* tables */
table.spec{ width:100%; border-collapse:collapse; margin:0 0 1.2em; font-size:.93rem; }
table.spec th, table.spec td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
table.spec th{ width:34%; font-family:var(--sans); font-weight:600; color:var(--ink); background:var(--paper-deep); }

/* sidebar */
.sidebar-card{ background:#fff; border:1px solid var(--line); padding:20px; margin-bottom:20px; }
.sidebar-card h4{ font-size:.95rem; font-family:var(--sans); font-weight:600; color:var(--ink); margin:0 0 10px; text-transform:none; }
.sidebar-card dl{ margin:0; }
.sidebar-card dt{ font-family:var(--mono); font-size:.72rem; color:var(--text-soft); margin-top:10px; }
.sidebar-card dt:first-child{ margin-top:0; }
.sidebar-card dd{ margin:2px 0 0; font-size:.95rem; }
.sidebar-card ul{ margin:0; padding-left:18px; font-size:.92rem; }
.sidebar-card li{ margin-bottom:6px; }

/* faq */
details.faq{ border-bottom:1px solid var(--line-soft); padding:14px 0; }
details.faq summary{ cursor:pointer; font-weight:600; color:var(--ink); font-family:var(--sans); font-size:.98rem; }
details.faq p{ margin:10px 0 0; color:var(--text-soft); font-size:.95rem; }

/* related / other countries strip */
.related-strip{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.related-strip a{
  font-size:.85rem; padding:7px 13px; border:1px solid var(--line); border-radius:20px;
  text-decoration:none; color:var(--text-soft);
}
.related-strip a:hover{ border-color:var(--ink-soft); color:var(--ink); }

/* sources */
.sources{ font-size:.82rem; color:var(--text-soft); border-top:1px solid var(--line); padding-top:16px; margin-top:8px; }
.sources a{ color:var(--text-soft); }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--ink); color:#C9C1AA; margin-top:60px; padding:40px 0 26px; }
footer.site-footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; }
footer.site-footer h5{ font-family:var(--sans); color:#fff; font-size:.9rem; margin:0 0 12px; }
footer.site-footer p, footer.site-footer a{ font-size:.87rem; color:#B9AF8E; line-height:1.7; }
footer.site-footer a{ text-decoration:none; }
footer.site-footer a:hover{ color:#fff; }
footer.site-footer ul{ list-style:none; padding:0; margin:0; }
.footer-bottom{
  border-top:1px solid #2A3F5F; margin-top:30px; padding-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; align-items:center;
}
.footer-bottom .legal{ font-size:.8rem; color:#8C93A4; }
.credit{
  font-size:.78rem; color:#8C93A4; font-family:var(--mono);
}
.credit a{ color:#C9B98A; }

@media (max-width:600px){
  .hero{ padding:44px 0 34px; }
  .dossier-header{ padding:32px 0 26px; }
  .country-card h3{ padding-right:0; }
  .stamp{ position:static; transform:none; margin-bottom:8px; width:auto; height:auto; border-radius:20px; padding:5px 10px; display:inline-flex; }
  .country-card{ padding:18px 16px; }
}