/* The announcement bar (Felix, 2026-10-05; modules/announcements). Loaded
   only while an announcement is showing, by both designs (Lotus picks this
   file up from the base theme and dresses it below, under body.lotus).

   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 Lindsey's 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}
.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}}

/* ---------- Lotus: its own type, and Maren's dotted stitch on the link ---------- */
body.lotus .ann-bar{font:500 15px/1.2 var(--body);letter-spacing:.005em}
body.lotus .ann-green,body.lotus .ann-charcoal{--dot:rgba(249,246,238,.5)}
body.lotus .ann-periwinkle,body.lotus .ann-cream{--dot:rgba(56,61,49,.45)}
body.lotus .ann-link{text-decoration:none;font-family:var(--ui);font-weight:400;font-size:.9em;--dot-y:100%;padding-bottom:2px}
body.lotus .ann-line::before{background:var(--gold,#C58C51)}
@media (min-width:921px){body.lotus .ann-bar{font-size:16px}}

/* ---------- phones: one line, never two (Wren, 2026-10-05, Eric's call) ----------
   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}
  body.lotus .ann-bar{font-size:14px}
}
@media (max-width:374px){
  .ann-bar{font-size:12.5px}
  body.lotus .ann-bar{font-size:13px;letter-spacing:0}
}