/* Color tokens roughly inspired by GOV.UK */
:root {
  --black: #0b0c0c;
  --text: #0b0c0c;
  --link: #1d70b8;
  --link-hover: #003078;
  /* --visited: #4c2c92; */
  --focus: #ffdd00;
  --grey-1: #f3f2f1;
  --border: #b1b4b6;
  --muted: #505a5f;
  --button: #00703c;
  --button-hover: #005a30;
}

/* Base */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--grey-1);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { color: var(--link-hover); text-decoration-thickness: 3px; }
a:visited { color: var(--visited); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 0;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

.muted { color: var(--muted); }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: var(--focus);
  color: var(--black);
  padding: 8px 12px;
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  z-index: 1000;
}

/* Header and masthead */
.masthead {
  background: var(--black);
  color: #fff;
}
.masthead .container {
  min-height: 56px;
  display: flex;
  align-items: center;
}

.brand {
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.brand i { font-size: 1.1rem; }

/* Nav toggle (mobile) */
.nav-toggle {
  margin-left: auto;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.nav-toggle:hover { background: rgba(255,255,255,0.12); }

/* ============================
   IMPORTANT: toggle inputs
   (visually hidden but label-clickable)
   ============================ */
#nav-check,
.submenu-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Nav structure */
.site-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: none;
}
#nav-check:checked + .site-nav,
#nav-check:checked ~ .site-nav { display: block; }

.site-nav .container {
  display: flex;
  flex-direction: column;
}

/* Top-level nav items (mobile first) */
.site-nav a,
.site-nav .nav-item {
  color: var(--text);
  text-decoration: none;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.site-nav a:first-child { border-top: 0; }

.site-nav a:hover,
.site-nav .nav-item:hover { text-decoration: underline; color: var(--link-hover); }

.site-nav a.active { font-weight: 700; }

/* Chevrons */
.chev { font-size: 0.85rem; transition: transform .2s ease; }

/* Rotate Manifesto chevron when open (mobile and desktop) */
#manifesto-toggle:checked ~ .site-nav .manifesto-label .chev { transform: rotate(180deg); }

/* Rotate Pride chevron when open (mobile and desktop) */
#pride-toggle:checked ~ .site-nav .pride-label .chev { transform: rotate(180deg); }

/* Desktop/full-width submenu bars (default off, enabled at md+) */
.submenu-bar {
  display: none;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.submenu-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 8px 16px;
}

.submenu-bar a,
.submenu-bar .submenu-link {
  color: var(--text);
  text-decoration: none;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.submenu-bar a:hover,
.submenu-bar .submenu-link:hover { text-decoration: underline; color: var(--link-hover); }

.submenu-bar.sublevel {
  background: #fafafa;
  border-top: 1px solid var(--border);
}

/* Rotate second-level chevrons when a section is active */
#env-toggle:checked     ~ .site-nav .env-label .chev,
#env-toggle:checked     ~ #manifesto-panel .env-label .chev { transform: rotate(180deg); }
#health-toggle:checked  ~ .site-nav .health-label .chev,
#health-toggle:checked  ~ #manifesto-panel .health-label .chev { transform: rotate(180deg); }
#mental-toggle:checked  ~ .site-nav .mental-label .chev,
#mental-toggle:checked  ~ #manifesto-panel .mental-label .chev { transform: rotate(180deg); }
#housing-toggle:checked ~ .site-nav .housing-label .chev,
#housing-toggle:checked ~ #manifesto-panel .housing-label .chev { transform: rotate(180deg); }
#traffic-toggle:checked ~ .site-nav .traffic-label .chev,
#traffic-toggle:checked ~ #manifesto-panel .traffic-label .chev { transform: rotate(180deg); }
#utility-toggle:checked ~ .site-nav .utility-label .chev,
#utility-toggle:checked ~ #manifesto-panel .utility-label .chev { transform: rotate(180deg); }
#policy-toggle:checked  ~ .site-nav .policy-label .chev,
#policy-toggle:checked  ~ #manifesto-panel .policy-label .chev { transform: rotate(180deg); }
#growth-toggle:checked  ~ .site-nav .growth-label .chev,
#growth-toggle:checked  ~ #manifesto-panel .growth-label .chev { transform: rotate(180deg); }
#spending-toggle:checked~ .site-nav .spending-label .chev,
#spending-toggle:checked~ #manifesto-panel .spending-label .chev { transform: rotate(180deg); }

/* Desktop logic */
@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav { display: block; }

  .site-nav .container { flex-direction: row; align-items: center; gap: 24px; }
  .site-nav a, .site-nav .nav-item { border: 0; padding: 14px 0; }

  .site-nav a.active,
  #manifesto-toggle:checked ~ .site-nav .manifesto-label,
  #pride-toggle:checked ~ .site-nav .pride-label {
    border-bottom: 4px solid var(--link);
    padding-bottom: 10px;
  }

  /* Show Manifesto bar when open */
  #manifesto-toggle:checked ~ #manifesto-panel { display: block; }

  /* Show Pride bar when open */
  #pride-toggle:checked ~ #pride-panel { display: block; }

  /* Show exactly one third-level bar (exclusive via radios) */
  #manifesto-toggle:checked ~ #env-toggle:checked      ~ #env-panel      { display: block; }
  #manifesto-toggle:checked ~ #health-toggle:checked   ~ #health-panel   { display: block; }
  #manifesto-toggle:checked ~ #mental-toggle:checked   ~ #mental-panel   { display: block; }
  #manifesto-toggle:checked ~ #housing-toggle:checked  ~ #housing-panel  { display: block; }
  #manifesto-toggle:checked ~ #traffic-toggle:checked  ~ #traffic-panel  { display: block; }
  #manifesto-toggle:checked ~ #utility-toggle:checked  ~ #utility-panel  { display: block; }
  #manifesto-toggle:checked ~ #policy-toggle:checked   ~ #policy-panel   { display: block; }
  #manifesto-toggle:checked ~ #growth-toggle:checked   ~ #growth-panel   { display: block; }
  #manifesto-toggle:checked ~ #spending-toggle:checked ~ #spending-panel { display: block; }

  /* Hide all third bars if Manifesto is closed */
  #manifesto-toggle:not(:checked) ~ #env-panel,
  #manifesto-toggle:not(:checked) ~ #health-panel,
  #manifesto-toggle:not(:checked) ~ #mental-panel,
  #manifesto-toggle:not(:checked) ~ #housing-panel,
  #manifesto-toggle:not(:checked) ~ #traffic-panel,
  #manifesto-toggle:not(:checked) ~ #utility-panel,
  #manifesto-toggle:not(:checked) ~ #policy-panel,
  #manifesto-toggle:not(:checked) ~ #growth-panel,
  #manifesto-toggle:not(:checked) ~ #spending-panel { display: none; }

  /* Optional: if Pride is open, hide Manifesto bars even if manifesto-toggle is still checked */
  #pride-toggle:checked ~ #manifesto-panel { display: none; }
  #pride-toggle:checked ~ .submenu-bar.sublevel { display: none; }
}

/* Mobile stacked submenus (appear inside the nav after items) */
.submenu-mobile { display: none; }

/* Third-level mobile groups default hidden */
.third-mobile { display: none; }

/* Mobile submenu items mimic top-level lines */
.submenu-mobile a,
.submenu-mobile .submenu-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

/* Mobile indentation */
@media (max-width: 767.98px) {
  .site-nav .submenu-mobile { margin-left: 12px; padding-left: 12px; border-left: 4px solid var(--border); }
  .site-nav .third-mobile   { margin-left: 24px; padding-left: 12px; border-left: 4px solid var(--border); }

  /* Hide desktop bars */
  #manifesto-panel,
  #pride-panel,
  #env-panel, #health-panel, #mental-panel, #housing-panel, #traffic-panel,
  #utility-panel, #policy-panel, #growth-panel, #spending-panel { display: none !important; }

  /* Show Manifesto submenu when nav + Manifesto are open (ONLY the submenu after the Manifesto label) */
  #nav-check:checked ~ #manifesto-toggle:checked ~ .site-nav .manifesto-label + .submenu-mobile { display: block; }

  /* Show Pride submenu when nav + Pride are open (ONLY the submenu after the Pride label) */
  #nav-check:checked ~ #pride-toggle:checked ~ .site-nav .pride-label + .submenu-mobile { display: block; }

  /* Show exactly one third-level mobile group (exclusive via radios) */
  #nav-check:checked ~ #manifesto-toggle:checked ~ #env-toggle:checked      ~ .site-nav .submenu-mobile .env-mobile      { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #health-toggle:checked   ~ .site-nav .submenu-mobile .health-mobile   { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #mental-toggle:checked   ~ .site-nav .submenu-mobile .mental-mobile   { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #housing-toggle:checked  ~ .site-nav .submenu-mobile .housing-mobile  { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #traffic-toggle:checked  ~ .site-nav .submenu-mobile .traffic-mobile  { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #utility-toggle:checked  ~ .site-nav .submenu-mobile .utility-mobile  { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #policy-toggle:checked   ~ .site-nav .submenu-mobile .policy-mobile   { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #growth-toggle:checked   ~ .site-nav .submenu-mobile .growth-mobile   { display: block; }
  #nav-check:checked ~ #manifesto-toggle:checked ~ #spending-toggle:checked ~ .site-nav .submenu-mobile .spending-mobile { display: block; }

  /* Active Manifesto cue */
  #manifesto-toggle:checked ~ .site-nav .manifesto-label {
    font-weight: 700;
    border-left: 4px solid var(--link);
    padding-left: 12px;
  }

  /* Active Pride cue */
  #pride-toggle:checked ~ .site-nav .pride-label {
    font-weight: 700;
    border-left: 4px solid var(--link);
    padding-left: 12px;
  }
}

/* SECOND-LEVEL TOGGLE PAIRS: ensure only one label is visible at a time */
/* Default: hide the "close" label. Use !important so generic display rules don't override. */
.submenu-togglepair .close { display: none !important; }

/* When a section radio is active: hide its "open" and show its "close" (desktop and mobile) */
#env-toggle:checked      ~ .site-nav .env-pair .open,
#env-toggle:checked      ~ #manifesto-panel .env-pair .open { display: none !important; }
#env-toggle:checked      ~ .site-nav .env-pair .close,
#env-toggle:checked      ~ #manifesto-panel .env-pair .close { display: inline-flex !important; }

#health-toggle:checked   ~ .site-nav .health-pair .open,
#health-toggle:checked   ~ #manifesto-panel .health-pair .open { display: none !important; }
#health-toggle:checked   ~ .site-nav .health-pair .close,
#health-toggle:checked   ~ #manifesto-panel .health-pair .close { display: inline-flex !important; }

#mental-toggle:checked   ~ .site-nav .mental-pair .open,
#mental-toggle:checked   ~ #manifesto-panel .mental-pair .open { display: none !important; }
#mental-toggle:checked   ~ .site-nav .mental-pair .close,
#mental-toggle:checked   ~ #manifesto-panel .mental-pair .close { display: inline-flex !important; }

#housing-toggle:checked  ~ .site-nav .housing-pair .open,
#housing-toggle:checked  ~ #manifesto-panel .housing-pair .open { display: none !important; }
#housing-toggle:checked  ~ .site-nav .housing-pair .close,
#housing-toggle:checked  ~ #manifesto-panel .housing-pair .close { display: inline-flex !important; }

#traffic-toggle:checked  ~ .site-nav .traffic-pair .open,
#traffic-toggle:checked  ~ #manifesto-panel .traffic-pair .open { display: none !important; }
#traffic-toggle:checked  ~ .site-nav .traffic-pair .close,
#traffic-toggle:checked  ~ #manifesto-panel .traffic-pair .close { display: inline-flex !important; }

#utility-toggle:checked  ~ .site-nav .utility-pair .open,
#utility-toggle:checked  ~ #manifesto-panel .utility-pair .open { display: none !important; }
#utility-toggle:checked  ~ .site-nav .utility-pair .close,
#utility-toggle:checked  ~ #manifesto-panel .utility-pair .close { display: inline-flex !important; }

#policy-toggle:checked   ~ .site-nav .policy-pair .open,
#policy-toggle:checked   ~ #manifesto-panel .policy-pair .open { display: none !important; }
#policy-toggle:checked   ~ .site-nav .policy-pair .close,
#policy-toggle:checked   ~ #manifesto-panel .policy-pair .close { display: inline-flex !important; }

#growth-toggle:checked   ~ .site-nav .growth-pair .open,
#growth-toggle:checked   ~ #manifesto-panel .growth-pair .open { display: none !important; }
#growth-toggle:checked   ~ .site-nav .growth-pair .close,
#growth-toggle:checked   ~ #manifesto-panel .growth-pair .close { display: inline-flex !important; }

#spending-toggle:checked ~ .site-nav .spending-pair .open,
#spending-toggle:checked ~ #manifesto-panel .spending-pair .open { display: none !important; }
#spending-toggle:checked ~ .site-nav .spending-pair .close,
#spending-toggle:checked ~ #manifesto-panel .spending-pair .close { display: inline-flex !important; }

/* Main and panel */
.main { padding: 24px 0 48px; }

.panel {
  background: #fff;
  border: 1px solid var(--border);
  padding: 24px;
}

h1 {
  font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.25rem);
  line-height: 1.2;
  margin: 0 0 12px;
}

.subtitle { margin: 0 0 24px; color: var(--muted); }

/* Speech bubbles */
.bubbles {
  margin: 24px 0;
}
@media (min-width: 640px) {
  /* .bubbles { grid-template-columns: 1fr 1fr; align-items: start; } */
}

.speech {
  position: relative;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 32px;
}
.speech p { margin: 0; }

/* Pride in Place Calendar */
.speech.scheduled {
  background-color: #c1d977;
}
.speech.previous {
  background-color: #d7dff2;
}

/* Left tail */
.speech.left {
  background-color: #c1d977;
  margin-right: 32px;
}

/* Left tail */
.speech.left::before,
.speech.left::after {
  content: "";
  position: absolute;
  left: 16px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.speech.left::before {
  bottom: -20px;
  border-top: 10px solid var(--border);
}
.speech.left::after {
  bottom: -18px;
  border-top: 10px solid #fff;
}

/* Right tail */
.speech.right {
  background-color: #d7dff2;
  margin-left: 32px;
}

/* Right tail */
.speech.right::before,
.speech.right::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.speech.right::before {
  bottom: -20px;
  border-top: 10px solid var(--border);
}
.speech.right::after {
  bottom: -18px;
  border-top: 10px solid #fff;
}

/* Forms */
.form-group label {
  display: block;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 6px;
}
.input {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  padding: 10px;
  background: #fff;
}

/* Buttons */
.button {
  appearance: none;
  border: 0;
  background: var(--button);
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.button:hover { background: var(--button-hover); }

/* Footer */
.footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 24px 0;
}
.footer .container p { margin: 0 0 8px; }

.manifesto-img {
  width: 100%;
}