@import url("/assets/css/rs-mobile.css?v=20261006");  /* phone layer -- must stay the first rule in this file */

/* ==========================================================================
   River Shoals theme layer  (September 2026)
   --------------------------------------------------------------------------
   Loaded LAST in <head> on every owners and admin page, right after
   assets/js/rs-theme.js has put data-bs-theme="light|dark" on <html>.
   Also loaded by the public header (includes/header.php) for the public
   nav bar only -- public pages never load rs-theme.js, so they never get
   the data-bs-theme attribute on <html> and none of the owners/admin rules
   below (all scoped to html[data-bs-theme]) touch them. (Their own dark
   mode, assets/js/rs-public-theme.js + assets/css/public-dark.css, puts
   the attribute on <body> instead, so the unprefixed [data-bs-theme="dark"]
   rules here DO reach public pages in dark mode.)

   What lives here, in order:
     1. Design tokens, light and dark
     2. Bootstrap 5.3 colour-mode variables mapped onto the tokens
     3. The app bar (owners/includes/ownermenubar.php,
        admin/pages/includes/appbar.php)
     4. Page title block -- the old photo banners (.bannerProp, .bannerPool,
        .bannerLand, .bannerTech + .titleText) restyled in place
     5. Page toolbar (.btnContainer / .menuButtons) and footer
     6. Owners-area legacy styles (ownerPages.css, style.css) in dark mode
     7. Admin-area legacy styles (admin.css) in dark mode
     8. Dark-mode safety nets for hard-coded light colours in page markup
     9. Public site nav bar (includes/header.php)

   Rule of thumb for new work: use the --rs-* tokens (or Bootstrap's own
   --bs-* variables) instead of hex colours, and it works in both modes
   for free. A hard-coded #fff is a white box in dark mode.
   ========================================================================== */


/* 1. Tokens ================================================================ */

:root,
[data-bs-theme="light"] {
    --rs-bg: #f4f6f8;
    --rs-surface: #ffffff;
    --rs-surface-2: #f1f4f6;
    --rs-surface-3: #e7ecef;
    --rs-text: #17232b;
    --rs-text-2: #3a4852;
    --rs-muted: #66747e;
    --rs-border: #dde3e8;
    --rs-border-strong: #c7d0d7;

    --rs-accent: #1f6f6b;
    --rs-accent-hover: #175855;
    --rs-accent-soft: #e2f1ef;
    --rs-accent-text: #17605c;
    --rs-on-accent: #ffffff;

    --rs-danger: #b3261e;
    --rs-danger-soft: #fbe9e7;
    --rs-warn: #8a5a00;
    --rs-warn-soft: #fff4dc;
    --rs-ok: #1e7a42;
    --rs-ok-soft: #e6f4ea;
    --rs-info-soft: #e7f0fa;

    --rs-shadow-sm: 0 1px 2px rgba(16, 24, 32, .05), 0 1px 3px rgba(16, 24, 32, .06);
    --rs-shadow: 0 6px 20px rgba(16, 24, 32, .08), 0 1px 3px rgba(16, 24, 32, .06);
    --rs-ring: 0 0 0 3px rgba(31, 111, 107, .25);

    /* Page-level inline styles that used a tinted light background or a
       dark coloured ink were rewritten as
         color-mix(in srgb, <original> var(--rs-tint), var(--rs-surface))
         color-mix(in srgb, <original> var(--rs-ink), #fff)
       At 100% that is exactly the original colour, so light mode is
       unchanged; dark mode dials them down to a faint tint of the same hue
       and lifts dark text toward white. */
    --rs-tint: 100%;
    --rs-ink: 100%;

    --rs-radius: 12px;
    --rs-radius-sm: 8px;
    --rs-appbar-h: 60px;
    --rs-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
    --rs-bg: #0e1316;
    --rs-surface: #151c20;
    --rs-surface-2: #1b2328;
    --rs-surface-3: #232d33;
    --rs-text: #e3e9ed;
    --rs-text-2: #c2ccd2;
    --rs-muted: #8f9da6;
    --rs-border: #29343b;
    --rs-border-strong: #37444c;

    --rs-accent: #4fb3a9;
    --rs-accent-hover: #6cc6bd;
    --rs-accent-soft: rgba(79, 179, 169, .14);
    --rs-accent-text: #82d3ca;
    --rs-on-accent: #0b1a19;

    --rs-danger: #f28b82;
    --rs-danger-soft: rgba(242, 139, 130, .14);
    --rs-warn: #f3c46b;
    --rs-warn-soft: rgba(243, 196, 107, .13);
    --rs-ok: #7fd49a;
    --rs-ok-soft: rgba(127, 212, 154, .13);
    --rs-info-soft: rgba(120, 170, 230, .13);

    --rs-tint: 14%;
    --rs-ink: 45%;

    --rs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --rs-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .4);
    --rs-ring: 0 0 0 3px rgba(79, 179, 169, .35);
}


/* 2. Bootstrap 5.3 colour modes =========================================== */
/* Bootstrap draws cards, tables, forms, modals, dropdowns, list groups and
   alerts from these. --bs-body-bg is what an input or a card is painted
   with, so it maps to the SURFACE colour; the page itself gets --rs-bg
   directly on <body> below. */

html[data-bs-theme] {
    --bs-body-bg: var(--rs-surface);
    --bs-body-color: var(--rs-text);
    --bs-emphasis-color: var(--rs-text);
    --bs-secondary-color: var(--rs-muted);
    --bs-secondary-bg: var(--rs-surface-2);
    --bs-tertiary-bg: var(--rs-surface-2);
    --bs-border-color: var(--rs-border);
    --bs-border-color-translucent: var(--rs-border);
    --bs-link-color: var(--rs-accent-text);
    --bs-link-color-rgb: 23, 96, 92;
    --bs-link-hover-color: var(--rs-accent-hover);
    --bs-link-hover-color-rgb: 23, 88, 85;
    --bs-focus-ring-color: rgba(31, 111, 107, .25);
    background: var(--rs-bg);
}

html[data-bs-theme="dark"] {
    --bs-link-color-rgb: 130, 211, 202;
    --bs-link-hover-color-rgb: 108, 198, 189;
    --bs-focus-ring-color: rgba(79, 179, 169, .35);
}

html[data-bs-theme] body {
    background: var(--rs-bg);
    color: var(--rs-text);
    -webkit-font-smoothing: antialiased;
}

html[data-bs-theme] .btn-primary {
    --bs-btn-bg: var(--rs-accent);
    --bs-btn-border-color: var(--rs-accent);
    --bs-btn-color: var(--rs-on-accent);
    --bs-btn-hover-bg: var(--rs-accent-hover);
    --bs-btn-hover-border-color: var(--rs-accent-hover);
    --bs-btn-hover-color: var(--rs-on-accent);
    --bs-btn-active-bg: var(--rs-accent-hover);
    --bs-btn-active-border-color: var(--rs-accent-hover);
    --bs-btn-active-color: var(--rs-on-accent);
    --bs-btn-disabled-bg: var(--rs-accent);
    --bs-btn-disabled-border-color: var(--rs-accent);
}

html[data-bs-theme] .btn-outline-primary {
    --bs-btn-color: var(--rs-accent-text);
    --bs-btn-border-color: var(--rs-accent);
    --bs-btn-hover-bg: var(--rs-accent);
    --bs-btn-hover-border-color: var(--rs-accent);
    --bs-btn-hover-color: var(--rs-on-accent);
    --bs-btn-active-bg: var(--rs-accent);
    --bs-btn-active-color: var(--rs-on-accent);
}

html[data-bs-theme] .form-control:focus,
html[data-bs-theme] .form-select:focus,
html[data-bs-theme] .btn:focus-visible {
    border-color: var(--rs-accent);
    box-shadow: var(--rs-ring);
}

html[data-bs-theme] .dropdown-menu {
    --bs-dropdown-bg: var(--rs-surface);
    --bs-dropdown-border-color: var(--rs-border);
    --bs-dropdown-link-color: var(--rs-text);
    --bs-dropdown-link-hover-bg: var(--rs-surface-2);
    --bs-dropdown-link-hover-color: var(--rs-text);
    --bs-dropdown-link-active-bg: var(--rs-accent);
    --bs-dropdown-box-shadow: var(--rs-shadow);
    box-shadow: var(--rs-shadow);
}


/* 3. App bar =============================================================== */
/* Full-bleed even though the owners <body> is capped at 1200px wide
   (ownerPages.css). The bar's paint -- surface colour plus the 1px hairline
   along its bottom -- is a border-image pushed 100vmax out to each side.
   A border-image outset is paint only: it adds nothing to the page's
   scrollable width, and unlike a clip-path it does not cut off the account
   dropdown that hangs below the bar. */

.rs-appbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--rs-appbar-h);
    background: var(--rs-surface);
    border-image: linear-gradient(to top, var(--rs-border) 1px, var(--rs-surface) 1px) fill 0 / 0 / 0 100vmax;
    font-family: var(--rs-font);
    font-size: 15px;
    line-height: 1.2;
}

.rs-appbar__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 16px;
}

.rs-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    color: var(--rs-text) !important;
    text-decoration: none !important;
}

.rs-brand__mark {
    width: 34px !important;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--rs-border-strong);
    display: block;
}

.rs-brand__text {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.rs-brand__name {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.rs-brand__area {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rs-accent-text);
    background: var(--rs-accent-soft);
    padding: 3px 7px;
    border-radius: 999px;
}

.rs-brand__area--admin {
    color: var(--rs-danger);
    background: var(--rs-danger-soft);
}

.rs-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.rs-nav::-webkit-scrollbar { display: none; }

.rs-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: var(--rs-radius-sm);
    color: var(--rs-muted) !important;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .12s ease, color .12s ease;
}

.rs-nav__link i { font-size: 15px; opacity: .9; }

.rs-nav__link:hover {
    color: var(--rs-text) !important;
    background: var(--rs-surface-2);
}

.rs-nav__link.is-active {
    color: var(--rs-accent-text) !important;
    background: var(--rs-accent-soft);
}

.rs-appbar__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.rs-iconbtn,
.rs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--rs-border) !important;
    border-radius: 50%;
    background: var(--rs-surface);
    color: var(--rs-text-2) !important;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color .12s ease, border-color .12s ease;
}

.rs-iconbtn:hover,
.rs-avatar:hover {
    background: var(--rs-surface-2);
    border-color: var(--rs-border-strong) !important;
}

.rs-iconbtn:focus-visible,
.rs-avatar:focus-visible,
.rs-nav__link:focus-visible,
.rs-chip:focus-visible {
    outline: none;
    box-shadow: var(--rs-ring);
}

/* "Menu": at phone width, where the menu strip down the left edge
   (includes/rs-rail.php) hides, this opens it as a drawer. Above 820px the
   strip is always on screen, so the button is not drawn. */
.rs-menubtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 12px 0 11px;
    flex-shrink: 0;
    border: 1px solid var(--rs-border) !important;
    border-radius: 999px;
    background: var(--rs-surface);
    color: var(--rs-text-2) !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.rs-menubtn__icon { font-size: 16px; }
.rs-menubtn:hover { background: var(--rs-surface-2); border-color: var(--rs-border-strong) !important; }
.rs-menubtn:focus-visible { outline: none; box-shadow: var(--rs-ring); }
@media (min-width: 821px) { .rs-menubtn { display: none; } }
@media (max-width: 560px) {
    .rs-menubtn { width: 38px; padding: 0; justify-content: center; }
    .rs-menubtn span { display: none; }
}
/* With the Menu button in the bar there is no room for the words "River
   Shoals" on a phone; the mark and the ADMIN tag stay. */
@media (max-width: 480px) {
    .rs-appbar:has(.rs-menubtn) .rs-brand__name { display: none; }
}

.rs-avatar {
    overflow: hidden;
    background: var(--rs-accent-soft);
    color: var(--rs-accent-text) !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.rs-avatar img {
    width: 100% !important;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.rs-chip--admin {
    color: var(--rs-danger) !important;
    background: var(--rs-danger-soft);
}

.rs-chip--admin:hover { filter: brightness(.97); }

/* Red count on the Admin button: how much is waiting on this admin
   (rsAdminAttentionTotal). Solid red with white text reads on both the
   light and dark bars, so it needs no dark-mode override. */
.rs-chip__count {
    display: inline-block;
    min-width: 20px;
    padding: 3px 6px;
    border-radius: 999px;
    background: #b3261e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rs-chip--admin { position: relative; gap: 7px; }
.rs-chip__count--menu { margin-left: auto; }
.dropdown-item:has(> .rs-chip__count--menu) { display: flex; align-items: center; }
.rs-chip__count--pub { margin-left: 4px; vertical-align: 1px; }

/* The moon shows in light mode (click for dark), the sun in dark mode. */
.rs-show-dark { display: none !important; }
[data-bs-theme="dark"] .rs-show-dark { display: inline-block !important; }
[data-bs-theme="dark"] .rs-show-light { display: none !important; }

.rs-appbar .dropdown { position: relative; }

.rs-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    max-height: calc(100vh - var(--rs-appbar-h) - 16px);
    overflow-y: auto;
    min-width: 240px;
    padding: 6px;
    border-radius: var(--rs-radius) !important;
    font-size: 14px;
}

.rs-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
}

.rs-menu .dropdown-item i { color: var(--rs-muted); }

.rs-menu__who {
    padding: 8px 10px 6px;
    font-weight: 700;
    color: var(--rs-text);
}

.rs-menu__label {
    padding: 2px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rs-muted);
}

.rs-menu__themes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 0 6px 4px;
}

.rs-menu__themes button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid var(--rs-border) !important;
    border-radius: 8px;
    background: var(--rs-surface);
    color: var(--rs-text-2);
    font-size: 12px;
    cursor: pointer;
}

.rs-menu__themes button:hover { background: var(--rs-surface-2); }

/* Whichever mode is actually in force is highlighted. "Device" lights up
   only when no choice has been stored. */
[data-rs-theme-source="chosen"][data-bs-theme="light"] .rs-menu__themes [data-rs-theme-set="light"],
[data-rs-theme-source="chosen"][data-bs-theme="dark"] .rs-menu__themes [data-rs-theme-set="dark"],
[data-rs-theme-source="device"] .rs-menu__themes [data-rs-theme-set="auto"] {
    border-color: var(--rs-accent) !important;
    color: var(--rs-accent-text);
    background: var(--rs-accent-soft);
}

@media (max-width: 900px) {
    .rs-nav__link span { display: none; }
    .rs-nav__link { padding: 8px 10px; }
    .rs-nav__link i { font-size: 17px; }
}

.rs-menu__mnav { display: none; }

/* Phone width: the nav links move into the account menu (rs-menu__mnav)
   rather than scrolling sideways half-hidden in the bar. */
@media (max-width: 560px) {
    .rs-appbar__inner { gap: 8px; padding: 0 12px; }
    .rs-nav { display: none; }
    .rs-menu__mnav { display: block; }
    .rs-chip--admin span { display: none; }
    .rs-chip--admin { width: 38px; padding: 0; justify-content: center; }
    /* Icon-only on a phone: the count rides the corner instead. */
    .rs-chip--admin > .rs-chip__count { position: absolute; top: -5px; right: -5px; min-width: 18px; padding: 2px 5px; font-size: 10px; box-shadow: 0 0 0 2px var(--rs-surface, #fff); }
}

@media (max-width: 360px) {
    .rs-brand__name { display: none; }
}

@media print {
    .rs-appbar { display: none !important; }
}


/* 4. Page title block ====================================================== */
/* Every owners and admin page opens with one of these, carried over from
   when each page had a 150px stock photo behind a white, drop-shadowed
   title. The markup is untouched -- it is restyled here into a plain,
   left-aligned heading that lines up with the Bootstrap .container below
   it, with a small eyebrow naming the area the page belongs to. */

html[data-bs-theme] .bannerProp,
html[data-bs-theme] .bannerPool,
html[data-bs-theme] .bannerLand,
html[data-bs-theme] .bannerTech {
    background: none !important;
    height: auto !important;
    min-height: 0 !important;
    text-align: left;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 12px 0;
}

@media (min-width: 576px)  { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 540px; } }
@media (min-width: 768px)  { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 720px; } }
@media (min-width: 992px)  { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 960px; } }
@media (min-width: 1200px) { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 1140px; } }
@media (min-width: 1400px) { html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) { max-width: 1320px; } }

html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) .titleText {
    display: block;
    padding: 0 0 18px !important;
    margin: 0;
    text-align: left !important;
    color: var(--rs-text) !important;
    text-shadow: none !important;
    font-family: var(--rs-font) !important;
    font-size: clamp(26px, 3.2vw, 34px) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    line-height: 1.15;
    border-bottom: 1px solid var(--rs-border);
}

/* A title nested inside a title (admin election-proxies.php) must not
   draw a second rule or a second eyebrow. */
html[data-bs-theme] .titleText .titleText {
    padding: 0 !important;
    border: 0;
    font-size: inherit !important;
}
html[data-bs-theme] .titleText .titleText::before { content: none !important; }

html[data-bs-theme] :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) > .titleText::before {
    content: "Owners area";
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rs-accent-text);
}

html[data-bs-theme] body:has(.rs-appbar[data-rs-area="admin"]) :is(.bannerProp, .bannerPool, .bannerLand, .bannerTech) > .titleText::before {
    content: "Administration";
    color: var(--rs-danger);
}


/* 5. Page toolbar and footer ============================================== */
/* .menuButtons were fixed 250px-wide slabs in five different Bootstrap
   colours. They are page actions ("Import Roster", "Voting", ...), so
   they now read as one quiet row of buttons under the title. Navigation
   that every page repeated (Return Home, Back to Admin, Back to Menu)
   moved into the app bar. */

html[data-bs-theme] .btnContainer:has(> .menuButtons) {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    margin: 16px 0 8px;
}

/* A button row whose only buttons were the ones the app bar replaced. */
html[data-bs-theme] .btnContainer:not(:has(*)) {
    display: none;
}

html[data-bs-theme] .menuButtons {
    width: auto !important;
    height: auto;
    margin: 0 !important;
    padding: 7px 14px !important;
    flex: 0 0 auto !important;
    border: 1px solid var(--rs-border) !important;
    border-radius: var(--rs-radius-sm) !important;
    background: var(--rs-surface) !important;
    color: var(--rs-text) !important;
    font-family: var(--rs-font);
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: var(--rs-shadow-sm);
    transition: background-color .12s ease, border-color .12s ease;
}

html[data-bs-theme] .menuButtons:hover {
    background: var(--rs-surface-2) !important;
    border-color: var(--rs-border-strong) !important;
}

/* The one red-outline action (Citation Review Queue) keeps its warning. */
html[data-bs-theme] .menuButtons.btn-danger,
html[data-bs-theme] .menuButtons.btn-outline-danger {
    color: var(--rs-danger) !important;
}

html[data-bs-theme] .copyright {
    position: relative;
    height: auto !important;
    margin-top: 48px !important;
    padding: 22px 16px 26px;
    background: var(--rs-surface) !important;
    border-image: linear-gradient(to bottom, var(--rs-border) 1px, var(--rs-surface) 1px) fill 0 / 0 / 0 100vmax;
    text-align: center;
    font-family: var(--rs-font);
}


html[data-bs-theme] .copyright .copyText {
    color: var(--rs-text-2) !important;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px;
    padding: 0;
    line-height: 1.4;
}

html[data-bs-theme] .copyright .copySubText {
    color: var(--rs-muted) !important;
    font-size: 12px;
    margin: 0;
    line-height: 1.4;
}


/* 6. Owners area in dark mode ============================================= */

[data-bs-theme="dark"] .mainContent,
[data-bs-theme="dark"] .policyDoc,
[data-bs-theme="dark"] .bookingWidget,
[data-bs-theme="dark"] .user-form-container,
[data-bs-theme="dark"] .transparentBackground,
[data-bs-theme="dark"] .transparentBackgroundNews,
[data-bs-theme="dark"] .homeBackground,
[data-bs-theme="dark"] .aboutBackground,
[data-bs-theme="dark"] .linkContainerBG,
[data-bs-theme="dark"] .tableBackground,
[data-bs-theme="dark"] .prospectiveBG,
[data-bs-theme="dark"] .covIntro,
[data-bs-theme="dark"] .covToc {
    background-color: var(--rs-surface) !important;
    color: var(--rs-text);
}

html[data-bs-theme] .mainContent,
html[data-bs-theme] .policyDoc {
    border: 1px solid var(--rs-border);
    box-shadow: var(--rs-shadow-sm);
}

[data-bs-theme="dark"] .responsive-example .card {
    background-color: var(--rs-surface);
    border-color: var(--rs-border);
    color: var(--rs-text);
    box-shadow: var(--rs-shadow-sm);
}

[data-bs-theme="dark"] a.menuLinks:hover .card,
[data-bs-theme="dark"] a.menuLinks:focus-visible .card {
    border-color: var(--rs-accent);
    box-shadow: var(--rs-shadow);
}

html[data-bs-theme] a.menuLinks:hover .card,
html[data-bs-theme] a.menuLinks:focus-visible .card {
    border-color: var(--rs-accent);
}


/* owners/menu.php: the welcome card and the tile section headings. */
.rsMenuHero {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--rs-shadow);
}

.rsMenuSection .menuGroupHeading {
    max-width: calc(var(--tileCols, 5) * 15rem);
    margin: 36px auto 0;
    padding: 0 1rem;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rs-muted);
}

.rsMenuSection .responsive-example { margin-top: 12px; }
.rsMenuSection a.menuLinks { display: block; }

html[data-bs-theme] .responsive-example .card {
    min-height: 196px;
    border-radius: var(--rs-radius);
}

@media (max-width: 900px) {
    .rsMenuSection .menuGroupHeading { max-width: 100%; }
}
[data-bs-theme="dark"] .responsive-example .card-title { color: var(--rs-text); }
[data-bs-theme="dark"] .responsive-example .card-text { color: var(--rs-muted); }

[data-bs-theme="dark"] h5 { color: var(--rs-muted); }
/* style.css paints every .card-title black in Verdana. */
html[data-bs-theme] .card-title { font-family: var(--rs-font); }
[data-bs-theme="dark"] .card-title { color: var(--rs-text); }
[data-bs-theme="dark"] .email,
[data-bs-theme="dark"] .fob-link,
[data-bs-theme="dark"] .disclaimer { color: var(--rs-accent-text); }
[data-bs-theme="dark"] .emphasis,
[data-bs-theme="dark"] .bg,
[data-bs-theme="dark"] .item .ownerLink h4 { color: var(--rs-text); }
[data-bs-theme="dark"] .policyDoc h3 { color: var(--rs-accent-text); }
[data-bs-theme="dark"] .policyMeta,
[data-bs-theme="dark"] .bookingHeader p,
[data-bs-theme="dark"] .calLegend,
[data-bs-theme="dark"] .summaryPlaceholder { color: var(--rs-muted); }
[data-bs-theme="dark"] .ownerMenuHome:hover { color: var(--rs-text); text-shadow: none; }

[data-bs-theme="dark"] .pdfDownloadLink,
[data-bs-theme="dark"] .calNavBtn {
    background: var(--rs-surface-2);
    color: var(--rs-accent-text);
    border-color: var(--rs-border-strong);
}
[data-bs-theme="dark"] .pdfDownloadLink:hover,
[data-bs-theme="dark"] .calNavBtn:hover { background: var(--rs-surface-3); }

[data-bs-theme="dark"] .rateBadge { background: var(--rs-ok-soft); color: var(--rs-ok); }
[data-bs-theme="dark"] .calMonth,
[data-bs-theme="dark"] .bookingSummary { border-color: var(--rs-border); }
[data-bs-theme="dark"] .calDay { color: var(--rs-text-2); }
[data-bs-theme="dark"] .calDay.isPast { color: #4b5860; }
[data-bs-theme="dark"] .calDay.isBooked { background: var(--rs-danger-soft); color: var(--rs-danger); }
[data-bs-theme="dark"] .calDay.isAvailable:hover { background: var(--rs-ok-soft); }
[data-bs-theme="dark"] .calDay.inRange { background: rgba(127, 212, 154, .22); }
[data-bs-theme="dark"] .summaryDates { background: var(--rs-surface-2); }
[data-bs-theme="dark"] .priceRow { color: var(--rs-text-2); }
[data-bs-theme="dark"] .priceRow.total { color: var(--rs-text); border-color: var(--rs-border); }
[data-bs-theme="dark"] .clearDatesLink { color: var(--rs-accent-text); }
[data-bs-theme="dark"] .bookBtnLarge:disabled { background: var(--rs-surface-3); color: var(--rs-muted); }

[data-bs-theme="dark"] .clubClosedNotice { background: var(--rs-warn-soft); color: var(--rs-text); }
[data-bs-theme="dark"] .clubClosedPhone,
[data-bs-theme="dark"] .clubClosedEmail { color: var(--rs-ok); }

[data-bs-theme="dark"] .miniMapPlaceholder { background: var(--rs-surface-2); border-color: var(--rs-border-strong); color: var(--rs-muted); }
[data-bs-theme="dark"] .covArbitrationNotice { background: var(--rs-warn-soft); }
[data-bs-theme="dark"] .card-body svg,
[data-bs-theme="dark"] legend,
[data-bs-theme="dark"] .thankyou { color: var(--rs-accent-text); }
[data-bs-theme="dark"] .leadEmp { background: var(--rs-warn-soft); }
[data-bs-theme="dark"] .vTitle { background: var(--rs-surface); color: var(--rs-text); }
[data-bs-theme="dark"] .vehBorder { border-color: var(--rs-border-strong); }
[data-bs-theme="dark"] .userNotificationTextRed { color: var(--rs-danger); }
[data-bs-theme="dark"] mark.covHit { background: rgba(255, 214, 90, .35); color: inherit; }


/* profile.php ("My Contact Details") drawn inside the owners area. Its
   form still carries the public page's classes (style.css), so the loud
   red-on-yellow notice, the heavy fieldset and the floating labels that
   sat on the column edge are calmed down here, scoped to this page. */
.rsProfileCard .leadEmp {
    background: var(--rs-surface-2);
    border-left: 3px solid var(--rs-accent);
    border-radius: 8px;
    color: var(--rs-muted) !important;
    font-size: 14px;
    text-indent: 0;
    padding: 10px 14px;
}

.rsProfileCard fieldset {
    border: 1px solid var(--rs-border) !important;
    border-radius: var(--rs-radius);
    padding: 12px 16px 6px;
    margin: 18px 0 10px;
}

.rsProfileCard legend {
    float: none;
    width: auto;
    padding: 0 8px;
    margin: 0;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rs-muted) !important;
}

.rsProfileCard .form-floating > label {
    left: calc(var(--bs-gutter-x) * .5);
    padding: 1rem .75rem;
    color: var(--rs-muted) !important;
    font-size: 14px;
}

.rsProfileCard .form-floating > .form-control {
    border-radius: var(--rs-radius-sm);
}

.rsProfileCard label[for="owner"],
.rsProfileCard .form-check-label { color: var(--rs-text-2) !important; }

.rsProfileCard .btnUpdateDelete { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }

.rsProfileCard .btnUpdateDelete .btn-danger {
    background: var(--rs-surface);
    border-color: var(--rs-border-strong);
    color: var(--rs-text);
}

.rsProfileCard .btnUpdateDelete .btn-danger:hover { background: var(--rs-surface-2); }

/* Covenants & By-Laws (owners/covenants.php, style.css .cov*): the table
   of contents, headings and document body were fixed dark ink and
   #0a58ca link blue, which all but disappear on a dark page. */
[data-bs-theme="dark"] :is(.covIntro, .covSearchBox, .covToc) { border-color: var(--rs-border); }
[data-bs-theme="dark"] .covToc h4 { color: var(--rs-muted); }
[data-bs-theme="dark"] .covToc a { color: var(--rs-accent-text); }
[data-bs-theme="dark"] .covToc a:hover { color: var(--rs-accent-hover); }
[data-bs-theme="dark"] .covDisclaimer { color: var(--rs-muted); }
[data-bs-theme="dark"] .covDocument { color: var(--rs-text-2); }
[data-bs-theme="dark"] .covDocTitle span,
[data-bs-theme="dark"] .covArticle h2 .covArtTitle { color: var(--rs-muted); }
[data-bs-theme="dark"] .covArticle strong { color: var(--rs-text); }
[data-bs-theme="dark"] .covDocTitle2 { border-top-color: var(--rs-border); }
[data-bs-theme="dark"] .covArbitrationNotice { border-color: rgba(243, 196, 107, .3); }
[data-bs-theme="dark"] kbd { background: var(--rs-surface-3); color: var(--rs-text); box-shadow: inset 0 -1px 0 var(--rs-border-strong); }

/* Plain in-text links (no class of their own) that a page stylesheet
   pinned to a light-mode blue (#0a58ca, #2163BA, "blue"...). Links that
   carry a class -- buttons, nav, tiles, dashboard cards -- are styled on
   purpose and are left alone. */
[data-bs-theme="dark"] a:not([class]) { color: var(--rs-accent-text); }
[data-bs-theme="dark"] a:not([class]):hover { color: var(--rs-accent-hover); }

/* 7. Admin area in dark mode ============================================== */
/* admin.css already runs on its own custom properties; re-pointing them
   converts the sidebar, the dashboard and most admin chrome at once. */

html[data-bs-theme] {
    --color-background: var(--rs-bg);
    --color-white: var(--rs-surface);
    --color-dark: var(--rs-text);
    --color-dark-variant: var(--rs-muted);
    --color-info-dark: var(--rs-muted);
    --color-info-light: var(--rs-border);
    --color-primary: var(--rs-accent);
    --color-light: var(--rs-accent-soft);
    --box-shadow: var(--rs-shadow-sm);
}

[data-bs-theme="dark"] .main .insights h3,
[data-bs-theme="dark"] .formatTotalNumbers { color: var(--rs-text); }
[data-bs-theme="dark"] .main .links .adminTables th { border-bottom-color: var(--rs-border-strong); }
[data-bs-theme="dark"] .main .links .adminTables td { border-bottom-color: var(--rs-border); }
[data-bs-theme="dark"] .containerBG { background-color: var(--rs-bg); }
[data-bs-theme="dark"] .link-form-container { background-color: var(--rs-surface); border-color: var(--rs-border); }
[data-bs-theme="dark"] label { color: var(--rs-text-2); }
[data-bs-theme="dark"] .meetingFileLabel,
[data-bs-theme="dark"] .meetingLabel,
[data-bs-theme="dark"] .viewAdminHome { color: var(--rs-accent-text); }
[data-bs-theme="dark"] .meetingNotes,
[data-bs-theme="dark"] .question textarea { background: var(--rs-surface); color: var(--rs-text); border-color: var(--rs-border-strong); }
[data-bs-theme="dark"] .speedBtn { color: var(--rs-text); border-color: var(--rs-border-strong); }

[data-bs-theme="dark"] .statGreen  { background-color: var(--rs-ok-soft);     border-color: rgba(127, 212, 154, .3); }
[data-bs-theme="dark"] .statYellow { background-color: var(--rs-warn-soft);   border-color: rgba(243, 196, 107, .3); }
[data-bs-theme="dark"] .statRed    { background-color: var(--rs-danger-soft); border-color: rgba(242, 139, 130, .3); }
[data-bs-theme="dark"] .statGreen .statNumber  { color: var(--rs-ok); }
[data-bs-theme="dark"] .statYellow .statNumber { color: var(--rs-warn); }
[data-bs-theme="dark"] .statRed .statNumber    { color: var(--rs-danger); }

[data-bs-theme="dark"] .nextRentalAlert { background: var(--rs-ok-soft); border-color: rgba(127, 212, 154, .25); }
[data-bs-theme="dark"] .nextRentalEmpty { background: var(--rs-surface-2); border-color: var(--rs-border); color: var(--rs-muted); }
[data-bs-theme="dark"] .nextRentalStreet,
[data-bs-theme="dark"] .nextRentalMeta,
[data-bs-theme="dark"] .bmStreet,
[data-bs-theme="dark"] .miniMapCaption { color: var(--rs-muted); }
[data-bs-theme="dark"] .clubCalWrap { background: var(--rs-surface); }
[data-bs-theme="dark"] .bmActionBlock { border-top-color: var(--rs-border); }
[data-bs-theme="dark"] .calDay.isPendingBooking { background: var(--rs-warn-soft); color: var(--rs-warn); }
[data-bs-theme="dark"] .calDay.hasCommunityEvent { background: var(--rs-info-soft); color: #9cc3ee; }
[data-bs-theme="dark"] .calDay.hasAssociationMeeting { background: var(--rs-ok-soft); color: var(--rs-ok); }
[data-bs-theme="dark"] .calDay.hasHold { background: var(--rs-surface-3); color: var(--rs-text-2); }

/* The admin dashboard's left-hand menu is styled with the menu itself,
   in admin/pages/includes/admin-nav.php; its column is in admin.css. */


/* Tables. Admin lists were painted whole in Bootstrap's table-warning
   (yellow) or table-info (cyan) with Verdana headers. One neutral look in
   both modes now: plain surface rows, faint zebra striping, and a small
   uppercase header row. */
html[data-bs-theme] .table {
    --bs-table-bg: var(--rs-surface);
    --bs-table-color: var(--rs-text);
    --bs-table-border-color: var(--rs-border);
    --bs-table-striped-bg: var(--rs-surface-2);
    --bs-table-striped-color: var(--rs-text);
    --bs-table-hover-bg: var(--rs-surface-3);
    --bs-table-hover-color: var(--rs-text);
    --bs-table-active-bg: var(--rs-surface-3);
    --bs-table-active-color: var(--rs-text);
    border-color: var(--rs-border);
}

html[data-bs-theme] .table > thead th,
html[data-bs-theme] .table > thead td {
    --bs-table-bg: var(--rs-surface-2);
    --bs-table-bg-state: var(--rs-surface-2);
    color: var(--rs-muted) !important;
    font-family: var(--rs-font) !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--rs-border-strong) !important;
}

html[data-bs-theme] .viewTables td,
html[data-bs-theme] .viewTables th {
    font-family: var(--rs-font);
    font-size: 14px;
}


/* In-page help panels (classes/Help.php draws these with its own inline
   <style>, light colours only). */
[data-bs-theme="dark"] .help-panel { background: var(--rs-surface); border-color: var(--rs-border); border-left-color: var(--rs-accent); }
[data-bs-theme="dark"] .help-panel > summary { color: var(--rs-text); }
[data-bs-theme="dark"] .help-panel > summary:hover { background: var(--rs-surface-2); }
[data-bs-theme="dark"] .help-body { color: var(--rs-text-2); }
[data-bs-theme="dark"] .help-watch { background: var(--rs-warn-soft); }
[data-bs-theme="dark"] .help-related,
[data-bs-theme="dark"] .help-more { color: var(--rs-muted); }
[data-bs-theme="dark"] .help-open { color: var(--rs-accent-text); }

/* 8. Dark-mode safety nets ================================================= */
/* Page markup is full of inline white / near-white backgrounds and dark
   text that were never meant to be themed. These catch the common
   spellings so dark mode does not show white slabs with invisible text. */

[data-bs-theme="dark"] .bg-white,
[data-bs-theme="dark"] .bg-body { background-color: var(--rs-surface) !important; }
[data-bs-theme="dark"] .bg-light { background-color: var(--rs-surface-2) !important; }
[data-bs-theme="dark"] .text-dark:not(.badge):not(.btn) { color: var(--rs-text) !important; }
/* A light badge goes dark above, so its dark text must flip too (other .text-dark badges sit on coloured fills and stay dark). */
[data-bs-theme="dark"] .badge.bg-light.text-dark { color: var(--rs-text) !important; }
[data-bs-theme="dark"] .text-black,
[data-bs-theme="dark"] .text-black-50 { color: var(--rs-text-2) !important; }
[data-bs-theme="dark"] .table-light {
    --bs-table-bg: var(--rs-surface-2);
    --bs-table-color: var(--rs-text);
    --bs-table-border-color: var(--rs-border);
}
[data-bs-theme="dark"] .card { --bs-card-bg: var(--rs-surface); --bs-card-cap-bg: var(--rs-surface-2); }

[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background:#ffffff"],
[data-bs-theme="dark"] [style*="background: #ffffff"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background:white"],
[data-bs-theme="dark"] [style*="background: white"],
[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="background-color:white"],
[data-bs-theme="dark"] [style*="background:#f8f9fa"],
[data-bs-theme="dark"] [style*="background: #f8f9fa"],
[data-bs-theme="dark"] [style*="background:#fafafa"],
[data-bs-theme="dark"] [style*="background: #fafafa"],
[data-bs-theme="dark"] [style*="background:#f5f5f5"],
[data-bs-theme="dark"] [style*="background: #f5f5f5"],
[data-bs-theme="dark"] [style*="background:#f7f7f7"],
[data-bs-theme="dark"] [style*="background:#f6f7f9"],
[data-bs-theme="dark"] [style*="background:#eef4fb"],
[data-bs-theme="dark"] [style*="background: #eef4fb"] {
    background-color: var(--rs-surface-2) !important;
    color: var(--rs-text) !important;
}

[data-bs-theme="dark"] [style*="color:#333"],
[data-bs-theme="dark"] [style*="color: #333"],
[data-bs-theme="dark"] [style*="color:#222"],
[data-bs-theme="dark"] [style*="color: #222"],
[data-bs-theme="dark"] [style*="color:#000"],
[data-bs-theme="dark"] [style*="color: #000"],
[data-bs-theme="dark"] [style*="color:black"],
[data-bs-theme="dark"] [style*="color: black"],
[data-bs-theme="dark"] [style*="color:#1b3a5c"],
[data-bs-theme="dark"] [style*="color: #1b3a5c"],
[data-bs-theme="dark"] [style*="color:#212529"],
[data-bs-theme="dark"] [style*="color:darkblue"] {
    color: var(--rs-text) !important;
}

[data-bs-theme="dark"] [style*="color:#555"],
[data-bs-theme="dark"] [style*="color: #555"],
[data-bs-theme="dark"] [style*="color:#666"],
[data-bs-theme="dark"] [style*="color: #666"],
[data-bs-theme="dark"] [style*="color:#444"],
[data-bs-theme="dark"] [style*="color: #444"],
[data-bs-theme="dark"] [style*="color:#5a6472"] {
    color: var(--rs-muted) !important;
}



/* 9. Public site nav bar (includes/header.php) ============================ */
/* Light values only. The public site's dark mode (September 2026) lives in
   assets/css/public-dark.css, keyed off html[data-rs-pub-theme="dark"]. */

.rs-pubnav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid #e3e8ec;
    font-family: var(--rs-font);
    padding: 0;
}

.rs-pubnav .container-fluid {
    max-width: 1320px;
    min-height: var(--rs-appbar-h);
    padding: 0 16px;
}

/* Sized to match the owners/admin app bar (.rs-appbar above) exactly, so
   the bar does not jump when you cross between the public site and the
   owners area: same height, same 34px mark, same 16px name, same 14px
   links, same 20px brand-to-links gap. Change one, change both. */
.rs-pubnav .navbar-brand { padding: 0; margin-right: 20px; }
.rs-pubnav .rs-brand__name { color: #17232b; }

.rs-pubnav .navbar-nav { gap: 2px; }

.rs-pubnav .nav-link {
    padding: 7px 11px !important;
    border-radius: 8px;
    color: #4a5963 !important;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}

.rs-pubnav .nav-link:hover,
.rs-pubnav .nav-link:focus-visible {
    color: #17232b !important;
    background: #f0f3f5;
}

.rs-pubnav .nav-link.is-active {
    color: #17605c !important;
    background: #e2f1ef;
}

.rs-pubnav .rs-pubnav__owners { color: #17605c !important; font-weight: 600; }
.rs-pubnav .rs-pubnav__admin { color: #b3261e !important; font-weight: 600; }

.rs-pubnav .dropdown-menu {
    border: 1px solid #e3e8ec;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(16, 24, 32, .1);
    padding: 6px;
}

.rs-pubnav .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 14px;
}

.rs-pubnav .dropdown-item i { width: 18px; color: #66747e; text-align: center; }

.rs-pubnav__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rs-pubnav__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid #d3dbe1;
    color: #17232b !important;
    background: #fff;
}

.rs-pubnav__btn:hover { background: #f0f3f5; }

@media (min-width: 1200px) {
    .rs-pubnav__btn--icon { width: 38px; padding: 0; justify-content: center; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .rs-pubnav .nav-link { padding: 7px 9px !important; }
}

.rs-pubnav__btn--primary {
    border-color: #1f6f6b;
    background: #1f6f6b;
    color: #fff !important;
}

.rs-pubnav__btn--primary:hover { background: #175855; border-color: #175855; }

.rs-pubnav .navbar-toggler {
    border: 1px solid #d3dbe1;
    border-radius: 10px;
    padding: 6px 10px;
}

.rs-pubnav .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(31, 111, 107, .25); }

@media (max-width: 1199.98px) {
    .rs-pubnav .navbar-collapse { padding: 8px 0 14px; }
    .rs-pubnav__actions { margin-top: 8px; flex-wrap: wrap; }
}

/* Public page cards and headings (style.css). Scoped to pages WITHOUT the
   theme attribute, i.e. the public site only. The steelblue / navy title
   slabs become plain large type on a frosted white card over the photo. */
html:not([data-bs-theme]) :is(.homeBackground, .aboutBackground, .transparentBackground, .prospectiveBG, .tableBackground, .linkContainerBG) {
    background-color: rgba(255, 255, 255, .93);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(16, 24, 32, .18);
    border: 1px solid rgba(255, 255, 255, .6);
}

html:not([data-bs-theme]) :is(.banner, .proBanner) {
    background: none;
    color: #17232b;
    font-family: var(--rs-font);
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.15;
    font-size: clamp(26px, 3.4vw, 38px);
    padding: 10px 0 4px;
    margin-bottom: 12px;
}

html:not([data-bs-theme]) .proBanner { font-size: clamp(22px, 2.6vw, 30px); }

html:not([data-bs-theme]) .contactBanner {
    height: auto;
    padding: 14px 0 6px;
    background: none;
    color: #17232b;
    font-family: var(--rs-font);
    font-weight: 750;
    letter-spacing: -.02em;
    font-size: clamp(26px, 3.4vw, 36px);
}

html:not([data-bs-theme]) :is(.homeText, .aboutText) {
    text-align: left;
    text-indent: 0;
    font-weight: 400;
    color: #3a4852;
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.55;
}

html:not([data-bs-theme]) .vidlink {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 20px;
    border-radius: 999px;
    background: #1f6f6b;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

html:not([data-bs-theme]) .vidlink:hover { background: #175855; color: #fff; }
html:not([data-bs-theme]) .vidlink img { width: 26px; filter: invert(1); }
html:not([data-bs-theme]) .copyright {
    height: auto;
    padding: 16px 16px 18px;
    text-align: center;
}

html:not([data-bs-theme]) .thankyou { color: #1f6f6b; font-size: 2rem; margin-top: 8px; }

/* Public-page typography (September 2026). style.css mixed Verdana,
   Poppins and the system font on the same page, set body copy at 1.2rem
   with a fixed 24px line height, and let links fall back to a smaller
   size than the sentence around them. One family, one body size, one
   rhythm. The cursive "Thank you for visiting" keeps its script face. */
html:not([data-bs-theme]) body {
    font-family: var(--rs-font);
    color: #17232b;
}

html:not([data-bs-theme]) body :is(p, a, li, td, th, label, span, div, h1, h2, h3, h4, h5, h6, button, input, select, textarea, small, strong, em, legend, .btn) {
    font-family: var(--rs-font);
}

html:not([data-bs-theme]) body .thankyou { font-family: 'Petit Formal Script', cursive; }

html:not([data-bs-theme]) :is(p, li, td, th, label, h1, h2, h3, h4, h5, h6) a { font-size: inherit; }

html:not([data-bs-theme]) :is(.mngText, .proPara p, .lastPara, .aboutText) {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    color: #2b3a44;
}

html:not([data-bs-theme]) .indent { text-indent: 0; margin-bottom: 18px; }

html:not([data-bs-theme]) :is(.transparentBackground, .prospectiveBG, .tableBackground) :is(h4, h5) {
    font-size: 19px;
    font-weight: 650;
    color: #17232b;
    margin: 22px 0 6px;
}

html:not([data-bs-theme]) .proTop {
    font-size: 18px;
    line-height: 1.5;
    color: #4a5963;
    margin-bottom: 2px;
}

html:not([data-bs-theme]) .banner.schText { font-size: clamp(24px, 2.8vw, 32px); }

/* Buttons: one accent (the river teal of the nav bar) instead of
   Bootstrap blue next to Bootstrap cyan next to Bootstrap green. */
html:not([data-bs-theme]) :is(.btn-primary, .btn-success) {
    --bs-btn-bg: #1f6f6b;
    --bs-btn-border-color: #1f6f6b;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #175855;
    --bs-btn-hover-border-color: #175855;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #175855;
    --bs-btn-active-border-color: #175855;
}

html:not([data-bs-theme]) .btn-info {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #c7d0d7;
    --bs-btn-color: #17232b;
    --bs-btn-hover-bg: #f0f3f5;
    --bs-btn-hover-border-color: #b3bec6;
    --bs-btn-hover-color: #17232b;
    --bs-btn-active-bg: #e7ecef;
    color: #17232b !important;
}

html:not([data-bs-theme]) :is(.btn-primary, .btn-success, .btn-info) {
    border-radius: 999px;
    padding: 9px 20px;
    font-weight: 600;
    font-size: 15px;
}

/* Tables on public pages (the schools list, the local services list):
   neutral rows with a small uppercase header, not a cyan slab. */
html:not([data-bs-theme]) .table {
    --bs-table-bg: #fff;
    --bs-table-striped-bg: #f6f8f9;
    --bs-table-hover-bg: #eef2f4;
    --bs-table-border-color: #e3e8ec;
    --bs-table-color: #17232b;
    --bs-table-striped-color: #17232b;
    --bs-table-hover-color: #17232b;
    border-radius: 12px;
    overflow: hidden;
    font-size: 15px;
}

html:not([data-bs-theme]) .table > thead :is(th, td) {
    --bs-table-bg: #f1f4f6;
    color: #66747e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

html:not([data-bs-theme]) .table a { font-size: inherit; font-weight: 600; color: #17605c; }


html:not([data-bs-theme]) {
    --bs-link-color: #17605c;
    --bs-link-color-rgb: 23, 96, 92;
    --bs-link-hover-color: #0f4643;
    --bs-link-hover-color-rgb: 15, 70, 67;
}

/* News & Events cards. news.css -- which the public header loads on every
   public page -- paints EVERY .card grey with a 2px pure-blue border.
   Plain surface cards instead, in both the public page and the owners
   version of news.php. */
.card.flex_item,
html:not([data-bs-theme]) .card {
    background-color: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius);
    box-shadow: var(--rs-shadow-sm);
}

.card.flex_item { overflow: hidden; }
.card.flex_item .card-title { font-weight: 650; font-size: 18px; margin-bottom: 2px; }
.card.flex_item .card-text { color: var(--rs-text-2); }
.card.flex_item .text-muted { margin-left: 0 !important; padding-left: 16px; }

.rsNewsList { padding-top: 22px; }
.rsNewsList .flex_row { justify-content: flex-start; gap: 16px; }
.rsNewsList .flex_item { width: calc((100% - 32px) / 3) !important; margin: 0; }
.rsNewsList .nothing_found { background: var(--rs-surface-2); border-radius: var(--rs-radius); font-size: 18px; color: var(--rs-muted); }

@media (max-width: 980px) { .rsNewsList .flex_item { width: calc((100% - 16px) / 2) !important; } }
@media (max-width: 700px) { .rsNewsList .flex_item { width: 100% !important; } }

html:not([data-bs-theme]) .banner_news {
    width: fit-content;
    margin: 24px auto 4px;
    padding: 10px 28px;
    background: rgba(255, 255, 255, .93);
    color: #17232b;
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(16, 24, 32, .18);
    font-family: var(--rs-font);
    font-weight: 750;
    letter-spacing: -.02em;
    font-size: clamp(24px, 3vw, 32px);
}

html:not([data-bs-theme]) .managementBackground { min-height: calc(100vh - 64px); }

html:not([data-bs-theme]) .linkContainerBG {
    max-width: 1140px;
    margin: 40px auto;
    padding: 12px 24px 20px;
}

/* The River Shoals mark has a light and a dark version (Sept 2026, option
   6C). The app bars carry both images; show the one that matches the page
   theme. The public nav bar carries both too; its dark mode puts
   data-bs-theme="dark" on <body>, which these rules also match. */
.rs-brand__mark--dark { display: none !important; }
[data-bs-theme="dark"] .rs-brand__mark--light { display: none !important; }
[data-bs-theme="dark"] .rs-brand__mark--dark { display: block !important; }