/**
 * Announce strip — TASK-011101.
 * Mirrors the C10 prototype's .announce CSS so the editable banner
 * (pirt_core_announce_banner block) renders identically to the prototype.
 *
 * Block markup is shipped in pirt_core/templates/pirt-announce-banner.html.twig:
 *   <div class="announce" role="status">
 *     <div class="announce-inner">
 *       <div class="announce-left">
 *         <span class="pulse"></span>
 *         <span>{text}</span>
 *         <a class="announce-link">{link_text}</a>
 *       </div>
 *       <button class="announce-dismiss">×</button>
 *     </div>
 *   </div>
 */

.announce {
  background: var(--sp-secondary-d, #002242);
  color: #fff;
  font-size: 13px;
}

.announce-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 7px 24px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.announce-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
}

.announce-left .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-amber, #f59e0b);
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55);
  animation: pirt-announce-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pirt-announce-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(245, 158, 11, 0);   }
}

.announce-link {
  color: var(--sp-peach, #ffb380);
  text-decoration: underline;
  font-weight: 700;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.announce-link:hover,
.announce-link:focus {
  color: var(--sp-peach-d, #ff9856);
}

/* ----- Right cluster: lang switcher + auth links (per C10 prototype) ----- */

.announce-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.announce .lang {
  display: flex;
  background: rgba(255, 255, 255, 0.10);
  border-radius: 50px;
  padding: 3px;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.announce .lang a {
  padding: 3px 9px;
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  font-weight: 600;
  font-size: 11px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.announce .lang a[aria-pressed="true"] {
  background: #fff;
  color: var(--sp-secondary-d, #002242);
}

.announce .auth {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 5px;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  line-height: 1.3;
}

.announce .auth-login {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.announce .auth-login:hover,
.announce .auth-login:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.40);
}

.announce .auth-register {
  background: var(--sp-peach, #ffb380);
  color: var(--sp-secondary-d, #002242);
}

.announce .auth-register:hover,
.announce .auth-register:focus {
  background: var(--sp-peach-d, #ff9856);
}

/* Logged-in: My Account + log-out icon. My Account uses the same outline
   look as Log in (so the strip stays balanced) and the logout button is
   a small ⏻ glyph next to it. */
.announce .auth-myaccount {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.announce .auth-myaccount::before {
  content: "👤";
  font-size: 11px;
  line-height: 1;
}

.announce .auth-myaccount:hover,
.announce .auth-myaccount:focus {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.40);
}

.announce .auth-logout {
  padding: 5px 10px;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1;
}

.announce .auth-logout:hover,
.announce .auth-logout:focus {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* Staff topbar (admin/manage chrome) — kept neutral. */
.staff-topbar:empty {
  display: none;
}

/* ===== View wrapper transparency =====
   When Drupal Views render inside a `.wg-grid` / `.news-grid` / `.cta-grid`
   etc. container, it wraps rows in `.views-element-container > .js-view-dom-id-*`.
   That breaks CSS grid layout (the wrapper becomes the only grid child).
   Make those wrappers transparent to layout via `display: contents`. */
.wg-grid > .views-element-container,
.wg-grid > .views-element-container > [class*="js-view-dom-id-"],
.news-grid > .views-element-container,
.news-grid > .views-element-container > [class*="js-view-dom-id-"],
.cta-grid > .views-element-container,
.cta-grid > .views-element-container > [class*="js-view-dom-id-"],
.members-bar > .views-element-container,
.members-bar > .views-element-container > [class*="js-view-dom-id-"],
.events-side > .views-element-container,
.events-side > .views-element-container > [class*="js-view-dom-id-"] {
  display: contents;
}

/* ===== Prototype parity overrides for news + members =====
   The legacy skin.css forces .news-card into a horizontal 120px+1fr grid
   and .view-members-track into a card grid. The C10 prototype expects:
   - news-card: vertical (image on top, body below — proto-default.css's flex-column)
   - view-members-track: horizontal flex-wrap chip strip
   Override skin.css's !important by being more specific (body.skin .layout). */

/* skin.css line 388 forces .news-grid > .views-element-container > * to be a
   2-col grid via `!important`. With our display:contents on the wrapper this
   creates a single grid-item that occupies col 1 of .news-grid (col 2 is
   empty — that's the big blank space). Promote the JS-view-dom-id wrapper
   to display:contents too so the 4 .news-card become direct grid items of
   .news-grid (which is 1fr 1fr from proto-default). Higher specificity +
   !important beats skin.css. */
body.skin .news-grid > .views-element-container,
body.skin .news-grid > .views-element-container > [class*="js-view-dom-id-"] {
  display: contents !important;
  grid-template-columns: none !important;
}

body.skin .news-grid .news-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  min-height: 0 !important;
}

body.skin .news-grid .news-card .news-thumb {
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
}

body.skin .news-grid .news-card .news-body {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  justify-content: flex-start !important;
}

/* Members chips — restore horizontal flex-wrap row (prototype `.members-bar`
   layout). Override skin.css's grid-template-columns: repeat(auto-fill, …). */
body.skin .members-bar .view-members-track {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 12px !important;
  grid-template-columns: none !important;
}

body.skin .members-bar .view-members-track > header,
body.skin .members-bar .view-members-track > footer {
  flex-basis: 100% !important;
}

body.skin .members-bar .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--sp-line, #e5e7eb);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sp-secondary-d, #002242);
  letter-spacing: .5px;
  text-decoration: none;
  transition: border-color .2s;
}

body.skin .members-bar .chip:hover {
  border-color: var(--sp-primary, #018081);
}

body.skin .members-bar .chip .dot-tag {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-primary, #018081);
  flex-shrink: 0;
}

body.skin .members-bar .chip .dot-tag.ngo    { background: var(--sp-peach, #ffb380); }
body.skin .members-bar .chip .dot-tag.donor  { background: var(--sp-amber, #f59e0b); }

/* ===== Header prototype parity =====
   Matches C10-prototypes/default/assets/css/site.css `.nav` rules pixel
   for pixel. The current `header.css` + `skin.css` ship a different
   styling (rounded mark + underline-style active link); these overrides
   restore the prototype's flat-pill design. */

/* Logo: drop the rounded teal pill background — prototype has a plain
   inline SVG next to the wordmark. Lockup is `.nav-logo > span > small`. */
body.skin .nav-logo,
body.skin .nav-inner > .nav-logo {
  font-size: 18px !important;
  gap: 12px !important;
}
body.skin .nav-logo .nav-logo__mark {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}
body.skin .nav-logo .nav-logo__mark svg {
  width: 40px !important;
  height: 40px !important;
}
body.skin .nav-logo .site-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px;
  color: var(--sp-secondary-d, #002242) !important;
}
body.skin .nav-logo .site-tagline {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  color: var(--sp-muted, #6b7280) !important;
  margin-top: 2px;
}

/* Nav inner: prototype is 72px not 78px; gap 24px. */
body.skin .nav-inner {
  height: 72px !important;
  gap: 24px !important;
  padding-top: 0 !important;
}

/* Top nav 4px gradient bar (already present, just confirm) */
body.skin .nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--sp-primary, #018081) 0%, var(--sp-secondary, #0054A4) 50%, var(--sp-peach, #ffb380) 100%);
  z-index: 2;
}

/* Menu items: prototype uses 8px 14px padding, 14px font, 500 weight,
   6px radius. Active = teal pill bg + sp-primary text (NO underline). */
body.skin .nav-menu {
  gap: 4px !important;
  margin-left: auto !important;
  flex-wrap: nowrap !important;
}
body.skin .nav-menu a {
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  color: var(--sp-text, #1f3552) !important;
  white-space: nowrap;
  align-self: auto !important;
  transition: background .2s, color .2s;
  position: relative;
}
body.skin .nav-menu > div > nav > a,
body.skin .nav-menu > div > nav > .nav-item > a {
  padding-top: 8px !important;
}
body.skin .nav-menu a:hover,
body.skin .nav-menu a.active,
body.skin .nav-menu a[aria-current="page"] {
  color: var(--sp-primary, #018081) !important;
  background: rgba(1, 128, 129, 0.08) !important;
}
/* Kill the legacy underline-after pseudo-element (prototype uses pill bg
   instead, no underline). */
body.skin .nav-menu a.active::after,
body.skin .nav-menu a[aria-current="page"]::after {
  display: none !important;
  content: none !important;
}

/* Dropdown caret: prototype uses CSS triangle ::after on .nav-item > a.
   Current template emits a literal Unicode `▾` inside `<span class="caret">`.
   Style the existing span to look like prototype's triangle (lower opacity,
   small font) — keep markup as-is. */
body.skin .nav-menu .nav-item.has-dropdown > a .caret {
  display: inline-block;
  font-size: 9px !important;
  opacity: .55;
  margin-left: 4px;
  transition: transform .15s, opacity .15s;
}
body.skin .nav-menu .nav-item.has-dropdown:hover > a .caret,
body.skin .nav-menu .nav-item.has-dropdown:focus-within > a .caret {
  opacity: 1;
  transform: rotate(180deg);
}

/* Dropdown panel — match prototype's white pill (10px radius, 6px padding,
   260px min-width). skin.css already partially does this; tighten. */
body.skin .nav-menu .nav-submenu {
  min-width: 260px !important;
  border-radius: 10px !important;
  padding: 6px !important;
  margin-top: 10px !important;
  box-shadow: 0 12px 32px rgba(0, 34, 66, .12), 0 2px 6px rgba(0, 34, 66, .06) !important;
}
body.skin .nav-menu .nav-submenu a {
  padding: 9px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  line-height: 1.3 !important;
  white-space: nowrap;
}

/* Hide the duplicate "View all members →" button inside the view's footer
   region. The `.chip.more` rendered AFTER the view (by the section template)
   already provides the canonical "View all N members" pill per prototype. */
body.skin .members-bar .members-track__cta {
  display: none !important;
}

/* The view's `<header>` element ('Coalition' tag + 'Our partner organisations'
   heading) already renders inside the section-header above the chips; hide
   the duplicate one inside the view body. */
body.skin .members-bar .view-members-track > header {
  display: none !important;
}

/* Section background — remove the 'arch' bleed if any. The prototype shows
   a flat container; keep .members-bar without weird shapes. */
body.skin .members-bar {
  position: relative;
  overflow: hidden;
}