/*
 * Catholic Daily Readings — editorial liturgical system, v2.7.0
 * Uses Prayer Warrior USA's canonical design tokens when the parent theme is active.
 * Reading retrieval, liturgical dates, caching and shortcode output are intentionally separate.
 */

:root {
  --cdr-ink: var(--pwu-ink, #17202a);
  --cdr-navy: var(--pwu-navy, #102335);
  --cdr-navy-2: var(--pwu-navy-2, #193146);
  --cdr-paper: var(--pwu-paper, #fffdf9);
  --cdr-ivory: var(--pwu-ivory, #f5f0e7);
  --cdr-gold: var(--pwu-gold, #a47835);
  --cdr-gold-dark: var(--pwu-gold-dark, #7b5a20);
  --cdr-line: var(--pwu-line, #e4ddd1);
  --cdr-muted: var(--pwu-muted, #5f686d);
  --cdr-serif: var(--pwu-font-serif, Georgia, "Times New Roman", serif);
  --cdr-sans: var(--pwu-font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --cdr-radius-sm: var(--pwu-radius-sm, 8px);
  --cdr-radius-md: var(--pwu-radius-md, 10px);
  --cdr-radius-lg: var(--pwu-radius-lg, 14px);
  --cdr-shadow-sm: var(--pwu-shadow-sm, 0 2px 8px rgba(16, 35, 53, .06));
  --cdr-shadow: var(--pwu-shadow, 0 14px 34px rgba(16, 35, 53, .08));
}

.cdr-card,
.cdr-widget,
.cdr-widget *,
.cdr-detail,
.cdr-detail *,
.cdr-detail-liturgical,
.cdr-detail-liturgical * {
  box-sizing: border-box;
}

.cdr-card,
.cdr-detail-liturgical {
  color: var(--cdr-ink);
  font-family: var(--cdr-sans);
}

/* Error/empty state */
.cdr-card:not(.cdr-widget) {
  width: 100%;
  max-width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--cdr-line);
  border-left: 3px solid var(--cdr-gold);
  border-radius: var(--cdr-radius-md);
  background: var(--cdr-ivory);
  box-shadow: none;
  font-size: 14px;
  line-height: 1.6;
}

/* Compact editorial widget: one surface, one border and one clear hierarchy. */
.cdr-widget {
  container: cdr-widget / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 2vw, 28px);
  overflow: visible;
  border: 1px solid var(--cdr-line);
  border-radius: var(--cdr-radius-lg);
  background: linear-gradient(160deg, var(--cdr-paper) 0%, var(--cdr-ivory) 100%);
  color: var(--cdr-ink);
  box-shadow: var(--cdr-shadow-sm);
  font-family: var(--cdr-sans);
}

.cdr-widget::before {
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cdr-gold), transparent);
  content: "";
  opacity: .85;
  pointer-events: none;
}

.cdr-widget-hero {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 17px;
  min-width: 0;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--cdr-line);
}

.cdr-emblem-box {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.cdr-emblem {
  position: relative;
  display: flex;
  width: 78px;
  height: 94px;
  flex: 0 0 78px;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 5px 8px rgba(16, 35, 53, .09));
}

.cdr-emblem::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(164, 120, 53, .5);
  border-radius: 48% 48% 17% 17% / 40% 40% 14% 14%;
  content: "";
  pointer-events: none;
}

.cdr-emblem-svg {
  display: block;
  width: 75px;
  height: 89px;
  overflow: visible;
}

.cdr-vestment { fill: #7c9876; stroke: #9b7d3e; stroke-width: 2.2; }
.cdr-vestment-stole { fill: #e3eadf; stroke: #9b7d3e; stroke-width: 1.8; }
.cdr-vestment-cross { fill: #a88645; }
.cdr-vestment-trim { fill: none; stroke: #d9bf76; stroke-width: 3; stroke-linecap: round; }
.cdr-vestment-jewel { fill: #fff8dd; stroke: #a88645; stroke-width: 1.5; }

.cdr-emblem-caption {
  max-width: 100%;
  margin-top: 5px;
  color: var(--cdr-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.cdr-widget-season-wrap { min-width: 0; }

.cdr-widget-kicker {
  margin: 0 0 5px;
  color: var(--cdr-gold-dark);
  font-family: var(--cdr-sans);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.cdr-widget-season,
.cdr-detail-season,
.cdr-detail-hero h1,
.cdr-detail-liturgical .cdr-sec h2,
.cdr-widget-readings-heading > span:first-child {
  color: var(--cdr-navy);
  font-family: var(--cdr-serif);
  font-weight: 500;
  letter-spacing: -.025em;
}

.cdr-widget-season {
  margin: 0;
  font-size: clamp(23px, 2.1vw, 29px);
  line-height: 1.17;
  text-align: left;
  overflow-wrap: normal;
  word-break: normal;
}

/* Three compact metadata cells; separators are actual grid tracks, not padding. */
.cdr-widget-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  min-width: 0;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--cdr-line);
}

.cdr-widget-meta.cdr-widget-meta-two {
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
}

.cdr-meta-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.cdr-meta-item:nth-of-type(1) { text-align: left; }
.cdr-meta-item:nth-of-type(3),
.cdr-meta-item:nth-of-type(5) { text-align: center; }

.cdr-meta-label {
  color: var(--cdr-muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: .08em;
  overflow-wrap: normal;
  word-break: normal;
}

.cdr-meta-value {
  color: var(--cdr-navy);
  font-family: var(--cdr-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: normal;
}

.cdr-color-name {
  position: relative;
  display: inline-block;
  padding-left: 14px;
}

.cdr-color-name::before {
  position: absolute;
  top: .45em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6f976a;
  box-shadow: 0 0 0 3px rgba(111, 151, 106, .14);
  content: "";
}

.cdr-meta-divider { width: 1px; background: var(--cdr-line); }

/* Scripture references are short editorial rows, never narrow character columns. */
.cdr-widget-readings { min-width: 0; margin-top: 16px; }

.cdr-widget-readings-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--cdr-line);
}

.cdr-widget-readings-heading > span:first-child {
  font-size: 20px;
  line-height: 1.2;
}

.cdr-widget-readings-heading > span:last-child {
  flex: 0 0 auto;
  color: var(--cdr-gold-dark);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.cdr-widget-ref {
  display: grid;
  grid-template-columns: minmax(115px, .72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 14px;
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--cdr-line);
}

.cdr-widget-ref:last-child { border-bottom: 0; }

.cdr-widget-ref-label {
  min-width: 0;
  color: var(--cdr-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: normal;
  word-break: normal;
}

.cdr-widget-ref-value {
  display: block;
  min-width: 0;
  max-width: 100%;
  color: var(--cdr-ink);
  font-family: var(--cdr-serif);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* One obvious next step. Button geometry remains safe in a compact sidebar. */
.cdr-btn,
.cdr-btn:visited,
.cdr-btn:focus,
.cdr-btn:active,
.cdr-btn:hover {
  color: #fff !important;
  text-decoration: none !important;
}

.cdr-btn {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding: 12px 16px;
  border: 1px solid var(--cdr-gold);
  border-radius: var(--cdr-radius-md);
  background: var(--cdr-navy);
  box-shadow: 0 5px 15px rgba(16, 35, 53, .12);
  color: #fff;
  font-family: var(--cdr-sans);
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  text-align: center;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.cdr-btn:hover {
  transform: translateY(-1px);
  border-color: var(--cdr-gold-dark);
  background: var(--cdr-navy-2);
  box-shadow: 0 8px 20px rgba(16, 35, 53, .16);
}

.cdr-btn:active { transform: translateY(0); box-shadow: var(--cdr-shadow-sm); }
.cdr-btn:focus-visible { outline: 3px solid var(--cdr-gold-dark); outline-offset: 3px; }

.cdr-widget-btn {
  display: flex;
  width: 100%;
  flex: 0 0 auto;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  margin-top: auto;
  padding: 0;
  overflow: hidden;
  border-radius: var(--cdr-radius-md);
}

.cdr-widget-btn > span:first-child {
  display: flex;
  min-width: 0;
  min-height: 52px;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: normal;
}

.cdr-btn-arrow {
  display: flex;
  min-height: 52px;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, .2);
  font-size: 22px;
  line-height: 1;
  transition: transform .18s ease, background-color .18s ease;
}

.cdr-widget-btn:hover .cdr-btn-arrow { transform: translateX(2px); background: rgba(255, 255, 255, .05); }

/* Sidebar/widget context: the surrounding theme widget already owns the card
   surface and padding. Remove the nested card so the padding is not doubled. */
.article-sidebar .cdr-widget,
.page-sidebar .cdr-widget,
.sidebar .cdr-widget,
.widget-area .widget .cdr-widget,
.widget .cdr-widget {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.article-sidebar .cdr-widget::before,
.page-sidebar .cdr-widget::before,
.sidebar .cdr-widget::before,
.widget-area .widget .cdr-widget::before,
.widget .cdr-widget::before { display: none; }

.article-sidebar .cdr-widget-hero,
.page-sidebar .cdr-widget-hero,
.sidebar .cdr-widget-hero,
.widget-area .widget .cdr-widget-hero,
.widget .cdr-widget-hero { padding-top: 0; }

/* Liturgical colors apply to the vestment and color marker only. */
.cdr-color-green .cdr-vestment { fill: #7c9876; }
.cdr-color-green .cdr-vestment-stole { fill: #e3eadf; }
.cdr-color-green .cdr-color-name::before { background: #6f976a; }
.cdr-color-red .cdr-vestment { fill: #a75f59; }
.cdr-color-red .cdr-vestment-stole { fill: #eed6d3; }
.cdr-color-red .cdr-color-name::before { background: #a85c56; }
.cdr-color-violet .cdr-vestment,
.cdr-color-purple .cdr-vestment { fill: #75648d; }
.cdr-color-violet .cdr-vestment-stole,
.cdr-color-purple .cdr-vestment-stole { fill: #e1d8e8; }
.cdr-color-violet .cdr-color-name::before,
.cdr-color-purple .cdr-color-name::before { background: #75618a; }
.cdr-color-white .cdr-vestment,
.cdr-color-gold .cdr-vestment { fill: #eee8d7; }
.cdr-color-white .cdr-vestment-stole,
.cdr-color-gold .cdr-vestment-stole { fill: #fffaf0; }
.cdr-color-white .cdr-color-name::before,
.cdr-color-gold .cdr-color-name::before { background: #b58a43; }
.cdr-color-rose .cdr-vestment { fill: #c58a96; }
.cdr-color-rose .cdr-vestment-stole { fill: #f1dde2; }
.cdr-color-rose .cdr-color-name::before { background: #c88d99; }
.cdr-color-black .cdr-vestment { fill: #4e4a47; }
.cdr-color-black .cdr-vestment-stole { fill: #d7d4d1; }
.cdr-color-black .cdr-color-name::before { background: #4e4a47; }

/* Full reading page — calm editorial surface, comfortable Scripture measure. */
.cdr-detail { width: 100%; max-width: 100%; min-width: 0; margin: 0; color: var(--cdr-ink); font-family: var(--cdr-sans); }

.cdr-detail-liturgical {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(20px, 3vw, 34px);
  border: 1px solid var(--cdr-line);
  border-radius: var(--cdr-radius-lg);
  background: linear-gradient(160deg, var(--cdr-paper) 0%, var(--cdr-ivory) 100%);
  box-shadow: var(--cdr-shadow-sm);
}

.cdr-detail-hero {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-width: 0;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--cdr-line);
}

.cdr-emblem-box-detail { width: 110px; }
.cdr-emblem-box-detail .cdr-emblem { width: 104px; height: 122px; flex-basis: 104px; }
.cdr-emblem-box-detail .cdr-emblem-svg { width: 96px; height: 112px; }
.cdr-detail-hero-copy { min-width: 0; }
.cdr-detail-season { margin: 3px 0 4px; font-size: clamp(27px, 3vw, 36px); line-height: 1.14; }
.cdr-detail-week { margin-bottom: 9px; color: var(--cdr-muted); font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.cdr-detail-hero h1 { margin: 8px 0; font-size: clamp(23px, 2.4vw, 32px); line-height: 1.2; overflow-wrap: anywhere; }
.cdr-detail-liturgical .cdr-detail-date,
.cdr-detail-liturgical .cdr-color { margin-top: 5px; color: var(--cdr-ink); font-size: 14px; line-height: 1.6; }

.cdr-detail-liturgical .cdr-sec {
  margin: 21px 0 0;
  padding: clamp(17px, 2.2vw, 25px);
  border: 1px solid var(--cdr-line);
  border-left: 3px solid var(--cdr-gold);
  border-radius: var(--cdr-radius-md);
  background: rgba(255, 253, 249, .86);
  box-shadow: none;
}

.cdr-detail-liturgical .cdr-sec h2 {
  margin: 0 0 12px;
  padding: 0 0 11px;
  border-bottom: 1px solid var(--cdr-line);
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.25;
}

.cdr-scripture-ref { margin: 6px 0 14px; color: var(--cdr-gold-dark); font-size: 15px; font-weight: 750; line-height: 1.6; overflow-wrap: normal; word-break: normal; }
.cdr-text { color: var(--cdr-ink); font-size: 17px; line-height: 1.82; overflow-wrap: break-word; word-break: normal; }
.cdr-unavailable { color: var(--cdr-muted); font-style: italic; }
.cdr-source-link { margin: 22px 0 0; }
.cdr-source-link a { color: var(--cdr-gold-dark); font-weight: 750; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cdr-source-link a:hover { color: var(--cdr-navy); }
.cdr-source-link a:focus-visible { outline: 2px solid var(--cdr-gold-dark); outline-offset: 3px; }
.cdr-detail-liturgical .cdr-note { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--cdr-line); color: var(--cdr-muted); font-size: 13px; line-height: 1.65; }

/* Container breakpoints allow sidebar instances to respond to their own width. */
@container cdr-widget (max-width: 520px) {
  .cdr-widget-hero { grid-template-columns: 67px minmax(0, 1fr); gap: 12px; padding-bottom: 15px; }
  .cdr-emblem { width: 66px; height: 80px; flex-basis: 66px; }
  .cdr-emblem-svg { width: 64px; height: 77px; }
  .cdr-widget-season { font-size: clamp(20px, 5.6cqi, 26px); line-height: 1.18; }
  .cdr-widget-meta,
  .cdr-widget-meta.cdr-widget-meta-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cdr-widget-meta .cdr-meta-divider { display: none; }
  .cdr-widget-meta .cdr-meta-item:nth-of-type(n) { text-align: left; }
  .cdr-meta-label { font-size: 9px; letter-spacing: .06em; }
  .cdr-meta-value { font-size: 13px; }
  .cdr-widget-readings-heading { align-items: flex-start; flex-wrap: wrap; gap: 6px 10px; }
  .cdr-widget-readings-heading > span:first-child { font-size: 19px; }
  .cdr-widget-ref { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 10px 0; }
  .cdr-widget-ref-label,
  .cdr-widget-ref-value { width: 100%; }
  .cdr-widget-ref-value { font-size: 14px; line-height: 1.55; }
}

@container cdr-widget (max-width: 310px) {
  .cdr-widget-hero { grid-template-columns: 54px minmax(0, 1fr); align-items: start; gap: 10px; }
  .cdr-emblem { width: 53px; height: 65px; flex-basis: 53px; }
  .cdr-emblem-svg { width: 51px; height: 62px; }
  .cdr-widget-season { font-size: 20px; }
  .cdr-widget-meta,
  .cdr-widget-meta.cdr-widget-meta-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cdr-widget-btn > span:first-child { padding: 9px 8px; font-size: 13px; }
  .cdr-btn-arrow { flex-basis: 38px; }
  .cdr-widget { padding: 15px 12px 13px; }
}

@media (max-width: 620px) {
  .cdr-widget { padding: 18px 16px 16px; border-radius: var(--cdr-radius-md); }
  .cdr-widget-meta,
  .cdr-widget-meta.cdr-widget-meta-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cdr-widget-meta .cdr-meta-divider { display: none; }
  .cdr-widget-meta .cdr-meta-item:nth-of-type(n) { text-align: left; }
  .cdr-widget-ref { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .cdr-detail-liturgical { padding: 20px 16px; border-radius: var(--cdr-radius-md); }
  .cdr-detail-hero { grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 14px; padding-bottom: 19px; }
  .cdr-emblem-box-detail { width: 80px; }
  .cdr-emblem-box-detail .cdr-emblem { width: 78px; height: 94px; flex-basis: 78px; }
  .cdr-emblem-box-detail .cdr-emblem-svg { width: 74px; height: 89px; }
  .cdr-detail-season { font-size: clamp(23px, 6vw, 30px); }
  .cdr-detail-hero h1 { font-size: clamp(21px, 5vw, 27px); }
  .cdr-detail-liturgical .cdr-sec { margin-top: 16px; padding: 17px 15px; }
  .cdr-text { font-size: 16px; line-height: 1.78; }
}

@media (max-width: 380px) {
  .cdr-widget { padding: 15px 12px 13px; }
  .cdr-widget-hero { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
  .cdr-emblem { width: 53px; height: 65px; flex-basis: 53px; }
  .cdr-emblem-svg { width: 51px; height: 62px; }
  .cdr-widget-season { font-size: 20px; }
  .cdr-widget-meta,
  .cdr-widget-meta.cdr-widget-meta-two { grid-template-columns: minmax(0, 1fr); }
  .cdr-widget-btn > span:first-child { padding: 9px 7px; font-size: 13px; }
  .cdr-btn-arrow { flex-basis: 38px; }
  .cdr-detail-hero { grid-template-columns: minmax(0, 1fr); }
  .cdr-emblem-box-detail { width: auto; align-items: flex-start; }
  .cdr-detail-hero h1 { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cdr-btn,
  .cdr-btn-arrow,
  .cdr-widget-btn { transition: none !important; }
}