/* ═══════════════════════════════════════════════════════════
   Abualkomboz — GLOBAL color/font layer (all pages except home)
   Scope: colors → monochrome, font → Readex Pro, dark mode.
   Layout, spacing, shapes and content are untouched.
   ═══════════════════════════════════════════════════════════ */

:root {
  --abk-bg: #ffffff;
  --abk-fg: #111111;
  --abk-fg-soft: #3f3f46;
  --abk-muted: #667085;
  --abk-border: #dedee3;
  --abk-surface: #f6f6f7;
  --abk-elevated: #ffffff;
  --abk-inverse-bg: #111114;
  --abk-on-inverse: #ffffff;
  --abk-on-inverse-muted: #d4d4d8;
  --abk-media-text: #ffffff;
  --abk-danger: #b42318;
  --abk-success: #067647;
  --abk-shadow: rgba(0, 0, 0, .12);
  color-scheme: light;
}
html.dark {
  --abk-bg: #09090b;
  --abk-fg: #fafafa;
  --abk-fg-soft: #d4d4d8;
  --abk-muted: #a1a1aa;
  --abk-border: #34343a;
  --abk-surface: #151518;
  --abk-elevated: #111114;
  --abk-inverse-bg: #111114;
  --abk-on-inverse: #ffffff;
  --abk-on-inverse-muted: #d4d4d8;
  --abk-media-text: #ffffff;
  --abk-danger: #ff7b72;
  --abk-success: #75e0a7;
  --abk-shadow: rgba(0, 0, 0, .48);
  color-scheme: dark;
}

/* ── Woodmart core color variables → monochrome ── */
:root, html, body {
  --wd-primary-color: var(--abk-fg) !important;
  --wd-alternative-color: var(--abk-fg) !important;
  --wd-link-color: var(--abk-fg) !important;
  --wd-link-color-hover: var(--abk-fg) !important;
  --wd-title-color: var(--abk-fg) !important;
  --wd-text-color: var(--abk-fg) !important;
  --wd-main-bgcolor: var(--abk-bg) !important;
  --wd-header-clr: var(--abk-fg) !important;
  --btn-accented-bgcolor: var(--abk-fg) !important;
  --btn-accented-bgcolor-hover: var(--abk-fg) !important;
  --btn-accented-color: var(--abk-bg) !important;
  --btn-accented-color-hover: var(--abk-bg) !important;
  --btn-default-bgcolor: var(--abk-fg) !important;
  --btn-default-bgcolor-hover: var(--abk-fg) !important;
  --btn-default-color: var(--abk-bg) !important;
  --btn-default-color-hover: var(--abk-bg) !important;
  --wd-form-brd-color: var(--abk-border) !important;
  --wd-form-brd-color-focus: var(--abk-fg) !important;
  --wd-form-color: var(--abk-fg) !important;
  --wd-form-bg: var(--abk-bg) !important;
  --wd-notice-color: var(--abk-fg) !important;
  --bgcolor-white: var(--abk-bg) !important;
  --bgcolor-gray-100: var(--abk-surface) !important;
  --bgcolor-gray-200: var(--abk-surface) !important;
  --color-gray-100: var(--abk-surface) !important;
  --color-gray-200: var(--abk-surface) !important;
  --color-gray-300: var(--abk-border) !important;
  --color-gray-400: var(--abk-muted) !important;
  --color-gray-500: var(--abk-muted) !important;
  --color-gray-600: var(--abk-fg-soft) !important;
  --color-gray-700: var(--abk-fg-soft) !important;
  --color-gray-800: var(--abk-fg) !important;
  --color-gray-900: var(--abk-fg) !important;
  --tutor-color-primary: var(--abk-fg) !important;
  --tutor-color-primary-hover: var(--abk-fg-soft) !important;
  --tutor-color-secondary: var(--abk-fg-soft) !important;
  --tutor-color-white: var(--abk-bg) !important;
  --tutor-color-black: var(--abk-fg) !important;
  --tutor-color-gray: var(--abk-fg-soft) !important;
  --tutor-color-gray-10: var(--abk-surface) !important;
  --tutor-color-color: var(--abk-fg) !important;
  --tutor-color-hints: var(--abk-muted) !important;
  --tutor-color-muted: var(--abk-muted) !important;
  --tutor-color-subdued: var(--abk-border) !important;
  --tutor-color-danger: var(--abk-danger) !important;
  --tutor-color-success: var(--abk-success) !important;
}

/* ── Font: Readex Pro everywhere ── */
body, body p, body a, body li, body span, body div, body td, body th,
body h1, body h2, body h3, body h4, body h5, body h6,
body input, body textarea, body select, body button, body label,
body blockquote, body .btn, body .title, body .wd-entities-title {
  font-family: "Readex Pro", system-ui, sans-serif !important;
}
/* restore icon fonts broken by the global font override */
body .fa, body .fas, body .far, body .fal,
body i[class*="fa-"], body span[class*="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
}
body .fab, body i.fab, body span[class*="fa-brands"] {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", FontAwesome !important;
}
body [class*="wd-icon"], body .wd-tools-icon, body [data-wd-icon],
body .woodmart-burger, body .rs-icon {
  font-family: "woodmart-font" !important;
}

/* ── Base surfaces ── */
body, .main-page-wrapper, .website-wrapper, .site-content, .wd-content-area {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg);
}
::selection { background: var(--abk-fg); color: var(--abk-bg); }

/* Builder surfaces retain their hierarchy; the PHP color engine maps their
   authored colors to these theme-aware tokens. */
.vc_row, .wpb_row, .vc_column-inner, .wpb_column, .vc_section, .wd-section {
  border-color: var(--abk-border) !important;
}

/*
 * `.color-scheme-light` is Woodmart's marker for "this needs LIGHT
 * (white) text" — it is only ever used on rows/blocks that carry their
 * own filled background (`.vc_custom_xxx{background-color:var(--abk-fg)}`,
 * rewritten by the monochrome engine from whatever dark accent color the
 * row originally had). So its text must be the OPPOSITE token from that
 * background. The inverse tokens are deliberately stable: a feature row
 * authored as dark must stay dark in both site modes, while its text stays
 * light. This avoids the white-on-white inversion caused by pairing
 * --abk-fg and --abk-bg for an independently filled section.
 */
.color-scheme-light:not(.page-title),
.color-scheme-light:not(.page-title) p,
.color-scheme-light:not(.page-title) li,
.color-scheme-light:not(.page-title) span,
.color-scheme-light:not(.page-title) h1,
.color-scheme-light:not(.page-title) h2,
.color-scheme-light:not(.page-title) h3,
.color-scheme-light:not(.page-title) h4,
.color-scheme-light:not(.page-title) h5,
.color-scheme-light:not(.page-title) h6 {
  color: var(--abk-on-inverse) !important;
}
.wd-title-color-white, .white-text, .light-text {
  color: var(--abk-on-inverse) !important;
}

/* Decorative display numbers stay secondary but remain readable. */
.wd-text-block.wd-fontsize-custom.hidden-md,
.wd-text-block.wd-fontsize-custom.hidden-md p {
  color: var(--abk-muted) !important;
}
.site-content [style*="color:#eef0f1"], .site-content [style*="color: #eef0f1"],
.site-content [style*="color:#f1f1f1"], .site-content [style*="color: #f1f1f1"],
.site-content [style*="color:#f4f4f4"], .site-content [style*="color: #f4f4f4"],
.site-content [style*="color:#f9f9f9"], .site-content [style*="color: #f9f9f9"],
.site-content [style*="color:#eee"], .site-content [style*="color: #eee"] {
  color: var(--abk-muted) !important;
}

/* ── Typography colors ── */
h1, h2, h3, h4, h5, h6,
.title, .wd-entities-title, .post-title, .entry-title, .widget-title,
.wd-title-element, .woocommerce-loop-product__title {
  color: var(--abk-fg) !important;
}
p, li, td, th, address, .wd-text-block, .wpb_text_column { color: var(--abk-fg); }
.post-date, .wd-post-date, .entry-meta, .wd-entry-meta, .wd-post-meta,
.meta-author, .wd-meta-author, .modified-date, figcaption, small, .small,
.woocommerce-breadcrumb, .wd-breadcrumbs, .yoast-breadcrumb,
.wd-entry-meta a, .entry-meta a, .cat-links, .cat-links a, .tags-links a,
.wd-post-cat, .wd-post-cat a, .meta-post-categories, .meta-post-categories a,
.author_name, .author_name a, .post-date-day, .post-date-month {
  color: var(--abk-muted) !important;
}
a { color: var(--abk-fg); }
.entry-content p a, .wpb_text_column p a, .wd-text-block p a {
  color: var(--abk-fg) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
blockquote { color: var(--abk-fg) !important; border-color: var(--abk-fg) !important; }
hr { border-color: var(--abk-border) !important; }

/* ── Header (colors only) ── */
.whb-header, .whb-main-header, .whb-row, .whb-general-header,
.whb-sticky-row, .whb-top-bar, .whb-header-bottom,
.whb-header.whb-sticked .whb-sticky-row {
  background: var(--abk-bg) !important;
  background-image: none !important;
}
.whb-header { border-bottom: 1px solid var(--abk-border); }
.wd-nav > li > a, .woodmart-nav-link, .wd-nav .nav-link-text { color: var(--abk-muted) !important; }
.wd-nav > li:hover > a, .wd-nav > li:hover .nav-link-text,
.wd-nav > li.current-menu-item > a, .wd-nav > li.current-menu-item .nav-link-text {
  color: var(--abk-fg) !important;
}
.wd-tools-element > a, .wd-tools-icon, .wd-tools-text,
.wd-header-search .wd-tools-icon, .wd-header-my-account .wd-tools-icon {
  color: var(--abk-fg) !important;
}
.wd-dropdown, .wd-dropdown-menu, .wd-sub-menu,
.wd-dropdown.color-scheme-dark, .wd-sub-menu.color-scheme-dark,
.color-scheme-dark.wd-dropdown-menu {
  background: var(--abk-bg) !important;
  border-color: var(--abk-border) !important;
}
.wd-sub-menu li a, .wd-dropdown a, .wd-dropdown-menu li a,
.wd-sub-menu.color-scheme-dark li a { color: var(--abk-muted) !important; }
.wd-sub-menu li a:hover, .wd-dropdown a:hover { color: var(--abk-fg) !important; }
.wd-side-hidden, .mobile-nav, .wd-header-mobile-nav-dropdown {
  background: var(--abk-bg) !important;
  border-color: var(--abk-border) !important;
}
.wd-side-hidden a, .mobile-nav a { color: var(--abk-fg) !important; }
.site-logo img { filter: grayscale(1) contrast(1.1); }

/* ── Buttons: colors only, shapes untouched ── */
.btn, .button, button[type="submit"], input[type="submit"],
.wd-button, .vc_btn3, .elementor-button,
.woocommerce .button, .add_to_cart_button, .single_add_to_cart_button,
.checkout-button, .nf-form-content input[type="button"],
.wpcf7-submit, .mc4wp-form button, .tutor-btn-primary {
  background-color: var(--abk-fg) !important;
  background-image: none !important;
  color: var(--abk-bg) !important;
  border-color: var(--abk-fg) !important;
}
.btn:hover, .button:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.wd-button:hover, .vc_btn3:hover, .woocommerce .button:hover,
.add_to_cart_button:hover, .single_add_to_cart_button:hover,
.wpcf7-submit:hover, .mc4wp-form button:hover, .tutor-btn-primary:hover {
  opacity: .85;
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
}
.btn-style-bordered, .vc_btn3-style-outline, .tutor-btn-outline-primary {
  background-color: transparent !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-fg) !important;
}
.btn-style-bordered:hover, .vc_btn3-style-outline:hover, .tutor-btn-outline-primary:hover {
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
  opacity: 1;
}
/* Woodmart link buttons are commands without a filled surface. */
body .btn.btn-style-link,
body .wd-button.btn-style-link,
body .btn-style-link {
  background-color: transparent !important;
  color: var(--abk-fg) !important;
  border-color: transparent !important;
  opacity: 1;
}
body .btn.btn-style-link:hover,
body .wd-button.btn-style-link:hover,
body .btn-style-link:hover {
  color: var(--abk-muted) !important;
  background-color: transparent !important;
}

/* ── Forms: colors only ── */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select, .select2-container .select2-selection,
.select2-dropdown, .select2-search__field {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
input:focus, textarea:focus, select:focus { border-color: var(--abk-fg) !important; }
::placeholder { color: var(--abk-muted) !important; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--abk-fg); }
.select2-results__option { background: var(--abk-bg) !important; color: var(--abk-fg) !important; }
.select2-results__option--highlighted { background: var(--abk-fg) !important; color: var(--abk-bg) !important; }

/* ── Cards / posts / products: colors only ── */
.wd-post, .article-inner, .article-body-container, article.post, .wd-product, .product-grid-item,
.wd-course, .tutor-course-card {
  background-color: var(--abk-bg) !important;
  border-color: var(--abk-border);
}
.wd-post .post-title a, .wd-post .wd-entities-title a { color: var(--abk-fg) !important; }
.post-date, .wd-post-date {
  background: var(--abk-bg) !important;
  border-color: var(--abk-border) !important;
  color: var(--abk-muted) !important;
}

/* ── WooCommerce colors ── */
.price, .woocommerce-Price-amount, .amount { color: var(--abk-fg) !important; }
.star-rating, .star-rating span::before { color: var(--abk-fg) !important; }
.onsale, .wd-product-label { background: var(--abk-fg) !important; color: var(--abk-bg) !important; }
.woocommerce-tabs .tabs li a { color: var(--abk-muted) !important; }
.woocommerce-tabs .tabs li.active a { color: var(--abk-fg) !important; }
table, table td, table th { border-color: var(--abk-border) !important; }
table th { background: var(--abk-border) !important; color: var(--abk-fg) !important; }

/* ── Page title bar ── */
.page-title, .wd-page-title {
  background: var(--abk-bg) !important;
  border-color: var(--abk-border) !important;
}
.page-title .title, .page-title h1, .wd-page-title .title {
  color: var(--abk-fg) !important;
}
.page-title .breadcrumbs, .page-title .breadcrumbs a, .page-title .breadcrumbs span,
.page-title .wd-breadcrumbs, .page-title .wd-breadcrumbs a, .page-title .wd-breadcrumbs span,
.wd-page-title .breadcrumbs, .wd-page-title .breadcrumbs a, .wd-page-title .breadcrumbs span {
  color: var(--abk-muted) !important;
}

/* ── Footer ── */
.footer-container, .main-footer, .copyrights-wrapper {
  background: var(--abk-bg) !important;
  background-image: none !important;
  color: var(--abk-muted) !important;
}
.footer-container { border-top: 1px solid var(--abk-border); }
.main-footer p, .main-footer li, .main-footer span, .main-footer div,
.main-footer a, .copyrights-wrapper, .copyrights-wrapper a {
  color: var(--abk-muted) !important;
}
.main-footer a:hover, .copyrights-wrapper a:hover { color: var(--abk-fg) !important; }
.main-footer .widget-title, .main-footer h4, .main-footer h5, .main-footer strong {
  color: var(--abk-fg) !important;
}
.main-footer .wd-social-icons .wd-icon, .main-footer .wd-social-icons a {
  background-color: transparent !important;
  border-color: var(--abk-border) !important;
  color: var(--abk-muted) !important;
}
.main-footer .wd-social-icons a:hover { border-color: var(--abk-fg) !important; color: var(--abk-fg) !important; }
.main-footer img { filter: grayscale(1); }

/*
 * Social-share widgets ANYWHERE ELSE on the site (post sticky sidebar
 * `.wd-sticky-social`, inline "social-share" blocks, etc.). Woodmart's
 * "colored" icon design paints each brand's own background with a
 * white glyph on top (`color:#fff !important`) — fine on its own, but a
 * page-wide rule stripping every `.wd-social-icons` background to
 * transparent (as a previous version of this file did) leaves that white
 * glyph floating with nothing behind it: invisible on a light page,
 * only visible once the page itself turns dark. Give the icon its own
 * guaranteed-contrast surface in both modes instead of fighting Woodmart's
 * background per pixel.
 */
body .wd-social-icons .wd-social-icon,
body .wd-sticky-social .wd-social-icon {
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
  border-color: var(--abk-fg) !important;
}
body .wd-social-icons .wd-social-icon:hover,
body .wd-sticky-social .wd-social-icon:hover {
  opacity: .85;
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
}
body .wd-social-icons .wd-icon-name,
body .wd-sticky-social .wd-icon-name {
  color: var(--abk-bg) !important;
}

/* Footer social icons win by specificity: bordered outline instead of solid fill. */
body .main-footer .wd-social-icons .wd-social-icon {
  background-color: transparent !important;
  color: var(--abk-muted) !important;
  border-color: var(--abk-border) !important;
}
body .main-footer .wd-social-icons .wd-social-icon:hover {
  background-color: transparent !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-fg) !important;
}
body .main-footer .wd-social-icons .wd-icon-name { color: var(--abk-muted) !important; }

/* ── Misc colors ── */
.page-numbers li .page-numbers, .pagination a, .pagination span {
  background: transparent !important;
  border-color: var(--abk-border) !important;
  color: var(--abk-muted) !important;
}
.page-numbers li .page-numbers.current, .pagination .current {
  background: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
  border-color: var(--abk-fg) !important;
}
.tagcloud a, .wd-post-tags a {
  background: transparent !important;
  border-color: var(--abk-border) !important;
  color: var(--abk-muted) !important;
}
.tagcloud a:hover, .wd-post-tags a:hover { border-color: var(--abk-fg) !important; color: var(--abk-fg) !important; }
.scrollToTop, .wd-back-to-top { background: var(--abk-fg) !important; color: var(--abk-bg) !important; }
#ez-toc-container { background: var(--abk-bg) !important; border-color: var(--abk-border) !important; }
#ez-toc-container a { color: var(--abk-muted) !important; }
#ez-toc-container a:hover { color: var(--abk-fg) !important; }
.rev_slider_wrapper, rs-module-wrap, sr7-module { filter: grayscale(1); }
#chaty-widget, .chaty, #chaty { filter: grayscale(1); }

/*
 * Countdown timer widget (`.wd-timer`) paints its digit boxes via
 * Woodmart's own `--bgcolor-white` / `--color-gray-800` variables —
 * fixed literal colors that never existed in our light/dark toggle, so
 * the boxes stayed a solid white box with dark digits no matter which
 * site mode was active. Route it through our own tokens instead.
 */
.wd-timer .wd-timer-value { color: var(--abk-fg) !important; }
.wd-timer .wd-timer-text { color: var(--abk-muted) !important; }
.timer-style-standard > span {
  background-color: var(--abk-bg) !important;
  border: 1px solid var(--abk-border);
  box-shadow: none !important;
}
.timer-style-transparent > span { background-color: var(--abk-border) !important; }
.timer-style-active > span {
  background-color: var(--abk-fg) !important;
}
.timer-style-active > span .wd-timer-value,
.timer-style-active > span .wd-timer-text { color: var(--abk-bg) !important; }

/* ── Dark-mode niceties ── */
html.dark .site-logo img {
  filter: grayscale(1) invert(1) hue-rotate(180deg);
  opacity: 1;
}
html.dark .main-footer img {
  filter: grayscale(1) invert(1) hue-rotate(180deg);
  opacity: 1;
}

/* ── Injected dark-mode toggle in Woodmart header ── */
.abk-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; align-self: center;
  background: transparent !important;
  border: 1px solid var(--abk-border) !important;
  color: var(--abk-fg) !important;
  cursor: pointer; padding: 0;
  transition: border-color .15s;
}
.abk-theme-toggle:hover { border-color: var(--abk-fg) !important; }
.abk-theme-toggle svg { width: 17px !important; height: 17px !important; min-width: 17px; display: block; }

/*
 * Semantic contrast surfaces. global.js assigns these classes from the
 * actual computed background, so WPBakery's ID-generated rows and sections
 * receive the same treatment without page-specific selectors.
 */
body .abk-inverse-surface {
  background-color: var(--abk-inverse-bg) !important;
}
body .abk-inverse-surface :where(
  h1, h2, h3, h4, h5, h6, p, li, .title, .wd-title-element,
  .woodmart-title-container, .title-subtitle, .subtitle,
  .wd-text-block, .counter-value
) {
  color: var(--abk-on-inverse) !important;
}
body .abk-inverse-surface :where(.counter-label, small, .small) {
  color: var(--abk-on-inverse-muted) !important;
}
body .abk-media-surface :where(
  h1, h2, h3, h4, h5, h6, p, li, .title, .wd-title-element,
  .woodmart-title-container, .title-subtitle, .subtitle, .wd-text-block
) {
  color: var(--abk-media-text) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72);
}
body .abk-media-surface a:not(.btn):not(.button):not(.wd-button) {
  color: var(--abk-media-text) !important;
}
/* Explicit fallback for browsers/caches that do not apply the :where rule. */
body .abk-media-surface .title-subtitle,
body .abk-media-surface .subtitle,
body .vc_custom_1717866157439 .title-subtitle {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72) !important;
}

/* Image panels authored for dark type receive a stable contrast overlay. */
body .abk-media-surface:has(.wd-title-color-black),
body .vc_custom_1717964135599 {
  background-color: rgba(17, 17, 20, .58) !important;
  background-blend-mode: multiply;
}
body .abk-media-surface .wd-title-color-black .title,
body .abk-media-surface .wd-title-color-black .title :is(u, b, strong, em, span),
body .abk-media-surface .wd-title-color-black .title-after_title,
body .abk-media-surface .wd-title-color-black .title-after_title * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .72);
}
body .abk-media-surface:has(.wd-title-color-black) .btn-style-bordered,
body .vc_custom_1717964135599 .btn-style-bordered {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, .82) !important;
}

/* Woodmart hover cards use a pseudo-element for their dark surface. */
body .wd-info-box.box-style-bg-hover:hover::after,
body .wd-info-box.box-style-bg-hover:focus-within::after {
  background-color: var(--abk-inverse-bg) !important;
}
body .wd-info-box.box-style-bg-hover:hover :is(.info-box-title, .info-box-inner, .info-box-inner p, .btn-style-link),
body .wd-info-box.box-style-bg-hover:focus-within :is(.info-box-title, .info-box-inner, .info-box-inner p, .btn-style-link) {
  color: var(--abk-on-inverse) !important;
  -webkit-text-fill-color: var(--abk-on-inverse) !important;
}
body .wd-info-box.box-style-bg-hover:hover .info-box-inner,
body .wd-info-box.box-style-bg-hover:focus-within .info-box-inner {
  color: var(--abk-on-inverse-muted) !important;
}

/* The normal light-mode state of hover cards must not inherit white text. */
html:not(.dark) body .wd-info-box.box-style-bg-hover:not(:hover):not(:focus-within) :is(.info-box-title, .info-box-inner p, .wd-info-box-link) {
  color: var(--abk-fg) !important;
  -webkit-text-fill-color: var(--abk-fg) !important;
}
html:not(.dark) body .wd-info-box.box-style-bg-hover:not(:hover):not(:focus-within) .info-box-inner {
  color: var(--abk-fg-soft) !important;
}

/* ═══════════════════════════════════════════════════════════
   Adaptive component coverage
   Woodmart, WooCommerce, Tutor LMS and plugin UI that ship literal surfaces.
   ═══════════════════════════════════════════════════════════ */

/* Search, drawers, menus, dialogs and tooltips. */
.wd-search-full-screen, .wd-search-opened, .wd-search-form,
.autocomplete-suggestions, .wd-dropdown-results,
.wd-side-hidden, .cart-widget-side, .login-form-side, .mobile-nav,
.cookies-popup, .wd-popup, .mfp-content, .mfp-inline-holder .mfp-content,
.wd-dropdown, .wd-dropdown-menu, .wd-sub-menu {
  background-color: var(--abk-elevated) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
  box-shadow: 0 14px 40px var(--abk-shadow) !important;
}
.autocomplete-suggestion, .suggestion-divider,
.wd-side-hidden .wd-heading, .wd-side-hidden .widget-heading,
.mobile-nav .searchform, .wd-search-form .searchform {
  background-color: var(--abk-elevated) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
.autocomplete-suggestion:hover, .autocomplete-selected {
  background-color: var(--abk-surface) !important;
}
.on-hover-text, .wd-tooltip-label {
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
}

/* Blog archive and single-post chrome. */
.article-body-container, .post-single-page, .single-post .article-inner,
.single-post .entry-content, .comments-area, .comment-respond,
.wd-post-navigation, .related-posts, .wd-posts-nav {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
.meta-post-categories a, .wd-post-cat a, .post-categories a {
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
  border-color: var(--abk-fg) !important;
}
.meta-reply, .meta-reply a, .wd-posts-nav .wd-label,
.wd-post-navigation .wd-label, .back-to-archive {
  color: var(--abk-muted) !important;
}
.replies-count {
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
}
.widget_categories li, .widget_categories li a,
.widget_archive li, .widget_archive li a,
.widget_recent_entries li, .widget_recent_entries li a {
  color: var(--abk-muted) !important;
}
.recent-posts-comment, .recent-posts-comment a,
.single-post .wd-label, .single-post .back-to-archive {
  color: var(--abk-muted) !important;
}
body span.page-numbers.current,
body .page-numbers .current,
body .pagination .current {
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
  border-color: var(--abk-fg) !important;
}

/* WooCommerce products, tabs, cart, account and checkout. */
.product-tabs-wrapper, .woocommerce-tabs, .woocommerce-Tabs-panel,
.woocommerce-Reviews, .woocommerce-Reviews #review_form_wrapper,
.woocommerce-cart-form, .cart_totals, .checkout-order-review,
.woocommerce-checkout-review-order, .woocommerce-account .woocommerce,
.woocommerce-MyAccount-content, .woocommerce-MyAccount-navigation,
.wd-my-account-sidebar, .woocommerce-form-login, .woocommerce-form-register {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
.product_meta, .product_meta span, .product_meta a,
.wd-compare-btn a, .wd-compare-btn span,
.wd-wishlist-btn a, .wd-wishlist-btn span,
.wd-label.share-title, .share-title,
.woocommerce-tabs .tabs li, .woocommerce-tabs .tabs li a,
.woocommerce-MyAccount-navigation a {
  color: var(--abk-muted) !important;
}
.woocommerce-tabs .tabs li.active, .woocommerce-tabs .tabs li.active a,
.woocommerce-MyAccount-navigation .is-active a {
  color: var(--abk-fg) !important;
}
.woodmart-show-product-gallery, .wd-show-product-gallery,
.quantity input[type="button"], .quantity .minus, .quantity .plus {
  background-color: var(--abk-surface) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
.woocommerce table.shop_table, .woocommerce table.shop_table td,
.woocommerce table.shop_table th {
  background-color: transparent !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}

/* Tutor LMS details, cards, tabs and curriculum. */
.tutor-wrap, .tutor-course-details-page, .tutor-course-details-content,
.tutor-course-details-tab, .tutor-course-content-list,
.tutor-card, .tutor-card-body, .tutor-card-footer,
.tutor-sidebar-card, .tutor-course-sidebar-card,
.tutor-course-details-widget, .tutor-course-details-widget-list,
.tutor-course-details-instructor, .tutor-course-details-instructors,
.tutor-course-details-widget-tags,
.tutor-accordion-item, .tutor-accordion-item-body,
.tutor-course-content-list-item {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
.tutor-card, .tutor-sidebar-card, .tutor-course-sidebar-card {
  background-color: var(--abk-elevated) !important;
}
.tutor-accordion-item-header, .tutor-accordion-item-header.is-active,
.tutor-nav, .tutor-nav:not(.tutor-nav-pills):not(.tutor-nav-tabs) {
  background-color: var(--abk-surface) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
.tutor-nav-link, .tutor-btn-ghost, .tutor-color-muted,
.tutor-color-secondary, .tutor-course-content-list-item-duration,
.tutor-meta-value, .tutor-meta-level {
  color: var(--abk-muted) !important;
}
.tutor-nav-link.is-active, .tutor-nav-link.active,
.tutor-color-black, .tutor-fs-4.tutor-fw-bold,
.tutor-course-content-list-item-title, .tutor-accordion-item-header {
  color: var(--abk-fg) !important;
}
.tutor-btn-primary, .tutor-btn.tutor-btn-primary {
  background-color: var(--abk-fg) !important;
  color: var(--abk-bg) !important;
  border-color: var(--abk-fg) !important;
}
.tutor-wrap, .tutor-course-details-page {
  --tutor-color-primary: var(--abk-fg) !important;
  --tutor-color-primary-hover: var(--abk-fg-soft) !important;
  --tutor-color-secondary: var(--abk-muted) !important;
  --tutor-color-white: var(--abk-bg) !important;
  --tutor-color-black: var(--abk-fg) !important;
  --tutor-color-gray: var(--abk-fg-soft) !important;
  --tutor-color-gray-10: var(--abk-surface) !important;
  --tutor-color-color: var(--abk-fg) !important;
  --tutor-color-hints: var(--abk-muted) !important;
  --tutor-color-muted: var(--abk-muted) !important;
  --tutor-color-subdued: var(--abk-border) !important;
}
html.dark body .tutor-wrap .tutor-color-secondary,
html.dark body .tutor-wrap .tutor-meta-level,
html.dark body .tutor-course-details-page .tutor-color-secondary {
  color: var(--abk-muted) !important;
}
html.dark body .tutor-course-details-page .tutor-course-details-widget,
html.dark body .tutor-course-details-page .tutor-course-details-instructors {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}

/* Notices and validation retain meaning with accessible contrast. */
.woocommerce-message, .woocommerce-info, .woocommerce-error,
.wd-notice, .nf-response-msg, .wpcf7-response-output {
  background-color: var(--abk-surface) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
.required, .nf-error-msg, .ninja-forms-req-symbol,
.woocommerce-error, .wpcf7-not-valid-tip {
  color: var(--abk-danger) !important;
}

/* Sticky social share: the rail and glyphs adapt together. */
body .wd-sticky-social,
body .wd-sticky-social .wd-social-icon,
body .wd-sticky-social a {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  border-color: var(--abk-border) !important;
}
body .wd-sticky-social {
  border: 1px solid var(--abk-border) !important;
  box-shadow: 0 8px 24px var(--abk-shadow) !important;
}

/* Keyboard and motion accessibility. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--abk-fg) !important;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}