/* The announcement bar (2026-10-05; modules/announcements). Loaded
   only while an announcement is showing, by both designs (Lotus picks this

   The bar is the first child of the sticky .site-head, so it rides with the
   header. Its height is --bar (0px in style.css): every rule that hangs
   from the header (menu panel, sticky asides, scroll padding, Lotus hero)
   reads var(--head) + var(--bar), so nothing sits under it. A visitor who
   closed it gets html.bar-gone before first paint: --bar back to 0, bar gone.
   Closing is off by default (.is-static, no X): see modules/announcements.

   Accents are the theme palette, every pairing at least 4.5:1 for the text:
     periwinkle #CBD6EE, olive ink   7.7:1
     green      #46705A, cream ink   5.2:1
     cream      #F1ECE0, olive ink   9.5:1
     charcoal   #383D31, cream ink  10.3:1
   Copper appears only as the small dot before the words. */

html.has-bar{--bar:44px}
html.has-bar.bar-gone{--bar:0px}
html.bar-gone .ann-bar{display:none}

.ann-bar{position:relative;display:flex;align-items:center;height:var(--bar);overflow:hidden;
  background:var(--ann-bg);color:var(--ann-ink);font:500 13.5px/1.2 var(--body);
  --ann-bg:#CBD6EE;--ann-ink:#383D31;--ann-rule:rgba(56,61,49,.45)}
.ann-periwinkle{--ann-bg:#CBD6EE;--ann-ink:#383D31;--ann-rule:rgba(56,61,49,.45)}
.ann-green{--ann-bg:#46705A;--ann-ink:#F9F6EE;--ann-rule:rgba(249,246,238,.55)}
.ann-cream{--ann-bg:#F1ECE0;--ann-ink:#383D31;--ann-rule:rgba(56,61,49,.4);box-shadow:inset 0 -1px 0 var(--line)}
.ann-charcoal{--ann-bg:#383D31;--ann-ink:#F9F6EE;--ann-rule:rgba(249,246,238,.5)}

/* centred in the whole bar: the left pad balances the X on the right */
.ann-in{flex:1;min-width:0;display:flex;justify-content:center;padding:0 0 0 44px}
/* no X (closing is off, the default): even side pads, still centred */
.ann-bar.is-static .ann-in{padding:0 16px}
.ann-line{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;margin:0;white-space:nowrap}
.ann-line::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--copper,#C58C51)}
.ann-t{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* the link: the design's own underline, never default blue; its ::after
   stretches over the whole bar, so the bar is one big target */
.ann-link{flex:none;display:inline-flex;align-items:center;gap:5px;color:inherit;font-weight:400;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--ann-rule);
  transition:text-decoration-color .2s var(--ease,ease)}
.ann-link:hover{text-decoration-color:currentColor}.ann-link:focus-visible{text-decoration-color:currentColor}
.ann-link svg{flex:none;transition:transform .2s var(--ease,ease)}
.ann-link:hover svg{transform:translateX(2px)}
.ann-link::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0}
/* the bar's words inside a generic "Learn more" link: read aloud and indexed, never painted */
.ann-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ann-link:focus-visible{outline:none}
.ann-link:focus-visible::after{outline:2px solid currentColor;outline-offset:-4px}

.ann-x,.ann-edit{position:relative;z-index:1;flex:none;display:inline-grid;place-items:center;height:44px;color:inherit}
.ann-x{width:44px;padding:0;border:0;background:none;cursor:pointer;border-radius:0}
.ann-x svg{opacity:.8;transition:opacity .15s}
.ann-x:hover svg{opacity:1}
.ann-x:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
.ann-edit{padding:0 8px;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:.2em;text-decoration-color:var(--ann-rule)}

@media (min-width:921px){
  .ann-bar{font-size:14px}
  .ann-line{gap:12px}
}
@media (prefers-reduced-motion:reduce){.ann-link,.ann-link svg,.ann-x svg{transition:none}}
@media print{.ann-bar{display:none}}

/* ---------- phones: one line, never two (2026-10-05) ----------
   Below 921px the bar holds one line whatever staff type: a line too long
   for the phone is cut with "...", so the important words go first (the
   admin note says so). The dot and the visible link words step aside and the
   words carry the underline: the link's ::after makes the whole bar its tap
   target, and the X keeps its own 44px on the right. Type steps down on the
   smallest phones, never under 12px. */
@media (max-width:920px){
  .ann-in{padding-left:12px}
  .ann-bar.is-static .ann-in{padding:0 12px}
  .ann-line{gap:0;white-space:nowrap}
  .ann-line::before{display:none}
  .ann-t{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .ann-bar.has-link .ann-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--ann-rule)}
  .ann-bar.has-link .ann-link{gap:0;padding:0}
  .ann-bar.has-link .ann-link svg{display:none}
  .ann-bar.has-link .ann-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .ann-bar{font-size:13px}
  /* words over 44 characters (.ann-two, html.bar-tall from the module): two centred lines, a taller bar
     (--bar grows with it so the header stack still clears it), the link words shown; the whole bar stays the link */
  html.has-bar.bar-tall{--bar:66px}
  html.has-bar.bar-tall.bar-gone{--bar:0px}
  .ann-bar.ann-two .ann-line{display:block;white-space:normal;text-align:center;line-height:1.35;padding:4px 0}
  .ann-bar.ann-two .ann-t{display:inline;white-space:normal;overflow:visible;text-overflow:clip;text-decoration:none}
  .ann-bar.ann-two .ann-t::after{content:" "}
  .ann-bar.ann-two.has-link .ann-link{display:inline;position:static;padding:0}
  .ann-bar.ann-two.has-link .ann-l{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:nowrap;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--ann-rule)}
}
@media (max-width:374px){
  .ann-bar{font-size:12.5px}
}