/* Reset, typography scale, button styles, Bootstrap neutralisers.
   Parent spec 9.2 and 9.3. No literal colours here — tokens only. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--acec-navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

/* --- Bootstrap reboot neutralisers -------------------------------------
   Bootstrap sets its own body font, body colour, heading margins and card
   chrome. The design owns all of those, so we take them back. Bootstrap
   keeps grid, card box, tooltip, collapse and form-check. */
:root {
  --bs-body-font-family: var(--font-main);
  --bs-body-color: var(--acec-navy);
  --bs-body-bg: var(--white);
  --bs-border-color: var(--acec-border);
  --bs-border-radius: var(--radius-md);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
}

/* --- Host-page neutralisers, added during the netFORUM port ------------
   These pages are injected into the ACEC site, whose acec.css styles bare
   elements globally:

     h1, .PageTitle    font-size: 50px; line-height: 55px;
                       border-bottom: 1px solid #eee; padding-bottom: 0.3em
     legend, h2        font-family: 'Playfair Display';
                       font-size: xx-large; line-height: 55px
     h3                font-size: 32px; line-height: 36px
     div, p, a, li     font-family: Raleway; letter-spacing: .08em
     a                 font-weight: 600; color: #e09a10

   A declaration matching the element directly beats anything our classes
   merely inherit, so the host was putting a 55px line-height on every h2 —
   "Hello, <name>." among them — a 32px size on h3, and .08em letter-spacing
   on every line of body text. That is what made the live page read as
   oversized and loosely spaced against the design.

   :where() holds these at the specificity of the root class alone, so they
   outrank the host's bare element selectors while every .prm-* / .acec-*
   class rule that follows still outranks them in turn. Every heading class
   in this design declares its own font-size, so `inherit` is only a floor. */
.prm-page :where(h1, h2, h3, h4, h5, h6, legend),
.acec-modal-overlay :where(h1, h2, h3, h4, h5, h6, legend) {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  letter-spacing: normal;
  color: inherit;
  border: 0;
  padding: 0;
}

.prm-page :where(div, p, a, li, span, td, th, label),
.acec-modal-overlay :where(div, p, a, li, span, td, th, label) {
  font-family: inherit;
  letter-spacing: normal;
}

.prm-page :where(a),
.acec-modal-overlay :where(a) {
  font-weight: inherit;
}

/* --- Buttons, parent spec 9.3 ------------------------------------------ */
.acec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-btn);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
  text-decoration: none;
}

.acec-btn:focus-visible {
  outline: 2px solid var(--acec-gold);
  outline-offset: 2px;
}

.acec-btn--gold {
  background: var(--acec-gold);
  color: var(--acec-navy);
}
.acec-btn--gold:hover:not(:disabled):not(.is-disabled) {
  background: var(--acec-gold-hover);
}

.acec-btn--outline {
  background: var(--white);
  color: var(--acec-navy);
  border: 1px solid var(--acec-border);
}
.acec-btn--outline:hover:not(:disabled):not(.is-disabled) {
  border-color: var(--acec-gold);
  background: var(--acec-gold-variant-02);
}

.acec-btn--danger {
  background: var(--prm-danger-dark);
  color: var(--white);
}
.acec-btn--danger:hover:not(:disabled):not(.is-disabled) {
  background: var(--prm-danger);
}

.acec-btn--link {
  background: transparent;
  color: var(--acec-gold-dark);
  padding: 0;
  text-transform: none;
  font-family: var(--font-main);
  font-size: 0.82rem;
  letter-spacing: normal;
}
.acec-btn--link:hover:not(:disabled):not(.is-disabled) {
  text-decoration: underline;
}

.acec-btn:disabled,
.acec-btn.is-disabled {
  background: var(--acec-light-gray);
  color: var(--acec-muted);
  border-color: var(--acec-light-gray);
  cursor: not-allowed;
}

/* Wizard footers use the wider padding, parent spec 9.3. */
.acec-btn--wizard {
  padding: 0.6rem 1.4rem;
}

/* --- Shared inline error region, parent spec 3.5 ----------------------- */
.acec-error {
  display: block;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--prm-danger-surface-border);
  border-radius: var(--radius-md);
  background: var(--prm-danger-surface);
  color: var(--prm-danger-dark);
  font-family: var(--font-main);
  font-size: 0.82rem;
}

.acec-error[hidden] {
  display: none;
}