/*
 * Craft 5 site compatibility for the GenerationAI microsite.
 *
 * gen-ai-main.css / gen-ai-utilities.css / gen-ai-aia.css were written against the Craft 4 site's base CSS. The Craft 5
 * site's base CSS (app.css, styles.css) differs in two ways that change how GenAI pages render:
 *   1. It styles bare elements (h1-h5, p, a, button, figure) and some class names (.swiper-slide, .swiper-button-disabled)
 *      that the Craft 4 base left alone. GenAI relied on those properties being inherited / unset.
 *   2. The Craft 4 base styled bare <label>/<input>, which the AI in Action filter checkboxes rely on.
 *
 * This file restores the Craft 4 behaviour INSIDE .ms-gen-ai ONLY. It must load after the site CSS and BEFORE the GenAI
 * CSS (see _base.twig). It uses :where(.ms-gen-ai) so each rule ties on specificity with the site rule it neutralises
 * (and wins by coming later), while any GenAI rule still wins over it by coming later or being more specific.
 * Each block names the site rule it counters. Verified by diffing computed styles against the live Craft 4 pages.
 */

/* styles.css: h1,h2,h3,h4,h5,legend { color: var(--text-colour); font-family: Poppins-Bold, serif; word-break: break-word } */
:where(.ms-gen-ai) :is(h1, h2, h3, h4, h5, h6, legend) {
  color: inherit;
  font-family: inherit;
  word-break: normal;
}

/* styles.css: p { color: var(--text-colour); line-height: 140% } */
:where(.ms-gen-ai) p {
  color: inherit;
  line-height: inherit;
}

/* styles.css: a { display: inline-flex; max-width: fit-content } */
:where(.ms-gen-ai) a {
  display: inline;
  max-width: none;
}

/* styles.css: a:not([class]) { align-items: center; font-weight: 700 }  (links in CKEditor rich text) */
:where(.ms-gen-ai) a:not([class]) {
  align-items: normal;
  font-weight: inherit;
}

/* styles.css: p > a:not([class]) { font-weight: 400; text-decoration: underline; transition: all .2s ease }
   (links directly inside CKEditor paragraphs; GenAI's `.ms-gen-ai a { text-decoration: none }` is too weak to beat it) */
:where(.ms-gen-ai) p > a:not([class]) {
  font-weight: inherit;
  text-decoration: none;
  transition: none;
}

/* styles.css: button { display: inline-flex; align-items: center } */
:where(.ms-gen-ai) button {
  display: inline-block;
  align-items: normal;
}

/* styles.css: figure { border-radius: 1rem; overflow: hidden }  (CKEditor figure.image) */
:where(.ms-gen-ai) figure {
  border-radius: 0;
  overflow: visible;
}

/* Craft 4 base: label { font-size: .75rem; line-height: 1; letter-spacing: .02em }
                  input { background-color: #fff; font-size: 1rem; line-height: 1; letter-spacing: -.01em }   (AI in Action filters) */
:where(.ms-gen-ai) label {
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

:where(.ms-gen-ai) input {
  background-color: #fff;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* Craft 4 base: img { width: 100% }  -- GenAI's rich-text images fill the column. Craft 5 leaves them at their
   width="" attribute (e.g. 400px) instead. */
:where(.ms-gen-ai) img {
  width: 100%;
}

/* app.css: * { border: 0 solid } leaves the default border colour as currentColor. The Craft 4 base defaulted it to
   rgba(0,0,0,.16) (#00000029), which GenAI's <hr> and any border without an explicit colour pick up. */
:where(.ms-gen-ai),
:where(.ms-gen-ai) *,
:where(.ms-gen-ai) ::before,
:where(.ms-gen-ai) ::after {
  border-color: #00000029;
}

/* Craft 4 base sets this on the page root (inherited); Craft 5 leaves it at `auto` */
.ms-gen-ai {
  text-underline-offset: 2px;
}

/* app.css: .swiper-slide { display: flex; flex: 0 0 100%; flex-direction: column; justify-content: center;
                            align-items: center; max-width: 100%; margin: 0 auto }
   Class-level rule from the site's own sliders, so it needs a class-level counter. Restores Swiper's stock slide
   (flex-shrink: 0, width set by Swiper) which is what GenAI's slider was built on. */
.ms-gen-ai .swiper-slide {
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: normal;
  align-items: normal;
  max-width: none;
  margin: 0;
}

.ms-gen-ai .swiper-slide:not(.w-inline-block) {
  display: block;
}

/* app.css: .swiper-button-disabled { background-color: rgba(217,217,217,1) !important; cursor: not-allowed } */
.ms-gen-ai .swiper-button-disabled {
  background-color: transparent !important;
  cursor: auto;
}

/* styles.css: .events-title { flex: none; height: 80px; ... }  -- a site component that happens to share a class name with
   GenAI's own title row (.o-row.events-title). Only the properties GenAI does not set itself leak through. */
.ms-gen-ai .events-title {
  flex: 0 1 auto;
  height: auto;
}