/* ============================================================
   LEXNOMIK — UX layer (UI/UX review, Oct 2026)
   Loaded after style.css + features.css by feature_assets().
   1. Typography system (tokens)   2. Clickable cards + hover
   3. Image fallbacks              4. Article reading order
   5. Contrast fixes               6. Home layout helpers
   To tweak the whole site's type, change the tokens below.
   ============================================================ */

/* ---------- 1. Typography tokens ---------------------------------
   Roles:  display = headings   body = reading text   ui = chrome (nav, labels, meta, buttons)
   Every element with the same purpose uses the same token set.     */
:root {
  --gold-text: #8a6a12;          /* gold that passes 4.5:1 on white/cream (use for TEXT on light bg) */

  /* page title (hero) */
  --t-page-size: 42px;     --t-page-lh: 1.18;
  /* section heading ("Latest Legal Updates") */
  --t-section-size: 26px;  --t-section-lh: 1.2;
  /* article title */
  --t-article-size: 34px;  --t-article-lh: 1.2;
  /* card / list headline */
  --t-headline-size: 18px; --t-headline-lh: 1.3;
  --t-headline-sm-size: 16px;
  /* reading body (article text) */
  --t-body-size: 17px;     --t-body-lh: 1.8;
  /* excerpt / summary / description */
  --t-excerpt-size: 15px;  --t-excerpt-lh: 1.65;
  --t-lead-size: 17px;     --t-lead-lh: 1.7;      /* hero + article intro */
  /* metadata (dates, author, views) */
  --t-meta-size: 13px;
  /* label (chips, eyebrows) */
  --t-label-size: 11px;    --t-label-track: .08em;
  /* button */
  --t-button-size: 14px;
}
@media (max-width: 768px) {
  :root {
    --t-page-size: 28px; --t-section-size: 22px; --t-article-size: 26px;
    --t-headline-size: 17px; --t-body-size: 16px; --t-excerpt-size: 14.5px; --t-lead-size: 16px;
  }
}

/* page title */
.hero-title { font-family: var(--font-display); font-size: var(--t-page-size); line-height: var(--t-page-lh); font-weight: 900; }
/* section headings */
.section-title { font-family: var(--font-display); font-size: var(--t-section-size); line-height: var(--t-section-lh); font-weight: 800; }
.trending-title { font-family: var(--font-display); }
/* article title */
.article-title { font-family: var(--font-display); font-size: var(--t-article-size); line-height: var(--t-article-lh); font-weight: 900; letter-spacing: -.005em; }
/* headlines in cards and lists share one style */
.card-title, .mini-title, .related-title, .sidebar-card-title, .trending-item span:last-child {
  font-family: var(--font-display); font-weight: 700; line-height: var(--t-headline-lh);
}
.card-title { font-size: var(--t-headline-size); }
.mini-title { font-size: var(--t-headline-sm-size); }
.related-title { font-size: 14.5px; }
.trending-item { font-size: 15px; color: rgba(255,255,255,.9); line-height: 1.4; }
.trending-item span:last-child { font-weight: 600; }
/* body / excerpt: ONE reading face (serif), upright, same rhythm everywhere */
.article-body { font-family: var(--font-body); font-size: var(--t-body-size); line-height: var(--t-body-lh); }
.article-body p { margin-bottom: 1.1em; }
.hero-excerpt, .article-excerpt {
  font-family: var(--font-body); font-style: normal; font-size: var(--t-lead-size); line-height: var(--t-lead-lh);
}
.article-excerpt { color: var(--gray-700); margin: 0 0 24px; }
.hero-excerpt { color: rgba(255,255,255,.88); }
.card-summary, .mini-text, .takeaway-text {
  font-family: var(--font-body); font-style: normal; font-size: var(--t-excerpt-size); line-height: var(--t-excerpt-lh);
}
.mini-text { color: var(--gray-600); margin: 0; }
.takeaway-text { color: var(--gray-700); margin: 0; }
/* metadata */
.article-meta span, .card-meta, .card-date, .meta-chip, .breadcrumb { font-family: var(--font-ui); font-size: var(--t-meta-size); }
/* labels */
.lx-label, .badge-type, .card-type, .fc-kind, .fc-daily-eyebrow {
  font-family: var(--font-ui); font-size: var(--t-label-size); font-weight: 700; letter-spacing: var(--t-label-track); text-transform: uppercase;
}
.lx-label { color: var(--gold-text); }
.lx-label-muted { color: var(--gray-500); margin-right: 8px; }
/* buttons */
.btn { font-family: var(--font-ui); font-size: var(--t-button-size); font-weight: 600; letter-spacing: .01em; }

/* ---------- 2. Whole card is the link --------------------------- */
.content-card.is-clickable, .mini-card { position: relative; cursor: pointer; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }      /* stretched link = full hit area */
.content-card .tag-chip, .content-card .card-court { position: relative; z-index: 2; }  /* chips stay independently clickable */
.content-card { border: 1px solid transparent; }
.content-card.is-clickable:hover { border-color: rgba(200,168,75,.55); box-shadow: var(--shadow); transform: translateY(-3px); }
.content-card.is-clickable:hover .card-title { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.content-card .card-link:focus-visible { outline: none; }
.content-card .card-link:focus-visible::after,
.mini-card .card-link:focus-visible::after { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: inherit; }
.content-card:focus-within { box-shadow: var(--shadow); }
.content-card .card-image { pointer-events: none; }  /* image is covered by the stretched link anyway */

.mini-card {
  background: #fff; border-radius: 8px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.07);
  border-left: 4px solid var(--gold); transition: box-shadow var(--transition), transform var(--transition);
}
.mini-card.mini-navy { border-left-color: var(--navy); }
.mini-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.mini-card:hover .mini-title { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.mini-title { color: var(--navy-dark); display: block; margin-bottom: 6px; }
.mini-label { margin-bottom: 6px; }
.mini-card.mini-navy .mini-label { color: var(--navy); }
.mini-list { display: flex; flex-direction: column; gap: 16px; }

/* ---------- 3. Image fallbacks ---------------------------------- */
.img-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  font-family: var(--font-display); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.7);
  letter-spacing: 2px; text-transform: uppercase;
}
.related-image-ph, .img-fallback.is-related {
  width: 64px; height: 48px; flex-shrink: 0; border-radius: var(--radius); background: var(--navy);
  display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); font-size: 18px; letter-spacing: 0; padding: 0;
}
.article-featured-image { background: var(--gray-100); }
/* an image that is still decoding shouldn't flash its alt text */
.card-image img, .article-featured-image { color: transparent; }

/* ---------- 4. Article reading order ---------------------------- */
.article-header { margin-bottom: 20px; }
.article-meta { margin-bottom: 18px; padding: 10px 0; }
.article-meta span { color: var(--gray-600); }
.article-tags-row { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.article-share-row { margin-top: 24px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.takeaway-box { background: var(--gold-pale); border-left: 4px solid var(--gold); padding: 20px 24px; border-radius: 0 8px 8px 0; margin: 28px 0; }
.takeaway-box .lx-label { margin-bottom: 8px; }
.sidebar-promo { background: var(--navy); color: #fff; }
.promo-title { font-family: var(--font-display); font-size: 17px; color: var(--gold-light); margin-bottom: 8px; }
.promo-text { font-family: var(--font-ui); font-size: 14px; color: rgba(255,255,255,.85); line-height: 1.55; margin-bottom: 14px; }
@media (max-width: 768px) {
  /* secondary content sits after the article, clearly separated and compact */
  .article-sidebar { border-top: 2px solid var(--gold-pale); padding-top: 24px; margin-top: 8px; }
  .article-sidebar::before { content: "More to read"; display: block; font-family: var(--font-ui); font-size: var(--t-label-size); font-weight: 700; letter-spacing: var(--t-label-track); text-transform: uppercase; color: var(--gray-500); margin-bottom: 14px; }
  .article-sidebar .sidebar-widget { margin-bottom: 14px; }
  .article-sidebar .tags-widget { display: none; }          /* tags already appear under the article */
  .article-sidebar .sidebar-widget:has(.tags-widget) { display: none; }
  .article-featured-image { max-height: 240px; }
}

/* ---------- 5. Contrast (WCAG AA on the backgrounds they sit on) --- */
.card-date { color: var(--gray-500); }                        /* was #9ca3af (2.5:1) */
.card-court, .section-link { color: var(--gold-text); }       /* was gold on white (2.2:1) */
.section-link:hover { color: var(--navy); }
.breadcrumb { color: var(--gray-500); }
.card-practice { color: var(--gray-600); }
.tag-chip { color: var(--gray-700); font-size: 11.5px; }
.fc-home-sub { color: var(--gray-600); font-size: var(--t-meta-size); }
.trending-num { color: rgba(232,201,122,.45); }
.fc-front .fc-flip-cue, .fc-front .fc-date { opacity: .8; }
.fc-news .fc-front .fc-kind { color: var(--gold-light); }
.fc-body { color: var(--gray-800); }
.fc-knowledge .fc-front .fc-kind, .fc-takeaway strong { color: var(--gold-text); }
.hero-sidebar-card .sidebar-card-type { color: var(--gold-light); }

/* ---------- 6. Home layout helpers (were inline styles) ---------- */
.home-main { padding-top: 48px; padding-bottom: 48px; }
.home-section { margin-bottom: 52px; }
.home-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 52px; }
@media (max-width: 768px) { .home-two-col { grid-template-columns: 1fr; gap: 32px; } .home-main { padding-top: 32px; } }

/* Quick Reads: one component on every screen */
.fc-home-a, .fc-home-b { padding: 44px 0 8px; }
.fc-home-b .fc-daily { margin-bottom: 18px; }
.fc-home-a .fc-home-sub { margin-top: 2px; }

/* links inside headlines inherit the headline style (no global link colour/size) */
.card-title a, .card-title .card-link, .mini-title.card-link { color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none; }

/* ---------- 7. Cookie consent banner ---------- */
.lx-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:760px;margin:0 auto;background:#fff;color:#1a1a1a;border:1px solid #e3ddd0;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:18px 20px;font-size:14px;line-height:1.5}
.lx-consent-title{display:block;font-size:16px;margin-bottom:4px}
.lx-consent p{margin:0 0 10px}
.lx-consent-details{display:grid;gap:8px;margin:10px 0}
.lx-consent-details label{display:flex;gap:8px;align-items:flex-start}
.lx-consent-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.lx-c-btn{border:1px solid #1a1a1a;background:#fff;color:#1a1a1a;border-radius:999px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;min-height:40px}
.lx-c-accept{background:#1a1a1a;color:#fff}
.lx-c-ghost{border-color:#bbb}
.lx-consent-link{margin-left:14px;font-size:inherit;text-decoration:underline}
@media (max-width:560px){.lx-consent-actions .lx-c-btn{flex:1 1 100%}.lx-consent{bottom:8px;left:8px;right:8px}}
.lx-consent-open .sh-fab{bottom:calc(var(--lx-consent-h,180px) + 24px)}

/* ---------- 8. SEO: fixed homepage H1, 5-column footer, author box ---------- */
.hero-h1 { font-family: var(--font-ui); font-size: var(--t-label-size); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 12px; line-height: 1.4; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; } }
.author-box { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--gray-200); border-radius: 10px; background: var(--gray-100); font-size: 15px; line-height: 1.55; }
.author-box a { color: var(--navy); font-weight: 600; }

/* ---------- 9. Article header chips: readable colours ---------- */
.article-type-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.article-type-row .meta-chip,
.article-type-row .practice-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.article-type-row .meta-chip {
  background: var(--gray-100); color: var(--gray-800); border: 1px solid var(--gray-200);
}
.article-type-row .practice-chip {
  background: var(--gold-pale); color: var(--gold-text); border: 1px solid rgba(200,168,75,.45);
}