@charset "UTF-8";
/* ==========================================================================
   Voyara — Dark mode (standalone → css/darkmode.css, loaded AFTER template.css
   via index.php addCustomTag). Light is untouched. Hook = html.t4-dark (+ the
   pre-paint/darkmode.js also set data-bs-theme="dark" for BS components).
   Dark MIRRORS light: same relationships, every state. One token remap flips all.
   ========================================================================== */
html.t4-dark {
  /* Dark palette (design-system.md dark column) — single source, GUI-friendly */
  --voy-primary:#D86A3F;
  --voy-primary-hover:#E27E55;
  --voy-on-primary:#FFFFFF;
  --voy-secondary:#46A39D;
  --voy-secondary-ink:#EAF4F3;
  --voy-accent:#E8B66F;
  --voy-on-accent:#1A1209;
  --voy-bg:#15110E;
  --voy-surface:#211B16;
  --voy-elevated:#1C1712;
  --voy-text:#E8DFD4;
  --voy-heading:#FBF6EF;
  --voy-muted:#9C9085;
  --voy-text-dim:#9C9085; /* P23: companion token — same dark value as muted */
  --voy-border:#352C24;
  --voy-field-border:#4A3F35;
  --voy-danger:#E2745A;
  --voy-sh-sm:0 1px 3px #00000066;
  --voy-sh-md:0 8px 24px #00000080;
  --voy-sh-lg:0 16px 40px #0000008C;
  /* Remap T4 / Bootstrap tokens (the big lever) */
  --body-bg-color:var(--voy-bg);
  --body-text-color:var(--voy-text);
  --heading-color:var(--voy-heading);
  --border-color:var(--voy-border);
  --color-light:var(--voy-elevated);
  --color-dark:var(--voy-surface);
  --bs-body-bg:var(--voy-bg);
  --bs-body-color:var(--voy-text);
  --bs-border-color:var(--voy-border);
  --bs-link-color:var(--voy-primary);
  --bs-link-hover-color:var(--voy-primary-hover);
  --bs-emphasis-color:var(--voy-heading);
  --bs-secondary-color:var(--voy-muted);
  --t4-card-bg:var(--voy-surface);
  --t4-card-border-color:var(--voy-border);
  /* T4 footer link var hardcodes light-muted #8A7E72 → flip to dark-muted #9C9085 */
  --footer-link-color:var(--voy-muted);
}

/* T4 section-palette wrappers hardcode light hex — flip them (gotcha #58) */
html.t4-dark .t4-palette-gray,
html.t4-dark .t4-palette-light {
  background-color: var(--voy-elevated) !important;
  color: var(--voy-text);
}

html.t4-dark .t4-palette-gray :is(h1, h2, h3, h4, h5, h6),
html.t4-dark .t4-palette-light :is(h1, h2, h3, h4, h5, h6) {
  color: var(--voy-heading);
}

/* Joomla user-form / Bootstrap cards default white in dark (gotcha #59) */
html.t4-dark .card,
html.t4-dark .auth-card,
html.t4-dark .com-users-login,
html.t4-dark .registration,
html.t4-dark .profile-edit {
  background-color: var(--voy-surface);
  border-color: var(--voy-border);
  color: var(--voy-text);
}

/* Bootstrap utility leaks (gotcha #18) */
html.t4-dark .bg-light {
  background-color: var(--voy-elevated) !important;
  color: var(--voy-text);
}

html.t4-dark .bg-white {
  background-color: var(--voy-surface) !important;
}

html.t4-dark .text-dark {
  color: var(--voy-heading) !important;
}

html.t4-dark .text-muted {
  color: var(--voy-muted) !important;
}

/* Article-body code blocks always-dark (gotcha #67) — already dark, keep readable */
html.t4-dark .item-page pre, html.t4-dark .article-prose pre, .voy-canvas-body pre {
  background-color: #0F0C0A;
  color: #E8DFD4;
  border: 1px solid var(--voy-border);
}

/* figure figcaption legacy dark-bar leak (gotcha #62) */
.ja-acm figcaption, .voy-card figcaption, .testimonial-author {
  background: transparent;
  color: var(--voy-text);
  text-transform: none;
  padding: 0;
  text-shadow: none;
}

/* Form fields stay white in dark unless forced (gotcha #59 family) */
html.t4-dark .form-control,
html.t4-dark .inputbox,
html.t4-dark input[type=text],
html.t4-dark input[type=email],
html.t4-dark input[type=password],
html.t4-dark input[type=search],
html.t4-dark input[type=tel],
html.t4-dark input[type=url],
html.t4-dark input[type=number],
html.t4-dark textarea,
html.t4-dark select {
  background-color: var(--voy-surface) !important;
  color: var(--voy-text) !important;
  border-color: var(--voy-field-border) !important;
}

html.t4-dark .form-control::placeholder {
  color: var(--voy-muted) !important;
}

html.t4-dark .form-select {
  background-color: var(--voy-surface) !important;
  color: var(--voy-text) !important;
}

/* checkbox/radio + remember-me box */
html.t4-dark .form-check-input {
  background-color: var(--voy-elevated);
  border-color: var(--voy-field-border);
}

html.t4-dark .form-check-input:checked {
  background-color: var(--voy-primary);
  border-color: var(--voy-primary);
}

/* dropdown / mega panel surfaces in dark */
html.t4-dark .t4-megamenu .dropdown-menu,
html.t4-dark .t4-megamenu .mega-dropdown-menu {
  background: var(--voy-surface);
  border-color: var(--voy-border);
}

/* mega/dropdown panel item links: base `.t4-megamenu .dropdown-menu li > a`
   (0,3,1) = var(--mainnav-link-color) (literal #2B2420, never flips) wins over
   the token rule → near-black on the dark panel. Pin to the dark text token. */
html.t4-dark .t4-megamenu .dropdown-menu li > a,
html.t4-dark .t4-megamenu .dropdown-menu li > .nav-link,
html.t4-dark .t4-megamenu .dropdown-menu li .dropdown-item,
html.t4-dark .t4-megamenu .dropdown-menu a,
html.t4-dark .t4-megamenu .mega-col-nav a {
  color: var(--voy-text);
}
html.t4-dark .t4-megamenu .dropdown-menu li > a:hover,
html.t4-dark .t4-megamenu .dropdown-menu li .dropdown-item:hover,
html.t4-dark .t4-megamenu .mega-col-nav a:hover {
  color: var(--voy-primary);
  background: transparent;
}
/* mega column titles already use --voy-muted (flips); ensure span inherits */
html.t4-dark .t4-megamenu .mega-col-title,
html.t4-dark .t4-megamenu .mega-col-title span {
  color: var(--voy-muted);
}

/* off-canvas drawer */
html.t4-dark .t4-offcanvas, html.t4-dark #t4-off-canvas {
  background: var(--voy-surface);
  color: var(--voy-text);
}

/* off-canvas DARK leaks — nested reveal states keep T4/BS light defaults
   (drilldown back-bar, chevron disc, item hairlines, default close button).
   These read as white/light bands on the dark drawer → flip to dark tokens. */
/* drilldown back-bar (.sub-menu-back) ships BS light #F8F9FA / near-black text */
html.t4-dark .t4-offcanvas .sub-menu-back,
html.t4-dark .voy-offcanvas .sub-menu-back {
  background: var(--voy-elevated) !important;
  color: var(--voy-text) !important;
  border-top-color: var(--voy-border) !important;
  border-bottom-color: var(--voy-border) !important;
}
/* drilldown chevron disc (.btn-toggle) ships BS light #F2F4F6 circle */
html.t4-dark .t4-offcanvas .btn-toggle,
html.t4-dark .voy-offcanvas .btn-toggle,
html.t4-dark .t4-offcanvas .sub-menu-toggle,
html.t4-dark .voy-offcanvas .sub-menu-toggle {
  background-color: var(--voy-elevated) !important;
}
/* menu item hairlines use compile-time $border-color (BS #E9ECEF, never flips) */
html.t4-dark .t4-offcanvas .t4-off-canvas-body .navbar .nav-item,
html.t4-dark .voy-offcanvas .t4-off-canvas-body .navbar .nav-item,
html.t4-dark .t4-offcanvas .t4-off-canvas-body .dropdown-menu .nav-item,
html.t4-dark .voy-offcanvas .t4-off-canvas-body .dropdown-menu .nav-item {
  border-color: var(--voy-border) !important;
}
/* T4 default close button (.js-offcanvas-close) keeps a white circle in dark */
html.t4-dark .t4-offcanvas .js-offcanvas-close,
html.t4-dark .voy-offcanvas .js-offcanvas-close,
html.t4-dark .t4-offcanvas .voy-oc-close,
html.t4-dark .voy-offcanvas .voy-oc-close {
  background: var(--voy-elevated) !important;
  color: var(--voy-text) !important;
}

/* toggle icon swap */
html.t4-dark .t4-theme-toggle__moon {
  display: none;
}

html.t4-dark .t4-theme-toggle__sun {
  display: block;
}

/* Comparison table: .acm-cmp-thead class is on the <tr>, not <thead>
   Root fix: the comparison-table ACM css targets `.acm-cmp-thead tr` but the
   class is ON the tr — so the rule `.acm-cmp-thead tr` selects a non-existent
   nested tr. Override here with the correct selector. */
html.t4-dark .acm-cmp-thead {
  background: var(--voy-elevated, #1C1712) !important;
}

/* Article-body tables: Bootstrap leaves th/td at #212529 (dark-on-dark). Repaint
   to the dark body-text token so the Typography table stays legible in dark. */
html.t4-dark .com-content-article table th,
html.t4-dark .com-content-article table td,
html.t4-dark .voy-article-prose table th,
html.t4-dark .voy-article-prose table td {
  color: var(--voy-text);
  border-color: var(--voy-border);
}

html.t4-dark joomla-alert,
html.t4-dark .alert { background-color: var(--voy-elevated); border-color: var(--voy-border); color: var(--voy-text); }
html.t4-dark joomla-alert.alert-danger, html.t4-dark .alert-danger { border-left: 3px solid var(--voy-primary); }
html.t4-dark joomla-alert.alert-success, html.t4-dark .alert-success { border-left: 3px solid var(--voy-secondary); }
html.t4-dark joomla-alert.alert-warning, html.t4-dark .alert-warning { border-left: 3px solid #E8B66F; }
html.t4-dark joomla-alert.alert-info, html.t4-dark .alert-info { border-left: 3px solid var(--voy-muted); }
html.t4-dark .alert a, html.t4-dark .alert .alert-link { color: var(--voy-primary); }
html.t4-dark .alert-heading, html.t4-dark .alert .btn-close { color: var(--voy-heading); }

/* Defensive: any plain Bootstrap dropdown panel in the header nav must flip to a dark
   surface (the custom mega panels already do; this covers vanilla .dropdown-menu items). */
html.t4-dark .dropdown-menu { background-color: var(--voy-surface); border-color: var(--voy-border); }
html.t4-dark .dropdown-menu .dropdown-item { color: var(--voy-text); }
html.t4-dark .dropdown-menu .dropdown-item:hover,
html.t4-dark .dropdown-menu .dropdown-item:focus { background-color: var(--voy-elevated); color: var(--voy-heading); }
html.t4-dark .dropdown-divider { border-color: var(--voy-border); }

/*# sourceMappingURL=darkmode.css.map */

/* =========================================================================
   Content-embedded article title — dark-mode visibility
   Some articles style their title inline in the body HTML:
     <h1 class="voy-art-title" style="...;color:#1A1512;">
   That literal dark heading colour can't flip for dark mode, so the title
   renders dark-on-dark and is invisible (e.g. /resources/booking-policy).
   Override with the dark heading colour; !important beats the inline style.
   Scoped to .voy-art-title so it only touches this content design class. */
html.t4-dark .voy-art-title { color: var(--voy-heading) !important; }