/*
 * ac6-modern - modern OpenSTM32 theme option on top of the Cerulean base theme.
 * Clean header, quiet login, card based modules, brand palette aligned to the
 * STM32 logo blue. Loads after cerulean.css, so it overrides. Light theme.
 *
 * Sizing is on ONE rem based scale (like every Bootswatch theme): spacing on a
 * 4px grid (--sp-*), a 6 step type scale (--fs-*), and card/table/button
 * padding driven through Bootstrap's own CSS variables so it stays symmetric.
 */

:root {
  /* brand palette */
  --os-brand:#3AA9E0;
  --os-brand-ink:#176f9e;
  --os-brand-wash:#e7f4fb;
  --os-brand-wash-2:#d7ecf7;
  --os-zephyr:#7929d2;
  --os-zephyr-ink:#6d24bf;
  --os-ground:#f4f7fa;
  --os-surface:#ffffff;
  --os-surface-2:#f8fbfd;
  --os-ink:#152230;
  --os-muted:#5c6b79;
  --os-faint:#87949f;
  --os-line:#e3e9f0;
  --os-line-2:#d3dde6;

  /* spacing scale (rem, 4px grid) */
  --sp-1:.25rem;  --sp-2:.5rem;  --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem;    --sp-10:2.5rem;

  /* type scale: 13 14 16 18 22 28 */
  --fs-xs:.8125rem; --fs-sm:.875rem; --fs-base:1rem;
  --fs-md:1.125rem; --fs-lg:1.375rem; --fs-xl:1.75rem;

  /* radius + shadow */
  --os-radius:.75rem;     /* 12 */
  --os-radius-sm:.5rem;   /* 8  */
  --os-shadow:0 1px 2px rgba(21,34,48,.05), 0 6px 20px -14px rgba(21,34,48,.22);

  --os-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* base Bootstrap overrides */
  --bs-body-font-size:1rem;
  --bs-body-line-height:1.6;
  --bs-link-color:#176f9e;
  --bs-link-hover-color:#0f5a80;
  --bs-border-radius:var(--os-radius);
  --bs-border-radius-sm:var(--os-radius-sm);
}

/* ---------- base ---------- */
html { font-size:16px; }
body {
  font-family:var(--os-sans);
  font-size:var(--fs-base);
  color:var(--os-ink);
  background:var(--os-ground);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* exclude .btn so button label colors win (an <a class="btn"> otherwise takes
   the link color, e.g. dark text on a dark-blue primary button) */
a:not(.btn), a:not(.btn):link, a:not(.btn):visited { color:var(--os-brand-ink); text-decoration:none; }
a:not(.btn):hover { color:#0f5a80; text-decoration:underline; }
h1,h2,h3,h4,h5,h6 { font-weight:700; letter-spacing:-.015em; color:var(--os-ink); }
/* cap raw heading sizes to the scale so stray Tiki h1/h2/h3 (FAQ "Questions",
   "Available FAQs", etc.) never outgrow the page title. Class-based headings
   (hero, sections, titles) keep their own size via higher specificity. */
h1 { font-size:var(--fs-xl); }
h2 { font-size:var(--fs-lg); }
h3 { font-size:var(--fs-md); }
h4 { font-size:var(--fs-base); }
h5, h6 { font-size:var(--fs-sm); }
:focus-visible { outline:2px solid var(--os-brand-ink); outline-offset:2px; }

/* ---------- header: identity row ---------- */
/* single sticky bar: logo + titles + nav + login. #top_modules is now empty
   (the logo module was moved into #topbar_modules). Logo shrinks on scroll
   (JS toggles body.os-scrolled via the custom head script); nav stays put. */
#top_modules { display:none !important; }
/* the empty logo row (#page-header holds only the now-hidden #top_modules) */
#page-header { display:none !important; }
/* full-width header (edge to edge) with the same gutter as the wide page
   content, so the logo lines up with the left column, not a narrow centered box */
#topbar, #topbar_modules {
  background:var(--os-surface) !important; background-image:none !important;
  border:0 !important; box-shadow:none !important; min-height:0;
  width:100% !important; max-width:none !important; margin-inline:0 !important;
  display:flex; align-items:center; gap:var(--sp-4);
  padding:6px var(--sp-3);
}
/* the header bar itself is sticky (its parent #row-middle is tall) */
#topbar_modules {
  position:sticky; top:0; z-index:1030;
  border-bottom:1px solid var(--os-line) !important;
}
/* the bar resizes as the logo shrinks on scroll; that changes the sticky
   header's height, which shifts the document, which makes the browser's
   scroll-anchoring nudge the scroll position back -> a feedback loop that
   makes the bar jitter/vibrate through the shrink zone. Turn anchoring off
   so the resize can't feed back into scroll. (no visual change) */
html { overflow-anchor:none; }
/* logo + titles (left), bigger at top and shrinking on scroll */
#topbar_modules .box-logo { flex:0 0 auto; padding:0; }
#topbar_modules .navbar-brand { padding:0; margin:0; align-items:center; }
/* logo height tracks scroll continuously (--os-logo-h is set by the head script,
   100px at top down to 48px), so the bar shrinks progressively, not in one jump */
.sitelogo img, .sitelogo.sitelogo-img {
  width:auto !important; height:var(--os-logo-h, 100px) !important;
  margin:0 var(--sp-3) 0 0 !important;
}
/* as the window narrows, drop the site title text first */
@media (max-width:1100px){ .sitetitles { display:none !important; } }
@media (max-width:768px){ .sitelogo img, .sitelogo.sitelogo-img { height:var(--os-logo-h, 52px) !important; } }
.sitetitles { margin:0; display:flex; flex-direction:column; justify-content:center; }
.sitetitle, .sitesubtitle { white-space:nowrap; margin:0; padding:0; display:block; }
.sitetitle, a .sitetitle, a:hover .sitetitle {
  font-size:var(--fs-lg) !important; font-weight:800;
  color:var(--os-ink) !important; letter-spacing:-.02em; line-height:1.15;
}
.sitesubtitle {
  font-size:var(--fs-xs) !important; color:var(--os-muted) !important;
  font-weight:500; margin-left:0 !important;
}
/* the site title is a link: a base rule renders .sitetitle at 700 while the
   a:hover rule above forced 800, so hovering thickened the title, widened the
   brand and shoved the nav sideways, plus the brand picked up the global hover
   underline. pin one weight for both states and drop the hover underline so the
   header stays put on hover. */
#topbar_modules .navbar-brand .sitetitle,
#topbar_modules .navbar-brand:hover .sitetitle { font-weight:700; }
#topbar_modules .navbar-brand:hover { text-decoration:none; }

/* nav fills the middle, left-aligned; login pushed right (see login section) */
#topbar_modules .box-menu { flex:1 1 auto; min-width:0; }
#topbar_modules .navbar { padding:0; }
#topbar_modules .navbar-nav { flex-direction:row; flex-wrap:wrap; }
#topbar_modules .nav-link, #topbar_modules .navbar-nav > li > a {
  color:var(--os-muted) !important;
  font-size:var(--fs-base); font-weight:500;
  padding:var(--sp-2) var(--sp-3) !important;
  border-radius:var(--os-radius-sm);
  transition:color .15s, background .15s;
}
#topbar_modules .nav-link:hover, #topbar_modules .navbar-nav > li > a:hover {
  color:var(--os-ink) !important; background:var(--os-brand-wash); text-decoration:none;
}
#topbar_modules .nav-link.active, #topbar_modules .nav-item.active > .nav-link {
  color:var(--os-brand-ink) !important; font-weight:600;
}

/* ---------- mobile menu (<768px): vertical drop-panel ---------- */
/* Below the SmartMenus toggler breakpoint (767.98px) the topbar shows a
   hamburger and the nav collapse is hidden until tapped. The base theme forces
   the nav to a wrapping row (the #topbar_modules .navbar-nav rule above), so the
   opened menu reads as a cramped horizontal strip. Keep the closed header row
   intact, drop the opened collapse (.sm-show) below the sticky bar as a
   full-width surface panel, and stack items + submenus vertically as touch
   targets. All colors ride on --os-* so light and dark are automatic. Scoped to
   #topbar_modules, so the sidebar .box-menu.card and the footer link lists are
   untouched. */
@media (max-width:767.98px){
  /* hamburger hugs the logo; login + toggle keep their right edge via #module_3
     margin-left:auto below. box-menu (Tiki sets .module position:relative) and
     the navbar are forced static so the opened panel anchors to the sticky
     #topbar_modules (full bar width), not to box-menu (which shrinks to just the
     hamburger once the collapse leaves the flow). */
  #topbar_modules .box-menu { flex:0 0 auto; position:static; }
  #topbar_modules .navbar { position:static; }

  /* hamburger: theme color + real tap target. Never set display on the anchors
     so the :target-driven show/X state keeps working. */
  #topbar_modules .sm-toggler-anchor { padding:var(--sp-2) var(--sp-3); border-radius:var(--os-radius-sm); }
  #topbar_modules .sm-toggler-anchor:hover { background:var(--os-brand-wash); }
  #topbar_modules .sm-toggler-icon { color:var(--os-muted); }
  #topbar_modules .sm-toggler-anchor:hover .sm-toggler-icon { color:var(--os-brand-ink); }

  /* opened collapse -> full-width panel below the bar. left/right:0 resolve
     against #topbar_modules' padding box (the sticky bar spans the viewport), so
     the panel is edge to edge without overhanging and never adds a scrollbar. */
  #topbar_modules .navbar-collapse.sm-show {
    position:absolute; top:100%; left:0; right:0;
    display:block; padding:var(--sp-2);
    background:var(--os-surface);
    border-top:1px solid var(--os-line);
    border-radius:0 0 var(--os-radius) var(--os-radius);
    box-shadow:var(--os-shadow);
    max-height:80vh; overflow-y:auto;
  }

  /* stack the list (beats the horizontal .navbar-nav rule via one extra class) */
  #topbar_modules .box-menu .navbar-nav { flex-direction:column; flex-wrap:nowrap; width:100%; }
  #topbar_modules .box-menu .navbar-nav > li { width:100%; }

  /* top-level rows: full width + roomy tap height. !important beats the
     !important nav-link padding above; the extra class outranks it too. */
  #topbar_modules .navbar-collapse.sm-show .nav-link {
    display:block; width:100%;
    padding:var(--sp-3) var(--sp-4) !important;
    font-size:var(--fs-md);
  }

  /* submenus: inline, full width, indented, not a floating off-screen dropdown.
     Only neutralize position/box; show/hide stays with SmartMenus. position is
     !important in case the JS leaves an inline absolute value. */
  #topbar_modules .navbar-collapse.sm-show .sm-sub.dropdown-menu {
    position:static !important; float:none; width:100%;
    margin:0; padding:0 0 0 var(--sp-4);
    border:0; border-radius:0; box-shadow:none;
    background:var(--os-surface-2);
  }
  #topbar_modules .navbar-collapse.sm-show .sm-sub .dropdown-item {
    white-space:normal; padding:var(--sp-3) var(--sp-4);
  }

  /* tap-to-expand accordion: submenus stay collapsed until the head script adds
     .os-open to the tapped parent <li> (dropdowns open on mouseover here, which
     never fires on touch, so the script toggles this class on tap instead). */
  #topbar_modules .navbar-collapse.sm-show .sm-nav-item:not(.os-open) > .sm-sub.dropdown-menu { display:none !important; }
  #topbar_modules .navbar-collapse.sm-show .sm-nav-item.os-open > .sm-sub.dropdown-menu { display:block !important; }
  /* mark the open parent so it reads as the active row */
  #topbar_modules .navbar-collapse.sm-show .sm-nav-item.os-open > .nav-link { background:var(--os-brand-wash); color:var(--os-brand-ink) !important; }
}

/* ---------- login: quiet, not insistent ---------- */
#module_3.box-login_box { margin-left:auto; align-self:center; }
.siteloginbar_popup > .btn, #module_3 .btn-link, #module_3 .login_link {
  color:var(--os-muted) !important; background:transparent !important;
  border:1px solid var(--os-line-2) !important; border-radius:var(--os-radius-sm) !important;
  font-size:var(--fs-sm); font-weight:500;
  padding:var(--sp-2) var(--sp-3) !important; box-shadow:none !important;
}
.siteloginbar_popup > .btn:hover, #module_3 .login_link:hover {
  color:var(--os-brand-ink) !important; border-color:var(--os-brand) !important;
}
.siteloginbar_poppedup.dropdown-menu {
  border:1px solid var(--os-line); border-radius:var(--os-radius);
  box-shadow:var(--os-shadow); padding:var(--sp-4);
}

/* ---------- breadcrumbs + news banner ---------- */
#pagetop_modules { max-width:1160px; margin:0 auto; padding-top:var(--sp-2); }
.box-breadcrumbs { font-size:var(--fs-xs); color:var(--os-faint); }
div.box-NewsBanner span.moduletitle { color:var(--os-brand-ink); font-weight:700; animation:none !important; }
/* NewsBanner repeats atop content pages, so keep it compact */
.box-NewsBanner .card-header { padding-top:var(--sp-2); padding-bottom:var(--sp-2); }
.box-NewsBanner .moduletitle, .box-NewsBanner .tiki-card-header-title { font-size:var(--fs-base); }
.box-NewsBanner .card-body { font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-4); line-height:1.4; }
.box-NewsBanner #NewsBanner img { width:96px !important; height:auto !important; }
.box-NewsBanner #NewsBanner td[width] { width:108px !important; }
.box-NewsBanner #NewsBanner td { vertical-align:middle; }
.box-NewsBanner #NewsBanner ul { margin:var(--sp-1) 0; padding-left:1.3em; }
.box-NewsBanner #NewsBanner b { font-weight:700; }

/* ---------- content area (wiki body only) ---------- */
main { margin:0 auto; }
.wikitext h1 { font-size:var(--fs-xl); margin:var(--sp-6) 0 var(--sp-3); line-height:1.2; }
.wikitext h2 { font-size:var(--fs-lg); margin:var(--sp-6) 0 var(--sp-3); line-height:1.25; }
.wikitext h3 { font-size:var(--fs-md); margin:var(--sp-5) 0 var(--sp-2); }
.wikitext h4 { font-size:var(--fs-base); margin:var(--sp-4) 0 var(--sp-2); }
.wikitext > :first-child { margin-top:0; }
.wikitext p, .wikitext ul, .wikitext ol { margin-bottom:var(--sp-4); }
.wikitext img { max-width:100%; height:auto; }

/* ---------- cards / modules: padding driven by Bootstrap vars = symmetric ---------- */
.card {
  --bs-card-bg:var(--os-surface);
  --bs-card-cap-bg:var(--os-surface);
  --bs-card-color:var(--os-ink);
  --bs-card-border-color:var(--os-line);
  --bs-card-border-radius:var(--os-radius);
  --bs-card-spacer-x:var(--sp-4);
  --bs-card-spacer-y:var(--sp-4);
  --bs-card-cap-padding-x:var(--sp-4);
  --bs-card-cap-padding-y:var(--sp-3);
  box-shadow:var(--os-shadow);
  overflow:hidden;
}
.card > .card-header, .card > .card-footer { border-color:var(--os-line); }
.card-header {
  border-bottom:1px solid var(--os-line);
  font-weight:700; font-size:var(--fs-base); letter-spacing:-.01em; color:var(--os-ink);
}
.card-footer { background:var(--os-surface-2); font-size:var(--fs-xs); color:var(--os-muted); }

/* sidebar/news modules are link lists: tighter body so each row lines up with
   the header. row inset (sp-2) + body inset (sp-2) = header inset (sp-4) */
.box-forums_last_posts, .box-last_created_faqs, .box-last_modified_blogs,
.box-menu.card, .box-rsslist {
  --bs-card-spacer-x:var(--sp-2);
  --bs-card-spacer-y:var(--sp-2);
}
.box-search { --bs-card-spacer-x:var(--sp-3); --bs-card-spacer-y:var(--sp-3); }
.linkmodule {
  display:block; padding:var(--sp-2); border-radius:var(--os-radius-sm);
  color:var(--os-brand-ink) !important; font-size:var(--fs-sm); transition:background .15s;
}
.linkmodule:hover { background:var(--os-surface-2); text-decoration:underline; color:#0f5a80 !important; }

/* module titles (Newest Forum Posts, Menu, Search) on one size */
.moduletitle { font-size:var(--fs-md); font-weight:700; letter-spacing:-.01em; }

/* recency list modules render <ol><li><a title/> by <author>, <date>. Make them
   clean stacked rows: no list numbers, a title link, and small muted meta. */
/* keep the ranking numbers on the recency lists, but make them small and muted */
.box-forums_last_posts .card-body ol, .box-last_created_faqs .card-body ol,
.box-last_modified_blogs .card-body ol {
  margin:0; padding-left:1.9em; list-style:decimal;
}
.box-forums_last_posts .card-body li::marker, .box-last_created_faqs .card-body li::marker,
.box-last_modified_blogs .card-body li::marker {
  color:var(--os-faint); font-weight:600; font-size:var(--fs-xs);
}
/* footer rss list has no ranking: drop the markers */
.box-rsslist .card-body ol, .box-rsslist .card-body ul { list-style:none; margin:0; padding:0; }
.box-forums_last_posts .card-body li, .box-last_created_faqs .card-body li,
.box-last_modified_blogs .card-body li, .box-rsslist .card-body li {
  padding:var(--sp-2) 0; border-bottom:1px solid var(--os-line);
}
.box-forums_last_posts .card-body li:last-child, .box-last_created_faqs .card-body li:last-child,
.box-last_modified_blogs .card-body li:last-child, .box-rsslist .card-body li:last-child {
  border-bottom:0;
}
.box-forums_last_posts .linkmodule, .box-last_created_faqs .linkmodule,
.box-last_modified_blogs .linkmodule, .box-rsslist .linkmodule {
  padding:0; margin:0 0 var(--sp-1);
  font-size:var(--fs-sm); font-weight:600; line-height:1.35;
  color:var(--os-brand-ink) !important;
}
.box-forums_last_posts .linkmodule:hover, .box-last_created_faqs .linkmodule:hover,
.box-last_modified_blogs .linkmodule:hover, .box-rsslist .linkmodule:hover {
  background:transparent; color:#0f5a80 !important; text-decoration:underline;
}
.box-forums_last_posts .author, .box-forums_last_posts .date, .box-forums_last_posts .comma,
.box-last_created_faqs .author, .box-last_created_faqs .date, .box-last_created_faqs .comma,
.box-last_modified_blogs .author, .box-last_modified_blogs .date, .box-last_modified_blogs .comma,
.box-rsslist .author, .box-rsslist .date, .box-rsslist .comma {
  font-size:var(--fs-xs); color:var(--os-faint); font-weight:400;
}
.box-forums_last_posts .author, .box-last_created_faqs .author,
.box-last_modified_blogs .author, .box-rsslist .author { font-style:normal; }

/* ---------- buttons ---------- */
.btn {
  --bs-btn-padding-x:var(--sp-3);
  --bs-btn-padding-y:var(--sp-2);
  --bs-btn-border-radius:var(--os-radius-sm);
  --bs-btn-font-size:var(--fs-sm);
  --bs-btn-font-weight:600;
}
/* cerulean sets button colors directly, so override colors directly (only the
   size/padding above rides on Bootstrap's vars) */
.btn-primary { background:var(--os-brand-ink); border-color:var(--os-brand-ink); color:#fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background:#0f5a80; border-color:#0f5a80; color:#fff; }
/* soft buttons carry a brand border so they clearly read as buttons (search
   Search/Go and Find controls were too pale to look clickable); hover fills solid */
.btn-info, .btn-secondary { background:var(--os-brand-wash); border-color:var(--os-brand); color:var(--os-brand-ink); }
.btn-info:hover, .btn-info:focus, .btn-secondary:hover, .btn-secondary:focus { background:var(--os-brand-ink); border-color:var(--os-brand-ink); color:#fff; }
.btn-outline-primary, .btn-default { color:var(--os-brand-ink); border-color:var(--os-line-2); background:var(--os-surface); }
.btn-outline-primary:hover, .btn-default:hover { border-color:var(--os-brand); color:var(--os-brand-ink); background:var(--os-brand-wash); }
.btn-link { color:var(--os-brand-ink); font-weight:600; }
.btn-link:hover { color:#0f5a80; }
.dropdown-toggle::after { vertical-align:middle; }

/* ---------- tables (forums, wiki content): cell padding via Bootstrap vars ---------- */
.table {
  --bs-table-bg:transparent;
  --bs-table-cell-padding-x:var(--sp-3);
  --bs-table-cell-padding-y:var(--sp-3);
  color:var(--os-ink); margin-bottom:var(--sp-4);
}
.table > :not(caption) > * > * { border-color:var(--os-line); vertical-align:top; }
.table > thead > tr > th, .table thead th {
  border-bottom:2px solid var(--os-line-2);
  color:var(--os-muted); font-weight:700; font-size:var(--fs-xs); letter-spacing:.02em;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color:var(--os-surface-2); }
.table-hover > tbody > tr:hover > * { background-color:var(--os-brand-wash); }
.table-forum .forumname a, .table a { font-weight:600; }
.table .description, .table .forumdescription { color:var(--os-muted); font-weight:400; }

/* ---------- forms ---------- */
.form-control, .form-select { border-color:var(--os-line-2); border-radius:var(--os-radius-sm); color:var(--os-ink); }
.form-control:focus, .form-select:focus { border-color:var(--os-brand); box-shadow:0 0 0 3px var(--os-brand-wash); }
.input-group .btn { z-index:0; }

/* ---------- dropdowns (all, not just the top nav) ---------- */
.dropdown-menu { border:1px solid var(--os-line); border-radius:var(--os-radius-sm); box-shadow:var(--os-shadow); padding:var(--sp-2); }
.dropdown-item { border-radius:var(--os-radius-sm); padding:var(--sp-2) var(--sp-3); color:var(--os-ink); }
.dropdown-item:hover, .dropdown-item:focus { background:var(--os-brand-wash); color:var(--os-brand-ink); }

/* ---------- alerts ---------- */
.alert { border-radius:var(--os-radius); }
.alert-danger { background:#fdecea; border-color:#f5c2c7; color:#842029; }
.alert-warning { background:#fff8e6; border-color:#ffe69c; color:#664d03; }
.alert-info, .alert-primary { background:var(--os-brand-wash); border-color:#bce0f0; color:var(--os-brand-ink); }
.alert-success { background:#e8f6ec; border-color:#badbcc; color:#0f5132; }
.alert .alert-heading { color:inherit; }
/* an author-styled maroon "Warning" card (inline background:#660000, 180% font)
   on the register page fights the theme; convert it to a clean amber warning */
.wikitext .card[style*="660000"] {
  background:#fff8e6 !important; color:#664d03 !important;
  font-size:var(--fs-sm) !important; border:1px solid #ffe69c !important;
}
.wikitext .card[style*="660000"] .card-header { background:transparent !important; color:#664d03 !important; border-bottom:1px solid #ffe69c !important; }
.wikitext .card[style*="660000"] .card-body { color:#664d03 !important; }

/* the Tiki tab-strip toggle ("No Tabs"/"Tabs") sits just before .nav-tabs as a
   solid primary button that competes with the tabs; make it a quiet control */
div:has(+ ul.nav-tabs) > .btn { background:transparent; border-color:var(--os-line-2); color:var(--os-muted); }
div:has(+ ul.nav-tabs) > .btn:hover { border-color:var(--os-brand); color:var(--os-brand-ink); background:var(--os-brand-wash); }

/* ---------- hide unstyled Tiki controls ---------- */
.side-col-toggle { display:none !important; }   /* bare < > sidebar-collapse chevrons */
#fullscreenbutton { display:none !important; }    /* gray quarter-circle fullscreen toggle */

/* ---------- misc: scroll, content width, forum header spacing ---------- */
html { scroll-behavior:auto !important; }   /* no slow smooth-scroll to anchors */
:target { animation:none !important; }        /* no highlight flash on anchored posts */
/* tighten the forum-thread header (title / Forum List toolbar / location) above the post */
.pagetitle { margin-bottom:var(--sp-2); }
.t_navbar.mb-4 { margin-bottom:var(--sp-2) !important; }
.breadcrumb.d-flex.mb-4 { margin-bottom:var(--sp-3) !important; }

/* ---------- page + card titles ---------- */
/* cerulean h1 is ~40px; bring the page title onto the scale. Scope to headings:
   breadcrumb trail links ALSO use class="pagetitle" and must stay small. */
h1.pagetitle, h2.pagetitle { font-size:var(--fs-xl); line-height:1.2; letter-spacing:-.02em; }
/* the "Location:" trail renders as bare <li class="breadcrumb-item"> with
   <a class="pagetitle"> links; make it a compact inline trail, not a big list */
li.breadcrumb-item { display:inline; }
li.breadcrumb-item a.pagetitle { font-size:var(--fs-xs); font-weight:400; color:var(--os-faint); }
li.breadcrumb-item a.pagetitle:hover { color:var(--os-brand-ink); }
/* some post/card titles render as a bare h2.card-title (no size class) and blow
   up to the raw h2 size; pin every card title to one title size */
.card-title { font-size:var(--fs-md); font-weight:700; line-height:1.3; margin:0; }

/* ---------- forum posts ---------- */
.card.post { margin-bottom:var(--sp-4); }
.card.post .card-header.postbody-title, .card.post .card-header .card-title { font-size:var(--fs-md); font-weight:700; }
.card.post .postbody-content { color:var(--os-ink); }
.card.post .postfooter { color:var(--os-muted); font-size:var(--fs-xs); }
.author .avatar img, .author .dicebear-avatar { border-radius:var(--os-radius-sm); }
.author_post_info { color:var(--os-muted); font-size:var(--fs-xs); }
.badge { font-weight:600; border-radius:var(--os-radius-sm); }

/* ---------- footer ---------- */
#footer, footer#footer {
  background:var(--os-surface-2); border-top:1px solid var(--os-line);
  color:var(--os-muted); margin-top:var(--sp-8);
}
#footer a, #footer .linkmodule { color:var(--os-muted) !important; }
#footer a:hover { color:var(--os-brand-ink) !important; }
#footer .box-os_footer { padding:0 !important; display:block !important; width:100%; }
#footer #bottom_modules { padding:0 !important; }
#footer .footer_liner { display:flex; justify-content:center; }

/* custom footer content, centered on the page */
.os-footer { width:100%; max-width:1160px; margin:0 auto; padding:var(--sp-8) var(--sp-4) var(--sp-4); }
.os-footer-grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:var(--sp-6); }
@media (max-width:760px){ .os-footer-grid{ grid-template-columns:1fr 1fr; gap:var(--sp-5); } }
.os-footer-id { display:flex; align-items:center; gap:var(--sp-2); }
.os-footer-logo { width:36px; height:36px; }
.os-footer-name { font-weight:800; font-size:var(--fs-md); color:var(--os-ink); letter-spacing:-.01em; }
.os-footer-brand p { font-size:var(--fs-sm); color:var(--os-muted); margin:var(--sp-3) 0; max-width:34ch; }
.os-footer-ac6 { display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--os-muted) !important; font-size:var(--fs-xs); }
.os-footer-ac6:hover { text-decoration:none; }
.os-footer-ac6 img { height:22px; width:auto; }
.os-footer-col h3 { font-size:var(--fs-sm); font-weight:700; margin:0 0 var(--sp-3); color:var(--os-ink); }
.os-footer-col a { display:block; font-size:var(--fs-sm); color:var(--os-muted) !important; padding:var(--sp-1) 0; }
.os-footer-col a:hover { color:var(--os-brand-ink) !important; text-decoration:none; }
.os-footer-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-2);
  border-top:1px solid var(--os-line); margin-top:var(--sp-6); padding-top:var(--sp-4);
  font-size:var(--fs-xs); color:var(--os-faint);
}

/* ============================================================
   Homepage components (used by the HomePage {HTML} block)
   ============================================================ */
.os-home { margin:0 0 var(--sp-2); }
.os-hero { padding:var(--sp-6) 0 var(--sp-5); }
.os-hero h1 { font-size:clamp(30px,4.4vw,46px); line-height:1.07; letter-spacing:-.028em; font-weight:800; margin:0; }
.os-hero h1 .b { color:var(--os-brand-ink); }
.os-hero .lead { font-size:var(--fs-md); color:var(--os-muted); margin:var(--sp-4) 0 0; max-width:33em; }
.os-hero .lead b { color:var(--os-ink); font-weight:600; }
.os-actions { display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-top:var(--sp-5); }

/* hero "Get started" guide, fills the right side and points to tools/training */
.os-hero-guide {
  background:var(--os-surface); border:1px solid var(--os-line);
  border-radius:var(--os-radius); box-shadow:var(--os-shadow); padding:var(--sp-4);
}
.os-guide-t { font-size:var(--fs-xs); color:var(--os-faint); font-weight:700; margin:0 0 var(--sp-3); }
.os-guide-link {
  display:block; padding:var(--sp-3); border:1px solid var(--os-line);
  border-radius:var(--os-radius-sm); margin-bottom:var(--sp-2);
  color:var(--os-ink) !important; transition:border-color .15s, background .15s, transform .15s;
}
.os-guide-link:last-child { margin-bottom:0; }
.os-guide-link:hover { border-color:var(--os-brand); background:var(--os-brand-wash); text-decoration:none; transform:translateX(2px); }
.os-guide-h { display:block; font-weight:700; font-size:var(--fs-sm); color:var(--os-ink); }
.os-guide-s { display:block; font-size:var(--fs-xs); color:var(--os-muted); margin-top:2px; }
.os-btn {
  display:inline-flex; align-items:center; gap:.4em;
  font-size:var(--fs-base); font-weight:600; padding:var(--sp-3) var(--sp-5);
  border-radius:var(--os-radius-sm); border:1px solid transparent;
  transition:transform .15s, background .15s, border-color .15s, color .15s;
}
.os-btn.primary { background:var(--os-brand-ink); color:#fff !important; }
.os-btn.primary:hover { background:#0f5a80; color:#fff !important; text-decoration:none; transform:translateY(-1px); }
.os-btn.quiet { background:var(--os-surface); color:var(--os-ink) !important; border-color:var(--os-line-2); }
.os-btn.quiet:hover { border-color:var(--os-brand); color:var(--os-brand-ink) !important; text-decoration:none; }

/* section headings on the homepage */
.os-sec { padding:var(--sp-6) 0 var(--sp-2); }
.os-sec .os-sec-t { font-size:var(--fs-lg); font-weight:700; letter-spacing:-.02em; margin:0 0 var(--sp-1); }
.os-sec .os-sec-n { color:var(--os-muted); font-size:var(--fs-sm); margin:0 0 var(--sp-5); }

/* tools + training cards */
.os-cards { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
@media (max-width:700px){ .os-cards{ grid-template-columns:1fr; } }
.os-card {
  display:flex; flex-direction:column;
  background:var(--os-surface); border:1px solid var(--os-line);
  border-radius:var(--os-radius); padding:var(--sp-5); color:var(--os-ink) !important;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
a.os-card:hover { border-color:var(--os-line-2); transform:translateY(-2px); box-shadow:var(--os-shadow); text-decoration:none; }
.os-card .os-mark { height:40px; display:flex; align-items:center; margin-bottom:var(--sp-3); }
.os-card .os-mark img { height:40px; width:auto; }
.os-card.train .os-mark img { height:32px; }
.os-card h3 { font-size:var(--fs-md); margin:0 0 var(--sp-1); letter-spacing:-.01em; }
.os-card .os-kind { font-size:var(--fs-xs); color:var(--os-faint); margin:0 0 var(--sp-2); }
.os-card p { font-size:var(--fs-sm); color:var(--os-muted); margin:0 0 var(--sp-3); flex:1; }
.os-card .os-by { font-size:var(--fs-xs); color:var(--os-faint); margin:0 0 var(--sp-3); }
.os-card .os-link { font-size:var(--fs-sm); font-weight:600; color:var(--os-brand-ink); }
.os-card.zp .os-link { color:var(--os-zephyr-ink); }

/* community tiles */
.os-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
@media (max-width:900px){ .os-tiles{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .os-tiles{ grid-template-columns:1fr; } }
.os-tile {
  display:block; background:var(--os-surface); border:1px solid var(--os-line);
  border-radius:var(--os-radius); padding:var(--sp-4); color:var(--os-ink) !important;
  transition:border-color .15s, transform .15s, box-shadow .15s;
}
.os-tile:hover { border-color:var(--os-line-2); transform:translateY(-2px); box-shadow:var(--os-shadow); text-decoration:none; }
.os-tile .h { font-size:var(--fs-base); font-weight:700; margin:0 0 var(--sp-1); }
.os-tile p { font-size:var(--fs-sm); color:var(--os-muted); margin:0; }

/* homepage layout: drop the redundant left column, give the hero room, keep the
   right news column visible. Only at lg+; small screens keep Tiki's stacking. */
body.homepage .box-breadcrumbs,
body.homepage .col1top-outer-wrapper { display:none !important; }
/* the top breadcrumb is a loose "Location:" text node plus bare <li> items in
   #col1 (no wrapper): hide the items and zero the stray text, homepage only. */
body.homepage li.breadcrumb-item { display:none !important; }
body.homepage #col1 { font-size:0; }
body.homepage #col1 .content { font-size:var(--fs-base); }
/* the news banner is for content/forum pages; the homepage leads with the hero */
body.homepage .box-NewsBanner, body.homepage #pagetop_modules { display:none !important; }
/* the homepage has no left sidebar, so give the content a left gutter of its own
   so it is not flush against the edge (fixes the left-side asymmetry) */
@media (min-width:992px){
  body.homepage #col2 { display:none !important; }
  body.homepage #col1 { flex:0 0 62% !important; max-width:62% !important; margin-left:12% !important; }
  body.homepage #col3 { flex:0 0 26% !important; max-width:26% !important; }
}

@media (prefers-reduced-motion:reduce){ * { transition:none !important; } }

/* ============================================================
   Dark mode (opt-in). Light stays the default; a header toggle adds
   .os-dark on <html> and remembers the choice (see the custom head
   script). Almost every color rides on the --os-* variables, so the
   palette is a straight redefine; the rules below are only the spots
   that hardcoded a light value (solid-button role, hovers, alerts).
   ============================================================ */
html.os-dark {
  --os-brand:#3AA9E0;
  --os-brand-ink:#6fc2ec;      /* link / foreground blue, light enough for a dark ground */
  --os-brand-wash:#122a3d;     /* hover wash, a dark blue tint (was a pale tint) */
  --os-brand-wash-2:#17364d;
  --os-zephyr-ink:#b48cf0;
  --os-ground:#0e151d;
  --os-surface:#151d27;
  --os-surface-2:#1b2531;
  --os-ink:#e6edf3;
  --os-muted:#a7b4c0;
  --os-faint:#7c8894;
  --os-line:#28323e;
  --os-line-2:#3a4652;
  --os-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.7);
  --bs-link-hover-color:#9ad4f2;
  color-scheme:dark;
}
/* solid buttons: --os-brand-ink is now a light link blue (white text on it would
   be too low contrast), so give primary buttons the brand blue with dark ink text */
html.os-dark .btn-primary { background:var(--os-brand); border-color:var(--os-brand); color:#04121b; }
html.os-dark .btn-primary:hover, html.os-dark .btn-primary:focus, html.os-dark .btn-primary:active { background:#57bdf0; border-color:#57bdf0; color:#04121b; }
html.os-dark .os-btn.primary { background:var(--os-brand); color:#04121b !important; }
html.os-dark .os-btn.primary:hover { background:#57bdf0; color:#04121b !important; }
/* link hovers hardcoded a darker blue (#0f5a80); lighten them so they read on dark */
html.os-dark a:not(.btn):hover,
html.os-dark .linkmodule:hover,
html.os-dark .box-forums_last_posts .linkmodule:hover,
html.os-dark .box-last_created_faqs .linkmodule:hover,
html.os-dark .box-last_modified_blogs .linkmodule:hover,
html.os-dark .box-rsslist .linkmodule:hover,
html.os-dark .btn-link:hover { color:#9ad4f2 !important; }
/* alerts: keep the semantic hue but on a dark tint */
html.os-dark .alert-danger { background:#33191b; border-color:#5b2a2e; color:#f2b8bd; }
html.os-dark .alert-warning { background:#33290f; border-color:#5a481d; color:#f2d488; }
html.os-dark .alert-info, html.os-dark .alert-primary { border-color:#245a78; }
html.os-dark .alert-success { background:#122619; border-color:#264f35; color:#9bdcb0; }
html.os-dark .wikitext .card[style*="660000"] { background:#33290f !important; border-color:#5a481d !important; color:#f2d488 !important; }
html.os-dark .wikitext .card[style*="660000"] .card-header { color:#f2d488 !important; border-bottom-color:#5a481d !important; }
html.os-dark .wikitext .card[style*="660000"] .card-body { color:#f2d488 !important; }
/* the logo mark is dark-inked; brighten it a touch so it reads on the dark header */
html.os-dark .sitelogo img { filter:brightness(1.08); }

/* header light/dark toggle button (injected by the custom head script) */
.os-theme-toggle {
  flex:0 0 auto; margin-left:var(--sp-2); align-self:center;
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; cursor:pointer;
  color:var(--os-muted); background:transparent;
  border:1px solid var(--os-line-2); border-radius:var(--os-radius-sm);
  transition:color .15s, border-color .15s, background .15s;
}
.os-theme-toggle:hover { color:var(--os-brand-ink); border-color:var(--os-brand); background:var(--os-brand-wash); }
.os-theme-toggle svg { display:block; }
/* end of file */