/* =========================================================================
   ELIXIR CZ — Registration form stylesheet (modern refresh)
   Built for: elixir-cz-all-hands-2026/registration.php
   ---------------------------------------------------------------------------
   Brand source: ELIXIR Brand Guidelines 2025
     Royal blue   #023452  (headings, links, primary text accents)
     Neutral grey #4d4848  (body copy)
     Bright orange#f47d20  (calls to action)
     Olive green  #bebf32  (sparing use — success / secondary accent)
     Typeface: Lato (recommended for ELIXIR websites)
   ---------------------------------------------------------------------------
   HOW TO USE
   This file is written mostly with element-level selectors (form, label,
   input, select, h2, h3, a, button…) rather than guessing custom class
   names, so it should apply cleanly no matter how the PHP form generator
   named its classes. To install it:
     1. Save this file over the current registration.css (same filename/
        path), OR
     2. Upload it anywhere on the site and change the <link rel="stylesheet"
        href="..."> in registration.php to point at it.
   If a handful of rules don't take effect, the old stylesheet is probably
   using an ID selector (higher specificity) — send me that snippet and I'll
   tighten the match.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700;900&display=swap');

:root {
  --elixir-blue:        #023452;
  --elixir-blue-light:  #0a4a70;
  --elixir-grey:        #4d4848;
  --elixir-grey-soft:   #7a7676;
  --elixir-orange:      #f47d20;
  --elixir-orange-dark: #d9660c;
  --elixir-olive:       #bebf32;

  --surface:      #ffffff;
  --page-bg:       #f4f6f8;
  --border-color:  #dfe3e8;
  --border-focus:  var(--elixir-blue-light);
  --radius:        10px;
  --radius-sm:     6px;
  --shadow:        0 1px 3px rgba(2, 52, 82, 0.06), 0 8px 24px rgba(2, 52, 82, 0.06);
  /* --max-width:     760px; */
  --max-width:     1140px;
  --font:          'Lato', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------------------------------------------------------------- base -- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 40px 20px 60px;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--elixir-grey);
  background: var(--page-bg);
}

/* Centered "card" containing the whole form. Most of these registration
   pages render everything inside a single top-level <form>; if the markup
   instead wraps things in a generic container div, add that selector here
   too (e.g. body > div, main). */
body > form,
body > div,
main {
  max-width: var(--max-width);
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 48px 48px;
}

@media (max-width: 600px) {
  body { padding: 0; }
  body > form,
  body > div,
  main {
    border-radius: 0;
    box-shadow: none;
    padding: 28px 20px 36px;
  }
}

/* -------------------------------------------------------------- header -- */

/* Logo / event image at the top of the page */
a:has(img) img,
body > form > a:first-of-type img,
body > p:first-of-type img {
  display: block;
  max-width: 320px;
  height: auto;
  margin: 0 auto 28px;
}

h1, h2 {
  color: var(--elixir-blue);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 6px;
  line-height: 1.25;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.6rem; }

/* The "24-26 November 2026, Třešť, Czech Republic" line sits right under
   the title as plain text — style the paragraph immediately following it */
h2 + p,
h1 + p {
  text-align: center;
  color: var(--elixir-grey-soft);
  font-size: 1.05rem;
  margin: 0 0 32px;
  padding-bottom: 24px;
  border-bottom: 3px solid var(--elixir-orange);
}

/* ------------------------------------------------------ section titles -- */

/* Section headers such as "Personal information", "Motivation letter",
   "Bowling", "Conference contribution"… render as bold text or <h3>/<h4>.
   Cover both so the styling lands regardless of markup. */
h3, h4,
b, strong {
  color: var(--elixir-blue);
}

h3, h4 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 40px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
  position: relative;
}

h3:first-of-type, h4:first-of-type {
  margin-top: 28px;
  padding-top: 0;
  border-top: none;
}

h3::before, h4::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--elixir-orange);
  border-radius: 2px;
  margin-right: 10px;
  transform: translateY(-1px);
}

/* Stand-alone bold "labels" used as section titles inherit the rule above
   for strong/b too, which is intentionally subtle (color only) so it
   doesn't hijack every bold word in body copy. */

/* ---------------------------------------------------------- fieldsets -- */

fieldset {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin: 24px 0;
  padding: 8px 20px 20px;
}

legend {
  padding: 0 10px;
  margin-left: -6px;
  color: var(--elixir-blue);
  font-weight: 700;
  font-size: 1.05rem;
}

/* ------------------------------------------------------------- layout -- */

p { margin: 0 0 16px; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 28px 0;
}

/* --------------------------------------------------------- form basics -- */

label {
  display: block;
  font-weight: 600;
  color: var(--elixir-blue);
  margin: 18px 0 6px;
  font-size: 0.95rem;
}

/* Text-like inputs and selects */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  color: var(--elixir-grey);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

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

select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23023452' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 38px;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(2, 52, 82, 0.14);
}

input::placeholder,
textarea::placeholder {
  color: #a7adb3;
}

/* -------------------------------------------------- radios & checkboxes -- */

input[type="radio"],
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0 8px 0 16px;
  accent-color: var(--elixir-orange);
  vertical-align: middle;
  cursor: pointer;
}

/* Give the very first radio/checkbox in a question a bit more breathing
   room from the question text right before it (this is what was tight on
   the "Notification" YES/NO line) */
p input[type="radio"]:first-of-type,
p input[type="checkbox"]:first-of-type,
label input[type="radio"]:first-of-type,
label input[type="checkbox"]:first-of-type {
  margin-left: 24px;
}

/* "YES  NO" style choices and checkbox agreements typically sit inline
   after a question. Give the labels that immediately follow a radio/
   checkbox a lighter, inline treatment instead of the block heading style
   used for field labels above. */
input[type="radio"] + label,
input[type="checkbox"] + label,
label:has(> input[type="radio"]),
label:has(> input[type="checkbox"]) {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  color: var(--elixir-grey);
  margin: 0 20px 12px 0;
  cursor: pointer;
}

/* --------------------------------------------------------------- links -- */

a {
  color: var(--elixir-blue);
  text-decoration: underline;
  text-decoration-color: rgba(2, 52, 82, 0.3);
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:hover {
  color: var(--elixir-orange-dark);
  text-decoration-color: currentColor;
}

/* ----------------------------------------------------------- buttons -- */

button,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  background: var(--elixir-orange);
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 40px;
  margin-top: 24px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 6px 16px rgba(244, 125, 32, 0.28);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--elixir-orange-dark);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(244, 125, 32, 0.28);
}

button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(2, 52, 82, 0.4);
  outline-offset: 2px;
}

/* Centre the submit button and the small helper note beneath it */
input[type="submit"] {
  display: block;
  margin: 32px auto 4px;
}

/* IMPORTANT — this page swaps between two submit buttons using inline
   styles set by default.js's change_understand(): clicking the "I
   understand" YES radio sets #disabled_submit to display:none and
   #allow_submit to display:block. That JS only ever runs *after* a
   click, so the correct starting state must come from CSS. This
   restores it: the disabled/explanatory button shows first, the real
   Submit button stays hidden until the checkbox is confirmed. */
#allow_submit {
  display: none;
}

#disabled_submit {
  display: block;
}

#allow_submit,
#disabled_submit {
  text-align: center;
  margin-top: 32px;
}

#allow_submit button,
#disabled_submit button {
  margin-top: 0;
}

/* The disabled explanatory button shouldn't look like a live orange CTA */
button:disabled,
input:disabled {
  background: #d7dade;
  color: #6b6f75;
  cursor: not-allowed;
  box-shadow: none;
  font-weight: 600;
}

/* Respect the `hidden` attribute (used on the second "understand" radio)
   and common hide-classes, in case anything else on the page relies on
   them */
[hidden],
.hidden,
.is-hidden,
.js-hidden,
.hide {
  display: none !important;
}

input[type="submit"] + *,
button + small,
form > p:last-of-type {
  text-align: center;
  font-size: 0.85rem;
  color: var(--elixir-grey-soft);
}

/* --------------------------------------------------------------- footer -- */

/* Copyright / Privacy / Cookies / Email line at the very bottom of the
   page. It's plain text outside the card in the current markup, so style
   it as a quiet footer strip. */
p.footer {
  text-align: center;
}

body > p:last-of-type {
  max-width: var(--max-width);
  margin: 32px auto 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--elixir-grey-soft);
}

body > p:last-of-type a {
  color: var(--elixir-grey-soft);
  text-decoration-color: rgba(77, 72, 72, 0.3);
}

/* ------------------------------------------------------- misc / helpers -- */

::selection {
  background: rgba(244, 125, 32, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}