/* Template Name: Aphrodite
Light Cream color scheme — SalonIntel palette
Scoped under html.theme-light so it overrides maincolors.css by
specificity (both sheets use !important; higher specificity wins).
The dark theme (maincolors.css) stays the default and is untouched.

Palette (from SalonIntel):
  canvas    #efeae3   page background
  surface   #faf8f5   cards, panels, dropdowns
  elevated  #ffffff   form fields
  ink       #1c1916   headings / primary text
  muted     #666058   body text (AA on canvas & surface)
  faint     #a89f94   decorative borders only
  hairline  #e4ded4   dividers
  green     #586c57   accent text (AA on cream)
  olive     #92ad80   brand fills/borders (inherited from maincolors)
*/

/* ===== Canvas — page background ===== */
html.theme-light body,
html.theme-light section,
html.theme-light #preloader {
  background-color: #efeae3 !important;
}

/* ===== Surface — cards, panels, menus ===== */
html.theme-light .blog-card .post-info,
html.theme-light .bg-info,
html.theme-light .alert-info,
html.theme-light .dropdown-menu,
html.theme-light .pagination > li > a,
html.theme-light .pagination > li > span,
html.theme-light .pagination > li > a:focus,
html.theme-light .card,
html.theme-light .testimonial .content,
html.theme-light .nav-tabs .nav-link,
html.theme-light .bg-secondary,
html.theme-light #sidebar {
  background-color: #faf8f5 !important;
}

/* ===== Dark ink buttons (were black-on-black in dark theme) ===== */
html.theme-light .back-to-top,
html.theme-light .btn-info,
html.theme-light .btn-secondary,
html.theme-light .btn-default:hover,
html.theme-light .btn-primary:hover {
  background-color: #1c1916 !important;
}
html.theme-light .back-to-top i,
html.theme-light .btn-info,
html.theme-light .btn-secondary,
html.theme-light .btn-default:hover,
html.theme-light .btn-primary:hover,
html.theme-light button.btn-primary:hover {
  color: #efeae3 !important;
}
html.theme-light .btn-primary:hover,
html.theme-light .btn-secondary:hover {
  outline: 1px solid #1c1916;
}
html.theme-light .btn-secondary {
  outline: 1px solid #1c1916;
}
html.theme-light .btn.btn-info:hover,
html.theme-light .btn-secondary:hover {
  background-color: #ffffff !important;
  color: #1c1916 !important;
}

/* ===== Ink — structural text the !important groups below don't reach
   (rest of the old white-group mirror was dead code: every other selector
   was overridden by the muted/heading/accent !important groups) ===== */
html.theme-light .blog-card .post-info,
html.theme-light .accordion-button.collapsed,
html.theme-light .alert-info,
html.theme-light .list-group-item {
  color: #1c1916;
}
/* body copy one step softer (mirror of the 71%-white group) */
html.theme-light ul.custom li,
html.theme-light body,
html.theme-light p,
html.theme-light span,
html.theme-light i:hover,
html.theme-light a:hover,
html.theme-light a:focus {
  color: #666058 !important;
}
/* maincolors.css paints ul/li white directly (non-!important). Let lists
   inherit their container's colour instead, so they follow body text,
   accordion bodies, panels and photo cards alike. */
html.theme-light :where(ul, ol, li) {
  color: inherit;
}
/* headings stay full ink (must come after the muted group) */
html.theme-light h1,
html.theme-light h2,
html.theme-light h3,
html.theme-light h4,
html.theme-light h5,
html.theme-light h6,
html.theme-light h1 span,
html.theme-light h2 span,
html.theme-light h3 span,
html.theme-light h4 span,
html.theme-light h5 span,
html.theme-light h6 span {
  color: #1c1916 !important;
}

/* ===== Accent text — deep sage green, AA on cream (mirror of the olive group) ===== */
html.theme-light span.sub-header,
html.theme-light .sub-header,
html.theme-light .nav-link,
html.theme-light .text-info,
html.theme-light .slick-dots li button:before,
html.theme-light .post-info-single i,
html.theme-light .testimonial .content:before,
html.theme-light a,
html.theme-light .menu-item-price span,
html.theme-light .accordion-button:not(.collapsed),
html.theme-light .accordion-button:hover,
html.theme-light .breadcrumb-item a,
html.theme-light .btn-outline-secondary:active,
html.theme-light .btn-outline-secondary:focus,
html.theme-light .btn-outline-secondary:hover,
html.theme-light .btn-outline-primary,
html.theme-light .slick-prev:before,
html.theme-light .slick-next:before,
html.theme-light blockquote:before,
html.theme-light ul.custom li:before,
html.theme-light .margin-icon,
html.theme-light .text-secondary,
html.theme-light .social-media i,
html.theme-light .brand,
html.theme-light .brand i {
  color: #586c57 !important;
}
/* nav active/hover keep ink on olive (inherits olive bg from maincolors) */
html.theme-light .navbar-default .navbar-nav > li > a.active,
html.theme-light .navbar-default .navbar-nav > li > a:hover,
html.theme-light .navbar-default .navbar-nav > .active > a,
html.theme-light .navbar-default .navbar-nav > .active > a:focus,
html.theme-light .navbar-default .navbar-nav > .active > a:hover,
html.theme-light .navbar-default .navbar-nav > li > a:focus {
  color: #1c1916 !important;
}

/* ===== Soft olive wash (mirror of "light olive") ===== */
html.theme-light .card.bg-light,
html.theme-light #blog-sidebar .card-header,
html.theme-light #elements h3.subheader,
html.theme-light .table-striped > tbody > tr:nth-of-type(odd),
html.theme-light .list-group-item,
html.theme-light .bg-light {
  background-color: rgb(146 173 128 / 18%) !important;
}

/* ===== Borders & hairlines ===== */
html.theme-light .dropdown-menu,
html.theme-light .card,
html.theme-light .pagination > li > a,
html.theme-light .pagination > li > span {
  border-color: #e4ded4 !important;
}
html.theme-light .form-control,
html.theme-light .form-select {
  background-color: #ffffff !important;
  color: #1c1916 !important;
  /* field boundaries need >= 3:1 (WCAG 1.4.11): #8a8177 is 3.3:1 on cream */
  border-color: #8a8177 !important;
}
html.theme-light .form-control::placeholder {
  color: #8a8177;
}
html.theme-light .form-control:focus {
  border-color: #586c57 !important;
}
html.theme-light .form-check-input {
  background-color: #ffffff;
}

/* ===== Logo & preloader — white artwork inverted to warm ink ===== */
html.theme-light .brand img,
html.theme-light .preloader-logo {
  filter: invert(0.86) sepia(0.18);
}

/* ===== Text over photos stays white — overlay cards keep their dark scrim
   (.page-header excluded: in light mode it gets a cream wash + ink text) ===== */
html.theme-light .card-service :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong),
html.theme-light .card-service .more-link,
html.theme-light .bg-overlay1:not(.page-header) :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, .lead),
html.theme-light .bg-overlay2 :is(h1, h2, h3, h4, h5, h6, p, span, li, a, strong, .lead),
html.theme-light .boxbg1 :is(h1, h2, h3, h4, h5, h6, p, span, li, strong),
html.theme-light .boxbg2 :is(h1, h2, h3, h4, h5, h6, p, span, li, strong),
html.theme-light .boxbg3 :is(h1, h2, h3, h4, h5, h6, p, span, li, strong),
html.theme-light .text-grid,
html.theme-light .text-grid span {
  color: #ffffff !important;
}
/* Badges inside photo cards keep their component-set dark text */
html.theme-light .card-service .service-badge {
  color: #212529 !important;
}

/* =====================================================================
   Gap patches — rules in style.css / plugins.css / component styles
   that outrank or bypass the mirror groups above (CSS-coverage audit)
   ===================================================================== */

/* Nav links: style.css .navbar-default .navbar-nav > li > a is #fff !important
   and beats .nav-link on specificity — match and exceed it */
html.theme-light .navbar-default .navbar-nav > li > a {
  color: #586c57 !important;
}
html.theme-light .navbar-default .navbar-nav > li > a:hover,
html.theme-light .navbar-default .navbar-nav > li > a.active,
html.theme-light .navbar-default .navbar-nav > .open > a,
html.theme-light .navbar-default .navbar-nav > .open > a:focus,
html.theme-light .navbar-default .navbar-nav > .open > a:hover {
  color: #1c1916 !important;
}
html.theme-light .navbar-default .navbar-toggler {
  color: #1c1916;
}
html.theme-light .dropdown-item {
  color: #1c1916 !important;
}
html.theme-light .navbar-info {
  color: #666058;
}
html.theme-light #sidebar .social-media i:hover {
  color: #1c1916 !important;
}
html.theme-light .navbar-collapse::-webkit-scrollbar-track {
  background-color: #e4ded4;
}
html.theme-light .navbar-collapse::-webkit-scrollbar-thumb {
  background-color: #a89f94;
}

/* Headings/text hardcoded white in style.css */
html.theme-light #elements h3.subheader,
html.theme-light #blog-sidebar .card-header,
html.theme-light #blog-sidebar .card {
  color: #1c1916 !important;
}
html.theme-light .date-category {
  color: #1c1916 !important;
}

/* Generic .btn: white text + white glow shadows in style.css */
html.theme-light .btn {
  color: #1c1916;
  box-shadow: 1px 1px 12px 2px rgb(28 25 22 / 8%);
}
/* Olive primary buttons: the accent `a` rule (!important) turned link-buttons
   sage-on-olive (2.3:1). Ink on olive = 7:1. Hover keeps ink bg + cream text. */
html.theme-light .btn-primary {
  color: #1c1916 !important;
}
html.theme-light .box-shadow-btn:hover {
  box-shadow: -2px 0px 20px rgb(28 25 22 / 25%) !important;
}
html.theme-light .white-outline {
  outline: 1px solid rgb(28 25 22 / 30%);
}
html.theme-light .parallax-effect img {
  box-shadow: 0px 0px 40px 5px rgba(28, 25, 22, 0.18);
  -webkit-box-shadow: 0px 0px 40px 5px rgba(28, 25, 22, 0.18);
  -moz-box-shadow: 0px 0px 40px 5px rgba(28, 25, 22, 0.18);
}
html.theme-light .img-glow:hover {
  box-shadow: 0px 0px 60px 15px rgba(28, 25, 22, 0.2);
}

/* Reveal animation block matches the cream canvas */
html.theme-light .block-reveal,
html.theme-light .revealedBox > span {
  background-color: #efeae3 !important;
}

/* Accordion: white chevron SVG + 71%-white body text in style.css */
html.theme-light .accordion-button:after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231c1916'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
html.theme-light .accordion-body,
html.theme-light .accordion-body p {
  color: #666058 !important;
}

/* Tables: style.css sets color white !important on cells */
html.theme-light .table,
html.theme-light .table-hover:hover td,
html.theme-light .table-striped > tbody > tr:nth-of-type(odd) > *,
html.theme-light .table > thead > tr > th {
  color: #1c1916 !important;
}

/* Page header: in light mode the dark scrim becomes a cream wash — the photo
   shimmers through faintly and the title flips to ink. Scoped to .page-header
   only; other .bg-overlay1/.card-service photo boxes keep their dark scrim. */
html.theme-light .page-header.bg-overlay1 {
  box-shadow: inset 0 0 0 1000px rgb(239 234 227 / 88%);
}
html.theme-light .page-header h1 {
  color: #1c1916 !important;
}
html.theme-light .page-header .breadcrumb,
html.theme-light .page-header .breadcrumb-item.active,
html.theme-light .page-header .breadcrumb-item + .breadcrumb-item::before {
  color: #666058 !important;
}
html.theme-light .page-header .breadcrumb-item a {
  color: #586c57 !important;
}
html.theme-light .page-header .breadcrumb-item a:hover {
  color: #1c1916 !important;
}

/* Pagination / breadcrumb / list-group whites */
html.theme-light .pagination > li > a:hover {
  color: #1c1916 !important;
}
html.theme-light .breadcrumb,
html.theme-light .breadcrumb-item.active,
html.theme-light .breadcrumb-item + .breadcrumb-item::before {
  color: #666058 !important;
}
html.theme-light .breadcrumb-item a:hover {
  color: #1c1916 !important;
}
html.theme-light .list-group-item {
  border-color: #e4ded4 !important;
}
html.theme-light a.list-group-item:focus,
html.theme-light a.list-group-item:hover,
html.theme-light button.list-group-item:focus,
html.theme-light button.list-group-item:hover,
html.theme-light .list-group-item.active,
html.theme-light .list-group-item.active:focus,
html.theme-light .list-group-item.active:hover {
  color: #1c1916 !important;
}

/* Slick carousel: active dot renders white (plugins.css/maincolors race) */
html.theme-light .slick-dots li.slick-active button:before {
  color: #586c57 !important;
}

/* Newsletter inputs (component styles: white text, dark autofill, and a
   50%-olive border that is only ~1.5:1 on cream) */
html.theme-light .hsh-signup-input {
  border-color: #8a8177 !important;
}
html.theme-light .hsh-signup-input:focus {
  border-color: #586c57 !important;
}
html.theme-light .hsh-signup-input {
  color: #1c1916 !important;
  -webkit-text-fill-color: #1c1916 !important;
  caret-color: #1c1916 !important;
}
html.theme-light .hsh-signup-input:focus,
html.theme-light .hsh-signup-input:active,
html.theme-light .hsh-signup-input:hover {
  color: #1c1916 !important;
  -webkit-text-fill-color: #1c1916 !important;
}
html.theme-light .hsh-signup-input::placeholder {
  color: rgba(28, 25, 22, 0.45) !important;
  -webkit-text-fill-color: rgba(28, 25, 22, 0.45) !important;
}
html.theme-light .hsh-signup-input:-webkit-autofill,
html.theme-light .hsh-signup-input:-webkit-autofill:hover,
html.theme-light .hsh-signup-input:-webkit-autofill:focus,
html.theme-light .hsh-signup-input:-webkit-autofill:active {
  -webkit-text-fill-color: #1c1916 !important;
  caret-color: #1c1916 !important;
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
}
html.theme-light .hsh-signup-input:autofill {
  color: #1c1916 !important;
  background-color: #ffffff !important;
}
html.theme-light .hsh-signup-message.is-success {
  color: #586c57 !important;
}
html.theme-light .hsh-signup-message.is-error {
  color: #b3423a !important;
}

/* Blog: olive #92ad80 headings/links have ~2.2:1 contrast on cream */
html.theme-light .post-title,
html.theme-light .markdown-content h2,
html.theme-light .markdown-content h3,
html.theme-light .markdown-content h4,
html.theme-light .markdown-content h5,
html.theme-light .markdown-content h6,
html.theme-light .green-h6,
html.theme-light .markdown-content a,
html.theme-light .green-checkmark {
  color: #586c57 !important;
}
html.theme-light .card-title a {
  color: #1c1916 !important;
}
html.theme-light .markdown-content blockquote {
  background-color: rgba(146, 173, 128, 0.12) !important;
}

/* =====================================================================
   Photo boxes on home/behandelingen: photos ARE the content there, so in
   light mode the heavy 75% black scrim becomes a light warm veil — photos
   brighten, white labels keep reading via a stronger text shadow.
   ===================================================================== */
html.theme-light .bg-overlay1:not(.page-header),
html.theme-light .card-service {
  box-shadow: inset 0 0 0 1000px rgb(28 25 22 / 38%);
}
html.theme-light .card-service:hover {
  box-shadow: inset 0 0 0 1000px rgb(28 25 22 / 18%);
}
html.theme-light .bg-overlay2 {
  box-shadow: inset 0 0 0 1000px rgb(28 25 22 / 55%);
}
html.theme-light .text-grid,
html.theme-light .card-service .txt {
  text-shadow: 0 1px 14px rgb(0 0 0 / 65%);
}
/* style.css hangs the white card title 2rem outside the photo (margin-left:
   -2rem) — fine on black, white-on-cream in light mode. Keep it inside the
   photo and slide gently on hover, like the template's mobile layout. */
html.theme-light .card-service .txt {
  margin-left: 1.5rem;
}
html.theme-light .card-service-collumn:hover .card-service .txt {
  margin-left: 2rem;
}

/* =====================================================================
   Forge-review fixes: global ink/muted/accent rules were beating
   component-set dark text on olive/gold fills (contrast 2.3–2.6:1)
   ===================================================================== */
/* Badges & panels with olive/gold fills keep dark text */
html.theme-light .price-badge,
html.theme-light .traject-badge,
html.theme-light .bg-primary :is(.sub-header, span, p, li, strong, a:not(.btn)),
html.theme-light .blog-tags a,
html.theme-light .green-outline-btn:hover {
  color: #212529 !important;
}
/* Markdown tables: th stays white!important in blog styles, bg is olive */
html.theme-light .markdown-content th {
  color: #1c1916 !important;
}
/* Price list: keep price accent distinct from muted duration */
html.theme-light .price {
  color: #586c57 !important;
}
/* Link hover: brighten to ink instead of dimming to muted */
html.theme-light a:hover,
html.theme-light a:focus {
  color: #1c1916 !important;
}
/* Slick controls: recolored but opacity made them fail 3:1 */
html.theme-light .slick-prev:before,
html.theme-light .slick-next:before {
  opacity: 1 !important;
}
html.theme-light .slick-dots li button:before {
  opacity: 0.45 !important;
}
/* Lightbox (Magnific) keeps its dark backdrop in both themes — captions stay light */
html.theme-light .mfp-title {
  color: #f3f3f3 !important;
}
html.theme-light .mfp-counter,
html.theme-light .mfp-figure small {
  color: #cccccc !important;
}

/* =====================================================================
   Prijslijst: calmer & more minimal in light mode — no olive panel,
   no white tab blocks; quiet text tabs with a sage underline on active
   ===================================================================== */
html.theme-light .tab-content.bg-light {
  background-color: transparent !important;
}
html.theme-light .nav-tabs .nav-link {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #666058 !important;
}
html.theme-light .nav-tabs .nav-link.active,
html.theme-light .nav-tabs .nav-link.active:hover,
html.theme-light .nav-tabs .nav-link:hover,
html.theme-light .nav-tabs .nav-link:focus {
  background-color: transparent !important;
  color: #1c1916 !important;
  box-shadow: inset 0 -2px 0 0 #586c57;
}
html.theme-light .nav-tabs.border-top,
html.theme-light .nav-tabs.border-bottom {
  border-color: #a89f94 !important;
}

/* Keyboard focus ring: ink is >= 7:1 on cream, olive panels and photos */
html.theme-light :focus-visible,
html.theme-light .bg-primary :focus-visible {
  outline-color: #1c1916 !important;
}

/* ===== Light color-scheme (toggle styling lives in Sidebar.astro) ===== */
html.theme-light { color-scheme: light; }