/*
 * franklin.css — Mortgage Trust / Franklin canonical landing-page CSS
 * Shared across: index, blog, about, lenders, licensing, status
 * Implements the Mortgage Trust Design Standards.
 * Page-specific styles live in each page's <style> block.
 *
 * version: 4.0
 * updated: 2026-10-08
 *
 * CHANGELOG
 *   4.0 (2026-10-08) — reconciled with MTI Design Standards v4.0; the eight brand
 *       files (DS, franklin.css, franklin-chrome.css, franklin-desk.css,
 *       franklin-tasks.css, custom.css, mti.css, shared.css) now share one version. h3 default brand-purple (DS v2.11, finally in CSS); h4 rule added;
 *       h1 treatments -0.01em and h2 -0.02em tracking; em/i upright at 500 (DS § 3.4);
 *       modal header on --font-heading, modal radii on --radius; .tap citations fixed
 *       (DS § 5.11); --brand-purple-print SSOT is DS § 2.1. Unlogged Sep work recorded:
 *       .tap (09-24, hit-area 09-28) and the shared modal.
 *   1.7 (2026-05-31) — chrome rules moved to franklin-chrome.css.
 *
 * Chrome rules (.site-header, .hero-logo, .nav-links, .visually-hidden)
 * moved to franklin-chrome.css to share with the OWUI chat-surface
 * injection. This file @imports them so landing pages need no
 * <link> additions.
 */
@import url('franklin-chrome.css');

/* ──────────────────── TOKENS ──────────────────── */
:root {
  /* Brand */
  --brand-purple:        #82498E;
  --brand-purple-light:  #9F5EAC;
  /* Logo-matched purple for PRINT collateral (business cards, flyers rendered
     via WeasyPrint). The screen token above is grayer than the logo art
     (#7B2B83); on print, text set in it clashes with the logo. Use this to
     match. Print generators embed CSS standalone, so also define it in their
     own :root. The SSOT is Design Standards § 2.1; this mirrors it (v4.0). */
  --brand-purple-print:  #7B2B83;

  /* Type weight (Design Standards §3.4) — MTI carries emphasis by weight, never
     italics. brand-bold is the `*` emphasis marker (medium); brand-hard-bold is
     `**` / headings (700 stays unique to headings). */
  --brand-bold:          500;
  --brand-hard-bold:     700;

  /* Action */
  --action-green:        #558E49;
  --action-teal:         #49778E;

  /* Text */
  --text-primary:        #333333;
  --text-muted:          #52504F;

  /* UI */
  --ui-light:            #DCDDDE;
  --ui-soft-gray:        #F5F5F5;
  --ui-white:            #FFFFFF;

  /* UI — dense-component variants (table cells, form chrome) */
  --ui-hover:            #FAFAFA;
  --ui-table-border:     #F0F0F0;
  --ui-dark:             #1F1B22;

  /* Status — operational/lifecycle state, semantic role naming */
  --status-success:      #2EA043;
  --status-warning:      #EAB308;
  --status-danger:       #D7263D;
  --status-info:         #0969DA;
  --status-neutral:      #333333;

  /* Status — soft backgrounds for inline errors / success states */
  --status-danger-soft:  #F8E3E3;
  --status-success-soft: #F0FFF0;
  --status-warning-soft: #FFF6E0;

  /* Tints — ~10% alpha approximations of action/brand colors, used as
     non-semantic backgrounds (tab rests, hover fills, upload zones). */
  --tint-green:          #EEF3ED;
  --tint-teal:           #ECF1F4;
  --tint-purple:         #F3EDF5;

  /* Elevation — single canonical card shadow, matches WebUI (custom.css) */
  --shadow-card:         0 10px 15px -3px rgba(73, 119, 142, 0.15),
                         0 4px 6px -4px rgba(73, 119, 142, 0.1);

  /* Width tiers */
  --width-prose:         900px;
  --width-standard:      1180px;
  --width-wide:          1600px;

  /* Spacing scale */
  --space-xs:            8px;
  --space-sm:            16px;
  --space-md:            24px;
  --space-lg:            36px;
  --space-xl:            48px;

  /* Radius */
  --radius:              6px;
  --radius-pill:         50%;

  /* Type */
  --font-body:    "Helvetica Neue", HelveticaNeue, Helvetica, Roboto,
                  "Liberation Sans", Arimo, Arial, sans-serif;
  --font-heading: "Helvetica Neue Condensed", "HelveticaNeue-CondensedBold",
                  "Roboto Condensed", "Helvetica Neue", HelveticaNeue,
                  Helvetica, Roboto, "Liberation Sans", Arimo, Arial, sans-serif;
  --font-mono:    'Roboto Mono', Menlo, Consolas, monospace;
}

/* ──────────────────── RESET ──────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--ui-white);
}

/* ──────────────────── BASE TYPOGRAPHY ──────────────────── */
h2 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: var(--brand-hard-bold);
  color: var(--brand-purple);
  letter-spacing: -0.02em;        /* DS § 3.3 (v4.0) */
  line-height: 1.2;
  margin-bottom: 24px;
}

h3 {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: var(--brand-hard-bold);
  color: var(--brand-purple);     /* v4.0: purple everywhere on web (DS § 3.3, v2.11 ruling) —
                                     was text-primary with an article-section override */
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}

/* H4 and deeper: text-primary (DS § 3.2, added v4.0). */
h4 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--brand-hard-bold);
  color: var(--text-primary);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}

/* No italics anywhere (DS § 3.4). Emphasis is weight 500; slant is never an MTI
   style. Same rule as shared.css for print. Added v4.0. */
em, i, cite, var, dfn, address { font-style: normal; font-weight: var(--brand-bold); }

/* Article subsection h3 — inherits color, size and letter-spacing; tighter rhythm */
article section h3 {
  margin-bottom: 10px;
  line-height: 1.2;
}

/* Article subsection wrapper spacing */
article section { margin-bottom: 20px; }
article section:last-child { margin-bottom: 0; }
article section p { margin-bottom: 12px; }
article section p:last-child { margin-bottom: 0; }

/* Top-level main sections — bottom padding between major page blocks */
main > section { padding-bottom: 48px; }

/* Intro paragraph sitting directly under an H2.
   Restores rhythm between H2 (margin-bottom: 24px) and the first content
   block. Use on the lone <p> that introduces a section. */
.section-intro {
  margin-top: 16px;
  margin-bottom: 24px;
}

/* ──────────────────── LINKS ──────────────────── */
a {
  color: var(--action-teal);
  text-decoration: underline;
}

.cta-link {
  font-weight: var(--brand-hard-bold);
  text-decoration: none;
}

/* ──────────────────── BUTTONS ──────────────────── */
.btn {
  display: inline-block;
  background: var(--action-green);
  color: var(--ui-white);
  font-family: var(--font-body);
  text-decoration: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--action-teal); }
.btn:focus-visible {
  outline: 2px solid var(--action-teal);
  outline-offset: 2px;
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-lg {
  font-family: var(--font-heading);
  font-weight: var(--brand-hard-bold);
  font-size: 16px;
  padding: 12px 28px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.btn-lg:hover { transform: translateY(-1px); }

.btn-sm {
  font-family: var(--font-body);
  font-weight: var(--brand-bold);
  font-size: 12px;
  padding: 4px 10px;
}

/* ──────────────────── BULLET LIST ──────────────────── */
/* Brand-purple arrow marker via absolutely-positioned ::before, paired
   with a heading-font body so each bullet reads as a statement, not a
   list item. Inline content (links, emphasis) flows as normal prose
   since the <li> is not a flex container. */
.bullet-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 12px;
  padding: 0;
}
.bullet-list:last-child { margin-bottom: 0; }

.bullet-list li {
  position: relative;
  padding-left: 36px;
  font-family: var(--font-heading);
  font-weight: var(--brand-hard-bold);
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-primary);
}

.bullet-list li::before {
  content: '\2192';
  color: var(--brand-purple);
  font-size: 24px;
  line-height: 1;
  font-weight: var(--brand-hard-bold);
  position: absolute;
  left: 0;
  top: 1px;
}

/* .visually-hidden — moved to franklin-chrome.css (shared chrome) */

/* ──────────────────── WIDTH UTILITIES ──────────────────── */
.width-prose    { max-width: var(--width-prose); }
.width-standard { max-width: var(--width-standard); }
.width-wide     { max-width: var(--width-wide); }

main {
  margin: 0 auto;
  padding: 0 24px 48px;
}

/* ──────────────────── PAGE WRAPPER ──────────────────── */
.page {
  max-width: var(--width-prose);
  margin: 0 auto;
  padding: 0 48px;
}

/* .site-header, body.tool-page .site-header, .hero-logo
 * — moved to franklin-chrome.css (shared chrome) */

.hero-avatar {
  display: block;
  width: 180px;
  height: 180px;
  border-radius: var(--radius);
  margin: 0 auto 24px;
  object-fit: cover;
}

.hero-intro { margin: 0; }

.hero-intro p,
.closing-prose {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--brand-hard-bold);
  color: var(--text-primary);
  line-height: 1.6;
  margin-bottom: 16px;
  text-align: left;
}
.hero-intro p:last-child { margin-bottom: 0; }

/* Hero name/greeting line — the shared standard for index + tool-page heroes. */
.hero-title {
  font-family: var(--font-heading);
  font-weight: var(--brand-hard-bold);
  font-size: 36px;
  color: var(--brand-purple);
  letter-spacing: -0.01em;        /* H1 tracking, DS § 3.3 (v4.0) */
  line-height: 1.1;
  margin: 0 0 6px;
}

/* ──────────────────── DIVIDER ──────────────────── */
/* No margin-top. Assumes the preceding section owns its bottom rhythm
   (typically main > section padding-bottom: 48px). If used elsewhere,
   the parent needs to provide breathing room above. */
.divider {
  border: none;
  border-top: 1px solid var(--brand-purple-light);
  margin-bottom: 24px;
}

/* ──────────────────── PAGE TITLE (tool pages) ──────────────────── */
.page-title {
  font-family: var(--font-heading);
  font-weight: var(--brand-hard-bold);
  font-size: 36px;
  color: var(--brand-purple);
  letter-spacing: -0.01em;        /* H1 tracking, DS § 3.3 (v4.0) */
  text-align: center;
  margin: 0;
}

/* Trademark/registered marks inside H1s — scale down to avoid dominating */
.page-title .tm {
  font-size: 0.5em;
  vertical-align: 0.4em;
  letter-spacing: 0;
  font-weight: inherit;
}

/* ──────────────────── PAGE META (tool-page freshness line) ──────────────────── */
.page-meta {
  margin: 0 0 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}
.page-meta.yellow { color: var(--status-warning); }
.page-meta.red    { color: var(--status-danger); }

/* ──────────────────── CARD LABEL ──────────────────── */
/* Sentence-case brand-purple label for card headers, callout chips, and
   in-card section markers. Use on a non-heading element (span/div) —
   this is intentionally not a semantic heading. */
.card-label {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: var(--brand-hard-bold);
  color: var(--brand-purple);
}

/* .nav-links + .nav-links a (incl :hover, .current)
 * — moved to franklin-chrome.css (shared chrome) */

/* ──────────────────── FOOTER ──────────────────── */
footer {
  padding: 32px 48px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  border-top: 1px solid var(--brand-purple-light);
}

.footer-logo {
  display: block;
  width: 300px;
  margin: 0 auto;
  opacity: 0.85;
}

/* ──────────────────── TAP (a value you can click to edit) ────────────────────
   Darren, 2026-09-24: "Can hover be the brand convention, probably teal tint?"
   Yes, and it already is -- MTI-Design-Standards.md § 5.3.1 calls the hover/state model
   canonical across web, chat and any future surface and says hover tints are teal "so
   the affordance language stays consistent"; § 2.2 names --tint-teal as the fill (v4.0).
   This class is not a new decision. Spec: DS § 5.11 (added v4.0).

   ⚠ TEAL TEXT, NOT A TEAL BUTTON. Per the standards' three click types, an editable
   VALUE is closer to a link than to a button -- green is reserved for buttons at
   rest, so a green tint here would claim the wrong affordance.

   ⛔ WHY NOT A REST TINT TOO. recruiting.html:90 tints editable cells at rest
   (`td.editable`), and it is right to: only SOME cells there are editable, so the
   tint discriminates. On a table where every value is editable it discriminates
   nothing and just paints the table teal. Rest-tint belongs to selective-edit
   tables only, and folding `td.editable` in here is a job for the site-wide sweep,
   not for this rule -- a class with no callers is the thing a later tidy-up
   deletes as dead. */
/* ⛔ THE HIT AREA IS VERTICAL PADDING WITH THE MARGIN PULLED BACK. Darren, 2026-09-28:
   "I tried to use it on my phone this weekend and unlike on the desktop, tapping a
   question or email does... nothing." This rule was `padding: 0 3px` — horizontal only —
   so the target was a ~17px strip of glyphs. A mouse pointer hits that; a thumb does not.
   Vertical padding on an INLINE element extends the hit box without changing the line
   height, so the negative margin keeps the layout identical while the target reaches ~33px.
   ⚠ AND `:hover` IS NOT AN AFFORDANCE ON TOUCH. The teal highlight was the only thing
   saying "this is tappable", and it cannot fire on a phone — so the control looked like
   plain text AND was hard to hit, which is why "nothing" was the honest description.
   `:active` gives the same feedback to a finger. */
.tap { cursor: pointer; border-radius: 4px; padding: 8px 3px; margin: -8px -3px;
       -webkit-tap-highlight-color: transparent; }
.tap:hover, .tap:active { background: var(--tint-teal); color: var(--action-teal); }
/* A whole row as the target, for lists where the row carries no other control. A thumb
   aims at the row, not at the words in it. */
tr.tap-row { cursor: pointer; }
tr.tap-row:active td { background: var(--tint-teal); }

/* ──────────────────── MODAL (shared dialog) ────────────────────
   Canonical popup: purple header + close, body, footer actions bar. Spec: DS § 5.12.
   Used by approvedcondos.html (FHA-lookup) and designer.html (signature
   paste directions). Toggle with .is-open. Page-specific body content
   (e.g. .project-id) stays page-local. */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: var(--ui-white);
  border-radius: var(--radius);   /* v4.0: was 8px */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  width: min(520px, 92vw);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-header {
  background: var(--tint-purple);
  border-bottom: 1px solid var(--ui-light);
  padding: 14px 20px;
  padding-right: 44px;
  position: relative;
}
.modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: var(--brand-purple);
  font-family: var(--font-heading); /* v4.0: was a hardcoded Roboto Condensed stack that
                                       skipped Helvetica Neue Condensed (DS § 3.1) */
  font-weight: var(--brand-hard-bold);
}
.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);   /* v4.0: was 4px */
  transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--tint-teal); color: var(--action-teal); }
.modal-body {
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.5;
}
.modal-body p { margin: 0 0 10px; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body ol { margin: 0 0 10px; padding-left: 20px; }
.modal-body li { margin: 0 0 6px; }
.modal-actions {
  border-top: 1px solid var(--ui-light);
  padding: 14px 20px;
  display: flex;
  justify-content: flex-end;
  background: var(--ui-soft-gray);
}

/* ──────────────────── MOBILE @700px ──────────────────── */
@media (max-width: 700px) {
  .page { padding: 0 20px; }
  .hero-avatar { width: 140px; height: 140px; }
  footer { padding: 24px; }
  .footer-logo { width: 220px; }
}