/**
 * page-announcements.css
 *
 * Scoped styles for template-announcements.php only.
 * Loaded via the $template_css_map in inc/enqueue.php, after psp-main.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 */

 /* ── PAGE BODY ── */
  .page-body { padding: 72px 0 100px; display: grid; grid-template-columns: 1fr 300px; gap: 80px; align-items: start; }


/* ── HERO: GHOST WATERMARK ───────────────────────────────────────────────────
   The "Notice" ghost text is unique to this page. Other inner-page heroes
   use a different word or no watermark at all. Scoped inside .page-hero so
   it does not bleed onto other pages that share the .page-hero shell.
   ─────────────────────────────────────────────────────────────────────────── */

.page-hero::before {
  content: "Notice";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184, 184, 184, 0.05);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

@media (max-width: 900px) {
  .page-hero::before {
    display: none;
  }
}


/* ── FILTER BAR ──────────────────────────────────────────────────────────────
   Pill buttons above the announcement list. Client-side category filter only.
   No server-side interaction — JS toggles [hidden] on .announcement-item.
   ─────────────────────────────────────────────────────────────────────────── */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(184, 184, 184, 0.08);
}

.filter-btn {
  padding: 7px 18px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(184, 184, 184, 0.2);
  color: var(--silver-dark);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.filter-btn:hover {
  border-color: rgba(184, 184, 184, 0.45);
  color: var(--white);
}

.filter-btn:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.filter-btn.is-active {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}


/* ── ANNOUNCEMENT LIST ───────────────────────────────────────────────────────
   Vertical stack of announcement items inside the left column of .page-body.
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-list {
  display: flex;
  flex-direction: column;
}

/* Hide items that don't match the active filter pill */
.announcement-item[hidden] {
  display: none;
}


/* ── ANNOUNCEMENT ITEM ───────────────────────────────────────────────────────
   Each <article> is one announcement. The left-border gradient treatment on
   pinned items uses a ::before pseudo — offset requires padding on the list
   container or a negative left value consistent with the .page-body left edge.
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-item {
  padding: 40px 0;
  border-bottom: 1px solid rgba(184, 184, 184, 0.1);
  position: relative;
}

.announcement-item:first-child {
  padding-top: 0;
}

/* Pinned: left-border gradient accent */
.announcement-item.is-pinned::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--silver-grad);
}

@media (max-width: 1100px) {
  /* Left border has no room when the sidebar drops below the list */
  .announcement-item.is-pinned::before {
    display: none;
  }
}

@media (max-width: 900px) {
  .announcement-item {
    padding: 32px 0;
  }
}


/* ── ANNOUNCEMENT HEADER + META ──────────────────────────────────────────────
   Row containing category tag(s), pinned badge, and issued/effective date.
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Base tag pill */
.announcement-tag {
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid rgba(184, 184, 184, 0.2);
  color: var(--silver);
}

/* Category-specific tag colour overrides */
.announcement-tag.tag-policy {
  border-color: rgba(184, 184, 184, 0.35);
  color: var(--silver);
}

.announcement-tag.tag-administrative {
  border-color: rgba(184, 184, 184, 0.25);
  color: var(--silver);
}

.announcement-tag.tag-chapter {
  border-color: rgba(184, 184, 184, 0.25);
  color: var(--silver);
}

.announcement-tag.tag-national {
  border-color: rgba(184, 184, 184, 0.25);
  color: var(--silver);
}

/* Pinned badge — slightly brighter than standard tags */
.announcement-tag.tag-pinned {
  border-color: rgba(200, 200, 200, 0.4);
  color: var(--black);
  background: var(--silver);
}

.announcement-date {
  font-size: 11px;
  color: var(--silver-light);
  letter-spacing: 0.06em;
}

@media (max-width: 540px) {
  .announcement-header {
    flex-direction: column;
    gap: 10px;
  }
}


/* ── ANNOUNCEMENT TITLE ──────────────────────────────────────────────────────
   Serif display title. Uses clamp so it scales gracefully at all widths
   without needing a breakpoint override.
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-title {
  font-family: var(--serif);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 12px;
}


/* ── ANNOUNCEMENT SUMMARY ────────────────────────────────────────────────────
   Always-visible teaser line below the title. One sentence. Never hidden by
   the expand/collapse — it is outside the collapsible panel.
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-summary {
  font-size: 14px;
  color: var(--silver-light);
  line-height: 1.7;
  font-weight: 300;
  max-width: 680px;
  margin-bottom: 16px;
}


/* ── EXPAND / COLLAPSE TOGGLE ────────────────────────────────────────────────
   ARIA disclosure widget pattern.
   Button: aria-expanded + aria-controls. Chevron rotates on expanded state.
   Focus-visible outline uses var(--white) for clear keyboard indicator.
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--silver-light);
  cursor: pointer;
  transition: color 0.2s;
}

.announcement-toggle:hover {
  color: var(--white);
}

.announcement-toggle:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

.announcement-toggle-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

/* Rotate chevron down→up when expanded */
.announcement-toggle[aria-expanded="true"] .announcement-toggle-icon {
  transform: rotate(180deg);
}


/* ── COLLAPSIBLE BODY PANEL ──────────────────────────────────────────────────
   Initial collapsed state (display:none) is set by JS on page load so panels
   are hidden regardless of CSS load order or browser support for grid-row
   animation. The CSS here handles the open transition only.

   When JS adds .is-open, display:none is cleared first, then grid-template-rows
   animates 0fr → 1fr for a smooth height reveal. On close, the transition runs
   in reverse, then JS sets display:none again via transitionend.

   Structure:
     .announcement-body-wrap   — grid container, transitions rows
       .announcement-body-inner — overflow:hidden clip layer
         .announcement-body    — actual content + padding
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.announcement-body-wrap.is-open {
  grid-template-rows: 1fr;
}

.announcement-body-inner {
  overflow: hidden;
}

.announcement-body {
  font-size: 14px;
  color: var(--silver-light);
  line-height: 1.8;
  font-weight: 300;
  max-width: 720px;
  padding-top: 20px;
}

.announcement-body p {
  margin-bottom: 12px;
}

.announcement-body p:last-child {
  margin-bottom: 0;
}

/* Bold inline text (e.g. email addresses, key terms) */
.announcement-body strong {
  color: var(--silver-light);
  font-weight: 600;
}

/* Wysiwyg-generated links inside body text */
.announcement-body a {
  color: var(--silver-light);
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.announcement-body a:hover {
  color: var(--white);
}


/* ── ANNOUNCEMENT FOOTER ─────────────────────────────────────────────────────
   Row inside the expanded body: issuer label + optional download button.
   Lives inside .announcement-body so it only appears when content is open.
   ─────────────────────────────────────────────────────────────────────────── */

.announcement-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.announcement-issued {
  font-size: 11px;
  color: var(--silver-dark);
  letter-spacing: 0.06em;
}

.announcement-issued strong {
  color: var(--silver);
  font-weight: 500;
}

/* PDF download button */
.announcement-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--silver-dark);
  border: 1px solid rgba(184, 184, 184, 0.2);
  padding: 7px 14px;
  transition: color 0.2s, border-color 0.2s;
}

.announcement-download:hover {
  color: var(--white);
  border-color: rgba(184, 184, 184, 0.5);
}

.announcement-download:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}


/* ── ANNOUNCEMENTS SIDEBAR ───────────────────────────────────────────────────
   Sticky offset accounts for the 96px nav header + 20px breathing room.
   At 1100px the sidebar drops below the list; position reverts to static.
   The .sidebar-block shell (background, border, padding) is in main.css.
   Only the layout wrapper and unique inner elements live here.
   ─────────────────────────────────────────────────────────────────────────── */

.announcements-sidebar {
  position: sticky;
  top: calc(96px + 20px);
  display: flex;
  flex-direction: column;
  gap: 1px; /* creates hairline between stacked sidebar-block cards */
}

@media (max-width: 1100px) {
  .announcements-sidebar {
    position: static;
  }
}

.sidebar-block { background: var(--black-2); border: 1px solid rgba(184,184,184,0.1); padding: 28px 24px; }
  .sidebar-block-label { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--silver-dark); font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
  .sidebar-block-label::before { content: ""; width: 16px; height: 1px; background: var(--silver-dark); }
  .sidebar-block h3 { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: 10px; }
  .sidebar-block p { font-size: 13px; color: var(--silver-dark); line-height: 1.6; font-weight: 300; }

  .jump-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
  .jump-list a {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; background: var(--black-3);
    font-size: 12px; color: var(--silver); text-decoration: none; line-height: 1.4;
    transition: background 0.2s, color 0.2s;
  }
  .jump-list a:hover { background: #222; color: var(--white); }
  .jump-list .jump-date { font-size: 10px; color: var(--silver-dark); white-space: nowrap; padding-top: 1px; flex-shrink: 0; }

/* ── ARCHIVE LINKS ───────────────────────────────────────────────────────────
   Year-grouped list inside the sidebar Archive block. Each row is a year
   with a post count badge on the right.
   ─────────────────────────────────────────────────────────────────────────── */

.archive-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.archive-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--black-3);
  font-size: 13px;
  color: var(--silver);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.archive-links a:hover {
  background: #222;
  color: var(--white);
}

.archive-links a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -2px;
}

/* Post count badge */
.archive-links .count {
  font-size: 10px;
  color: var(--silver-dark);
  background: rgba(184, 184, 184, 0.08);
  padding: 2px 7px;
}


/* ── SIDEBAR CTA LINK ────────────────────────────────────────────────────────
   Ghost arrow link in the "Questions" sidebar block pointing to /contact.
   Uses the same visual language as ghost buttons elsewhere on the site but
   is scoped here because the inline style approach in the original HTML is
   not maintainable and this element only appears on this page.
   ─────────────────────────────────────────────────────────────────────────── */

.sidebar-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 18px;
  border: 1px solid rgba(184, 184, 184, 0.3);
  color: var(--silver);
  transition: border-color 0.2s, color 0.2s;
}

.sidebar-cta-link:hover {
  border-color: var(--white);
  color: var(--white);
}

.sidebar-cta-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}