/*! banner.css v1.2 - Boilerplate page header (GoJes.us / DivineRevelations)
    The SHELL page's top banner (index.htm / index2.htm): a text-free topic picture (banner.jpg, 4:1) with the page title drawn as LIVE TEXT on top
    (Gabriela, gold, dark shadow) and a smaller Lato tagline underneath. The menu button (three bars + a down-arrow) is NOT here any more: it sits in the card
    page's toolbar next to the search button (cards.js, docs/13) so every button is on one line; a click anywhere on the banner still toggles the Global Side Menu.
    The content iframe fills the rest of the screen.
    Replaces the legacy /ssi/top_bar_style.htm + baked top_bar.jpg (which stays for Worship and the older pages).
    Docs: Boilerplate_Template_Design/docs/13_HEADER_BANNER_AND_MENU.md

    Per-page tweaks, in the page's own <style> AFTER the link to this file (never edit this file per page):
        :root { --banner-title-color: #fff; --banner-h: clamp(110px, 18vh, 200px); }
        .banner { --banner-img: url('banner.jpg?2'); }                    (or put it in the header's style="" attribute, as the template does)  */

:root {
  --banner-h: clamp(92px, 15vh, 170px);               /* height of the header; the iframe starts right under it */
  --banner-title-color: #ffe08a;                      /* warm gold: reads on dark art and on the dark scrim */
  --banner-sub-color: #fff;
  --banner-scrim-edge: .66;                           /* 0..1 darkness at the left/right ends */
  --banner-scrim-mid: .40;                            /* darkness behind the title; raise it for bright pictures */
  --title-font: Gabriela, Georgia, "Times New Roman", "Noto Serif", serif;
  --ui-font: Lato, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (orientation: portrait) { :root { --banner-h: clamp(88px, max(11vh, 23vw), 120px); } }   /* tall phones: room for a two-line title + tagline */
@media (max-height: 480px) { :root { --banner-h: 72px; } }                            /* phone held sideways: keep the cards visible */

html, body { margin: 0; padding: 0; height: 100%; background: #000; }

.banner {
  position: fixed; z-index: 2; top: 0; left: 0; right: 0; height: var(--banner-h); box-sizing: border-box; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding-inline: clamp(10px, 3vw, 40px); cursor: pointer; color: var(--banner-title-color);
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 62%, #000 100%),                       /* melts into the black page */
    linear-gradient(90deg, rgba(0,0,0,var(--banner-scrim-edge)) 0%, rgba(0,0,0,var(--banner-scrim-mid)) 34%, rgba(0,0,0,var(--banner-scrim-mid)) 66%, rgba(0,0,0,var(--banner-scrim-edge)) 100%),
    var(--banner-img, none) center 42% / cover no-repeat,
    #000;
  -webkit-tap-highlight-color: transparent;
}

/* ---- the title (Gabriela) + tagline (Lato) ------------------------------------------------------------------------------- */
.banner-text { min-width: 0; max-width: 100%; }
.banner-title {
  margin: 0; font: 400 clamp(1.55rem, .9rem + 3.6vw, 4.2rem)/1.06 var(--title-font); letter-spacing: .02em; color: var(--banner-title-color);
  text-wrap: balance; overflow-wrap: anywhere;
  text-shadow: 0 2px 3px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.85), 0 0 2px #000;   /* the dark shadow that keeps the gold readable on any picture */
}
.banner-sub {
  margin: .3em 0 0; font: 400 clamp(.78rem, .55rem + .9vw, 1.3rem)/1.25 var(--ui-font); letter-spacing: .16em; text-transform: uppercase; color: var(--banner-sub-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.85);
}
.banner-sub:empty { display: none; }
@media (max-height: 480px), (max-width: 340px) { .banner-sub { display: none; } }

/* ---- the content iframe fills everything below the banner ----------------------------------------------------------------- */
.content-frame { position: fixed; left: 0; top: var(--banner-h); width: 100%; height: calc(100% - var(--banner-h)); height: calc(100dvh - var(--banner-h)); border: 0; background: #000; }

@media (forced-colors: active) {
  .banner { background: Canvas; border-bottom: 1px solid CanvasText; }
  .banner-title, .banner-sub { color: CanvasText; text-shadow: none; }
}