/*
  Education Edge UI/UX fixes, loaded after the site's own CSS on every page.
  Source of truth: tools/ux-fixes.css (copied into dist/ by tools/apply_fixes.py).
  Each block names the measured problem it fixes. Longhand properties only:
  these rules sit on elements that already carry utility classes, and a shorthand
  (padding, margin, font) would silently reset the sides those classes set.
*/

/* 1. Long URLs and words overflowed text blocks and widened the whole page on phones
      (privacy policy: "Google: https://policies.google.com/technologies/ads" pushed the page to 499px at 375px). */
main :where(h1, h2, h3, h4, h5, h6, p, li, dd, dt, td, th, blockquote, figcaption) {
  overflow-wrap: break-word;
}

@media (max-width: 479px) {
  /* 2. Card meta rows ("WHERE / Winnipeg, Manitoba") could not fit beside their title at 320px
        and ran 27px past the card. Let the row wrap on very narrow screens. */
  main .flex.items-start.justify-between.gap-6 {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }
}

/* Rules 3-12 cover touch screens: phones and tablets up to 1023px (the full-site sweep found the
   same small targets at 768px: cookie buttons 26px, footer phone 15px, breadcrumbs 10px). */
@media (max-width: 1023.98px) {
  /* 3. Footer link lists: links were ~11-26px tall on phones (29 links per page).
        Make each link a full 44px row and drop the list gap to compensate. */
  :is(footer, nav) ul.flex.flex-col.gap-2\.5 {
    row-gap: 0;
  }
  :is(footer, nav) ul.flex.flex-col.gap-2\.5 > li > a,
  :is(footer, nav) ul.flex.flex-col.gap-2\.5 > li > button {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer phone number link (15px tall). */
  footer a.tabular-nums {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-top: 0;
  }

  /* 4. Cookie consent buttons were 26-28px tall. */
  .consent-dialog button {
    min-height: 44px;
  }

  /* 5. Lead popup close button ("x") was 36px. */
  button.size-9.rounded-full.place-items-center {
    min-width: 44px;
    min-height: 44px;
  }

  /* 6. Underlined text links ("See every start date", "Read every question", "See the schedule")
        were 24px tall. Grow the tap area upward only, so the underline stays under the text. */
  main a.inline-flex.border-b {
    padding-top: 20px;
    margin-top: -20px;
  }

  /* 7. Graduate avatar buttons in the testimonial strip were 40px wide. */
  button.flex.shrink-0.flex-col.items-center.gap-2 {
    min-width: 44px;
  }

  /* 8. Accent text links ("Course details" 19px, "Contact us now for your fee..." 14px,
        "Questions before enrolling?" 38px). Taller tap area, negative margins so nothing moves. */
  main a.inline-flex.text-accent:not(.border-b):not(.rounded-action) {
    padding-top: 15px;
    padding-bottom: 15px;
    margin-top: -15px;
    margin-bottom: -15px;
  }

  /* 9. Small pill button ("See the schedule") was 39px tall. */
  main a.rounded-action.py-2\.5 {
    min-height: 44px;
  }

  /* 10. Breadcrumb links ("Home", "Certifications") were 10px tall. */
  main li > a[class="hover:text-hero-accent-lift"] {
    display: inline-block;
    padding-top: 17px;
    padding-bottom: 17px;
    margin-top: -17px;
    margin-bottom: -17px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: -4px;
    margin-right: -4px;
  }

  /* 11. Review links in chips and meta lines ("5-Star Rated · 1,145 Reviews", "Excellent — 1,145 Google reviews"). */
  main :is(li, span, p.flex) > a.underline:not(.inline-flex) {
    padding-top: 17px;
    padding-bottom: 17px;
    margin-top: -17px;
    margin-bottom: -17px;
  }

  /* 12. Related-course links in wrapping lists (FAQ answers) were 13px tall with an 8px row gap.
         Each link becomes a 44px row (underline stays under the text); the list gap drops to 0. */
  main ul.flex.flex-wrap.gap-x-5.gap-y-2 {
    row-gap: 0;
  }
  main ul.flex.flex-wrap.gap-x-5.gap-y-2 > li > a.border-b {
    display: inline-block;
    padding-top: 31px;
  }
}

/* Header over the dark hero. The fixed header drops its frosted pills while it sits over the
   hero (header gets .text-hero-cream), so the hero text scrolled straight through the logo and
   nav. Give the logo, nav and phone menu button a dark frosted pill in that state, matching the
   light pill used below the hero (8px radius, 10px blur). Longhands only: these elements carry
   several utility classes. */
header.fixed.text-hero-cream .pointer-events-auto.duration-300 {
  background-color: rgba(16, 48, 63, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 0 0 1px rgba(243, 238, 228, 0.12);
}
/* The orange Call / Contact buttons disappear against the orange course rows in the hero. */
header.fixed.text-hero-cream a.bg-hero-accent {
  box-shadow: 0 0 0 2px rgba(16, 48, 63, 0.9), 0 6px 18px rgba(0, 0, 0, 0.28);
}

/* Open mobile menu (below 1024px). The page is scroll-locked while it is open, but the panel
   was 872px tall on an 812px phone and did not scroll, so the last Resources links could not
   be reached. Cap it to the screen (header 16px + panel offset 66px + 16px gap = 98px) and let
   it scroll; make it near-opaque so the orange hero rows don't show through; and give every
   link a 44px tap height (links hold only text, so padding is safe). Longhands only. */
header.fixed nav.absolute.bg-surface-glass {
  background-color: rgba(255, 255, 255, 0.97);
  max-height: calc(100vh - 98px);
  max-height: calc(100dvh - 98px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 12px 32px rgba(16, 48, 63, 0.25);
}
header.fixed nav.absolute.bg-surface-glass a.block.py-2 {
  padding-top: 16.5px;
  padding-bottom: 16.5px;
}
header.fixed nav.absolute.bg-surface-glass a.block.py-3 {
  padding-top: 15.5px;
  padding-bottom: 15.5px;
}

/* Footer link groups below 1024px. The four groups stacked in one column with 48px gaps, so the
   footer was 2,616px tall on a 375px phone (more than 3 screens). Put the short groups in two
   columns: Education Edge links (longest label 134px) and the PMP-training-in / Legal pair side
   by side; from 640px Certifications too. Links stay 44px rows across the whole range (rule 3
   above only covered up to 767px, so 768-1023px links were 11px tall). Longhands only. */
@media (max-width: 1023.98px) {
  footer div.grid.gap-12 {
    row-gap: 32px;
  }
  footer div.grid.gap-12 nav ul.flex-col {
    row-gap: 0;
  }
  footer div.grid.gap-12 nav ul.flex-col > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  footer div.grid.gap-12 > nav:nth-child(3) ul.flex-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
  footer div.grid.gap-12 > div.gap-8 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 32px;
    align-items: start;
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  footer div.grid.gap-12 > nav:nth-child(2) ul.flex-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }
}

/* ---- Full-site sweep fixes (2026-11-12): every page at 375 / 768 / 1280 ---------------------- */

/* 14. Long tokens in article text that sits directly in a div (not in a p/li) still widened the
       page (Integration Knowledge Area: 397px at 375). overflow-wrap is inherited, so set it once. */
main {
  overflow-wrap: break-word;
}

/* 15. Article images were stretched to the column by the prose w-full rule, so small images
       were upscaled and blurry (a 158px banner shown at 673px). Show them at natural size, capped
       to the column. */
article div.flex-col.gap-5.leading-prose img {
  width: auto;
  max-width: 100%;
  align-self: flex-start;   /* images placed directly in the flex column would otherwise stretch */
}

/* 16. Blog posts: the cookie banner and the "Ready to get certified?" card were both fixed to the
       bottom of the screen at once, the card's buttons under the banner (74-88 pages, all widths).
       Hide the card until the visitor has answered the banner (the banner is then removed). */
body:has(section.consent-dialog) aside.fixed.bottom-4 {
  display: none;
}

/* 28. Email templates in two articles were set in <pre> with 132-143 character lines that never
       wrapped, so the page widened to 1,399px on phones and held the cookie banner that wide. */
article div.flex-col.gap-5.leading-prose pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 1023.98px) {
  /* 29. Contact page text links ("647-620-9490", "Compare certifications") were 11px tall. */
  main a.w-fit.text-accent.underline {
    display: inline-block;
    padding-top: 17px;
    padding-bottom: 17px;
    margin-top: -17px;
    margin-bottom: -17px;
  }
  /* 30. Standalone underlined links were 11px tall: "Read Student Experiences" and instructor
         names on /instructors, "See every course start date" on /thankyou. Taller tap area,
         negative margins so nothing moves (vertical margins are ignored on inline links). */
  main a.underline.decoration-foreground-muted\/40,
  main a.underline.underline-offset-2.text-foreground {
    padding-top: 17px;
    padding-bottom: 17px;
    margin-top: -17px;
    margin-bottom: -17px;
  }
  /* 34. Heading links ("Tell us what you are looking for") were 40px tall between 640 and 767px. */
  main a.ease-entrance.w-fit {
    min-height: 44px;
  }
  /* 17. Touch screens: links that are a whole list item, or stand alone, in article text were
         11-35px tall ("Certified Business Analysis Professional", author Twitter/LinkedIn links). */
  /*     This font reports an 11px box for 16px inline text, so grow the tap area with padding and
         cancel it with negative margins: about 45px to tap, and nothing on the page moves. */
  article div.flex-col.gap-5.leading-prose li > a:only-child,
  article div.flex-col.gap-5.leading-prose > a {
    display: inline-block;
    padding-top: 17px;
    padding-bottom: 17px;
    margin-top: -17px;
    margin-bottom: -17px;
  }
  /*     Paragraphs that hold only a link ("ENROLL NOW", "Certified Business Analysis Professional"):
         vertical padding on an inline link grows its tap area without changing the line layout. */
  article div.flex-col.gap-5.leading-prose > p > a:only-child,
  article div.flex-col.gap-5.leading-prose li > a,
  article div.flex-col.gap-5.leading-prose li > :is(strong, b, em) > a,
  article div.flex-col.gap-5.leading-prose > p > :is(strong, b):first-child + a {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  /* 18. Close button on the sticky "Ready to get certified?" card was 36px. */
  aside.fixed.bottom-4 button[aria-label="Close"] {
    min-width: 44px;
    min-height: 44px;
  }
  /* 19. "Site by Auraviam" credit in the footer was 10px tall. Taller tap area, nothing moves. */
  footer a.underline.underline-offset-4 {
    display: inline-block;
    padding-top: 17px;
    padding-bottom: 17px;
    margin-top: -17px;
    margin-bottom: -17px;
  }
  /* 20. Blog pagination numbers were 40px. */
  main a.flex.size-10 {
    min-width: 44px;
    min-height: 44px;
  }
  /* 26. Knowledge Centre category filters ("All 48", "pmp certification 39") were 37px tall. */
  main button.items-baseline.border-l-2 {
    min-height: 44px;
  }
  /* 21. Home page link list ("Which certification", "United States") was 14px tall. Grow the tap
         area upward only, so the underline stays under the text. */
  main a.border-b.border-border-subtle.pb-0\.5 {
    display: inline-block;
    padding-top: 30px;
    margin-top: -30px;
  }
}

@media (max-width: 767.98px) {
  /* 22. Body copy at 14px on phones: course card blurbs in articles, the author box, card text.
         Raise paragraph copy to 16px. */
  main p.text-sm.leading-prose {
    font-size: 16px;
  }
  /* 33. Home page step cards ("A Clear Plan. Expert Guidance...") set their text at 14px. At 16px
         it still fits inside every card down to 320px. */
  main p.relative.text-\[0\.875rem\] {
    font-size: 16px;
  }
  /* 27. Form consent line ("By submitting, you agree...") was 12px on course pages. */
  main p.text-xs.leading-prose {
    font-size: 14px;
  }
  /* 23. The sticky "Ready to get certified?" card covered about a quarter of a phone screen while
         reading. Keep its title and button, drop the blurb. */
  aside.fixed.bottom-4 p.text-sm.leading-prose {
    display: none;
  }
}

@media (max-width: 639.98px) {
  /* 24. Article tables with 3+ columns hid 9-362px of columns sideways on phones with no hint.
         Cells carry data-label (tools/table_rules.py), so each row becomes a labelled card. */
  main table:has(td[data-label]) {
    display: block;
    overflow-x: visible;
  }
  main table:has(td[data-label]) :is(thead, tbody, tr, td) {
    display: block;
  }
  main table:has(td[data-label]) tr:not(:has(td[data-label])) {
    display: none;
  }
  main table:has(td[data-label]) tr {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--border-subtle);
    border-right-color: var(--border-subtle);
    border-bottom-color: var(--border-subtle);
    border-left-color: var(--border-subtle);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 12px;
  }
  main table:has(td[data-label]) td {
    border-bottom-width: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  main table:has(td[data-label]) td + td {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--border-subtle);
  }
  main table:has(td[data-label]) td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--foreground-muted);
  }
  /* The first cell names the row, so it is the card's title rather than a labelled field. */
  main table:has(td[data-label]) td:first-child::before {
    display: none;
  }
  main table:has(td[data-label]) td:first-child {
    font-weight: 500;
  }
  /* Article tables without a header row: fit the column and wrap instead of scrolling. */
  article div.flex-col.gap-5.leading-prose table:not(:has(td[data-label])) {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  article div.flex-col.gap-5.leading-prose table:not(:has(td[data-label])) :is(td, th) {
    padding-left: 6px;
    padding-right: 6px;
    overflow-wrap: anywhere;
  }
  /* 25. Comparison tables on course pages had a 512px minimum, so on phones "Why it matters" and
         the later options were cut off at the screen edge with no hint. Two-column tables now fit.
         Wider ones keep sideways scrolling (their rows are site components, not article HTML),
         with the row label pinned on the left and a shadow at the edge that still has content. */
  main div.overflow-x-auto > table.min-w-\[32rem\]:not(:has(th:nth-child(3))) {
    min-width: 0;
  }
  main div.overflow-x-auto:has(> table.min-w-\[32rem\] th:nth-child(3)) {
    background-image: linear-gradient(to right, var(--background) 30%, transparent),
      linear-gradient(to left, var(--background) 30%, transparent),
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.16), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.16), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
    background-color: var(--background);
  }
  main div.overflow-x-auto > table.min-w-\[32rem\] :is(td, th):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--background);
    max-width: 160px;
  }
  main div.overflow-x-auto > table.min-w-\[32rem\] th:first-child {
    letter-spacing: 0.04em;
  }
}

@media (min-width: 640px) and (max-width: 1023.98px) {
  /* 31. Tablets: labelled article tables with 5+ columns still hid 24-96px sideways at 768px.
         Same labelled cards as on phones. */
  main table:has(td[data-label]):has(td:nth-child(5)) {
    display: block;
    overflow-x: visible;
  }
  main table:has(td[data-label]):has(td:nth-child(5)) :is(thead, tbody, tr, td) {
    display: block;
  }
  main table:has(td[data-label]):has(td:nth-child(5)) tr:not(:has(td[data-label])) {
    display: none;
  }
  main table:has(td[data-label]):has(td:nth-child(5)) tr {
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: var(--border-subtle);
    border-right-color: var(--border-subtle);
    border-bottom-color: var(--border-subtle);
    border-left-color: var(--border-subtle);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 16px;
    padding-right: 16px;
    margin-bottom: 12px;
  }
  main table:has(td[data-label]):has(td:nth-child(5)) td {
    border-bottom-width: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  main table:has(td[data-label]):has(td:nth-child(5)) td + td {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--border-subtle);
  }
  main table:has(td[data-label]):has(td:nth-child(5)) td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--foreground-muted);
  }
  /* The first cell names the row, so it is the card's title rather than a labelled field. */
  main table:has(td[data-label]):has(td:nth-child(5)) td:first-child::before {
    display: none;
  }
  main table:has(td[data-label]):has(td:nth-child(5)) td:first-child {
    font-weight: 500;
  }
}

@media (min-width: 640px) {
  /* 32. A long word in an article table cell could still push a 5-column table 15px past the
         desktop column. Allow a break only where a cell would otherwise overflow. */
  article div.flex-col.gap-5.leading-prose table :is(td, th) {
    overflow-wrap: anywhere;
  }
}