/*
 * Base styles of the PerfExpert web design system (issue #308).
 *
 * Element defaults use `:where(.pe-page)` so they keep element-level specificity: any `pe-`
 * component class (`.pe-btn` colour, `.pe-header__wordmark` height) beats them.
 *
 * Scoped on purpose: a server-rendered page puts `pe-page` on <body> and gets the dark theme,
 * typography and element defaults below. The SPA shell puts `pe-shell` on <body> instead and
 * gets nothing but the flex column that keeps the footer at the bottom, so Bootstrap and the
 * AngularJS views are untouched. Nothing here targets a bare element outside those two scopes.
 */

/* ---- Server-rendered pages ---- */
.pe-page {
  margin: 0;
  background: var(--pe-navy);
  color: var(--pe-text);
  font-family: var(--pe-font);
  font-size: var(--pe-font-size);
  line-height: var(--pe-line-height);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pe-page *,
.pe-page *::before,
.pe-page *::after {
  box-sizing: border-box;
}
:where(.pe-page) main {
  flex: 1;
}
:where(.pe-page) h1,
:where(.pe-page) h2,
:where(.pe-page) h3,
:where(.pe-page) h4 {
  color: var(--pe-title);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--pe-space-2);
}
:where(.pe-page) h1 { font-size: var(--pe-font-size-display); }
:where(.pe-page) h2 { font-size: var(--pe-font-size-title); }
:where(.pe-page) h3 { font-size: var(--pe-font-size-lg); }
:where(.pe-page) h4 { font-size: var(--pe-font-size); }
:where(.pe-page) p {
  margin: 0 0 var(--pe-space-2);
}
:where(.pe-page) a {
  color: var(--pe-accent);
  text-decoration: none;
}
:where(.pe-page) a:hover,
:where(.pe-page) a:focus-visible {
  text-decoration: underline;
}
:where(.pe-page) img,
:where(.pe-page) svg {
  max-width: 100%;
  height: auto;
}
:where(.pe-page) ul,
:where(.pe-page) ol {
  margin: 0 0 var(--pe-space-2);
  padding-left: var(--pe-space-3);
}
:where(.pe-page) code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--pe-card);
  padding: 1px 6px;
  border-radius: 4px;
}
:where(.pe-page) :focus-visible {
  outline: 2px solid var(--pe-accent);
  outline-offset: 2px;
}
@media (max-width: 599px) {
  :where(.pe-page) h1 { font-size: var(--pe-font-size-title); }
  :where(.pe-page) h2 { font-size: 22px; }
}

/* Text helpers, usable inside both scopes */
.pe-text-muted { color: var(--pe-muted); }
.pe-text-title { color: var(--pe-title); }
.pe-text-green { color: var(--pe-green); }
.pe-text-orange { color: var(--pe-orange); }
.pe-text-red { color: var(--pe-red); }
.pe-text-sm { font-size: var(--pe-font-size-sm); }
.pe-text-xs { font-size: var(--pe-font-size-xs); }
.pe-text-center { text-align: center; }
.pe-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- SPA shell ----
   Light theme for the AngularJS views (white Bootstrap panels on the designer's light
   background) and the system font; the navy header/footer partials frame it. Nothing else
   of the views is restyled here. */
.pe-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--pe-light-bg);
  font-family: var(--pe-font);
}
.pe-shell > .container {
  flex: 1;
  width: 100%;
  padding: 0 var(--pe-gutter); /* 16px like the header and footer, not Bootstrap's 15 */
}