/* ============================================================
   BOSS LEVEL LEGAL — GUIDE PAGE STYLES
   Used by: california-personal-injury-law, statute of limitations,
   what-to-do, and all long-form guide pages
   ============================================================ */

/* Guide meta */
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
}
.guide-meta a { color: var(--color-accent); }
.guide-meta__sep { opacity: 0.4; }

/* Layout */
.guide-layout { padding-top: var(--space-12); }

.guide-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: flex-start;
}
@media (min-width: 1024px) {
  .guide-grid {
    grid-template-columns: 260px 1fr;
    gap: var(--space-16);
  }
}

/* Table of contents */
.guide-toc {
  position: sticky;
  top: calc(72px + var(--space-8));
}
.toc-card {
  background: var(--color-surface);
  border: var(--rule-border);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-6);
}
.toc-card__title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}
.toc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  counter-reset: toc;
}
.toc-list li { counter-increment: toc; }
.toc-list a {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  display: block;
  padding: var(--space-2) 0;
  border-bottom: var(--rule-border);
  transition: color var(--transition-fast);
  line-height: var(--leading-snug);
}
.toc-list li:last-child a { border-bottom: none; }
.toc-list a:hover { color: var(--color-accent); }

/* AEO Summary */
.aeo-summary-block {
  background: rgba(201,168,76,0.05);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
}
.aeo-summary-block h2 { margin-bottom: var(--space-4); }

/* Four Elements grid */
.elements-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
@media (min-width: 600px) {
  .elements-grid { grid-template-columns: 1fr 1fr; }
}
.element-card {
  background: var(--color-surface);
  border: var(--rule-border);
  padding: var(--space-6);
  transition: border-color var(--transition-base);
}
.element-card:hover { border-color: rgba(201,168,76,0.3); }
.element-card__num {
  margin-bottom: var(--space-3);
  opacity: 0.6;
}
.element-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
}
.element-card__body {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
}

/* Statute table */
.statute-table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: var(--rule-border);
}
.statute-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.statute-table th {
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: var(--rule-gold);
}
.statute-table td {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-muted);
  border-bottom: var(--rule-border);
  line-height: var(--leading-snug);
  vertical-align: top;
}
.statute-table tr:last-child td { border-bottom: none; }
.statute-table tr:hover td { background: rgba(201,168,76,0.03); }
.statute-table td:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-dim);
}
.statute-table strong { color: var(--color-text); }

/* Example block */
.example-block {
  background: var(--color-surface);
  border: var(--rule-border);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-8);
  margin: var(--space-6) 0;
}
.example-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.example-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.example-item__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.example-item__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-text);
  line-height: 1;
}
.example-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  font-style: italic;
  border-top: var(--rule-border);
  padding-top: var(--space-4);
  margin-bottom: 0;
}

/* Damages grid */
.damages-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  margin: var(--space-6) 0;
}
@media (min-width: 768px) {
  .damages-grid { grid-template-columns: 1fr 1fr; }
}
.damages-col {
  background: var(--color-surface);
  border: var(--rule-border);
  padding: var(--space-6);
}
.damages-col__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.damages-col__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-dim);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
  font-style: italic;
}
.damages-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.damages-list li {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  padding-left: var(--space-4);
  position: relative;
}
.damages-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 1px;
  background: var(--color-accent);
  opacity: 0.6;
}

/* Process steps */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: var(--space-6) 0;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(180deg, var(--color-accent), transparent);
  opacity: 0.3;
}
@media (max-width: 599px) {
  .process-steps::before { display: none; }
}
.process-step {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-6);
  border-bottom: var(--rule-border);
}
@media (min-width: 600px) {
  .process-step {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-6);
  }
}
.process-step:last-child { border-bottom: none; }
.process-step__num {
  grid-column: 1;
  padding-top: 4px;
}
.process-step__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.process-step__body {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
}

/* Practice area links */
.practice-links-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
@media (min-width: 768px) {
  .practice-links-grid { grid-template-columns: repeat(4, 1fr); }
}
.practice-link-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface);
  border: var(--rule-border);
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.practice-link-card:hover {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.04);
}
.practice-link-card__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.practice-link-card__arrow {
  color: var(--color-accent);
  opacity: 0.6;
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  list-style: none;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  align-items: center;
}
.breadcrumb li {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-dim);
}
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  opacity: 0.4;
}
.breadcrumb a {
  color: var(--color-text-dim);
  transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--color-accent); }

/* ============================================================
   STATUTE OF LIMITATIONS SPECIFIC
   ============================================================ */

.sol-hero { border-bottom: none; }

.sol-cards-section {
  background: var(--color-surface);
  border-top: var(--rule-gold);
  border-bottom: var(--rule-gold);
  padding: var(--space-10) 0;
}
.sol-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .sol-cards { grid-template-columns: repeat(4, 1fr); }
}
.sol-card {
  background: var(--color-bg);
  border: var(--rule-border);
  padding: var(--space-6);
  border-top: 3px solid var(--color-border);
}
.sol-card--primary { border-top-color: var(--color-accent); }
.sol-card--urgent  { border-top-color: var(--color-power); }
.sol-card__time {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-2);
}
.sol-card--urgent .sol-card__time { color: var(--color-power); }
.sol-card__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.sol-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.sol-card__law {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--color-text-dim);
  text-transform: uppercase;
}

/* Warning block */
.warning-block {
  display: flex;
  gap: var(--space-4);
  background: rgba(139,37,0,0.08);
  border: 1px solid rgba(139,37,0,0.3);
  border-left: 3px solid var(--color-power);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.warning-block__icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1.2;
}
.warning-block__title {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: #e57373;
  margin-bottom: var(--space-3);
}
.warning-block__body {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  margin: 0;
}

/* ============================================================
   WHAT TO DO AFTER ACCIDENT — NUMBERED STEPS
   ============================================================ */
.numbered-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.numbered-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-6);
  padding: var(--space-8) 0;
  border-bottom: var(--rule-border);
  align-items: flex-start;
}
.numbered-step:last-child { border-bottom: none; }
.numbered-step__num {
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: var(--bll-midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  flex-shrink: 0;
  line-height: 1;
}
.numbered-step__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-text);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.numbered-step__content { min-width: 0; }

/* Do Not grid */
.donot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
@media (min-width: 600px) {
  .donot-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .donot-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.donot-card {
  background: var(--color-surface);
  border: var(--rule-border);
  border-top: 3px solid var(--color-power);
  padding: var(--space-6);
}
.donot-card__icon {
  font-size: 1.25rem;
  color: var(--color-power);
  margin-bottom: var(--space-3);
  display: block;
}
.donot-card__title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: var(--leading-snug);
}
.donot-card__body {
  font-family: var(--font-reading);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
}