/* Overrides layered on top of vendor/bootstrap/bootstrap.min.css (4.3.1, same version the legacy
   site pins) - not a replacement for it. */

:root {
    /* navbar blue - GeoDS brand blue, rgb(31,66,143), replaces the legacy CDRC navy */
    --navy: #1f428f;
    /* jumbotron background - rgb(184,188,208), a deliberately different tone from --navy,
       not the legacy .bg-notes pale blue (#c6dbef), which stays available for other note boxes */
    --jumbotron-bg: #b8bcd0;
    --pale-blue: #c6dbef;
    --accent-orange: #fdae6b;
    /* Historic Census vs SmartCensus, reused everywhere the two sources sit side by side (bearers
       chart, place chips, KDE map) so the same colour always means the same source. Green for
       SmartCensus is a clean break from the blue Historic Census years and is picked from the GeoDS
       logo, #27cca4 (colour-picked by the user, 2026-10-06) - not a tone of --navy, so the
       1921/1997 boundary reads clearly rather than blending together. */
    --census-colour: #6baed6;
    --smart-colour: #27cca4;
    /* Default Bootstrap link blue (#007bff) is too light against the jumbotron/card backgrounds -
       darker, still clearly a link against both white and --jumbotron-bg (confirmed with the user). */
    --link-colour: #001f8d;
}

body {
    font-family: "Open Sans", sans-serif;
    overflow-x: hidden;
}

a { color: var(--link-colour); }
a:hover { color: var(--link-colour); filter: brightness(0.8); }

.bg-custom { background-color: var(--navy); }
.bg-jumbotron { background-color: var(--jumbotron-bg); }
.bg-notes { background-color: var(--pale-blue); }
.bg-orange { background-color: var(--accent-orange); }

/* The jumbotron's own Search button - filled from the start rather than Bootstrap's
   btn-outline-primary default (transparent, only filling on hover), which read as "empty" sitting
   on the jumbotron's own grey background. Same navy as the navbar/card headers (--navy), so it
   reads as the site's one standard "primary action" colour rather than Bootstrap's stock blue. */
.btn-navy {
    background-color: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.btn-navy:hover,
.btn-navy:focus {
    background-color: var(--navy);
    border-color: var(--navy);
    color: #fff;
    filter: brightness(0.85);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.navbar-brand-text {
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
}

.navbar-brand-text:hover {
    color: #fff;
    text-decoration: underline;
}

.nav-link.active {
    font-weight: 700;
    border-bottom: 2px solid #fff;
}

.content-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
}

.site-footer {
    margin-top: 2.5rem;
    padding: 1.5rem 0 2rem;
    border-top: 1px solid #e2e2e2;
}

/* padding-top, not margin-top: the element right before this row differs by page state (the
   always-visible map card on first load vs. the bearer-counts card after a search), and a margin
   here would collapse with whichever one of those happens to precede it instead of reliably
   adding a fixed gap on top of it - which is exactly why the two states read as different amounts
   of space. padding never collapses, so the gap above is now the same regardless of what's above
   it. margin-bottom:0 leaves the gap below to collapse cleanly with .site-footer's own
   margin-top, same as before. */
.follow-us {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding-top: 2.5rem;
    font-weight: 600;
}

/* img/geodslogo-icon.svg is a cropped copy of the navbar's logo - that original file is the icon
   plus the full "Geographic Data Service" wordmark with the wordmark filled solid white (meant to
   read against the navy navbar), so reusing it here against a white page made the text invisible
   and, since the wordmark is a thin band within a much taller viewBox, too small to read even once
   recoloured - hence a separate icon-only crop plus this row's own real text instead.
   margin-right pulls the link closer to the divider than the row's own gap (kept full-size for the
   divider-to-LinkedIn side). */
.follow-us-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: -0.4rem;
}

/* Both follow-us links are GeoDS navy (--navy, as the navbar) in every state: no hover colour,
   underline or brightness change, no visited colour - "Follow us" reads as a link on its own
   (user, 2026-10-08). Overrides the generic a/a:hover rules above and Bootstrap's hover underline;
   the keyboard focus outline is left alone. */
.follow-us-logo-link,
.follow-us-logo-link:visited,
.follow-us-logo-link:hover,
.follow-us-logo-link:active,
.footer-social-link,
.footer-social-link:visited,
.footer-social-link:hover,
.footer-social-link:active {
    color: var(--navy);
    text-decoration: none;
    filter: none;
}

.follow-us-divider {
    color: #c0c0c0;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.footer-social-icon {
    width: 1rem;
    height: 1rem;
}

/* jumbotron */

#welcomePanel h1 {
    font-size: 1.9rem;
    margin-bottom: 1.5rem;
}

/* The heading stays close to full size - it's one short line. The .lead paragraph below it (and
   the "...or try one of these names:" label, which also carries .lead) is a long block of prose
   that reads as shouty at Bootstrap's 1.25rem on a phone - .example-names's name chips aren't
   .lead, so they're untouched. */
@media (max-width: 575.98px) {
    #welcomePanel .lead {
        font-size: 1rem;
    }
}

/* search */

.form-control.search-input {
    min-width: 16rem;
}

#navSearchWrapper .form-control {
    min-width: 12rem;
}

/* Below the lg breakpoint (where the navbar collapses behind the hamburger, site/js/nav.js), the
   search form drops onto its own row under the brand - give it some breathing room there and
   centre it, rather than sitting flush against the row above. Matches navbar-expand-lg below, not
   -md: at in-between widths above 768px but below ~960px, the brand + both nav links + the search
   box don't comfortably fit on one row even though -md would keep them uncollapsed there, which is
   exactly the cramped, wrapping-badly zone this is meant to avoid - lg gives enough headroom that
   the row never has to squeeze. */
@media (max-width: 991.98px) {
    #navSearchWrapper {
        width: 100%;
        padding: 0.75rem 0 0.5rem;
    }

    #navSearchWrapper .form-inline {
        justify-content: center;
        gap: 0.5rem;
    }
}

.example-names-label {
    margin-bottom: 1rem;
}

.example-names {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.example-chip {
    padding: 0.3rem 0.8rem;
    background: #fff;
    border: 1px solid var(--navy);
    color: var(--navy);
    border-radius: 999px;
    font-size: 0.9rem;
}

.example-chip:hover {
    background: var(--navy);
    color: #fff;
}

.result-name-pill {
    display: inline-block;
    padding: 0.4rem 1.4rem;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: normal;
}

/* Sits flush against the name pill: one pill per period this name has a map for
   (site/js/app.js's buildYearPills()) - wraps onto its own line below the name pill on narrow
   screens rather than overlapping it. */
.result-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.6rem;
}

/* display:contents removes this wrapper's own box - its pill buttons become direct flex items of
   .result-header itself, wrapping one at a time next to the name as space runs out, instead of
   the whole set of pills jumping to its own line as one block the moment it no longer fits. */
.year-pills {
    display: contents;
}

/* A touch smaller than .result-name-pill, so the name still reads as the headline and the years
   as data sitting next to it, rather than fully equal-weight siblings - grey rather than navy so
   the searched name itself still stands out as "the" pill among them. line-height/appearance/
   font-family are pinned explicitly because a bare <button> doesn't automatically match an <h2>'s
   box metrics even with identical padding/font-size: browsers keep native button chrome unless
   it's switched off, which was making these render visibly taller than the name pill. */
.year-pill {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    line-height: normal;
    border-radius: 999px;
    background: #e2e2e2;
    color: #1a1a1a;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}

.year-pill:hover {
    background: #d0d0d0;
}

/* The period the slider is currently showing - same navy/white language as .result-name-pill and
   .btn-navy, so "this is the selected one" reads consistently with the rest of the page. */
.year-pill-active,
.year-pill-active:hover {
    background: var(--navy);
    color: #fff;
}

/* A small inline version of the same pill, for a searched name mentioned mid-sentence (e.g. the
   IMD score text) - same navy/white/fully-rounded language as .result-name-pill, sized to sit on
   a text line without disrupting it. display:inline rather than inline-block, with
   box-decoration-break:clone, because a long value (e.g. a Supergroup/Group name) can outgrow a
   narrow mobile line: an inline-block that has to wrap is sized to the line's full available
   width by CSS's shrink-to-fit rule (not to its own wrapped content), which stretched the pill
   into one oversized box - clone instead paints each wrapped line as its own snug pill. */
.name-pill {
    display: inline;
    padding: 0.05rem 0.65rem;
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Same shape as .name-pill, for a computed value sitting next to it (e.g. the IMD score's mean/
   spread) - light grey/black instead of navy/white, so the searched name and its numbers read as
   two different kinds of thing at a glance. */
.value-pill {
    display: inline;
    padding: 0.05rem 0.65rem;
    background: #e2e2e2;
    color: #1a1a1a;
    border-radius: 999px;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Same shape again, for anything mentioned by name that has its own established colour elsewhere
   on the page - an IMD/AHAH decile, a Supergroup/Group in the mismatch callout. Filled with that
   thing's own colour (same colour as its bar/swatch), text colour computed per use
   (site/js/indicators.js's contrastText()) since these scales run from dark reds/greens to very
   light yellows and no single fixed text colour reads on all of them. */
.colour-pill {
    display: inline;
    padding: 0.05rem 0.65rem;
    border-radius: 999px;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* map + slider - not a Bootstrap component */

#map {
    height: 60vh;
    min-height: 320px;
    width: 100%;
}

/* The "reset view" control's SVG icon (site/js/map.js) - overrides Leaflet's own
   .leaflet-bar a { display: block } so the icon centres exactly in the 26x26 button, same box
   as the zoom controls above it. */
.leaflet-bar a.reset-view-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem 0.25rem;
}

.slider-row input[type="range"] {
    flex: 1;
}

.slider-row button {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    line-height: 1;
}

.period-label {
    margin: 0;
    padding: 0 1rem 0.25rem;
    color: #333;
}

.period-note {
    margin: 0;
    padding: 0 1rem 1rem;
    font-size: 0.85rem;
    font-style: italic;
}

.map-caption {
    margin: 0;
    padding: 0 1rem 1rem;
    font-size: 0.85rem;
    border-top: 1px solid #eee;
    padding-top: 0.75rem;
}

/* indicator cards (IMD/OAC/LOAC/GB2C/AHAH/FPC) and the more-about-your-name cards */

/* Navy header (brand colour, same --navy as the nav bar) on every card built via cardShell. */
.indicator-card .card-header {
    background: var(--navy);
    border-color: var(--navy);
}

.indicator-card .card-header h4 {
    color: #fff;
}

.indicator-text,
.card-body p,
.pen-portrait,
.about-item p {
    text-align: justify;
}

.indicator-text {
    font-size: 1rem;
    color: #1a1a1a;
}

.indicator-text strong {
    font-weight: 700;
}

/* The explanation + "click any label" line, set apart from the bars below. */
.indicator-about-box {
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    background: #f4f6fa;
    border-left: 3px solid var(--navy);
    border-radius: 4px;
}

.indicator-about-box .indicator-text {
    margin-bottom: 0;
}

.indicator-about-box .indicator-text + .indicator-text {
    margin-top: 0.6rem;
}

/* Real GeoDS flier, when one exists for this indicator - its cover thumbnail sits left of the
   about text, same idea as the old site's flier-alongside-text layout. */
.indicator-about-box-with-flier {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.flier-thumb-link {
    flex: none;
}

.flier-thumb {
    display: block;
    width: 84px;
    height: auto;
    border-radius: 4px;
    border: 1px solid #d7dbe6;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.flier-thumb:hover {
    transform: scale(1.04);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
}

.indicator-about-box-with-flier .indicator-about-text {
    flex: 1;
    min-width: 0;
}

@media (max-width: 420px) {
    .indicator-about-box-with-flier {
        flex-direction: column;
    }

    .flier-thumb {
        width: 110px;
    }
}

/* An aside for the rarer case where a name's leading Supergroup and its single most common Group
   disagree - a genuine "heads up, read this carefully" moment, so it gets its own admonition style
   (Quarto-note-like) rather than blending into the normal flow like indicator-about-box does. */
.callout-note {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-left: 3px solid var(--accent-orange);
    border-radius: 4px;
}

.callout-note .callout-icon {
    flex: none;
    font-size: 1.1rem;
    line-height: 1.5;
    color: var(--accent-orange);
}

.callout-note p {
    margin: 0;
}

/* "Supergroup"/"Group" label sitting above its own bar list - plain flow, no inset box, so the
   two levels read as sections of one continuous card rather than the Group list being boxed off
   inside the Supergroup one. */
.level-pill-row {
    margin: 1.25rem 0 0.6rem;
}

.level-pill-row:first-child {
    margin-top: 0;
}

/* The one-line reminder trailing a level pill (e.g. "top-level category") - small, semibold,
   slightly letter-spaced like a tiny label, but sentence case rather than uppercase (full caps
   next to an already-bold pill read as shouty). */
.level-pill-caption {
    margin-left: 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #8a8a8a;
}

.bar-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bar-row {
    display: block;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
}

details.bar-row > summary {
    list-style: none;
    cursor: pointer;
}

details.bar-row > summary::-webkit-details-marker,
details.bar-row > summary::marker {
    display: none;
    content: "";
}

.bar-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.bar-swatch {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    flex: none;
}

.bar-name {
    flex: 1;
    font-size: 0.95rem;
}

.bar-chevron {
    display: inline-block;
    width: 0.7rem;
    flex: none;
    font-size: 0.75rem;
    color: #666;
    transition: transform 0.15s ease;
}

details[open] > summary .bar-chevron {
    transform: rotate(90deg);
}

.bar-pct {
    font-variant-numeric: tabular-nums;
    color: #333;
    font-size: 0.9rem;
}

.bar-track {
    display: block;
    height: 0.5rem;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    display: block;
    height: 100%;
}

/* A name's own share (the fill) against the real population's share of the same group/supergroup -
   a thin tick so over/under-representation is visible without reading two numbers and subtracting. */
.bar-baseline {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    transform: translateX(-50%);
    background: #000;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

/* Index view of the group cards (site/js/indicators.js, INDEX_VIEW_ENABLED): every bar row carries
   both a share and an index value/bar, and one class on <html> decides which is shown. */
html:not(.group-view-index) .index-only,
.group-view-index .share-only {
    display: none !important;
}

.view-toggle-row {
    margin-bottom: 1rem;
}

.view-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 0.85rem;
}

.view-toggle-label {
    margin-right: 0.6rem;
    font-weight: 600;
    color: #8a8a8a;
}

.view-toggle button {
    border: 1px solid var(--navy);
    background: #fff;
    color: var(--navy);
    padding: 0.15rem 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.view-toggle button + button {
    border-left: none;
}

.view-toggle button:first-of-type {
    border-radius: 999px 0 0 999px;
}

.view-toggle button:last-of-type {
    border-radius: 0 999px 999px 0;
}

.view-toggle button[aria-pressed="true"] {
    background: var(--navy);
    color: #fff;
}

.view-explainer {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: #555;
}

/* Diverging bar: centre line = index 100; over-represented groups grow to the right, under-represented
   to the left, on a log scale (25 ... 100 ... 400 across the track). */
.index-track {
    display: block;
    position: relative;
    height: 0.5rem;
    background: #eee;
    border-radius: 999px;
}

.index-fill {
    position: absolute;
    top: 0;
    bottom: 0;
}

.index-axis {
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 2px;
    transform: translateX(-50%);
    background: #000;
}

.pen-portrait {
    margin: 0.5rem 0 0.25rem 1.4rem;
    padding: 0.6rem 0.8rem;
    background: #f7f7f9;
    border-left: 3px solid #ccc;
    font-size: 0.9rem;
    color: #333;
}

/* Both the places card and the forenames card (site/js/profile.js) lay out their Historic
   Census/SmartCensus columns as a Bootstrap .row of two .col-md-6 - below md these stack with no
   vertical gap between them (Bootstrap's grid only gutters horizontally), so the second column's
   heading sits flush under the first column's last line. 1rem matches .indicator-about-box's own
   margin-bottom, the gap already used between a card's about text and its first heading. */
@media (max-width: 767.98px) {
    .row > .col-md-6 + .col-md-6 {
        margin-top: 1rem;
    }
}

/* Not true pills - MSOA/district names are often two long clauses ("District — Area"), which wrap
   badly in a circular pill. A softly-rounded, left-aligned row reads better at that length. */
.places-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.place-chip {
    padding: 0.4rem 0.75rem 0.4rem 0.6rem;
    border-radius: 6px;
    border-left: 3px solid transparent;
    font-size: 0.9rem;
    text-align: left;
}

.place-chip--census {
    background: #eaf3fb;
    border-left-color: var(--census-colour);
}

.place-chip--smart {
    background: #e4f9f3;
    border-left-color: var(--smart-colour);
}

.place-chip .place-area {
    color: #555;
}

.forename-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.forename-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.85rem;
}

.forename-pill-female { background: rgba(27, 158, 119, 0.8); }
.forename-pill-male { background: rgba(117, 112, 179, 0.8); }

.about-item {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.about-item summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
}

.about-item p {
    margin-top: 0.6rem;
    margin-bottom: 0;
}

.eth-pill {
    display: inline;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}