/* ============================================================
   "Lakeside" colour scheme
   ============================================================
   Drawn from the library brand strip:
     #2b423e green-slate · #235b51 deep teal-green · #2a5488 logo blue
     #bbe3e5 pale cyan · #f4a539 marigold

   Everything is scoped to body.lakeside, which includes/header.php adds by
   default. The kids section uses includes/kids-header.php and stays on the
   standard blue/green theme. Removing the class restores that theme on any
   page. Rules further down for the hero, Quick Services, capsules and the
   Friends card only match markup that exists on the homepage.

   Two tones are darkened from strip colours so white text clears WCAG AA:
   --secondary-blue from the sky, --secondary-green from the mid green.
   Every value carries white text at 4.5:1 or better.
   ============================================================ */

body.lakeside {
    /* Green-slate, not blue-grey. This drives the top bar, footer and
       buttons — the page's chrome. At 202° it sat 35-58° of hue away from
       everything else and read as default charcoal; at 170° it matches the
       underlines and the logo's base green, so the frame belongs to the
       scheme. */
    --primary-blue: #2b423e;      /* green-slate — 10.8:1 with white */
    /* Blue is the scheme's secondary hue — one of the colours cards rotate
       through, not a category marker. Taken from the deep blue in the logo's
       river (#5584c4, hue 215) and darkened until white text clears; the
       original is 3.8:1.

       It is deliberately NOT the hover state of anything. That was the old
       bug: 58 green buttons flipped to blue on mouseover because this
       variable was being used for "a bit different" rather than for a
       colour in its own right. */
    --secondary-blue: #2a5488;    /* logo blue, darkened — 7.7:1 with white */
    --light-blue: #bbe3e5;        /* pale cyan — dark text only */
    --primary-green: #235b51;     /* deep teal-green — 7.8:1 with white */
    --secondary-green: #567769;   /* slate green — 5.0:1 with white */
    --light-green: #afdbc2;       /* pale mint — dark text only */
    --text-dark: #2b423e;

    --bs-primary: #2b423e;
    --bs-primary-rgb: 43, 66, 62;

    /* Accents. Marigold is the one loud colour — always dark text on it
       (5.6:1); white fails at 2.2:1. Burgundy is reserved for closures.
       Sky is a light panel colour and also needs dark text. */
    --accent-marigold: #f4a539;
    --alert-burgundy: #701231;
    --sky: #71b2e1;
    /* Page ground: a cool off-white tinted toward the sky rather than a warm
       cream, so it sits with the slate and teal instead of against them.
       Slate text on it is 10.6:1. */
    --ground: #f4f7f8;

    background-color: var(--ground);

    /* Poppins, self-hosted (see css/poppins.css). The system stack stays as
       the fallback, so the page is readable if the font fails to load. */
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Bootstrap sets its own stack on form controls and buttons, which would
   otherwise leave them in the system font while everything else changed. */
body.lakeside .btn,
body.lakeside .form-control,
body.lakeside .form-check-label,
body.lakeside .navbar,
body.lakeside .dropdown-menu,
body.lakeside input,
body.lakeside button,
body.lakeside select,
body.lakeside textarea {
    font-family: inherit;
}


/* Hover shades in theme.css are literals derived from the old palette,
   so they need restating here. */
body.lakeside .btn-primary:hover {
    background-color: #24352f;   /* 12.9:1 with white */
    border-color: #24352f;
}
body.lakeside .btn-success:hover {
    background-color: #1a4740;   /* 10.4:1 */
    border-color: #1a4740;
}
body.lakeside .btn-info:hover {
    background-color: #1d4557;   /* 10.3:1 */
    border-color: #1d4557;
}

/* "What Can You Do Here?" panel — a soft cyan instead of the old blue-grey,
   so it reads as a tint of the scheme rather than a leftover. */
body.lakeside .actions-section {
    background-color: #dbeef0;   /* slate text on it: 9.5:1 */
}

/* Marigold accent, available for the single most important action.
   Not applied to anything by default. */
body.lakeside .btn-accent {
    background-color: var(--accent-marigold);
    border-color: var(--accent-marigold);
    color: #2b423e;
    font-weight: 600;
}
body.lakeside .btn-accent:hover,
body.lakeside .btn-accent:focus-visible {
    background-color: #dd9126;
    border-color: #dd9126;
    color: #2b423e;
}

/* Hero band. theme.css runs this gradient from --primary-blue through the
   light tints to --primary-green, which under Lakeside meant dark at both
   edges — and the left edge landed on the same slate as the wordmark drawn
   over it, at 1:1.

   Rebuilt around #81c79d, sampled from the top of the tree in the logo.
   The middle stops are that same green mixed toward white, so the band is
   one colour lightening through the centre rather than a blend of hues.
   Slate text clears 5.7:1 at the darkest point. */
body.lakeside .hero-section {
    background: linear-gradient(to right,
        #81c79d,          /* logo tree green — slate on it: 5.7:1 */
        #a7d8ba 35%,      /* +30% white — 7.1:1 */
        #bae0c9 65%,      /* +45% white — 7.9:1 */
        #94cfac);         /* +15% white — 6.4:1 */
}

/* Interior pages get the same band. theme.css runs .page-header from
   --light-blue to --light-green, which is a pale cyan-to-mint blend rather
   than the logo green the homepage hero uses, so the two did not match.
   Same stops, same direction. Header text clears 5.4:1 at the darkest. */
body.lakeside .page-header {
    background: linear-gradient(to right,
        #81c79d,
        #a7d8ba 35%,
        #bae0c9 65%,
        #94cfac);
}

/* Hero brand block. The HTL logo is a monogram with no lettering, so the
   library name is set beneath it as the wordmark and doubles as the page
   heading, replacing the navbar brand the homepage no longer shows.

   The wordmark is sized in container-query units so it scales with the logo
   and always sets on a single line, at any width. */
body.lakeside .hero-brand {
    max-width: 440px;
    container-type: inline-size;
}

body.lakeside .hero-wordmark {
    /* Poppins sets wider than the system stack at the same nominal size, so
       this is pulled back from 5.4 to keep the line under the logo. */
    font-size: 5.0cqw;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--primary-blue);
    line-height: 1.15;
    white-space: nowrap;
}

/* Fallback where container query units are unsupported: scale off the
   viewport instead. Still nowrap, just less precisely matched to the logo. */
@supports not (font-size: 1cqw) {
    body.lakeside .hero-wordmark {
        font-size: clamp(0.8rem, 3.4vw, 1.6rem);
    }
}

/* The logo block is centred until lg, so keep the brand block with it. */
@media (max-width: 991.98px) {
    body.lakeside .hero-brand {
        margin-inline: auto;
    }
}

/* ------------------------------------------------------------------
   Quick Services
   Six icon links, replacing the photo cards that were below the events
   section. Icons instead of photography so the row reads as a set of
   services rather than six unrelated pictures.
   ------------------------------------------------------------------ */
/* No panel background — the row sits directly on the page ground and reads
   as a set of links rather than a boxed-off section. */
body.lakeside .discover-section {
    padding: 0.5rem 0 0;
}

body.lakeside .discover-heading {
    text-align: left;
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--primary-blue);
    margin-bottom: 1.25rem;
}

body.lakeside .discover-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
}

body.lakeside .discover-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.4rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--primary-blue);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

body.lakeside .discover-card:hover,
body.lakeside .discover-card:focus-visible {
    background-color: var(--light-blue);   /* pale cyan — reads against the
                                              near-white ground; label stays
                                              at 8.3:1 */
    transform: translateY(-3px);
    color: var(--primary-blue);
    text-decoration: none;
}

body.lakeside .discover-card:focus-visible {
    outline: 3px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Fixed-height art box so Bootstrap icons and the MEL/Libby logos all sit
   on the same baseline and the labels line up across the row. */
body.lakeside .discover-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
}

body.lakeside .discover-art i {
    font-size: 4.2rem;
    line-height: 1;
}

body.lakeside .discover-art img {
    max-height: 88px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

body.lakeside .discover-label {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
}

@media (max-width: 991.98px) {
    body.lakeside .discover-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
    body.lakeside .discover-section { padding: 0.25rem 0 0; }
    body.lakeside .discover-heading { font-size: 1.25rem; margin-bottom: 1rem; }
    body.lakeside .discover-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    body.lakeside .discover-art { height: 76px; }
    body.lakeside .discover-art i { font-size: 3.6rem; }
    body.lakeside .discover-art img { max-height: 76px; }
    body.lakeside .discover-label { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    body.lakeside .discover-card { transition: none; }
    body.lakeside .discover-card:hover,
    body.lakeside .discover-card:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------
   Capsule stack — right column of the events row
   Replaces the "In the Spotlight" carousel. Four wide bars stacked, each
   one a single link, so the column reads as a short list of destinations
   rather than a rotating image people have to wait on.
   ------------------------------------------------------------------ */
body.lakeside .capsule-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.lakeside .capsule {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 14px;           /* matches the Friends card */
    text-decoration: none;
    color: var(--primary-blue);
    transition: transform 0.18s ease, filter 0.18s ease;
}

body.lakeside a.capsule:hover,
body.lakeside a.capsule:focus-visible {
    transform: translateX(4px);
    filter: brightness(0.96);      /* light fills darken on hover rather than lighten */
    color: var(--primary-blue);
    text-decoration: none;
}

body.lakeside a.capsule:focus-visible {
    outline: 3px solid var(--primary-blue);
    outline-offset: 3px;
}

/* Tints of the scheme's own hues rather than solid darks — four heavy bars
   stacked read as a wall. Slate text on each, all above 7:1. */
body.lakeside .capsule-a { background-color: #addbbf; }   /* logo green tint  — 7.4:1 */
body.lakeside .capsule-b { background-color: #b5d6ef; }   /* logo river blue  — 7.1:1 */
body.lakeside .capsule-c { background-color: #c5e7e9; }   /* pale cyan tint   — 8.7:1 */
body.lakeside .capsule-d { background-color: #b0e0d6; }   /* teal tint       — 7.4:1 */

body.lakeside .capsule-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: rgba(46, 60, 68, 0.12);
    font-size: 1.35rem;
}

body.lakeside .capsule-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;                  /* lets long copy wrap instead of stretching the pill */
}

body.lakeside .capsule-title {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

body.lakeside .capsule-sub {
    font-size: 0.83rem;
    line-height: 1.35;
    color: #445660;                /* 6.6:1 on the lightest fill */
}

body.lakeside .capsule-chevron {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 1.1rem;
    opacity: 0.85;
}


@media (max-width: 575px) {
    body.lakeside .capsule { padding: 0.85rem 1rem; gap: 0.75rem; }
    body.lakeside .capsule-icon { width: 2.25rem; height: 2.25rem; font-size: 1.1rem; }
    body.lakeside .capsule-title { font-size: 0.95rem; }
    body.lakeside .capsule-sub { font-size: 0.78rem; }
    body.lakeside .capsule-chevron { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.lakeside .capsule { transition: none; }
    body.lakeside a.capsule:hover,
    body.lakeside a.capsule:focus-visible { transform: none; }
}

/* ------------------------------------------------------------------
   Friends of the Library band
   A single card just above the footer, held to 75% of the container so it
   reads as a notice rather than another full-width section.
   ------------------------------------------------------------------ */
body.lakeside .friends-band {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

body.lakeside .friends-card {
    width: 75%;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    background-color: var(--primary-green);   /* white text 7.8:1 */
    color: #fff;
}

/* White plate behind the logo. The strokes separating the swooshes are
   transparent in the source file, not white, so on a teal card they would
   fill with teal and the shapes would run together. Sitting the mark on
   white gives those gaps something white to show through to. */
body.lakeside .friends-logo-plate {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: #fff;
}

body.lakeside .friends-logo {
    display: block;
    width: 84px;      /* the mark is square now the wording is gone */
    height: auto;
}

body.lakeside .friends-text {
    min-width: 0;
}

body.lakeside .friends-title {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.4rem;
    color: #fff;                    /* 7.8:1 on the teal */
}

body.lakeside .friends-copy {
    /* Bigger and pure white. At 0.95rem in a muted tint it read as soft —
       Poppins has thin strokes at 400, and light-on-dark exaggerates that.
       White lifts it from 6.5:1 to 7.8:1 and sharpens the edges. */
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0;
    color: #fff;                    /* 7.8:1 on the teal */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Marigold gets its one use on the page here — dark text on it, never
   white, which fails at 2.2:1. */
body.lakeside .friends-cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    background-color: var(--accent-marigold);
    color: #2b423e;                 /* 5.5:1 */
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

body.lakeside .friends-cta:hover,
body.lakeside .friends-cta:focus-visible {
    background-color: #dd9126;
    color: #2b423e;
    text-decoration: none;
}

body.lakeside .friends-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    body.lakeside .friends-card { width: 100%; }
    body.lakeside .friends-logo { width: 76px; }
}

@media (max-width: 575px) {
    body.lakeside .friends-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
    body.lakeside .friends-cta { margin-left: 0; }
    body.lakeside .friends-logo { width: 70px; }
}

/* ------------------------------------------------------------------
   Bootstrap utility colours pulled into the scheme
   bg-secondary was Bootstrap's grey (hue 208°, 7% saturation) — the same
   blue-leaning near-neutral problem the chrome had, on 146 card headers.
   bg-success was a green at 69% saturation beside our 44%, so it read as a
   different green rather than an accent. bg-warning was worse than
   off-theme: white text on it measured 2.62:1, which fails WCAG.

   These carry !important because Bootstrap's own utilities do; the extra
   body.lakeside specificity is what makes them win.
   ------------------------------------------------------------------ */
body.lakeside .bg-secondary { background-color: #55665f !important; }  /* white 6.1:1 */
body.lakeside .bg-success   { background-color: #2d6a52 !important; }  /* white 6.4:1 */
body.lakeside .bg-warning   { background-color: #9a6512 !important; }  /* white 5.0:1, was 2.6:1 */

body.lakeside .btn-warning {
    background-color: #9a6512;
    border-color: #9a6512;
    color: #fff;
}
body.lakeside .btn-warning:hover {
    background-color: #7d520e;
    border-color: #7d520e;
    color: #fff;
}

/* ------------------------------------------------------------------
   Card headers — two trios, blue and green
   Pages are built as rows of three: a blue row using primary/secondary/
   light-blue, then a green row using the green equivalents. An earlier
   version folded bg-primary-blue into a green ramp, which decapitated every
   blue row — support.php led with a green "Financial Donations" above two
   blue cards.

   Each hue now runs deep / mid / pale, so a row reads as one family with
   three clear steps, and the two rows stay obviously different from each
   other. Every filled step carries white text.
   ------------------------------------------------------------------ */
/* Header AND footer. Cards put the same class on both, so remapping only
   the header left them a different colour top and bottom — visible on
   Special Equipment and VOX & Wonderbooks, where the header went deep blue
   while the footer stayed on the raw --primary-blue. */
body.lakeside .card-header.bg-primary-blue,
body.lakeside .card-footer.bg-primary-blue    { background-color: #1b3f62 !important; }  /* deep blue  — white 10.9:1 */
/* bg-secondary-blue keeps --secondary-blue #2a5488 (mid blue, 7.7:1)      */
/* bg-light-blue keeps --light-blue  #bbe3e5 (pale, dark text)             */

body.lakeside .card-header.bg-primary-green,
body.lakeside .card-footer.bg-primary-green   { background-color: #16413a !important; }  /* deep green — white 11.3:1 */
body.lakeside .card-header.bg-secondary-green,
body.lakeside .card-footer.bg-secondary-green { background-color: #2e6b59 !important; }  /* mid green  — white  6.2:1 */
/* bg-light-green keeps --light-green #afdbc2 (pale, dark text)            */

body.lakeside .card-header.bg-secondary,
body.lakeside .card-header.bg-success,
body.lakeside .card-footer.bg-secondary,
body.lakeside .card-footer.bg-success         { background-color: #3e7a62 !important; }  /* white 5.0:1 */

/* bg-warning stays warm and out of the ramp — a warning that looks like
   every other card stops working as a warning. */


/* theme.css hovers btn-primary-blue to --secondary-blue, i.e. a hue change
   rather than a depth change. Buttons should darken on hover, not shift
   colour. */
body.lakeside .btn-primary-blue:hover,
body.lakeside .btn-primary-blue:focus-visible {
    background-color: #24352f;   /* 12.9:1 with white */
    border-color: #24352f;
    color: #fff;
}

/* ------------------------------------------------------------------
   Buttons take the colour of the card they sit in
   Button classes were assigned as arbitrarily as the headers were — a card
   with a blue header could hold a green button and vice versa. Rather than
   editing every page, :has() lets the card's own header decide, so this
   stays correct wherever a header class is set or changed later.

   Browsers without :has() simply keep the button colour the page author
   wrote, which is the current behaviour — nothing breaks.
   ------------------------------------------------------------------ */

/* Blue-headed cards — blue buttons */
body.lakeside .card:has(.card-header:is(.bg-primary-blue, .bg-secondary-blue, .bg-light-blue)) :is(.btn-primary, .btn-primary-blue, .btn-primary-green, .btn-secondary-blue, .btn-secondary-green, .btn-light-blue, .btn-light-green) {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
    color: #fff;
}
body.lakeside .card:has(.card-header:is(.bg-primary-blue, .bg-secondary-blue, .bg-light-blue)) :is(.btn-primary, .btn-primary-blue, .btn-primary-green, .btn-secondary-blue, .btn-secondary-green, .btn-light-blue, .btn-light-green):hover {
    background-color: #1f406a;
    border-color: #1f406a;
    color: #fff;
}
body.lakeside .card:has(.card-header:is(.bg-primary-blue, .bg-secondary-blue, .bg-light-blue)) :is(.btn-outline-primary, .btn-outline-success) {
    color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}
body.lakeside .card:has(.card-header:is(.bg-primary-blue, .bg-secondary-blue, .bg-light-blue)) :is(.btn-outline-primary, .btn-outline-success):hover {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
    color: #fff;
}

/* Green-headed cards — green buttons */
body.lakeside .card:has(.card-header:is(.bg-primary-green, .bg-secondary-green, .bg-light-green, .bg-secondary, .bg-success)) :is(.btn-primary, .btn-primary-blue, .btn-primary-green, .btn-secondary-blue, .btn-secondary-green, .btn-light-blue, .btn-light-green) {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
}
body.lakeside .card:has(.card-header:is(.bg-primary-green, .bg-secondary-green, .bg-light-green, .bg-secondary, .bg-success)) :is(.btn-primary, .btn-primary-blue, .btn-primary-green, .btn-secondary-blue, .btn-secondary-green, .btn-light-blue, .btn-light-green):hover {
    background-color: #1a4740;
    border-color: #1a4740;
    color: #fff;
}
body.lakeside .card:has(.card-header:is(.bg-primary-green, .bg-secondary-green, .bg-light-green, .bg-secondary, .bg-success)) :is(.btn-outline-primary, .btn-outline-success) {
    color: var(--primary-green);
    border-color: var(--primary-green);
}
body.lakeside .card:has(.card-header:is(.bg-primary-green, .bg-secondary-green, .bg-light-green, .bg-secondary, .bg-success)) :is(.btn-outline-primary, .btn-outline-success):hover {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    color: #fff;
}

/* Badges follow the card too — the "3 Week Loan" style pills in card
   footers were assigned as arbitrarily as the buttons were, so a green card
   could carry a blue badge.

   Only the theme's own colour classes are remapped. bg-success, bg-danger,
   bg-warning and bg-info are left alone: on a badge those carry state
   (available, overdue, closed), and repainting them to match the card would
   throw that meaning away. */
body.lakeside .card:has(.card-header:is(.bg-primary-blue, .bg-secondary-blue, .bg-light-blue)) .badge:is(.bg-primary-blue, .bg-secondary-blue, .bg-primary-green, .bg-secondary-green, .bg-light-blue, .bg-light-green) {
    background-color: var(--secondary-blue) !important;
    color: #fff !important;
}

body.lakeside .card:has(.card-header:is(.bg-primary-green, .bg-secondary-green, .bg-light-green, .bg-secondary, .bg-success)) .badge:is(.bg-primary-blue, .bg-secondary-blue, .bg-primary-green, .bg-secondary-green, .bg-light-blue, .bg-light-green) {
    background-color: var(--primary-green) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------
   Main menu fit
   Seven top-level menus sit beside a brand block on every page except the
   homepage, which drops the brand. Poppins also sets wider than the system
   stack it replaced, so between the xl breakpoint at 1200px and roughly
   1400px the menu was being crowded.

   Tightened hardest in the band where it actually runs out of room, and
   eased off above 1400px where there is space again.
   ------------------------------------------------------------------ */
@media (min-width: 1200px) {
    body.lakeside .navbar-expand-xl .navbar-nav .nav-link {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
    body.lakeside .navbar-brand img {
        height: 46px;
    }
    body.lakeside .navbar-brand .fs-5 {
        font-size: 1.05rem;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body.lakeside .navbar-expand-xl .navbar-nav .nav-link {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
        font-size: 0.92rem;
    }
    body.lakeside .navbar-brand img {
        height: 38px;
    }
    body.lakeside .navbar-brand .fs-5 {
        font-size: 0.95rem;
    }
    body.lakeside .navbar {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* ------------------------------------------------------------------
   Brand band
   The mockup's palette strip, at the very bottom of the footer, carrying the
   credits rather than sitting as a bare decorative rule. Nine colours chosen
   from the 34 for their relevance — the site's own mint, cyan and marigold,
   plus the logo's river blues and sunrise tones.

   The blocks are a background layer; the text sits above them. Every colour
   clears 9:1 with black, so the line stays readable wherever it happens to
   cross a boundary between blocks.
   ------------------------------------------------------------------ */
body.lakeside .brand-strip {
    position: relative;
    margin-top: 1.5rem;
    min-height: 42px;              /* three times the old decorative bar */
    display: flex;
    align-items: center;
}

body.lakeside .brand-strip-blocks {
    position: absolute;
    inset: 0;
    display: flex;
}

body.lakeside .brand-strip-blocks span {
    flex: 1 1 0;
    min-width: 0;
}

body.lakeside .brand-strip-text {
    position: relative;            /* above the blocks */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.25rem 1.5rem;
    width: 100%;
    padding-block: 0.5rem;
    padding-inline: 1.25rem;       /* hold the credits off the band's edges */
    color: #000;
    font-size: 0.82rem;
    font-weight: 600;
}

@media (max-width: 575px) {
    body.lakeside .brand-strip {
        min-height: 0;
    }
    body.lakeside .brand-strip-text {
        justify-content: center;
        text-align: center;
        font-size: 0.75rem;
        padding-inline: 0.75rem;
    }
}