/* ============================================================
   CourtReporters.com — Shared Visual System (cr-theme.css)
   Premium legal-services marketplace
   Palette: navy / deep blue / teal   Type: Playfair Display + Inter
   Linked on every page. Component classes are namespaced `cr-`.
   ============================================================ */

:root{
  /* Core palette */
  --cr-ink:#071426;
  --cr-navy:#0A1D35;
  --cr-blue:#164B7A;
  --cr-blue-2:#2563A8;
  --cr-soft-blue:#EAF2FA;
  --cr-teal:#10B8A6;
  --cr-teal-dark:#0D9488;
  --cr-sand:#F6F1E8;
  --cr-gold:#C99A3D;
  --cr-gold-soft:#FBF1D9;

  /* Neutrals */
  --cr-paper:#FFFFFF;
  --cr-bg:#F8FAFC;
  --cr-muted:#64748B;
  --cr-muted-2:#94A3B8;
  --cr-line:#E5EAF0;
  --cr-line-2:#EEF2F7;
  --cr-success:#0F766E;

  /* Elevation + shape */
  --cr-shadow:0 18px 55px rgba(7,20,38,.10);
  --cr-soft-shadow:0 10px 30px rgba(7,20,38,.06);
  --cr-radius-xl:28px;
  --cr-radius-lg:22px;
  --cr-radius-md:16px;
  --cr-radius-pill:999px;

  /* Layout */
  --cr-container:1320px;
  --cr-gutter:56px;

  /* Type */
  --cr-font-body:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cr-font-head:"Playfair Display",Georgia,serif;
}

/* ---------- Base ---------- */
.cr-theme *,
.cr-theme *::before,
.cr-theme *::after{box-sizing:border-box}

.cr-theme{
  font-family:var(--cr-font-body);
  background:var(--cr-bg);
  color:var(--cr-ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.cr-theme a{text-decoration:none;color:inherit}
.cr-theme button,.cr-theme input,.cr-theme select,.cr-theme textarea{font-family:inherit}
.cr-theme button,.cr-theme select{cursor:pointer}

/* Headings use Playfair; tighten tracking for editorial feel */
.cr-display,
.cr-theme h1.cr-h,
.cr-theme h2.cr-h,
.cr-theme h3.cr-h{
  font-family:var(--cr-font-head);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--cr-ink);
}

.cr-kicker{
  color:var(--cr-blue);
  font-size:.72rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.cr-container{
  max-width:var(--cr-container);
  margin-inline:auto;
  padding-inline:var(--cr-gutter);
}

/* Accessibility */
.cr-skip-link{
  position:absolute;left:-999px;top:12px;background:#fff;color:var(--cr-ink);
  padding:10px 14px;border-radius:10px;z-index:100;font-weight:800;
}
.cr-skip-link:focus{left:12px}

/* ---------- Announcement bar ---------- */
.cr-announce{
  background:var(--cr-ink);
  color:#DCE9F6;
  text-align:center;
  padding:9px 18px;
  font-size:.76rem;
  font-weight:750;
  letter-spacing:.02em;
}
.cr-announce span{color:#8EE5D8}

/* ---------- Navigation ---------- */
.cr-nav{
  height:72px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 var(--cr-gutter);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(229,234,240,.92);
  position:sticky;
  top:0;
  z-index:50;
}
.cr-theme .cr-logo{
  display:flex;align-items:center;gap:12px;
  font-weight:900;letter-spacing:-.04em;color:var(--cr-navy);font-size:1.12rem;
}
.cr-logo-mark{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--cr-ink),var(--cr-blue));
  color:#fff;display:grid;place-items:center;
  font-family:var(--cr-font-head);font-weight:700;
  box-shadow:0 10px 28px rgba(22,75,122,.20);
}
.cr-nav-links{
  display:flex;gap:28px;color:#334155;font-size:.88rem;font-weight:650;
  list-style:none;margin:0;padding:0;align-items:center;
}
.cr-nav-links a{transition:color .18s ease}
.cr-nav-links a:hover,.cr-nav-links a:focus{color:var(--cr-blue)}

/* Pill CTA button in nav
   NOTE: prefixed with .cr-theme so color beats the base `.cr-theme a{color:inherit}` rule */
.cr-theme .cr-nav-cta{
  padding:10px 17px;border-radius:var(--cr-radius-pill);
  background:var(--cr-ink);color:#fff;font-size:.84rem;font-weight:850;
  box-shadow:0 12px 26px rgba(7,20,38,.14);
  transition:transform .18s ease,box-shadow .18s ease;
}
.cr-theme .cr-theme .cr-nav-cta:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(7,20,38,.18)}
.cr-menu-btn{display:none;border:0;background:transparent;color:var(--cr-ink);font-weight:900;font-size:.9rem}

/* Logo image variant + mobile hamburger menu (shared across pages) */
.cr-nav-logo{display:flex;align-items:center}
.cr-nav-logo img{height:34px;width:auto;display:block}
.cr-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.cr-hamburger span{width:24px;height:2px;background:var(--cr-ink);border-radius:2px;transition:.25s}
.cr-mobile-menu{display:none;flex-direction:column;gap:2px;padding:10px var(--cr-gutter) 18px;background:#fff;border-bottom:1px solid var(--cr-line)}
.cr-mobile-menu.open{display:flex}
.cr-mobile-menu a{padding:11px 0;font-weight:700;color:#334155;border-bottom:1px solid var(--cr-line-2)}

/* ---------- Buttons ---------- */
.cr-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--cr-radius-md);
  padding:12px 18px;font-size:.86rem;font-weight:900;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  cursor:pointer;text-align:center;
}
.cr-theme .cr-btn-primary{
  background:linear-gradient(135deg,var(--cr-teal),var(--cr-teal-dark));
  color:#fff;box-shadow:0 12px 22px rgba(16,184,166,.20);
}
.cr-theme .cr-btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(16,184,166,.28)}
.cr-theme .cr-btn-dark{background:var(--cr-ink);color:#fff;box-shadow:0 12px 26px rgba(7,20,38,.14)}
.cr-theme .cr-btn-dark:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(7,20,38,.18)}
.cr-theme .cr-btn-secondary{border:1px solid #CBD5E1;color:var(--cr-blue);background:#fff}
.cr-theme .cr-btn-secondary:hover{background:var(--cr-bg)}
.cr-btn-pill{border-radius:var(--cr-radius-pill)}
.cr-btn-block{width:100%}

/* ---------- Cards ---------- */
.cr-card{
  background:var(--cr-paper);
  border:1px solid var(--cr-line);
  border-radius:var(--cr-radius-xl);
  box-shadow:var(--cr-soft-shadow);
  padding:22px;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.cr-card-hover:hover{transform:translateY(-2px);box-shadow:var(--cr-shadow);border-color:#D7E3EF}

/* ---------- Tags / badges ---------- */
.cr-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:#F1F5F9;color:#334155;
  border-radius:var(--cr-radius-pill);
  padding:7px 11px;font-size:.7rem;font-weight:900;
}
.cr-tag-main{background:var(--cr-soft-blue);color:var(--cr-blue)}
.cr-tag-available{background:#EAFDF9;color:var(--cr-success)}
.cr-tag-lang{background:#ede9fe;color:#6b21a8}      /* preserves the purple language badge */
.cr-badge-gold{
  display:inline-flex;align-items:center;background:var(--cr-gold-soft);color:#9A6A12;
  border-radius:var(--cr-radius-pill);padding:5px 9px;
  font-size:.64rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
}

/* ---------- Footer ---------- */
.cr-footer{
  background:var(--cr-ink);
  color:#94A3B8;
  padding:46px 20px;
  font-size:.84rem;
}
.cr-footer a{color:#CBD5E1;transition:color .18s ease}
.cr-footer a:hover{color:#fff}
.cr-footer strong{color:#fff}
.cr-footer-simple{text-align:center}

/* ---------- Section helpers ---------- */
.cr-section{padding:64px 0}
.cr-section-tight{padding:40px 0}
.cr-eyebrow{margin-bottom:10px}
.cr-lead{color:var(--cr-muted);font-size:1.02rem;line-height:1.62}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  :root{--cr-gutter:28px}
}
@media(max-width:820px){
  :root{--cr-gutter:22px}
  .cr-nav-links,.cr-nav-cta{display:none}
  .cr-menu-btn{display:block}
  .cr-hamburger{display:flex}
  .cr-section{padding:48px 0}
}
@media(max-width:520px){
  .cr-announce{font-size:.7rem}
  .cr-btn{width:100%}
}