/* ==========================================================================
   styles.css
   Loaded after Bootstrap 5.3.8, so these rules win without !important.

   1. Tokens          5. Language selector
   2. Page shell      6. Form
   3. Skip link       7. Footer
   4. Navbar          8. RTL / motion / print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --surface: #e9e8e6;
  --surface-raised: #f4f3f1;
  --nav-bg: #000000;
  --nav-bg-scrolled: #000000;

  /* Ink */
  --ink: #1b1e1c;
  --ink-muted: #5c605b;
  --ink-on-dark: #ffffff;
  --ink-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* Accent — petrol */
  --accent: #12595f;
  --accent-bright: #4aa8ae;

  /* The submit button. Kept distinct from --danger so an error message and a
     primary action never read as the same thing. */
  --submit: #c02b2b;
  --submit-hover: #9d2020;

  --line: #d3d1cc;
  --line-on-dark: rgba(255, 255, 255, 0.22);

  /* The vertical rules between the navbar logos. */
  --brand-rule: #6f6f6f;

  /* Structure */
  --nav-h: 4.5rem;
  --radius: 0.5rem;
  --tap-target: 2.75rem; /* 44px — WCAG 2.5.5 / iOS HIG floor */

  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: var(--font-body);
}

@media (min-width: 992px) {
  :root { --nav-h: 5.25rem; }
}

/* --------------------------------------------------------------------------
   2. Page shell
   -------------------------------------------------------------------------- */
body {
  background-color: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;          /* 16px floor: below this iOS Safari auto-zooms */
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }
main:focus { outline: none; } /* focused only via the skip link */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

a { color: var(--accent); text-underline-offset: 0.15em; }

/* One focus ring everywhere, rather than Bootstrap's per-component shadows.
   :focus-visible keeps it off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.site-navbar :focus-visible { outline-color: var(--accent-bright); }

/* --------------------------------------------------------------------------
   3. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 1100;
  padding: 0.75rem 1.25rem;
  background: var(--surface-raised);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  transition: transform 0.15s ease-out;
}

.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   4. Navbar
   -------------------------------------------------------------------------- */
.site-navbar {
  --bs-navbar-color: var(--ink-on-dark);
  --bs-navbar-hover-color: var(--ink-on-dark);
  --bs-navbar-active-color: var(--ink-on-dark);
  --bs-navbar-brand-color: var(--ink-on-dark);
  --bs-navbar-brand-hover-color: var(--ink-on-dark);

  /* TOGGLER — disabled
  --bs-navbar-toggler-border-color: var(--line-on-dark);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-focus-width: 0;
  */

  background-color: var(--nav-bg);
  padding-block: 0.5rem;
  transition: box-shadow 0.2s ease;
}

/* Height of the bar. A floor, not a fixed height, so wrapped nav links can
   push it taller on narrow screens. */
.site-navbar > .container {
  min-height: var(--nav-h);
  row-gap: 0.5rem;
}

.site-navbar.is-scrolled {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  padding-block: 0.5rem;
}

@media (min-width: 992px) {
  .navbar-brand { font-size: 1.4rem; }
}

.site-navbar .nav-link {
  font-weight: 500;
  padding-inline: 0.9rem;
  min-height: var(--tap-target);
  display: flex;
  align-items: center;
  border-radius: var(--radius);
}

/* 4b. Brand strip
   Three equally wide links, each holding one logo, with a grey rule between
   them.

   Width is the defined dimension; height is whatever the artwork's own
   proportions produce at that width. Nothing here knows an aspect ratio, so
   swapping in taller or shorter logos changes the navbar's height and needs
   no CSS edit. --nav-h is a min-height on the container, so the bar grows to
   fit rather than clipping.

   The crop works by narrowing the link, which is the clipping box. The image
   keeps its full width inside it — `width: var(--brand-w)`, not 100% — so
   narrowing trims the right-hand side instead of scaling the logo down. */
.brand-strip {
  display: flex;
  align-items: center;
}

.brand-link {
  /* Rendered width of each logo. Three of these plus the language label is
     what the breakpoint below is derived from, so changing it may move the
     width at which they stop fitting. */
  --brand-w: 14rem;
  --brand-crop: 1;

  display: block;
  flex: none;
  overflow: hidden;

  /* Paired with the width below. Bootstrap sets border-box globally, which
     would take the padding out of --brand-w and crop the logo further
     instead of spacing it from the rule. */
  box-sizing: content-box;
  width: calc(var(--brand-w) * var(--brand-crop));
  padding-inline: 1.25rem;
}

/* The rule belongs between logos, not around them — a border on the second
   and later links puts it there without an extra element to render. */
.brand-link + .brand-link {
  border-inline-start: 1px solid var(--brand-rule);
}

.brand-link:first-child { padding-inline-start: 0; }
.brand-link:last-child { padding-inline-end: 0; }

.brand-logo {
  display: block;
  width: var(--brand-w);
  height: auto;
  max-width: none;
}

/* 992px is where three full logos plus the language label stop fitting on
   one line: the container drops from 960px to 720px, leaving a 754px strip
   in a 720px container. Below it each logo shows its left 30%. The rules
   stay where they are — they separate the links, not the artwork. */
@media (max-width: 991.98px) {
  .brand-link {
    --brand-crop: 0.27;
    padding-inline: 0.6rem;
  }
}

/* Every nav link is #ffffff, so hover cannot be signalled by a colour shift.
   A faint wash carries it instead. */
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.site-navbar .nav-link.active { position: relative; }

.site-navbar .nav-link.active::after {
  content: "";
  position: absolute;
  inset-inline: 0.9rem;
  bottom: 0.35rem;
  height: 2px;
  background: var(--accent-bright);
  border-radius: 2px;
}

/* TOGGLER — disabled
.navbar-toggler {
  border-color: var(--line-on-dark);
  width: var(--tap-target);
  height: var(--tap-target);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
*/

/* 4a. Nav links with no toggler: lay out in a row and wrap rather than
       disappear, since nothing can open a collapsed panel. */
@media (max-width: 991.98px) {
  .site-navbar .navbar-collapse:not(.collapse):not(.collapsing) .navbar-nav {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 0.25rem;
    margin-inline-start: 0;
  }

  .site-navbar .nav-link { padding-inline: 0.25rem; }
  .site-navbar .nav-link.active::after { inset-inline: 0.25rem; bottom: 0.25rem; }
}

/* --------------------------------------------------------------------------
   5. Language selector
   Sits outside the collapse, so it is reachable at every viewport width.
   -------------------------------------------------------------------------- */
.navbar-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap-target);
  padding: 0.4rem 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-on-dark);
  background-color: transparent;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--radius);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lang-toggle:hover,
.lang-toggle:active,
.lang-toggle.show {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
}

.lang-code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.lang-name { font-weight: 500; }

/* A chevron reads better than Bootstrap's bare triangle at this size. */
.lang-toggle.dropdown-toggle::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-15%, -15%);
  opacity: 0.75;
  margin-left: 0.15rem;
  vertical-align: 0;
}

.lang-menu {
  --bs-dropdown-min-width: 12rem;
  --bs-dropdown-bg: var(--surface-raised);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-bg: rgba(18, 89, 95, 0.09);
  --bs-dropdown-link-hover-color: var(--accent);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-padding-y: 0.35rem;

  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lang-menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--tap-target);
  padding-block: 0.5rem;
  font-size: 1rem;
  white-space: normal;
}

/* Current language: a check mark plus weight, never colour alone. */
.lang-menu .dropdown-item[aria-current="true"] { font-weight: 650; }

.lang-menu .dropdown-item[aria-current="true"]::after {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.8rem;
  border-right: 2.5px solid var(--accent);
  border-bottom: 2.5px solid var(--accent);
  transform: rotate(45deg) translate(-10%, -10%);
}

@media (pointer: coarse) {
  .lang-menu .dropdown-item,
  .site-navbar .nav-link { padding-block: 0.75rem; }
}

@media (max-width: 359.98px) {
  .navbar-brand { font-size: 1.1rem; }
  .lang-toggle { padding-inline: 0.55rem; }
}

/* --------------------------------------------------------------------------
   6. Form
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}

@media (min-width: 768px) {
  .form-card { padding: 2.25rem; }
}

.form-label,
legend.form-label {
  font-weight: 600;
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  float: none;   /* Bootstrap floats <legend>; undo it */
  width: auto;
}

/* Required / optional is spelled out. An asterisk needs a legend to decode,
   and the legend is usually somewhere the user is not looking. */
.field-badge {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  color: var(--ink-muted);
  background: rgba(27, 30, 28, 0.07);
}

.field-badge--required {
  color: #ffffff;
  background: var(--ink-muted);
}

.form-control,
.form-select {
  font-size: 1rem;          /* keep the 16px floor on mobile */
  padding: 0.65rem 0.8rem;
  border-color: var(--line);
  background-color: #ffffff;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent);
  box-shadow: none;         /* the global focus ring handles this */
}

/* Selects sit at the same height as the text inputs and clear the 44px touch
   floor. A disabled placeholder is greyed by the browser, which is enough
   signal on its own. */
.form-select {
  min-height: var(--tap-target);
}

.counter { font-variant-numeric: tabular-nums; }
.counter.is-near-limit { color: #9d5c00; font-weight: 600; }
.counter.is-over-limit { color: var(--submit); font-weight: 600; }

/* 6a. Number tiles
   Radio inputs, visually hidden but still focusable, with the label as the
   tile. Using opacity/position rather than display:none keeps them in the
   accessibility tree and keyboard-navigable as a radio group. */
.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

@media (min-width: 576px) {
  .number-grid { grid-template-columns: repeat(11, 1fr); }
}

.number-option { position: relative; }

.number-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.number-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: 0.5rem 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              color 0.12s ease;
}

.number-input:hover + .number-tile {
  border-color: var(--accent);
}

.number-input:checked + .number-tile {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

/* The ring has to be drawn on the label, since the input itself is invisible.
   Without this, keyboard users lose the focus indicator entirely. */
.number-input:focus-visible + .number-tile {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 6b. Attachment
   [hidden] needs help: Bootstrap sets display on .form-control and friends,
   which would otherwise override the attribute. */
.attachment-field[hidden] { display: none; }

/* 6c. Submit */
.btn-submit {
  --bs-btn-color: #ffffff;
  --bs-btn-bg: var(--submit);
  --bs-btn-border-color: var(--submit);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--submit-hover);
  --bs-btn-hover-border-color: var(--submit-hover);
  --bs-btn-active-bg: var(--submit-hover);
  --bs-btn-active-border-color: var(--submit-hover);
  --bs-btn-disabled-bg: var(--submit);
  --bs-btn-disabled-border-color: var(--submit);

  min-height: 3.5rem;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  margin-top: 0.5rem;
}

.alert a { color: inherit; }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  flex: none;
  margin-top: 4rem;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   8. RTL, reduced motion, print
   -------------------------------------------------------------------------- */
[dir="rtl"] .lang-toggle.dropdown-toggle::after {
  margin-left: 0;
  margin-right: 0.15rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-navbar, .skip-link, .site-footer, .btn-submit { display: none; }
  body { background: #ffffff; }
  .form-card { border: none; padding: 0; }
}