/* ==========================================================================
   OCA Law — Page-specific styles
   ========================================================================== */

/* ---- Home ---- */
.section-alt { background: var(--color-bg-alt); }

.section-heading {
  max-width: 62ch;
}
.section-heading + .practice-grid,
.section-heading + .steps,
.section-heading + .panel-grid { margin-top: 2.5rem; }

.jurisdiction-list {
  columns: 2;
  gap: 2.5rem;
  margin-top: 1.5rem;
}
@media (max-width: 640px) { .jurisdiction-list { columns: 1; } }
.jurisdiction-list li {
  break-inside: avoid;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
}

.deferred-teaser {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 1.5rem + 1.5vw, 3rem);
}
@media (max-width: 800px) { .deferred-teaser { grid-template-columns: 1fr; } }

.deferred-teaser .teaser-panel {
  background: var(--stone-50);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  font-size: 0.94rem;
  color: var(--color-text-muted);
}
.deferred-teaser .teaser-panel li { margin-top: 0.5rem; }
.deferred-teaser .teaser-panel ul { list-style: disc; padding-left: 1.2em; margin-top: 0.5rem; }

/* ---- Practice areas index ---- */
.practice-areas-index .practice-grid { margin-top: 3rem; }

/* ---- Home page value strip ---- */
.value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (max-width: 800px) { .value-strip { grid-template-columns: 1fr; } }
.value-strip .value-item h3 { margin-top: 0.75rem; font-size: 1.05rem; }
.value-strip .value-item p { font-size: 0.95rem; color: var(--color-text-muted); }
.value-strip .value-item .mark {
  width: 40px; height: 4px; background: var(--green-500); border-radius: 2px;
}

/* ---- About ---- */
.bio-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  background: var(--white);
  margin-top: 1.5rem;
}

/* ---- Contact ---- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.contact-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  background: var(--stone-50);
}
.contact-details h2 { margin-top: 0; font-size: 1.25rem; }
.contact-details dl { margin-top: 1.25rem; }
.contact-details dt { font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin-top: 1.1rem; }
.contact-details dd { margin-top: 0.2rem; font-size: 1rem; }
.contact-details dd:first-of-type,
.contact-details dt:first-of-type { margin-top: 0; }
.contact-details a { color: var(--navy-800); font-weight: 600; text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }

/* ---- Deferred fees page ---- */
.dpd-events {
  margin-top: 1.5rem;
}
.dpd-events li {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--color-border);
}

.not-deferred-box {
  background: var(--danger-bg);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin-block: 1.75rem;
}
.not-deferred-box h3 { margin-top: 0; color: var(--danger); }

/* ---- 404 ---- */
.error-page {
  text-align: center;
  padding-block: clamp(4rem, 3rem + 6vw, 8rem);
}
.error-page .code {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 3rem + 6vw, 7rem);
  color: var(--green-600);
  line-height: 1;
}