/*
 * Les règles d'avant la refonte (l'ancien style.css), chargées en premier.
 * Beaucoup sont repeintes par jetons.css et socle.css, ou recouvertes par les
 * feuilles de pages et d'extensions. On les absorbe au fil de l'eau : une
 * règle qui déménage vers un fichier nommé quitte celui-ci.
 */
:root {
  --bg: #f4f7fb;
  --bg-soft: #e7eef6;
  --panel: #ffffff;
  --panel-strong: #d4dde9;
  --accent: #1c4a7a;
  --accent-2: #2d74a5;
  --accent-3: #3fa6bf;
  --accent-4: #61c7b5;
  --accent-5: #d8e3bf;
  --accent-6: #f0e6c9;
  --accent-rgb: 28, 74, 122;
  --accent-2-rgb: 45, 116, 165;
  --accent-3-rgb: 63, 166, 191;
  --accent-4-rgb: 97, 199, 181;
  --accent-5-rgb: 216, 227, 191;
  --accent-6-rgb: 240, 230, 201;
  --text: #1a2433;
  --muted: #516278;
  --card-radius: 12px;
  --shadow: 0 8px 18px rgba(16, 32, 53, 0.08);
  --max-width: 1160px;
  /* Column width for the article single view. Set to the full page measure so
     posts sit on exactly the same column as the standard content pages, which
     is the look the club settled on. The prev/next nav reads this same token
     (extensions/cnpr-instagram.css), so it follows automatically.
     The Instagram single view keeps its own narrower column: it is a different
     kind of content (short caption under a square visual), not long-form. */
  --article-width: var(--max-width);
}

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

body {
  margin: 0;
  font-family: "Source Sans 3", "Source Serif 4", sans-serif;
  background: linear-gradient(
    180deg,
    rgba(var(--accent-3-rgb), 0.16) 0%,
    rgba(var(--accent-5-rgb), 0.2) 38%,
    rgba(var(--accent-6-rgb), 0.18) 68%,
    var(--bg) 100%
  );
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
  color: var(--accent-2);
}

.layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

header.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-strong);
  padding: 6px 0;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 14px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text);
  white-space: nowrap;
}

.brand-logo {
  height: 36px;
  width: 36px;
  border-radius: 6px;
  background: var(--panel);
  padding: 6px;
  object-fit: contain;
}

.brand-text {
  font-size: 16px;
}

.menu-toggle {
  display: none;
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--text);
}

nav.primary-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

nav.primary-nav a {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  font-size: 14px;
  line-height: 1.2;
}

nav.primary-nav a:hover,
nav.primary-nav .current-menu-item > a {
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
}

nav.primary-nav .menu > .menu-item-has-children > a {
  padding-right: 18px;
}

nav.primary-nav .menu > .menu-item-has-children > a::after {
  content: "▾";
  margin-left: 6px;
  font-size: 11px;
  color: var(--muted);
}

nav.primary-nav li {
  position: relative;
}

nav.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 10px 12px;
  margin: 0;
  list-style: none;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: 12px;
  box-shadow: var(--shadow);
  min-width: 220px;
  width: max-content;
  z-index: 20;
}

nav.primary-nav li:hover > .sub-menu,
nav.primary-nav li:focus-within > .sub-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

nav.primary-nav .sub-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

nav.primary-nav .sub-menu a:hover {
  background: var(--panel-strong);
}

.hero {
  padding: 18px 0 70px;
}

.mobile-menu {
  display: none;
}

.mobile-menu-overlay {
  display: none;
}

body.mobile-menu-open {
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 75%) minmax(0, 25%);
  gap: 28px;
  align-items: stretch;
}

.home .hero {
  padding: 18px 0 18px;
}

.home .hero-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 20px;
}

.home .hero-copy {
  padding: 24px;
}

.home .hero-calendar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home .hero-calendar__meta {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 14px;
}

.home .hero-calendar__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}

.home .hero-calendar__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
}

.home .hero-calendar__meta--closure .hero-calendar__label {
  color: #8a1f1f;
}

.home .hero-calendar__meta--closure .hero-calendar__label::before {
  background: #dc3545;
}

.home .hero-calendar__meta--closure .hero-calendar__period {
  color: #8a1f1f;
}

.home .hero-calendar__period {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.home .hero-calendar__event {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
  max-width: 100%;
  white-space: normal;
}

.home .hero-calendar__event--closure {
  background: rgba(220, 53, 69, 0.15);
  color: #8a1f1f;
}

.home .hero-calendar__event--event {
  background: rgba(var(--accent-2-rgb), 0.15);
  color: var(--accent);
}

.home .hero-calendar__event--info {
  background: rgba(40, 167, 69, 0.18);
  color: #1f6b35;
}

.home .hero-calendar__description {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.home .hero-copy .lead {
  max-width: none;
}

.home .cta-row {
  margin-top: 16px;
}

.home .showcase {
  padding: 16px 0 16px;
}

.home .section-heading {
  margin-bottom: 12px;
}

.home .card-grid,
.home .news-list {
  gap: 14px;
}

.hero-copy {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
}

.hero-grid .quick-nav {
  height: 100%;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--accent-2-rgb), 0.12);
  border: 1px solid rgba(var(--accent-2-rgb), 0.2);
  color: var(--accent);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(32px, 4vw, 48px);
  margin: 16px 0 12px;
  line-height: 1.1;
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

h2,
h3,
h4 {
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

.lead {
  color: var(--muted);
  font-size: 17px;
  max-width: 640px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(var(--accent-2-rgb), 0.2);
}

.btn-secondary {
  background: var(--panel);
  border-color: var(--panel-strong);
  color: var(--text);
}

.btn:hover {
  transform: translateY(-2px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.stat {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  padding: 14px 16px;
  border-radius: 14px;
  text-align: center;
}

.stat strong {
  display: block;
  font-size: 20px;
}

.showcase {
  padding: 40px 0 20px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}

.section-heading h2 {
  margin: 0;
  font-size: 26px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.card {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: var(--card-radius);
  padding: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}

.card-title {
  font-size: 18px;
  margin: 0;
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

.card p {
  color: var(--muted);
  margin: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--muted);
  font-size: 13px;
}

/* Posts listing page. Longhands: the shorthand would wipe .layout's horizontal
   gutters, which is what an inline `padding: 70px 0 40px` used to do here. */
.blog-layout {
  padding-top: 18px;
  padding-bottom: 40px;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.news-list--blog {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

.news-list--full {
  grid-template-columns: 1fr;
  gap: 22px;
}

.news-item {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: var(--card-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-item__media {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-soft);
  /* 16:9, the format of the article visuals (cnpr-visuels): shown whole. */
  aspect-ratio: 16 / 9;
}

.news-item__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-item__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.news-item__cta {
  margin-top: auto;
  align-self: flex-start;
}

.news-list--blog .news-item {
  border-radius: 26px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 32, 54, 0.12);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news-list--blog .news-card__body {
  flex: 1;
}

.news-list--blog .news-card__meta {
  margin-top: auto;
}

.news-card__media {
  display: block;
  background: var(--bg-soft);
  position: relative;
  /* 16:9, the format of the article visuals (cnpr-visuels): shown whole. */
  aspect-ratio: 16 / 9;
}

.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}

.news-card__body {
  padding: 18px 22px 6px;
  display: grid;
  gap: 10px;
}

.news-card__pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-height: 28px;
  align-items: center;
  overflow: hidden;
}

.news-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.news-card__pill--date {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--panel-strong);
}

.news-card__pill--cat {
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-card__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
  font-family: var(--soleil-titre, "Source Serif 4", serif);
}

.news-card__title a {
  color: var(--text);
}

.news-card__excerpt {
  margin: 0;
  color: var(--muted);
}

.news-card__excerpt .news-card__more {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.news-card__excerpt .news-card__more:hover {
  text-decoration: underline;
}

.news-card__meta {
  padding: 0 22px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
}

.news-card__meta a {
  color: var(--text);
  font-weight: 600;
}

/* Blog listing pagination (/actu-du-club/). Scoped to the sibling right after the
   blog list so it does not affect archive/search paginations. */
.news-list--blog + .pagination {
  margin-top: 44px;
  width: 100%;
}

.news-list--blog + .pagination .screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  word-wrap: normal !important;
}

.news-list--blog + .pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.news-list--blog + .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--card-radius);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-list--blog + .pagination a.page-numbers:hover {
  background: rgba(var(--accent-2-rgb), 0.12);
  border-color: rgba(var(--accent-2-rgb), 0.5);
  color: var(--accent);
  text-decoration: none;
}

.news-list--blog + .pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.news-list--blog + .pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--muted);
  pointer-events: none;
}

.news-list--blog + .pagination .prev.page-numbers,
.news-list--blog + .pagination .next.page-numbers {
  padding: 0 18px;
}

.cnpr-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 30, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cnpr-lightbox.is-open {
  opacity: 1;
}

.cnpr-lightbox__content {
  position: relative;
  max-width: min(1100px, 92vw);
  max-height: 90vh;
  transform: translateY(6px) scale(0.98);
  transition: transform 0.2s ease;
}

.cnpr-lightbox.is-open .cnpr-lightbox__content {
  transform: translateY(0) scale(1);
}

.cnpr-lightbox__content img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: block;
}

.cnpr-lightbox__close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.95);
  color: var(--text);
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.news-item .entry-content {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
}

.news-item .entry-content p {
  margin: 0 0 1em;
}

.news-item .entry-content a {
  color: var(--accent);
  font-weight: 600;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.page-content h2,
.page-content h3 {
  margin: 8px 0 6px;
}

/* h4 and below were orphans here: the global ramp only gives them a
   font-family, so they came out at body size, bold, with the browser's default
   1.33em margins stacked on top of this container's 16px flex gap. A sub-title
   ended up looking exactly like the bold sentence under it, and pushed a hole
   between the two. Size them down from h3 and hand them the same tight margins
   as their siblings so the gap stays the container's business. */
.page-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0 0;
  color: var(--accent);
}

.page-content h5,
.page-content h6 {
  font-size: 16px;
  font-weight: 600;
  margin: 8px 0 0;
  color: var(--accent);
}

/* Same orphan story as the headings above: an editor's separator block landed
   here with no rule of its own, so it drew nothing and just ate a slot of the
   container's gap — a hole readers cannot tell apart from a mistake. Give it
   the panel border used everywhere else on the site. */
.page-content hr,
.page-content .wp-block-separator {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--panel-strong);
  margin: 8px 0;
}

.page-content p {
  margin: 0;
}

/* Standard content pages (page.php only, via the .page-standard hook): body
   copy in the ink colour instead of the muted card-preview grey, at the article
   reading size. Width is deliberately left to .layout so these pages keep the
   full page width they have always had. Scoped to .page-standard so the
   listing/search/bureau/calendar templates that share .page-content are
   untouched. */
.page-standard .page-content {
  font-size: 17px;
}

.page-standard .page-content p,
.page-standard .page-content li {
  color: var(--text);
}

.page-content form {
  background: var(--bg);
  border: 1px solid var(--panel-strong);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 14px;
  max-width: 640px;
  margin: 0 auto;
}

.page-content form p {
  margin: 0;
}

.page-content form input[type="text"],
.page-content form input[type="email"],
.page-content form input[type="tel"],
.page-content form input[type="url"],
.page-content form input[type="password"],
.page-content form textarea,
.page-content form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--panel-strong);
  background: #ffffff;
  font-size: 15px;
  color: var(--text);
  box-shadow: 0 10px 20px rgba(var(--accent-3-rgb), 0.08);
}

.page-content form textarea {
  min-height: 120px;
  resize: vertical;
}

.page-content form input:focus,
.page-content form textarea:focus,
.page-content form select:focus {
  outline: none;
  border-color: rgba(var(--accent-2-rgb), 0.5);
  box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb), 0.15);
}

.page-content form input[type="submit"],
.page-content form button,
.page-content form .btn {
  justify-self: start;
  padding: 12px 18px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(var(--accent-2-rgb), 0.25);
}

/* --- MailPoet subscription form (page Inscription Newsletter) ------------
   The block ships its own look as INLINE styles from the MailPoet form
   editor (Montserrat, #0081ff, 15px paddings), and the generic
   ".page-content form" card above then wraps it in a second frame inside
   the article.card. De-card the form so the page card is the only frame,
   and remap the inline palette onto the theme tokens — !important is
   required wherever the value comes from an inline style attribute. */
.page-content form.mailpoet_form {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  display: block;
  max-width: 560px;
}
.page-content .mailpoet_form,
.page-content .mailpoet_form * {
  font-family: inherit !important;
}
.page-content .mailpoet_form h2.mailpoet-heading {
  color: var(--accent) !important;
  font-family: var(--soleil-titre, "Source Serif 4", serif) !important;
  font-size: 22px !important;
  line-height: 1.45 !important;
}
.page-content .mailpoet_form .mailpoet_text,
.page-content .mailpoet_form .mailpoet_textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1px solid var(--panel-strong) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  font-size: 15px !important;
  color: var(--text) !important;
  box-shadow: 0 10px 20px rgba(var(--accent-3-rgb), 0.08) !important;
}
.page-content .mailpoet_form .mailpoet_text:focus,
.page-content .mailpoet_form .mailpoet_textarea:focus {
  outline: none;
  border-color: rgba(var(--accent-2-rgb), 0.5) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb), 0.15) !important;
}
/* Inline border-radius carries !important in the block markup and cannot be
   overridden — the 40px pill happens to match the theme buttons, keep it. */
.page-content .mailpoet_form .mailpoet_submit {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 12px 18px !important;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(var(--accent-2-rgb), 0.25);
  transition: background-color 0.15s ease;
}
.page-content .mailpoet_form .mailpoet_submit:hover {
  background-color: var(--accent-2) !important;
}
.page-content .mailpoet_form .mailpoet_paragraph:last-child p,
.page-content .mailpoet_form p {
  color: var(--muted);
}
.page-content .mailpoet_form a {
  color: var(--accent);
  font-weight: 600;
}

.page-content form input[type="submit"]:hover,
.page-content form button:hover,
.page-content form .btn:hover {
  transform: translateY(-1px);
}

/* Longhands: the shorthand would wipe .layout's horizontal gutters. */
.calendar-page {
  padding-top: 18px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.calendar-hero {
  background: var(--panel);
  border: 1px solid var(--panel-strong);
  border-radius: var(--card-radius);
  padding: 26px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.calendar-hero::after {
  content: "";
  position: absolute;
  top: -70px;
  right: -90px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(var(--accent-4-rgb), 0.2), transparent 70%);
}

.calendar-sections {
  display: grid;
  gap: 24px;
}

@media (max-width: 900px) {
  .home .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .news-card__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}


.article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 16px;
}

.article-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.article-pill--date {
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--panel-strong);
}

.article-pill--cat {
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
}

.news-item time {
  color: var(--muted);
  font-size: 14px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--accent-2-rgb), 0.12);
  color: var(--accent);
  font-weight: 600;
}

footer.site-footer {
  margin-top: 50px;
  padding: 24px 0 30px;
  border-top: 1px solid var(--panel-strong);
  background: var(--bg-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--panel);
}

.social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.footer-links a {
  color: var(--muted);
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--accent);
}

@media (max-width: 860px) {
  .nav-bar {
    align-items: flex-start;
  }

  nav.primary-nav ul {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  nav.primary-nav .sub-menu {
    position: static;
    display: block;
    padding: 6px 0 0 12px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  nav.primary-nav .sub-menu a {
    background: transparent;
    padding: 8px 0;
  }

  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    top: 0;
    right: 0;
    width: 85vw;
    height: 100vh;
    padding: 16px 18px 24px;
    background: var(--panel);
    box-shadow: -12px 0 30px rgba(15, 23, 42, 0.2);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1001;
    overflow-y: auto;
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
  }

  .mobile-menu-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu__close {
    align-self: flex-end;
    border: none;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
  }

  .mobile-menu ul,
  .mobile-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mobile-menu a {
    display: block;
    background: var(--panel);
    padding: 12px;
    border-radius: 12px;
    color: var(--text);
  }

  /* Destination-less parents render as inert headings (CNPR_Walker_Inert_Parents).
     Styled as a group label, not a pale link: no card background, no radius, no
     pointer — nothing that invites a tap. */
  .mobile-menu .menu-heading__label {
    display: block;
    padding: 18px 2px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--panel-strong);
  }

  /* Indent the group under its heading. Top-level rows carry 12px of their own
     padding, so the children need more than that to read as nested rather than
     as siblings sitting further left. */
  .mobile-menu .menu-heading > .sub-menu {
    margin-top: 4px;
    padding-left: 24px;
  }

  .mobile-menu .sub-menu {
    margin-top: 8px;
    padding-left: 16px;
  }

  .mobile-menu .sub-menu a {
    background: transparent;
    padding: 8px 0;
    color: var(--muted);
  }

  .hero {
    padding-top: 60px;
  }
}

/* -------------------------------------------------------------------------
 * Details block (core) — used as a toggle heading on content pages.
 *
 * The default UA rendering is a small triangle beside plain body text, which
 * reads as a bullet list rather than a row of openable headings. These rules
 * give the summary the weight of the h3 it replaced and a chevron that turns
 * on open. No rule between siblings: the chevron and the accent-coloured bold
 * title already say "openable", so hairlines only added noise to a list whose
 * items are one click apart.
 * ---------------------------------------------------------------------- */
.wp-block-details {
  margin: 0;
}

.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none; /* Firefox */
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
}
.wp-block-details > summary::-webkit-details-marker { display: none; }

/* Chevron drawn in CSS: no icon font, no image request. */
.wp-block-details > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-left: 2px;
}
.wp-block-details[open] > summary::before {
  transform: rotate(45deg);
}

.wp-block-details > summary:hover { color: var(--accent-2); }
.wp-block-details > summary:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The panel is indented to the summary's text, so an open block reads as one
   unit rather than as content that escaped its heading. */
.wp-block-details[open] > *:not(summary) {
  margin-left: 18px;
}
.wp-block-details > *:not(summary):last-child { margin-bottom: 18px; }