/*!
 * Pool Singapore - Cassiopeia preset (Joomla 6 / Bootstrap 5)
 * Dark navigation + footer, light content, opt-in dark modules via ".pool-dark".
 * Load AFTER the template stylesheets (user.css or a direct <link> in <head>).
 * Fonts: Outfit (headings) + DM Sans (body), self-hosted from ../fonts/pool/.
 */
html:root {
  /* Pool Singapore - navigation / dark surfaces */
  --pool-nav-bg: #0A2347;
  --pool-nav-bg-2: #0C3166;
  --pool-nav-deep: #06142E;
  --pool-nav-bg-rgb: 10, 35, 71;
  --pool-nav-deep-rgb: 6, 20, 46;
  --pool-sun: #F5B301;   /* sun-exposure bars: same in every city */

  /* light (content) palette */
  --pool-l-ink: #0A2347;
  --pool-l-muted: #4D6585;
  --pool-l-heading: #0A2347;
  --pool-l-bg: #F3F7FC;
  --pool-l-surface: #FFFFFF;
  --pool-l-surface-2: #E7EFF9;
  --pool-l-border: #D2DFEF;
  --pool-l-brand: #0A4E9B;
  --pool-l-brand-hover: #083E7C;
  --pool-l-bright: #2BB6E8;
  --pool-l-accent: #EF4B4B;
  --pool-l-accent-bg: #D93636;
  --pool-l-accent-ink: #FFFFFF;
  --pool-l-accent-bg-hover: #C33131;
  --pool-l-on-brand: #FFFFFF;
  --pool-l-input-bg: #FFFFFF;
  --pool-l-input-border: #A0B0C5;
  --pool-l-success: #1A7F37;
  --pool-l-danger: #C62F3E;
  --pool-l-ink-rgb: 10, 35, 71;
  --pool-l-surface-rgb: 255, 255, 255;
  --pool-l-brand-rgb: 10, 78, 155;
  --pool-l-brand-hover-rgb: 8, 62, 124;
  --pool-l-bright-rgb: 43, 182, 232;

  /* dark (navigation, footer, .pool-dark) palette */
  --pool-d-ink: #EAF3FF;
  --pool-d-muted: #A2B0C4;
  --pool-d-heading: #FFFFFF;
  --pool-d-bg: #06142E;
  --pool-d-surface: #0A2347;
  --pool-d-surface-2: #1B3254;
  --pool-d-border: rgba(255, 255, 255, .14);
  --pool-d-brand: #6BD3FF;
  --pool-d-brand-hover: #94DFFF;
  --pool-d-bright: #2B7FE0;
  --pool-d-accent: #FF7A70;
  --pool-d-accent-bg: #FF7A70;
  --pool-d-accent-ink: #06142E;
  --pool-d-accent-bg-hover: #FF978F;
  --pool-d-on-brand: #06142E;
  --pool-d-input-bg: rgba(255, 255, 255, .07);
  --pool-d-input-border: rgba(255, 255, 255, .28);
  --pool-d-success: #5FD38D;
  --pool-d-danger: #FF8A8A;
  --pool-d-ink-rgb: 234, 243, 255;
  --pool-d-surface-rgb: 10, 35, 71;
  --pool-d-brand-rgb: 107, 211, 255;
  --pool-d-brand-hover-rgb: 148, 223, 255;
  --pool-d-bright-rgb: 43, 127, 224;

  /* shape + type */
  --pool-radius: .875rem;
  --pool-radius-sm: .625rem;
}

/* ==========================================================================
   1. FONTS  (self-hosted, subsetted; Vietnamese + Thai fall back per-glyph)
   ========================================================================== */
@font-face { font-family: "Outfit";  font-style: normal; font-weight: 100 900;  font-display: swap;
  src: url("../fonts/pool/outfit-latin-var.woff2") format("woff2");
  unicode-range: U+0020-019F, U+01A2-01AE, U+01B1-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("../fonts/pool/dm-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0020-019F, U+01A2-01AE, U+01B1-024F, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215; }
/* Vietnamese glyphs missing from Outfit / DM Sans */
@font-face { font-family: "Outfit";  font-weight: 100 900; font-display: swap;
  src: url("../fonts/pool/noto-sans-vi-var.woff2") format("woff2");
  unicode-range: U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303, U+0309, U+0323, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap;
  src: url("../fonts/pool/noto-sans-vi-var.woff2") format("woff2");
  unicode-range: U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303, U+0309, U+0323, U+1EA0-1EF9, U+20AB; }
/* Thai */
@font-face { font-family: "Outfit";  font-weight: 100 900; font-display: swap;
  src: url("../fonts/pool/noto-sans-thai-var.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200B-200D; }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap;
  src: url("../fonts/pool/noto-sans-thai-var.woff2") format("woff2");
  unicode-range: U+0E01-0E5B, U+200B-200D; }

/* ==========================================================================
   2. TOKENS
   Palette constants live in the preset block above. Components only read
   the semantic --pool-* tokens below, so switching a scope to dark/light
   is just a re-map.
   ========================================================================== */
html:root,
.pool-light {
  --pool-ink: var(--pool-l-ink);
  --pool-muted: var(--pool-l-muted);
  --pool-heading: var(--pool-l-heading);
  --pool-bg: var(--pool-l-bg);
  --pool-surface: var(--pool-l-surface);
  --pool-surface-2: var(--pool-l-surface-2);
  --pool-border: var(--pool-l-border);
  --pool-brand: var(--pool-l-brand);
  --pool-brand-hover: var(--pool-l-brand-hover);
  --pool-bright: var(--pool-l-bright);
  --pool-accent: var(--pool-l-accent);
  --pool-accent-bg: var(--pool-l-accent-bg);
  --pool-accent-ink: var(--pool-l-accent-ink);
  --pool-accent-bg-hover: var(--pool-l-accent-bg-hover);
  --pool-on-brand: var(--pool-l-on-brand);
  --pool-input-bg: var(--pool-l-input-bg);
  --pool-input-border: var(--pool-l-input-border);
  --pool-success: var(--pool-l-success);
  --pool-danger: var(--pool-l-danger);
  --pool-ink-rgb: var(--pool-l-ink-rgb);
  --pool-surface-rgb: var(--pool-l-surface-rgb);
  --pool-brand-rgb: var(--pool-l-brand-rgb);
  --pool-brand-hover-rgb: var(--pool-l-brand-hover-rgb);
  --pool-bright-rgb: var(--pool-l-bright-rgb);
}
.pool-dark,
[data-bs-theme="dark"],
.container-header,
.container-topbar,
.container-below-top,
.container-footer,
.pool-hero {
  --pool-ink: var(--pool-d-ink);
  --pool-muted: var(--pool-d-muted);
  --pool-heading: var(--pool-d-heading);
  --pool-bg: var(--pool-d-bg);
  --pool-surface: var(--pool-d-surface);
  --pool-surface-2: var(--pool-d-surface-2);
  --pool-border: var(--pool-d-border);
  --pool-brand: var(--pool-d-brand);
  --pool-brand-hover: var(--pool-d-brand-hover);
  --pool-bright: var(--pool-d-bright);
  --pool-accent: var(--pool-d-accent);
  --pool-accent-bg: var(--pool-d-accent-bg);
  --pool-accent-ink: var(--pool-d-accent-ink);
  --pool-accent-bg-hover: var(--pool-d-accent-bg-hover);
  --pool-on-brand: var(--pool-d-on-brand);
  --pool-input-bg: var(--pool-d-input-bg);
  --pool-input-border: var(--pool-d-input-border);
  --pool-success: var(--pool-d-success);
  --pool-danger: var(--pool-d-danger);
  --pool-ink-rgb: var(--pool-d-ink-rgb);
  --pool-surface-rgb: var(--pool-d-surface-rgb);
  --pool-brand-rgb: var(--pool-d-brand-rgb);
  --pool-brand-hover-rgb: var(--pool-d-brand-hover-rgb);
  --pool-bright-rgb: var(--pool-d-bright-rgb);
}

/* Cassiopeia + Bootstrap 5 variable mapping. Joomla compiles Bootstrap with an
   empty variable prefix (--link-color); the --bs- twin is emitted as well so
   it keeps working if the prefix ever changes. */
html:root,
.pool-light,
.pool-dark,
[data-bs-theme="dark"],
.container-header,
.container-topbar,
.container-below-top,
.container-footer,
.pool-hero {
  --link-color: var(--pool-brand);
  --link-hover-color: var(--pool-brand-hover);
  --link-color-rgb: var(--pool-brand-rgb);
  --link-hover-color-rgb: var(--pool-brand-hover-rgb);
  --body-color: var(--pool-ink);
  --bs-body-color: var(--pool-ink);
  --body-color-rgb: var(--pool-ink-rgb);
  --bs-body-color-rgb: var(--pool-ink-rgb);
  --body-bg: var(--pool-surface);
  --bs-body-bg: var(--pool-surface);
  --body-bg-rgb: var(--pool-surface-rgb);
  --bs-body-bg-rgb: var(--pool-surface-rgb);
  --emphasis-color: var(--pool-heading);
  --bs-emphasis-color: var(--pool-heading);
  --secondary-color: var(--pool-muted);
  --bs-secondary-color: var(--pool-muted);
  --secondary-bg: var(--pool-surface-2);
  --bs-secondary-bg: var(--pool-surface-2);
  --tertiary-bg: var(--pool-surface-2);
  --bs-tertiary-bg: var(--pool-surface-2);
  --heading-color: var(--pool-heading);
  --bs-heading-color: var(--pool-heading);
  --border-color: var(--pool-border);
  --bs-border-color: var(--pool-border);
  --primary: var(--pool-brand);
  --bs-primary: var(--pool-brand);
  --primary-rgb: var(--pool-brand-rgb);
  --bs-primary-rgb: var(--pool-brand-rgb);
  --focus-ring-color: rgba(var(--pool-brand-rgb), .25);
  --bs-focus-ring-color: rgba(var(--pool-brand-rgb), .25);
  --cassiopeia-color-link: var(--pool-brand);
}

html:root {
  --pool-font-heading: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Thai", "Noto Sans", sans-serif;
  --pool-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Thai", "Noto Sans", sans-serif;

  --cassiopeia-font-family-body: var(--pool-font-body);
  --cassiopeia-font-family-headings: var(--pool-font-heading);
  --cassiopeia-font-weight-headings: 600;

  --cassiopeia-color-primary: var(--pool-nav-bg);
  --cassiopeia-color-hover: var(--pool-nav-bg-2);
  --cassiopeia-color-link: var(--pool-l-brand);
  --template-bg-light: var(--pool-l-surface-2);
  --template-special-color: var(--pool-nav-bg);
  --template-link-color: var(--pool-l-brand);
  --template-contrast: var(--pool-l-brand);
  --hue: 205;
}
.pool-dark,
[data-bs-theme="dark"] {
  --cassiopeia-color-primary: var(--pool-d-brand);   /* tabs, small UI that reads this var */
  color-scheme: dark;
  color: var(--pool-ink);
  background-color: var(--pool-surface);
}

/* ==========================================================================
   3. PAGE BASICS  (light content)
   ========================================================================== */
html { background-color: var(--pool-l-bg); }
body.site {
  font-family: var(--pool-font-body);
  line-height: 1.6;
  color: var(--pool-ink);
  background-color: var(--pool-bg);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--pool-font-heading);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--pool-heading);
}
h1, .h1 { font-weight: 700; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-weight: 700; letter-spacing: -.02em; }
a { text-underline-offset: .18em; }
a:not([class]) { text-decoration-thickness: .08em; }
pre, code, kbd, samp { color: var(--pool-brand-hover); }
pre { background-color: var(--pool-surface-2); border-radius: var(--pool-radius-sm); padding: .75rem 1rem; }
.lead { color: var(--pool-muted); }
hr { border-color: var(--pool-border); opacity: 1; }
::selection { background-color: rgba(var(--pool-brand-rgb), .25); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pool-brand); outline-offset: 2px;
}
.text-muted, .text-body-secondary { color: var(--pool-muted) !important; }

/* ==========================================================================
   4. HEADER  (dark navigation)
   ========================================================================== */
.container-header {
  background-color: var(--pool-nav-bg);
  background-image: linear-gradient(135deg, var(--pool-nav-bg) 0%, var(--pool-nav-bg-2) 100%);
  box-shadow: inset 0 -3px 0 0 var(--pool-d-brand);
  color: var(--pool-ink);
}
.container-header .grid-child { padding-block: .625rem; }
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .site-description { color: var(--pool-ink); }
.container-header .navbar-brand:hover,
.container-header .navbar-brand a:hover { color: var(--pool-heading); }
.container-header .brand-logo img,
.container-header .brand-logo svg { width: auto; max-height: 3.5rem; }
.container-header .site-description { font-size: .9rem; opacity: .8; }

.container-topbar,
.container-below-top {
  background-color: var(--pool-nav-deep);
  color: var(--pool-muted);
  font-size: .875rem;
}
.container-topbar .grid-child, .container-below-top.grid-child { padding-block: .35rem; }
.container-topbar a:not(.btn), .container-below-top a:not(.btn) { color: var(--pool-ink); }
.container-topbar a:not(.btn):hover, .container-below-top a:not(.btn):hover { color: var(--pool-brand); }

/* ---- main menu (mod_menu default list + the metismenu dropdown layout) ---- */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button,
.container-header .metismenu.mod-menu .metismenu-item > a,
.container-header .metismenu.mod-menu .metismenu-item > span,
.container-header .metismenu.mod-menu .metismenu-item > button {
  color: var(--pool-ink);
  font-weight: 500;
  letter-spacing: .01em;
}
.container-header .mod-menu > li.active::after,
.container-header .mod-menu > li:hover::after,
.container-header .metismenu > li > a:hover::after,
.container-header .metismenu > li > button:hover::before,
.container-header .metismenu > li.active > a::after,
.container-header .metismenu > li.active > button::before {
  background: var(--pool-brand);
  opacity: 1;
}
.container-header .mod-menu > li > a:hover,
.container-header .metismenu.mod-menu .metismenu-item > a:hover,
.container-header .metismenu.mod-menu .metismenu-item > button:hover { color: var(--pool-heading); }

.container-header .mod-menu { color: var(--pool-ink); }

/* dropdown panels */
.container-header .mod-menu__sub,
.container-header .metismenu.mod-menu .mm-collapse {
  background-color: var(--pool-nav-deep);
  color: var(--pool-ink);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius-sm);
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .35);
}
.container-header .mod-menu .parent > ul { color: var(--pool-ink); }
.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub span,
.container-header .metismenu.mod-menu .mm-collapse a,
.container-header .metismenu.mod-menu .mm-collapse span,
.container-header .metismenu.mod-menu .mm-collapse button { color: var(--pool-ink); font-weight: 400; }
.container-header .mod-menu .mod-menu__sub a:hover,
.container-header .metismenu.mod-menu .mm-collapse a:hover,
.container-header .metismenu.mod-menu .mm-collapse button:hover { color: var(--pool-brand); text-decoration: none; }
.container-header .metismenu.mod-menu .mm-collapse > li {
  border-radius: calc(var(--pool-radius-sm) - 2px);
}
.container-header .metismenu.mod-menu .mm-collapse > li:hover { background-color: rgba(255, 255, 255, .06); }
.container-header .metismenu.mod-menu .mm-collapse > li.parent > ul { background-color: rgba(255, 255, 255, .04); }
.container-header .metismenu.mod-menu .metismenu-item.divider:not(.parent) { border-color: var(--pool-border); }

.container-header .navbar-toggler {
  color: var(--pool-ink);
  border-color: rgba(255, 255, 255, .35);
  border-radius: var(--pool-radius-sm);
}
.container-header .navbar-toggler:hover { border-color: var(--pool-brand); color: var(--pool-brand); }

/* ---- header search / Smart Search ---- */
.container-header .container-search :is(.form-control, input[type="search"], input[type="text"]),
.container-header .mod-finder :is(.form-control, input) {
  background-color: var(--pool-input-bg);
  border: 1px solid var(--pool-input-border);
  color: var(--pool-ink);
  border-radius: var(--pool-radius-sm);
}
.container-header .container-search ::placeholder { color: var(--pool-muted); opacity: 1; }
.container-header .mod-finder, .container-header .mod-finder a:not(.jmodedit) { color: var(--pool-ink); }
.container-header .mod-finder a:not(.jmodedit):hover { color: var(--pool-brand); }

/* ==========================================================================
   5. FOOTER
   ========================================================================== */
.container-footer.footer {
  margin-top: 2.5rem;
  background-color: var(--pool-nav-deep);
  background-image: none;
  color: var(--pool-muted);
  border-top: 3px solid var(--pool-d-brand);
}
.footer a:not(.btn), .footer .btn-link { color: var(--pool-ink); }
.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover { color: var(--pool-brand); }
.footer .metismenu.mod-menu .mm-collapse { background-color: var(--pool-nav-bg); }
.back-to-top-link {
  background-color: var(--pool-nav-bg);
  color: var(--pool-d-brand);
  border: 2px solid var(--pool-d-brand);
  box-shadow: 0 .5rem 1.25rem rgba(7, 26, 44, .3);
}
.back-to-top-link:hover { background-color: var(--pool-d-brand); color: var(--pool-nav-deep); }

/* ==========================================================================
   6. MODULES + CARDS  (Cassiopeia "card" chrome:  div.card > h3.card-header + div.card-body)
   ========================================================================== */
.card {
  --card-bg: var(--pool-surface);
  --bs-card-bg: var(--pool-surface);
  --card-color: var(--pool-ink);
  --bs-card-color: var(--pool-ink);
  --card-border-color: var(--pool-border);
  --bs-card-border-color: var(--pool-border);
  --card-border-radius: var(--pool-radius);
  --bs-card-border-radius: var(--pool-radius);
  --card-inner-border-radius: calc(var(--pool-radius) - 1px);
  --bs-card-inner-border-radius: calc(var(--pool-radius) - 1px);
  --card-cap-bg: transparent;
  --bs-card-cap-bg: transparent;
  --card-cap-color: var(--pool-heading);
  --bs-card-cap-color: var(--pool-heading);
  box-shadow: 0 1px 2px rgba(7, 26, 44, .05), 0 12px 28px -16px rgba(7, 26, 44, .22);
}
.card-header {
  font-family: var(--pool-font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  padding-bottom: .25rem;
  border-bottom: 0;
}
.card-header::after {                       /* small brand flourish under module titles */
  content: "";
  display: block;
  width: 2.25rem; height: 3px; margin-top: .45rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pool-bright), var(--pool-brand));
}
.card-title { font-family: var(--pool-font-heading); }

/* transparent module wrapper helper:  Module Class  ->  " pool-plain" */
.card.pool-plain { box-shadow: none; border-color: transparent; background-color: transparent; }

/* ==========================================================================
   7. CONTENT ELEMENTS
   ========================================================================== */
.page-header h1, .page-header h2 { margin-bottom: 1rem; }
.article-info, .article-info dd { color: var(--pool-muted); font-size: .9rem; }
.blog-item, .blog-items .blog-item { margin-bottom: 1.5rem; }
.item-title a, .page-header a { text-decoration: none; }
.item-title a:hover { text-decoration: underline; }

.breadcrumb {
  --breadcrumb-divider-color: var(--pool-muted);
  --bs-breadcrumb-divider-color: var(--pool-muted);
  --breadcrumb-item-active-color: var(--pool-muted);
  --bs-breadcrumb-item-active-color: var(--pool-muted);
  --breadcrumb-bg: var(--pool-surface-2);
  --bs-breadcrumb-bg: var(--pool-surface-2);
  --breadcrumb-border-radius: var(--pool-radius-sm);
  --bs-breadcrumb-border-radius: var(--pool-radius-sm);
  font-size: .9rem;
}
.mod-breadcrumbs__wrapper { margin-block: .25rem 1rem; }

.tags .btn, .tags a { border-radius: 999px; }

/* ---- buttons ---- */
.btn {
  --btn-border-radius: var(--pool-radius-sm);
  --bs-btn-border-radius: var(--pool-radius-sm);
  --btn-font-weight: 600;
  --bs-btn-font-weight: 600;
  letter-spacing: .005em;
}
.btn-primary {
  --btn-color: var(--pool-on-brand);
  --bs-btn-color: var(--pool-on-brand);
  --btn-bg: var(--pool-brand);
  --bs-btn-bg: var(--pool-brand);
  --btn-border-color: var(--pool-brand);
  --bs-btn-border-color: var(--pool-brand);
  --btn-hover-color: var(--pool-on-brand);
  --bs-btn-hover-color: var(--pool-on-brand);
  --btn-hover-bg: var(--pool-brand-hover);
  --bs-btn-hover-bg: var(--pool-brand-hover);
  --btn-hover-border-color: var(--pool-brand-hover);
  --bs-btn-hover-border-color: var(--pool-brand-hover);
  --btn-focus-shadow-rgb: var(--pool-brand-rgb);
  --bs-btn-focus-shadow-rgb: var(--pool-brand-rgb);
  --btn-active-color: var(--pool-on-brand);
  --bs-btn-active-color: var(--pool-on-brand);
  --btn-active-bg: var(--pool-brand-hover);
  --bs-btn-active-bg: var(--pool-brand-hover);
  --btn-active-border-color: var(--pool-brand-hover);
  --bs-btn-active-border-color: var(--pool-brand-hover);
  --btn-disabled-color: var(--pool-on-brand);
  --bs-btn-disabled-color: var(--pool-on-brand);
  --btn-disabled-bg: var(--pool-brand);
  --bs-btn-disabled-bg: var(--pool-brand);
  --btn-disabled-border-color: var(--pool-brand);
  --bs-btn-disabled-border-color: var(--pool-brand);
}
.btn.btn-primary,
.btn.btn-primary:focus {
  background-color: var(--pool-brand);
  border-color: var(--pool-brand);
  color: var(--pool-on-brand);
}
.btn.btn-primary:hover,
.btn.btn-primary:active,
.btn.btn-primary.active {
  background-color: var(--pool-brand-hover);
  border-color: var(--pool-brand-hover);
  color: var(--pool-on-brand);
}
.btn-outline-primary {
  --btn-color: var(--pool-brand);
  --bs-btn-color: var(--pool-brand);
  --btn-border-color: var(--pool-brand);
  --bs-btn-border-color: var(--pool-brand);
  --btn-hover-color: var(--pool-on-brand);
  --bs-btn-hover-color: var(--pool-on-brand);
  --btn-hover-bg: var(--pool-brand);
  --bs-btn-hover-bg: var(--pool-brand);
  --btn-hover-border-color: var(--pool-brand);
  --bs-btn-hover-border-color: var(--pool-brand);
  --btn-focus-shadow-rgb: var(--pool-brand-rgb);
  --bs-btn-focus-shadow-rgb: var(--pool-brand-rgb);
  --btn-active-color: var(--pool-on-brand);
  --bs-btn-active-color: var(--pool-on-brand);
  --btn-active-bg: var(--pool-brand);
  --bs-btn-active-bg: var(--pool-brand);
  --btn-active-border-color: var(--pool-brand);
  --bs-btn-active-border-color: var(--pool-brand);
  --btn-disabled-color: var(--pool-brand);
  --bs-btn-disabled-color: var(--pool-brand);
  --btn-disabled-border-color: var(--pool-brand);
  --bs-btn-disabled-border-color: var(--pool-brand);
}
.btn-secondary {
  --btn-color: var(--pool-ink);
  --bs-btn-color: var(--pool-ink);
  --btn-bg: var(--pool-surface-2);
  --bs-btn-bg: var(--pool-surface-2);
  --btn-border-color: var(--pool-border);
  --bs-btn-border-color: var(--pool-border);
  --btn-hover-color: var(--pool-ink);
  --bs-btn-hover-color: var(--pool-ink);
  --btn-hover-bg: rgba(var(--pool-brand-rgb), .14);
  --bs-btn-hover-bg: rgba(var(--pool-brand-rgb), .14);
  --btn-hover-border-color: rgba(var(--pool-brand-rgb), .4);
  --bs-btn-hover-border-color: rgba(var(--pool-brand-rgb), .4);
  --btn-active-color: var(--pool-ink);
  --bs-btn-active-color: var(--pool-ink);
  --btn-active-bg: rgba(var(--pool-brand-rgb), .2);
  --bs-btn-active-bg: rgba(var(--pool-brand-rgb), .2);
  --btn-active-border-color: rgba(var(--pool-brand-rgb), .4);
  --bs-btn-active-border-color: rgba(var(--pool-brand-rgb), .4);
}
.btn-link { @@btn-color: var(--pool-brand); @@btn-hover-color: var(--pool-brand-hover); }

/* Affiliate / booking call-to-action: <a class="btn btn-pool-accent">Check price</a>
   .btn-warning (used by the Pool Finder CTAs) is mapped to the same look. */
.btn-pool-accent,
.btn.btn-warning {
  --btn-color: var(--pool-accent-ink);
  --bs-btn-color: var(--pool-accent-ink);
  --btn-bg: var(--pool-accent-bg);
  --bs-btn-bg: var(--pool-accent-bg);
  --btn-border-color: var(--pool-accent-bg);
  --bs-btn-border-color: var(--pool-accent-bg);
  --btn-hover-color: var(--pool-accent-ink);
  --bs-btn-hover-color: var(--pool-accent-ink);
  --btn-hover-bg: var(--pool-accent-bg-hover);
  --bs-btn-hover-bg: var(--pool-accent-bg-hover);
  --btn-hover-border-color: var(--pool-accent-bg-hover);
  --bs-btn-hover-border-color: var(--pool-accent-bg-hover);
  --btn-active-color: var(--pool-accent-ink);
  --bs-btn-active-color: var(--pool-accent-ink);
  --btn-active-bg: var(--pool-accent-bg-hover);
  --bs-btn-active-bg: var(--pool-accent-bg-hover);
  --btn-active-border-color: var(--pool-accent-bg-hover);
  --bs-btn-active-border-color: var(--pool-accent-bg-hover);
  --btn-focus-shadow-rgb: var(--pool-brand-rgb);
  --bs-btn-focus-shadow-rgb: var(--pool-brand-rgb);
  box-shadow: 0 .35rem .9rem -.4rem rgba(var(--pool-ink-rgb), .45);
}

.btn.btn-pool-accent,
.btn.btn-pool-accent:focus,
.btn.btn-warning,
.btn.btn-warning:focus {
  background-color: var(--pool-accent-bg);
  border-color: var(--pool-accent-bg);
  color: var(--pool-accent-ink);
}
.btn.btn-pool-accent:hover, .btn.btn-pool-accent:active, .btn.btn-pool-accent.active,
.btn.btn-warning:hover, .btn.btn-warning:active, .btn.btn-warning.active {
  background-color: var(--pool-accent-bg-hover);
  border-color: var(--pool-accent-bg-hover);
  color: var(--pool-accent-ink);
}

/* ---- badges: text-bg-* re-coloured to the palette (success / warning stay semantic) ---- */
.badge.text-bg-info      { color: var(--pool-brand-hover) !important; background-color: rgba(var(--pool-brand-rgb), .14) !important; }
.badge.text-bg-primary   { color: var(--pool-on-brand) !important;    background-color: var(--pool-brand) !important; }
.badge.text-bg-secondary { color: var(--pool-ink) !important;         background-color: rgba(var(--pool-ink-rgb), .1) !important; }
.badge.text-bg-light     { color: var(--pool-ink) !important;         background-color: var(--pool-surface-2) !important; }
.badge.text-bg-dark      { color: #FFFFFF !important;                 background-color: var(--pool-nav-bg) !important; }
.pool-dark .badge.text-bg-dark, [data-bs-theme="dark"] .badge.text-bg-dark { background-color: var(--pool-surface-2) !important; }
.com-poolfinder__banner .badge.text-bg-warning { color: var(--pool-accent-ink) !important; background-color: var(--pool-accent-bg) !important; }

/* ---- forms ---- */
.form-control, .form-select {
  background-color: var(--pool-input-bg);
  border-color: var(--pool-input-border);
  color: var(--pool-ink);
  border-radius: var(--pool-radius-sm);
}
.form-control::placeholder { color: var(--pool-muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  background-color: var(--pool-input-bg);
  color: var(--pool-ink);
  border-color: var(--pool-brand);
  box-shadow: 0 0 0 .25rem rgba(var(--pool-brand-rgb), .22);
}
.form-check-input:checked { background-color: var(--pool-brand); border-color: var(--pool-brand); }
.form-check-input:focus { border-color: var(--pool-brand); box-shadow: 0 0 0 .25rem rgba(var(--pool-brand-rgb), .22); }
.form-text, .control-label .form-control-feedback { color: var(--pool-muted); }
.input-group-text { background-color: var(--pool-surface-2); border-color: var(--pool-input-border); color: var(--pool-ink); }

/* ---- tables ---- */
.table {
  --table-color: var(--pool-ink);
  --bs-table-color: var(--pool-ink);
  --table-bg: transparent;
  --bs-table-bg: transparent;
  --table-border-color: var(--pool-border);
  --bs-table-border-color: var(--pool-border);
  --table-striped-bg: rgba(var(--pool-brand-rgb), .05);
  --bs-table-striped-bg: rgba(var(--pool-brand-rgb), .05);
  --table-striped-color: var(--pool-ink);
  --bs-table-striped-color: var(--pool-ink);
  --table-hover-bg: rgba(var(--pool-brand-rgb), .09);
  --bs-table-hover-bg: rgba(var(--pool-brand-rgb), .09);
  --table-hover-color: var(--pool-ink);
  --bs-table-hover-color: var(--pool-ink);
}
.table > thead > tr > th { color: var(--pool-heading); background-color: var(--pool-surface-2); border-bottom-color: var(--pool-border); }

/* ---- pagination ---- */
.pagination {
  --pagination-color: var(--pool-brand);
  --bs-pagination-color: var(--pool-brand);
  --pagination-bg: var(--pool-surface);
  --bs-pagination-bg: var(--pool-surface);
  --pagination-border-color: var(--pool-border);
  --bs-pagination-border-color: var(--pool-border);
  --pagination-hover-color: var(--pool-brand-hover);
  --bs-pagination-hover-color: var(--pool-brand-hover);
  --pagination-hover-bg: rgba(var(--pool-brand-rgb), .08);
  --bs-pagination-hover-bg: rgba(var(--pool-brand-rgb), .08);
  --pagination-hover-border-color: var(--pool-border);
  --bs-pagination-hover-border-color: var(--pool-border);
  --pagination-focus-color: var(--pool-brand-hover);
  --bs-pagination-focus-color: var(--pool-brand-hover);
  --pagination-focus-bg: rgba(var(--pool-brand-rgb), .08);
  --bs-pagination-focus-bg: rgba(var(--pool-brand-rgb), .08);
  --pagination-active-color: var(--pool-on-brand);
  --bs-pagination-active-color: var(--pool-on-brand);
  --pagination-active-bg: var(--pool-brand);
  --bs-pagination-active-bg: var(--pool-brand);
  --pagination-active-border-color: var(--pool-brand);
  --bs-pagination-active-border-color: var(--pool-brand);
  --pagination-disabled-color: var(--pool-muted);
  --bs-pagination-disabled-color: var(--pool-muted);
  --pagination-disabled-bg: var(--pool-surface-2);
  --bs-pagination-disabled-bg: var(--pool-surface-2);
  --pagination-disabled-border-color: var(--pool-border);
  --bs-pagination-disabled-border-color: var(--pool-border);
}

/* ---- tabs, dropdowns, list groups, accordion, alerts ---- */
.nav.nav-tabs .nav-link { color: var(--pool-brand-hover); }
.nav.nav-tabs .nav-link.active::after { background: linear-gradient(90deg, var(--pool-bright), var(--pool-brand)); }
.dropdown-menu {
  --dropdown-bg: var(--pool-surface);
  --bs-dropdown-bg: var(--pool-surface);
  --dropdown-color: var(--pool-ink);
  --bs-dropdown-color: var(--pool-ink);
  --dropdown-border-color: var(--pool-border);
  --bs-dropdown-border-color: var(--pool-border);
  --dropdown-link-color: var(--pool-ink);
  --bs-dropdown-link-color: var(--pool-ink);
  --dropdown-link-hover-color: var(--pool-heading);
  --bs-dropdown-link-hover-color: var(--pool-heading);
  --dropdown-link-hover-bg: rgba(var(--pool-brand-rgb), .1);
  --bs-dropdown-link-hover-bg: rgba(var(--pool-brand-rgb), .1);
  --dropdown-link-active-color: var(--pool-on-brand);
  --bs-dropdown-link-active-color: var(--pool-on-brand);
  --dropdown-link-active-bg: var(--pool-brand);
  --bs-dropdown-link-active-bg: var(--pool-brand);
  --dropdown-border-radius: var(--pool-radius-sm);
  --bs-dropdown-border-radius: var(--pool-radius-sm);
}
.list-group {
  --list-group-bg: var(--pool-surface);
  --bs-list-group-bg: var(--pool-surface);
  --list-group-color: var(--pool-ink);
  --bs-list-group-color: var(--pool-ink);
  --list-group-border-color: var(--pool-border);
  --bs-list-group-border-color: var(--pool-border);
  --list-group-action-color: var(--pool-ink);
  --bs-list-group-action-color: var(--pool-ink);
  --list-group-action-hover-bg: rgba(var(--pool-brand-rgb), .08);
  --bs-list-group-action-hover-bg: rgba(var(--pool-brand-rgb), .08);
  --list-group-active-color: var(--pool-on-brand);
  --bs-list-group-active-color: var(--pool-on-brand);
  --list-group-active-bg: var(--pool-brand);
  --bs-list-group-active-bg: var(--pool-brand);
  --list-group-active-border-color: var(--pool-brand);
  --bs-list-group-active-border-color: var(--pool-brand);
}
.accordion {
  --accordion-bg: var(--pool-surface);
  --bs-accordion-bg: var(--pool-surface);
  --accordion-color: var(--pool-ink);
  --bs-accordion-color: var(--pool-ink);
  --accordion-border-color: var(--pool-border);
  --bs-accordion-border-color: var(--pool-border);
  --accordion-btn-color: var(--pool-heading);
  --bs-accordion-btn-color: var(--pool-heading);
  --accordion-active-color: var(--pool-brand);
  --bs-accordion-active-color: var(--pool-brand);
  --accordion-active-bg: rgba(var(--pool-brand-rgb), .08);
  --bs-accordion-active-bg: rgba(var(--pool-brand-rgb), .08);
  --accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--pool-brand-rgb), .22);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--pool-brand-rgb), .22);
}
.alert-info {
  --alert-color: var(--pool-heading);
  --bs-alert-color: var(--pool-heading);
  --alert-bg: rgba(var(--pool-brand-rgb), .1);
  --bs-alert-bg: rgba(var(--pool-brand-rgb), .1);
  --alert-border-color: rgba(var(--pool-brand-rgb), .35);
  --bs-alert-border-color: rgba(var(--pool-brand-rgb), .35);
  --alert-link-color: var(--pool-brand-hover);
  --bs-alert-link-color: var(--pool-brand-hover);
}
.bg-primary { background-color: rgba(var(--pool-brand-rgb), var(--bg-opacity, 1)) !important; }
.badge.bg-primary { color: var(--pool-on-brand) !important; }

/* ==========================================================================
   8. DARK MODULES
   Add  pool-dark  to a module's "Module Class" (Advanced tab). Use a leading
   space:  " pool-dark". Works on card-chrome modules, no-chrome modules
   (Custom, Menu, Search ...), Custom HTML blocks and menu-item page classes.
   Everything inside flips automatically through the token re-map above.
   ========================================================================== */
.mod-custom.pool-dark,
.moduletable.pool-dark,
.pool-hero,
.pool-panel.pool-dark { padding: 1.25rem 1.5rem; border-radius: var(--pool-radius); }
.card.pool-dark { border-color: var(--pool-border); box-shadow: 0 14px 32px -18px rgba(7, 26, 44, .6); }
.pool-dark .card-header::after, .pool-hero .card-header::after { background: linear-gradient(90deg, var(--pool-bright), var(--pool-brand)); }
.pool-dark .nav.nav-tabs .nav-link { color: var(--pool-brand); }
.pool-dark .nav-tabs { background-color: transparent; border-color: var(--pool-border); box-shadow: none; }
.pool-dark .nav-tabs .nav-link.active { background-color: var(--pool-surface-2); color: var(--pool-heading); }
.pool-dark .form-check-input:not(:checked) { background-color: var(--pool-input-bg); border-color: var(--pool-input-border); }
.pool-dark .text-muted { color: var(--pool-muted) !important; }
.pool-dark .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Whole dark page: Menu Item > Page Display > Page Class = " pool-dark" (lands on <body>) */
html:has(body.pool-dark) { background-color: var(--pool-nav-deep); }
body.site.pool-dark { background-color: var(--pool-bg); }

/* Revert a section back to light inside a dark one */
.pool-light { color: var(--pool-ink); }

/* ==========================================================================
   9. HELPERS
   ========================================================================== */
/* full-width hero (banner position / Custom module):  <div class="pool-hero"> ... */
.pool-hero {
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem);
  background-color: var(--pool-nav-deep);
  background-image:
    radial-gradient(48rem 24rem at 88% -20%, rgba(var(--pool-bright-rgb), .38), transparent 70%),
    linear-gradient(135deg, var(--pool-nav-bg) 0%, var(--pool-nav-deep) 100%);
  color: var(--pool-ink);
}
.pool-hero :is(h1, h2) { color: var(--pool-heading); }
.container-banner .pool-hero { border-radius: 0; }

/* white content panel on the tinted page:  <div class="pool-panel"> */
.pool-panel {
  background-color: var(--pool-surface);
  border: 1px solid var(--pool-border);
  border-radius: var(--pool-radius);
  padding: 1.25rem 1.5rem;
}
/* soft pill for tags: <span class="pool-chip">Rooftop</span> */
.pool-chip {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .2rem .7rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; line-height: 1.4;
  color: var(--pool-brand); background-color: rgba(var(--pool-brand-rgb), .12);
}
.pool-chip-accent { color: var(--pool-accent-ink); background-color: var(--pool-accent-bg); }
/* brand gradient rule under a heading: <h2 class="pool-rule"> */
.pool-rule::after {
  content: ""; display: block; width: 3rem; height: 3px; margin-top: .6rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--pool-bright), var(--pool-brand));
}

@media (prefers-reduced-motion: reduce) {
  .container-header .mod-menu > li::after { transition: none; }
}


/* Header styling */
@media (min-width: 992px) {
 .container-header .container-nav nav {
    margin-left: auto;
    margin-right: auto;
 }
}
.container-header .container-nav nav {
    margin-top: 5px;
}

/* Offcanvas menu styling */
.offcanvas {
    background-color: var(--cassiopeia-color-primary);
}
@media (max-width: 991.98px) {
    .offcanvas {
        max-width: 80%;
   }
}

/* Footer menu styling */
.footer .grid-child {
  display: block;
}