/*
 * AppealArmor content-page brand layer.
 *
 * Loaded by the article, insurer/denial-guide, state, glossary and report
 * pages so a visitor who clicks from a guide into the homepage or /start/
 * sees the same logo, header and terracotta call-to-action colour.
 * Markup is applied by scripts/apply-content-brand.js (idempotent).
 * Colours mirror the --aa-* tokens inlined in public/index.html.
 */
:root {
  --aac-ink: #0B1E3F;
  --aac-ink-soft: #27374D;
  --aac-mute: #5A6B85;
  --aac-line: #E3E8F0;
  --aac-paper: #FBFAF7;
  --aac-warm: #F26A50;
  --aac-warm-deep: #C9442A;
  --aac-warm-hover: #A8351F;
  --aac-warm-soft: #FCE7DD;
  --aac-font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --aac-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Header: same logo + wordmark as the homepage. */
.aac-header { background: #fff; border-bottom: 1px solid var(--aac-line); padding: 12px 0; font-family: var(--aac-font-body); }
.aac-header__row { box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aac-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--aac-ink) !important; min-height: 0 !important; min-width: 0 !important; }
.aac-brand img { width: 34px; height: 34px; flex-shrink: 0; }
.aac-brand__word { font-family: var(--aac-font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--aac-ink); line-height: 1; }
.aac-brand__word em { font-style: normal; color: var(--aac-warm-deep); }
.aac-nav { display: flex; align-items: center; gap: 20px; font-size: .9375rem; }
.aac-nav__link { color: var(--aac-ink-soft) !important; text-decoration: none !important; font-weight: 500; }
.aac-nav__link:hover { color: var(--aac-ink) !important; }
@media (max-width: 640px) {
  .aac-nav__link { display: none !important; }
  .aac-brand img { width: 30px; height: 30px; }
  .aac-brand__word { font-size: 1.0625rem; }
}

/* Terracotta button — the homepage primary colour. */
.aac-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--aac-warm-deep); color: #fff !important; font-family: var(--aac-font-body); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none !important; border-radius: 12px; padding: 14px 24px; min-height: 48px; box-shadow: 0 14px 30px -12px rgba(242,106,80,.55); transition: background .18s ease, transform .18s ease; text-align: center; }
.aac-btn:hover { background: var(--aac-warm-hover); transform: translateY(-1px); }
.aac-btn:focus-visible { outline: 3px solid var(--aac-warm); outline-offset: 3px; }
.aac-btn--sm { padding: 9px 14px; min-height: 40px; font-size: .875rem; border-radius: 10px; box-shadow: none; white-space: nowrap; }
.aac-btn--lg { font-size: 1.0625rem; padding: 16px 28px; min-height: 56px; }
/* Existing Tailwind CTA anchors re-coloured to the same terracotta. */
a.aac-warm { background-color: var(--aac-warm-deep) !important; color: #fff !important; }
a.aac-warm:hover { background-color: var(--aac-warm-hover) !important; }

/* Hero bands keep their white text but use the homepage ink, not portal blue. */
.professional-gradient { background: var(--aac-ink) !important; }

/* The one promise line, reused under every call-to-action. */
.aac-promise { font-family: var(--aac-font-body); font-size: .875rem; line-height: 1.5; color: var(--aac-ink-soft); margin: 12px 0 0; }
.aac-promise--on-dark { color: #E1E7F2; max-width: 40rem; margin-left: auto; margin-right: auto; }

/* Compact call-to-action near the top of a page. */
.aac-inline-cta { box-sizing: border-box; max-width: 56rem; margin: 1.5rem auto; padding: 18px 20px; background: var(--aac-paper); border: 1px solid var(--aac-line); border-left: 4px solid var(--aac-warm); border-radius: 0 12px 12px 0; font-family: var(--aac-font-body); }
.aac-inline-cta__text { margin: 0 0 12px; font-size: 1rem; line-height: 1.5; color: var(--aac-ink); }

/* Bridge block placed right after a fill-in-the-brackets template. */
.aac-bridge { box-sizing: border-box; margin: 1.75rem 0; padding: 22px 22px 20px; background: var(--aac-warm-soft); border: 1px solid #F5C9B8; border-radius: 14px; font-family: var(--aac-font-body); }
.aac-bridge__title { margin: 0 0 6px; font-family: var(--aac-font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.25; color: var(--aac-ink); }
.aac-bridge__body { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; color: var(--aac-ink-soft); }

/* Closing call-to-action at the end of a page. */
.aac-end-cta { box-sizing: border-box; max-width: 56rem; margin: 3rem auto; padding: 40px 24px; background: var(--aac-ink); color: #fff; border-radius: 20px; text-align: center; font-family: var(--aac-font-body); }
.aac-end-cta h2 { margin: 0 0 12px; font-family: var(--aac-font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.2; color: #fff; }
.aac-end-cta p.aac-end-cta__body { margin: 0 auto 22px; max-width: 40rem; font-size: 1rem; line-height: 1.6; color: #D8DEEC; }

/* The three design-system guide pages (appeal/experimental, medical-necessity,
   out-of-network) use .aa-hero / .aa-btn-primary from design-system.css. */
.aa-hero { background: var(--aac-ink) !important; }
a.aa-btn-primary { background-color: var(--aac-warm-deep) !important; color: #fff !important; }
a.aa-btn-primary:hover { background-color: var(--aac-warm-hover) !important; }

@media (max-width: 640px) {
  .aac-inline-cta, .aac-bridge { padding: 16px; }
  .aac-inline-cta .aac-btn, .aac-bridge .aac-btn, .aac-end-cta .aac-btn { width: 100%; }
  .aac-end-cta { margin: 2rem 12px; padding: 28px 18px; border-radius: 16px; }
  .aac-end-cta h2 { font-size: 1.4rem; }
}