/* CCAANZ Anglican news ticker — styles for public/widget.js. Every rule is
   scoped under .cca-news so the WordPress theme is untouched. Works from 320px.
   Lines and tints are mixed from currentColor, so they follow the theme's text
   colour on light AND dark backgrounds instead of assuming black. */

.cca-news {
  box-sizing: border-box;
  max-width: 48rem;
  margin: 0 auto;
  font: inherit;
  color: inherit;
}
.cca-news *,
.cca-news *::before,
.cca-news *::after {
  box-sizing: inherit;
}

.cca-news__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}
.cca-news__toggle,
.cca-news__retry {
  font: inherit;
  font-size: 0.875rem;
  min-height: 2.25rem;
  min-width: 4.5rem;
  padding: 0.25rem 0.875rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
/* Focus ring in the text colour: visible on any theme background. */
.cca-news__toggle:focus-visible,
.cca-news__retry:focus-visible,
.cca-news__link:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

.cca-news__viewport {
  max-height: 32rem;
  overflow-y: auto;
  scroll-padding-block: 0.5rem;
  border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  -webkit-overflow-scrolling: touch;
}

.cca-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cca-news__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.cca-news__item:last-child {
  border-bottom: 0;
}
.cca-news__thumb {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 3.25rem;
  object-fit: cover;
  border-radius: 0.25rem;
  background: color-mix(in srgb, currentColor 8%, transparent);
}
.cca-news__body {
  flex: 1 1 auto;
  min-width: 0;
}
.cca-news__link {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-decoration: none;
  color: inherit;
}
.cca-news__link:hover {
  text-decoration: underline;
}
.cca-news__meta {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  opacity: 0.75;
}
/* The one live status region (loading / empty / error). It stays in the frame
   for good; with nothing to say it collapses but is NOT display:none, so it
   remains a live region. */
.cca-news__empty {
  padding: 1rem 0.5rem;
  margin: 0;
}
.cca-news__empty:empty {
  padding: 0;
}
/* Try again sits inside the frame, under the error message. The inline inset
   matches the headlines (.cca-news__item) and leaves room for the 3px ring +
   2px offset, which the overflow:auto frame would otherwise clip. */
.cca-news__retry {
  margin: 0 0.5rem 1rem;
}
/* In flight: aria-disabled (it keeps focus), shown by a dashed border — no
   opacity change. */
.cca-news__retry[aria-disabled='true'] {
  cursor: progress;
  border-style: dashed;
}
/* The frame takes focus only from script (after a successful Try again). */
.cca-news__viewport:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}
/* The disclaimer is meant to be READ, not small print: explicit dark-on-light
   colours (about 13:1, well past WCAG AA) whatever the theme, body-size text,
   and a marked left rule. Wraps freely at 375px. It is the page's ONE
   disclaimer. */
.cca-news__disclaimer {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #1a4f7a;
  border-radius: 0.25rem;
  background: #eef3f8;
  color: #1f2933;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cca-news__disclaimer-label {
  font-weight: 700;
}
/* The short line under the ticker: full-strength text colour (no opacity). */
.cca-news__note {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: inherit;
}

@media (max-width: 400px) {
  .cca-news__thumb {
    flex-basis: 3.5rem;
    width: 3.5rem;
    height: 2.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cca-news__viewport {
    scroll-behavior: auto;
  }
}