/* ---------------------------------------------------------------------------
 * CIC — premium interaction layer.
 *
 * Loaded last so it can supersede the earlier interaction rules without
 * rewriting them. It owns surfaces, states and motion only: no layout
 * authority, no business rule, no colour that is not derived from a brand or
 * mode token. Alpha is produced with color-mix() from those same tokens, each
 * time preceded by an opaque fallback for engines without it.
 * ------------------------------------------------------------------------- */

:root {
  /* Motion. Short, decisive, one easing family. */
  --cic-ease-out: cubic-bezier(.22, .61, .36, 1);
  --cic-motion-nav: 180ms;
  --cic-motion-card: 220ms;
  --cic-motion-media: 260ms;
  --cic-motion-press: 120ms;
  --cic-motion-menu: 220ms;
  --cic-motion-mode: 200ms;

  /* Glass. Blur stays inside the 18–28px band; alpha differs per mode. */
  --cic-glass-blur: 22px;
  --cic-glass-surface: color-mix(in srgb, var(--cic-color-surface) 78%, transparent);
  --cic-glass-raised: color-mix(in srgb, var(--cic-color-surface) 88%, transparent);
  --cic-glass-border: color-mix(in srgb, var(--wp--custom--cic--brand--navy) 14%, transparent);
  --cic-glass-shadow: 0 1px 2px color-mix(in srgb, var(--wp--custom--cic--brand--navy) 5%, transparent),
    0 12px 32px -20px color-mix(in srgb, var(--wp--custom--cic--brand--navy) 30%, transparent);
  --cic-tint-navy: color-mix(in srgb, var(--wp--custom--cic--brand--navy) 7%, transparent);
  --cic-tint-navy-strong: color-mix(in srgb, var(--wp--custom--cic--brand--navy) 11%, transparent);
  --cic-lift: -4px;
}

/* Dark keeps the same geometry on a much lower alpha, and never turns black. */
:root[data-theme='dark'] {
  --cic-glass-surface: color-mix(in srgb, var(--cic-color-surface) 55%, transparent);
  --cic-glass-raised: color-mix(in srgb, var(--cic-color-elevated) 62%, transparent);
  --cic-glass-border: color-mix(in srgb, var(--cic-color-border) 16%, transparent);
  --cic-glass-shadow: 0 1px 2px rgb(0 0 0 / 22%), 0 14px 34px -22px rgb(0 0 0 / 55%);
  --cic-tint-navy: color-mix(in srgb, var(--cic-color-action-primary) 12%, transparent);
  --cic-tint-navy-strong: color-mix(in srgb, var(--cic-color-action-primary) 18%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --cic-glass-surface: color-mix(in srgb, var(--cic-color-surface) 55%, transparent);
    --cic-glass-raised: color-mix(in srgb, var(--cic-color-elevated) 62%, transparent);
    --cic-glass-border: color-mix(in srgb, var(--cic-color-border) 16%, transparent);
    --cic-glass-shadow: 0 1px 2px rgb(0 0 0 / 22%), 0 14px 34px -22px rgb(0 0 0 / 55%);
    --cic-tint-navy: color-mix(in srgb, var(--cic-color-action-primary) 12%, transparent);
    --cic-tint-navy-strong: color-mix(in srgb, var(--cic-color-action-primary) 18%, transparent);
  }
}

/* A single recipe, so every glass surface in the site is the same material. */
.cic-glass {
  background: var(--cic-color-surface);
  background: var(--cic-glass-surface);
  border: 1px solid var(--cic-color-border);
  border-color: var(--cic-glass-border);
  box-shadow: var(--cic-glass-shadow);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cic-glass {
    -webkit-backdrop-filter: blur(var(--cic-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--cic-glass-blur)) saturate(140%);
  }
}

/* Accessible-only text: the same technique the skip link already uses. */
.cic-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------------- */

.wp-site-blocks > header {
  position: relative;
  z-index: 20;
}

.cic-home-header {
  position: relative;
  padding-block: .875rem;
}

/* The glass plate sits behind the header content, inset from the page edge. */
.cic-home-header::before {
  content: "";
  position: absolute;
  inset: .25rem -1.25rem;
  border-radius: var(--wp--custom--cic--home--radius);
  background: var(--cic-glass-surface);
  border: 1px solid var(--cic-glass-border);
  box-shadow: var(--cic-glass-shadow);
  pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cic-home-header::before {
    -webkit-backdrop-filter: blur(var(--cic-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--cic-glass-blur)) saturate(140%);
  }
}

.cic-home-header > * {
  position: relative;
}

.cic-home-header .cic-brand {
  letter-spacing: -.01em;
}

/* The mode control reads as a control, not as body text. */
.cic-home-header .cic-color-mode {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem .25rem .75rem;
  border-radius: 999px;
  background: var(--cic-color-surface);
  background: var(--cic-glass-raised);
  border: 1px solid var(--cic-glass-border);
}

.cic-home-header .cic-color-mode select {
  min-block-size: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .875rem;
  padding-inline: .25rem;
}

/* ---------------------------------------------------------------------------
 * Navigation — one state per situation, never two lines at once.
 * ------------------------------------------------------------------------- */

/* Retire the earlier treatments: the underline and the scaling rule together
   read as a double line, which is what this pass removes. */
.cic-nav-links a:hover,
.cic-nav-links a[aria-current="page"] {
  text-decoration: none;
}

.cic-nav-links .cic-nav-link > span::after {
  content: none;
}

.cic-navigation-wide .cic-nav-links {
  column-gap: .25rem;
}

/* The primary navigation reads in capitals, as CIC asked, native menu included. Only the
   presentation changes: each link keeps its natural wording as its name, so assistive technology
   announces « À propos », not capitals. The tracking and the smaller size keep seven capitalised
   entries on one line from 64rem. */
.cic-home-header .cic-nav-links a {
  font-size: .875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cic-nav-links .cic-nav-link {
  padding-inline: .6875rem;
  border-radius: 999px;
  color: var(--cic-color-text-secondary);
  background: transparent;
  transition:
    background-color var(--cic-motion-nav) var(--cic-ease-out),
    color var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-nav-links .cic-nav-link > span {
  padding-block-end: 0;
}

/* Hover and keyboard travel share one quiet navy surface. */
.cic-nav-links .cic-nav-link:hover,
.cic-nav-links .cic-nav-link:focus-visible {
  color: var(--cic-color-text-primary);
  background: var(--cic-tint-navy);
  text-decoration: none;
}

.cic-nav-links .cic-nav-link:focus-visible {
  outline: 2px solid var(--cic-color-focus);
  outline-offset: 2px;
}

/* Current page: a held glass pill plus one burgundy identity mark. The mark is
   a bracket stem, not an underline, so it cannot be confused with hover. */
.cic-nav-links .cic-nav-link[aria-current="page"] {
  position: relative;
  color: var(--cic-color-text-primary);
  font-weight: 600;
  background: var(--cic-color-elevated);
  background: var(--cic-glass-raised);
  border: 1px solid var(--cic-glass-border);
  padding-inline: .625rem;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cic-nav-links .cic-nav-link[aria-current="page"] {
    -webkit-backdrop-filter: blur(var(--cic-glass-blur));
    backdrop-filter: blur(var(--cic-glass-blur));
  }
}

.cic-nav-links .cic-nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: .5rem;
  inset-inline-start: -1px;
  inline-size: var(--cic-rule);
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
  background: var(--cic-color-accent);
}

.cic-nav-links .cic-nav-link[aria-current="page"]:hover {
  background: var(--cic-tint-navy-strong);
}

/* The footer repeats the context without repeating the pill. */
.cic-home-footer .cic-nav-links .cic-nav-link[aria-current="page"] {
  background: transparent;
  border-color: transparent;
  padding-inline: .6875rem;
}

.cic-home-footer .cic-nav-links .cic-nav-link[aria-current="page"]::before {
  inset-block: .625rem;
  inset-inline-start: 0;
}

/*
 * Footer targets join the rest of the system at 44px. Only the hit area grows:
 * the type size, the two-column rhythm and the active mark are untouched, and
 * the row gap gives back what the taller row takes, so the footer keeps its
 * composition instead of inflating.
 */
.cic-home-footer .cic-nav-links {
  row-gap: 0;
}

.cic-home-footer .cic-nav-links .cic-nav-link {
  min-block-size: 2.75rem;
}

/* ---------------------------------------------------------------------------
 * Mobile navigation — a designed panel, not an exposed list.
 * ------------------------------------------------------------------------- */

.cic-navigation:not(.cic-navigation-wide) > summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  inline-size: fit-content;
  min-block-size: 2.75rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--cic-color-surface);
  background: var(--cic-glass-raised);
  border: 1px solid var(--cic-glass-border);
  font-weight: 600;
  list-style: none;
  transition: background-color var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-navigation:not(.cic-navigation-wide) > summary::-webkit-details-marker {
  display: none;
}

/* The chevron carries open/closed, so state is never colour alone. */
.cic-navigation:not(.cic-navigation-wide) > summary::after {
  content: "";
  inline-size: .5rem;
  block-size: .5rem;
  border-inline-end: var(--cic-rule) solid var(--cic-color-action-primary);
  border-block-end: var(--cic-rule) solid var(--cic-color-action-primary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--cic-motion-menu) var(--cic-ease-out);
}

.cic-navigation:not(.cic-navigation-wide)[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.cic-navigation:not(.cic-navigation-wide) > summary:focus-visible {
  outline: 2px solid var(--cic-color-focus);
  outline-offset: 2px;
}

.cic-navigation:not(.cic-navigation-wide)[open] > .cic-nav-links {
  display: grid;
  gap: .125rem;
  margin-block-start: .75rem;
  padding: .625rem;
  border-radius: var(--wp--custom--cic--home--radius);
  background: var(--cic-color-surface);
  background: var(--cic-glass-surface);
  border: 1px solid var(--cic-glass-border);
  box-shadow: var(--cic-glass-shadow);
  animation: cic-menu-in var(--cic-motion-menu) var(--cic-ease-out) both;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cic-navigation:not(.cic-navigation-wide)[open] > .cic-nav-links {
    -webkit-backdrop-filter: blur(var(--cic-glass-blur)) saturate(140%);
    backdrop-filter: blur(var(--cic-glass-blur)) saturate(140%);
  }
}

@keyframes cic-menu-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Full-width rows with comfortable targets, not a cramped inline list. */
.cic-navigation:not(.cic-navigation-wide) .cic-nav-links .cic-nav-link {
  justify-content: flex-start;
  min-block-size: 2.875rem;
  padding-inline: .875rem;
  border-radius: calc(var(--wp--custom--cic--home--radius) - 2px);
}

/* ---------------------------------------------------------------------------
 * Actions — the commercial intent leads, the channel follows.
 * ------------------------------------------------------------------------- */

.cic-action,
.wp-element-button,
.wp-block-button__link {
  transition:
    background-color var(--cic-motion-nav) var(--cic-ease-out),
    border-color var(--cic-motion-nav) var(--cic-ease-out),
    color var(--cic-motion-nav) var(--cic-ease-out),
    box-shadow var(--cic-motion-nav) var(--cic-ease-out),
    transform var(--cic-motion-press) var(--cic-ease-out);
}

.cic-action:active,
.wp-element-button:active,
.wp-block-button__link:active {
  transform: scale(.98);
}

.cic-action:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--cic-color-focus);
  outline-offset: 2px;
}

/* Primary: a tonal lift and a little elevation, never a colour change. */
.cic-action:not(.cic-secondary-action):not(.cic-whatsapp-action):hover,
.cic-home .wp-block-button:not(.cic-secondary) .wp-block-button__link:hover {
  box-shadow: 0 2px 4px color-mix(in srgb, var(--wp--custom--cic--brand--navy) 18%, transparent),
    0 10px 24px -14px color-mix(in srgb, var(--wp--custom--cic--brand--navy) 45%, transparent);
  filter: brightness(1.08);
}

/* Secondary: outline on glass, clearly below the primary. */
.cic-home .cic-secondary .wp-block-button__link,
.cic-detail-actions .cic-secondary-action:not(.cic-whatsapp-action) {
  background: var(--cic-color-surface);
  background: var(--cic-glass-raised);
  border: 1px solid var(--cic-glass-border);
  color: var(--cic-color-text-primary);
}

.cic-home .cic-secondary .wp-block-button__link:hover {
  border-color: var(--cic-color-action-primary);
  background: var(--cic-tint-navy);
}

/* ---------------------------------------------------------------------------
 * WhatsApp — a recognisable channel, still secondary to the project CTA.
 * Green identifies the channel and nothing else: it never fills the button.
 * ------------------------------------------------------------------------- */

.cic-whatsapp-action {
  --cic-whatsapp: #25d366;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-block-size: 3rem;
  padding: .75rem 1rem;
  border-radius: var(--wp--custom--cic--home--radius);
  background: var(--cic-color-surface);
  background: var(--cic-glass-raised);
  border: 1px solid var(--cic-glass-border);
  color: var(--cic-color-text-primary);
  font-weight: 600;
  text-decoration: none;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .cic-whatsapp-action {
    -webkit-backdrop-filter: blur(var(--cic-glass-blur));
    backdrop-filter: blur(var(--cic-glass-blur));
  }
}

.cic-whatsapp-action .cic-whatsapp-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  flex: none;
  fill: var(--cic-whatsapp);
  transition: transform var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-whatsapp-action .cic-external {
  margin-inline-start: .125rem;
  font-size: .875em;
  color: var(--cic-color-text-secondary);
  transition: transform var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-whatsapp-action:hover {
  border-color: color-mix(in srgb, var(--cic-whatsapp) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cic-whatsapp) 22%, transparent),
    0 10px 26px -18px color-mix(in srgb, var(--cic-whatsapp) 60%, transparent);
  text-decoration: none;
}

.cic-whatsapp-action:hover .cic-external {
  transform: translate(2px, -2px);
}

.cic-whatsapp-action:focus-visible {
  outline: 3px solid var(--cic-color-focus);
  outline-offset: 2px;
}

.cic-whatsapp-action:active {
  transform: scale(.98);
}

/* ---------------------------------------------------------------------------
 * Section markers — an asymmetric CIC pair, not a repeated single stroke.
 * ------------------------------------------------------------------------- */

.cic-home-section > .cic-home-container > h2,
.cic-detail-section > h2 {
  position: relative;
  padding-block-start: 1.125rem;
}

.cic-home-section > .cic-home-container > h2::before,
.cic-detail-section > h2::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 2rem;
  block-size: var(--cic-rule);
  background: var(--cic-color-accent);
}

/* The navy companion is shorter and offset: a mark, not a second underline. */
.cic-home-section > .cic-home-container > h2::after,
.cic-detail-section > h2::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 2.375rem;
  inline-size: .625rem;
  block-size: var(--cic-rule);
  background: var(--cic-color-action-primary);
  opacity: .55;
}

/* ---------------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------------- */

.cic-home-card,
.cic-content-card {
  transition:
    border-color var(--cic-motion-card) var(--cic-ease-out),
    transform var(--cic-motion-card) var(--cic-ease-out),
    box-shadow var(--cic-motion-card) var(--cic-ease-out);
}

.cic-home-card:hover,
.cic-content-card:hover,
.cic-home-card:focus-within,
.cic-content-card:focus-within {
  transform: translateY(var(--cic-lift));
  box-shadow: 0 2px 4px color-mix(in srgb, var(--wp--custom--cic--brand--navy) 6%, transparent),
    0 18px 38px -22px color-mix(in srgb, var(--wp--custom--cic--brand--navy) 38%, transparent);
}

.cic-home-card:active,
.cic-content-card:active {
  transform: translateY(-1px);
  transition-duration: var(--cic-motion-press);
}

.cic-home-card .cic-card-media img,
.cic-content-card .cic-card-media img {
  transition: transform var(--cic-motion-media) var(--cic-ease-out);
}

.cic-home-card:hover .cic-card-media img,
.cic-content-card:hover .cic-card-media img,
.cic-home-card:focus-within .cic-card-media img,
.cic-content-card:focus-within .cic-card-media img {
  transform: scale(1.035);
}

/* The title answers too, with a mark that is not a colour change alone. */
.cic-home-card :where(h2, h3) a::after,
.cic-content-card :where(h2, h3) a::after {
  content: "\2192";
  display: inline-block;
  margin-inline-start: .375rem;
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity var(--cic-motion-card) var(--cic-ease-out),
    transform var(--cic-motion-card) var(--cic-ease-out);
}

.cic-home-card:hover :where(h2, h3) a::after,
.cic-content-card:hover :where(h2, h3) a::after,
.cic-home-card:focus-within :where(h2, h3) a::after,
.cic-content-card:focus-within :where(h2, h3) a::after {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
 * Hero — a pointer-reactive technical surface, bounded to a few pixels.
 * ------------------------------------------------------------------------- */

.cic-home-section#cic-hero .cic-media-frame,
.cic-home-section#cic-hero .cic-image-placeholder {
  --cic-pointer-x: 0;
  --cic-pointer-y: 0;
  overflow: hidden;
}

.cic-home-section#cic-hero .cic-media-frame:not(:has(img)) {
  background-position: calc(var(--cic-pointer-x) * 6px) calc(var(--cic-pointer-y) * 6px);
  transition: background-position var(--cic-motion-media) var(--cic-ease-out);
}

/* Both brackets drift with the pointer, by a few pixels and in opposition. */
.cic-home-section#cic-hero .cic-media-frame:not(:has(img))::before {
  transform: translate(calc(var(--cic-pointer-x) * 4px), calc(var(--cic-pointer-y) * 4px));
  transition: transform var(--cic-motion-media) var(--cic-ease-out);
}

.cic-home-section#cic-hero .cic-media-frame:not(:has(img))::after {
  transform: translate(calc(var(--cic-pointer-x) * -4px), calc(var(--cic-pointer-y) * -4px));
  transition: transform var(--cic-motion-media) var(--cic-ease-out);
}

/* A real photograph dominates; it moves less than the decoration ever did. */
.cic-home-section#cic-hero .cic-image-placeholder .wp-block-image img {
  transition: transform var(--cic-motion-media) var(--cic-ease-out);
}

.cic-home-section#cic-hero .cic-image-placeholder:hover .wp-block-image img {
  transform: scale(1.02);
}

/* The eyebrow bracket answers the pointer as well, at the same small scale. */
.cic-home-section#cic-hero .cic-eyebrow::before {
  transition: transform var(--cic-motion-media) var(--cic-ease-out);
}

/* ---------------------------------------------------------------------------
 * Section transitions — rhythm instead of decorative separators.
 * ------------------------------------------------------------------------- */

.cic-home-elevated {
  position: relative;
}

/* One hairline where two bands meet, drawn from the band itself. */
.cic-home-elevated::before,
.cic-home-elevated::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--cic-glass-border) 18%, var(--cic-glass-border) 82%, transparent);
  pointer-events: none;
}

.cic-home-elevated::before { inset-block-start: 0; }
.cic-home-elevated::after { inset-block-end: 0; }

/* ---------------------------------------------------------------------------
 * Mode change and page transitions
 * ------------------------------------------------------------------------- */

body {
  transition:
    background-color var(--cic-motion-mode) var(--cic-ease-out),
    color var(--cic-motion-mode) var(--cic-ease-out);
}

/* Progressive enhancement only: engines without it navigate exactly as before. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: cic-page-out 150ms var(--cic-ease-out) both;
}

::view-transition-new(root) {
  animation: cic-page-in 200ms var(--cic-ease-out) both;
}

@keyframes cic-page-out {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes cic-page-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ---------------------------------------------------------------------------
 * Reduced motion — nothing here is load-bearing, so all of it can stop.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .cic-nav-links .cic-nav-link,
  .cic-navigation > summary,
  .cic-navigation > summary::after,
  .cic-action,
  .wp-element-button,
  .wp-block-button__link,
  .cic-whatsapp-action .cic-whatsapp-icon,
  .cic-whatsapp-action .cic-external,
  .cic-home-card,
  .cic-content-card,
  .cic-home-card .cic-card-media img,
  .cic-content-card .cic-card-media img,
  .cic-home-card :where(h2, h3) a::after,
  .cic-content-card :where(h2, h3) a::after,
  .cic-home-section#cic-hero .cic-media-frame:not(:has(img)),
  .cic-home-section#cic-hero .cic-media-frame:not(:has(img))::before,
  .cic-home-section#cic-hero .cic-media-frame:not(:has(img))::after,
  .cic-home-section#cic-hero .cic-image-placeholder .wp-block-image img,
  body {
    transition: none;
    animation: none;
  }

  .cic-home-card:hover,
  .cic-content-card:hover,
  .cic-home-card:focus-within,
  .cic-content-card:focus-within,
  .cic-home-card:active,
  .cic-content-card:active,
  .cic-action:active,
  .wp-element-button:active,
  .wp-block-button__link:active,
  .cic-whatsapp-action:active {
    transform: none;
  }

  .cic-home-card:hover .cic-card-media img,
  .cic-content-card:hover .cic-card-media img,
  .cic-home-card:focus-within .cic-card-media img,
  .cic-content-card:focus-within .cic-card-media img,
  .cic-home-section#cic-hero .cic-image-placeholder:hover .wp-block-image img {
    transform: none;
  }

  /* The pointer-reactive hero is neutralised at the source as well. */
  .cic-home-section#cic-hero .cic-media-frame,
  .cic-home-section#cic-hero .cic-image-placeholder {
    --cic-pointer-x: 0;
    --cic-pointer-y: 0;
  }

  .cic-navigation:not(.cic-navigation-wide)[open] > .cic-nav-links {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
 * Footer contact and locator
 *
 * The marks are burgundy because that is the accent the CIC logo carries. They
 * are decorative only: every line keeps its written label, so nothing depends
 * on the icon or on colour alone.
 * ------------------------------------------------------------------------- */

.cic-contact-lines {
  display: grid;
  /* The taller action rows carry the rhythm now, exactly as the footer navigation does. */
  gap: 0;
}

.cic-contact-line {
  display: grid;
  grid-template-columns: 1.125rem auto minmax(0, 1fr);
  align-items: start;
  gap: .25rem .5rem;
  margin-block: 0;
}

/*
 * Stroke marks, drawn in the logo burgundy. currentColor carries the accent so a line can tint
 * its own mark on hover without restating the colour, and the stroke weight keeps them quiet
 * beside the type. A wrapping value cannot drag the mark down: it stays on the first line.
 */
.cic-contact-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--cic-color-accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-block-start: .1rem;
  flex: none;
  transition: transform var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-contact-label {
  color: var(--cic-color-text-muted);
}

.cic-contact-label::after {
  content: " :";
}

.cic-contact-value {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/*
 * Address and hours are stored as plain text with line breaks. They stay escaped text; this shows
 * each stored line on its own line (Contact page, footer hours, map address) while still wrapping
 * long lines and collapsing runs of spaces. Phone, email and WhatsApp do not carry the class.
 */
.cic-contact-multiline {
  white-space: pre-line;
}

/*
 * Phone and email are real actions, so they get a real target, the same way the footer
 * navigation does: the anchor becomes a 44px interactive block while the span keeps the
 * typography and the hover rule. The text stays on the first line beside its icon, the
 * target grows downward into the row, and the list gives back its gap so the address block
 * keeps its rhythm instead of inflating.
 */
.cic-contact-value a {
  display: inline-flex;
  align-items: flex-start;
  min-block-size: 2.75rem;
  color: inherit;
  text-decoration: none;
}

.cic-contact-value a > span {
  border-block-end: 1px solid transparent;
  transition: border-color var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-contact-value a:hover > span {
  border-block-end-color: var(--cic-color-accent);
  text-decoration: none;
}

.cic-contact-value a:focus-visible {
  outline: 2px solid var(--cic-color-focus);
  outline-offset: 2px;
}

/*
 * The whole line answers the pointer, not just the anchor: a burgundy wash seats behind it, the
 * mark warms and steps forward, and the value picks up the accent. Small movement, one family of
 * easing, and the row height never changes, so the footer composition cannot shift.
 */
.cic-contact-line {
  position: relative;
  border-radius: var(--wp--custom--cic--home--radius);
  transition: background-color var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-contact-line::before {
  content: "";
  position: absolute;
  inset-block: .125rem;
  inset-inline: -.625rem;
  border-radius: inherit;
  background: color-mix(in srgb, var(--cic-color-accent) 8%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-contact-line:has(a:hover)::before,
.cic-contact-line:has(a:focus-visible)::before {
  opacity: 1;
}

.cic-contact-line:has(a:hover) .cic-contact-icon,
.cic-contact-line:has(a:focus-visible) .cic-contact-icon {
  transform: translateX(1px);
}

.cic-contact-line:has(a:hover) .cic-contact-value a,
.cic-contact-line:has(a:focus-visible) .cic-contact-value a {
  color: var(--cic-color-accent);
}

/* The map action is a real target and reads as a quiet button, not as body text. */
.cic-minimap-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-block-size: 2.75rem;
  color: var(--cic-color-text-secondary);
  text-decoration: none;
  transition: color var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-minimap-link:hover,
.cic-minimap-link:focus-visible {
  color: var(--cic-color-accent);
  text-decoration: none;
}

.cic-minimap-link:focus-visible {
  outline: 2px solid var(--cic-color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cic-contact-line,
  .cic-contact-line::before,
  .cic-contact-icon,
  .cic-minimap-link {
    transition: none;
  }

  .cic-contact-line:has(a:hover) .cic-contact-icon,
  .cic-contact-line:has(a:focus-visible) .cic-contact-icon {
    transform: none;
  }
}

/* The locator is a third footer cell, so the existing auto-fit grid places it. */
.cic-minimap {
  display: grid;
  gap: .625rem;
  max-inline-size: 22rem;
}

.cic-minimap-frame {
  position: relative;
  overflow: hidden;
  /* Reserved before the image decodes, so the footer never jumps. */
  aspect-ratio: 5 / 3;
  border-radius: var(--wp--custom--cic--home--radius);
  border: 1px solid var(--cic-glass-border);
  box-shadow: var(--cic-glass-shadow);
  background: var(--cic-color-elevated);
}

.cic-minimap-canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/*
 * Dark mode cannot recolour a raster map, so the sheet is calmed instead: a touch less light and
 * a little less saturation lets it sit on the dark surface without glowing, while every street
 * stays legible. Light mode leaves the cartography exactly as OpenStreetMap drew it.
 */
:root[data-theme='dark'] .cic-minimap-canvas {
  filter: brightness(.86) saturate(.85);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .cic-minimap-canvas {
    filter: brightness(.86) saturate(.85);
  }
}

/* The mark is drawn over the sheet, so it carries the brand token and follows the mode. */
.cic-minimap-pin {
  position: absolute;
  /* The render is centred on the approved coordinates: the point of the pin is that centre. */
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 2rem;
  block-size: 2rem;
  transform: translate(-50%, -100%);
  fill: var(--cic-color-accent);
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%));
  pointer-events: none;
}

/* The pin's eye reads against the burgundy, so it uses the brand's on-colour, not a literal. */
.cic-minimap-pin-eye { fill: var(--wp--custom--cic--brand--on-brand); }

/* Attribution is a licence obligation: discreet, never hidden, and always readable. */
.cic-minimap-credit {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  padding: .125rem .375rem;
  border-start-start-radius: .375rem;
  background: color-mix(in srgb, var(--cic-color-surface) 86%, transparent);
  color: var(--cic-color-text-secondary);
  font-size: .625rem;
  line-height: 1.4;
  text-decoration: none;
}

.cic-minimap-credit:hover,
.cic-minimap-credit:focus-visible {
  color: var(--cic-color-accent);
  text-decoration: underline;
}

.cic-minimap-credit:focus-visible {
  outline: 2px solid var(--cic-color-focus);
  outline-offset: -2px;
}

.cic-minimap-address {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  align-items: start;
  gap: .5rem;
  margin-block: 0;
  font-size: .9375rem;
  line-height: 1.45;
}

.cic-minimap-address .cic-contact-icon {
  align-self: start;
  margin-block-start: .1rem;
}

.cic-minimap-link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  min-block-size: 2.75rem;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--cic-color-text-primary);
}

.cic-minimap-link .cic-external {
  color: var(--cic-color-accent);
  transition: transform var(--cic-motion-nav) var(--cic-ease-out);
}

.cic-minimap-link:hover .cic-external {
  transform: translate(2px, -2px);
}

.cic-minimap-link:focus-visible {
  outline: 2px solid var(--cic-color-focus);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cic-contact-value a,
  .cic-minimap-link .cic-external {
    transition: none;
  }

  .cic-minimap-link:hover .cic-external {
    transform: none;
  }
}