/* ==========================================================================
   site.css: the site redesign (docs/SITE_REDESIGN.md), loaded straight after
   style.min.css from base.html, with its own ?v=.

   Every redesign rule lives here, unminified, and is edited by hand. Nothing
   in this work patches style.min.css: gulp cannot rebuild it (CLAUDE.md, Known
   Issues), so that file stays as it is and this one overrides it. Where an old
   rule there fights a new one here, the comment beside the override says so.

   The @font-face rules are NOT here: they sit in base.html's <head>, outside
   {% block head %}, so they are declared before any stylesheet loads and no
   page can drop them.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------- */
:root {
    --site-navy: #1f3864;        /* navbar, footer, headings, links, primary buttons */
    --site-navy-dark: #17294a;   /* an open menu's parent, a pressed button */
    --site-strip: #182d52;       /* the breadcrumb strip under the navbar */
    --site-ink: #333;            /* body text (Bootstrap's own #333) */
    --site-muted: #7f8c8d;       /* dates, references, secondary lines */
    --site-label: #666;          /* small uppercase labels */
    --site-hairline: #e6e6e6;    /* picture borders */
    --site-sans: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --site-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ---- Type --------------------------------------------------------------- */
/* Source Sans 3 for everything, 16px. Bootstrap 3 sets body to 14px Helvetica;
   14px of Source Sans reads a size smaller than the Arial most visitors saw, so
   the base goes to 16px site-wide (inner-page rule 3 in the brief). */
body {
    font-family: var(--site-sans);
    font-size: 16px;
}
/* Headings in Source Serif 4 at 600, in navy. Bootstrap gives h1-h6 weight 500
   and `color: inherit`; h4-h6 stay in the sans, as labels. */
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--site-serif);
    font-weight: 600;
    color: var(--site-navy);
}

/* ---- Navbar (_navbar.html) ---------------------------------------------- */
/* Navy, the site's own colour, in place of Bootstrap's #222 inverse theme and
   its #add8e6 logo. Bootstrap's rules are .navbar-inverse ones, so each
   override here carries .site-nav as well to outrank them. */
.navbar-inverse.site-nav { background: var(--site-navy); border-color: var(--site-navy); }
/* The logo: the star mark (an inline SVG in currentColor) and the name in the
   headings' serif, centred in the 50px bar. Bootstrap pads .navbar-brand 15px
   top and bottom around a 20px line; flex centres the 30px mark instead. Its
   colour is set here because Bootstrap's .navbar-inverse brand is #9d9d9d, and
   the name inherits it because style.min.css still gives .logo-text the 2014
   logo's #add8e6. */
.site-nav .navbar-brand { display: flex; align-items: center; height: 50px; padding-top: 0; padding-bottom: 0; }
.navbar-inverse.site-nav .navbar-brand,
.navbar-inverse.site-nav .navbar-brand:hover,
.navbar-inverse.site-nav .navbar-brand:focus { color: #fff; }
.site-nav .logo-mark { display: block; flex: none; margin-right: 10px; position: relative; top: -1px; fill: currentColor; }
.site-nav .logo-text { font-family: var(--site-serif); font-weight: 600; font-size: 20px; letter-spacing: .01em; line-height: 1; color: inherit; }
.site-nav .navbar-nav > li > a { font-size: 15px; color: rgba(255, 255, 255, .8); }
/* Tablet widths. The logo and six tabs need 773px at Bootstrap's 15px tab
   padding (819px in the fallback font), and the bar has the window's width less
   10px, so up to about 783px (800 with a scrollbar) it wrapped to two rows and
   covered the page title: every portrait iPad. 10px padding and 14px text bring
   it to 688px (728 in the fallback font), on one row from 768px even with a
   17px scrollbar. From 992px there is room for the full size. */
@media (min-width: 768px) and (max-width: 991px) {
    .site-nav .navbar-nav > li > a { padding-left: 10px; padding-right: 10px; font-size: 14px; }
}
.site-nav .navbar-nav > li > a:hover,
.site-nav .navbar-nav > li > a:focus { color: #fff; }
/* The current page (or its menu's parent): white, underlined from inside the bar. */
.site-nav .navbar-nav > .active > a,
.site-nav .navbar-nav > .active > a:hover,
.site-nav .navbar-nav > .active > a:focus { background: transparent; color: #fff; box-shadow: inset 0 -2px 0 #fff; }
/* An open menu's parent. Bootstrap 3 paints it near-black (#080808) under its
   `.open`; the Bootstrap 4 JS in all.min.js marks it `.show` instead. */
.site-nav .navbar-nav > .open > a, .site-nav .navbar-nav > .open > a:hover, .site-nav .navbar-nav > .open > a:focus,
.site-nav .navbar-nav > .show > a, .site-nav .navbar-nav > .show > a:hover, .site-nav .navbar-nav > .show > a:focus {
    background: var(--site-navy-dark); color: #fff; }
/* The drop-down menus: the dark navy of their open parent, so a menu hangs from
   the bar as one piece (Fernando, 28 Oct 2026: Bootstrap's white menus did not
   match). Bootstrap gives them a white fill, a grey hairline and #333 entries. */
.site-nav .dropdown-menu {
    font-size: 15px; background: var(--site-navy-dark); border: 0;
    border-radius: 0 0 6px 6px; padding: 6px 0; min-width: 100%;
    box-shadow: 0 10px 24px rgba(10, 20, 40, .28); }
.site-nav .dropdown-menu > li > a { padding: 8px 20px; color: rgba(255, 255, 255, .85); }
.site-nav .dropdown-menu > li > a:hover,
.site-nav .dropdown-menu > li > a:focus { background: rgba(255, 255, 255, .08); color: #fff; }
/* The current page's entry: white 600. Bootstrap fills it with its blue (#337ab7). */
.site-nav .dropdown-menu > .active > a,
.site-nav .dropdown-menu > .active > a:hover,
.site-nav .dropdown-menu > .active > a:focus { background: transparent; color: #fff; font-weight: 600; }

/* On a computer a menu opens ACROSS the breadcrumb row, not down from its tab
   (Fernando, 28 Oct 2026, from mock-ups). The phone menu below is unchanged.
   Bootstrap's own drop-down JS still opens and closes it (click, click outside,
   Esc, the arrow keys); only its look changes. */
@media (min-width: 768px) {
    /* No highlight on the open tab: the arrow under it says which menu is open.
       The "you are in this section" underline goes too while it is open: the
       arrow would cut it in two, and the arrow already marks that tab. */
    .site-nav .navbar-nav > .open > a, .site-nav .navbar-nav > .open > a:hover, .site-nav .navbar-nav > .open > a:focus,
    .site-nav .navbar-nav > .show > a, .site-nav .navbar-nav > .show > a:hover, .site-nav .navbar-nav > .show > a:focus {
        background: transparent; box-shadow: none; }
    /* The arrow: a notch in the row's own colour rising into the bar under the
       middle of the open tab. It reaches 2px below the tab, over the bar's 1px
       border and the row's 1px top hairline, so arrow and row are one solid
       shape with no line between them. */
    .site-nav .navbar-nav > li.dropdown.show::after,
    .site-nav .navbar-nav > li.dropdown.open::after {
        content: ""; position: absolute; left: 50%; bottom: -2px; z-index: 2;
        transform: translateX(-50%);
        border: 9px solid transparent; border-top: 0; border-bottom-color: var(--site-strip); }
    /* The menu: a band exactly over the breadcrumb row (51-90px), from under its
       tab to the right edge of the window, in the row's colour. The trail stays
       readable to its left; a trail long enough to reach the tab is simply cut
       there. Bootstrap's .navbar-right would align it right, hence left/right. */
    .site-nav .navbar-nav > li > .dropdown-menu {
        top: calc(100% + 1px); left: 0; right: auto; width: 100vw; height: 39px; min-width: 0;
        margin: 0; padding: 0 0 0 15px; float: none;
        background: var(--site-strip); border: 0; border-top: 1px solid rgba(255, 255, 255, .07);
        border-radius: 0; box-shadow: none; }
    /* Bootstrap 3's `.show { display: block !important }` utility is what shows it. */
    .site-nav .navbar-nav > li > .dropdown-menu.show { display: flex !important; align-items: center; gap: 26px; }
    .site-nav .navbar-nav > li > .dropdown-menu > li > a {
        padding: 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .85); }
    .site-nav .navbar-nav > li > .dropdown-menu > li > a:hover,
    .site-nav .navbar-nav > li > .dropdown-menu > li > a:focus {
        background: transparent; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
    /* Scrolled down, the breadcrumb row has gone from under the bar, so the open
       menu's band runs the full width there (base.html marks the body). */
    .site-scrolled .site-nav .navbar-nav > li > .dropdown-menu { box-shadow: -100vw 0 0 0 var(--site-strip); }
    /* A page with no breadcrumb row (every public page; base.html marks the body)
       has nothing for the band to lie in: over the page it covered the title. So
       there the menu drops down from its tab, in the open tab's dark navy, with no
       arrow (Fernando, 28 Oct 2026, chosen from pictures). Later than the
       scrolled rule above, so it wins there too. */
    .site-no-crumbs .site-nav .navbar-nav > li > .dropdown-menu {
        top: 100%; width: auto; height: auto; min-width: 180px; padding: 6px 0;
        background: var(--site-navy-dark); border-top: 0; border-radius: 0 0 6px 6px;
        box-shadow: 0 10px 24px rgba(10, 20, 40, .28); }
    .site-no-crumbs .site-nav .navbar-nav > li > .dropdown-menu.show { display: block !important; }
    .site-no-crumbs .site-nav .navbar-nav > li > .dropdown-menu > li > a { padding: 8px 20px; }
    .site-no-crumbs .site-nav .navbar-nav > li > .dropdown-menu > li > a:hover,
    .site-no-crumbs .site-nav .navbar-nav > li > .dropdown-menu > li > a:focus {
        background: rgba(255, 255, 255, .08); text-decoration: none; }
    .site-no-crumbs .site-nav .navbar-nav > li.dropdown.show::after,
    .site-no-crumbs .site-nav .navbar-nav > li.dropdown.open::after { content: none; }
    .site-no-crumbs .site-nav .navbar-nav > .open > a, .site-no-crumbs .site-nav .navbar-nav > .open > a:hover,
    .site-no-crumbs .site-nav .navbar-nav > .open > a:focus, .site-no-crumbs .site-nav .navbar-nav > .show > a,
    .site-no-crumbs .site-nav .navbar-nav > .show > a:hover, .site-no-crumbs .site-nav .navbar-nav > .show > a:focus {
        background: var(--site-navy-dark); }
}
.site-nav .navbar-toggle { border-color: rgba(255, 255, 255, .35); }
.site-nav .navbar-toggle:hover,
.site-nav .navbar-toggle:focus { background: var(--site-navy-dark); }
.site-nav .navbar-collapse { border-color: rgba(255, 255, 255, .12); }

/* The phone menu. Bootstrap 3 lays an open drop-down flat into the collapsed
   menu only under its own `.open`; the Bootstrap 4 JS sets `.show`, so the same
   layout is restated for it. Entries go near-white (Bootstrap's #9d9d9d was
   faint on navy), and the current page is white 600 with no underline, which
   would run the width of the open menu like a divider. */
@media (max-width: 767px) {
    .site-nav .navbar-nav > .show > .dropdown-menu,
    .site-nav .navbar-nav > .open > .dropdown-menu {
        position: static; float: none; width: auto; margin-top: 0;
        background: transparent; border: 0; box-shadow: none; }
    .site-nav .navbar-nav .dropdown-menu > li > a { padding: 8px 15px 8px 28px; line-height: 20px;
        color: rgba(255, 255, 255, .85); }
    .site-nav .navbar-nav .dropdown-menu > li > a:hover,
    .site-nav .navbar-nav .dropdown-menu > li > a:focus { background: transparent; color: #fff; }
    .site-nav .navbar-nav > li > a { color: rgba(255, 255, 255, .9); }
    .site-nav .navbar-nav > .active > a,
    .site-nav .navbar-nav > .active > a:hover,
    .site-nav .navbar-nav > .active > a:focus,
    .site-nav .navbar-nav .dropdown-menu > .active > a,
    .site-nav .navbar-nav .dropdown-menu > .active > a:hover,
    .site-nav .navbar-nav .dropdown-menu > .active > a:focus { box-shadow: none; color: #fff; font-weight: 600; }
    /* style.min.css indents every <li> 15px under 600px (an old rule). */
    .site-nav .navbar-nav li { margin-left: 0; }
}

/* ---- Footer (_footer.html) ---------------------------------------------- */
/* Navy, the bar's colour, with two short columns: Doctrine on the left, About
   on the right. main.css / style.min.css still carry the light-blue band's
   rules (#add8e6, a 5px top border); `.footerElement.site-footer` outranks them.
   Their `min-height: 200px`, `position: relative` (the flex body needs the
   footer in flow) and 20px top margin stay as they are. */
.footerElement.site-footer {
    background: var(--site-navy); border-top: 0; color: rgba(255, 255, 255, .75);
    font-size: 15px; padding: 28px 0 18px; }
.site-footer a { color: rgba(255, 255, 255, .85); }
.site-footer a:hover, .site-footer a:focus { color: #fff; text-decoration: underline; }
.site-footer .footer-cols { display: flex; justify-content: space-between; gap: 24px; }
.site-footer .footer-col-about { text-align: right; }
.site-footer .footer-head {
    font-family: var(--site-sans); font-size: 12.5px; font-weight: 700; line-height: 1.4;
    letter-spacing: .09em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.site-footer .footer-list { list-style: none; margin: 0; padding: 0; }
.site-footer .footer-list li { line-height: 1.7; margin: 0; }
.site-footer .footer-social { list-style: none; margin: 12px 0 0; padding: 0;
    display: flex; gap: 10px; justify-content: flex-end; }
.site-footer .footer-social li { margin: 0; }
/* 16px white glyphs in 36px outlined circles (44px on a phone, the tap floor). */
.site-footer .footer-social a {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 1px solid rgba(255, 255, 255, .4); border-radius: 50%; color: #fff; }
.site-footer .footer-social a:hover, .site-footer .footer-social a:focus {
    background: #fff; border-color: #fff; color: var(--site-navy); }
.site-footer .footer-social svg { width: 16px; height: 16px; fill: currentColor; display: block; }
.site-footer .footer-legal {
    margin: 16px 0 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 13px; text-align: center; color: rgba(255, 255, 255, .6); }
.site-footer .footer-legal a { color: rgba(255, 255, 255, .75); }
@media (max-width: 767px) {
    /* Two short columns fit side by side on a phone, so Doctrine shows again
       (main.css hid it when there were four long links). Both read left. */
    .site-footer .footer-col { flex: 1 1 50%; text-align: left; }
    .site-footer .footer-col-doctrine { display: block; }
    .site-footer .footer-social { justify-content: flex-start; }
    .site-footer .footer-social a { width: 44px; height: 44px; }
    .site-footer .footer-list li { line-height: 1.35; }
    /* A tap height for the text links; main.css sets the same padding. */
    .site-footer .footer-list li a { display: inline-block; padding: 5px 0; }
}

/* ---- The page column ---------------------------------------------------- */
/* One left edge for the navbar, every page and the footer: a 1140px column with
   20px inside it (16px on a phone), so text starts 90px in on a 1280 screen.
   Bootstrap 3 fixes .container at 750 / 970 / 1170px per breakpoint while the
   home page's column is fluid, so the edges jogged by a different amount at
   every width. `width: 100%`, never `auto`: <body> is a flex column (the footer
   rule in main.css), and an auto-margined child that sets no width shrinks to
   its content. */
.container {
    width: 100%; max-width: 1140px;
    padding-left: 20px; padding-right: 20px;
}
@media (max-width: 767px) {
    .container { padding-left: 16px; padding-right: 16px; }
}

/* ---- Under the navbar: the body offset and one spacing rule -------------- */
/* The navbar is fixed (50px plus its 1px border), so the body starts below it.
   Each page used to clear it on its own: style.min.css's `.breadcrumb {
   margin-top: 50px }` on public pages, 80-100px of top padding on the hub, the
   home hero and every team tool. Those offsets are now only the gap under the
   strip (team tools) or the bar (public pages, which have no strip). */
body { padding-top: 51px; }
/* The one rule: a page's title sits 30px below the strip, or below the bar where
   there is none. Bootstrap's .page-header is 40px down; team tools wrap their
   content in .container.site-page. */
.page-header { margin-top: 30px; }
.site-page { padding-top: 30px; }

/* ---- Breadcrumb strip (_breadcrumb.html) -------------------------------- */
/* Option A (Fernando, 27 Oct 2026): a slim second tier of the navbar, a shade
   darker than it. Since 28 Oct only on the CFC Resources pages once signed in
   (the hub shows only its own name, so the row stays put between it and its
   tools); public pages have none. It replaces the grey #f5f5f5 Bootstrap band
   that started at the screen edge. */
.site-crumbs { background: var(--site-strip); border-top: 1px solid rgba(255, 255, 255, .07); }
.site-crumbs ol {
    list-style: none; margin: 0; padding: 9px 0;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0;
    font-size: 14px; line-height: 20px; }
.site-crumbs li { display: inline-flex; align-items: center; margin: 0; }
.site-crumbs li + li::before {
    content: "\203A"; padding: 0 10px; font-size: 1.15em; line-height: 1; color: rgba(255, 255, 255, .38); }
.site-crumbs a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-crumbs a:hover, .site-crumbs a:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-crumbs [aria-current] { color: #fff; font-weight: 600; }
@media (max-width: 767px) {
    /* One line on a phone: a long page name ends in "..." rather than wrapping.
       style.min.css indents every <li> 15px under 600px; reset here. */
    .site-crumbs ol { flex-wrap: nowrap; white-space: nowrap; font-size: 13.5px; }
    .site-crumbs li { flex: none; }
    .site-crumbs li[aria-current] { flex: 1 1 auto; min-width: 0; }
    .site-crumbs li[aria-current] span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .site-crumbs li + li::before { padding: 0 8px; }
}

/* ---- Links and buttons -------------------------------------------------- */
/* Navy links in the page; Bootstrap's blue (#337ab7) was on body links, the
   Links page's buttons and Songs' Search and Apply. The navbar, strip and footer
   set their own colours with more specific rules. */
a { color: var(--site-navy); }
a:hover, a:focus { color: var(--site-navy-dark); }
.btn-link, .btn-link:hover, .btn-link:focus { color: var(--site-navy); }
/* One button language: a navy fill for the primary action (Bootstrap's
   primary and success, which this site uses for Save, Approve, Create), white
   with a navy outline for everything else (default, warning, info). Danger
   stays red: it deletes. */
.btn-primary, .btn-success {
    background-color: var(--site-navy); border-color: var(--site-navy); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-primary:active:hover, .btn-primary:active:focus, .btn-success:active:hover, .btn-success:active:focus {
    background-color: var(--site-navy-dark); border-color: var(--site-navy-dark); color: #fff; }
.btn-default, .btn-warning, .btn-info {
    background-color: #fff; border-color: var(--site-navy); color: var(--site-navy); }
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active {
    background-color: #eef2f8; border-color: var(--site-navy); color: var(--site-navy); }
/* Disabled buttons keep their own face, not Bootstrap's coloured one. */
.btn-primary.disabled, .btn-primary[disabled], .btn-success.disabled, .btn-success[disabled] {
    background-color: var(--site-navy); border-color: var(--site-navy); }
.btn-default.disabled, .btn-default[disabled], .btn-warning.disabled, .btn-warning[disabled] {
    background-color: #fff; border-color: var(--site-navy); }
/* Spinners on the white faces: both are white-on-colour by default. */
.btn-warning.is-busy::after, .btn-info.is-busy::after {
    border-color: rgba(31, 56, 100, .25); border-top-color: var(--site-navy); }
.btn-default .sched-spinner, .btn-warning .sched-spinner,
.sched-mini .btn-success .sched-spinner {
    border-color: rgba(31, 56, 100, .25); border-top-color: var(--site-navy); }
/* Songs' row toggle: "+" (not in the schedule) is the outlined button and the
   tick (in it) the filled one, so the chosen state is the one that stands out.
   Its classes are success / warning, flipped by Songs.html's script. */
.sched-mini .btn-success { background-color: #fff; border-color: var(--site-navy); color: var(--site-navy); }
.sched-mini .btn-success:hover, .sched-mini .btn-success:focus { background-color: #eef2f8; color: var(--site-navy); }
.sched-mini .btn-warning { background-color: var(--site-navy); border-color: var(--site-navy); color: #fff; }
.sched-mini .btn-warning:hover, .sched-mini .btn-warning:focus {
    background-color: var(--site-navy-dark); border-color: var(--site-navy-dark); color: #fff; }
.sched-mini .btn-warning .sched-spinner { border-color: rgba(255, 255, 255, .45); border-top-color: #fff; }
/* Bootstrap's pagination and pills are blue too. */
.pagination > li > a, .pagination > li > span { color: var(--site-navy); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span { background-color: var(--site-navy); border-color: var(--site-navy); color: #fff; }
.text-primary { color: var(--site-navy); }

/* ---- Inner pages -------------------------------------------------------- */
/* What We Believe (Truth_We_Believe.html, 28 Oct 2026): its six sections in a
   menu on the left, which swaps them in place; on a phone the menu sits above
   the section. Replaces the list of doctrine links (shared/shared_truth.html)
   at the foot of six separate pages. Sections are shown and hidden with the
   `hidden` attribute, so no rule here may give .believe-section a display. */
.believe-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.believe-nav ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid #e3e6ec; }
/* style.min.css's `@media (max-width: 600px){ li{margin-left:15px} }` would
   push the phone menu in from its own rail. */
.believe-nav li { margin: 0; }
.believe-nav a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 3px solid transparent;
    color: var(--site-navy); font-size: 15.5px; line-height: 1.35; }
.believe-nav a:hover, .believe-nav a:focus { text-decoration: underline; text-underline-offset: 3px; }
.believe-nav a[aria-current] { border-left-color: var(--site-navy); font-weight: 600; }
.believe-nav-label { margin: 18px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: var(--site-label); }
.believe-body { max-width: 760px; }
.believe-section h2 { margin: 0 0 4px; font-size: 26px; }
.believe-byline { margin: 0 0 18px; color: var(--site-muted); }
@media (min-width: 768px) {
    .believe-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; }
    /* Stays in view down a long article, under the fixed navbar. */
    .believe-nav { position: sticky; top: 71px; align-self: start; }
}
@media (min-width: 992px) {
    .believe-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 48px; }
}