/**
 * AICT UX a11y — site-wide design tokens + focus + tap targets.
 * [UX-audit 2026-04-20] Fixes: invisible text in light mode on tool/agent
 * cards, missing focus rings, small mobile tap targets, broken theme cascade.
 *
 * Load after aict-site.css so these tokens take precedence.
 */

/* ─── Design tokens (fix broken theme cascade) ───────────────────────────── */

:root,
html:not([data-theme="dark"]),
[data-theme="light"] {
  --aict-text-primary:   #0F172A;  /* slate-900 */
  --aict-text-secondary: #475569;  /* slate-600 — AA on white (7.6:1) */
  --aict-text-muted:     #64748b;  /* slate-500 — AA on white (4.58:1) */
  --aict-surface:        #FFFFFF;
  --aict-surface-muted:  #F8FAFC;
  --aict-border:         #E2E8F0;
  /* [UX-phase2-18 2026-04-20] Indigo-500 was 4.47:1 on white — under AA for
   * body-size text. Bumped to Indigo-600 (#4F46E5 = 5.51:1) site-wide. */
  --aict-primary:        #4F46E5;  /* indigo-600 — AA on white */
  --aict-primary-hover:  #4338CA;  /* indigo-700 */
}

html[data-theme="dark"] {
  --aict-text-primary:   #F1F5F9;  /* slate-100 */
  --aict-text-secondary: #CBD5E1;  /* slate-300 */
  --aict-text-muted:     #94A3B8;  /* slate-400 — AA on dark */
  --aict-surface:        #0B1020;
  --aict-surface-muted:  #111827;
  --aict-border:         #1F2937;
  --aict-primary:        #818CF8;  /* indigo-400, lighter for dark */
  --aict-primary-hover:  #A5B4FC;
}

/* ─── Card headings + body — UX audit items 1 & 7 ──────────────────────── */
/*
 * Audit flagged .tool-card, .agent-card, .section-title rendering as
 * #F1F5F9 (near-white) on #FFFFFF in light mode — literally invisible.
 * Force token use with !important to beat inline styles from 10Web's
 * Critical CSS aggregation.
 */
html:not([data-theme="dark"]) .tool-card,
html:not([data-theme="dark"]) .agent-card,
html:not([data-theme="dark"]) .aict-tool-card,
html:not([data-theme="dark"]) .aict-agent-card {
  background: var(--aict-surface) !important;
  border-color: var(--aict-border) !important;
}
html:not([data-theme="dark"]) .tool-card h2,
html:not([data-theme="dark"]) .tool-card h3,
html:not([data-theme="dark"]) .agent-card h2,
html:not([data-theme="dark"]) .agent-card h3,
html:not([data-theme="dark"]) .aict-tool-card h2,
html:not([data-theme="dark"]) .aict-tool-card h3,
html:not([data-theme="dark"]) .aict-agent-card h2,
html:not([data-theme="dark"]) .aict-agent-card h3,
html:not([data-theme="dark"]) .section-title,
html:not([data-theme="dark"]) .aict-section-title {
  color: var(--aict-text-primary) !important;
}
html:not([data-theme="dark"]) .tool-card p,
html:not([data-theme="dark"]) .agent-card p,
html:not([data-theme="dark"]) .aict-tool-card p,
html:not([data-theme="dark"]) .aict-agent-card p,
html:not([data-theme="dark"]) .tool-card .description,
html:not([data-theme="dark"]) .agent-card .description {
  color: var(--aict-text-secondary) !important;
}

/* Dark mode: same cards need dark surface (audit item 1 — "Meet Your AI Team"
 * in dark mode had light #F8FAFC surface with light #F1F5F9 text) */
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .agent-card,
html[data-theme="dark"] .aict-tool-card,
html[data-theme="dark"] .aict-agent-card {
  background: var(--aict-surface-muted) !important;
  border-color: var(--aict-border) !important;
}
/* [audit 2026-04-21] Dark-mode card text was still falling back to slate-900
 * (rgb(11,27,53)) — invisible on dark card bg. Force token values in dark
 * mode too, mirror of the light-mode rules above. */
html[data-theme="dark"] .tool-card h2,
html[data-theme="dark"] .tool-card h3,
html[data-theme="dark"] .agent-card h2,
html[data-theme="dark"] .agent-card h3,
html[data-theme="dark"] .aict-tool-card h2,
html[data-theme="dark"] .aict-tool-card h3,
html[data-theme="dark"] .aict-agent-card h2,
html[data-theme="dark"] .aict-agent-card h3,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .aict-section-title {
  color: var(--aict-text-primary) !important;
}
html[data-theme="dark"] .tool-card p,
html[data-theme="dark"] .agent-card p,
html[data-theme="dark"] .aict-tool-card p,
html[data-theme="dark"] .aict-agent-card p,
html[data-theme="dark"] .tool-card .description,
html[data-theme="dark"] .agent-card .description {
  color: var(--aict-text-secondary) !important;
}

/* ─── "See All Agents" pill — audit item 7 ─────────────────────────────── */
html[data-theme="dark"] .see-all-agents,
html[data-theme="dark"] a.see-all-agents,
html[data-theme="dark"] .aict-see-all {
  background: var(--aict-surface-muted) !important;
  color: var(--aict-text-primary) !important;
  border: 1px solid var(--aict-border) !important;
}

/* ─── :focus-visible — audit item 8 ────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--aict-primary);
  outline-offset: 3px;
  border-radius: inherit;
}
/* Remove the default UA outline only where :focus-visible is supported,
 * so keyboard users still get a ring and mouse users don't see it on click. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Tap targets — audit item 9 (mobile ≥44×44) ──────────────────────── */
@media (max-width: 768px) {
  .try-chip,
  .aict-try-chip,
  .nav-link,
  .aict-nav-link,
  a.button,
  button.icon-button,
  .aict-icon-btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Language switcher pill in mobile menu */
  .aict-lang-pill {
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* ─── Secondary CTA — audit item 6 ──────────────────────────────────────── */
/*
 * Hierarchy: .btn-cta stays primary (purple fill). Buttons with
 * class="btn-secondary" or .btn-ghost get outline variant so
 * "Compare Plans" is visually distinct from "Start Free".
 */
.btn-secondary,
.aict-btn-secondary,
.btn-ghost {
  background: transparent !important;
  color: var(--aict-primary) !important;
  border: 1.5px solid var(--aict-primary) !important;
}
.btn-secondary:hover,
.aict-btn-secondary:hover,
.btn-ghost:hover {
  background: var(--aict-surface-muted) !important;
  color: var(--aict-primary-hover) !important;
  border-color: var(--aict-primary-hover) !important;
}

/* ─── Footer link hover — audit item 12 ─────────────────────────────────── */
.aict-site-footer a {
  transition: color .15s ease, opacity .15s ease;
}
.aict-site-footer a:hover,
.aict-site-footer a:focus-visible {
  color: var(--aict-primary) !important;
  opacity: 1;
}

/* ─── WhatsApp FAB — audit item 10 ──────────────────────────────────────── */
@media (max-width: 768px) {
  .whatsapp-fab,
  .aict-whatsapp-fab,
  [class*="whatsapp"][class*="float"] {
    bottom: 88px !important;
  }
  body {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}

/* ─── Inter webfont application — audit item 5 ──────────────────────────── */
/* Font file preload is emitted from asset-optimizer.php; this just applies it. */
:root {
  --aict-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}
/* [audit 2026-04-21] 10Web Booster CSS aggregation reset body font-family to
 * a serif default ("Times New Roman" shipped in rendered HTML). Force Inter
 * via !important so the preloaded Google font actually gets used. */
html, body, input, button, select, textarea {
  font-family: var(--aict-font-sans) !important;
}
h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1.2;
}

/* ─── Global transitions — audit phase 2 item 25 ───────────────────────── */
a, button, input, select, textarea, [role="button"] {
  transition: color .15s ease, background-color .15s ease,
              border-color .15s ease, box-shadow .15s ease,
              transform .15s ease, opacity .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ─── "Pro" badge contrast — audit phase 2 item 18 ─────────────────────── */
.pro-badge,
.aict-pro-badge,
span[class*="pro-badge"] {
  background: #047857 !important;  /* emerald-700, 4.8:1 with white */
  color: #FFFFFF !important;
}

/* ─── Orange "Try Agent" — audit phase 2 item 18 ────────────────────────── */
.try-agent-btn[data-color="orange"],
.try-agent-btn.orange,
.aict-try-agent.orange {
  background: #B45309 !important;  /* amber-700, 4.9:1 with white */
  color: #FFFFFF !important;
}

/* ─── Mega-menu label contrast — audit phase 2 item 18 ─────────────────── */
.aict-mega-col strong,
.aict-mega-menu strong {
  color: var(--aict-text-primary) !important;
}
.aict-mega-menu a {
  color: var(--aict-text-primary) !important;
}

/* ─── Hero rotating placeholder — respect prefers-reduced-motion ────────── */
@media (prefers-reduced-motion: reduce) {
  .aict-hero-placeholder-rotator,
  .aict-rotating-text {
    animation: none !important;
  }
}

/* ─── Tools Directory SVG icons — audit phase 4 P13 ────────────────────── */
/*
 * Save/favorite icons were rendering as 700×600 px because explicit
 * width/height were missing. Each tool card became one-screen-tall,
 * killing catalog browsability. Bound all card icons to 20px.
 */
.aict-tool-card svg,
.aict-tool-directory .tool-card svg,
.aict-tool-card .icon-heart,
.aict-tool-card .icon-favorite,
.aict-tool-card [data-icon] {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}
.aict-tool-card .heart-btn,
.aict-tool-card .save-btn,
.aict-tool-card button.icon-button {
  width: 36px !important;
  height: 36px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
}

/* ─── Contact page headings — audit phase 4 P14 ─────────────────────────── */
/*
 * Same theme-token leak as homepage cards (#F1F5F9 on white = 1.03:1).
 * Scoped override to restore token-driven colors.
 */
html:not([data-theme="dark"]) .aict-contact-page h1,
html:not([data-theme="dark"]) .aict-contact-page h2,
html:not([data-theme="dark"]) .aict-contact-page h3,
html:not([data-theme="dark"]) .contact-page h1,
html:not([data-theme="dark"]) .contact-page h2,
html:not([data-theme="dark"]) .contact-page h3,
html:not([data-theme="dark"]) .aict-contact h1,
html:not([data-theme="dark"]) .aict-contact h2,
html:not([data-theme="dark"]) .aict-contact h3 {
  color: var(--aict-text-primary) !important;
}
html:not([data-theme="dark"]) .aict-contact-page p,
html:not([data-theme="dark"]) .contact-page p,
html:not([data-theme="dark"]) .aict-contact p {
  color: var(--aict-text-secondary) !important;
}

/* ─── Footer defensive layout — audit phase 4 P15 ───────────────────────── */
/*
 * Footer reported as rendering 3368px wide + default browser list on
 * Pricing/About/Contact. Root cause not in footer.css (verified clean).
 * Defensive overrides force correct layout regardless of specificity
 * wars from per-page CSS.
 */
footer.aict-site-footer,
.aict-site-footer {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}
.aict-site-footer ul,
.aict-site-footer ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.aict-site-footer ul li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 .5rem 0 !important;
}
.aict-site-footer a {
  text-decoration: none !important;
}
.aict-site-footer .aict-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: 24px;
  box-sizing: border-box;
}
@media (max-width: 1024px) {
  .aict-site-footer .aict-footer-grid {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 32px !important;
  }
}
@media (max-width: 640px) {
  .aict-site-footer .aict-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
  }
}

/* ─── Primary Generate button — audit phase 4 P17 ───────────────────────── */
/*
 * Business Plan Generator "Generate" button was default browser
 * (gray #F0F0F0, 94×22). Now branded primary matching other CTAs.
 */
.aict-btn-generate,
.aict-tool-form button[type="submit"],
.aict-tool-form button.is-primary,
.aict-tool-form .aict-submit-btn,
.aict-tool-runner button[type="submit"] {
  background: linear-gradient(135deg, #4F46E5, #7C3AED) !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  min-height: 48px !important;
  min-width: 160px;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.aict-btn-generate:hover,
.aict-tool-form button[type="submit"]:hover,
.aict-tool-form button.is-primary:hover,
.aict-tool-form .aict-submit-btn:hover,
.aict-tool-runner button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}
.aict-btn-generate:active,
.aict-tool-form button[type="submit"]:active {
  transform: translateY(0);
}
.aict-btn-generate:disabled,
.aict-tool-form button[type="submit"]:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ─── Tool detail layout minimum — audit phase 4 P2 (partial) ────────────── */
/*
 * Page was rendering without container/max-width. Form stretched to
 * 3368px. Minimum containment here; full redesign pending.
 */
.aict-tool-page,
.single-aict-tool,
main.aict-tool-template {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px;
  box-sizing: border-box;
}
.aict-tool-form {
  display: grid;
  gap: 16px;
  background: var(--aict-surface-muted);
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--aict-border);
  max-width: 100%;
}
.aict-tool-form textarea {
  min-height: 180px;
  width: 100% !important;
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--aict-border);
  background: var(--aict-surface);
  color: var(--aict-text-primary);
  resize: vertical;
  box-sizing: border-box;
}
.aict-tool-form select,
.aict-tool-form input[type="text"],
.aict-tool-form input[type="email"] {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--aict-border);
  background: var(--aict-surface);
  color: var(--aict-text-primary);
  box-sizing: border-box;
}

/* ─── Sticky header — audit phase 3 P6 ─────────────────────────────────── */
/*
 * Header disappeared on scroll on pricing/blog/tool subpages. Users lost
 * nav + "Try Tools Free" CTA visibility mid-page. Sticky with backdrop
 * blur for translucency over hero gradients + solid surface for readable
 * nav links once scrolled past the hero.
 */
.aict-header,
header.aict-header,
.site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100;
  transition: background-color .2s ease, backdrop-filter .2s ease,
              box-shadow .2s ease, padding .2s ease;
}
html:not([data-theme="dark"]) .aict-header,
html:not([data-theme="dark"]) header.aict-header {
  /* Translucent white over hero gradient + solid-ish once scrolled. */
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="dark"] .aict-header,
html[data-theme="dark"] header.aict-header {
  background: rgba(11, 16, 32, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.aict-header.is-scrolled,
header.aict-header.is-scrolled {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ─── Nav links contrast over hero gradient — audit phase 1 UX-2 ────────── */
/*
 * Nav links were #1A1A2E on purple gradient (<2:1). With the translucent
 * header above, they now sit on white/dark tinted surface → AA contrast
 * via token.
 */
html:not([data-theme="dark"]) .aict-header .aict-nav-links a,
html:not([data-theme="dark"]) .aict-nav-links a,
html:not([data-theme="dark"]) header.aict-header a,
html:not([data-theme="dark"]) .aict-header .aict-logo {
  color: var(--aict-text-primary) !important;
}
html[data-theme="dark"] .aict-header .aict-nav-links a,
html[data-theme="dark"] .aict-nav-links a,
html[data-theme="dark"] header.aict-header a,
html[data-theme="dark"] .aict-header .aict-logo {
  color: var(--aict-text-primary) !important;
}

/* ─── Back-to-top / WhatsApp collision — audit phase 3 P10 ──────────────── */
.aict-back-to-top,
.back-to-top,
button.back-to-top {
  bottom: 88px !important;
  right: 16px !important;
  z-index: 90;
}
.whatsapp-widget,
.whatsapp-fab,
.aict-whatsapp-fab {
  bottom: 16px !important;
  right: 16px !important;
  z-index: 91;
}

/* ─── Mobile nav defensive — audit phase 5 P19 ─────────────────────────── */
/*
 * Audit flagged "no mobile header layout" — header-nav.php DOES have
 * @media (max-width: 1080px) rules inline but they may be stripped
 * by 10Web Booster CSS aggregation. Defensive duplicate here so the
 * mobile hamburger always renders regardless of inline CSS survival.
 */
@media (max-width: 1080px) {
  .aict-nav-links,
  .aict-nav-cta,
  .aict-lang-switcher {
    display: none !important;
  }
  .aict-mobile-toggle {
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
  }
}
@media (max-width: 768px) {
  /* Extra-mobile — tighten header inline gap */
  .aict-header-inner {
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .aict-logo-text {
    font-size: 15px !important;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ─── Skip-link — audit phase 3 item P5 ────────────────────────────────── */
/* Default WP skip-link was rendering blue-underlined at top-left of every
 * subpage (Pricing/Blog/Tool/404). Hide off-screen until focused.
 * [audit 2026-04-21] theme uses `aict-skip-link` class (not `skip-link`) —
 * puppeteer probe confirmed. Added that selector + common fallbacks. */
.skip-link,
a.skip-link,
.aict-skip-link,
a.aict-skip-link,
.screen-reader-text.skip-link,
.wp-block-site-logo + .skip-link,
body > .skip-link:first-child,
body > .aict-skip-link:first-child {
  position: absolute !important;
  left: -9999px !important;
  top: 0 !important;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--aict-surface, #fff);
  color: var(--aict-text-primary, #0F172A) !important;
  text-decoration: none !important;
  border-radius: 0 0 8px 0;
}
.skip-link:focus,
a.skip-link:focus,
.aict-skip-link:focus,
a.aict-skip-link:focus,
body > .skip-link:first-child:focus,
body > .aict-skip-link:first-child:focus {
  left: 0 !important;
  outline: 2px solid var(--aict-primary, #4F46E5);
  outline-offset: 0;
}