/* ==========================================================================
   Standing alerts — feeds.html

   Only what feeds.html needs beyond components.css. The banners, cards,
   buttons, grid and section rules are the shared ones; what is added here is
   the feed card and, inside it, the one element this page exists for: the
   address.

   The address is the interface. Everything else on the page is explanation
   around it, so it is set in the mono face at full contrast, in its own
   sunken block, wide enough to select in one gesture and never clipped. A
   feed address that wraps mid-word into an ellipsis is a feed nobody can
   subscribe to.

   No status colour anywhere in this file. Teal, amber, violet and signal are
   the map's legend on this site — operational, under construction, proposed,
   and a resident reporting a problem. A syndication file is none of those, so
   the only colour here is the shared --accent that every link on the site
   already uses, and it appears once: on the feed most people want.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The list of feeds
   -------------------------------------------------------------------------- */

.feed-list {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/* Two columns only once there is room for the address to sit on one line in
   each of them. Below that, one column: a 375px screen has no business
   holding two feed cards side by side. */
@media (min-width: 900px) {
  .feed-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The county feed is the reason to be on this page at all, and the calendar
     needs the width for its three buttons and its note. Both take the row. */
  .feed-card--lead,
  .feed-card--cal {
    grid-column: 1 / -1;
  }
}

.feed-card {
  border-top: var(--rule-heavy) solid var(--text);
  padding-top: var(--space-3);
}

.feed-card--lead {
  border-top-color: var(--accent);
}

.feed-card__kind {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--text-muted);
}

.feed-card--lead .feed-card__kind {
  color: var(--accent);
}

.feed-card__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-stretch: var(--width-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}

.feed-card__what {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   The address

   Long, unbreakable-looking, and the one thing on the page that must survive
   a 375px screen intact. `anywhere` rather than `break-word` because these
   have no spaces at all and break-word will still let a 46-character host
   push the card open.
   -------------------------------------------------------------------------- */

.feed-card__addr {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  background: var(--bg-sunken);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
}

.feed-card__url {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text);
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.feed-card__url:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

/* The shared focus ring is drawn for links in base.css, but this one sits on
   a sunken panel where a hairline outline is easy to lose. Give it the same
   ring with room around it. */
.feed-card__url:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */

.feed-card__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.feed-card__note {
  margin: var(--space-3) 0 0;
}

/* --------------------------------------------------------------------------
   The steps

   Numbered, because "if you have never used a feed before" means the order
   matters. The numeral is set in mono on the same baseline as the text rather
   than in a hanging marker, so it survives the narrow column.
   -------------------------------------------------------------------------- */

.feed-steps {
  margin: 0;
  padding-left: var(--space-5);
}

.feed-steps > li {
  margin-bottom: var(--space-4);
  padding-left: var(--space-1);
}

.feed-steps > li::marker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.feed-steps > li:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   The exclusion note

   What the feeds leave out, and why, is the most important paragraph on the
   page — it is the one that explains a deliberate omission somebody might
   otherwise read as an oversight. It gets a heavy rule and the serif face at
   reading size rather than being demoted to a footnote.
   -------------------------------------------------------------------------- */

.feed-note {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  background: var(--bg-raised);
  border: var(--border-width) solid var(--border);
  border-left: var(--rule-heavy) solid var(--text);
  border-radius: var(--radius-md);
}

.feed-note > p {
  margin: 0 0 var(--space-4);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  max-width: 68ch;
}

.feed-note > p:last-child {
  margin-bottom: 0;
}

.feed-nots {
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   Entrance

   One short movement, and only one: the cards settle in on load. There is no
   page script on feeds.html to drive the site's scroll-reveal, so this is
   done in CSS — which means the from-state must live in the keyframe and NOT
   in the static rule. Put opacity: 0 in the rule instead and a browser that
   refuses the animation leaves the whole page invisible.

   The keyframe is the shared fade-up from animations.css, whose reduced
   motion block already collapses every animation on the site to its final
   state. The media query below is belt and braces for that, and states the
   intent where the animation is written rather than only where it is
   cancelled.
   -------------------------------------------------------------------------- */

.feed-card {
  animation: fade-up var(--duration-base) var(--ease-out) both;
}

.feed-list > .feed-card:nth-child(2) {
  animation-delay: calc(1 * var(--stagger-step));
}
.feed-list > .feed-card:nth-child(3) {
  animation-delay: calc(2 * var(--stagger-step));
}
.feed-list > .feed-card:nth-child(4) {
  animation-delay: calc(3 * var(--stagger-step));
}

@media (prefers-reduced-motion: reduce) {
  .feed-card {
    animation: none;
  }
}

/* The reader deep-links, demoted below the copy button. They are useful but
   they are somebody else's product: signed out, they land on a sign-in page
   rather than subscribing, so they must not look like the primary action. */
.feed-card__readers {
  margin: var(--space-2) 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}