/* ==========================================================================
   Malta Nomad Visa page — self-contained design system
   --------------------------------------------------------------------------
   Everything is scoped under .mnv-page, so nothing here can touch the header,
   footer, or any other page. The palette is deliberately its own: limestone,
   Mediterranean teal and Maltese red, rather than the portfolio pastels — a
   service landing page has a different job than a portfolio page.

   To re-skin: change the six values in the token block below.
   ========================================================================== */

.mnv-page {
  /* --- palette --- */
  --paper:       #FAF7F1;  /* limestone page background */
  --paper-2:     #F3EFE5;  /* alternating band */
  --surface:     #FFFFFF;  /* cards */
  --brand:       #0F4C5C;  /* Mediterranean teal */
  --brand-deep:  #0A343E;
  --accent:      #C8102E;  /* Maltese red — CTAs and signals */

  --ink:         #141A1E;
  --ink-2:       #55616C;
  --ink-3:       #8A939C;
  --line:        #E5DED2;  /* decorative rules and dividers        */
  --line-strong: #CFC5B4;  /* heavier dividers, non-interactive    */
  --edge:        #7E8A93;  /* borders on things you can click —
                              3.5:1 on white, 3.3:1 on paper, so
                              outlined buttons are actually visible */
  --ok:          #2F7D5F;
  --ok-bg:       #EAF4EF;
  --no:          #B3401F;
  --no-bg:       #FBEDE8;

  /* --- accent modifiers, set per card --- */
  --a:    var(--brand);
  --a-bg: rgba(15, 76, 92, .08);

  /* --- type --- */
  --display: "Bricolage Grotesque", "Google Sans", system-ui, sans-serif;
  --body:    "Instrument Sans", Onest, system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* --- scale --- */
  --s--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --s-0:  clamp(1rem, .96rem + .2vw, 1.06rem);
  --s-1:  clamp(1.15rem, 1.05rem + .4vw, 1.4rem);
  --s-2:  clamp(1.45rem, 1.25rem + .9vw, 2rem);
  --s-3:  clamp(1.9rem, 1.5rem + 1.9vw, 3rem);
  --s-4:  clamp(2.5rem, 1.8rem + 3.3vw, 4.6rem);

  --r: 16px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--s-0);
  line-height: 1.62;
  width: 100%;
}

.mnv-page * { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Page background
   --------------------------------------------------------------------------
   The header and footer sit outside .mnv-page, so colouring only the page
   wrapper left a white strip behind both and a hard seam where the content
   ended. Painting the document itself removes the seam — scoped to this
   template's body class, so no other page is affected.

   `html body.…` is used rather than `body.…` on purpose: WordPress can print
   a `body.custom-background` rule after our stylesheet, and matching that
   specificity would lose the tie. One extra element in the chain wins it
   without resorting to !important.
   -------------------------------------------------------------------------- */
html body.page-template-page-malta-nomad-visa,
html body.page-template-page-spain-nomad-visa,
html body.page-template-page-visa-index {
  background-color: #FAF7F1;
}

/* The nav's scrolled state uses a white pill. On a warm page that reads as a
   patch of a different paper, so it picks up the same tone. */
body.page-template-page-malta-nomad-visa .header_wrap_fade,
body.page-template-page-spain-nomad-visa .header_wrap_fade,
body.page-template-page-visa-index .header_wrap_fade {
  background: #FAF7F1;
  box-shadow: 0 10px 30px -22px rgba(20, 26, 30, .45);
}

.mnv-accent-teal { --a: var(--brand);      --a-bg: rgba(15, 76, 92, .08); }
.mnv-accent-sand { --a: var(--brand-deep); --a-bg: rgba(10, 52, 62, .07); }
.mnv-accent-red  { --a: var(--accent);     --a-bg: rgba(200, 16, 46, .07); }

/* --------------------------------------------------------------------------
   Layout: full-bleed bands with a centred measure inside
   -------------------------------------------------------------------------- */
.mnv-band {
  padding-block: clamp(3rem, 7vw, 6rem);
  border-top: 1px solid var(--line);
}

.mnv-band-hero { border-top: 0; padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.mnv-band-alt  { background: var(--paper-2); }

.mnv-shell {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

.mnv-head { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.mnv-head p { color: var(--ink-2); margin: 1rem 0 0; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.mnv-page p { margin: 0 0 1rem; }
.mnv-page p:last-child { margin-bottom: 0; }

.mnv-page a { color: var(--brand); text-underline-offset: 3px; }

.mnv-h1,
.mnv-h2,
.mnv-h3 {
  font-family: var(--display);
  color: var(--ink);
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 0;
}

.mnv-h1 { font-size: var(--s-4); font-weight: 800; max-width: 14ch; }
.mnv-h1 em { font-style: normal; color: var(--brand); display: block; }
.mnv-h2 { font-size: var(--s-3); font-weight: 800; }
.mnv-h3 { font-size: var(--s-1); font-weight: 700; line-height: 1.2; }

.mnv-lede {
  font-size: var(--s-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 1.25rem 0 0;
}

.mnv-eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}

.mnv-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 120px;
  background: var(--line-strong);
}

.mnv-smallprint { font-size: var(--s--1); color: var(--ink-3); margin-top: .5rem; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.mnv-page a.mnv-btn,
.mnv-page .mnv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: var(--s-0);
  font-weight: 600;
  line-height: 1;
  padding: .95rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}

.mnv-page .mnv-btn:hover { transform: translateY(-2px); }

/* Scoped under .mnv-page so these beat the generic `.mnv-page a` colour —
   without that extra class the link rule wins and button labels come out
   teal instead of white. */
.mnv-page a.mnv-btn-primary,
.mnv-page .mnv-btn-primary {
  background: var(--accent);
  color: #fff;
}
.mnv-page a.mnv-btn-primary:hover,
.mnv-page .mnv-btn-primary:hover {
  background: var(--ink);
  color: #fff;
}

.mnv-page a.mnv-btn-ghost,
.mnv-page .mnv-btn-ghost {
  border-color: var(--edge);
  color: var(--ink);
  background: transparent;
}

.mnv-page a.mnv-btn-ghost:hover,
.mnv-page .mnv-btn-ghost:hover {
  border-color: var(--brand);
  background: rgba(15, 76, 92, .07);
  color: var(--brand);
}

.mnv-page a.mnv-btn-onteal-solid,
.mnv-page .mnv-btn-onteal-solid {
  background: #fff;
  color: var(--brand-deep);
}
.mnv-page a.mnv-btn-onteal-solid:hover,
.mnv-page .mnv-btn-onteal-solid:hover {
  background: var(--accent);
  color: #fff;
}

.mnv-page a.mnv-btn-onteal,
.mnv-page .mnv-btn-onteal {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: transparent;
}

.mnv-page a.mnv-btn-onteal:hover,
.mnv-page .mnv-btn-onteal:hover {
  background: rgba(255, 255, 255, .12);
}

.mnv-btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.25rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.mnv-hero { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }

@media (min-width: 980px) {
  .mnv-hero { grid-template-columns: 1.15fr .85fr; align-items: start; }
}

.mnv-verified {
  margin: 3.25rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--s--1);
  color: var(--ink-3);
}

.mnv-verified strong { color: var(--ok); font-weight: 700; }

/* Spec card */
.mnv-spec {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 24px 48px -34px rgba(0, 0, 0, .4);
}

.mnv-spec-head {
  background: var(--brand);
  color: #fff;
  padding: 1rem 1.5rem;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mnv-spec-list { margin: 0; padding: .4rem 1.5rem 1.3rem; }

.mnv-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px dashed var(--line);
}

.mnv-spec-row:last-child { border-bottom: 0; }
.mnv-spec-row dt { color: var(--ink-2); font-size: var(--s--1); }

.mnv-spec-row dd {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}

.mnv-spec-row dd small {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink-3);
  white-space: normal;
}

/* --------------------------------------------------------------------------
   Eligibility checker
   -------------------------------------------------------------------------- */
.mnv-gate {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.mnv-gate-verdict {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.35rem clamp(1.15rem, 3vw, 2rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background .3s ease;
}

.mnv-gate-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line-strong);
}

.mnv-gate-verdict-text { margin: 0; font-weight: 600; }

.mnv-gate-verdict-text small {
  display: block;
  margin-top: .2rem;
  font-weight: 400;
  font-size: var(--s--1);
  line-height: 1.5;
  color: var(--ink-2);
}

.mnv-gate[data-state="pass"] .mnv-gate-verdict { background: var(--ok-bg); }
.mnv-gate[data-state="pass"] .mnv-gate-dot     { background: var(--ok); }
.mnv-gate[data-state="fail"] .mnv-gate-verdict { background: var(--no-bg); }
.mnv-gate[data-state="fail"] .mnv-gate-dot     { background: var(--no); }

.mnv-gate-q {
  margin: 0;
  padding: 1.3rem clamp(1.15rem, 3vw, 2rem);
  border: 0;
  border-bottom: 1px solid var(--line);
  min-inline-size: 0;
}

.mnv-gate-q:last-of-type { border-bottom: 0; }

.mnv-gate-q legend {
  padding: 0;
  margin-bottom: .15rem;
  font-family: var(--display);
  font-size: var(--s-0);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.mnv-gate-hint { margin: 0 0 .9rem; font-size: var(--s--1); color: var(--ink-2); }

.mnv-gate-opts { display: flex; gap: .6rem; }

.mnv-gate-opt {
  flex: 1;
  position: relative;
  text-align: center;
  padding: .65rem 1rem;
  border: 1.5px solid var(--edge);
  border-radius: 999px;
  background: var(--paper);
  font-weight: 600;
  font-size: var(--s--1);
  cursor: pointer;
  transition: all .2s ease;
}

.mnv-gate-opt:hover { border-color: var(--brand); background: rgba(15, 76, 92, .07); }

.mnv-gate-opt input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Browsers without :has() simply keep the resting style — nothing breaks. */
.mnv-gate-opt:has(input:checked) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.mnv-gate-opt input:focus-visible + span {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  border-radius: 999px;
}

.mnv-gate-foot {
  padding: 1.3rem clamp(1.15rem, 3vw, 2rem);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.mnv-gate-foot[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Cards and grids
   -------------------------------------------------------------------------- */
.mnv-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.mnv-grid-gap { margin-top: 1.25rem; }

@media (min-width: 760px) {
  .mnv-grid-2 { grid-template-columns: 1fr 1fr; }
  .mnv-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.mnv-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.75rem;
  transition: border-color .2s ease;
}

.mnv-card:hover { border-color: var(--a); }
.mnv-card p { color: var(--ink-2); }
.mnv-card .mnv-h3 { margin-bottom: .6rem; }

.mnv-tag {
  display: inline-block;
  margin-bottom: .9rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--a-bg);
  color: var(--a);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mnv-list { list-style: none; margin: 1rem 0 0; padding: 0; }

.mnv-list li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
  color: var(--ink-2);
}

.mnv-list li:last-child { margin-bottom: 0; }

.mnv-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.mnv-list-yes li::before { content: "\2713"; color: var(--ok); }
.mnv-list-no  li::before { content: "\2715"; color: var(--no); }

/* --------------------------------------------------------------------------
   Process timeline — numbers are generated, so reordering rows renumbers
   -------------------------------------------------------------------------- */
.mnv-steps { list-style: none; margin: 0; padding: 0; counter-reset: mnv; }

.mnv-steps li {
  counter-increment: mnv;
  position: relative;
  margin-left: 1.15rem;
  padding: 0 0 2.2rem 3.6rem;
  border-left: 2px solid var(--line);
}

.mnv-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.mnv-steps li::before {
  content: counter(mnv, decimal-leading-zero);
  position: absolute;
  left: -1.15rem;
  top: -.15rem;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 700;
}

.mnv-steps .mnv-h3 { margin-bottom: .35rem; }
.mnv-steps p { color: var(--ink-2); }

.mnv-clock {
  display: inline-block;
  margin-top: .6rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(15, 76, 92, .08);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand);
}

/* --------------------------------------------------------------------------
   Fee table
   -------------------------------------------------------------------------- */
.mnv-table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}

.mnv-table { width: 100%; border-collapse: collapse; min-width: 560px; }

.mnv-table caption {
  text-align: left;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--s--1);
  color: var(--ink-2);
}

.mnv-table th,
.mnv-table td {
  text-align: left;
  padding: .95rem 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--s--1);
}

.mnv-table thead th {
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mnv-table tbody tr:last-child td { border-bottom: 0; }

.mnv-num { font-family: var(--mono); font-weight: 700; white-space: nowrap; color: var(--brand); }

/* --------------------------------------------------------------------------
   Packages
   -------------------------------------------------------------------------- */
.mnv-pkg {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.9rem;
}

.mnv-pkgs.mnv-grid-2 { max-width: 900px; }
.mnv-pkgs.mnv-grid-2 .mnv-pkg { padding: clamp(1.6rem, 3vw, 2.4rem); }

.mnv-pkg.is-featured { border: 2px solid var(--a); }

.mnv-pkg-flag {
  position: absolute;
  top: -.75rem;
  left: 1.6rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--a);
  color: #fff;
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Price leads the card: it is the one thing every visitor scans for, and
   burying it under the plan name makes them hunt. */
.mnv-pkg-price {
  margin: 0 0 1.4rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  line-height: 1;
}

.mnv-pkg-pre {
  font-size: var(--s-1);
  font-weight: 500;
  color: var(--ink-2);
  margin-right: .3rem;
}

.mnv-pkg-figure {
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--ink);
}

.mnv-pkg-note {
  display: block;
  margin-top: .5rem;
  font-family: var(--body);
  font-size: var(--s--1);
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-3);
}

.mnv-pkg-summary { font-size: var(--s--1); color: var(--ink-2); margin: .5rem 0 0; }

.mnv-pkg-list { list-style: none; flex: 1; margin: 1.4rem 0; padding: 0; }

.mnv-pkg-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .65rem;
  font-size: var(--s--1);
  color: var(--ink-2);
}

.mnv-pkg-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--a);
  font-weight: 700;
}

.mnv-pkg .mnv-btn { width: 100%; }

/* --------------------------------------------------------------------------
   FAQ — native <details>, no JS and no dependency on the theme accordion
   -------------------------------------------------------------------------- */
.mnv-faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: .75rem;
}

.mnv-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}

.mnv-faq summary::-webkit-details-marker { display: none; }

.mnv-faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.3rem;
  color: var(--brand);
}

.mnv-faq details[open] summary::after { content: "\2013"; }

.mnv-faq-body {
  padding: 0 1.5rem 1.35rem;
  font-size: var(--s--1);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Callout, final CTA, sources
   -------------------------------------------------------------------------- */
.mnv-callout {
  margin-top: 1.5rem;
  padding: 1.3rem 1.5rem;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0;
  background: var(--surface);
  font-size: var(--s--1);
  color: var(--ink-2);
}

.mnv-callout strong { color: var(--ink); }

.mnv-final {
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: var(--r);
  background: var(--brand);
  text-align: center;
}

.mnv-final .mnv-h2 { color: #fff; max-width: 18ch; margin-inline: auto; }

.mnv-final p {
  max-width: 52ch;
  margin: 1.1rem auto 0;
  color: rgba(255, 255, 255, .84);
}

.mnv-final .mnv-btn-row { justify-content: center; }

.mnv-sources {
  margin-top: 2.5rem;
  font-size: var(--s--1);
  color: var(--ink-3);
}

.mnv-sources-title { margin: 0 0 .5rem; }
.mnv-sources ul { margin: 0; padding-left: 1.1rem; }
.mnv-sources li { margin-bottom: .35rem; }
.mnv-sources a { color: var(--ink-2); }

.mnv-disclaimer {
  max-width: 78ch;
  margin-top: 1.6rem;
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Quality floor
   -------------------------------------------------------------------------- */
.mnv-page a:focus-visible,
.mnv-page summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .mnv-page *,
  .mnv-btn:hover { transition: none !important; transform: none !important; }
}

@media (max-width: 759px) {
  .mnv-card,
  .mnv-pkg { padding: 1.4rem 1.25rem; }
  .mnv-steps li { padding-left: 3rem; }
}

/* --------------------------------------------------------------------------
   Documents checklist
   --------------------------------------------------------------------------
   A two-column list rather than cards: the reader is going to work through
   this line by line with a folder open, so scanning down beats scanning
   across. Each row is document name first, then what the agency expects.
   -------------------------------------------------------------------------- */
.mnv-docs { display: grid; gap: 1rem; grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .mnv-docs { grid-template-columns: 1fr 1fr; }
}

.mnv-docgroup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 1.6rem 1.75rem;
}

.mnv-docgroup-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.mnv-docgroup-head .mnv-clock { margin-top: 0; }

.mnv-doclist { list-style: none; margin: 0; padding: 0; }

.mnv-doclist li {
  padding: .95rem 0;
  border-bottom: 1px dashed var(--line);
}

.mnv-doclist li:last-child { border-bottom: 0; padding-bottom: 0; }

.mnv-doclist strong {
  display: block;
  font-family: var(--display);
  font-size: var(--s-0);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

.mnv-doclist span {
  display: block;
  margin-top: .2rem;
  font-size: var(--s--1);
  line-height: 1.5;
  color: var(--ink-2);
}

.mnv-docrules { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   Official links
   --------------------------------------------------------------------------
   Sending people to the government site costs a click and buys credibility.
   Styled as links rather than buttons on purpose — the buttons on this page
   all lead to Alok, and these do not.
   -------------------------------------------------------------------------- */
.mnv-official {
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--brand);
  border-radius: var(--r);
  background: rgba(15, 76, 92, .05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.mnv-official-tag {
  margin: 0;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand);
}

.mnv-official-note {
  margin: .4rem 0 0;
  max-width: 52ch;
  font-size: var(--s--1);
  color: var(--ink-2);
}

.mnv-official-links {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-start;
}

.mnv-page a.mnv-extlink {
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  font-weight: 600;
  font-size: var(--s--1);
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.mnv-page a.mnv-extlink:hover {
  color: var(--accent);
  text-decoration-thickness: 2px;
}

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

/* --------------------------------------------------------------------------
   Enquiry form
   --------------------------------------------------------------------------
   The Fluent Forms markup is styled from the outside so the plugin can be
   updated without breaking this page. Selectors stay scoped under .mnv-form.
   -------------------------------------------------------------------------- */
.mnv-form {
  margin-top: 2.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.mnv-form .mnv-h3 { margin-bottom: .6rem; }
.mnv-form-intro { color: var(--ink-2); max-width: 58ch; margin: 0 0 1.75rem; }

.mnv-form-note {
  margin: 1.25rem 0 0;
  font-size: var(--s--1);
  color: var(--ink-3);
  max-width: 62ch;
}

/* Answer summary — shown, not hidden, so nobody is surprised by what they
   just attached to their message. */
.mnv-answers {
  margin-bottom: 1.75rem;
  padding: 1.25rem 1.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.mnv-answers[hidden] { display: none; }

.mnv-answers-label {
  margin: 0 0 .8rem;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mnv-answers-list { list-style: none; margin: 0; padding: 0; counter-reset: ans; }

.mnv-answers-list li {
  counter-increment: ans;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0 .55rem 1.6rem;
  border-bottom: 1px dashed var(--line);
  position: relative;
  font-size: var(--s--1);
  color: var(--ink-2);
}

.mnv-answers-list li:last-child { border-bottom: 0; }

.mnv-answers-list li::before {
  content: counter(ans);
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--ink-3);
}

.mnv-answers-list strong { flex: none; font-weight: 700; }
.mnv-answers-list .is-ok strong { color: var(--ok); }
.mnv-answers-list .is-blocker strong { color: var(--no); }

/* Fluent Forms, restyled to match the page */
.mnv-form-embed .ff-el-group { margin-bottom: 1.1rem; }

.mnv-form-embed .ff-el-input--label label {
  font-family: var(--display);
  font-size: var(--s--1);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
}

.mnv-form-embed input[type="text"],
.mnv-form-embed input[type="email"],
.mnv-form-embed input[type="tel"],
.mnv-form-embed input[type="url"],
.mnv-form-embed input[type="number"],
.mnv-form-embed select,
.mnv-form-embed textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  font-family: var(--body);
  font-size: var(--s-0);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.mnv-form-embed input:focus,
.mnv-form-embed select:focus,
.mnv-form-embed textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, .12);
  outline: none;
}

.mnv-form-embed textarea { min-height: 130px; resize: vertical; }

.mnv-form-embed .ff-btn-submit,
.mnv-form-embed button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .95rem 1.6rem;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--body);
  font-size: var(--s-0);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.mnv-form-embed .ff-btn-submit:hover,
.mnv-form-embed button[type="submit"]:hover {
  background: var(--ink);
  border-color: var(--ink);
  transform: translateY(-2px);
}

.mnv-form-embed .ff-el-form-check-label { color: var(--ink-2); font-size: var(--s--1); }
.mnv-form-embed .text-danger,
.mnv-form-embed .error { color: var(--no); font-size: var(--s--1); }

.mnv-form-embed .ff-message-success {
  padding: 1.1rem 1.3rem;
  border-radius: 12px;
  background: var(--ok-bg);
  border: 1px solid var(--ok);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Built-in enquiry form
   -------------------------------------------------------------------------- */
.mnv-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mnv-form-status {
  margin: 0 0 1.5rem;
  padding: .95rem 1.2rem;
  border-radius: 12px;
  font-size: var(--s--1);
  font-weight: 500;
}

.mnv-form-status.is-ok  { background: var(--ok-bg); border: 1px solid var(--ok); color: var(--ink); }
.mnv-form-status.is-bad { background: var(--no-bg); border: 1px solid var(--no); color: var(--ink); }

.mnv-native-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .mnv-native-grid { grid-template-columns: 1fr 1fr; }
  .mnv-native-grid .is-wide { grid-column: 1 / -1; }
}

.mnv-field { margin: 0; display: flex; flex-direction: column; gap: .4rem; }

.mnv-field label {
  font-family: var(--display);
  font-size: var(--s--1);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
}

.mnv-req { color: var(--accent); }

.mnv-field input,
.mnv-field select,
.mnv-field textarea {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--edge);
  border-radius: 12px;
  background: var(--surface);
  font-family: var(--body);
  font-size: var(--s-0);
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.mnv-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

.mnv-field input:focus,
.mnv-field select:focus,
.mnv-field textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 76, 92, .12);
  outline: none;
}

.mnv-field input:user-invalid,
.mnv-field select:user-invalid,
.mnv-field textarea:user-invalid { border-color: var(--no); }

.mnv-field textarea { resize: vertical; min-height: 120px; }

.mnv-native button[type="submit"] {
  margin-top: 1.6rem;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
}

/* Success state — the message is the whole content now, so it gets room. */
.mnv-form-status p { margin: 0; }
.mnv-form-status p + p { margin-top: .6rem; }

.mnv-form-status.is-final {
  margin-bottom: 0;
  padding: 1.6rem 1.8rem;
  font-size: var(--s-0);
}

.mnv-form-again a {
  font-size: var(--s--1);
  font-weight: 600;
  color: var(--brand);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Gate lock
   --------------------------------------------------------------------------
   The call to action stays visible while the checker is incomplete — people
   need to see where it leads before they will answer five questions — but it
   is muted and refuses to fire until every gate has an answer.
   -------------------------------------------------------------------------- */
.mnv-page a.mnv-btn[data-mnv-locked] {
  background: var(--paper-2);
  border-color: var(--line-strong);
  color: var(--ink-3);
  cursor: not-allowed;
}

.mnv-page a.mnv-btn[data-mnv-locked]:hover {
  transform: none;
  background: var(--paper-2);
  border-color: var(--edge);
  color: var(--ink-2);
}

.mnv-gate-warn {
  margin: 0 0 .9rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  background: var(--no-bg);
  border: 1px solid var(--no);
  color: var(--ink);
  font-size: var(--s--1);
  font-weight: 600;
}

.mnv-gate-warn[hidden] { display: none; }

.mnv-gate-q.is-missing {
  background: var(--no-bg);
  box-shadow: inset 3px 0 0 var(--no);
}

.mnv-gate-q.is-missing legend { color: var(--no); }


/* --------------------------------------------------------------------------
   FAQ open/close animation
   --------------------------------------------------------------------------
   <details> snaps open natively — there is no height to transition from. The
   accompanying JS measures the panel and drives these custom properties, so
   the animation is real rather than a fade over a jump.
   -------------------------------------------------------------------------- */
.mnv-faq details { overflow: hidden; }

.mnv-faq summary::after {
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
}

.mnv-faq details[open] summary::after { transform: rotate(180deg); }

.mnv-faq .mnv-faq-body { will-change: height; }

.mnv-faq details.is-animating { overflow: hidden; }

.mnv-faq details.is-animating .mnv-faq-body {
  transition: height .32s cubic-bezier(.4, 0, .2, 1),
              opacity .24s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mnv-faq details.is-animating .mnv-faq-body,
  .mnv-faq summary::after { transition: none; }
}


/* --------------------------------------------------------------------------
   Route comparison (Spain)
   --------------------------------------------------------------------------
   Two panels rather than a table: the choice is not a list of specs, it is a
   decision, and one of the two is usually right. The recommended one carries
   the weight so the page has a point of view instead of just data.
   -------------------------------------------------------------------------- */
.mnv-routes { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

@media (min-width: 860px) {
  .mnv-routes { grid-template-columns: 1fr 1fr; }
}

.mnv-route {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}

.mnv-route.is-pick { border: 2px solid var(--brand); }

.mnv-route-flag {
  position: absolute;
  top: -.75rem;
  left: 1.6rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-family: var(--mono);
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mnv-route-where {
  margin: 0;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mnv-route-len {
  margin: .5rem 0 .2rem;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.mnv-route-len span {
  display: block;
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 400;
  color: var(--ink-3);
}

.mnv-route-list {
  margin: 1.4rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.mnv-route-list div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--s--1);
}

.mnv-route-list div:last-child { border-bottom: 0; }
.mnv-route-list dt { color: var(--ink-2); }
.mnv-route-list dd { margin: 0; font-weight: 600; text-align: right; }

/* --------------------------------------------------------------------------
   Country index
   --------------------------------------------------------------------------
   Image tiles with the label anchored to the bottom. The overlay is a gradient
   rather than a flat tint so the top of the photograph stays visible while the
   text at the bottom keeps its contrast whatever image is uploaded.
   -------------------------------------------------------------------------- */
.mnv-countries {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) { .mnv-countries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mnv-countries { grid-template-columns: repeat(3, 1fr); } }

.mnv-country {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--brand-deep);
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  transition: transform .25s ease, box-shadow .25s ease;
}

.mnv-page a.mnv-country { color: #fff; }

.mnv-country-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s cubic-bezier(.2, .6, .2, 1);
}

.mnv-country-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(10, 52, 62, .92) 0%,
    rgba(10, 52, 62, .70) 34%,
    rgba(10, 52, 62, .18) 68%,
    rgba(10, 52, 62, .08) 100%
  );
}

a.mnv-country:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgba(10, 52, 62, .55); }
a.mnv-country:hover .mnv-country-img { transform: scale(1.05); }

.mnv-country-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--brand-deep);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mnv-country-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.mnv-country-name {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
}

.mnv-country-flag { font-size: .8em; line-height: 1; }

.mnv-country-line {
  font-size: var(--s--1);
  color: rgba(255, 255, 255, .84);
  line-height: 1.4;
}

/* Countries without a page yet: visible on the roadmap, but not a dead link. */
.mnv-country.is-soon { cursor: default; }
.mnv-country.is-soon .mnv-country-img { filter: grayscale(.7); opacity: .8; }
.mnv-country.is-soon .mnv-country-name,
.mnv-country.is-soon .mnv-country-line { opacity: .78; }

.mnv-country.is-soon .mnv-country-badge {
  background: rgba(255, 255, 255, .22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}

@media (prefers-reduced-motion: reduce) {
  .mnv-country,
  .mnv-country-img { transition: none; }
  a.mnv-country:hover { transform: none; }
  a.mnv-country:hover .mnv-country-img { transform: none; }
}