/* Community calendar: local dates, prayer times, and Shabbat. */
.jewish-life {
  padding-block: 84px;
}

.jl-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.jl-heading h2 { max-width: 720px; }
.jl-heading p:not(.eyebrow):not(.jl-local-badge) {
  max-width: 620px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 14px;
}

.jl-local-badge {
  flex-shrink: 0;
  display: block;
  padding: 8px 12px;
  border: 1px solid #cbd2c2;
  border-radius: 3px;
  color: var(--green);
  background: #eeefe3;
  font-size: 11px;
  line-height: 1.5;
}

.jl-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.jl-card {
  min-width: 0;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fffdf7;
}

.jl-card-header { margin-bottom: 24px; }
.jl-card-header .eyebrow { margin-bottom: 11px; color: var(--muted); }
.jl-card-header h3 { font-size: 29px; }
.jl-date { font-size: 15px; line-height: 1.6; }
.jl-hebrew {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.5;
}
.jl-date-note,
.jl-status,
.jl-updated {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.jl-date-note { margin-top: 7px; }
.jl-status { margin-top: 18px; }
.jl-updated { margin-top: 14px; }

.jl-times-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 25px 0 0;
}
.jl-times-grid dl { margin: 0; }
.jl-time { min-width: 0; padding-top: 13px; border-top: 1px solid var(--line); }
.jl-time dt { color: var(--muted); font-size: 12px; line-height: 1.5; }
.jl-time dd {
  margin: 5px 0 0;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.jl-shabbat {
  color: var(--paper);
  background: var(--green);
  border-color: var(--green);
}
.jl-shabbat .jl-card-header .eyebrow { color: var(--gold); }
.jl-shabbat-name {
  margin: 0;
  color: #f1dfb9;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.35;
}
.jl-shabbat-dates {
  margin-top: 8px;
  color: #dce4d6;
  font-size: 13px;
  line-height: 1.7;
}
.jl-shabbat-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.jl-shabbat-time {
  min-width: 0;
  padding-top: 15px;
  border-top: 1px solid #ffffff38;
}
.jl-shabbat-time span { display: block; color: #dce4d6; font-size: 12px; }
.jl-shabbat-time strong {
  display: block;
  margin-top: 7px;
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 35px);
  font-weight: 400;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.jl-method { margin-top: 24px; }
.jl-method label { display: block; margin-bottom: 7px; font-size: 12px; }
.jl-method select {
  width: 100%;
  min-height: 44px;
  padding: 9px 34px 9px 12px;
  border: 1px solid #cbd2c2;
  border-radius: 3px;
  color: var(--ink);
  background: var(--paper);
  font: 13px/1.5 var(--sans);
}
.jl-calculation {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.jl-shabbat .jl-calculation,
.jl-shabbat .jl-status,
.jl-shabbat .jl-date-note,
.jl-shabbat .jl-updated { color: #dce4d6; font-size: 12px; line-height: 1.7; }
.jl-calculation + .jl-calculation { margin-top: 7px; }
.jl-empty { margin-top: 16px; color: var(--muted); font-size: 13px; }
.jl-shabbat .jl-empty { color: #dce4d6; }

.jl-error {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid #c4aa8c;
  border-radius: 3px;
  color: #603d25;
  background: #faf0df;
  font-size: 13px;
  line-height: 1.65;
}
.jl-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 16px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--green);
  background: var(--paper);
  font-size: 12px;
  font-weight: 600;
}
.jl-retry:hover { background: #edf0e6; }

.jl-month-card {
  min-width: 0;
  margin-top: 24px;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fffdf7;
}
.jl-month-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 24px;
}
.jl-month-header h3 { font-size: 29px; }
.jl-month-controls { display: flex; gap: 7px; align-items: center; }
.jl-month-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #bbc5b2;
  border-radius: 3px;
  color: var(--green);
  background: transparent;
  font-size: 13px;
  line-height: 1.5;
}
.jl-month-controls button:hover { background: #edf0e6; }
.jl-month-controls button:disabled { color: #61695f; background: #eeefe3; cursor: default; }

.jl-calendar { width: 100%; table-layout: fixed; border-collapse: collapse; }
.jl-calendar th {
  width: calc(100% / 7);
  padding: 10px 2px 13px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}
.jl-calendar th abbr { text-decoration: none; }
.jl-calendar td {
  padding: 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.jl-day {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 112px;
  height: 100%;
  padding: 11px 9px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  text-align: left;
  line-height: 1.4;
}
.jl-day:hover { background: #f0f1e7; }
.jl-day-number { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jl-day-hebrew {
  max-width: 100%;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.jl-day-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.jl-day-events span { display: block; }
.jl-day-dot { display: none; }
.jl-day.is-today { border-color: #718363; background: #edf0e6; }
.jl-day.is-selected,
.jl-day[aria-pressed="true"] { color: var(--paper); background: var(--green); border-color: var(--green); }
.jl-day.is-selected .jl-day-hebrew,
.jl-day[aria-pressed="true"] .jl-day-hebrew { color: #dce4d6; }
.jl-day.is-selected.is-today .jl-day-number,
.jl-day[aria-pressed="true"].is-today .jl-day-number { color: #f1dfb9; }
.jl-empty-day { background: #f7f6ee; }

.jl-detail {
  margin-top: 24px;
  padding-top: 23px;
  border-top: 1px solid var(--line);
}
.jl-detail h4 { margin: 0; font: 400 24px/1.4 var(--serif); }
.jl-detail-date { margin-top: 6px; color: var(--muted); font-size: 12px; }
.jl-event-list { margin: 17px 0 0; padding: 0; list-style: none; }
.jl-event-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.jl-event-title { font-weight: 500; }
.jl-event-time { color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jl-event-note { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.jl-calendar-note,
.jl-attribution { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.jl-calendar-note a,
.jl-attribution a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.jl-attribution a:hover { text-decoration-thickness: 2px; }

.jewish-life select:focus-visible,
.jewish-life button:focus-visible,
.jewish-life a:focus-visible { outline: 3px solid #91631b; outline-offset: 3px; }
.jewish-life .jl-day:focus-visible { position: relative; z-index: 1; outline-offset: -3px; }
.jl-shabbat select:focus-visible,
.jl-shabbat button:focus-visible,
.jl-shabbat a:focus-visible { outline-color: var(--gold); }
.jl-day.is-selected:focus-visible,
.jl-day[aria-pressed="true"]:focus-visible { outline-color: var(--gold); }
.jewish-life [hidden] { display: none !important; }

@media (max-width: 850px) {
  .jewish-life { padding-block: 65px; }
  .jl-heading { align-items: flex-start; flex-direction: column; gap: 18px; }
  .jl-card { padding: 24px; }
  .jl-card-grid { gap: 18px; }
  .jl-month-card { padding: 24px 18px; }
  .jl-day { min-height: 102px; padding: 9px 6px; }
}

@media (max-width: 640px) {
  .jewish-life { padding-block: 55px; }
  .jl-heading { margin-bottom: 26px; }
  .jl-heading p:not(.eyebrow):not(.jl-local-badge) { font-size: 13px; }
  .jl-card-grid { grid-template-columns: minmax(0, 1fr); }
  .jl-card { padding: 24px; }
  .jl-card-header h3, .jl-month-header h3 { font-size: 26px; }
  .jl-shabbat-time strong { font-size: 32px; }
  .jl-month-card { padding: 22px 12px; }
  .jl-month-header { gap: 15px; }
  .jl-day { min-height: 72px; padding: 8px 5px; }
  .jl-day-events { display: none; }
  .jl-day-hebrew {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 10px;
  }
  .jl-day-dot {
    display: block;
    width: 5px;
    height: 5px;
    margin-top: 7px;
    border-radius: 50%;
    background: currentColor;
    font-size: 0;
  }
  .jl-calendar th { font-size: 10px; }
}

@media (max-width: 480px) {
  /* Give seven calendar columns at least 44px each at a 320px viewport. */
  .jl-month-card {
    width: calc(100% + 40px);
    margin-inline: -20px;
    padding: 22px 4px;
    border-radius: 0;
  }
  .jl-month-header,
  .jl-detail,
  .jl-month-card > .jl-calendar-note,
  .jl-month-card > .jl-attribution,
  .jl-month-card > .jl-status { margin-inline: 15px; }
  .jl-month-header { flex-direction: column; align-items: flex-start; }
  .jl-month-controls { width: 100%; }
  .jl-month-controls button { flex: 0 0 auto; }
  .jl-day { min-height: 68px; }
  .jl-day-number { font-size: 14px; }
  .jl-times-grid { gap: 18px; }
  .jl-card { padding: 22px; }
  .jl-shabbat-times { gap: 14px; }
  .jl-shabbat-time strong { font-size: 28px; }
  .jl-local-badge { font-size: 10px; }
}