/* EPFL theme for Indico -- header, top navigation, breadcrumb.

   Two Elements patterns are reproduced here.

   1. The top bar. Elements' nav is a WHITE bar with bold black links; the
      red appears only as a small marker on the active/hovered item
      (.nav-main li.current-menu-item>a{background:red;color:#fff},
      .nav-main a:hover{background:#e6e6e6}). Indico ships a dark bar of
      pill buttons and sets `background:var(--surface-inverse-color)`
      directly on #global-menu, so retinting the variable is not enough --
      the element itself has to be overridden.

   2. The "header-light" sub-site lockup, which is how EPFL brands a
      service that is not www.epfl.ch:
        .header-light .logo { margin-right:1rem; padding-right:1rem;
                              border-right:1px solid #c1c1c1 }
        .header-light .site-title { font-size:1rem; color:red;
                                    text-transform:uppercase }
        .header-light p.site-title { font-weight:700; line-height:1.1em }
      i.e. the EPFL logo, a thin vertical rule, then the service name in
      red uppercase bold. Indico's header only has the logo link
      (#header-logo > img.header-logo), so the rule and the wordmark are
      added around it rather than requiring a template change. */

div.page-header {
  background-color: var(--epfl-white);
  border-bottom: 1px solid var(--epfl-gray-200);
}

div.page-header img.header-logo {
  height: 32px;
  margin: 12px 0;
}

/* The header-light lockup: logo | INDICO */
#header-logo {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 0 24px;
  text-decoration: none;
}

#header-logo::after {
  content: 'Indico';
  padding-left: 1rem;
  border-left: 1px solid var(--epfl-gray-400);
  color: var(--epfl-red);
  font-family: 'SuisseIntl', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* Top bar: white ground, bold black links, red marker on hover/active. */
#global-menu {
  background: var(--epfl-white);
  border-bottom: 1px solid var(--epfl-gray-300);
  --menu-background-color: transparent;
  --menu-text-color: var(--epfl-black);
  --menu-text-hover-color: var(--epfl-red);
  --menu-background-hover-color: var(--epfl-gray-200);
}

#global-menu > menu > li > :is(a, button) {
  font-family: 'SuisseIntl', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.83rem;
  position: relative;
  background: transparent;
  color: var(--epfl-black);
  border-radius: 0;
}

#global-menu > menu > li > :is(a, button):hover {
  background: var(--epfl-gray-200);
  color: var(--epfl-black);
}

/* The 6x5 red marker Elements uses for list bullets doubles as the nav
   indicator, which is what ties the bar to the rest of the identity. */
#global-menu > menu > li > :is(a, button)::after {
  content: '';
  position: absolute;
  left: 1em;
  bottom: 0.35em;
  width: 6px;
  height: 5px;
  background: var(--epfl-red);
  opacity: 0;
  transition: opacity 0.2s;
}

#global-menu > menu > li > :is(a, button):hover::after,
#global-menu > menu > li > :is(a, button).open::after,
#global-menu > menu > li > :is(a, button)[aria-expanded='true']::after {
  opacity: 1;
}

/* Dropdowns opened from the top bar: white card, 2px corners, grey hover
   -- Elements' .dropdown-menu rather than Indico's dark panel. */
#global-menu menu menu {
  background: var(--epfl-white);
  border: 1px solid var(--epfl-gray-300);
  border-radius: var(--epfl-radius);
  box-shadow: 0 2px 6px rgba(33, 33, 33, 0.12);
}

#global-menu menu menu a {
  color: var(--epfl-black);
  font-weight: 400;
}

#global-menu menu menu a:hover {
  background: var(--epfl-gray-200);
  color: var(--epfl-black);
}

/* Breadcrumb: Elements underlines the whole strip and strips bullets
   (.breadcrumb-wrapper{border-bottom:1px solid #d5d5d5};
   .breadcrumb li:before{content:none}). */
nav.main-breadcrumb {
  font-family: 'SuisseIntl', Arial, sans-serif;
  font-size: 0.83rem;
  border-bottom: 1px solid var(--epfl-gray-300);
}

nav.main-breadcrumb li::before {
  content: none;
}

nav.main-breadcrumb a {
  color: var(--epfl-black);
}

nav.main-breadcrumb a:hover {
  color: var(--epfl-red);
}

/* Side menu: active item takes the red block treatment Elements gives
   .nav-main li.current-menu-item. */
.side-menu .item.active,
.side-menu li.active > a {
  border-left: 3px solid var(--epfl-red);
  font-weight: 700;
}

.side-menu a:hover {
  background: var(--epfl-gray-200);
  color: var(--epfl-black);
}

/* Brand Architecture rule (EPFL Brand Guidelines, go.epfl.ch/identity):
   organisational-unit references must be separated from the EPFL logo and
   accompanied by a red square smaller than the logo. Used by the footer
   override (templates/core/footer.html). */
.epfl-unit-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: 'SuisseIntl', Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--epfl-black);
  text-decoration: none;
}

.epfl-unit-label:hover {
  color: var(--epfl-red);
}

.epfl-unit-square {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  flex: 0 0 auto;
  background: var(--epfl-red);
}

/* Event pages put a utility bar above the event banner. Indico ships it
   charcoal (`.page-header-dark{background:#424242}` hardcoded in
   dist/css/main.*.css) and colours its icons #bbb to suit. Elements has no
   dark chrome -- its nav is white with black marks and a hairline rule --
   so the bar is flipped to match #global-menu, and the icon colour has to
   be flipped with it or the icons would vanish against the new ground. */
.page-header-dark {
  background: var(--epfl-white);
  border-bottom: 1px solid var(--epfl-gray-300);
}

.page-header-dark .i-button,
.page-header-dark .i-button.text-color,
.page-header-dark a,
.page-header-dark button {
  color: var(--epfl-black) !important;
}

.page-header-dark .i-button:hover,
.page-header-dark a:hover,
.page-header-dark button:hover {
  color: var(--epfl-red) !important;
  background: var(--epfl-gray-200);
}