/* EPFL theme for Indico -- typography and links.

   Elements' link treatment (verified in elements.min.css):
     a       { color:#212121; text-decoration:underline;
               text-decoration-color:#ff0000 }
     a:hover { color:red }
   i.e. black text with a RED underline at rest, going fully red on hover.
   Indico ships the opposite (links computed rgb(255,0,0) with
   text-decoration:none -- verified live), which reads as a warning rather
   than a link, so this file flips it back.

   Headings in Elements are weight 400 except h1 (700) and are black --
   red is reserved for accents (links, buttons, bullets, the logo). */

body {
  font-family: 'SuisseIntl', Arial, sans-serif;
  color: var(--epfl-black);
}

/* Indico's layout is built for a 13px base and breaks (overflowing
   toolbars, clipped tables) if pushed to Elements' 1rem, so the base
   size stays Indico's. The typeface, colour and weights are EPFL's. */

h1, h2, h3, h4, h5, h6,
.page-title,
.category-title,
.banner .title,
.timetable-title,
.i-box-header .i-box-title,
nav.main-breadcrumb,
.side-menu,
.conference-page,
.contribution-list,
.speaker-list,
.category-info,
.corner-message,
header .page-description,
header .page-info {
  font-family: 'SuisseIntl', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.page-title,
.category-title {
  color: var(--epfl-black);
}

/* Elements: .h1,h1{font-weight:700}; h2-h6 stay at 400. */
h1,
.page-title {
  font-weight: 700;
}

/* Serif descriptions are an Indico default (.i-box-description uses
   "Liberation Serif"); EPFL is sans-serif throughout. */
.i-box-header .i-box-description,
.i-box-description,
.page-description,
.description,
.category-description,
.markdown-text {
  font-family: 'SuisseIntl', Arial, sans-serif;
}

/* Links: black with a red underline, red on hover. Scoped away from
   anything that is really a control (buttons, menus, tabs, toolbars,
   the user menu) -- those get their own treatment and would look broken
   underlined. */
a:not(.i-button):not(.action-button):not(.ui):not([class*='icon-']):not(.title):not(.arrow) {
  color: var(--epfl-black);
  text-decoration-color: var(--epfl-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out;
}

a:not(.i-button):not(.action-button):not(.ui):not([class*='icon-']):not(.title):not(.arrow):hover,
a:not(.i-button):not(.action-button):not(.ui):not([class*='icon-']):not(.title):not(.arrow):focus {
  color: var(--epfl-red);
  text-decoration-color: var(--epfl-red);
}

/* Navigational and structural link clusters keep no underline -- Elements
   does the same for .nav-link / .btn (`a:not(.btn){text-decoration:
   underline}`). */
#global-menu a,
#global-menu button,
.side-menu a,
nav.main-breadcrumb a,
.toolbar a,
.i-tag,
.ui.menu a,
.ui.tabular.menu a,
.event-service-row a,
.timetable-item a,
.flashed-messages a {
  text-decoration: none;
}

/* Dense application listings (category tree, event list, infogrid, footer)
   deliberately diverge from Elements on one point: Elements underlines
   every content link, but Indico stacks dozens of event titles per screen
   and a permanent underline on each turns the page into noise. They keep
   EPFL's colours -- black at rest, red on hover -- and gain the red
   underline on hover only. Indico sets `text-decoration:none` on these at
   specificity 0,2,2, so the selectors are matched here rather than relying
   on the generic `a` rule. */
ul.category-list li a:hover,
.event-list li .list-name a:hover,
.infogrid a:hover,
.footer a:hover,
.event-list .toggle-hidden-events:hover {
  text-decoration: underline;
  text-decoration-color: var(--epfl-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Prose containers follow Elements exactly: links are underlined in red
   at rest and go fully red on hover. */
.markdown-text a,
.md-preview-wrapper a,
.wmd-preview a,
.page-description a,
.category-description a,
.summary-description a,
.conference-page .description a {
  color: var(--epfl-black);
  text-decoration: underline;
  text-decoration-color: var(--epfl-red);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.markdown-text a:hover,
.md-preview-wrapper a:hover,
.wmd-preview a:hover,
.page-description a:hover,
.category-description a:hover,
.summary-description a:hover,
.conference-page .description a:hover {
  color: var(--epfl-red);
}

/* Elements: .h1,h1{font-size:3rem;line-height:1.1em;font-weight:700}.
   Indico renders its page heading as h1.category-title / .page-title and
   sets weight 400 on it, so the EPFL h1 weight is restored here. The size
   stays Indico's 26px -- 3rem would push the heading out of the fixed
   header strip it sits in. */
h1,
h1.category-title,
.page-title,
.category-title {
  font-weight: 700;
}

/* Stray neutrals. Indico scatters a handful of one-off greys and near-blacks
   (#333 on h2, #444 on list dates, #555 on breadcrumbs and the month
   heading, #777 on the event timezone) that sit just off the EPFL ramp.
   Found by auditing every rendered element on the live pages against the
   Elements palette, then pinned to the two neutrals EPFL actually
   defines: #212121 for text and #707070 for secondary text. */
h2,
h3,
h4,
h5,
h6 {
  color: var(--epfl-black);
}

.event-list h3.current-month,
nav.main-breadcrumb,
nav.main-breadcrumb ol.path,
nav.main-breadcrumb ol.path li,
.event-list span.date,
.conference-page .timezone,
div.timezone {
  color: var(--epfl-gray-600);
}

/* These three carry Indico's own selectors verbatim, because the generic
   rules above lose to them on specificity:
     .dialog-page header h2 / .management-page header h2 /
     .fixed-width-standalone[-text]-page header h2,h3   -> #333
     .datetime-widget .timezone / .date-widget / .time-widget -> #777 */
.dialog-page header h2,
.dialog-page header h3,
.management-page header h2,
.management-page header h3,
.fixed-width-standalone-page header h2,
.fixed-width-standalone-page header h3,
.fixed-width-standalone-text-page header h2,
.fixed-width-standalone-text-page header h3,
.search-page header h2,
.meeting-page header h2,
.conference-page header h2 {
  color: var(--epfl-black);
}

.datetime-widget .timezone,
.date-widget .timezone,
.time-widget .timezone,
.infoline.date .timezone {
  color: var(--epfl-gray-600);
}