/* ==========================================================================
   common.css — Business theme base styles (loaded site-wide by the layout).
   Brand palette / fonts come from the client's website styles, injected as CSS
   custom properties (--color-*, --font-*) ahead of this file; everything here
   falls back to sensible defaults when a value isn't set.
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Anchor targets clear the fixed header. */
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--color-text, #1e293b);
  background-color: var(--color-bg, #ffffff);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: var(--font-size-base, 16px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading, 'Inter', sans-serif);
}

img { max-width: 100%; height: auto; }

a { color: var(--color-link, var(--color-primary, #012269)); }

section { scroll-margin-top: 80px; }

#main-content:focus { outline: none; }

/* Screen-reader-only utility. */
.biz-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media print {
  .biz-header, .biz-footer { display: none; }
}

/* ==========================================================================
   Rich text — shared prose styles for admin-entered WYSIWYG/richtext fields.
   Apply `.biz-richtext` to the wrapper so headings, paragraphs, lists and
   links render consistently wherever a richtext field is used site-wide.
   ========================================================================== */
.biz-richtext { line-height: 1.6; }
.biz-richtext > *:first-child { margin-top: 0; }
.biz-richtext > *:last-child { margin-bottom: 0; }

.biz-richtext h1, .biz-richtext h2, .biz-richtext h3,
.biz-richtext h4, .biz-richtext h5, .biz-richtext h6 {
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-weight: 700;
  color: inherit;
  line-height: 1.3;
  margin: 1.5em 0 .6em;
}
.biz-richtext h1 { font-size: 1.75em; }
.biz-richtext h2 { font-size: 1.5em; }
.biz-richtext h3 { font-size: 1.25em; }
.biz-richtext h4 { font-size: 1.1em; }
.biz-richtext h5, .biz-richtext h6 { font-size: 1em; }

.biz-richtext p { margin: 0 0 1em; }

.biz-richtext ul, .biz-richtext ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}
.biz-richtext li { margin: 0 0 .4em; }
.biz-richtext li:last-child { margin-bottom: 0; }

.biz-richtext a {
  color: var(--color-link, var(--color-primary, #012269));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.biz-richtext a:hover { opacity: .85; }

.biz-richtext strong, .biz-richtext b { font-weight: 700; }
.biz-richtext em, .biz-richtext i { font-style: italic; }

.biz-richtext img { max-width: 100%; height: auto; border-radius: 4px; margin: .5em 0; }

.biz-richtext blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 3px solid var(--color-primary, #012269);
  opacity: .85;
}

/* ── Tables ───────────────────────────────────────────────────────────────────
   Tables typed into the editor. The editor emits a bare <table>; biz_richtext()
   (theme_helper.php) wraps each one in .biz-table-wrap on the way out, which is
   what makes a wide table scroll sideways instead of bursting out of the page
   on a phone.

   The editor also stamps its own `border="1"` attribute and inline
   `border-collapse` / `width` on what it inserts. The attribute is only a
   presentational hint, so every rule here beats it; the inline values are
   matched rather than fought (collapse, full width), so nothing below depends
   on winning against a style attribute. Column widths the client sets by
   dragging in the editor are inline, and are deliberately left to win. */

.biz-richtext .biz-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.5em 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background-color: #fff;
}
.biz-richtext .biz-table-wrap:first-child { margin-top: 0; }
.biz-richtext .biz-table-wrap:last-child  { margin-bottom: 0; }

.biz-richtext table {
  width: 100%;
  /* Below this the columns stop being readable — scroll the wrapper instead. */
  min-width: 30rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.55;
  /* Independent of a centered/right-aligned block around it. */
  text-align: left;
}

.biz-richtext caption {
  caption-side: top;
  color: #6b7280;
  font-size: .85rem;
  font-weight: 600;
  text-align: left;
  padding: .9rem 1rem .1rem;
}

.biz-richtext th,
.biz-richtext td {
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  padding: .8rem 1rem;
  vertical-align: top;
}

.biz-richtext th {
  color: #111827;
  font-family: var(--font-heading, 'Inter', sans-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background-color: #f9fafb;
  white-space: nowrap;
}
.biz-richtext thead th { border-bottom: 1px solid #e5e7eb; }

/* A row-header column reads as part of the body, not as a column heading. */
.biz-richtext tbody th {
  font-size: .95rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
}

.biz-richtext tbody tr:nth-child(even) { background-color: #fcfcfd; }
.biz-richtext tbody tr:hover           { background-color: #f6f8fb; }
.biz-richtext tbody tr:last-child th,
.biz-richtext tbody tr:last-child td   { border-bottom: 0; }

.biz-richtext tfoot td,
.biz-richtext tfoot th {
  background-color: #f9fafb;
  font-weight: 700;
  border-top: 1px solid #e5e7eb;
}

/* Images and paragraphs dropped inside a cell shouldn't inherit the block
   spacing meant for prose. */
.biz-richtext td > p:last-child,
.biz-richtext th > p:last-child { margin-bottom: 0; }
.biz-richtext td img,
.biz-richtext th img { margin: 0; }

@media (max-width: 640px) {
  .biz-richtext table { font-size: .9rem; }
  .biz-richtext th,
  .biz-richtext td { padding: .65rem .8rem; }
}


.page-cms {
  padding: 5rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}