@charset "utf-8";
/* ==========================================================================
   site-modern.css  —  Maze Legal / www.romulus-lawyer.com
   Shared design tokens, accessibility layer, and cross-page components.

   WHY THIS FILE EXISTS
   Before this pass, ~29 pages each carried their own <style> block totalling
   roughly 188 KB of near-identical CSS that no browser could cache between
   pages.  Every rule below appears on two or more pages; the declared values
   are carried over unchanged from the existing pages so rendering does not
   shift.  Rules that were genuinely unique to one page stayed on that page.

   LOAD ORDER
   After css/template.min.css and css/responsive.min.css, before any
   page-level <style> block (so page-level rules still win).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Values are the ones already in use across the site, named so that future
   edits happen in one place instead of forty.
   -------------------------------------------------------------------------- */
:root {
  --ml-accent:       #4299e1;
  --ml-accent-dark:  #2b6cb0;
  --ml-ink:          #2c3e50;
  --ml-ink-muted:    #6c757d;
  --ml-success:      #2ecc71;
  --ml-surface:      #f8f9fa;
  --ml-surface-tint: #f0f7ff;
  --ml-surface-info: #e8f4fc;
  --ml-border:       #e9ecef;
  --ml-white:        #fff;

  --ml-radius:       8px;
  --ml-radius-pill:  20px;
  --ml-gap:          20px;
  --ml-shadow-sm:    0 3px 10px rgba(0,0,0,.1);
  --ml-shadow:       0 5px 15px rgba(0,0,0,.1);

  --ml-measure:      70ch;
  --ml-focus:        #b45309;
}

/* --------------------------------------------------------------------------
   2. Accessibility baseline — WCAG 2.2 Level AA
   -------------------------------------------------------------------------- */

/* 2.4.1 Bypass Blocks. Visible only on keyboard focus. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--ml-ink);
  color: var(--ml-white);
  font-weight: 700;
  border-radius: 0 0 var(--ml-radius) 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 0;
  color: var(--ml-white);
  outline: 3px solid var(--ml-focus);
  outline-offset: 2px;
}

/* 2.4.7 / 2.4.13 Focus Appearance.  The inherited theme sets `a{outline:0}`
   and signals focus with colour alone, which fails 1.4.1 as well.  */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ml-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

/* The main landmark is focused programmatically by the skip link; it should
   not paint a ring when reached that way. */
main:focus,
[role="main"]:focus { outline: none; }

/* 2.5.8 Target Size (Minimum): 24 x 24 CSS px. */
.social-icons a,
.header-top a,
.footer-menu-list a { display: inline-block; min-height: 24px; min-width: 24px; }

/* 2.3.3 Animation from Interactions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .exp-item:hover,
  .judge-card:hover,
  .court-card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   3. Layout stability (Cumulative Layout Shift)
   -------------------------------------------------------------------------- */
img { max-width: 100%; }
img[width][height] { height: auto; }

/* Several judge portraits are hot-linked from county and municipal sites and
   arrive late; a tinted box holds their space instead of collapsing. */
.judge-card img,
.attorney-sidebar img { background: var(--ml-surface); }

/* Comfortable measure for long legal explanations. */
.court-content p,
.additional-info p,
.attorney-experience p { max-width: var(--ml-measure); }

/* --------------------------------------------------------------------------
   4. Case-search call to action
   Replaces the former <h1><a><font color="#ff0033"> markup on the older
   court pages: a real button-sized target with a visible focus ring.
   -------------------------------------------------------------------------- */
.court-search-cta { margin: 24px 0; text-align: center; }
.court-search-btn {
  display: inline-block;
  padding: 14px 28px;
  min-height: 44px;
  background: var(--ml-accent);
  color: var(--ml-white);
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow-sm);
}
.court-search-btn:hover,
.court-search-btn:focus { background: var(--ml-accent-dark); color: var(--ml-white); }
/* Destination hint is announced but not painted. */
.court-search-ext {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   5. Shared page components (extracted from the former inline blocks)
   -------------------------------------------------------------------------- */

.attorney-sidebar {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.attorney-sidebar img {
  border-radius: 8px;
  margin-bottom: 15px;
}

.sidebar-info h3 {
  color: #2c3e50;
  margin-bottom: 5px;
}

.sidebar-info h4 {
  color: #4299e1;
  font-size: 1.1rem;
  margin-bottom: 15px;
}

.sidebar-info p {
  margin-bottom: 8px;
  color: #6c757d;
}

.sidebar-info i {
  color: #4299e1;
  margin-right: 10px;
  width: 20px;
}

.court-info-box {
  background: #f0f7ff;
  border-left: 4px solid #4299e1;
  padding: 20px;
  margin-bottom: 30px;
  border-radius: 0 8px 8px 0;
}

.court-locations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.location-item {
  background: white;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.search-guide {
  margin-bottom: 40px;
}

.feature-list {
  list-style: none;
  padding-left: 0;
  margin: 20px 0;
}

.feature-list li {
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
}

.feature-list i {
  color: #2ecc71;
  position: absolute;
  left: 0;
  top: 3px;
}

.important-note {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 20px;
  margin: 25px 0;
}

.important-note h4 {
  color: #856404;
  margin-bottom: 10px;
}

.search-box {
  background: #e8f4fc;
  padding: 25px;
  border-radius: 8px;
  text-align: center;
  margin: 30px 0;
}

.court-search-btn {
  display: inline-block;
  background: #ff0033;
  color: white;
  padding: 15px 30px;
  border-radius: 6px;
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.court-search-btn:hover {
  background: #cc0029;
  color: white;
  text-decoration: none;
}

.attorney-experience {
  margin: 40px 0;
}

.experience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.exp-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: transform 0.3s;
}

.exp-item:hover {
  transform: translateY(-5px);
}

.exp-item i {
  font-size: 2.5rem;
  color: #4299e1;
  margin-bottom: 15px;
}

.case-types {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 30px;
}

.case-badge {
  background: #4299e1;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
}

.court-contact-form {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin: 40px 0;
}

.additional-info {
  margin: 40px 0;
}

.info-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.info-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #4299e1;
}

.cta-box {
  background: linear-gradient(135deg, #4299e1, #2b6cb0);
  color: white;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
  margin-top: 40px;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

.alert-info {
  background: #e8f4fc;
  border-color: #4299e1;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .court-locations, .experience-grid, .info-cards { grid-template-columns: 1fr; } .cta-buttons { flex-direction: column; } .cta-buttons .btn { width: 100%; margin-bottom: 10px; } .case-types { justify-content: center; } .judge-profile { flex-direction: column; align-items: center; text-align: center; gap: 10px; } .judge-image img { width: 70px; height: 70px; }
}

.alert-success {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}

.judges-panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px;
}

.judge-profile {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border-left: 3px solid #4299e1;
}

.judge-image {
  flex-shrink: 0;
}

.judge-image img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e9ecef;
}

.judge-info {
  flex: 1;
}

.judge-info h5 {
  margin: 0 0 5px 0;
  color: #2c3e50;
  font-size: 1rem;
}

.judge-info p {
  margin: 0 0 5px 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.judge-info p strong {
  color: #4299e1;
}

.info-card.full-width {
  grid-column: 1 / -1;
}

.judges-section {
  margin: 40px 0;
}

.judges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.judge-card {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.judge-card img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 15px;
  border: 3px solid #4299e1;
}

.judge-card h4 {
  color: #2c3e50;
  margin-bottom: 5px;
}

.judge-card p {
  color: #6c757d;
  margin-bottom: 5px;
}

.court-links {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.alert-warning {
  background: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
  border-radius: 8px;
  padding: 20px;
}

.dui-cases {
  background: #e8f4fc;
  padding: 25px;
  border-radius: 8px;
  margin: 30px 0;
}

.police-jurisdictions {
  background: #e8f4fc;
  padding: 25px;
  border-radius: 8px;
  margin: 30px 0;
}

.prosecutor-card {
  background: white;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #4299e1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.court-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.mt-30 {
  margin-top: 30px;
}



/* --------------------------------------------------------------------------
   6. Print
   -------------------------------------------------------------------------- */
@media print {
  .skip-link,
  .slider-header nav,
  .offcanvas-menu,
  .cta-box,
  .court-contact-form,
  .footer-top,
  .social-icons { display: none; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 90%; }
  .court-info-box, .info-card { border: 1px solid #666; }
}