/* Theme "Admiralty": a formal maritime look in the spirit of international maritime institutions —
   a thin dark top bar, white header with uppercase navigation, a deep-blue hero with a faint nautical-chart grid
   and a compass rose, strict cards, a dark footer with an abstract signal-flag stripe.
   Inspired by the general style only: no logos, names or texts of any organisation are used.
   Everything here is CSS (images are inline SVG), so it costs no extra requests on slow ship internet.
   Contrast checked: body text 14.6:1, muted 6.9:1, white on --navy 7.9:1, white on --accent 6.6:1. */
:root {
  --navy: #004f9f;
  --navy-dark: #062a57;
  --accent: #0b5cad;
  --bg: #f4f6f9;
  --text: #14213d;
  --muted: #4b5a70;
  --border: #d9e1ec;
  --radius: 4px;
  --gold: #c9a227;
}

/* Top bar */
.topbar { display: block; background: var(--navy-dark); color: #c9d6e8; font-size: .8rem; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; flex-wrap: wrap; }
.topbar a { color: #fff; text-decoration: none; margin-left: 16px; }
.topbar a:hover { text-decoration: underline; color: #fff; }
@media (max-width: 640px) { .topbar-inner > span:first-child { display: none; } .topbar-links { margin-left: auto; } .topbar a:first-child { margin-left: 0; } }

/* Header */
.site-header { background: #fff; border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(6, 42, 87, .04); }
.site-header::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, var(--navy) 0 70%, var(--gold) 70% 100%); }
.logo, .logo:hover { color: var(--navy-dark); letter-spacing: .01em; }
.logo-mark { color: var(--navy); }
.site-nav a { color: var(--navy-dark); text-transform: uppercase; font-size: .78rem; letter-spacing: .07em; font-weight: 700; border-radius: 2px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--navy); background: #eaf1fa; box-shadow: inset 0 -2px 0 var(--navy); }
.lang-switch a { color: var(--muted); border-radius: 2px; }
.lang-switch a[aria-current="true"] { color: #fff; background: var(--navy); }

/* Hero: chart grid + compass rose + wave */
.hero {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 Q150 2 300 22 T600 22 T900 22 T1200 22 V40 H0Z' fill='%23f4f6f9'/%3E%3C/svg%3E") bottom center / 100% 36px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.16'%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3Ccircle cx='100' cy='100' r='70' stroke-dasharray='2 4'/%3E%3Cpath d='M100 2v196M2 100h196M31 31l138 138M169 31L31 169'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.14'%3E%3Cpath d='M100 8l9 92-9 92-9-92z'/%3E%3Cpath d='M8 100l92-9 92 9-92 9z'/%3E%3C/g%3E%3C/svg%3E") right -40px center / 360px 360px no-repeat,
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(135deg, #00539f 0%, #062a57 100%);
  padding: 40px 0 70px;
}
@media (max-width: 640px) { .hero { background-size: 100% 36px, 220px 220px, 48px 48px, 48px 48px, auto; background-position: bottom center, right -70px top 10px, 0 0, 0 0, 0 0; } }
.hero h1 { font-weight: 800; letter-spacing: -.01em; }
.hero h1::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 12px; background: var(--gold); }
.hero .lead { color: #dbe6f3; }

/* Buttons */
.btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; padding: 11px 18px; }
.btn-small { padding: 7px 12px; font-size: .78rem; }
.btn-light, .btn-light:hover { color: var(--navy-dark); }

/* Headings: a short line under page and section titles */
.page-head h1, .section h2, .content-page h1 { color: var(--navy-dark); }
.page-head h1::after, .content-page h1::after, .section-head h2::after, .section > .container > h2::after {
  content: ""; display: block; width: 48px; height: 3px; margin-top: 8px; background: var(--navy);
}
.page-head { background: #fff; border-bottom: 1px solid var(--border); }

/* Cards */
.job-card { border-radius: var(--radius); border-top: 3px solid var(--navy); transition: box-shadow .15s; }
.job-card:hover { box-shadow: 0 6px 18px rgba(6, 42, 87, .10); }
.job-card.is-featured { border-top-color: var(--gold); }
.job-facts li { background: #eef3f9; color: var(--navy-dark); border-radius: 2px; }
.job-facts .job-salary { background: #e6f4ea; color: #14532d; font-weight: 700; }
.door { border-radius: var(--radius); border-top: 3px solid var(--navy); }
.door-check { border-left: 0; border-top-color: #15803d; }
.feature { border-radius: var(--radius); border-top: 3px solid var(--navy); }
.chips a { border-radius: 2px; }
.auth-card, .cabinet-card, .af-head, .cv-sheet, .check-card { border-radius: var(--radius); }
.af-steps a { border-radius: 2px; text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.section-alt { background: #fff; }

/* Footer: dark, with an abstract signal-flag stripe (colours only, no real flag message) */
.footer-flags {
  display: block; height: 8px;
  background: linear-gradient(90deg, #c8102e 0 12.5%, #ffd100 12.5% 25%, #003da5 25% 37.5%, #ffffff 37.5% 50%, #c8102e 50% 62.5%, #003da5 62.5% 75%, #ffd100 75% 87.5%, #062a57 87.5% 100%);
}
.site-footer { background: var(--navy-dark); color: #b9c7da; border-top: 0; }
.site-footer a, .footer-nav a { color: #fff; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-brand strong { color: #fff; } .footer-brand strong span { color: var(--gold); }
.footer-inner { border-top-color: rgba(255, 255, 255, .14); }
.footer-free { color: #dbe6f3; }

/* Focus: clearly visible for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }