/* ==========================================================
   page-header.css — the ONE definition of a primary page title (DRY)

   Loaded on every page that has a page title, AFTER base.css, the group
   stylesheet and the page stylesheet (same slot as bottom-nav.css), so its
   equal-specificity rules win by source order — no !important needed.

   Before this file, the title was re-declared in ~45 page stylesheets and had
   drifted badly: font-size ranged 1.4rem–2.2rem across six different clamps,
   weight 400–800, letter-spacing 0/0.02em/0.08em, bottom margin 0–18px, and
   the colour was written out ~30 times as `var(--navy)` while ~8 pages omitted
   `color` entirely and only *happened* to look right because they inherited
   body's --text-main, which is coincidentally the same #0f2044. That is the
   bug this file removes: the colour is now stated once, so it can never drift.

   The three class names below are the app's page-title markup, used
   interchangeably by role (no layout depends on which one a page picked):
     .page-header h1 / .page-heading h1   — heading + optional subtitle block
     .page-title                          — the same heading, classed directly
     .add-header h1 / .edit-header h1     — booth product create/edit titles

   NOT a page title, and deliberately NOT matched here — these are distinct
   components on their own surfaces, and forcing navy on the first two would
   render them invisible:
     .welcome-banner h1  — white on the navy gradient (4 dashboards)
     .chooser-body h1    — light on the #202124 account chooser
     .hero-heading / .hero-content h1     — marketing heroes (landing, about)
     .status-hero h1 / .complete-header h1 / .status-banner* h1 — status heroes
     .login-header h1 / .notice-header h1 — auth card titles
     .details-header h1  — the listing title inside a product card
   ========================================================== */

.page-header h1,
.page-heading h1,
.page-title,
.add-header h1,
.edit-header h1 {
  font-family: 'Poppins', sans-serif;
  /* One fluid ramp replaces the six per-page clamps and every
     `@media … { font-size }` step-down they each carried. */
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  /* Explicit reset: five pages had drifted to 0.02em/0.08em tracking. */
  letter-spacing: normal;
  color: var(--page-title-color);
  /* Sole source of the title → subtitle gap (see the two rules below). */
  margin: 0 0 8px;
}

/* Some .page-heading blocks are flex columns with their own `gap`, and four
   subtitles carried a `margin-top`. Both stack on top of the 8px above and
   would reintroduce the drift this file exists to remove, so they are zeroed:
   the title's margin is the only thing that separates a title from its
   subtitle, app-wide. Only the vertical gap is reset — .page-header rows keep
   their horizontal `gap` because they lay the title out beside an action
   button, and the subtitles keep their own colour/size/max-width. */
.page-heading { row-gap: 0; }
.page-header p,
.page-heading p,
.page-subtitle { margin-top: 0; }

/* Legacy Student heading markup keeps the same description typography while
   screens are migrated to x-app.student-page-heading. Existing bottom margins
   remain intact so detail/status layouts do not move unexpectedly. */
.student-mobile-header ~ .content .page-header p,
.student-mobile-header ~ .content .page-heading p,
.student-mobile-header ~ .content .page-subtitle {
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
}

/* ==========================================================
   Student page heading

   Student screens render this through x-app.student-page-heading. Keeping a
   dedicated class prevents page-level .page-header/.page-heading rules from
   changing the title or description between screens.
   ========================================================== */
.student-page-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  gap: 6px;
  margin: 0 0 24px;
}

.student-page-heading .student-page-title {
  max-width: 100%;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--page-title-color);
  overflow-wrap: normal;
  word-break: normal;
}

.student-page-heading .student-page-description {
  max-width: 48rem;
  margin: 0;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
}

.page-heading-row:has(> .student-page-heading) {
  align-items: flex-start;
  margin-bottom: 24px;
}

.page-heading-row > .student-page-heading,
.student-heading-content-gap > .student-page-heading {
  margin-bottom: 0;
}

.student-heading-content-gap > .page-heading-row:has(> .student-page-heading) {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .student-page-heading {
    gap: 6px;
  }

  .student-page-heading .student-page-title {
    font-size: 1.6rem;
    line-height: 1.25;
  }

  .student-page-heading .student-page-description {
    font-size: 0.92rem;
    line-height: 1.5;
  }
}