/*
 * WWCS 2027 — Custom Indico conference stylesheet
 * WhatWorks Climate Solutions / MCC
 *
 * Based on the Indico conference theme variable system (see Conf_Basic.scss)
 * and the WhatWorks Design Guide v02 (June 2026).
 *
 * Brand palette:
 *   Primary Blue     #312783   (tints: 80% #5a529c, 60% #837db5, 40% #ada9cd, 10% #eae9f3)
 *   Primary Green    #009b62   (tints: 80% #33af81, 60% #66c3a1, 40% #99d7c0)
 *   Secondary Yellow #fbbc42
 *   Secondary Coral  #ed6c84
 *
 * Typography: Work Sans (Extra Bold for headlines, Medium for sublines, Regular for body).
 *
 * NOTE: Work Sans is self-hosted and loaded via the site-wide customization
 * stylesheet (wwcs-global.css → @font-face pointing at
 * /static/custom/files/fonts/…), which loads on every page including event
 * pages — no font loading needed here.
 */

/* ---------------------------------------------------------------------------
 * 1. Theme variables
 * ------------------------------------------------------------------------ */

:root {
  /* WWCS brand palette (for reuse further down) */
  --wwcs-blue: #312783;
  --wwcs-blue-80: #5a529c;
  --wwcs-blue-60: #837db5;
  --wwcs-blue-40: #ada9cd;
  --wwcs-blue-10: #eae9f3;
  --wwcs-blue-05: #f5f4f9;
  --wwcs-green: #009b62;
  --wwcs-green-80: #33af81;
  --wwcs-green-60: #66c3a1;
  --wwcs-green-40: #99d7c0;
  --wwcs-yellow: #fbbc42;
  --wwcs-coral: #ed6c84;
  /* 80% shade of Primary Green (darker accent where needed) */
  --wwcs-green-dark: #007c4e;

  --wwcs-font: 'Work Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* "The Wave" linear gradient (blue -> green). Weighted towards blue so the
     white conference title always sits on the high-contrast blue side. */
  --wwcs-gradient: linear-gradient(105deg, var(--wwcs-blue) 0%, var(--wwcs-blue) 40%, var(--wwcs-green) 100%);

  /* Header */
  --conf-theme-header-bg: var(--wwcs-blue);
  --conf-theme-header-border-bottom: var(--wwcs-blue);
  --conf-theme-header-text: white;

  /* Subtitle area (date/place bar under the header) */
  --conf-theme-subtitle-bg: var(--wwcs-blue-05);
  --conf-theme-subtitle-border: var(--wwcs-blue-10);
  --conf-theme-subtitle-text: var(--wwcs-blue);

  /* Left menu */
  --conf-theme-menu-bg: var(--wwcs-blue-05);
  --conf-theme-menu-border: var(--wwcs-blue-10);
  --conf-theme-menu-link: var(--wwcs-blue);
  --conf-theme-menu-selected: var(--wwcs-green);
  --conf-theme-menu-selected-bg: var(--wwcs-blue-10);
  --conf-theme-menu-selected-border: var(--wwcs-blue-40);

  --conf-theme-hover-bg: var(--wwcs-blue-10);
  --conf-theme-hover-color: var(--wwcs-blue);

  /* Support box */
  --conf-theme-support-bg: var(--wwcs-blue-05);
  --conf-theme-support-border: var(--wwcs-blue-10);
  --conf-theme-support-header-bg: var(--wwcs-blue);
  --conf-theme-support-header-text: white;
  --conf-theme-support-text: #555;

  /* Announcement bar (uses Secondary Yellow for attention) */
  --conf-theme-announcement-bg: #fef2d9;
  --conf-theme-announcement-border: var(--wwcs-yellow);
  --conf-theme-announcement-text: var(--wwcs-blue);
  --conf-theme-announcement-border-top: 1px solid var(--conf-theme-announcement-border);
  --conf-theme-announcement-border-bottom: 1px solid var(--conf-theme-announcement-border);
  --conf-theme-announcement-shadow: none;
}

/* ---------------------------------------------------------------------------
 * 2. Typography
 * ------------------------------------------------------------------------ */

body {
  font-family: var(--wwcs-font);
  /* Indico default is 13px; em-based sizes throughout the page scale along */
  font-size: 15px;
  /* Base text color: Primary Blue (overrides semantic.css rgba(0,0,0,0.87)) */
  color: var(--wwcs-blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--wwcs-font);
}

/* Conf_Basic sets verdana/arial explicitly in these places — override them */
#outer li a,
.col2,
.simpleTextAnnouncement,
.inner {
  font-family: var(--wwcs-font);
}

/* Indico's page styles set Roboto explicitly (see _pages.scss /
   _typography_elements.scss) — override with the same selectors.
   (.description/.infogrid need their own rule: the Roboto there is set
   directly on the descendants, so inheritance from .conference-page
   doesn't reach them.) */
.conference-page,
.conference-page .description,
.conference-page .infogrid,
ul.steps .label,
.banner .title {
  font-family: var(--wwcs-font);
}

/* Indico forms default to "Liberation Sans" with gray text (_forms.scss) —
   align with the theme font and base text color */
.i-form {
  font-family: var(--wwcs-font);
  color: var(--wwcs-blue);
}

/* Stacked form layout: labels above their fields, left-aligned — replaces
   Indico's two-column layout (right-aligned labels floated next to fields) */
.i-form.horizontal .form-label,
.i-form .form-group.horizontal .form-label {
  float: none;
  width: 100%;
  text-align: left;
  line-height: 1.4;
  margin-bottom: 0.3em;
}

.i-form.horizontal .form-field,
.i-form .form-group.horizontal .form-field {
  float: none;
  width: 100%;
  margin-left: 0;
  padding-left: 0;
}

/* --- Form legibility & hierarchy ---------------------------------------
   Only the QUESTION is bold blue; answers are regular-weight neutral dark,
   so the eye can separate structure from content at a glance. */

/* Questions */
.i-form .form-label {
  font-weight: 600;
  font-size: 1.05em;
  color: var(--wwcs-blue);
}

/* Answer options (checkbox/radio texts) and other in-field labels */
.i-form .form-field label {
  font-weight: 400;
  color: #3f3f4a;
  line-height: 1.5;
}

/* Checks and radios in brand green, with air between control and text */
.i-form input[type='checkbox'],
.i-form input[type='radio'] {
  accent-color: var(--wwcs-green);
  margin-right: 0.45em;
}

/* Breathing room: rhythm between questions, tighter within option lists */
.i-form .form-group {
  margin-bottom: 1.4em;
}

.i-form .form-field li,
.i-form .i-checkbox,
.i-form .i-radio {
  margin-bottom: 0.35em;
}

/* Option-group sub-headings inside fields (e.g. the track categories
   "Core Focus Areas" / "Methods": <label><strong>…</strong></label>) */
.i-form .form-field label > strong {
  color: var(--wwcs-blue);
  font-weight: 600;
}

/* Explainer/info texts under fields: smaller, calmer (italics kept) */
.i-form .form-field-description {
  font-size: 0.92em;
  color: #63637a;
  line-height: 1.5;
  margin-top: 0.4em;
}

/* Required-field asterisk: Indico pins it absolutely to the label's right
   edge, which lands at the far page edge now that labels are full-width —
   place it inline right after the label text instead */
.i-form .form-group .form-label > .required {
  position: static;
  margin-left: 0.3em;
  font-size: 1.1em;
  color: var(--wwcs-coral);
}

/* Semantic UI components use their own 'Muli'/'Roboto' stacks on many
   specific selectors. Broad override; elements carrying icon fonts
   (.icon, <i>) and code blocks are excluded so glyphs keep working.
   (Pseudo-element fonts like 'Checkbox'/'Step' are unaffected anyway.) */
.ui:not(.icon),
.ui :not(.icon):not(i):not(code):not(pre) {
  font-family: var(--wwcs-font) !important;
}

/* ---------------------------------------------------------------------------
 * 3. Header — "The Wave" gradient
 *
 * NOTE: Indico injects the event's layout colors as inline styles on
 * .confheader, .confTitleBox, .confSubTitleBox and .confSubTitle, so the
 * brand overrides here need !important to win.
 * ------------------------------------------------------------------------ */

/* The gradient sits on the outer header container so that it covers the
   title AND the date/search bar below it as one continuous surface. */
.confheader {
  background: var(--wwcs-gradient) !important;
  border-color: transparent !important;
}

.confTitleBox {
  background: transparent !important;
  border-bottom: none !important;
}

/* Hide the text title — the logo carries the event name
   (its alt text keeps the name accessible to screen readers) */
.conference-title-link span[itemprop='title'] {
  display: none;
}

/* Headlines are Extra Bold per design guide (Conf_Basic sets font-weight: normal) */
.confTitle h1,
.conference-title-link {
  font-weight: 800;
}

.conference-title-link {
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
 * 4. Subtitle / date bar
 * (transparent — it sits on the gradient of .confheader above)
 * ------------------------------------------------------------------------ */

.confSubTitleBox {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
}

.confSubTitle {
  color: white !important;
}

/* Hide the timezone line under the date */
div.datePlace > div.timezone {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 5. Left menu
 * ------------------------------------------------------------------------ */

/* Green accent bar on the selected item, brand-blue Medium-weight links */
.menuConfTitle a {
  font-weight: 500;
}

.menuConfSelected,
.menuConfMiddleCellSelected {
  border-left: 3px solid var(--wwcs-green);
}

.menuConfSelected a {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 6. Links, text colors and accents
 * ------------------------------------------------------------------------ */

/* Global link colors (overrides _lists.scss: #09c, orange on hover):
   Primary Blue, turning Primary Green on hover */
a,
.fake-link,
.ui-widget-content a {
  color: var(--wwcs-blue);
}

a:hover,
.fake-link:hover,
.ui-widget-content a:hover {
  color: var(--wwcs-green);
  cursor: pointer;
}

/* Content links are underlined; the underline disappears on hover.
   Scoped to content areas (not a global `a` rule) so menus, toolbars and
   links styled as buttons stay clean. */
.confBodyBox a:not(.i-button),
.conferenceDetails a:not(.i-button),
.page-description a:not(.i-button),
.simpleTextAnnouncement a:not(.i-button) {
  text-decoration: underline;
}

.confBodyBox a:not(.i-button):hover,
.conferenceDetails a:not(.i-button):hover,
.page-description a:not(.i-button):hover,
.simpleTextAnnouncement a:not(.i-button):hover {
  text-decoration: none;
}

/* Event description text in Primary Blue (default is secondary gray) */
.conferenceDetails .description {
  color: var(--wwcs-blue);
}

/* Call-for-abstracts announcement text (default #777 gray) */
.call-for-abstracts .cfa-announcement {
  color: var(--wwcs-blue);
}

/* Indico's default orange page headings ($dark-orange #cb6d04) -> Primary Blue */
.conference-page header h2,
.page-title {
  color: var(--wwcs-blue);
}

/* ---------------------------------------------------------------------------
 * 7. Action boxes and highlight buttons
 * (e.g. "The call for abstracts is open" / "Submit new abstract",
 *  also used for registration prompts)
 * ------------------------------------------------------------------------ */

.action-box.highlight {
  background: var(--wwcs-blue-05);
  border-color: var(--wwcs-blue-40);
}

/* !important needed: Indico's own selectors carry long :not() chains that
   outrank any reasonable selector we could write here. */
.action-box.highlight .section > .icon,
.action-box.highlight .section .text .label {
  color: var(--wwcs-blue) !important;
}

/* Primary call-to-action buttons: Primary Green, switching to Primary Blue
   on hover. Larger text and generous horizontal padding for CTA weight.
   The :not() chain mirrors Indico's own selector so ours wins by load order. */
.i-button.highlight:not(.label):not(.borderless):not(.text-color) {
  background: var(--wwcs-green);
  border-color: var(--wwcs-green);
  color: #fff;
  font-size: 17px;
  padding-left: 30px;
  padding-right: 30px;
  text-decoration: none;
}

.i-button.highlight:not(.label):not(.borderless):not(.text-color):hover,
.i-button.highlight:not(.label):not(.borderless):not(.text-color):active,
.i-button.highlight:not(.label):not(.borderless):not(.text-color):focus {
  background: var(--wwcs-blue);
  background-image: none;
  border-color: var(--wwcs-blue);
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * 7b. Progress steps (e.g. abstract-submission timeline)
 * Indico uses cyan #00a4e4 for completed/current steps -> Primary Green
 * ------------------------------------------------------------------------ */

ul.steps li.completed .circle::before {
  background-color: var(--wwcs-green);
  border-color: var(--wwcs-green);
}

ul.steps li.completed .text {
  color: var(--wwcs-green);
}

ul.steps li.completed .horizontal-line,
ul.steps li.current .horizontal-line {
  background-color: var(--wwcs-green);
}

ul.steps li.current .circle::before {
  border-color: var(--wwcs-green);
}

/* ---------------------------------------------------------------------------
 * 7c. Dialogs (abstract submission popup)
 * ------------------------------------------------------------------------ */

/* jQuery UI widgets default to "Liberation Sans" (_papers.scss/.ui-widget) */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: var(--wwcs-font);
}

/* Dialog title: prominent, brand blue, on a light tinted bar
   (!important needed — Indico's own rules carry it too) */
.ui-dialog .ui-dialog-titlebar {
  background-color: var(--wwcs-blue-05) !important;
  border-bottom: 2px solid var(--wwcs-blue-10) !important;
  padding: 0.8em 1em;
}

.ui-dialog .ui-dialog-title {
  font-family: var(--wwcs-font);
  font-size: 20px;
  font-weight: 600;
  color: var(--wwcs-blue);
}

/* "Submission instructions" notice: brand yellow instead of Indico orange,
   consistent with the announcement bar */
.warning-message-box {
  background-color: #fef2d9;
  border: 1px solid var(--wwcs-yellow);
  border-radius: 8px;
  color: var(--wwcs-blue);
}

.warning-message-box .message-text {
  font-size: 0.9em;
}

/* Links inside dialogs — underlined; several (like "submission
   instructions") have no href and were unrecognizable as links.
   The :link/:visited variants are needed because Indico's global
   "a:link { text-decoration: none }" outranks a plain descendant selector. */
.ui-dialog-content a,
.ui-dialog-content a:link,
.ui-dialog-content a:visited {
  color: var(--wwcs-blue);
  text-decoration: underline;
  cursor: pointer;
}

.ui-dialog-content a:hover {
  color: var(--wwcs-green);
  text-decoration: none;
}

/* Auto-width ajax dialogs (e.g. "Submission instructions") must not
   stretch across the whole screen */
.ui-dialog {
  max-width: min(900px, 92vw);
}

/* Markdown editor: empty-preview placeholder ("You can use Markdown and
   LaTeX...") — Work Sans instead of Roboto, muted brand tone */
.md-preview-wrapper.edit.empty {
  font-family: var(--wwcs-font);
  color: var(--wwcs-blue-60);
}

/* Hide the built-in "Comments" field of the abstract form — not wanted for
   this CFA and Indico has no setting to switch it off.
   The field is optional, so it simply submits empty; nothing breaks. Note it
   still exists in the DOM (a determined user could unhide it via devtools),
   and it stays hidden in the abstract EDIT dialog too, which is intended. */
#form-group-submission_comment {
  display: none;
}

/* Guidance note under the Authors field: submitters repeatedly missed that at
   least one person has to be marked as speaker (microphone icon), and only
   found out from an error message far from the button when submitting.
   Placed below the field to match Indico's own .form-field-description
   convention, and styled to match it. ASCII only (see note above). */
#form-group-person_links .form-field::after {
  content: 'Please ensure at least one author or co-author is selected as a speaker by clicking on the microphone icon on the right-hand side.';
  display: block;
  margin-top: 0.6em;
  font-size: 0.92em;
  font-style: italic;
  line-height: 1.5;
  color: #63637a;
}

/* Section heading above the personal questions of the abstract form.
   Indico has no concept of field groups, so the heading is attached to the
   first field of the block (custom_11, the "describe(s) you" question).

   >>> If the personal questions are reordered in the CFA settings, move this
   rule to whichever custom_N is then first in that block. <<<

   ASCII only in `content:` on purpose - the stylesheet carries no @charset
   declaration, so non-ASCII characters here risk rendering as mojibake. */
#form-group-custom_11::before {
  content: 'About you';
  display: block;
  margin-top: 1.6em;
  padding-top: 1.2em;
  padding-bottom: 0.7em;
  border-top: 1px solid var(--wwcs-blue-10);
  font-size: 1.25em;
  font-weight: 600;
  color: var(--wwcs-blue);
}

/* Same separator line above the data privacy agreement, closing off the
   personal block. No heading text here - the field's own label serves as one,
   so the rule sits on the form-group itself rather than on a ::before.
   Spacing matches the "About you" heading above. */
#form-group-custom_4 {
  margin-top: 1.6em;
  padding-top: 1.2em;
  border-top: 1px solid var(--wwcs-blue-10);
}

/* Rename the core "Tracks" label to "Themes" on the abstract form. Indico has
   no setting for this and the string comes from Python (gettext); patching the
   translation files inside the image would not survive an update.

   The label element is hidden and the replacement is put on the surrounding
   .form-label, so it inherits the exact typography and the required-asterisk
   still follows it inline - no positioning or magic widths needed.

   Accessibility: hiding the label also removes it from the accessibility tree.
   Acceptable here because its `for` attribute points at no existing element
   (the checkboxes carry their own labels) - it is a visual group heading, not a
   functional field label. */
#form-group-submitted_for_tracks .form-label > label {
  display: none;
}

#form-group-submitted_for_tracks .form-label::before {
  content: 'Themes';
}

/* Field order in the abstract form: move "Contribution type" down so it sits
   directly above the custom questions, i.e. after "Tracks". Indico renders all
   core fields before all custom ones and that order is fixed in Python, so
   flexbox `order` is the only lever.

   Scoped to the abstract form (submit + edit) so all other .i-form forms keep
   normal block layout.

   The attribute selector catches every custom field, so custom questions added
   later automatically land in the right block instead of jumping to the top.

   NOTE: this changes the VISUAL order only. Keyboard and screen-reader users
   still follow the DOM, i.e. they reach Contribution type before Tracks. One
   field out of sequence is an acceptable trade-off here - do not grow this into
   a wholesale reshuffle. */
form.i-form[action*='abstract'] {
  display: flex;
  flex-direction: column;
}

form.i-form[action*='abstract'] > #form-group-submitted_contrib_type {
  order: 1;
}

form.i-form[action*='abstract'] > [id^='form-group-custom_'] {
  order: 2;
}

form.i-form[action*='abstract'] > .form-group-footer {
  order: 3;
}

/* Advisory word-limit note under the "Content" label of the abstract form.
   The built-in content field has no help-text setting in the CFA settings
   (unlike custom fields), so the hint is injected here.
   >>> To change the limit, edit the number in the `content:` line below. <<< */
#form-group-wmd-input-f_description .form-label::after {
  content: 'Please limit your abstract to 300 words.';
  display: block;
  margin-top: 0.25em;
  font-size: 0.9em;
  font-weight: 400;
  font-style: italic;
  color: #63637a;
}

/* ---------------------------------------------------------------------------
 * 7d. Authors field (PersonLinkField widget in the abstract dialog)
 * ------------------------------------------------------------------------ */

/* Detach the four action buttons from the list card: air above and between.
   (Semantic UI "attached buttons" are designed to sit glued to the card,
   which fights the pill shape.) */
div[id^='person-link-field'] .ui.bottom.attached.buttons {
  display: flex !important;
  border: none;
}

/* Spacing is set on the buttons themselves (container-level gap/margin was
   overridden by Semantic UI's attached-buttons layout) */
div[id^='person-link-field'] .ui.bottom.attached.buttons .ui.button {
  flex: 1 1 auto;
  margin-top: 0.8em !important;
  margin-right: 0.6em !important;
  background: var(--wwcs-blue-10);
  color: var(--wwcs-blue);
}

div[id^='person-link-field'] .ui.bottom.attached.buttons .ui.button:last-child {
  margin-right: 0 !important;
}

div[id^='person-link-field'] .ui.bottom.attached.buttons .ui.button:hover {
  background: var(--wwcs-blue-40);
  color: var(--wwcs-blue);
}

/* Active sort-toggle button: brand green instead of Semantic UI's green
   (SUI uses !important here, so ours must too) */
.ui.button.toggle.active,
.ui.buttons .button.toggle.active {
  background-color: var(--wwcs-green) !important;
}

/* Role chip "Author": Primary Blue instead of Semantic UI blue */
div[id^='person-link-field'] .ui.blue.label {
  background-color: var(--wwcs-blue) !important;
  border-color: var(--wwcs-blue) !important;
}

/* ---------------------------------------------------------------------------
 * 7e. Abstract display page (Call for Abstracts)
 * ------------------------------------------------------------------------ */

/* The reviewing page (badge line, timeline, etc.) defaults to Liberation
   Sans — bring it in line. The abstract body itself keeps its serif "paper
   look": that comes from a more specific rule on .abstract-content, which
   this override doesn't touch. */
.reviewing-page {
  font-family: var(--wwcs-font);
}

/* Abstract title: brand blue (Indico uses #09c with !important) */
.submission-title h3 {
  color: var(--wwcs-blue) !important;
}

/* Status badge ("Submitted"): brand blue pill instead of gray */
.i-tag {
  background: var(--wwcs-blue);
  border-color: var(--wwcs-blue);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
}

/* Plain buttons inside dialogs ("Close", "Cancel"): tinted blue for
   consistency with the other in-dialog controls */
.ui-dialog .i-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.danger) {
  background: var(--wwcs-blue-10);
  background-image: none;
  border-color: var(--wwcs-blue-10);
  color: var(--wwcs-blue);
}

.ui-dialog .i-button:not(.label):not(.borderless):not(.text-color):not(.highlight):not(.danger):hover {
  background: var(--wwcs-blue-40);
  background-image: none;
  border-color: var(--wwcs-blue-40);
  color: var(--wwcs-blue);
}

/* ---------------------------------------------------------------------------
 * 7g. Overview page
 * ------------------------------------------------------------------------ */

/* Hide the Date/Time block in "Conference information" (the dates are
   already communicated in the header and the description text) */
.infogrid .infoline.date {
  display: none;
}

/* ---------------------------------------------------------------------------
 * 7f. Scientific Program page
 * ------------------------------------------------------------------------ */

/* Hide the PDF download button next to the page title */
.conference-page header .toolbar a[href$='program.pdf'] {
  display: none;
}

/* Track headings ("Core Focus Areas", "Methods"): brand blue, semibold */
ul.tracks > li .track-title h3 {
  color: var(--wwcs-blue);
  font-weight: 600;
  font-size: 1.25em;
}

/* Sub-track headings: smaller step in the hierarchy
   (Indico forces 14px with !important, hence ours) */
ul.sub-tracks > li .track-title > h3 {
  color: var(--wwcs-blue);
  font-size: 15px !important;
}

/* Divider under each track title: blue tint instead of gray */
ul.tracks > li .track-title {
  border-bottom-color: var(--wwcs-blue-10);
}

/* ---------------------------------------------------------------------------
 * 8. Support box
 * ------------------------------------------------------------------------ */

.support_box > h3 {
  font-weight: 600;
}

/* No envelope icon, smaller link text so the address fits untruncated */
.support_box > ul > li .icon {
  display: none;
}

.support_box > ul > li > a {
  margin-left: 0;
  font-size: 0.85em;
}

/* ---------------------------------------------------------------------------
 * 9. Buttons — pill shape everywhere
 * (!important so variant-specific radius rules, e.g. in button groups,
 *  don't produce mixed corner styles)
 * ------------------------------------------------------------------------ */

.i-button,
.action-button,
.ui.button {
  border-radius: 999px !important;
}

/* ---------------------------------------------------------------------------
 * 10. Main action bar (top bar above the gradient header)
 * Solid Primary Blue — deliberately flat to set it apart from the gradient
 * below — finished with a thin Primary Green line.
 * ------------------------------------------------------------------------ */

.main-action-bar {
  background: var(--wwcs-blue) !important;
  border-bottom: 3px solid var(--wwcs-green) !important;
}

/* All buttons in the bar: flat/transparent on blue, light text and icons */
.main-action-bar .i-button {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

.main-action-bar .i-button:hover,
.main-action-bar .i-button:active,
.main-action-bar .i-button.open {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

/* Separators between the icon buttons */
.main-action-bar .separator {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Right side ("Public" / timezone / user): back to the compact text size
   (13px) after the global body bump to 15px */
.session-bar .i-button {
  font-size: 13px;
}

/* Protection status stays a colored chip so the state is recognizable:
   green chip = public, coral chip = restricted */
.session-bar .i-button.protection-public {
  background: var(--wwcs-green) !important;
  color: #fff !important;
}

.session-bar .i-button.protection-restricted {
  background: var(--wwcs-coral) !important;
  color: #fff !important;
}

/* Hide the theme switcher and the "switch to management" link.
   Indico shows both even to plain users (e.g. abstract submitters), and CSS
   cannot query permissions — so both are hidden for EVERYONE by default and
   restored only when the page carries an admin marker: the event search box
   renders data-is-admin (empty for regular users) in its root element.
   Fallback for managers if the marker ever fails: the management area
   remains reachable directly via /event/<id>/manage/ */
.main-action-bar button.i-button.icon-layout.js-dropdown,
.main-action-bar .button-bar a[href$='/manage/'] {
  display: none;
}

body:has(#event-search-box[data-is-admin]) .main-action-bar button.i-button.icon-layout.js-dropdown,
body:has(#event-search-box[data-is-admin]) .main-action-bar .button-bar a[href$='/manage/'] {
  display: inline-block;
}

/* ---------------------------------------------------------------------------
 * 11. Footer
 * Hide the Indico logo, keep the "Powered by Indico" text line.
 * ------------------------------------------------------------------------ */

footer .footer-logo {
  display: none;
}