/* ============================================================================
   CA5 Court Office page — stylesheet
   Load this once for your site (or your CMS theme). All rules are namespaced
   under .ca5-office, so they will not affect anything outside the office page
   markup. Pair it with the markup in office-template.html.

   THEMING — this component ships NO colors or fonts of its own. It inherits
   the host site's active theme. The block below maps the component's internal
   variables onto the site's design tokens (--c-bg, --c-ink, --c-accent, …).
   When the site switches theme or dark mode, this page follows automatically.
   The var() fallbacks are only used if a token is missing, so it still renders
   safely on a page that hasn't loaded the site tokens.
   ============================================================================ */

/* ───────── Map component vars → host site tokens (the only theming layer) ─── */
.ca5-office{
  /* Surfaces & text */
  --bg:          var(--c-bg, #fbf9f4);
  --surface:     var(--c-surface, var(--c-bg, #fff));
  --surface-alt: var(--c-surface-alt, color-mix(in srgb, var(--c-ink, #1a1d2b) 6%, var(--c-bg, #fff)));
  --ink:         var(--c-ink, #1a1d2b);
  --ink-soft:    var(--c-ink-soft, color-mix(in srgb, var(--c-ink, #1a1d2b) 78%, var(--c-bg, #fff)));
  --ink-muted:   var(--c-ink-muted, color-mix(in srgb, var(--c-ink, #1a1d2b) 56%, var(--c-bg, #fff)));
  --border:      var(--c-line, color-mix(in srgb, var(--c-ink, #1a1d2b) 12%, transparent));
  /* Accent */
  --accent:      var(--c-accent, #1e3a5f);
  --accent-soft: var(--c-accent-soft, color-mix(in srgb, var(--c-accent, #1e3a5f) 14%, var(--c-bg, #fff)));
  --accent-ink:  var(--c-accent-ink, #fff);
  --focus:       var(--c-focus, var(--c-accent, #1e3a5f));
  /* Type — inherits the site's display + body faces */
  --font-serif:  var(--f-serif, Georgia, 'Times New Roman', serif);
  --font-sans:   var(--f-sans, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);

  box-sizing:border-box; 
  color:var(--ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.ca5-office *{box-sizing:border-box;}
.ca5-office a{color:var(--accent); text-decoration:none;}
.ca5-office a:hover{text-decoration:underline;}
.ca5-office :focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px;}
.ca5-office svg.i{display:inline-block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle;}

/* ───────── Breadcrumb ───────── */
.ca5-office__crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--ink-muted); margin-bottom:22px;}
.ca5-office__crumbs a{color:inherit;}
.ca5-office__crumbs svg.i{width:11px; height:11px; opacity:.7;}
.ca5-office__crumbs [aria-current]{color:var(--ink);}

/* ───────── Header ───────── */
.ca5-office__header{border-bottom:1px solid var(--border); padding-bottom:30px; margin-bottom:38px; max-width:1000px;}
.ca5-office__eyebrow{font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:16px;}
.ca5-office__title{font-family:var(--font-serif); font-weight:400; font-size:46px; line-height:1.05; letter-spacing:-.01em; margin:0;}
.ca5-office__lead{font-size:19px; line-height:1.6; color:var(--ink-soft); margin:18px 0 0; max-width:680px;}

/* ───────── Layout ───────── */
.ca5-office__grid{display:grid; grid-template-columns:1.55fr 1fr; gap:52px; align-items:start; max-width:1160px;}
.ca5-office__section{margin-bottom:40px;}
.ca5-office__section:last-child{margin-bottom:0;}
.ca5-office__h2{font-family:var(--font-serif); font-weight:500; font-size:23px; line-height:1.2; margin:0 0 16px;}
.ca5-office__body p{font-size:16px; line-height:1.7; color:var(--ink-soft); margin:0 0 16px; max-width:640px;}
.ca5-office__body p:last-child{margin-bottom:0;}

/* ───────── Cards ───────── */
.ca5-office .card{background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.ca5-office .card--pad{padding:22px 24px;}

/* ───────── Icon chip ───────── */
.ca5-office .chip{flex:0 0 auto; width:36px; height:36px; border-radius:9px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center;}

/* ───────── Hours ───────── */
.ca5-office .hours{display:flex; gap:14px; align-items:flex-start;}
.ca5-office .hours__label{font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted);}
.ca5-office .hours__value{font-family:var(--font-serif); font-weight:500; font-size:18px; line-height:1.35; margin-top:7px;}
.ca5-office .hours__note{font-size:15px; line-height:1.65; color:var(--ink-soft); margin:18px 0 0; padding-top:18px; border-top:1px solid var(--border);}

/* ───────── Holiday schedule ───────── */
.ca5-office__note{font-size:15px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; max-width:640px;}
.ca5-office .holidays{display:grid; grid-template-columns:1fr 1fr;}
.ca5-office .holiday{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 20px;}
.ca5-office .holiday:nth-child(n+3){border-top:1px solid var(--border);}
.ca5-office .holiday:nth-child(even){border-left:1px solid var(--border);}
.ca5-office .holiday__name{font-size:15px; line-height:1.35;}
.ca5-office .pill{display:inline-flex; align-items:center; gap:7px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap;}
.ca5-office .pill::before{content:""; width:7px; height:7px; border-radius:999px; background:currentColor;}
.ca5-office .pill--reduced{background:var(--accent-soft); color:var(--accent);}
.ca5-office .pill--closed{border:1px solid var(--border); color:var(--ink-soft);}
.ca5-office .pill--closed::before{background:var(--ink-muted);}

/* ───────── Aside: contact + related ───────── */
.ca5-office__aside{position:sticky; top:24px; align-self:start; display:flex; flex-direction:column; gap:22px;}
.ca5-office .contact__head{padding:16px 22px; border-bottom:1px solid var(--border); background:var(--surface-alt);}
.ca5-office .contact__label{font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted);}
.ca5-office .contact__name{font-family:var(--font-serif); font-weight:500; font-size:19px; line-height:1.25; margin-top:6px;}
.ca5-office .contact__body{padding:22px; display:flex; flex-direction:column; gap:20px;}
.ca5-office .row{display:flex; gap:14px; align-items:flex-start;}
.ca5-office .row__body{font-size:15px; line-height:1.55; color:var(--ink); padding-top:1px;}
.ca5-office .row__body a{word-break:break-word;}
.ca5-office .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:2px; padding:12px 16px; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:14px; font-weight:500;}
.ca5-office .btn:hover{text-decoration:none; filter:brightness(1.06);}
.ca5-office .related__label{font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 12px; padding-left:2px;}
.ca5-office .related ul{list-style:none; margin:0; padding:0;}
.ca5-office .related a{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; font-size:15px; color:var(--ink);}
.ca5-office .related li + li a{border-top:1px solid var(--border);}
.ca5-office .related a:hover{text-decoration:none; background:var(--surface-alt);}
.ca5-office .related .arrow{color:var(--accent); flex:0 0 auto;}

/* ───────── Aside: staff / people roster (e.g. Additional Mediators) ────────
   A roster of people inside a card in the aside. Scales to any number: each
   person is one .staff__person block; add a person by copying one. Stacks
   cleanly (name over contacts) instead of cramming name + phone into a narrow
   two-column grid, so long names and numbers never wrap mid-column. */
.ca5-office .staff__head{padding:16px 22px; border-bottom:1px solid var(--border); background:var(--surface-alt);}
.ca5-office .staff__title{font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted);}
.ca5-office .staff__person{padding:16px 22px;}
.ca5-office .staff__person + .staff__person{border-top:1px solid var(--border);}
.ca5-office .staff__name{font-family:var(--font-serif); font-weight:500; font-size:17px; line-height:1.3; color:var(--ink);}
.ca5-office .staff__role{font-size:12px; line-height:1.4; color:var(--ink-muted); margin-top:3px;}
.ca5-office .staff__contacts{display:flex; flex-direction:column; gap:8px; margin-top:11px;}
.ca5-office .staff__link{display:inline-flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-soft); width:max-content; max-width:100%;}
.ca5-office .staff__link svg.i{width:15px; height:15px; color:var(--ink-muted); flex:0 0 auto;}
.ca5-office .staff__link span{word-break:break-word;}
.ca5-office .staff__link:hover{color:var(--accent); text-decoration:none;}
.ca5-office .staff__link:hover svg.i{color:var(--accent);}

/* ───────── Full-width sections below the contact grid ─────────
   Wrap sections that should span the page (not sit in the narrow column)
   in <div class="ca5-office__below">. Keeps them aligned to the grid width. */
.ca5-office__below{max-width:1160px; margin-top:4px;}
.ca5-office__below .ca5-office__section{margin-bottom:46px;}
.ca5-office__below .ca5-office__section:last-child{margin-bottom:0;}
.ca5-office__sub{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 14px;}
.ca5-office__group + .ca5-office__group{margin-top:30px;}

/* Resource / document link list */
.ca5-office .reslist{display:grid; gap:10px; grid-template-columns:repeat(auto-fill, minmax(330px,1fr));}
.ca5-office a.reslink{display:flex; align-items:center; gap:14px; padding:15px 18px; background:var(--surface); border:1px solid var(--border); border-radius:11px; color:var(--ink);}
.ca5-office a.reslink:hover{text-decoration:none; border-color:var(--accent); background:var(--surface-alt);}
.ca5-office .reslink .chip{width:38px; height:38px;}
.ca5-office .reslink__t{flex:1; min-width:0; font-size:15px; line-height:1.4;}
.ca5-office .reslink__arrow{flex:0 0 auto; color:var(--accent);}

/* People directory cards (full width, grouped) */
.ca5-office .people{display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(256px,1fr));}
.ca5-office .person{padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--surface);}
.ca5-office .person__name{font-family:var(--font-serif); font-weight:500; font-size:18px; line-height:1.25; color:var(--ink);}
.ca5-office .person__role{font-size:12.5px; line-height:1.4; color:var(--ink-muted); margin-top:3px;}
.ca5-office .person__contacts{display:flex; flex-direction:column; gap:7px; margin-top:13px;}
.ca5-office .person__link{display:inline-flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-soft); width:max-content; max-width:100%;}
.ca5-office .person__link svg.i{width:15px; height:15px; color:var(--ink-muted); flex:0 0 auto;}
.ca5-office .person__link span{word-break:break-word;}
.ca5-office .person__link[href^="mailto"] span{font-size:13px; word-break:normal; overflow-wrap:break-word;}
.ca5-office .person__link[href^="tel"] span,
.ca5-office .staff__link[href^="tel"] span{white-space:nowrap; word-break:normal;}
.ca5-office .person__link:hover{color:var(--accent); text-decoration:none;}
.ca5-office .person__link:hover svg.i{color:var(--accent);}

/* Eligibility note + "if you are…" help lines */
.ca5-office .note-card{display:flex; gap:14px; padding:18px 20px; background:var(--accent-soft); border-radius:12px; max-width:860px;}
.ca5-office .note-card .chip{background:var(--accent); color:var(--accent-ink);}
.ca5-office .note-card p{margin:0; font-size:15px; line-height:1.65; color:var(--ink);}
.ca5-office .help-lines{margin-top:16px; display:flex; flex-direction:column; gap:9px; max-width:860px;}
.ca5-office .help-lines p{margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft);}

/* ───────── Optional photo figure ───────── */
.ca5-office__figure{margin:0 0 40px;}
.ca5-office__figure img{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; border:1px solid var(--border);}
.ca5-office__figure figcaption{font-size:13px; line-height:1.5; color:var(--ink-muted); margin-top:10px;}

/* ───────── Responsive: single column on narrow screens ───────── */
@media (max-width:880px){
  .ca5-office{padding:28px 20px 48px;}
  .ca5-office__title{font-size:34px;}
  .ca5-office__lead{font-size:17px;}
  .ca5-office__grid{grid-template-columns:1.3fr 1fr;}   /* was 1.55fr 1fr */
  .ca5-office__aside{position:static;}
  .ca5-office .holidays{grid-template-columns:1fr;}
  .ca5-office .holiday:nth-child(2){border-top:1px solid var(--border);}
  .ca5-office .holiday:nth-child(even){border-left:none;}
}
@media (prefers-reduced-motion:reduce){
  .ca5-office *{transition:none !important;}
}