/* Minimal terms.css — only classes used by the terms markdown loader and injected HTML
   Contains: container, injected-content classes emitted by js/terms.js
*/

/* Compatibility: allow replacing id="cards" with class="cards" without layout regressions.
  Some templates used an `id="cards"` wrapper; enabling `.cards` ensures swapping to
  `class="cards"` won't break page layout. */
#cards, .cards {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* Basic container for terms card and injected content */
#terms-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  box-sizing: border-box;
  background: transparent;
}

.bordered-terms-card {
  border: 2px solid var(--brand-blue) !important;
}

/* Injected content container (markdown output) */
#terms-content {
  max-width: 900px;
  margin: 0.75rem auto;
  padding: 0.5rem 0;
  color: var(--brand-black);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* H1 title emitted by the loader */
.terms-title {
  /* shrink-to-fit so the underline only spans the text */
  display: table !important;
  width: auto !important;
  margin: 0.5rem auto 0.5rem auto !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--brand-blue) !important;
  text-align: center !important;
  padding-bottom: 0.125rem !important;
  border-bottom: 2px solid var(--brand-red) !important;
  white-space: normal !important;
}

/* Small italic summary line under the title */
.terms-summary, .terms-page-summary {
  color: var(--brand-black) !important;
  font-size: 0.8rem !important;
  font-style: italic !important;
  margin: 0.25rem auto 0.75rem auto !important;
  max-width: 900px !important;
}
.terms-page-summary {
  text-align: center !important;
}

/* Hero block at top of page (static heading/summary) */
.terms-hero {
  max-width: 900px !important;
  margin: 0.5rem auto 1rem auto !important;
  padding: 1rem 0 !important;
}

/* Toolbar: center buttons and keep spacing */
.terms-toolbar {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.5rem 0 !important;
}

/* Ensure site general-button styles can apply within the toolbar */
.terms-toolbar .general-button {
  margin: 0 !important;
}

/* Normalize buttons and anchors inside the toolbar so they render identically.
   Some browsers apply native button appearance or different font metrics to
   <button> vs <a> which can cause height and weight inconsistencies. Force
   a common reset and explicit sizing here. */
.terms-toolbar .general-button,
.terms-toolbar a.general-button,
.terms-toolbar button.general-button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 6px 20px !important;
  min-height: 36px !important;
  box-sizing: border-box !important;
  border-radius: 28px !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}

/* Small visual tweak: ensure toolbar sits neatly at the top of the card area */
.terms-card .terms-toolbar { padding-top: 0.75rem !important; }

/* Override global #cards .ninehundred flex layout inside the terms card so
   the injected markdown flows vertically (toolbar, content, footer). This
   prevents theme/global grid/flex helpers from horizontally laying out the
   three children and interfering with centering/alignments. */
.terms-card > .ninehundred,
.terms-card.ninehundred,
.terms-card .ninehundred {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Ensure toolbar spans the full width of the card and centers its buttons */
.terms-card .terms-toolbar {
  width: 100% !important;
  justify-content: center !important;
  margin: 0 auto 0.5rem auto !important;
}

/* Simplify footer: avoid complex absolute positioning that can be overridden
   by global rules. Keep the date left-aligned, single-line, with padding. */
#terms-footer {
  display: block !important;
  text-align: left !important;
  position: relative !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  min-height: 1.5rem !important;
}

#terms-footer p#terms-date, #terms-footer .terms-date, #terms-date {
  display: inline-block !important;
  position: static !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand-grey-light) !important;
  font-size: 0.8rem !important;
}

/* Paragraphs and list items emitted from markdown */
.terms-body {
  color: var(--brand-black) !important;
  text-align: justify !important;
  font-size: 0.8rem !important;
}

/* Highest-specificity override for legacy class combination present in the HTML
   e.g. <p class="terms-clause date" id="terms-date">... */
/* Legacy selector: neutralize absolute positioning and align to the right
   so older markup still renders with the new right-aligned date. */
#terms-footer p.terms-clause.date#terms-date {
  display: inline-block !important;
  width: auto !important;
  text-align: right !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand-grey-light) !important;
  font-size: 0.8rem !important;
  line-height: 1 !important;
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  white-space: nowrap !important;
}

/* Lists use readable indentation */
#terms-card ol.terms-body, #terms-card ul.terms-body {
  padding-left: 1.25rem;
  margin: 0.5rem 0;
}
#terms-card ol.terms-body li.terms-body, #terms-card ul.terms-body li.terms-body {
  margin: 0.25rem 0;
}

/* Clause headings inside the markdown */
.terms-clause-heading {
  color: var(--brand-blue) !important;
  text-align: left !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.25rem !important;
}

/* Ensure paragraphs and list items inside #terms-content follow the terms-body sizing/alignment */
#terms-content p, #terms-content li, #terms-content dd {
  text-align: justify !important;
  font-size: 0.8rem !important;
  color: var(--brand-black) !important;
}

/* Strengthen H1 selector to prevent global h1 rules from overriding */
#terms-content h1.terms-title {
  display: table !important;
  margin: 0.5rem auto !important;
  width: auto !important;
  border-bottom: 2px solid var(--brand-red) !important;
}

/* Published date element (kept for JS to populate) */
/* Published date element (kept for JS to populate) */
#terms-date {
  color: var(--brand-grey-light) !important;
  font-size: 0.7rem !important;
  line-height: 1 !important;
  margin-bottom: 0rem !important;
}

/* footer container: keep simple stacked layout; date left-aligned and nowrap */
#terms-footer {
  display: block !important;
  text-align: right !important;
  position: relative !important;
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
  min-height: 1.5rem !important;
}

/* class-based selector for date (preferred) - positioned inside footer */
#terms-footer .terms-date, #terms-footer #terms-date, #terms-date {
  display: inline-block !important;
  width: auto !important;
  text-align: right !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--brand-grey-light) !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
}

/* Print: keep only content readable */
@media print {
  #terms-card { box-shadow: none; border: none; max-width: 100% !important; padding: 0; }
  #terms-content { font-size: 12pt; line-height: 1.4; }
  #terms-date { text-align: right; }
}