.flex-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}  /*   flex-wrap: wrap; */

.container {
   position: relative;
   /*left: calc((100vw - 100%) / 2); not sure what it was for */
}

.dropdown-item:active {background-color: grey !important;} /* added for home menu (was blue) */

/* Light mode styles */
[data-bs-theme="light"] body {
    background-color: #ffffff;
    color: #212529;
}

[data-bs-theme="light"] .anvoy-navbar-bg {
    background-color: #343a40 !important;
}

/* Dark mode styles */
[data-bs-theme="dark"] body {
    background-color: #1a1d20;
    color: #e9ecef;
}

[data-bs-theme="dark"] .anvoy-navbar-bg {
    background-color: #343a40 !important;
}

/* Smooth transitions */
body, .anvoy-navbar-bg {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Card styling for dark mode  #14b068 */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .border {
    background-color: #2d3035;
    border-color: #495057;
}
[data-bs-theme="light"] .card,
[data-bs-theme="light"] .border {
    background-color: #fafafa;
}

[data-bs-theme="light"] .cal-highlight-bg-blue {
    background-color: cyan;
}
[data-bs-theme="light"] .cal-highlight-bg-yellow {
    background-color: yellow;
}
[data-bs-theme="dark"] .cal-highlight-bg-blue {
    background-color: #0A2472;
}
[data-bs-theme="dark"] .cal-highlight-bg-yellow {
    background-color: #8B8000;
}

[data-bs-theme="light"] .dropdown-menu-dark {
    background-color: #2d3035;
    border-color: #495057;
}

[data-bs-theme="light"] .dropdown-item-dark {
    color: #e9ecef;
}

[data-bs-theme="light"] .dropdown-item-orange:hover,
[data-bs-theme="light"] .dropdown-item-orange:focus {
    background-color: #3d4146;
    color: #ffffff;
}

[data-bs-theme="light"] .dropdown-item-orange.active,
[data-bs-theme="light"] .dropdown-item-orange:active {
    background-color: #ffc107;
    color: #2d3035;
}

[data-bs-theme="light"] .dropdown-item-green:hover,
[data-bs-theme="light"] .dropdown-item-green:focus {
    background-color: #3d4146;
    color: #ffffff;
}

[data-bs-theme="light"] .dropdown-item-green.active,
[data-bs-theme="light"] .dropdown-item-green:active {
    background-color: #198754;
    color: #ffffff;
}

/* Dropdown menu styles - Dark Mode */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #2d3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .dropdown-item {
    color: #e9ecef;
}

[data-bs-theme="dark"] .dropdown-item-orange:hover,
[data-bs-theme="dark"] .dropdown-item-orange:focus {
    background-color: #3d4146;
    color: #ffffff;
}

[data-bs-theme="dark"] .dropdown-item-orange.active,
[data-bs-theme="dark"] .dropdown-item-orange:active {
    background-color: #ffc107;
    color: #2d3035;
}
[data-bs-theme="dark"] .dropdown-item-green:hover,
[data-bs-theme="dark"] .dropdown-item-green:focus {
    background-color: #3d4146;
    color: #ffffff;
}

[data-bs-theme="dark"] .dropdown-item-green.active,
[data-bs-theme="dark"] .dropdown-item-green:active {
    background-color: #198754;
    color: #ffffff;
}

[data-bs-theme="light"] .dropdown-divider {
    border-top: 1px solid #6c757d;
    opacity: 0.5;
}

[data-bs-theme="dark"] .dropdown-divider {
    border-top: 1px solid #6c757d;
    opacity: 0.5;
}

.anvoy-navbar-bg .text-success {
    color: #00a659 !important;
}

.min-w-0 {
  min-width: 0 !important;
}

img {
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
    height: auto;
}
/* Keep summernote editor white even in Dark Mode */
.note-editor.note-frame .note-editing-area .note-editable {
    background-color: #ffffff !important;
}

.toggle-content {
  max-height: 100px;
  overflow: hidden;
  /* Add a smooth transition for the max-height property */
  transition: max-height 0.5s ease-in-out; 
}

/* Class to be added by JavaScript when the element is expanded */
.toggle-content.is-open {
  /* Set a sufficiently large value that covers all possible content */
  max-height: none; 
}
/* Navbar sizing (see reference: colours must be --bs-* vars, not literals) */
.av-navbar-ctx { font-size: 1.12rem; }          /* centre "where you are" label */
.av-menu-switch { font-size: 0.92rem; }         /* Switch User / Switch Entity */

/* ============================================================
   Standard secondary nav strip (anvoy_subnav in anvoy-navbar.php).
   Full-width dark bar in BOTH themes (matches the main navbar); the
   items sit inside a .container. 'attach' strips are moved by JS into
   the fixed navbar wrapper so they butt against the main bar with no
   gap; the top spacer then sizes itself from the real rendered height.
   On phones an item WITH an icon stacks it above the label.
   ============================================================ */
/* STICKS UNDER THE FIXED BAR (Bob, 2026-09-03). The strip used to scroll away
   with the page, so the secondary menu was gone the moment you read past the
   first screen while the primary stayed put -- two menus behaving two ways.
   --av-top is the fixed bar's REAL measured height, published by the JS in
   navbar_render_main(); the 0px fallback keeps it sane before that runs.
   z-index sits under the bar (Bootstrap .fixed-top is 1030) and over the task
   bar (1020), which now offsets itself by --av-sub so the two stack rather
   than overlap.
   The color is unchanged and deliberate: #23272b is a shade under the bar. */
.av-subnav { background: #23272b; position: sticky; top: var(--av-top, 0px); z-index: 1025; }
/* the app strip is emitted from the footer and hidden until JS moves it into
   place (after the banner, or at the top of the content), so nothing jumps */
.av-subnav-attach { display: none; }
.av-subnav-attach.av-placed { display: block; }
.av-subnav > .container { position: relative; padding-left: 0; padding-right: 0; }
.av-subnav-scroll { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 2px; padding: 5px 8px; margin: 0; list-style: none; }
.av-subnav-scroll::-webkit-scrollbar { display: none; height: 0; }
.av-subnav .av-sn-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.72); border-radius: 9px; padding: .3rem .7rem; font-size: .9rem; white-space: nowrap; text-decoration: none; position: relative; }
.av-subnav .av-sn-link:hover { color: #fff; }
.av-subnav .av-sn-link.active { color: #fff; background: rgba(255,255,255,.18); }
.av-sn-badge { background: #ffc107; color: #212529; border-radius: 10px; font-size: .68rem; font-weight: 600; padding: 0 5px; vertical-align: 1px; }
.av-sn-badge:empty { display: none; }
/* The ONE notification pill (2026-08-21): small, yellow, hanging just below
   the label like the Mentor study-group tab badges. Values are capped at 99+
   by anvoy_notify_qty(); an empty pill hides itself. The !importants override
   Bootstrap's .badge sizing when both classes share an element, which is what
   keeps the section-dot JS (which looks for .badge) working unchanged. */
.av-notify { background: #ffc107 !important; color: #212529 !important; border-radius: 10px;
	font-size: .68rem !important; font-weight: 600; padding: 1px 5px !important;
	vertical-align: sub; line-height: 1.4; }
.av-notify:empty { display: none; }
.av-subnav-fade { position: absolute; top: 0; bottom: 0; width: 2.5rem; pointer-events: none; opacity: 0; transition: opacity .18s ease; display: flex; align-items: center; }
.av-subnav-fade-l { left: 0; justify-content: flex-start; background: linear-gradient(to left, rgba(35,39,43,0), #23272b); }
.av-subnav-fade-r { right: 0; justify-content: flex-end; background: linear-gradient(to right, rgba(35,39,43,0), #23272b); }
.av-subnav.more-left .av-subnav-fade-l, .av-subnav.more-right .av-subnav-fade-r { opacity: 1; }
/* chevrons are click-through unless their fade is actually shown -- an
   invisible chevron used to sit over the last menu item and eat its clicks */
.av-subnav-chev { pointer-events: none; cursor: pointer; color: #adb5bd; font-size: 1.4rem; line-height: 1; padding: 0 .3rem; }
.av-subnav.more-left .av-subnav-fade-l .av-subnav-chev, .av-subnav.more-right .av-subnav-fade-r .av-subnav-chev { pointer-events: auto; }
@media (max-width: 575.98px) {
  .av-subnav .av-sn-link.has-ico { flex-direction: column; gap: 1px; padding: .25rem .55rem; font-size: .72rem; line-height: 1.15; text-align: center; }
  .av-subnav .av-sn-link.has-ico .av-sn-badge { position: absolute; top: 1px; right: 2px; }
}

/* ============================================================
   THEME-AWARE CONTEXTUAL TABLES
   Bootstrap's .table-* variants hardcode a light-mode tint and
   near-black text, so a header or footer wearing one stays pale
   when data-bs-theme flips to dark. Re-point the table variables
   at the theme-aware ones; Bootstrap's own rules read these, so
   background, text and borders all follow the toggle.
   .table-dark is left alone -- it is already dark in both themes.
   ============================================================ */
.table-primary, .table-secondary, .table-success, .table-info,
.table-warning, .table-danger, .table-light {
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), .05);
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), .1);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), .075);
  --bs-table-hover-color: var(--bs-emphasis-color);
}
.table-primary   { --bs-table-bg: var(--bs-primary-bg-subtle); }
.table-secondary { --bs-table-bg: var(--bs-secondary-bg); }
.table-success   { --bs-table-bg: var(--bs-success-bg-subtle); }
.table-info      { --bs-table-bg: var(--bs-info-bg-subtle); }
.table-warning   { --bs-table-bg: var(--bs-warning-bg-subtle); }
.table-danger    { --bs-table-bg: var(--bs-danger-bg-subtle); }
.table-light     { --bs-table-bg: var(--bs-tertiary-bg); }

/* Aim Record grid: one round Y/N toggle per day. Tapping it answers the way
   that scores (green), tapping again flips to the other answer (red); it sits
   neutral until it has been answered. Square box so .rounded-circle is a
   circle rather than an oval. */
.aim-yn { width: 2rem; height: 2rem; padding: 0; line-height: 1; font-weight: 600; }

/* Sticky footer: the page fills at least the viewport, and the footer -- a
   direct child of <body>, see anvoy_footer() -- takes the leftover space with
   margin-top:auto. Short pages push it to the bottom of the screen; long pages
   let it flow right after the content. Scoped to .av-page so pages that write
   their own <body> (biblegame) are untouched. The fixed navbar is position:
   fixed, so it is not a flex item and does not affect this. */
body.av-page {
    min-height: 100vh;
    min-height: 100svh;          /* mobile: excludes the collapsing URL bar */
    display: flex;
    flex-direction: column;
}
body.av-page > footer { margin-top: auto; }

/* ── Contacts (Friends + Group members): shared card UI ───────────────────
   One look for both the Me/Friends screen (anvoy_friend_list) and the entity
   member screen (anvoy_member_list), via anvoy_contact_card(). Colours use
   Bootstrap --bs-* vars so light/dark both work. */
.av-contacts-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.av-contacts-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.av-contact-chip { font-size: .8rem; padding: 3px 12px; border-radius: 20px; border: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); background: var(--bs-body-bg); cursor: pointer; text-decoration: none; white-space: nowrap; }
.av-contact-chip:hover { border-color: var(--bs-secondary-color); }
.av-contact-chip.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); }
.av-contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.av-contact-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 12px; transition: border-color .12s ease; }
.av-contact-card:hover { border-color: var(--bs-secondary-color); }
.av-contact-card.av-clickable { cursor: pointer; }
.av-contact-head { display: flex; align-items: center; gap: 10px; }
.av-contact-av { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; }
.av-contact-av-ph { width: 42px; height: 42px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: .9rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.av-contact-id { min-width: 0; flex: 1; }
.av-contact-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-contact-sub { font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.av-contact-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.av-contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; }
.av-contact-meta { font-size: .72rem; color: var(--bs-tertiary-color); }
.av-contact-actions { display: flex; gap: 4px; flex: none; }
.av-contact-actions .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .45rem; }

/* The bulk people picker (anvoy_people_check_list) -------------------------
   The bar carrying the count and the Add button sticks to the bottom of the
   viewport, so it is one click away however far down a long list you have
   scrolled. It used to sit below the last row: on a list of 150 contacts that
   is a button nobody reaches, which left the directory's own Add MENU as the
   only visible "Add" on the screen -- and that one navigates away. */
.av-pick-bar { position: sticky; bottom: 0; z-index: 1010; display: flex; align-items: center; gap: 8px;
	flex-wrap: wrap; padding: 10px 12px; background: var(--bs-body-bg);
	border-top: 1px solid var(--bs-border-color); }

/* Pasted documents (/privacy, /product, /fvf ...) -------------------------
   These pages echo HTML stored in tblBlogPost, and the text was pasted out of
   Google Docs -- which stamps color:#333333 onto every span it writes. Inline
   styles beat the theme, so in dark mode the whole document rendered as dark
   grey on a dark background. Neutralise the pasted colours at the wrapper
   rather than hand-editing each document, since every one of these pages came
   through the same paste. */
[data-bs-theme="dark"] .av-doc [style*="color"]      { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .av-doc [style*="background"] { background-color: transparent !important; }
/* ...but a link should still look like a link. Listed last so it wins. */
[data-bs-theme="dark"] .av-doc a[style*="color"],
[data-bs-theme="dark"] .av-doc a [style*="color"]    { color: var(--bs-link-color) !important; }

/* OAuth provider buttons --------------------------------------------------
   Google and Microsoft were btn-light, and .btn-light does not invert in
   Bootstrap's dark theme by design -- so in dark mode they stayed a pale button
   with dark text, the one bright pair of buttons on the page.

   Driving the button's own --bs-btn-* variables from the theme's body/border
   colours makes them follow light and dark with no override block: pale with dark
   text in light mode, exactly as before, and dark with light text in dark mode.
   Both providers publish a dark-theme button of that shape, so this is their
   guidance rather than a departure from it. The marks themselves are untouched --
   Google's G and Microsoft's squares stay full colour in both themes, which is
   what both require. */
.av-oauth {
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-bg: var(--bs-body-bg);
	--bs-btn-hover-bg: var(--bs-tertiary-bg);
	--bs-btn-active-bg: var(--bs-secondary-bg);
	--bs-btn-border-color: var(--bs-border-color);
	--bs-btn-hover-border-color: var(--bs-secondary-color);
	--bs-btn-active-border-color: var(--bs-secondary-color);
	--bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}
/* The dark surface is named rather than inherited. This file sets its own dark
   page background, #1a1d20, which is darker than Bootstrap's --bs-body-bg
   (#212529) -- so leaving the button at var(--bs-body-bg) would have put #212529
   on #1a1d20, a step of 1.13:1 that nobody can see. #343a40 (the same grey the
   navbar uses) gives 1.47:1 against the page and 8.84:1 against the light text.
   Light mode is untouched: white button, dark text, as btn-light rendered it. */
[data-bs-theme="dark"] .av-oauth {
	--bs-btn-bg: #343a40;
	--bs-btn-hover-bg: #3d444b;
	--bs-btn-active-bg: #2b3035;
	/* A 1.47:1 surface is a hint, not an edge, so the border is what actually says
	   "button". --bs-border-color (#495057) manages only 1.41:1 against the button;
	   #868e96 gives 3.46:1 against it and 5.10:1 against the page, meeting WCAG
	   1.4.11 for the boundary of a control. */
	--bs-btn-border-color: #868e96;
	--bs-btn-hover-border-color: #adb5bd;
	--bs-btn-active-border-color: #adb5bd;
}

/* --- Town home (source/anvoy-town-home.php) -------------------------------
   Colours are Bootstrap theme variables only, so the town page follows the
   viewer's light/dark choice with no second palette to keep in step. */
.town-hero {
	background: linear-gradient(135deg, var(--bs-primary-bg-subtle), var(--bs-tertiary-bg));
	border-radius: .5rem;
	padding: 1rem;
}
.town-org {
	border: 1px solid var(--bs-border-color);
	border-radius: .5rem;
	padding: .6rem;
	background: var(--bs-body-bg);
}
.town-org .nm { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.town-org .ds { font-size: .78rem; color: var(--bs-secondary-color); }
/* The signed-out pitch. Subtle on purpose -- it sits at the foot of a page
   whose job is to serve the town, and should not compete with it. */
.town-pitch { background: var(--bs-success-bg-subtle); }

/* --- Resources (source/anvoy-resource.php) --------------------------------
   A shelter is a picture, so the card leads with one where there is one.
   Theme variables only. */
.res-card {
	border: 1px solid var(--bs-border-color);
	border-radius: .5rem;
	overflow: hidden;
	background: var(--bs-body-bg);
}
.res-photo {
	height: 110px;
	background-size: cover;
	background-position: center;
	background-color: var(--bs-tertiary-bg);   /* while the image loads */
}
.res-card .nm { font-weight: 600; font-size: .92rem; line-height: 1.2; }
.res-card .ds { font-size: .78rem; color: var(--bs-secondary-color); }

/* ---------------------------------------------------------------------------
   Member-written page bodies (the Site app, /values articles, a Map's body).
   ---------------------------------------------------------------------------
   These are stored as author HTML from the editor. The Site app used to wrap
   them in .bg-white.text-black -- a white slab sitting in the middle of a dark
   page. Dropping that wrapper alone is not enough: the editor writes an
   explicit colour onto most of what it saves, so the bodies already in the
   database carry black inline, which is unreadable once the white is gone.

   Counted across all 180 pages, the inline text colours actually in use are:

       rgb(0, 0, 0)         25    pure black      -- pasted, nobody chose it
       rgb(33, 37, 41)      13    Bootstrap body  -- the editor's own default
       rgb(180, 95, 6)       3    orange          -- a real choice
       rgb(17, 85, 204)      2    blue            -- a real choice
       rgb(56, 118, 29)      2    green           -- a real choice
       rgb(152, 0, 0)        2    dark red        -- a real choice
       rgb(255, 153, 0)      2    orange          -- a real choice
       rgb(102, 102, 102)    2    mid grey        -- means "muted"

   The first two are 38 of the 51 occurrences and mean "no colour was chosen",
   so on a dark page they follow the theme. The grey means "muted", so it maps
   to the theme's muted colour rather than staying at a fixed #666 that reads
   at about 2.4:1 on the dark background. The five accent colours are left
   exactly as the author set them.
   -------------------------------------------------------------------------- */
.av-pagebody {
	background: var(--bs-body-bg);
	color: var(--bs-body-color);
}
.av-pagebody img { max-width: 100%; height: auto; }
/* A wide pasted table scrolls inside the body instead of widening the page. */
.av-pagebody table { max-width: 100%; display: block; overflow-x: auto; }

[data-bs-theme="dark"] .av-pagebody [style*="color: rgb(0, 0, 0)"],
[data-bs-theme="dark"] .av-pagebody [style*="color:rgb(0,0,0)"],
[data-bs-theme="dark"] .av-pagebody [style*="color: rgb(33, 37, 41)"],
[data-bs-theme="dark"] .av-pagebody [style*="color:rgb(33,37,41)"],
[data-bs-theme="dark"] .av-pagebody [style*="color: #000"],
[data-bs-theme="dark"] .av-pagebody [style*="color:#000"],
[data-bs-theme="dark"] .av-pagebody [style*="color: #212529"],
[data-bs-theme="dark"] .av-pagebody [style*="color:#212529"] {
	color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .av-pagebody [style*="color: rgb(102, 102, 102)"],
[data-bs-theme="dark"] .av-pagebody [style*="color:rgb(102,102,102)"],
[data-bs-theme="dark"] .av-pagebody [style*="color: #666"],
[data-bs-theme="dark"] .av-pagebody [style*="color:#666"] {
	color: var(--bs-secondary-color) !important;
}
/* A white background painted onto a paragraph is the same "nobody chose it"
   case, and it puts a white bar across a dark page. */
[data-bs-theme="dark"] .av-pagebody [style*="background-color: rgb(255, 255, 255)"],
[data-bs-theme="dark"] .av-pagebody [style*="background-color:rgb(255,255,255)"],
[data-bs-theme="dark"] .av-pagebody [style*="background-color: #ffffff"],
[data-bs-theme="dark"] .av-pagebody [style*="background-color:#ffffff"],
[data-bs-theme="dark"] .av-pagebody [style*="background-color: #fff"],
[data-bs-theme="dark"] .av-pagebody [style*="background-color:#fff"] {
	background-color: transparent !important;
}