/* ---------------------------------------------------------------------------
   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.95em 0 1.05em;
    max-width: 48em;          /* long themes stay a readable measure */
    line-height: 1.42;

    /* The block must occupy its own space, never share it.

       On researchleagues-com the hero heading above carries a negative
       bottom margin, and the label was drawn straight across the conference
       name. position:relative with a z-index keeps this block painted above
       whatever the hero does, and the top margin keeps it clear in the first
       place. clear:both stops a floated hero element pulling it up. */
    position: relative;
    z-index: 2;
    clear: both;

    /* 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. */
/* Sizes are clamped, not plain em.

   em alone means the block inherits whatever the hero sets, and these heroes
   differ enormously: iirdglobal-com styles its hero at roughly 40px, so a
   0.74em label came out around 30px - as large as the conference name, which
   the theme is meant to sit beneath, not rival. The em keeps the block in
   proportion with its surroundings; the clamp stops it running away at either
   end. */
.conf-theme__label {
    display: block;
    color: inherit;
    font-size: clamp(11px, 0.74em, 15px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.35em;
}

/* These two properties are declared !important, which nothing else here is.

   The module drops into 32 codebases it does not control, several of which
   style bare elements inside their hero with !important of their own.
   tsrdthailand-com does exactly that to spans inside its hero card: the theme
   came out forced to uppercase with roughly triple line spacing, so a
   two-line theme sprawled down the card with large gaps between every line.

   Only the two properties that were actually being hijacked are defended.
   Colour, size and weight stay overridable, so a site can still tune the
   block to its own type scale. */
.conf-theme__label,
.conf-theme__text {
    text-transform: none !important;
    line-height: 1.5 !important;
}

.conf-theme__label {
    text-transform: uppercase !important;
}

/* Decorative pseudo-elements from the host are cancelled.

   Several of these heroes draw a short dash before every span they contain -
   sciencenet-co does, as its own flourish before "HYBRID EVENT" and the date.
   The theme's label and text are spans too, so they each picked up a stray
   dash floating to their left, unrelated to anything.

   ::after is left alone: the centred variant uses it for the rule under the
   label, and that one is ours. */
.conf-theme__label::before,
.conf-theme__text::before {
    content: none !important;
    display: none !important;
}

/* Size is defended too, for the same reason and with the same reluctance.

   iirdglobal-com styles its hero at about 40px and the block was inheriting
   that wholesale: "CONFERENCE THEME" came out the same size as the conference
   name it is supposed to sit beneath. The clamp keeps the block in proportion
   with its hero while capping both ends, and !important is what makes the cap
   actually hold on the sites that need it. */
.conf-theme__label {
    font-size: clamp(11px, 0.74em, 15px) !important;
}

.conf-theme__text {
    font-size: clamp(15px, 1.12em, 21px) !important;
}

.conf-theme__text {
    display: block;
    color: inherit;
    font-size: clamp(15px, 1.12em, 21px);
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;

    /* 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.95);
}

/* ---------------------------------------------------------------- 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;
}

/* The label deliberately does NOT take the accent.

   It used to. Each site's accent was picked to match that site's own
   highlights - a CTA, a "Hybrid Event" line - but the label is painted on the
   hero, which is often a different colour entirely. Measured across the group
   that put six sites below the readable threshold, four of them at or under
   2:1: nrinetwork 1.2, csgacchina 1.3, ksaakorea 1.9, aspher 2.0.

   So the accent now marks the rule only, where it is decoration and low
   contrast costs nothing, and the label takes the --on-dark / --on-light
   colour, which is legible by construction: it is the same colour the hero
   already uses for text that reads fine on that background. */
.conf-theme--accent .conf-theme__label {
    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: #0a9396; }