/* MB-IT Tools — WCAG AA Accessibility + Branding
 * Injected via nginx sub_filter into upstream OmniTools SPA
 */

:root {
  --a11y-focus-color: #0050b3;
  --a11y-focus-width: 3px;
  --a11y-min-target: 44px;
}

/* ═══════════════════════════════════════════
   1. FOCUS INDICATORS
   ═══════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════
   2. TOUCH TARGETS (44px minimum - WCAG 2.5.8)
   Use padding, not min-width/min-height to avoid
   breaking MUI layouts
   ═══════════════════════════════════════════ */

/* Only enforce on clearly interactive elements, not all links */
button,
[role="button"],
.MuiIconButton-root,
.MuiButton-root {
  min-height: var(--a11y-min-target);
  min-width: var(--a11y-min-target);
}

/* Card action areas need adequate padding */
.MuiCardActionArea-root {
  padding: 8px;
}

/* ═══════════════════════════════════════════
   3. TYPOGRAPHY — readable defaults
   ═══════════════════════════════════════════ */

body {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Ensure text is not clipped */
p, li, td, th, label, span {
  line-height: 1.5;
}

/* ═══════════════════════════════════════════
   4. LINK IDENTIFICATION (WCAG 1.4.1)
   Links in running text must be distinguishable
   ═══════════════════════════════════════════ */

/* Only underline in-text links, not nav/button links */
p a, li a, td a, .MuiTypography-body1 a, .MuiTypography-body2 a {
  text-decoration: underline !important;
}

/* ═══════════════════════════════════════════
   5. REDUCED MOTION
   ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════
   6. HIGH CONTRAST MODE
   ═══════════════════════════════════════════ */

@media (prefers-contrast: more) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible {
    outline-width: 4px;
  }

  button, [role="button"], .MuiButton-root {
    border: 2px solid currentColor !important;
  }

  input, select, textarea {
    border: 2px solid currentColor !important;
  }
}

/* ═══════════════════════════════════════════
   7. BRANDING — Navbar rebranding
   ═══════════════════════════════════════════ */

/* Hide original OmniTools logo image */
header img[src*="logo"] {
  display: none !important;
}

/* Style the home link (brand text added by branding.js) */
header .MuiToolbar-root a[href="/"] {
  text-decoration: none !important;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hide Discord icon — Iconify renders as SVG with data-icon attr.
   Also target by class (.iconify) and the wrapping span/div. */
svg[data-icon*="discord"],
.iconify[data-icon*="discord"],
svg.iconify[data-icon*="discord"],
[data-icon="ic:baseline-discord"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* The Discord SVG has inline style cursor:pointer and sits directly
   in the toolbar. Target any toolbar child with cursor:pointer that
   contains a discord icon — use adjacent selectors as fallback. */
.MuiAppBar-root svg[data-icon*="discord"],
.MuiToolbar-root > svg[data-icon*="discord"],
.MuiToolbar-root > span:has(svg[data-icon*="discord"]),
.MuiToolbar-root > div:has(svg[data-icon*="discord"]) {
  display: none !important;
}

/* Hide GitHub star iframe */
iframe[src*="ghbtns.com"] {
  display: none !important;
}

/* Hide Buy me a coffee and Hire me buttons */
a[href*="buymeacoffee"],
a[href*="ko-fi"] {
  display: none !important;
}

/* Hide Hire Me icon button (Iconify job-search icon) */
svg[data-icon*="job-search"] {
  display: none !important;
}

/* Hide any remaining upstream promo buttons in navbar */
.MuiAppBar-root .MuiButton-contained {
  display: none !important;
}

/* ═══════════════════════════════════════════
   8. BRANDING — Footer (added by branding.js)
   ═══════════════════════════════════════════ */

/* Style the JS-injected attribution footer */
#mbit-attribution a:focus-visible {
  outline: var(--a11y-focus-width) solid var(--a11y-focus-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════
   9. SCROLLBAR ACCESSIBILITY
   ═══════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  background: #666;
  border: 3px solid #f0f0f0;
  border-radius: 8px;
  min-height: 44px;
}

@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb {
    background: #888;
    border-color: #1e1e1e;
  }
}