/* EBFC portal: shared tokens, type, buttons and form controls */

@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-normal.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('../fonts/newsreader-italic.woff2') format('woff2'); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --midnight: #07123a;
  --navy: #0c1f5c;
  --cobalt: #1d3fae;
  --cobalt-d: #16307f;
  --periwinkle: #b8c6ff;
  --sky: #e8eeff;
  --mist: #f4f6fd;
  --paper: #fbfcff;
  --white: #ffffff;
  --ink: #101936;
  --slate: #4a5578;
  --line: #d6ddf0;
  --line-strong: #aab6d8;
  --red: #d42a3f;
  --red-d: #b01f32;
  --ok: #14724a;
  --ok-bg: #e6f6ee;
  --warn: #7a4a00;
  --warn-bg: #fff3dc;
  --err: #b01f32;
  --err-bg: #fdecee;
  --focus: #4a74ff;

  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --radius: 14px;
  --radius-s: 10px;
  --shadow: 0 1px 2px rgba(7, 18, 58, .06), 0 14px 34px -14px rgba(7, 18, 58, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--cobalt); text-underline-offset: 3px; }
a:hover { color: var(--cobalt-d); }
img, svg, canvas { max-width: 100%; }
[hidden] { display: none !important; }
.icon { flex: none; vertical-align: -0.2em; }
.muted { color: var(--slate); }
.hint { color: var(--slate); font-size: .875rem; margin: 6px 0 0; }
.stack > * + * { margin-top: 18px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--white); color: var(--ink); padding: 10px 14px; border-radius: 8px; z-index: 100; font-weight: 600; }
.skip:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  font: 600 1rem/1.2 var(--font-ui);
  border: 2px solid transparent; border-radius: var(--radius-s);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--cobalt); color: var(--white); }
.btn-primary:hover { background: var(--cobalt-d); color: var(--white); }
.btn-red { background: var(--red); color: var(--white); }
.btn-red:hover { background: var(--red-d); color: var(--white); }
.btn-ghost { background: transparent; color: var(--cobalt); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--cobalt); color: var(--cobalt-d); background: var(--sky); }
.btn-danger { background: transparent; color: var(--err); border-color: #e5a3ac; }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.btn-small { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn-block { display: flex; width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Forms */
.field { margin: 0; }
.field + .field { margin-top: 18px; }
label, .label { display: block; font-weight: 600; font-size: .9375rem; margin-bottom: 6px; }
.opt { font-weight: 400; color: var(--slate); }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=search], input[type=number],
select, textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  font: 400 1rem/1.3 var(--font-ui); color: var(--ink);
  background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--radius-s);
  appearance: none; -webkit-appearance: none;
}
select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%234a5578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(29, 63, 174, .18); }
input::placeholder, textarea::placeholder { color: #8791ae; }
input[disabled] { background: var(--mist); color: var(--slate); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--err); }
.error { color: var(--err); font-size: .9rem; font-weight: 500; margin: 6px 0 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; margin: 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--cobalt); }
.check span { font-size: .9375rem; line-height: 1.45; }

/* Layout helpers for forms */
.row-2 { display: grid; gap: 18px; }
.row-2 > .field { margin: 0; }
@media (min-width: 640px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.field-gap { margin-top: 18px; }
.other-wrap { margin-top: 14px; }

/* Choice chips (radio buttons that look like buttons) */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; margin: 0; font-weight: 600; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 50px; padding: 0 20px;
  background: var(--white); border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); transition: all .12s;
}
.chip input:checked + span { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.has-error .chip span { border-color: var(--err); }

/* Alerts */
.alert { padding: 14px 16px; border-radius: var(--radius-s); border-left: 4px solid; margin: 0 0 18px; font-size: .975rem; }
.alert-ok { background: var(--ok-bg); border-color: var(--ok); color: #0c4a31; }
.alert-error { background: var(--err-bg); border-color: var(--err); color: #7a1423; }
.alert-warn { background: var(--warn-bg); border-color: #d99a26; color: var(--warn); }
.alert-info { background: var(--sky); border-color: var(--cobalt); color: var(--navy); }
.alert > :last-child { margin-bottom: 0; }

pre.code { background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 14px; overflow: auto; font-size: .85rem; white-space: pre-wrap; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}