/* CMS Content — brand styles for pages rendered from Directus WYSIWYG HTML.
   Scoped under .cms-content to avoid collisions with the SPA. */

.cms-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px 24px;
  font-family:
    'Manrope',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #061934;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.cms-content--full-width {
  max-width: none;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Directus FAQ pages use an inner wrapper with max-width but no width, so the
   block shrinks to the widest open accordion row. Pin it to the viewport. */
.cms-content--full-width > div {
  width: 100%;
  box-sizing: border-box;
}

.cms-content--full-width details {
  border: none;
  border-radius: 0;
  margin: 0;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.cms-content--full-width details[open] {
  border-color: transparent;
}

.cms-content--full-width summary {
  list-style: none;
  border: none;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

.cms-content--full-width summary::after {
  content: '\25BE';
  font-size: 14px;
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 16px;
}

.cms-content--full-width details[open] summary::after {
  content: '\25B4';
}

.cms-content--full-width details > div {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: break-word;
}

/* Headings */
.cms-content h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 24px;
  color: #061934;
}

.cms-content h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  margin: 48px 0 16px;
  color: #061934;
}

.cms-content h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin: 32px 0 12px;
  color: #061934;
}

.cms-content h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  margin: 24px 0 8px;
  color: #061934;
}

.cms-content h5,
.cms-content h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 20px 0 8px;
  color: #061934;
}

/* Paragraphs */
.cms-content p {
  margin: 0 0 16px;
}

.cms-content p:last-child {
  margin-bottom: 0;
}

/* Links — only bare <a> tags. Classed CTAs/logos (e.g. .pw-cta) ship their
   own decoration; `.cms-content a` is more specific and would re-underline
   a button that already set text-decoration: none. */
.cms-content a:not([class]) {
  color: #0a4628;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cms-content a:not([class]):hover {
  color: #063319;
}

/* Full-bleed hero pages: match the hero fill so crumbs aren't a white strip.
   Keep them in normal flow — absolute overlay ate clicks on Homepage. */
.cms-page:has(.pw-hero) .cms-page__crumbs {
  background: #f5f2eb;
}

/* Lists */
.cms-content ul,
.cms-content ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.cms-content li {
  margin-bottom: 8px;
}

.cms-content li:last-child {
  margin-bottom: 0;
}

/* Images */
.cms-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 24px 0;
  display: block;
}

/* Video and iframes */
.cms-content iframe,
.cms-content video {
  max-width: 100%;
  border-radius: 8px;
  margin: 24px 0;
}

/* Tables */
.cms-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.cms-content th,
.cms-content td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.cms-content th {
  font-weight: 600;
  background-color: #f9fafb;
}

.cms-content tr:last-child td {
  border-bottom: none;
}

/* Blockquotes */
.cms-content blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 4px solid #0a4628;
  background: #f0fdf4;
  border-radius: 0 8px 8px 0;
}

.cms-content blockquote p:last-child {
  margin-bottom: 0;
}

/* Code */
.cms-content code {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

.cms-content pre {
  margin: 24px 0;
  padding: 20px;
  background: #1f2937;
  border-radius: 8px;
  overflow-x: auto;
}

.cms-content pre code {
  background: none;
  padding: 0;
  color: #e5e7eb;
  font-size: 13px;
}

/* Horizontal rules */
.cms-content hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 48px 0;
}

/* Details/Summary (FAQ accordions) */
.cms-content details {
  margin: 0 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.cms-content details[open] {
  border-color: #0a4628;
}

.cms-content summary {
  padding: 16px 20px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.cms-content summary::-webkit-details-marker {
  display: none;
}

.cms-content summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: #586577;
  transition: transform 0.2s;
}

.cms-content details[open] summary::after {
  content: '\2212';
}

.cms-content details > *:not(summary) {
  padding: 0 20px 16px;
}

/* Figures */
.cms-content figure {
  margin: 24px 0;
}

.cms-content figcaption {
  font-size: 14px;
  color: #586577;
  margin-top: 8px;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .cms-content {
    padding: 24px 16px;
  }

  .cms-content h1 {
    font-size: 28px;
  }

  .cms-content h2 {
    font-size: 24px;
    margin-top: 32px;
  }

  .cms-content h3 {
    font-size: 20px;
  }
}

/* Acumin Pro Condensed Black Italic — exposed globally for any CMS page.

   The face ships twice, in the format each loader needs: the OTF at
   `apps/app/assets/fonts/` for `useFonts` in `_layout.tsx` (native), and a
   woff2 at `apps/app/public/fonts/` for the rules below.

   It must NOT live under `/assets/` — Metro claims that URL prefix in dev and
   maps it to the project root, so the request 404s and local pages silently
   fall back to Manrope. `/fonts/` is served by Expo from `public/` in dev, and
   in production by the nginx rule matching woff2 anywhere under the doc root.

   We declare two `font-family` aliases on the same `src` so existing CMS pages
   keep working without edits:

   - `Acumin Pro Condensed` — the human-readable label marketing uses from
     Figma mocks. Pages that write `font-family: "Acumin Pro Condensed", ...`
     will now resolve correctly.
   - `AcuminProCondensedBlackItalic` — the exact key registered in
     `apps/app/src/app/_layout.tsx`'s `useFonts(...)`. Pages that use the
     registered Expo key will resolve via the runtime font registry in
     addition to the CSS @font-face here; both are the same face.

   No new dependency; no per-page CSS rule; any future page that picks
   either name works. ponytail: shared alias, not a per-page scoped rule. */
@font-face {
  font-family: 'Acumin Pro Condensed';
  src: url('/fonts/acumin-pro-condensed-black-italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'AcuminProCondensedBlackItalic';
  src: url('/fonts/acumin-pro-condensed-black-italic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}