/*
 * CricketWindies "On This Day" homepage widget.
 *
 * A near line-for-line port of the approved design mockup
 * (design/on-this-day/component.css) — kept as close to the original
 * values as possible. Arial/Helvetica isn't a special choice — it's
 * this theme's own base body font (theme.css: `body { font-family:
 * Arial, Helvetica, sans-serif; }`), so it was already what this card
 * would render in regardless. The genuinely deliberate deviation is the
 * warm parchment background (#f4eee4) — confirmed distinct from every
 * existing --paper/--surface/--surface-alt value in this theme — meant
 * to give this one card an aged/archival feel. Don't "fix" that back
 * toward theme consistency without checking with the user first.
 */

.cw-archive {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  margin-top: 11px;
  margin-bottom: 16px;
  border: 1px solid #d9cbbb;
  border-radius: 4px;
  overflow: hidden;
  background: #f4eee4;
  color: #24303d;
  font-family: Arial, Helvetica, sans-serif;
}
.cw-archive * { box-sizing: border-box; }

.cw-archive__date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 17px;
  background: #50132c;
  color: #edcf91;
}
.cw-archive__date h2 {
  margin: 0 0 12px;
  color: #fff3de;
  font: 700 10px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 1px;
}
.cw-archive__date time span { display: block; font-size: 9px; letter-spacing: .8px; }
.cw-archive__date strong { display: block; margin: 3px 0 4px; font-size: 34px; line-height: 1.1; letter-spacing: -1px; }
.cw-archive__date small { font-size: 10px; color: #dbc0c7; }

.cw-archive__story { padding: 16px 20px; align-self: center; min-width: 0; }

.cw-archive__title {
  display: block;
  color: #26303c !important;
  font: 700 17px/1.3 Arial, Helvetica, sans-serif;
  text-decoration: none !important;
}
.cw-archive__title:hover { text-decoration: underline !important; }

/* The site's own base theme ships a generic `blockquote { border: 1px
   solid #ccc; background: #fff; padding: 10px; }` rule (used for MyCode
   [quote] boxes elsewhere). border-left/top/right/bottom are independent
   longhands, so overriding only border-left left that rule's other three
   sides and white background still showing through as a boxed-in look —
   explicitly zeroing every side (not relying on shorthand `border: none`
   colliding with a later border-left) is what actually gets the plain
   left-accent-only look the design calls for. */
.cw-archive__story blockquote {
  margin: 10px 0;
  padding: 0 0 0 10px;
  background: transparent;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 2px solid #c7ab7b;
  border-radius: 0;
  color: #655e59;
  font: 400 13px/1.5 Arial, Helvetica, sans-serif;
}

.cw-archive__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #756a63;
  font-size: 11px;
}
.cw-archive__meta a { color: #54102b !important; text-decoration: none; }
.cw-archive__meta a:hover { text-decoration: underline; }

.cw-archive__read { font-weight: 700; white-space: nowrap; color: #54102b !important; text-decoration: none; }
.cw-archive__read span { margin-left: 7px; }
/* !important, matching this rule's own color property above and for
   the same reason: .cw-archive__meta a:hover (the plain "View post"
   link's own hover rule) is specific enough to beat a plain
   .cw-archive__read:hover, since .cw-archive__read sits inside
   .cw-archive__meta and is itself an <a>, so that broader rule matches
   it too -- and its extra bare "a" type selector edges out the
   specificity race by one point. */
.cw-archive__read:hover { text-decoration: none !important; }

.cw-archive a:focus-visible { outline: 2px solid #54102b; outline-offset: 3px; }

@media (max-width: 650px) {
  .cw-archive { grid-template-columns: 88px minmax(0, 1fr); }
  .cw-archive__date { padding: 14px 10px; }
  .cw-archive__date h2 { font-size: 8px; letter-spacing: .6px; }
  .cw-archive__date time span { font-size: 8px; letter-spacing: 0; }
  .cw-archive__date strong { font-size: 28px; }
  .cw-archive__story { padding: 14px; }
  .cw-archive__title { font-size: 15px; }
  .cw-archive__meta { flex-wrap: wrap; gap: 8px; }
  .cw-archive__story blockquote { font-size: 12px; }
}

/* ---------- Dark mode ----------
   This theme's dark mode is driven entirely by a data-theme="dark"
   attribute on <html> (set in JS, see theme.css's own "Dark mode"
   section) — not a prefers-color-scheme media query — so this follows
   the same convention. Everything here uses hardcoded hex rather than
   var(--token) to match the approved mockup exactly, which means none
   of it adapts on its own; every color needs an explicit dark
   counterpart. Kept the same "aged archive" character rather than
   switching to the site's generic dark surface — a deep sepia/espresso
   background instead of bright cream, warm cream/tan text instead of
   dark navy/gray, gold links instead of maroon (maroon-on-dark-brown
   has poor contrast). The maroon date rail itself needs no override —
   gold-on-maroon already reads fine regardless of the surrounding
   page's theme. */
[data-theme="dark"] .cw-archive {
  border-color: #3d3226;
  background: #241d16;
  color: #e8dfd2;
}
[data-theme="dark"] .cw-archive__title { color: #f2e9da !important; }
[data-theme="dark"] .cw-archive__story blockquote { color: #c9beac; }
[data-theme="dark"] .cw-archive__meta { color: #a89c8a; }
[data-theme="dark"] .cw-archive__meta a,
[data-theme="dark"] .cw-archive__read { color: #edcf91 !important; }
[data-theme="dark"] .cw-archive a:focus-visible { outline-color: #edcf91; }