/* proto-pages-aem.css: the landing pages (templates/search/*.html) in AEM's look over the shared frame of
   proto-pages.css: the white page inside the blue frame of the home, the 900-weight capitals with their short black
   rule, the hero photo of the home, the engine strip of /bmw, the vehicle row under the H1 on a phone. Colours and type are
   cl-site.css's --site-* tokens; boxes square (--site-radius). */
@layer base, kit, site;

@layer site {

/* the page: the blue frame and the white sheet inside it, as on AEM's home */
.aem-pp-page { background: var(--site-accent); }
.aem-frame { margin: 32px var(--site-frame) var(--site-frame); background: var(--site-bg); color: var(--site-fg); }
.aem-pp .pp-h1 { font: 900 56px/1 var(--site-font-heading); letter-spacing: 0; text-transform: uppercase; }
.aem-pp .pp-h1::after { content: ""; display: block; width: 40px; height: 4px; margin-top: 18px; background: currentColor; }
.aem-pp .pp-h2 { font: 900 32px/1.05 var(--site-font-heading); letter-spacing: 0; }
.aem-pp .pp-h3 { font-weight: 900; }
.aem-pp .pp-lead { margin-top: 18px; font: 500 19px/1.45 var(--site-font-body); }
.aem-pp .pp-note a { text-decoration: underline; text-underline-offset: 2px; }
.aem-pp .pp-btn { font-size: 15px; }
.aem-pp .pp-section > .pp-h2 + * { margin-top: 20px; }

/* a section head names models (335i, IS250), so it keeps their case */
.aem-pp .pp-h2, .aem-pp .pp-h3 { text-transform: none; }

.aem-mine .pp-shead { border-bottom-color: var(--site-accent-ink); }


/* /bmw: the charge pipes by engine, the engine code over each card */
.aem-engine { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aem-engine > .pp-card { flex: 1 1 auto; }

/* the home: AEM's hero photo with the H1 on it */
.aem-home .pp-wrap { padding-top: 8px; }
.aem-hero { position: relative; display: flex; align-items: flex-end; min-height: 420px; overflow: hidden; background: var(--site-ft-bg); color: var(--site-ft-fg); }
.aem-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aem-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .15) 70%); }
.aem-hero__in { position: relative; z-index: 2; width: 100%; max-width: var(--site-max); margin: 0 auto; padding: 0 24px 40px; }
.aem-pp .aem-hero__h { color: var(--site-ft-fg); font-size: 80px; }

/* a phone: the H1 a little bigger than before (36 to 40, the home's 40 to 44), every other text smaller */
@media (max-width: 979.98px) {
  .aem-frame { margin-top: 0; }
  .aem-pp .pp-h1 { font-size: 40px; line-height: 1.05; }
  .aem-pp .pp-h1::after { margin-top: 12px; }
  .aem-pp .pp-h2 { font-size: 22px; }
  .aem-pp .pp-lead { margin-top: 12px; font-size: 15px; }
  .aem-pp .pp-btn { font-size: 13px; }
  .aem-hero { min-height: 200px; }
  .aem-hero__in { padding: 0 16px 20px; }
  .aem-pp .aem-hero__h { font-size: 44px; }
  .aem-engines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the vehicle row under the H1 of a phone (templates/partials/picker_row.html, static/aem-picker.js): one line of
   44px fields and Go, under 64px with its margins; each list opens under the row, its full width. From 980px the
   row goes and the kit's band sits at the top of the page (base.html). */
.aem-row { display: none; }
@media (max-width: 979.98px) {
  .aem-row { display: block; position: relative; z-index: 20; margin: 8px 0; color: var(--site-fg); font-family: var(--site-font-body); }
  .aem-home .aem-row { margin-top: 0; }
  .aem-row__now { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-height: 44px; margin: 0; font: 700 16px/1.25 var(--site-font-body); }
  .aem-row__change { min-height: 40px; margin: 0; padding: 0 4px; background: none; border: 0; color: var(--site-accent-ink); font: 700 16px/1 var(--site-font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .aem-row__form { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
  .aem-row__form[hidden] { display: none; }
  .aem-row.is-set .aem-row__form { margin-top: 4px; }
  .aem-row__named { flex: 0 1 auto; min-width: 0; margin: 0; font: 700 16px/1.2 var(--site-font-body); }
  .aem-field { flex: 1 1 0; min-width: 0; }
  .aem-field[hidden] { display: none; }
  /* the Submodel, when the model has one, takes a line of its own under the row, as it follows Go in the band */
  .aem-field--submodel { order: 5; flex-basis: 100%; }
  .aem-field select, .aem-field__button {
    position: relative; display: block; width: 100%; height: 44px; margin: 0; padding: 0 26px 0 10px;
    background: var(--site-field-bg); color: var(--site-fg); border: 1px solid var(--site-field-edge); border-radius: var(--site-radius);
    font: 400 16px/42px var(--site-font-body); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    cursor: pointer; -webkit-appearance: none; appearance: none;
  }
  /* a level not open yet (Year before a Model): its word at full contrast, told apart by a dashed edge */
  .aem-field select:disabled, .aem-field__button:disabled { border-style: dashed; cursor: default; }
  .aem-row__form.is-live select { display: none; }
  .aem-row__form:not(.is-live) .aem-field__button, .aem-row__form:not(.is-live) .aem-field__panel { display: none; }
  .aem-field__button::after {
    content: ""; position: absolute; top: 50%; right: 11px; width: 7px; height: 7px; margin-top: -5px;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .aem-field__button[aria-expanded="true"] { border-color: var(--site-accent-ink); box-shadow: inset 0 0 0 1px var(--site-accent-ink); }
  .aem-field__button[aria-expanded="true"]::after { margin-top: -1px; transform: rotate(225deg); }
  .aem-field__panel {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1; max-height: min(320px, 50vh); overflow-y: auto;
    overscroll-behavior: contain; margin: 0; padding: 4px 0; background: var(--site-field-bg); border: 1px solid var(--site-field-edge);
    border-radius: var(--site-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  }
  .aem-field__panel[hidden] { display: none; }
  .aem-field__option {
    display: block; width: 100%; min-height: 40px; margin: 0; padding: 9px 12px; background: none; color: var(--site-fg);
    border: 0; border-radius: 0; font: 400 16px/22px var(--site-font-body); text-align: left; cursor: pointer;
  }
  .aem-field__option:hover, .aem-field__option:focus-visible { background: var(--site-band); outline: none; }
  .aem-field__option[aria-selected="true"] { font-weight: 700; }
  /* the row asks for the vehicle once, so a section's own year picker waits for a wider screen */
  .aem-vehicle .pp-pick { display: none; }
  .aem-row__go {
    flex: none; height: 44px; min-width: 56px; margin: 0; padding: 0 14px; background: var(--site-accent); color: var(--site-accent-fg);
    border: 0; border-radius: var(--site-radius); font: 700 16px/1 var(--site-font-body); cursor: pointer;
  }
  .aem-row :is(button, select):focus-visible { outline: 2px solid var(--site-accent-ink); outline-offset: 2px; }
}

}