/* RiE 2027 – Prague, co-organized by MFF UK
   Colours follow the MFF UK design manual:
     black      #000000
     red        #D22D40  (RGB 210/45/64)  – links, buttons, highlights
     dark blue  #003657  (RGB 0/54/87)    – headings, secondary elements
   Logo stripe tints: #D22D40 / #DB5766 / #EEB1B8
*/

/* Global CSS variables */
:root {
  --spacing-company: 3rem;
  --font-weight: 400;
  --border-radius: 0;

  --mff-black: #000000;
  --mff-red: #D22D40;
  --mff-red-dark: #A82333;
  --mff-red-light: #EEB1B8;
  --mff-red-pale: #FBE6E8;
  --mff-blue: #003657;
  --mff-blue-dark: #002238;
}


/* MFF Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --color: var(--mff-black);
  --h1-color: var(--mff-blue);
  --h2-color: var(--mff-blue);
  --h3-color: var(--mff-red);
  --h4-color: var(--mff-blue);
  --h5-color: var(--mff-blue);
  --h6-color: var(--mff-blue);

  --primary: var(--mff-red);
  --primary-hover: var(--mff-red-dark);
  --primary-focus: rgba(210, 45, 64, 0.125);
  --primary-inverse: #FFF;

  --secondary: var(--mff-blue);
  --secondary-hover: var(--mff-blue-dark);
  --secondary-focus: rgba(0, 54, 87, 0.125);
  --secondary-inverse: #FFF;

  --mark-background-color: var(--mff-red-pale);
  --mark-color: var(--mff-black);
}

/* MFF Dark scheme (Auto) */
/* Enabled if the visitor's system/browser uses dark mode:
   black text -> white, dark blue -> grey, red stays.
   (The logo switches to logoRiE2027_dark.png in nav.html.) */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mff-grey: #C9D1D9;

    --color: #FFFFFF;
    --h1-color: var(--mff-grey);
    --h2-color: var(--mff-grey);
    --h3-color: var(--mff-red);
    --h4-color: var(--mff-grey);
    --h5-color: var(--mff-grey);
    --h6-color: var(--mff-grey);

    --primary: #E0505F;          /* a bit lighter red: readable small links */
    --primary-hover: #EB7A86;
    --primary-focus: rgba(210, 45, 64, 0.25);
    --primary-inverse: #FFF;

    --secondary: var(--mff-grey);
    --secondary-hover: #FFFFFF;
    --secondary-focus: rgba(201, 209, 217, 0.25);
    --secondary-inverse: #000;

    --mark-background-color: var(--mff-red);
    --mark-color: #FFF;
  }
}

/* MFF Dark scheme (Forced) */
/* For parts marked data-theme="dark" (the hero, the footer) */
[data-theme="dark"] {
  --h1-color: #FFF;
  --h2-color: #DCE6EE;
  --h3-color: #E8707D;
  --h4-color: #DCE6EE;

  --primary: #E8707D;
  --primary-hover: #F09AA4;
  --primary-focus: rgba(210, 45, 64, 0.25);
  --primary-inverse: #FFF;
}

/* MFF (Common styles) */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}


/* Typography – colours come from the --hX-color variables above */
h2,
h3,
h4,
hgroup > :last-child {
  font-weight: 600;
}

small {
  color: var(--muted-color);
}

/* Conference topics list (index.html): dark blue / grey in dark mode */
.topic {
  color: var(--h2-color);
}

/* Header */
/* Three Prague photos cross-fading (credits in footer.html):
     1) day – Zoran Supic, 2) night – Martin Krchnacek,
     3) misty morning – Denis Poltoradnev (all Unsplash)
   Each photo stays 1/3 of the cycle (--hero-cycle: 24 s = 8 s per photo).
   The semi-transparent dark blue layer keeps the white title readable
   on bright skies – change the 0.55 / 0.25 values to make it lighter/darker. */
.hero {
  --hero-shade: linear-gradient(rgba(0, 54, 87, 0.55), rgba(0, 54, 87, 0.25));
  --hero-cycle: 24s;
  position: relative;
  isolation: isolate;
  background-color: var(--mff-blue);
}

.hero-photos,
.hero-photos > div {
  position: absolute;
  inset: 0;
}

.hero-photos {
  z-index: -1;
  overflow: hidden;
}

.hero-photos > div {
  background-position: center;
  background-size: cover;
  animation: hero-fade var(--hero-cycle) ease-in-out infinite;
}

.hero-photos > div:nth-child(1) {
  background-image: var(--hero-shade),
    url("assets/zoran-supic-ldqjo79cooU-unsplash-web.jpg");
}

.hero-photos > div:nth-child(2) {
  background-image: var(--hero-shade),
    url("assets/martin-krchnacek-FGyh1aq4X88-unsplash.jpg");
  animation-delay: calc(var(--hero-cycle) * -2 / 3);
}

.hero-photos > div:nth-child(3) {
  background-image: var(--hero-shade),
    url("assets/denis-poltoradnev-Jq1zrutUFP4-unsplash.jpg");
  animation-delay: calc(var(--hero-cycle) * -1 / 3);
}

/* visible for the first third of the cycle, fading in just before it */
@keyframes hero-fade {
  0%, 28%   { opacity: 1; }
  34%, 94%  { opacity: 0; }
  100%      { opacity: 1; }
}

/* Title, date/place and buttons in the header.
   clamp(min, preferred, max): readable on phones, not too big on wide screens */
.hero header {
  text-align: right;
}

.hero hgroup {
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem);
  color: #FFF;
  margin-bottom: 0.75rem;
}

.hero hgroup > .hero-meta {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.hero-meta span {
  display: inline-block;
  margin-left: 1.25rem;
  white-space: nowrap;
}

.hero-actions a[role="button"] {
  margin: 0 0 0.5rem 0.5rem;
}

/* Soft shadow keeps the title readable on busy parts of the photos */
.hero h1,
.hero-meta {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 767px) {
  .hero header { text-align: left; }
  .hero-meta span { margin: 0 1.25rem 0 0; }
  .hero-actions a[role="button"] { margin: 0 0.5rem 0.5rem 0; }
}

/* Visitors who prefer less motion see only the first photo */
@media (prefers-reduced-motion: reduce) {
  .hero-photos > div { animation: none; opacity: 0; }
  .hero-photos > div:nth-child(1) { opacity: 1; }
}

header {
  padding: var(--spacing-company) 0;
}

header hgroup {
  margin-bottom: var(--spacing-company);
}

/* Nav */
nav .logo img {
  width: 200px;
}

/* Small screens: logo on its own line, menu items wrap below it */
@media (max-width: 767px) {
  nav.container-fluid { flex-wrap: wrap; justify-content: center; }
  nav ul.menu { flex-wrap: wrap; justify-content: center; margin: 0; }
  nav ul.menu li { padding: 0.3rem 0.6rem; }
  nav .logo img { width: 170px; }
}

/* current page (set by assets/js/include.js) looks like plain text */
nav a[aria-current="page"] {
  color: inherit;
  text-decoration: none;
  cursor: default;
}

summary[role="link"].contrast:is([aria-current],:hover,:active,:focus) {
  background-color: transparent;
  color: var(--contrast-hover);
}

/* Main */
@media (min-width: 992px) {
  main .grid {
    grid-column-gap: var(--spacing-company);
    grid-template-columns: auto 33%;
  }
}

form.grid {
  grid-row-gap: 0;
}

/* Aside nav */
aside img {
  margin-bottom: 0.33rem;
}

aside p {
  margin-bottom: var(--spacing-company);
  line-height: 1.33;
}


/* Sub-page banner photo */
img.banner {
  display: block;
  width: 100%;
  height: auto;
}

/* Boxes on the home page */
article {
  display: flow-root;             /* keeps floating images inside the box */
}

.float-img {
  float: left;
  width: 20%;
  max-width: 180px;
  margin: 0 1.5rem 1rem 0;
}

.float-img.icon {
  max-width: 110px;
}

@media (max-width: 575px) {
  .float-img { float: none; display: block; width: 40%; margin: 0 auto 1rem; }
}

.more {
  text-align: right;
  margin-bottom: 0;
}

.signature {
  text-align: right;
}

/* Important dates (dates.html) */
.important-dates table {
  margin-bottom: 0.5rem;
}

.important-dates td {
  padding: 0.35rem 0.5rem;
  font-size: 0.9rem;
}

.important-dates tr.conference td {
  color: var(--h3-color);
}

/* On the home page the dates are in the main column, not in the side panel */
.home aside .important-dates {
  display: none;
}

/* Partner logos: same height, whatever the size of the image */
.partners article {
  margin-bottom: var(--spacing);
}

.partners img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 0.5rem;
}

.history-teaser {
  text-align: center;
}