/* ---------------------------------------------------------------------------
   Conference Theme in the hero header.   IFERP-AI/Websites-Development#1249

   Sits between the conference name and the date / location / mode line. The
   conference name stays the primary heading; this is deliberately secondary -
   lighter weight, smaller, italic - so it reads as the conference's focus
   rather than competing with its title.

   Requirements this implements, from the ticket:
     - clearly visible and readable, visually distinct from the name
     - no fixed height anywhere, so a long theme grows instead of clipping
     - wraps naturally; never overflows sideways
     - readable down to small phones, where themes of 18 words are common
     - colour inherited, so each site's hero palette carries through

   COLOUR IS SET EXPLICITLY, NOT INHERITED
   ---------------------------------------
   Inheriting looked tidy and was wrong. These hero headers never set a text
   colour on their container - they set it per element:

       .title-text h1    { color: var(--white-color); }
       .title-text .text { color: #fff; }

   so anything dropped in between inherits the page default, which is dark.
   On a deep blue banner the theme came out almost unreadable while every
   line around it was white.

   Pick the variant that matches the banner:

       <div class="conf-theme conf-theme--on-dark">   dark banner, white text
       <div class="conf-theme conf-theme--on-light">  light banner, dark text

   Passing neither leaves the text inheriting, which is right only where the
   hero really does set a colour on its container. Hierarchy comes from size
   and style, never from transparency: dimming white text on a photographic
   banner is what made this illegible the first time.
--------------------------------------------------------------------------- */

.conf-theme {
    /* Space it away from the heading above and the date line below, in ems so
       it tracks the surrounding type scale rather than fighting it.

       Kept deliberately tight. These hero banners are fixed-height boxes, so
       every pixel this block adds pushes the rest of the hero towards
       clipping - a two-line theme under a three-line conference name was
       enough to slide the first line up behind the fixed navigation. */
    margin: 0.55em 0 0.7em;
    max-width: 48em;          /* long themes stay a readable measure */
    line-height: 1.42;

    /* Break a long unhyphenated term rather than push the hero sideways. */
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Base: follow whatever colour the hero established. The variant rules below
   are more specific, so they win wherever one is applied. */
.conf-theme__label {
    display: block;
    color: inherit;
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.2em;
}

.conf-theme__text {
    display: block;
    color: inherit;
    font-size: 1.02em;
    font-style: italic;
    font-weight: 400;

    /* A hairline rule marks the theme as its own element without boxing it
       in. Logical property so right-to-left layouts flip correctly. */
    border-inline-start: 3px solid;
    padding-inline-start: 0.7em;
}

/* ---- on a dark banner: the common case for these conference heroes ---- */
.conf-theme--on-dark .conf-theme__text {
    color: #fff;
    border-inline-start-color: var(--conf-theme-accent, rgba(255, 255, 255, 0.55));
}

/* Bright enough to read as a label, quiet enough not to rival the heading. */
.conf-theme--on-dark .conf-theme__label {
    color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------------- emphasis

   The base styling is deliberately quiet, which on a busy photographic banner
   can read as a caption and be skimmed past. These three modifiers raise it,
   and they combine. Set --conf-theme-accent to the site's own accent colour;
   it defaults to translucent white where none is given.

       <div class="conf-theme conf-theme--on-dark conf-theme--accent">

   --accent  the rule and the label take the site's accent colour, and the
             theme text gains a little weight
   --panel   a translucent panel behind the block, which is what makes it
             readable where the banner photo sits behind the text
   --strong  larger, upright rather than italic - the most assertive option,
             and the one that competes most with the conference name
--------------------------------------------------------------------------- */

.conf-theme--accent .conf-theme__text {
    border-inline-start-color: var(--conf-theme-accent, #fe6b02);
    border-inline-start-width: 4px;
    font-weight: 500;
}

.conf-theme--accent .conf-theme__label {
    color: var(--conf-theme-accent, #fe6b02);
    opacity: 1;
}

.conf-theme--panel {
    /* Sits behind both label and text, so the block reads as one object
       rather than two lines that happen to be adjacent. */
    background: rgba(0, 0, 0, 0.28);
    border-radius: 6px;
    padding: 0.7em 0.9em 0.75em;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    /* Block, with fit-content for the width. inline-block hugged the text
       the same way but left the panel in the inline flow, so the next
       element - on GASR an inline date/location badge - started beside it
       and wrapped around it. Block level keeps whatever follows on its own
       line; fit-content keeps the background from spanning the column. */
    display: block;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 46em;
}

.conf-theme--panel.conf-theme--on-light {
    background: rgba(255, 255, 255, 0.72);
}

.conf-theme--strong .conf-theme__text {
    font-size: 1.16em;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.005em;
}

@media (max-width: 575px) {
    .conf-theme--panel {
        padding: 0.6em 0.7em 0.65em;
        max-width: 100%;
        width: auto;
    }
    .conf-theme--strong .conf-theme__text {
        font-size: 16px;
    }
}

/* ---- on a light banner ---- */
.conf-theme--on-light .conf-theme__text {
    color: #1b2340;
    border-inline-start-color: rgba(27, 35, 64, 0.35);
}

.conf-theme--on-light .conf-theme__label {
    color: rgba(27, 35, 64, 0.7);
}


/* ---------------------------------------------------------------------------
   Centred heroes.

   Some sites centre the whole hero column. A rule down the left of centred
   text reads as a mistake rather than a device, so --center drops it and
   leans on the panel and the label instead.
--------------------------------------------------------------------------- */
.text-center .conf-theme,
.conf-theme--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.conf-theme--center .conf-theme__text {
    border-inline-start: 0;
    padding-inline-start: 0;
}

/* A short centred rule above the text does the separating instead. */
.conf-theme--center .conf-theme__label {
    position: relative;
    padding-bottom: 0.45em;
}

.conf-theme--center .conf-theme__label::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2.4em;
    height: 2px;
    transform: translateX(-50%);
    background: var(--conf-theme-accent, currentColor);
    opacity: 0.85;
}


/* ---------------------------------------------------------------------------
   Right-aligned heroes.

   isrdinstitute-com sets text-align: right on the whole hero column, heading
   and date line alike. Left as it is, the block would sit under the right-hand
   edge of the name with its rule stranded away on the left, reading as a
   stray mark rather than as part of the heading. So the block moves to the
   right edge and the rule moves to the side the text now starts from.

   The colour is taken from the custom property directly rather than from the
   variant rules above, because those all name border-inline-start-color and
   that edge is no longer the one carrying the rule.
--------------------------------------------------------------------------- */
.conf-theme--right {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}

.conf-theme--right .conf-theme__text {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-inline-end: 4px solid var(--conf-theme-accent, currentColor);
    padding-inline-end: 0.7em;
}

/* ------------------------------------------------------------------ tablet */
@media (max-width: 991px) {
    .conf-theme {
        max-width: 100%;
        margin: 0.75em 0 0.95em;
    }
    .conf-theme__text {
        font-size: 1em;
    }
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 575px) {
    .conf-theme {
        margin: 0.7em 0 0.85em;
        line-height: 1.45;
    }
    .conf-theme__label {
        font-size: 0.68em;
        letter-spacing: 0.06em;
    }
    .conf-theme__text {
        /* Held at 15px: below this an 18-word theme becomes a grey block on a
           phone. The ticket asks for readable, not merely fitting. */
        font-size: 15px;
        border-inline-start-width: 2px;
        padding-inline-start: 0.55em;
    }
}

/* Very narrow phones - drop the rule and reclaim its width for the text. */
@media (max-width: 360px) {
    .conf-theme__text {
        border-inline-start: 0;
        padding-inline-start: 0;
        font-size: 14.5px;
    }
}

/* Print: the theme belongs on a printed programme, the label does not. */
@media print {
    .conf-theme__label {
        display: none;
    }
    .conf-theme__text {
        font-size: 11pt;
        opacity: 1;
        border-inline-start-color: #999;
    }
}


/* Site accent, written by bin/install-theme.php. */
.conf-theme { --conf-theme-accent: #fe6b02; }