/* Fixes for collisions between the NextSense redesign (site.css, scoped under
 * body.p-<page>) and this app's existing generic course-marketplace template
 * CSS, which defines a few bare/unscoped classes that happen to reuse the same
 * names. Loaded once globally (see public/index.html) so every redesigned page
 * gets these fixes automatically — see frontend/DESIGN.md §6 for how these
 * were found, and re-run that collision check on every new page in case it
 * surfaces one these three don't cover.
 *
 * `body[class^="p-"]` matches any of this design's page-scope body classes
 * (p-home, p-base, p-about, p-account, p-cart, p-checkout, p-conference,
 * p-profed, p-register, ...) without needing to enumerate/update this file
 * every time a new page is converted.
 */

/* 1) src/assets/scss/layout/footer.scss and pages/index-3.scss both define a
      bare .footer-bottom{background:...}. */
body[class^="p-"] .footer-bottom {
  background: transparent;
}

/* 2) src/assets/scss/components/_button.scss's .btn-outline-dark uses
      !important on border/color, which only a competing !important wins over. */
body[class^="p-"] .btn-outline-dark {
  border: 1.5px solid var(--black) !important;
  color: var(--black) !important;
}
body[class^="p-"] .btn-outline-dark:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  border: 1.5px solid var(--black) !important;
  box-shadow: none !important;
  color: var(--black) !important;
}

/* 3) src/assets/scss/base/_base.scss's global img{height:auto} beats the
      logo's height="38"/"36" HTML attribute (any CSS rule wins over a
      presentational attribute). */
body[class^="p-"] .nav-logo img {
  height: 38px;
  width: auto;
  max-width: none;
}
body[class^="p-"] .f-logo img {
  height: 36px;
  width: auto;
  max-width: none;
}

/* 4) Pre-existing bug in the supplied design itself (reproduces in the raw
      static HTML too, not introduced by this port): every p-base page's own
      scoped rule (body.p-base[data-screen-label="X"] .nav-links li a{...
      display:block...}) has higher specificity than the shared, unscoped
      dropdown-chevron layout rule (.nav-links li.has-menu>a{display:inline-
      flex}), so it wins and breaks the flex layout the chevron's ::after
      pseudo-element depends on — it renders as a stray vertical sliver
      instead of a rotated chevron. Restored here with !important since nothing
      short of that beats the page-specific rule's specificity. */
body[class^="p-"] .nav-links li.has-menu > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* 5) Bootstrap (loaded globally via bootstrap-vue-3) defines its own bare
      .modal{display:none; position:fixed; top:0; left:0; width:100%;
      height:100%} for its own JS-toggled dialogs. The design's own .modal
      rule per page (e.g. Register's create-account dialog, Account's
      edit-profile dialog, Cart's attendee dialog) already wins on `width`
      etc. via its higher-specificity body.p-<page> selector — but it never
      declares `display`/`position`/`top`/`left`/`height` at all (it assumed
      no such framework default existed), so Bootstrap's values for exactly
      those properties win *unopposed* (not out-specified, just uncontested).
      Only fix what's actually missing — do NOT set `width` here, so each
      page's own intended modal width keeps winning as it already does. */
body[class^="p-"] .overlay > .modal {
  display: block !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* 6) src/assets/scss/layout/_header.scss defines a *bare tag selector*
      `header{position:relative; z-index:1050; background:#000}` for the
      pre-existing template's own site header. Every page in this design
      uses a literal `<header>` element for `.page-head` (the cream hero
      banner) and some also for `.hero` — `background` is already won by the
      design's own higher-specificity class selector, and `position:relative`
      is actually needed (the design's own `.head-wave` decorative SVG is
      `position:absolute` and anchors to it), so only `z-index` needs
      resetting. Left uncontested, the legacy z-index:1050 put every
      page-head/hero above the shared nav's dropdown/mega-menu panels
      (z-index:60), so an open dropdown rendered partially *behind* the page
      content instead of over it — reproduced on the Account dashboard, but
      latent on every page since every one has a `<header class="page-head">`. */
body[class^="p-"] header.page-head,
body[class^="p-"] header.hero {
  z-index: auto !important;
}