/* [ Bracket links ]
   Every link that leads to another page wears the [AL] logo's coral square brackets.
   Not for: in-page anchors, the main nav, mailto links, or file downloads (docx / xlsx / ipynb / media).
   New link? Add class="bracket-link" and it picks this up.

   One style for every bracket on the site: change it here. This also covers the brackets that
   are part of the page itself (the NYC clock and the CREDENTIALS toggle) via class="bracketed". */

:root {
  --bracket-color: var(--coral);
  --bracket-font: var(--mono);
  --bracket-weight: 500;
}

/* Text that sits inside brackets: <span class="bracketed">text</span> renders [text]. */
.bracketed::before { content: "["; content: "[" / ""; }
.bracketed::after { content: "]"; content: "]" / ""; }
.bracketed::before, .bracketed::after {
  color: var(--bracket-color);
  font-family: var(--bracket-font);
  font-weight: var(--bracket-weight);
}

.bracket-link,
.case-link,
.hero-links a,
.contact-link:not([href^="mailto:"]),
.pc-book,
.app-cover-links .resource-link,
.as-links a {
  --bk-color: var(--bracket-color);
  --bk-pull: -4px;      /* tucks the bracket in against the label inside flex links */
  --bk-shift: 2px;      /* how far the brackets slide on hover / focus */
}

.pc-book { --bk-pull: 2px; gap: 6px; }

.bracket-link::before,
.case-link::before,
.hero-links a::before,
.contact-link:not([href^="mailto:"])::before,
.pc-book::before,
.app-cover-links .resource-link::before,
.as-links a::before,
.bracket-link::after,
.case-link::after,
.hero-links a::after,
.contact-link:not([href^="mailto:"])::after,
.pc-book::after,
.app-cover-links .resource-link::after,
.as-links a::after {
  display: inline-block;
  color: var(--bk-color);
  font-family: var(--bracket-font);
  font-weight: var(--bracket-weight);
  line-height: 1;
  transition: transform 180ms ease;
}

.bracket-link::before, .case-link::before, .hero-links a::before, .contact-link:not([href^="mailto:"])::before,
.pc-book::before, .app-cover-links .resource-link::before, .as-links a::before {
  content: "[";
  content: "[" / "";   /* decorative: skipped by screen readers where supported */
  margin-right: var(--bk-pull);
}

.bracket-link::after, .case-link::after, .hero-links a::after, .contact-link:not([href^="mailto:"])::after,
.pc-book::after, .app-cover-links .resource-link::after, .as-links a::after {
  content: "]";
  content: "]" / "";
  margin-left: var(--bk-pull);
}

/* Plain inline links (no flex parent) need a normal gap instead of a pull-in. */
a.bracket-link:not(.case-link):not(.contact-link):not(.pc-book) { --bk-pull: 0.35em; }
.hero-links a,
.app-cover-links .resource-link,
.as-links a { gap: 0.45em; --bk-pull: 0px; }

.bracket-link:hover::before, .case-link:hover::before, .hero-links a:hover::before, .contact-link:not([href^="mailto:"]):hover::before,
.pc-book:hover::before, .app-cover-links .resource-link:hover::before, .as-links a:hover::before,
.bracket-link:focus-visible::before, .case-link:focus-visible::before, .hero-links a:focus-visible::before,
.contact-link:not([href^="mailto:"]):focus-visible::before, .pc-book:focus-visible::before,
.app-cover-links .resource-link:focus-visible::before, .as-links a:focus-visible::before {
  transform: translateX(calc(var(--bk-shift) * -1));
}

.bracket-link:hover::after, .case-link:hover::after, .hero-links a:hover::after, .contact-link:not([href^="mailto:"]):hover::after,
.pc-book:hover::after, .app-cover-links .resource-link:hover::after, .as-links a:hover::after,
.bracket-link:focus-visible::after, .case-link:focus-visible::after, .hero-links a:focus-visible::after,
.contact-link:not([href^="mailto:"]):focus-visible::after, .pc-book:focus-visible::after,
.app-cover-links .resource-link:focus-visible::after, .as-links a:focus-visible::after {
  transform: translateX(var(--bk-shift));
}

@media (prefers-reduced-motion: reduce) {
  .bracket-link::before, .bracket-link::after,
  .case-link::before, .case-link::after,
  .hero-links a::before, .hero-links a::after,
  .contact-link::before, .contact-link::after,
  .pc-book::before, .pc-book::after,
  .app-cover-links .resource-link::before, .app-cover-links .resource-link::after,
  .as-links a::before, .as-links a::after { transition: none; transform: none !important; }
}

/* The [AL] logo mark, inlined so the letters follow the theme and the brackets follow the bracket colour. */
.logo-mark .ltr { fill: currentColor; }
.logo-mark .br { fill: var(--bracket-color); }