/*!
 * AICT UX Contrast Fix v1.0.0
 * WCAG 2.1 AA compliance pass — homepage mega menu, hero subtitle, blog hub filters/cards/meta.
 * Brand palette enforced: #0B1B35 Midnight, #0E62FF Action, #00C2A8 Accent.
 * All overrides use !important to win against Elementor inline styles + theme cascade.
 * Mobile-first; desktop overrides where contrast tightens.
 *
 * Loader:  aict-ux-contrast-fix.php (mu-plugin, priority 99)
 * Repo:    /wp-content/mu-plugins/aict-ux-contrast-fix/
 * Author:  AICT
 * License: proprietary
 */

/* ============================================================
 * 0) Brand tokens (CSS custom props — easier rollback)
 * ============================================================ */
:root {
  --aict-text-strong:   #0B1B35; /* on white: 16.6:1 */
  --aict-text-body:     #2D3748; /* on white: 12.6:1 */
  --aict-text-meta:     #4A5568; /* on white: 8.6:1  */
  --aict-text-on-grad:  #FFFFFF;
  --aict-link:          #0E62FF; /* on white: 5.0:1 */
  --aict-link-hover:    #0A4BC4;
  --aict-accent:        #00C2A8;
  --aict-pill-bg:       #F2F4FA;
  --aict-pill-bg-hover: #E5E9F5;
  --aict-pill-border:   #D7DCEB;
  --aict-shadow-on-grad: 0 1px 2px rgba(11, 27, 53, 0.45);
}

/* ============================================================
 * 1) HOMEPAGE — Mega menu category labels
 *    (Writing / Design / Business / Analytics — were near-invisible)
 * ============================================================ */
.aict-mega-menu a,
.aict-mega-menu .menu-item > a,
.aict-mega-category-label,
nav[aria-label*="mega" i] a,
.elementor-nav-menu .sub-menu a,
.elementor-nav-menu--main .menu-item-has-children > a,
header .menu-item a,
header .nav a {
  color: var(--aict-text-strong) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

.aict-mega-menu a:hover,
.aict-mega-menu .menu-item > a:hover,
header .menu-item a:hover {
  color: var(--aict-link) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Sub-category descriptors under bold label */
.aict-mega-menu .menu-description,
.aict-mega-subtitle {
  color: var(--aict-text-body) !important;
  opacity: 1 !important;
}

/* ============================================================
 * 2) HOMEPAGE — Hero subtitle on gradient background
 *    "What are you want to do today?" — was washed out
 * ============================================================ */
.aict-hero-subtitle,
.elementor-widget-heading.aict-hero h2,
section.hero h1 + p,
section.hero .subtitle,
.hero-subtitle {
  color: var(--aict-text-on-grad) !important;
  text-shadow: var(--aict-shadow-on-grad) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Hero search input placeholder readable */
.aict-hero input::placeholder,
.hero input[type="search"]::placeholder {
  color: rgba(11, 27, 53, 0.65) !important;
  opacity: 1 !important;
}

/* ============================================================
 * 3) HOMEPAGE — Tag chips under search
 *    ("Mid-Cycle Content", "2025 Trend", "Banner Bar" ...)
 * ============================================================ */
.aict-tag-chip,
.aict-search-tag,
.hero .tag,
.elementor-button.tag-chip {
  background-color: var(--aict-pill-bg) !important;
  color: var(--aict-text-strong) !important;
  border: 1px solid var(--aict-pill-border) !important;
  font-weight: 500 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.aict-tag-chip:hover,
.aict-search-tag:hover {
  background-color: var(--aict-pill-bg-hover) !important;
  color: var(--aict-text-strong) !important;
  border-color: var(--aict-link) !important;
}

/* "View tools" link in hero */
.aict-hero a.view-tools,
.hero a[href*="/tools"] {
  color: var(--aict-text-on-grad) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

/* ============================================================
 * 4) BLOG HUB — Category filter pills
 *    AI Comparisons / Business Intelligence / SEO / etc.
 * ============================================================ */
.aict-blog-filter,
.blog-category-filter a,
.blog-filter-pill,
.elementor-tabs .elementor-tab-title,
.wp-block-categories-list a,
.cat-filter,
.category-filter a {
  background-color: var(--aict-pill-bg) !important;
  color: var(--aict-text-strong) !important;
  border: 1px solid var(--aict-pill-border) !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  opacity: 1 !important;
  text-decoration: none !important;
}

.aict-blog-filter:hover,
.blog-category-filter a:hover,
.blog-filter-pill:hover,
.cat-filter:hover {
  background-color: var(--aict-link) !important;
  color: #FFFFFF !important;
  border-color: var(--aict-link) !important;
}

.aict-blog-filter.is-active,
.blog-filter-pill.active,
.cat-filter[aria-current="true"] {
  background-color: var(--aict-text-strong) !important;
  color: #FFFFFF !important;
  border-color: var(--aict-text-strong) !important;
}

/* ============================================================
 * 5) BLOG HUB — Article card body & titles
 * ============================================================ */
.aict-blog-card,
.blog-card,
article.post-card,
.elementor-post {
  background-color: #FFFFFF !important;
  border: 1px solid #E5E9F5 !important;
}

.aict-blog-card h2,
.aict-blog-card h3,
.blog-card .entry-title,
article.post-card .entry-title,
.elementor-post__title a {
  color: var(--aict-text-strong) !important;
  font-weight: 700 !important;
}

.aict-blog-card p,
.aict-blog-card .excerpt,
.blog-card .entry-excerpt,
article.post-card .entry-excerpt,
.elementor-post__excerpt p {
  color: var(--aict-text-body) !important;
  opacity: 1 !important;
}

/* ============================================================
 * 6) BLOG HUB — "Read More" links
 * ============================================================ */
.aict-read-more,
.blog-card a.read-more,
.elementor-post__read-more,
a.more-link {
  color: var(--aict-link) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  transition: border-color 0.15s ease !important;
}

.aict-read-more:hover,
.blog-card a.read-more:hover,
.elementor-post__read-more:hover,
a.more-link:hover {
  color: var(--aict-link-hover) !important;
  border-bottom-color: var(--aict-link-hover) !important;
}

/* ============================================================
 * 7) BLOG HUB — Date / meta line
 *    "Apr 26, 2026 · 4 min read"
 * ============================================================ */
.aict-post-meta,
.blog-card .entry-meta,
article.post-card .entry-meta,
.elementor-post__meta-data,
.posted-on,
.byline {
  color: var(--aict-text-meta) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

.aict-post-meta time,
.aict-post-meta .reading-time {
  color: var(--aict-text-meta) !important;
}

/* ============================================================
 * 8) BLOG HUB — "ARTICLE" badge
 * ============================================================ */
.aict-post-badge,
.blog-card .post-type-badge,
.elementor-post__badges,
.cat-links a {
  background-color: var(--aict-link) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* ============================================================
 * 9) GLOBAL — Focus visibility (WCAG 2.4.7)
 * ============================================================ */
.aict-mega-menu a:focus-visible,
.aict-blog-filter:focus-visible,
.aict-tag-chip:focus-visible,
.aict-read-more:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--aict-accent) !important;
  outline-offset: 2px !important;
  border-radius: 4px !important;
}

/* ============================================================
 * 10) Reduce motion / contrast preferences
 * ============================================================ */
@media (prefers-contrast: more) {
  .aict-blog-filter,
  .aict-tag-chip { border-width: 2px !important; }
  .aict-post-meta { color: #2D3748 !important; }
}

/* ============================================================
 * 11) Mobile tightening (≤640px)
 * ============================================================ */
@media (max-width: 640px) {
  .aict-blog-filter,
  .aict-tag-chip { font-size: 14px !important; padding: 7px 12px !important; }
  .aict-post-meta { font-size: 12px !important; }
  .aict-hero-subtitle { font-size: 16px !important; }
}

/* ============================================================
 * 12) Cookie consent banner link — v4.17.9 DEFINITIVE FIX
 *     This is THE active CSS file (loaded as mu-plugin priority 99).
 *     v4.17.7 / v4.17.8 edited the wrong file (aict-core/assets/css/)
 *     which is never enqueued — see audits/v4.17.9-prep/root_cause.md.
 *
 *     Rendered DOM: <div id="aict-cc-banner"> > <p id="aict-cc-banner-body">
 *                   > <a class="aict-cc-link">
 *     Selector specificity: (0,2,1,3) — unbeatable without inline style.
 *     Color rationale: rendered surface = dark #141626 (verified Lighthouse).
 *       #C4B5FD (purple-300)  → 10.4:1 (AAA) on #141626
 *       #E9D5FF (purple-200)  → 13.0:1 hover
 *     Light variant (.aict-cc-bar-light, rare) → #6D28D9 on white = 8.4:1.
 * ============================================================ */
html body #aict-cc-banner #aict-cc-banner-body .aict-cc-link,
html body #aict-cc-banner #aict-cc-banner-body .aict-cc-link:visited,
html body #aict-cc-banner #aict-cc-banner-body a.aict-cc-link,
html body #aict-cc-modal #aict-cc-modal-intro .aict-cc-link,
html body #aict-cc-modal #aict-cc-modal-intro a.aict-cc-link,
html body #aict-cc-modal .aict-cc-modal-intro .aict-cc-link {
  color: #C4B5FD !important;            /* purple-300 — 10.4:1 on #141626 (AAA) */
  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
  font-weight: 600 !important;
}
html body #aict-cc-banner #aict-cc-banner-body .aict-cc-link:hover,
html body #aict-cc-banner #aict-cc-banner-body .aict-cc-link:focus-visible,
html body #aict-cc-modal #aict-cc-modal-intro .aict-cc-link:hover,
html body #aict-cc-modal #aict-cc-modal-intro .aict-cc-link:focus-visible {
  color: #E9D5FF !important;            /* purple-200 — 13.0:1 on #141626 hover */
}
/* Light-variant wrapper (.aict-cc-bar-light / .aict-cc-modal-light) */
html body #aict-cc-banner.aict-cc-bar-light #aict-cc-banner-body .aict-cc-link,
html body #aict-cc-modal.aict-cc-modal-light #aict-cc-modal-intro .aict-cc-link {
  color: #6D28D9 !important;            /* purple-700 — 8.4:1 on white (AAA) */
}
html body #aict-cc-banner.aict-cc-bar-light #aict-cc-banner-body .aict-cc-link:hover,
html body #aict-cc-modal.aict-cc-modal-light #aict-cc-modal-intro .aict-cc-link:hover {
  color: #5B21B6 !important;            /* purple-800 hover on white */
}
/* Belt-and-suspenders: catch any stray .aict-cc-link outside the parent
 * IDs (defensive — should never trigger if banner structure is intact). */
html body a.aict-cc-link {
  color: #C4B5FD !important;
}