/* =========================================================
   THE TITUS LAW FIRM — SHARED STYLE SYSTEM
   =========================================================
   Source of truth for every page we build going forward (Practice Area pages, LPs, anything
   else). Tokens below are pulled from the REAL live site's CSS 
   ========================================================= */

.ttlf-page {
  --ttlf-black: #222222;      /* rgb(34,34,34) — real button color, confirmed */
  --ttlf-text: #1b1d1f;       /* rgb(27,29,31) — real body/heading text color, confirmed */
  --ttlf-cream: #e8e7df;      /* rgb(232,231,223) — real alternating section background, confirmed */
  --ttlf-card: #f5f4ed;       /* rgb(245,244,237) — real card/box background, confirmed */
  --ttlf-white: #fffffa;      /* rgb(255,255,250) — real "white" section background, confirmed */
  --ttlf-gold: #b4975a;       /* rgb(180,151,90) — real gold accent/button color, confirmed */
  max-width: 100%;
  overflow-x: hidden;
  color: var(--ttlf-text);
  /* Real site loads DM Sans (body) + Inter/Instrument Sans (headings) via Google Fonts.
     Declared here in case this page's WP template doesn't already load them; falls back
     to clean system sans-serif if not available. */
  font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.65;
}
.ttlf-page * { box-sizing: border-box; }
.ttlf-page h1, .ttlf-page h2, .ttlf-page h3, .ttlf-page p, .ttlf-page ul { margin-top: 0; }
.ttlf-page h1, .ttlf-page h2, .ttlf-page h3 {
  font-family: 'Inter', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  color: var(--ttlf-text);
}
.ttlf-page a { text-decoration: none; }

.ttlf-section { padding: 64px 24px; }
.ttlf-inner { max-width: 1040px; margin: 0 auto; }
.ttlf-bg-cream { background: var(--ttlf-cream); }
.ttlf-bg-white { background: var(--ttlf-white); }

/* Buttons — real site uses fully-rounded pills in exactly these two colors */
.ttlf-btn { display: inline-block; padding: 14px 32px; border-radius: 100px; text-decoration: none; font-weight: 600; font-size: .95rem; }
.ttlf-btn-black { background: var(--ttlf-black); color: #fff !important; }
.ttlf-btn-gold { background: var(--ttlf-gold); color: #fff !important; }

/* Card — the "Why Us" / grid-item style used across the real site */
.ttlf-card { background: var(--ttlf-card); border-radius: 10px; padding: 24px; }
.ttlf-card h3 { margin: 0 0 10px; font-size: 1.1rem; }
.ttlf-card p { margin: 0; line-height: 1.55; font-size: .95rem; }

/* Grid helper — 2 or 3 column card layouts, collapsing to 1 column on mobile */
.ttlf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ttlf-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
@media (max-width: 780px) { .ttlf-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .ttlf-grid-2 { grid-template-columns: 1fr; } }

/* Quote / testimonial card */
.ttlf-quote { background: var(--ttlf-card); border-radius: 10px; padding: 20px; }
.ttlf-quote p { margin: 0 0 10px; font-size: .92rem; line-height: 1.5; font-style: italic; }
.ttlf-quote span { font-size: .85rem; font-weight: 600; }

/* Checklist — bulleted list style used for "things we handle" type sections */
.ttlf-checklist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ttlf-checklist li { background: var(--ttlf-card); border-radius: 8px; padding: 14px 18px; font-size: .95rem; line-height: 1.5; }
.ttlf-checklist li::before { content: "\2713"; color: var(--ttlf-gold); font-weight: 700; margin-right: 10px; }

/* Placeholder box — for anything needing real data before publish (ratings, phone numbers, etc.) */
.ttlf-placeholder { border: 2px dashed #c0392b; background: #fdecea; color: #922; padding: 14px 20px; border-radius: 8px; font-size: .9rem; text-align: left; max-width: 560px; margin: 0 auto; }