/* =====================================================================
   The Prague Summit on Future Education — Save the Date landing page
   Built from the Figma frame "Save the Date Landing Page" (1920×1080).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Fonts
   Neulis Sans (display) is loaded via Adobe Fonts — see <link> in index.html.
   Adobe Fonts exposes the family as "neulis-sans" (kebab-case); we also
   list "Neulis Sans" so locally-installed copies work, and keep Plus
   Jakarta Sans as a visually-similar fallback while the kit downloads
   or if it's blocked.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Design tokens
   --------------------------------------------------------------------- */
:root {
  --bg:            #000006;
  --cream:         #F5F7F4;
  --muted:         #8B8B8F;
  --input-bg:      #181620;
  --input-border:  #3E3A4E;

  --leadership:    #FF324E;
  --ai:            #7959FE;
  --bilingual:     #0A92E3;
  --talent:        #00C094;

  --gradient-text:   linear-gradient(90deg, #FF324E 0%, #7959FE 45%, #0A92E3 72%, #00C094 100%);
  --gradient-button: linear-gradient(90deg, #FF324E 0%, #7959FE 100%);

  --font-display: "neulis-sans", "Neulis Sans", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

button { font: inherit; cursor: pointer; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   Decorative side graphics
   --------------------------------------------------------------------- */
.side-graphic {
  position: fixed;
  top: 50%;
  width: 480px;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.side-graphic--left  { left: 0; }
.side-graphic--right { right: 0; top: 44%; }

/* ---------------------------------------------------------------------
   Page shell — logo at the top, footer at the bottom, hero centered.
   --------------------------------------------------------------------- */
.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 60px 24px 48px;
}

/* ---------------------------------------------------------------------
   Logo
   --------------------------------------------------------------------- */
.site-header { flex-shrink: 0; }

.logo {
  display: flex;
  align-items: center;
  gap: 22px;
  transition: opacity 0.2s ease;
}
.logo:hover { opacity: 0.85; }

.logo__symbol   { width: 71.6px;  height: 52px; }
.logo__wordmark { width: 134.9px; height: 44.2px; }

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1040px;
  padding: 56px 0;
  text-align: center;
}

/* Eyebrow — date + location ----------------------------------------- */
.eyebrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
}

.eyebrow__date {
  font-size: clamp(1.375rem, 0.95rem + 1.9vw, 2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
}

.eyebrow__location {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.icon-pin { width: 12px; height: 16px; flex-shrink: 0; }

/* Title -------------------------------------------------------------- */
.title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 40px 0 0;
  max-width: 772px;
  font-size: clamp(2.5rem, 1.2rem + 5.8vw, 5rem);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.title__line { display: block; }

.title__line--gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Lead --------------------------------------------------------------- */
.lead {
  margin: 32px 0 0;
  max-width: 870px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.78;
  color: var(--muted);
}

/* Host card ---------------------------------------------------------- */
.host {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.host__photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(245, 247, 244, 0.08);
}

.host__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
}
.host__label { color: var(--cream); }

/* Save the Date — button + calendar menu ---------------------------- */
.save-date {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
}

.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 32px;
  border: 0;
  border-radius: 9999px;
  background: var(--gradient-button);
  color: var(--cream);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-save:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 12px 32px -8px rgba(255, 50, 78, 0.5),
              0 12px 32px -8px rgba(121, 89, 254, 0.5);
}
.btn-save:active { transform: translateY(0); }

.icon-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
/* The arrow tips downward while the calendar menu is open. */
.btn-save[aria-expanded="true"] .icon-arrow { transform: rotate(90deg); }

/* Calendar dropdown */
.calendar-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 248px;
  padding: 8px;
  background: #14121d;
  border: 1px solid var(--input-border);
  border-radius: 16px;
  box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.85);
}
.calendar-menu[hidden] { display: none; }
.calendar-menu:not([hidden]) { animation: menu-in 0.16s ease-out; }

@keyframes menu-in {
  from { opacity: 0; transform: translate(-50%, -6px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

.calendar-menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  transition: background-color 0.15s ease;
}
.calendar-menu__item[hidden] { display: none; }
.calendar-menu__item:hover,
.calendar-menu__item:focus-visible {
  background: rgba(245, 247, 244, 0.07);
  outline: none;
}

.calendar-menu__icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--muted);
}

/* Email signup ------------------------------------------------------- */
.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 384px;
  max-width: 100%;
  margin-top: 52px;
}

.signup__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.33;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
}

.signup__form {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 12px;
}

.signup__input {
  flex: 1;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--input-border);
  border-radius: 9999px;
  background: var(--input-bg);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.75rem;
  line-height: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.signup__input::placeholder { color: var(--cream); opacity: 1; }
.signup__input:focus-visible {
  outline: none;
  border-color: var(--ai);
  box-shadow: 0 0 0 3px rgba(121, 89, 254, 0.25);
}
.signup__input.is-invalid {
  border-color: var(--leadership);
  box-shadow: 0 0 0 3px rgba(255, 50, 78, 0.2);
}

.signup__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  padding: 16px 24px;
  border: 1px solid var(--input-border);
  border-radius: 9999px;
  background: transparent;
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.signup__btn:hover {
  border-color: #5b5670;
  background: rgba(245, 247, 244, 0.04);
}
.signup__btn[disabled],
.signup__input[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.signup__feedback {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 0.75rem;
  line-height: 1.33;
  min-height: 1em;
}
.signup__feedback:empty { display: none; }
.signup__feedback--error   { color: #FF6175; }
.signup__feedback--success { color: var(--talent); }

.signup__note {
  margin: 28px 0 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.33;
  color: var(--muted);
}
/* When feedback is shown, tighten the gap above the note. */
.signup__feedback:not(:empty) + .signup__note { margin-top: 14px; }

/* ---------------------------------------------------------------------
   Partner strip — "Presented by" (left) + "Under the auspices of" (right)
   Sits at the very top of the page, above the main logo, separated from
   it by a hairline.
   --------------------------------------------------------------------- */
.partner-strip {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  max-width: 1040px;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(245, 247, 244, 0.08);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Credits — shared pattern for both partner blocks
   --------------------------------------------------------------------- */
.credit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  flex-shrink: 0;
}

/* Left-anchored presenter, right-anchored auspice */
.credit--presenter { align-items: flex-start; text-align: left; }
.credit--auspice   { align-items: flex-end;   text-align: right; }

.credit__label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
}

.credit__link { display: inline-flex; }

.credit__logo {
  width: auto;
  opacity: 0.85;
}

/* Slightly smaller in the top strip than they used to be at the bottom */
.credit__logo--presenter { height: 42px; }
.credit__logo--auspice   { height: 34px; }

/* ---------------------------------------------------------------------
   Footer — topic tags
   --------------------------------------------------------------------- */
.site-footer { flex-shrink: 0; }

.topics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--muted);
}

.topic__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot, var(--muted));
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Shared focus styles
   --------------------------------------------------------------------- */
.btn-save:focus-visible,
.signup__btn:focus-visible,
.logo:focus-visible {
  outline: 2px solid var(--ai);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1600px) {
  .side-graphic { width: 340px; opacity: 0.5; }
  .side-graphic--right { top:45.5%; }
}

@media (max-width: 760px) {
  .side-graphic { display: none; }

  .page { padding: 40px 20px 36px; }
  .hero { padding: 40px 0; }

  .logo { gap: 16px; }
  .logo__symbol   { width: 55px;   height: 40px; }
  .logo__wordmark { width: 103px;  height: 33.8px; }

  .lead { font-size: 1rem; line-height: 1.7; }
}

@media (max-width: 560px) {
  /* Partner strip stays side-by-side on mobile — presenter left, auspice right.
     Everything shrinks so it fits comfortably without dwarfing the summit logo. */
  .partner-strip {
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
  }
  .credit { gap: 8px; }
  .credit__label { font-size: 0.625rem; letter-spacing: 1.4px; }
  .credit__logo--presenter { height: 26px; }
  .credit__logo--auspice   { height: 22px; }
}

@media (max-width: 480px) {
  .signup__form { flex-direction: column; }
  .signup__btn { justify-content: center; }
}

/* ---------------------------------------------------------------------
   Motion preferences
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}