/*
 * MyMegaCalculator — A11y & Performance Patch
 * Fixes: color contrast ratios (WCAG 2.1 AA ≥ 4.5:1), CLS,
 *        and focus-visible keyboard styles.
 *
 * Loaded AFTER english-bundle.css so specificity overrides work cleanly.
 */

/* ─── 0. Sticky Header ──────────────────────────────────────────────────── */

/*
 * Reinforce sticky positioning on the main header.
 * english-bundle.css + Tailwind already set this, but we
 * make it explicit here for reliability and to match /ar/.
 */
.mmc-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #f3f4f6;
}

/*
 * Mobile dropdown menu: sits inside the sticky header,
 * so it scrolls with it. Ensure it's above other content.
 */
#mobileMenu {
  position: relative;
  z-index: 1000;
  background: #ffffff;
}

/* ─── 1. Color-Contrast Fixes ────────────────────────────────────────────── */

/*
 * Problem:  .mmc-category-card p / .mmc-tool-card p / .mmc-info-panel p
 *           use color:#6b7280 on white → ratio 3.95:1 (fails AA for normal text)
 * Fix:      Darken to #4b5563 → ratio 7.23:1 ✅
 */
.mmc-category-card p,
.mmc-tool-card p,
.mmc-info-panel p,
.mmc-country-guide p,
.mmc-content-rich p {
  color: #4b5563;
}

/*
 * Problem:  .mmc-country-pill span (badge sub-label) → #6b7280 on white = 3.95:1 ❌
 * Fix:      Darken to #4b5563 → 7.23:1 ✅
 */
.mmc-country-pill span {
  color: #4b5563;
}

/*
 * Problem:  .mmc-country-label (category label) → #9ca3af = 2.59:1 ❌
 * Fix:      Darken to #4b5563 → 7.23:1 ✅
 */
.mmc-country-label {
  color: #4b5563;
}

/*
 * Problem:  Text on hero section using .text-gray-600 (p tag below h1) passes ✅
 *           but the small eyebrow badge "FAST & HIGH PRECISION" is
 *           text-green-800 (#166534) on bg-green-100 (#dcfce7) → 5.9:1 ✅ — OK
 */

/*
 * Problem:  Hero section sub-paragraph — text-gray-600 on gradient bg-green-50/80
 *           #4b5563 on rgba(240,253,244,0.8) ≈ white-ish → 7.2:1 ✅ — OK
 */

/*
 * Problem:  "Open Calculator" and arrow spans inside card links → text-green-600
 *           #16a34a on white = 4.54:1 ✅  (just above threshold, keep as-is)
 */

/*
 * Problem:  Calculator page cards: small .text-gray-600 paragraphs on white
 *           inherit fix from above (.mmc-category-card p etc.)
 *           Also fix standalone p.text-gray-600.text-sm in grid cards:
 */
.bg-white > div > p.text-gray-600,
.rounded-3xl p.text-gray-600 {
  color: #4b5563;
}

/*
 * Problem:  Country pill sub-text in breadcrumb / footer nav → #9ca3af on #111827
 *           = 5.5:1 ✅ (passes on dark bg). No change needed.
 */

/*
 * Problem:  Footer bottom line — .text-gray-500 (#6b7280) on #111827 = 3.95:1 ❌
 *           Lighten on dark bg to #a1a1aa → 4.64:1 ✅
 */
footer .text-gray-500,
.mmc-footer-bottom {
  color: #a1a1aa;
}

/* ─── 2. Focus-Visible / Keyboard Nav ────────────────────────────────────── */

/*
 * Ensure interactive elements have visible focus rings
 * (removes browser-default outline suppression from some reset rules)
 */
:focus-visible {
  outline: 3px solid #16a34a;
  outline-offset: 3px;
  border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #16a34a;
  outline-offset: 3px;
}

/* ─── 3. CLS / Layout Stability ──────────────────────────────────────────── */

/*
 * Prevent CLS from SVGs that rely purely on CSS classes for sizing.
 * These rules establish explicit intrinsic dimensions so the browser
 * can reserve space before the SVG paints.
 */

/* Logo icon container in header */
.mmc-logo-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px !important;
  contain: strict;
}

/* Logo SVGs */
.mmc-logo-icon svg,
header svg.w-6 {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  display: block !important;
  overflow: hidden;
}

/* Mobile hamburger SVG */
#mobileMenuBtn svg {
  width: 24px !important;
  height: 24px !important;
  display: block;
}

/* Footer logo SVG */
footer svg.w-6 {
  width: 24px !important;
  height: 24px !important;
  display: block;
}

/* Country nav arrow buttons */
.mmc-country-nav {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  flex: 0 0 34px !important;
}

/* ─── 4. Font Display & Render-Blocking Mitigation ───────────────────────── */

/*
 * The English bundle uses system fonts (Tailwind default) — no Google Fonts.
 * No font-face optimisation needed here.
 *
 * The CSS preload hint is added in index.html <head>:
 *   <link rel="preload" href="/english-bundle.css?v=11" as="style">
 */

/* ─── 5. Image / Media Dimensions (anti-CLS) ─────────────────────────────── */

/*
 * Ensure all images have height:auto so explicit width attributes
 * (added in HTML) compute the correct aspect ratio.
 */
img {
  height: auto;
}

/* OG / social images referenced via meta are not inline — no fix needed. */

/* --- 6. Unified Icon Containers & Aspect Ratios ------------------------------ */
.mmc-category-icon, .mmc-tool-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #ecfdf5 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

.mmc-category-icon img, .mmc-tool-icon img {
  padding: 8px !important;
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
}

/* --- 7. Blog & Card Thumbnail Standardization ------------------------------ */
.mmc-blog-thumbnail {
  aspect-ratio: 16 / 9 !important;
  object-fit: cover !important;
  width: 100% !important;
  border-radius: 10px !important;
  background-color: #f8fafc !important;
}

/* --- 8. Logo Header Scaling ------------------------------ */
.mmc-header img[src*="logo.svg"] {
  height: auto !important;
  max-width: 250px !important;
  width: 100% !important;
}