/* Hub public item page - /item/<type>/<armoredID>/<slug>
 *
 * The whole stylesheet for hub/public/precedentExample.tt2.  It replaces
 * css/erot/fuzzer.css on this page; that file is left alone because nine other
 * templates still load it, and most of what it carries - a full-page
 * background photograph, an erot banner, a landing-page grid - was never used
 * here.
 *
 * Hand-written, not compiled from sass-hub: that directory compiles to
 * css/hub/hub.css, which every hub page loads, and this belongs to one page.
 *
 * Everything is scoped under body.hubItemPage, set by the template.  Three
 * stylesheets still arrive ahead of this one from the wrapper - Bootstrap 3,
 * hub.css and www.lexsure.com/lexsure.css - so the scope is there to win
 * against them by specificity rather than by !important.  Own components are
 * prefixed hi- so they cannot collide with Bootstrap's vocabulary.
 *
 * TYPE AND COLOUR ARE PRODUCTION'S, resolved from the cascade hub.lexsure.com
 * actually serves rather than read off the top of fuzzer.css - that file
 * declares several of these twice and the later block wins.  Where the two
 * disagree, the live value is the one used here:
 *
 *     .htitle       42px uppercase from line 349, colour #1aade9 from line 149
 *                   (the later rule sets no colour, so the earlier one stands)
 *     .signinbtn    #337ab7 from line 238, not #336CAF from line 36
 *     .actionbutton #336CAF, hover #efefef, from lines 375-381
 *
 * Two deliberate departures, both explained where they apply: the body font,
 * and the intro band.
 */

body.hubItemPage {
    /* Two blues are genuinely in use on production and neither is a mistake to
       normalise away: fuzzer.css gives #336CAF to the buttons and #337ab7 to
       the related-text links and the numbered badge.  Neither is the link
       colour of the Bootstrap build the hub serves, which is #428bca. */
    --hi-accent:      #336caf;  /* .actionbutton, .subscribe */
    --hi-accent-dark: #245680;  /* .subscribe:hover */
    --hi-link:        #337ab7;  /* .ftrbox, .point, .signinbtn */
    --hi-title:       #1aade9;  /* .htitle */
    --hi-band:        #034e87;  /* sampled from fuzz/bg.png - see .hi-intro */

    --hi-ink:         #333333;  /* Bootstrap 3 body colour, which prod inherits */
    --hi-link-ink:    #3d3f40;  /* .ftrbox a */
    --hi-muted:       #595968;  /* .description */
    --hi-footnote:    #908d8d;  /* footer p */

    --hi-surface:     #ffffff;
    --hi-page:        #f8f8f8;  /* what prod's body rule asks for - see below */
    --hi-rule:        #cccccc;  /* .line */
    --hi-rule-soft:   #e3e3e4;  /* footer p border-top */
    --hi-hover:       #efefef;  /* .actionbutton a:hover */

    --hi-card-shadow: 10px 10px 16px -8px rgba(0, 0, 0, 0.2);   /* .datacontainer */
    --hi-link-shadow: 5px 6px 25px 0 rgba(51, 108, 175, 0.3);   /* .ftrbox a */

    /* Montserrat carries every heading, button and label on production.  The
       template loads it at the 400/600/700 prod asks Google for. */
    --hi-font-ui:   'Montserrat', sans-serif;
    /* Prod's body rule asks for 'Conv_lato_regular', which no @font-face in the
       CSS tree defines, so production falls through to generic sans-serif.  The
       wrapper loads Google Lato and that is plainly what was meant, so Lato is
       named here with the same generic fallback behind it.  This is the one
       place the page is deliberately not bug-compatible with production. */
    --hi-font-body: 'Lato', sans-serif;
    --hi-font-note: 'Roboto', sans-serif;  /* .description */

    background: var(--hi-page);
    color: var(--hi-ink);
    font-family: var(--hi-font-body);
    line-height: 1.55;
}

/* hub.css pins #content to 970px and #pageWrapper to 970px unless bootFriendly
   is set.  The padding-top clears the wrapper's navbar-fixed-top, which is the
   job fuzzer.css's .mtop200 was doing.  900px is .datacontainer's max-width. */
body.hubItemPage #pageWrapper {
    background: transparent;
    padding-top: 70px;
}

body.hubItemPage #content {
    width: auto;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}


/* ---- the banner ------------------------------------------------------- */

/* Production sets .top-about white and lays it over fuzz/bg.png, a 1900x717
   photograph whose top third - the part behind this text - averages #034e87.
   A solid fill of that colour reads the same way and saves an 836 KB image the
   page is not otherwise using. */
.hi-intro {
    margin: 0 0 1.5rem;
    padding: 3rem 1.5rem;
    background: var(--hi-band);
    border-radius: 10px;
    color: #fff;
    text-align: center;
}

.hi-intro h2 {
    margin: 0;
    font-family: var(--hi-font-ui);
    font-weight: 700;
    font-size: 32px;
    color: #fff;
}

.hi-intro p {
    margin: .75rem auto 0;
    max-width: 40rem;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
}


/* ---- the card -------------------------------------------------------- */

/* .datacontainer: white, 10px radius, that offset drop shadow, no border. */
.hi-card {
    background: var(--hi-surface);
    border-radius: 10px;
    box-shadow: var(--hi-card-shadow);
    padding: 2.5rem;
    margin: 1.5rem 0;
}

/* .sbtitle */
.hi-eyebrow {
    margin: 0 0 .35rem;
    font-family: var(--hi-font-ui);
    font-weight: 700;
    font-size: 16px;
    color: var(--hi-ink);
}

/* .htitle.  Uppercase at 42px is the loudest thing about the production page
   and is kept; it steps down on a narrow screen, which prod does not do. */
.hi-title {
    margin: 0;
    font-family: var(--hi-font-ui);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--hi-title);
}

.hi-policy {
    margin: .75rem 0 0;
    font-family: var(--hi-font-ui);
    font-size: 16px;
}

.hi-policy a {
    color: var(--hi-link);
}


/* ---- the facts strip -------------------------------------------------- */

/* A dl rather than three columns of a Bootstrap grid: it is a list of
   name/value pairs, and it wraps on a narrow screen without a media query.
   fuzzer.css hid this strip entirely below 992px; there is no need.
   .subtxt is Montserrat 14px. */
.hi-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2.5rem;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--hi-rule);
    font-family: var(--hi-font-ui);
    font-size: 14px;
}

.hi-facts > div {
    margin: 0;
}

.hi-facts dt {
    margin: 0;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--hi-muted);
}

.hi-facts dd {
    margin: .15rem 0 0;
    font-size: 16px;
    font-weight: 700;
}

/* The deployment measure, 0-10.  A meter, so the number stays readable to a
   screen reader and to anyone who cannot see the bar; the bar is decoration
   over the top of it. */
.hi-meter {
    display: block;
    width: 8rem;
    height: .375rem;
    margin-top: .5rem;
    border-radius: 999px;
    background: var(--hi-rule);
    overflow: hidden;
}

.hi-meter > span {
    display: block;
    height: 100%;
    background: var(--hi-accent);
}


/* ---- rationale and body ---------------------------------------------- */

/* .description: Roboto 15px #595968.  Production also centres it inside a
   360px column; left-aligned full width reads better here and the accent rule
   does the work the centring was doing. */
.hi-rationale {
    margin: 1.75rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--hi-accent);
    background: #f7f9fb;
    font-family: var(--hi-font-note);
    font-size: 15px;
    color: var(--hi-muted);
}

.hi-rationale p {
    margin: 0;
}

.hi-rationale-label {
    display: block;
    font-family: var(--hi-font-ui);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hi-muted);
    margin-bottom: .25rem;
}

/* The public page shows only the first few dozen words of a text, cut by
   _getPartial().  The fade says "this stops mid-sentence on purpose" - it is
   what fuzzer.css's .whitefuzz did, as an ::after on the text rather than an
   empty div with a negative margin.  It is only ever a hint: the words that
   are not shown are not in the HTML at all.
   .fuzz-pt .pt-content is Montserrat 14px. */
.hi-body {
    position: relative;
    margin: 1.75rem 0 0;
    font-family: var(--hi-font-ui);
    font-size: 14px;
}

.hi-body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--hi-surface));
    pointer-events: none;
}

.hi-body p:last-child {
    margin-bottom: 0;
}


/* ---- call to action --------------------------------------------------- */

.hi-cta {
    margin: 2rem 0 0;
    padding: 1.75rem 0 0;
    border-top: 1px solid var(--hi-rule);
    text-align: center;
}

.hi-cta-lead {
    margin: 0 0 1rem;
    font-family: var(--hi-font-ui);
    font-weight: 700;
    text-transform: uppercase;
}

/* .actionbutton is capped at 600px on production. */
.hi-actions {
    list-style: none;

    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.hi-btn {
    flex: 1 1 14rem;
    display: block;
    padding: 10px 40px;
    border: 2px solid var(--hi-rule);
    border-radius: 10px;
    font-family: var(--hi-font-ui);
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    text-decoration: none;
}

/* .subscribe */
.hi-btn--primary {
    background: var(--hi-accent);
    border-color: var(--hi-accent);
    color: #fff;
}

.hi-btn--primary:hover,
.hi-btn--primary:focus {
    background: var(--hi-accent-dark);
    border-color: var(--hi-accent-dark);
    color: #fff;
    text-decoration: none;
}

/* .actionbutton a */
.hi-btn--secondary {
    background: #fff;
    color: var(--hi-accent);
}

.hi-btn--secondary:hover,
.hi-btn--secondary:focus {
    background: var(--hi-hover);
    color: var(--hi-accent);
    text-decoration: none;
}


/* ---- the two trailing blocks ------------------------------------------ */

.hi-section {
    margin: 2.5rem 0 0;
}

/* .bottomdatabox h3 */
.hi-section > h2 {
    margin: 0 0 1rem;
    font-family: var(--hi-font-ui);
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    color: var(--hi-ink);
}

.hi-section > p {
    margin: 0 auto 1.25rem;
    max-width: 44rem;
    /* text-align: center; */
    color: var(--hi-muted);
}

/* Related texts, and the outbound topic links.  Was a three-column Bootstrap
   row of one-row tables; auto-fit does the same thing and collapses to one
   column on a phone by itself.  .ftrbox a is the white panel with the blue
   halo shadow. */
.hi-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.hi-links a {
    display: block;
    height: 100%;
    padding: 15px;
    background: var(--hi-surface);
    border: 1px solid #fff;
    box-shadow: var(--hi-link-shadow);
    font-family: var(--hi-font-ui);
    font-weight: 600;
    font-size: 16px;
    color: var(--hi-link-ink);
    text-decoration: none;
    /* width: 30rem; */
    /* text-align:center; */
}

.hi-links a:hover,
.hi-links a:focus {
    color: var(--hi-link);
    text-decoration: none;
}

/* The outbound block is tinted so it reads as somewhere else, not as more of
   the hub. */
.hi-offsite {
    background: #eef3f9;
    border-radius: 10px;
    padding: 1.75rem 2rem;
}

.hi-offsite > h2 {
    margin-bottom: .5rem;
}


/* ---- the wrapper's footer --------------------------------------------- */

/* Given production's `footer p` treatment, which fuzzer.css applied to the
   second footer this template used to emit. */
body.hubItemPage footer {
    font-family: var(--hi-font-ui);
    font-size: 14px;
    color: var(--hi-footnote);
}


@media (max-width: 40rem) {
    .hi-card {
        padding: 1.5rem;
    }

    .hi-title {
        font-size: 26px;
    }

    .hi-intro {
        padding: 2rem 1rem;
    }

    .hi-intro h2 {
        font-size: 24px;
    }

    .hi-intro p {
        font-size: 17px;
    }

    .hi-offsite {
        padding: 1.25rem;
    }
}