@charset "UTF-8";

/*
 * TTP Registry theme (shape): shared TRIALIVE layout (light) plus the TTP header. Colours: ttp-colors.css.
 * Header: banner picture (assets/images/ttp-banner.png, 1540x111) as header background, the logo
 * (assets/images/ttp-logo.svg, vector rebuild of the THTP logo, ROOT_LOGO in config/instance.inc) in a translucent title box, translucent panel for the user/mode/language
 * block on the right, red menu bar below.
 * Instance asset: lives in assets/css of the wss-project, not in modules/ims.
 */
@import url("/assets/modules/ims/css/trialive-light-styles.css");

:root {
  --trialive-header-height: 111px;
  /* logo height (the SVG is 1722 x 212, ratio 8.12) */
  --ttp-logo-h: 72px;
  --trialive-font-sans: "Open Sans", Verdana, Arial, sans-serif;
  --ttp-font-head: "Exo 2", "Open Sans", Verdana, Arial, sans-serif;
}

/* ---- header with banner ------------------------------------------------ */

.root > tbody > .r1 > .c11 {
  border-bottom: 0;
  background: var(--ttp-banner) center / cover no-repeat #7b3b3b;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* the header row fills the banner (flex rows inside table-row-groups are only as high as their content) */
.c11tab > tbody {
  display: block;
  height: var(--trialive-header-height);
}

.root .c11tab > tbody > tr {
  height: 100%;
  column-gap: 16px;
}

/* title box: logo and instance label */
.c11tab > tbody > tr > td.c11tab11 {
  height: auto;
}

.c11tab11 {
  flex: 0 1 auto;
  margin: 0 0 0 var(--trialive-content-gutter);
  padding: 7px 22px 7px 12px;
  border-radius: var(--trialive-radius-sm);
  color: var(--ttp-grey-text);
  background: var(--ttp-header-veil);
  /* no instance label next to the logo (ROOT_BANNER text node): the logo carries the whole title */
  font-size: 0;
}

.c11tab11 img {
  height: var(--ttp-logo-h) !important;
  max-width: none;
}

/* user / mode / language block */
.c11tab13,
.auth .c11tab13 {
  flex: 0 1 auto;
  height: auto;
  margin: 0 var(--trialive-content-gutter) 0 0;
  padding: 7px 14px;
  border-radius: var(--trialive-radius-sm);
  color: var(--trialive-text-2) !important;
  background: var(--ttp-header-veil);
}

.c11tab13 .ss_user_name a,
.c11tab13 .ws-langswitch-flat a {
  color: var(--ttp-grey-text);
}

.c11tab13 .ss_user_name a:hover,
.c11tab13 .ws-langswitch-flat a:hover {
  color: var(--ttp-red);
}

/* ---- menu bar ----------------------------------------------------------- */

.root > tbody > .r2 > .c21 {
  border-bottom: 1px solid var(--trialive-secondary-5);
  background: var(--ttp-nav-veil);
}

.ws-ddmenu .menuitem,
.icon-ddmenu .menuitem {
  color: var(--ttp-red);
}

.ws-ddmenu .menuitem:hover,
.icon-ddmenu .menuitem:hover {
  color: #c00000;
}

.ws-ddmenu .menuitem.selected,
.icon-ddmenu .menuitem.selected {
  color: var(--ttp-grey);
  background: var(--trialive-transparent);
}

/* ---- fonts and headings (production portal: Exo 2 for header, menu and titles, Open Sans for text) -------------- */

.c11tab11,
.ws-ddmenu,
.icon-ddmenu,
.c31tab14top {
  font-family: var(--ttp-font-head);
}

.ws-ddmenu .menuitem,
.icon-ddmenu .menuitem {
  font-size: 1.08em;
  font-weight: 400;
}

.ws-ddmenu .menuitem.selected,
.icon-ddmenu .menuitem.selected {
  font-weight: 700;
}

.c31tab14top {
  color: #c00000;
  font-weight: 700;
}

.c31tab14top :is(span, a, b) {
  color: inherit;
}

/* ---- narrow desktop: smaller logo so that the label does not wrap ------------------------------------------------ */

@media (min-width: 1101px) and (max-width: 1180px) {
  :root {
    --ttp-logo-h: 48px;
  }
}

/* ---- tablet and phone: logo box above the info block ----------------------------------------------------------- */

@media (max-width: 1100px) {
  :root {
    --trialive-header-height: 150px;
    --ttp-logo-h: min(64px, calc((100vw - 56px) / 8.12));
  }

  .root .c11tab > tbody > tr {
    display: grid;
    height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: start;
    gap: 6px;
  }

  .c11tab > tbody > tr > td.c11tab11 {
    justify-self: start;
    margin: 0 12px;
    padding: 5px 10px;
  }

  .c11tab11 img {
    margin-right: 8px;
  }

  .c11tab13,
  .auth .c11tab13 {
    width: auto;
    max-width: none;
    height: auto;
    margin: 0 12px;
    padding: 5px 10px;
  }
}

@media (max-width: 620px) {
  :root {
    --trialive-header-height: 162px;
  }

  /* the four menu items fit next to the three icons without scrolling */
  .ws-ddmenu .menuitem {
    padding: 0 7px;
    font-size: 1em;
  }
}