/* Participation "voice tiles": Community letters and Share ideas stand apart from
   navigation with one warm colour family used nowhere else in the header.
   Loaded last on every page. Text carries the meaning; medallions are decorative. */
:root{
  --voice-letters:#b9482a;        /* terracotta medallion; cream icon ≈ 5:1 */
  --voice-letters-soft:#fff0e5;
  --voice-letters-edge:#c97f60;   /* tile border ≈ 3:1 against the page */
  --voice-letters-text:#7f3319;   /* sub-label ≈ 7.9:1 on the tile */
  --voice-ideas:#efb135;          /* marigold medallion; ink icon ≈ 6.7:1 */
  --voice-ideas-soft:#fff6d8;
  --voice-ideas-edge:#a88420;     /* ≈ 3.4:1 against the page */
  --voice-ideas-text:#654a0c;     /* ≈ 7.6:1 on the tile */
  --voice-cream:#fff8f0;
  --voice-shadow:rgba(150,62,26,.28);
}

.site-header .participation-nav{gap:12px}
.site-header .participation-nav a{
  position:relative;justify-content:flex-start;gap:11px;padding:8px 18px 8px 9px;min-height:60px;border-radius:16px;
  border:1.5px solid var(--voice-letters-edge);--ink:#143936;color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,#fffbf7 0%,var(--voice-letters-soft) 100%);background-color:var(--voice-letters-soft);
  box-shadow:inset 0 1px 0 #fff,0 10px 20px -14px var(--voice-shadow),0 1px 2px rgba(24,55,51,.10);
}
.site-header .participation-nav .nav-contribute{
  border-color:var(--voice-ideas-edge)!important;color:var(--ink);
  background:linear-gradient(180deg,#fffdf5 0%,var(--voice-ideas-soft) 100%);background-color:var(--voice-ideas-soft);
  box-shadow:inset 0 1px 0 #fff,0 10px 20px -14px rgba(150,110,20,.34),0 1px 2px rgba(24,55,51,.10);
}
.site-header .participation-nav .participation-label{font-size:14px;line-height:1.25}
.site-header .participation-nav .participation-label small{font-size:12px;font-weight:700;margin-top:3px;color:var(--voice-letters-text);letter-spacing:0}
.site-header .participation-nav .nav-contribute .participation-label small{color:var(--voice-ideas-text)}

.voice-medallion{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--voice-letters);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 3px 8px -3px var(--voice-shadow)}
.nav-contribute .voice-medallion{background:var(--voice-ideas);box-shadow:inset 0 -2px 0 rgba(0,0,0,.10),0 3px 8px -3px rgba(150,110,20,.45)}
.site-header .participation-nav .voice-icon{width:24px;height:24px;overflow:visible;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav-letters .voice-icon{stroke:var(--voice-cream)}
.nav-letters .v-body{fill:var(--voice-letters)}
.nav-letters .v-sheet{fill:var(--voice-cream);stroke:none}
.nav-letters .v-sheet-lines{stroke:var(--voice-letters);stroke-width:1.3}
.nav-contribute .voice-icon{stroke:var(--ink)}
.nav-contribute .v-glass{fill:transparent}
.nav-contribute .v-rays{opacity:0}

/* Hover, focus and the current page. */
.site-header .participation-nav a:hover{background:linear-gradient(180deg,#fff7f0 0%,#ffe6d6 100%)}
.site-header .participation-nav .nav-contribute:hover{background:linear-gradient(180deg,#fffaea 0%,#ffefbf 100%)}
.site-header .participation-nav a:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.site-header .participation-nav a[aria-current="page"]{text-decoration:none;border-width:2px;border-color:var(--voice-letters);box-shadow:inset 0 -3px 0 var(--voice-letters)}
.site-header .participation-nav .nav-contribute[aria-current="page"]{border-color:#8a6a10!important;box-shadow:inset 0 -3px 0 #8a6a10}
/* A colour change, not movement: the bulb lights on interest. */
.site-header .participation-nav a:hover .v-glass,.site-header .participation-nav a:focus-visible .v-glass{fill:#fff4c2}

@media (prefers-reduced-motion:no-preference){
  .site-header .participation-nav a{transition:transform 180ms cubic-bezier(.2,.8,.2,1),box-shadow 180ms ease,background-color 180ms ease}
  .voice-medallion{transition:transform 220ms cubic-bezier(.2,.8,.2,1)}
  .v-sheet,.v-sheet-lines{transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
  .v-rays{transition:opacity 220ms ease;transform-box:fill-box;transform-origin:center}
  .v-glass{transition:fill 220ms ease}
  @media (hover:hover) and (pointer:fine){
    .site-header .participation-nav a:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 16px 24px -14px var(--voice-shadow),0 2px 4px rgba(24,55,51,.10)}
    .site-header .participation-nav a:hover .voice-medallion{transform:rotate(-6deg) scale(1.06)}
  }
  .site-header .participation-nav a:hover .v-sheet,.site-header .participation-nav a:hover .v-sheet-lines,
  .site-header .participation-nav a:focus-visible .v-sheet,.site-header .participation-nav a:focus-visible .v-sheet-lines{transform:translateY(-6px)}
  .site-header .participation-nav a:hover .v-rays,.site-header .participation-nav a:focus-visible .v-rays{opacity:1}
  .site-header .participation-nav a:focus-visible .voice-medallion{transform:rotate(-6deg) scale(1.06)}
  .site-header .participation-nav a:active{transform:translateY(1px);transition-duration:80ms}
  /* One cue on the first page of a visit (voice.js). Only the icons move; hit areas stay still. */
  .voice-cue .nav-letters:not([aria-current]) .v-sheet,
  .voice-cue .nav-letters:not([aria-current]) .v-sheet-lines{animation:voice-peek 1100ms 1500ms cubic-bezier(.3,.7,.2,1) both}
  .voice-cue .nav-contribute:not([aria-current]) .v-rays{animation:voice-rays 1000ms 2000ms ease-out both}
  .voice-cue .nav-contribute:not([aria-current]) .v-glass{animation:voice-glow 1000ms 2000ms ease-out both}
  @keyframes voice-peek{0%,100%{transform:translateY(0)}35%,65%{transform:translateY(-6px)}}
  @keyframes voice-rays{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
  @keyframes voice-glow{0%,100%{fill:transparent}40%{fill:#fff4c2}}
}

/* Tight desktop range: keep the explore links on one row at 1101px. */
@media (min-width:1101px) and (max-width:1250px){
  .site-header .participation-nav{gap:6px}
  .site-header .participation-nav a{padding:7px 10px 7px 6px;gap:7px}
  .voice-medallion{width:34px;height:34px}
  .site-header .participation-nav .voice-icon{width:21px;height:21px}
  .site-header .participation-nav .participation-label{font-size:13px}
  .site-header .participation-nav .participation-label small{font-size:11px}
}
@media (max-width:700px){
  .site-header .participation-nav{gap:10px}
  .site-header .participation-nav a{flex:1 1 0;min-width:0;padding:9px 10px 9px 8px;gap:9px;min-height:64px;white-space:normal}
  .site-header .participation-nav .participation-label{min-width:0}
  .voice-medallion{width:38px;height:38px}
  .site-header .participation-nav .voice-icon{width:23px;height:23px}
}
/* Phones: keep both participation routes exposed without a decorative extra row. */
@media (max-width:430px){
  .site-header .participation-nav{gap:8px}
  .site-header .participation-nav a{align-items:center;justify-content:flex-start;gap:0;padding:8px 10px;min-height:52px}
  .site-header .voice-medallion{display:none}
  .site-header .participation-nav .voice-icon{width:20px;height:20px}
  .site-header .participation-nav .participation-label{font-size:14.5px}
  .site-header .participation-nav .participation-label small{font-size:12.5px;margin-top:2px}
}
@media (max-width:370px){
  .site-header .participation-nav a{padding:8px}
  .site-header .participation-nav .participation-label{font-size:13.5px}
  .site-header .participation-nav .participation-label small{font-size:11.5px;letter-spacing:-.01em}
}
@media (forced-colors:active){
  .site-header .participation-nav a{border:2px solid LinkText}
  .site-header .participation-nav a[aria-current="page"]{border-width:4px}
  .site-header .participation-nav a[aria-current="page"] .participation-label{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
  .voice-medallion{background:Canvas;border:1px solid CanvasText;box-shadow:none}
  .voice-icon *{stroke:CanvasText!important}
  .v-body,.v-sheet{fill:Canvas!important}
}
@media print{.voice-medallion{display:none}}

/* A quieter frame keeps labels and actions in the foreground. */
.site-header .participation-nav a,
.site-header .participation-nav .nav-contribute{border-radius:8px;box-shadow:none;background-image:none}
.site-header .participation-nav a:hover,
.site-header .participation-nav .nav-contribute:hover{box-shadow:none}