/*
Theme Name:   Abualkomboz Minimal — Woodmart Child
Theme URI:    https://abualkomboz.com
Description:  Monochrome editorial redesign (Readex Pro / sharp corners / 1px borders / dark mode) applied on top of Woodmart. Content untouched — pure design layer. Deactivate to restore the old look instantly.
Author:       Mohammed Abu Alkomboz
Template:     woodmart
Version:      1.0.0
Text Domain:  woodmart-child
*/

/* ═══════════════════════════════════════════════════════════
   1) Design tokens — light + dark
   ═══════════════════════════════════════════════════════════ */
:root {
  --abk-bg: #ffffff;
  --abk-fg: #111111;
  --abk-muted: #6b7280;
  --abk-border: #e5e7eb;
}
html.dark {
  --abk-bg: #09090b;
  --abk-fg: #fafafa;
  --abk-muted: #a1a1aa;
  --abk-border: #27272a;
}

/* ═══════════════════════════════════════════════════════════
   1.5) 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;
}

/* ═══════════════════════════════════════════════════════════
   1.6) Inline-colored text (was white/colored on dark bg)
        → force the monochrome palette. Buttons excluded.
   ═══════════════════════════════════════════════════════════ */
.site-content [style*="color:"]:not(.btn):not(.btn *):not(button):not(button *):not(a.button):not(.onsale),
.main-footer [style*="color:"]:not(.btn):not(.btn *) {
  color: var(--abk-fg) !important;
}

/* huge decorative display text (custom-size, desktop-only) → faint ghost gray */
.wd-text-block.wd-fontsize-custom.hidden-md,
.wd-text-block.wd-fontsize-custom.hidden-md p {
  color: var(--abk-border) !important;
}

/* decorative near-white "ghost" display text → faint gray (like the 01/02 numbers) */
.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-border) !important;
}

/* ═══════════════════════════════════════════════════════════
   2) Base — background, text, font, selection
   ═══════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }

body {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  font-family: "Readex Pro", system-ui, sans-serif !important;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body p, body a, body li, body span, body div, body td, body th, body dd, body dt,
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 (FontAwesome + Woodmart icon font) */
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;
}

::selection { background-color: var(--abk-fg); color: var(--abk-bg); }

/* ═══════════════════════════════════════════════════════════
   3) Sharp corners everywhere (signature rule)
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { border-radius: 0 !important; }

/* exceptions: avatars & truly circular things stay circular */
img.avatar, .avatar img, .wd-author-avatar img, .owl-dot, .flickity-page-dot,
.tutor-avatar, .tutor-avatar img, .wd-social-icons.wd-shape-circle .wd-icon {
  border-radius: 50% !important;
}

/* ═══════════════════════════════════════════════════════════
   4) Kill decorative backgrounds → pure editorial canvas
   ═══════════════════════════════════════════════════════════ */
.vc_row[style], .wpb_row[style], .vc_column-inner[style], .wpb_column[style],
[class*="vc_custom_"],
.wd-section, .page-title, .wd-page-title,
.color-scheme-light, .wd-title-color-white,
.main-page-wrapper, .site-content, .wd-content-area {
  background-color: transparent !important;
  background-image: none !important;
}
body, .main-page-wrapper { background-color: var(--abk-bg) !important; }

/* sections that had dark bg + white text → force readable palette */
.color-scheme-light, .color-scheme-light p, .color-scheme-light li,
.color-scheme-light span:not(.btn *), .color-scheme-light div,
.color-scheme-light h1, .color-scheme-light h2, .color-scheme-light h3,
.color-scheme-light h4, .color-scheme-light h5, .color-scheme-light h6,
.wd-title-color-white, .white-text, .light-text {
  color: var(--abk-fg) !important;
}

/* ═══════════════════════════════════════════════════════════
   5) Typography scale
   ═══════════════════════════════════════════════════════════ */
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;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

p { color: var(--abk-fg); }
.wd-text-block, .wpb_text_column { color: var(--abk-fg) !important; }

/* meta / secondary text → muted gray */
.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); transition: opacity .2s, color .15s; }
a:hover { color: var(--abk-fg); opacity: .7; }

/* content links = underlined, editorial style */
.entry-content p a, .wpb_text_column p a, .wd-text-block p a {
  color: var(--abk-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

blockquote {
  border-right: 4px solid var(--abk-fg) !important;
  border-left: none !important;
  background: var(--abk-border) !important;
  color: var(--abk-fg) !important;
  padding: 1rem 1.5rem !important;
  font-style: italic;
}

hr { border: none !important; border-top: 1px solid var(--abk-border) !important; }

/* ═══════════════════════════════════════════════════════════
   6) Header — minimal sticky bar, 1px bottom border
   ═══════════════════════════════════════════════════════════ */
.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) !important;
  box-shadow: none !important;
}
.whb-header.whb-sticked { box-shadow: 0 1px 8px rgba(0,0,0,.07) !important; }
.whb-row { border-bottom: none !important; }

/* nav links — muted → fg with animated underline */
.wd-nav > li > a, .woodmart-nav-link, .wd-nav .nav-link-text {
  color: var(--abk-muted) !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
}
/* keep the menu on a single row */
.whb-general-header .wd-nav-main > li { margin: 0 6px !important; }
.whb-general-header .wd-nav-main > li > a { padding: 0 2px !important; white-space: nowrap; font-size: .88rem !important; }
.whb-general-header .whb-col-center { overflow: hidden; }
.wd-nav > li > a { position: relative; }
.wd-nav > li > a::after {
  content: "";
  position: absolute;
  bottom: 8px; right: 0;
  width: 0; height: 1px;
  background-color: var(--abk-fg);
  transition: width .25s ease;
}
.wd-nav > li:hover > a::after,
.wd-nav > li.current-menu-item > a::after { width: 100%; }
.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;
}

/* header tool icons */
.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;
}

/* dropdown menus — white panel, 1px border, soft shadow */
.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: 1px solid var(--abk-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.13) !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; }

/* mobile offcanvas menu */
.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; }

/* ═══════════════════════════════════════════════════════════
   7) Buttons — solid inverse / bordered inverts on hover
   ═══════════════════════════════════════════════════════════ */
.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: 1px solid var(--abk-fg) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  text-transform: none !important;
  transition: opacity .2s ease, background-color .2s ease, color .2s ease !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;
}

/* bordered / outline variant */
.btn-style-bordered, .vc_btn3-style-outline, .btn.btn-style-link,
.tutor-btn-outline-primary {
  background-color: transparent !important;
  color: var(--abk-fg) !important;
  border: 1px solid 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;
}

/* ═══════════════════════════════════════════════════════════
   8) Forms — sharp, 1px border, focus → fg border
   ═══════════════════════════════════════════════════════════ */
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 {
  background-color: var(--abk-bg) !important;
  color: var(--abk-fg) !important;
  border: 1px solid var(--abk-border) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--abk-fg) !important;
  outline: none !important;
  box-shadow: none !important;
}
::placeholder { color: var(--abk-muted) !important; }

/* ═══════════════════════════════════════════════════════════
   9) Cards — posts, products: 1px border, lift on hover
   ═══════════════════════════════════════════════════════════ */
.wd-post, .article-inner, article.post, .wd-product, .product-grid-item,
.wd-course, .tutor-course-card {
  border: 1px solid var(--abk-border);
  background: var(--abk-bg) !important;
  box-shadow: none !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.wd-post:hover, .article-inner:hover, .wd-product:hover,
.product-grid-item:hover, .tutor-course-card:hover {
  transform: translateY(-4px);
  border-color: var(--abk-fg);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.wd-post .post-title a, .wd-post .wd-entities-title a { color: var(--abk-fg) !important; }

/* post date squares / badges → mono outline */
.post-date, .wd-post-date {
  background: var(--abk-bg) !important;
  border: 1px solid var(--abk-border) !important;
  color: var(--abk-muted) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════
   10) WooCommerce touches
   ═══════════════════════════════════════════════════════════ */
.price, .woocommerce-Price-amount, .amount { color: var(--abk-fg) !important; font-weight: 700; }
.star-rating, .star-rating span::before { color: var(--abk-fg) !important; }
.onsale, .wd-product-label, .berocket_better_labels .br_alabel {
  background: var(--abk-fg) !important; color: var(--abk-bg) !important;
  box-shadow: none !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; }

/* ═══════════════════════════════════════════════════════════
   11) Page title bar — flat, bordered
   ═══════════════════════════════════════════════════════════ */
.page-title, .wd-page-title {
  background: var(--abk-bg) !important;
  border-bottom: 1px solid var(--abk-border);
}
.page-title .title, .page-title h1, .wd-page-title .title {
  color: var(--abk-fg) !important;
}

/* ═══════════════════════════════════════════════════════════
   12) Footer — minimal, muted, single border on top
   ═══════════════════════════════════════════════════════════ */
.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;
  font-size: .85rem;
}
.main-footer a:hover, .copyrights-wrapper a:hover { color: var(--abk-fg) !important; opacity: 1; }
.main-footer .widget-title, .main-footer h4, .main-footer h5, .main-footer strong {
  color: var(--abk-fg) !important;
  font-size: .9rem;
}
.copyrights-wrapper { border-top: 1px solid var(--abk-border) !important; }
.main-footer .wd-social-icons .wd-icon,
.wd-social-icons a {
  background: transparent !important;
  border: 1px solid var(--abk-border) !important;
  color: var(--abk-muted) !important;
}
.wd-social-icons a:hover { border-color: var(--abk-fg) !important; color: var(--abk-fg) !important; }

/* ═══════════════════════════════════════════════════════════
   13) Misc — pagination, tags, back-to-top, revslider mono
   ═══════════════════════════════════════════════════════════ */
.page-numbers li .page-numbers, .pagination a, .pagination span {
  border: 1px solid var(--abk-border) !important;
  background: transparent !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 {
  border: 1px solid var(--abk-border) !important;
  background: transparent !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;
  border: none !important;
}

/* revolution slider → monochrome to match the brand */
.rev_slider_wrapper, rs-module-wrap, sr7-module { filter: grayscale(1); }

/* logo + floating contact buttons (Chaty) → monochrome */
.site-logo img { filter: grayscale(1) contrast(1.1); }
#chaty-widget, .chaty, #chaty { filter: grayscale(1); }

/* table of contents plugin */
#ez-toc-container {
  background: var(--abk-bg) !important;
  border: 1px solid var(--abk-border) !important;
  box-shadow: none !important;
}
#ez-toc-container a { color: var(--abk-muted) !important; }
#ez-toc-container a:hover { color: var(--abk-fg) !important; }

/* ═══════════════════════════════════════════════════════════
   14) Dark-mode toggle + typewriter (injected by minimal.js)
   ═══════════════════════════════════════════════════════════ */
.abk-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: transparent !important;
  border: none !important;
  color: var(--abk-muted) !important;
  cursor: pointer;
  transition: color .15s;
  align-self: center;
}
.abk-theme-toggle:hover { color: var(--abk-fg) !important; }
.abk-theme-toggle svg { width: 17px; height: 17px; }

.abk-typewriter {
  color: var(--abk-muted) !important;
  font-size: .78rem !important;
  margin-right: 10px;
  white-space: nowrap;
  align-self: center;
  width: 140px;
  max-width: 140px;
  overflow: hidden;
  flex-shrink: 0;
}
@media (max-width: 1599px) { .abk-typewriter { display: none; } }
.abk-typewriter .abk-cursor {
  display: inline-block;
  width: 1px; height: 13px;
  background: var(--abk-fg);
  opacity: .5;
  margin-right: 2px;
  vertical-align: middle;
  animation: abk-blink 1s step-end infinite;
}
@keyframes abk-blink { 0%,50% {opacity:.5} 51%,100% {opacity:0} }
@media (max-width: 1024px) { .abk-typewriter { display: none; } }

/* ═══════════════════════════════════════════════════════════
   15) Reveal-on-scroll
   ═══════════════════════════════════════════════════════════ */
.abk-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.abk-reveal.abk-active { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .abk-reveal { opacity: 1; transform: none; transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   16) Dark-mode fixes for images / logos
   ═══════════════════════════════════════════════════════════ */
html.dark .site-logo img, html.dark .main-footer img.wp-image-logo {
  filter: invert(1) hue-rotate(180deg);
}
html.dark img { opacity: .92; }