@charset "UTF-8";

/* ==========================================================================
   IntCha27 — Indico conference stylesheet
   Layout > Theme > upload, then select "Custom CSS file". Indico 3.3+.

   One knob: --page (content column width). Typography is left to Indico.

   BEFORE UPLOADING: clear the colour pickers in Layout > Header style. Indico
   writes them as inline styles, which beat any stylesheet. The !important
   flags below force the header regardless, but clearing them is cleaner.
   ========================================================================== */

:root {
    /* Palette taken from the banner artwork */
    --purple:  #5500A0;   /* the wordmark — structural colour */
    --violet:  #941CFA;
    --blue:    #5EA6FC;
    --green:   #77D231;
    --magenta: #DC26AE;
    --red:     #DB0200;
    --cream:   #F7F6E8;   /* the artwork's ground — the header zone */

    --paper:  #ffffff;
    --ink:    #1A1A1C;
    --muted:  #6B6B72;
    --rule:   #E4E4E7;

    --page: 1080px;

    /* --- Indico's theme variables ------------------------------------
       The header zone is cream, continuous with the banner's own ground;
       the content below is white. That colour change IS the boundary, so
       the borders here are transparent — otherwise four horizontal lines
       stack up in two centimetres. */

    --conf-theme-header-bg:            var(--cream);
    --conf-theme-header-border-bottom: transparent;
    --conf-theme-header-text:          var(--ink);
    --conf-theme-subtitle-bg:          var(--cream);
    --conf-theme-subtitle-border: transparent;
    --conf-theme-subtitle-text:        var(--muted);

    /* menu: no box, no fill — see .conf_leftMenu below */
    --conf-theme-menu-bg:              transparent;
    --conf-theme-menu-border:          transparent;
    --conf-theme-menu-link:            var(--ink);
    --conf-theme-menu-selected:        var(--purple);
    --conf-theme-menu-selected-bg:     transparent;
    --conf-theme-menu-selected-border: transparent;
    --conf-theme-hover-bg:             transparent;
    --conf-theme-hover-color:          var(--violet);

    --conf-theme-support-bg:          var(--cream);
    --conf-theme-support-border:      var(--rule);
    --conf-theme-support-header-bg:   transparent;
    --conf-theme-support-header-text: var(--muted);
    --conf-theme-support-text:        var(--ink);

    --conf-theme-announcement-bg:            var(--cream);
    --conf-theme-announcement-border:        var(--rule);
    --conf-theme-announcement-text:          var(--ink);
    --conf-theme-announcement-border-top:    none;
    --conf-theme-announcement-border-bottom: 1px solid var(--rule);
    --conf-theme-announcement-shadow:        none;
}

body { background: var(--paper); }

/* --- header ------------------------------------------------------------
   Indico nests the logo deep inside the title link:
     .conf > .confheader > .confTitleBox > .confTitle > h1 > a
           > span.conference-title-link > div.confLogoBannerBox > img
   All of them must be released for the banner to span the window. */

.conf,
.confheader,
.confTitleBox,
.confTitle,
.confTitle h1,
.confTitle h1 > a,
.conference-title-link,
.confLogoBannerBox {
    display: block;
    width: auto;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
    padding-inline: 0;
    float: none;
}

/* !important beats the inline styles written by Layout > Header style.
   Cream, matching --conf-theme-header-bg above — if you change one, change
   the other, or the variable silently does nothing. */

.confheader,
.confTitleBox,
.confSubTitleBox {
    background: var(--cream) !important;
    background-image: none !important;
}

.confSubTitleBox { padding: 0.4em 0 0.9em; }

.confTitleBox { min-height: 0; }
.confTitle h1 { margin: 0; }
.confLogoBannerBox { line-height: 0; }

.confLogoBannerBox img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0;
}

/* Signature: a hairline of the artwork's own colours closing the banner.
   The only rule under the header — delete it and the cream/white change
   carries the boundary on its own. */
/* .confTitleBox::after { */
/*     content: ""; */
/*     display: block; */
/*     height: 3px; */
/*     background: linear-gradient(90deg, */
/*         var(--purple)  0 16.7%, */
/*         var(--violet)  0 33.3%, */
/*         var(--blue)    0 50%, */
/*         var(--green)   0 66.7%, */
/*         var(--magenta) 0 83.3%, */
/*         var(--red)     0 100%); */
/* } */
/**/
/* The title text — the only part still held to the content column */
.conference-title-link > span[itemprop="title"] {
    display: block;
    box-sizing: border-box;
    max-width: var(--page);
    margin-inline: auto;
    padding: 1.1em 1.2em 0.2em;
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -0.015em;
}
.confSubTitleBox { padding: 0.4em 0 0.9em; }
.datePlace { letter-spacing: 0.01em; font-size: 1.5rem; color: var(--purple);}

/* --- left menu ---------------------------------------------------------
   No box, no fill: a typographic column with one hairline where it meets
   the content, and the current page marked by a rule on that same edge.
   The divider is deliberately quiet so the selected item's purple rule is
   the only strong mark in the column. For a stronger divider:
       border-right: 2px solid var(--purple);                            */

/* .conf_leftMenu { border-right: 2px solid var(--rule); } */
.conf_leftMenu { border-right: none; }

#outer li a {
    border-right: none;
    border-left: 2px solid transparent;
    padding-left: 0.7em;
    transition: color .15s, border-color .15s;
}

.menuConfTitle     { color: inherit; }  /* base hard-codes #0200c6 */
.menuConfTitle > a { padding: 0.55em 1.2em 0.55em 0; }

.menuConfSelected,
.menuConfMiddleCellSelected { background: none; border-top: none; border-bottom: none; }

#outer li.menuConfSelected > a,
#outer li.menuConfMiddleCellSelected > a {
    font-weight: 600;
    border-left-color: var(--purple);
}

li ul.inner li a,
li.menuConfMiddleCell a {
    background-image: none;             /* drops the legacy bullet PNG */
    padding: 0.25em 1.2em 0.25em 1.1em;
    color: var(--muted);
}

.conf_leftMenu .spacer { height: 1.4em; }

/* --- content ------------------------------------------------------------ */

.confBodyBox   { border-left: 1px solid var(--rule); padding-left: 2em; }
/* .confBodyBox { */
/*     padding-left: 2em; */
/*     color: var(--ink); */
/* } */

.conferenceDetails .description { margin: 0 0 2em; }

div.event-details .event-details-label {
    width: 8em;
    text-align: left;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
}

.support_box { border-radius: 4px; }
.support_box > h3 {
    margin: 0;
    padding: 0.8em 0.9em 0.2em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.simpleTextAnnouncement { padding: 0.7em 0; }

/* --- page titles --------------------------------------------------------
   Indico renders a custom page's title from its menu entry name, as an <h2>
   in .conference-page > header — OUTSIDE .editor-output, and hard-coded to
   #333 in Indico's own base/_pages.scss. The extra .title in this selector
   outranks that rule without needing !important. */

.conference-page header .title h2 {
    color: var(--purple);
    letter-spacing: -0.015em;
}

/* --- rich text (custom pages and the event description) -----------------
   Headings you write inside a page live here. If one comes out the wrong
   colour, the colour is inline on the element — from TinyMCE's text-colour
   button or pasted HTML. Select it and use Remove formatting, or strip the
   style attribute in the source dialog. */

.editor-output {
    color: var(--ink);
    overflow-wrap: break-word;          /* long URLs don't push the page
                                           sideways */
}

.editor-output img { max-width: 100%; height: auto; }

.editor-output h2,
.editor-output h3 { font-weight: 600; letter-spacing: -0.015em; }

.editor-output h2 {
    margin: 2em 0 0.6em;
    padding-bottom: 0.25em;
    border-bottom: 1px solid var(--rule);
    color: var(--purple);
}
.editor-output h3 { margin: 1.6em 0 0.4em; }
.editor-output :is(h2, h3):first-child { margin-top: 0; }

.editor-output p  { margin: 0 0 1.1em; }
.editor-output ul,
.editor-output ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.editor-output li { margin-bottom: 0.35em; }

.editor-output a {
    color: var(--purple);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}
.editor-output a:hover { color: var(--violet); }

.editor-output table { border-collapse: collapse; margin: 1.5em 0; }
.editor-output th,
.editor-output td {
    padding: 0.55em 1.2em 0.55em 0;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}
.editor-output th {
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom-color: var(--ink);
}

/* --- components ---------------------------------------------------------
   Paste via the editor's source button (<>, last in the toolbar). */

/* <div class="speakers">
     <figure><img src="…" alt=""><figcaption><b>Name</b>Institution</figcaption></figure>
   </div> */
.editor-output .speakers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5em, 1fr));
    gap: 1.6em 1.2em;
    margin: 1.6em 0 2.2em;
}
.editor-output .speakers figure { margin: 0; }
.editor-output .speakers img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;                  /* square crop, any source shape */
    border-radius: 3px;
    filter: grayscale(100%);
    transition: filter .25s;
}
.editor-output .speakers figure:hover img { filter: grayscale(0%); }
.editor-output .speakers figcaption {
    margin-top: 0.55em;
    color: var(--muted);
}
.editor-output .speakers b { display: block; font-weight: 600; color: var(--ink); }

/* <div class="sponsors"><a href="…"><img src="…" alt="…"></a></div> */
.editor-output .sponsors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2em;
    margin: 2.4em 0 1em;
    padding-top: 1.6em;
    border-top: 1px solid var(--rule);
}
.editor-output .sponsors img {
    max-height: 3em;
    width: auto;
    opacity: .75;
    transition: opacity .25s;
}
.editor-output .sponsors a:hover img { opacity: 1; }

/* <ul class="topics"><li>Active matter</li>…</ul>
   Outlines cycle through the banner's colours — the one place the full
   palette appears in the body. */
.editor-output .topics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 1.2em 0 2em;
    padding: 0;
    list-style: none;
}
.editor-output .topics li {
    margin: 0;
    padding: 0.3em 0.85em;
    border: 1px solid var(--rule);
    border-radius: 2em;
}
.editor-output .topics li:nth-child(6n+1) { border-color: var(--purple); }
.editor-output .topics li:nth-child(6n+2) { border-color: var(--violet); }
.editor-output .topics li:nth-child(6n+3) { border-color: var(--blue); }
.editor-output .topics li:nth-child(6n+4) { border-color: var(--green); }
.editor-output .topics li:nth-child(6n+5) { border-color: var(--magenta); }
.editor-output .topics li:nth-child(6n+6) { border-color: var(--red); }

/* --- page width ---------------------------------------------------------
   Indico hard-codes 950px here and 230px on .confBodyBox. Delete this block
   to keep the stock fixed layout. Test the timetable and registration pages
   after enabling, not just the overview. */

.confSubTitleContent,
#confSectionsBox {
    box-sizing: border-box;
    width: auto;
    max-width: var(--page);
    margin-inline: auto;
    padding-inline: 1.2em;
}

#confSectionsBox { margin-top: 2.5em; }

/* --- small screens -------------------------------------------------------
   At 900px the 200px menu plus the content column stops fitting, so the
   menu goes above the content. At 620px the banner is re-cropped and touch
   targets grow. */

html { -webkit-text-size-adjust: 100%; }   /* stop iOS inflating text in
                                              landscape */

@media (max-width: 900px) {
    .conf_leftMenu {
        float: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--rule);
        margin-bottom: 1.5em;
        padding-bottom: 0.4em;
    }
    #outer li a {
        border-right: none;
        border-left: 2px solid transparent;
        padding-left: 0.8em;
    }
    .menuConfSelected > a,
    .menuConfMiddleCellSelected > a {
        border-right-color: transparent;
        border-left-color: var(--purple);
    }
    .confBodyBox { margin-left: 0; padding-left: 0; }

    /* the date / place / timezone strip stacks instead of squeezing */
    .confSubTitleContent.flexrow,
    .datePlace { flex-wrap: wrap; }
}

@media (max-width: 620px) {
    /* Crop the banner rather than shrinking it. width stays 100%, but a
       fixed aspect ratio plus object-fit: cover trims the sides, which
       enlarges the wordmark instead of reducing it to a smear.
       object-position holds "INTCHA 2027" in frame — raise the second
       number to reveal more of the artwork's lower half. */
    .confLogoBannerBox img {
        aspect-ratio: 2 / 1;
        height: auto;
        object-fit: cover;
        object-position: 53% 30%;
    }

    .conference-title-link > span[itemprop="title"] {
        padding: 0.9em 1em 0.2em;
    }

    .confSubTitleContent,
    #confSectionsBox { padding-inline: 1em; }

    /* comfortable touch targets — roughly 44px tall */
    .menuConfTitle > a { padding: 0.85em 1em 0.85em 0.8em; }
    li ul.inner li a,
    li.menuConfMiddleCell a { padding: 0.6em 1em 0.6em 1.4em; }

    /* wide tables scroll instead of forcing the whole page to */
    .editor-output table { display: block; overflow-x: auto; }

    /* Functional, not stylistic: below 16px iOS zooms the viewport when a
       registration field is tapped. Delete if you want zero size rules. */
    input, select, textarea { font-size: 16px; }

    .editor-output .speakers { gap: 1.2em 0.9em; }
    .editor-output .sponsors { gap: 1.4em; }
}

/* --- keyboard focus ----------------------------------------------------- */

a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }