/*
 * EA Congress Pack — mobile first, WCAG 2.1 AA.
 * Brand tokens are the values of the europeanaquatics.org Elementor global kit (Sep 2026:
 * primary #00163A, accent #2DB5FC, display font "Aquatics", text font "Rubik"). They are pinned
 * here rather than read from --e-global-* so an edit to the site kit can never break the
 * contrast this page was tested at. Final check against the EA brand book: owner Nick.
 * Everything is scoped under .eacp and specific enough to beat the Hello Elementor theme resets.
 */
.eacp {
  --eacp-deep: #00163A;
  --eacp-aqua: #2DB5FC;
  --eacp-link: #007AA3;          /* aqua darkened to 4.9:1 on white for text (sketch #0E8DB5 is 3.8:1) */
  --eacp-ink: #0B2239;
  --eacp-muted: #5E7186;
  --eacp-line: #D6E0E8;
  --eacp-soft: #FAFCFE;
  --eacp-surface: #FFFFFF;
  --eacp-hero-sub: #B9CCDD;
  --eacp-eco: #1E6E52;
  --eacp-eco-bg: #E4F1EA;
  --eacp-error: #B42318;
  /* Both faces are already loaded site-wide by the EA Elementor kit; nothing extra to download.
     Display weight 600 matches the kit (Aquatics ships Light/Regular/Medium). */
  --eacp-display: "Aquatics", "Barlow Condensed", "Arial Narrow", sans-serif;
  --eacp-text: "Rubik", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
  background: var(--eacp-surface);
  color: var(--eacp-ink);
  font-family: var(--eacp-text);
  font-size: 16px;
  line-height: 1.55;
  text-align: left;
  overflow: hidden;
  scroll-margin-top: 110px; /* clear the site's sticky header when scrolled to */
}
.eacp *, .eacp *::before, .eacp *::after { box-sizing: inherit; }
.eacp [hidden] { display: none !important; }
.eacp p { margin: 0; }

/* Hero band — deep water with the wave-grid nod (header band only). */
.eacp .eacp-hero {
  position: relative;
  overflow: hidden;
  background: var(--eacp-deep);
  color: #fff;
  padding: 22px 20px 26px;
}
.eacp .eacp-waves { position: absolute; right: -20px; bottom: -14px; color: var(--eacp-aqua); opacity: .5; pointer-events: none; }
.eacp .eacp-kicker {
  position: relative;
  color: var(--eacp-aqua);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.eacp .eacp-title {
  position: relative;
  margin: 6px 0 6px;
  color: #fff;
  font-family: var(--eacp-display);
  font-size: clamp(28px, 7.5vw, 40px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.eacp .eacp-sub { position: relative; color: var(--eacp-hero-sub); font-size: 14px; }

/* Body */
.eacp .eacp-body { display: flex; flex-direction: column; gap: 16px; padding: 22px 20px 24px; }
.eacp .eacp-entry, .eacp .eacp-result { display: flex; flex-direction: column; gap: 16px; }
.eacp .eacp-lead { font-size: 17px; color: var(--eacp-ink); }
.eacp .eacp-muted { color: var(--eacp-muted); }

/* Form */
.eacp .eacp-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.eacp .eacp-label {
  display: block; margin: 0;
  color: var(--eacp-muted);
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.eacp .eacp-input {
  width: 100%; min-height: 50px; margin: 0;
  padding: 12px 14px;
  border: 1.5px solid #8A9BAD; /* 3:1 non-text contrast for the field boundary */
  border-radius: 8px;
  background: var(--eacp-soft);
  color: var(--eacp-ink);
  font: inherit; font-size: 17px; /* ≥16px stops iOS zooming into the field */
  box-shadow: none;
}
.eacp .eacp-input::placeholder { color: var(--eacp-muted); opacity: 1; }
.eacp .eacp-input[aria-invalid="true"] { border-color: var(--eacp-error); }
.eacp .eacp-error { color: var(--eacp-error); font-size: 15px; font-weight: 500; }

.eacp .eacp-cta {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; margin: 6px 0 0;
  padding: 12px 16px;
  border: 0; border-radius: 8px;
  background: var(--eacp-aqua);
  color: var(--eacp-deep);
  font-family: var(--eacp-display);
  font-size: 19px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color .15s ease;
}
.eacp .eacp-cta:hover, .eacp .eacp-cta:focus { background: #62C8FD; color: var(--eacp-deep); }
.eacp .eacp-cta:disabled { cursor: progress; }
.eacp.eacp--busy .eacp-cta span { opacity: .35; }
.eacp.eacp--busy .eacp-cta::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 3px solid var(--eacp-deep); border-right-color: transparent; border-radius: 50%;
  animation: eacp-spin .8s linear infinite;
}
@keyframes eacp-spin { to { transform: rotate(360deg); } }
.eacp .eacp-privacy { color: var(--eacp-muted); font-size: 14px; }

/* Greeting */
.eacp .eacp-greet {
  margin: 0;
  color: var(--eacp-deep);
  font-family: var(--eacp-display);
  font-size: clamp(30px, 8vw, 40px);
  font-weight: 600; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase;
  scroll-margin-top: 110px;
}
.eacp .eacp-greet:focus { outline: none; }
.eacp .eacp-greet em { font-style: normal; color: var(--eacp-link); }

/* Sustainability panel — the centerpiece of the recognised page. */
.eacp .eacp-eco {
  padding: 14px 16px;
  border-left: 4px solid var(--eacp-eco);
  border-radius: 8px;
  background: var(--eacp-eco-bg);
  color: var(--eacp-eco);
  font-size: 16px;
}
.eacp .eacp-eco-title { font-weight: 600; font-size: 17px; margin-bottom: 4px; }

/* Documents */
.eacp .eacp-docs { display: flex; flex-direction: column; gap: 10px; }
.eacp .eacp-docs-heading {
  margin: 4px 0 0;
  color: var(--eacp-deep);
  font-family: var(--eacp-display);
  font-size: 20px; font-weight: 600; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase;
}
.eacp .eacp-doc-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.eacp .eacp-doc-list li { margin: 0; padding: 0; }
.eacp .eacp-doc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; height: 100%;
  padding: 12px 16px;
  border: 1px solid var(--eacp-line); border-radius: 10px;
  background: var(--eacp-soft);
  color: var(--eacp-ink);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.eacp .eacp-doc:hover { border-color: var(--eacp-link); background: #F2F8FC; color: var(--eacp-ink); }
.eacp .eacp-doc-text { display: flex; flex-direction: column; min-width: 0; }
.eacp .eacp-doc-title { color: var(--eacp-ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
.eacp .eacp-doc-meta { color: var(--eacp-muted); font-size: 14px; overflow-wrap: anywhere; }
.eacp .eacp-doc-open {
  color: var(--eacp-link);
  font-family: var(--eacp-display);
  font-size: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}

/* Credit — the EPAM attribution is part of the engagement; keep it on every state. */
.eacp .eacp-credit {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--eacp-line);
  color: var(--eacp-muted); font-size: 14px;
}
.eacp .eacp-credit strong, .eacp .eacp-epam { color: var(--eacp-ink); font-weight: 700; }

/* Keyboard focus */
.eacp a:focus-visible, .eacp button:focus-visible, .eacp input:focus-visible {
  outline: 3px solid var(--eacp-link);
  outline-offset: 2px;
}
.eacp .eacp-input:focus { border-color: var(--eacp-link); }

/* Tablet / desktop: card on the page, documents in two columns (design note). */
@media (min-width: 640px) {
  .eacp { border-radius: 16px; box-shadow: 0 10px 30px rgba(5, 28, 63, .10); border: 1px solid var(--eacp-line); }
  .eacp .eacp-hero { padding: 32px 36px 36px; }
  .eacp .eacp-body { padding: 30px 36px 32px; }
  .eacp .eacp-doc-list { grid-template-columns: 1fr 1fr; }
  .eacp .eacp-form { max-width: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .eacp *, .eacp *::before, .eacp *::after { animation-duration: 1ms !important; transition: none !important; }
}