/* Site-wide fixes on top of style.css (a copy of the design system that gets replaced on updates). */

/* Frame lines a touch brighter than the design system (7%), so they read more clearly while staying 1px. */
:root { --h-border: rgba(255, 255, 255, 0.11); }

/* Hairline grids and the logo wall draw their own 1px frame. Where one sits right against a section's
   top or bottom rule, that frame doubled the rule inside the rails; the section's rule is enough. */
.rule-top > .rails > .grid-hairline:first-child,
.rule-top > .rails > .logo-wall:first-child { padding-top: 0; }
.rule-bottom > .rails > .grid-hairline:last-child,
.rule-bottom > .rails > .logo-wall:last-child { padding-bottom: 0; }

/* They also sit 1px wider on each side, so their side frame lands on the rails. Both lines are
   translucent, so the overlap drew a brighter, heavier rail; the rails alone frame them now. */
.rails > .grid-hairline,
.rails > .logo-wall,
.rails > .tabs-bar { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

/* On small screens the design system stretches every .nav-cta to full width, meant for the menu.
   Buttons in the page itself keep their own width. */
section .nav-cta { width: auto; }

/* CTA bar: a slim announcement under the fixed nav, linking to the contact page.
   Pages offset their first block by --nav-height; while the bar is on the page that offset includes
   the bar, and the nav itself keeps the design system's 56px. */
:root { --cta-bar-h: 40px; }
:root:has(.cta-bar:not(.cta-bar--static)) { --nav-height: calc(56px + var(--cta-bar-h)); }
:root:has(.cta-bar:not(.cta-bar--static)) nav { height: 56px; }

.cta-bar {
  position: fixed;
  top: 56px; left: 0; right: 0;
  z-index: 99;
  height: var(--cta-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  padding: 0 var(--space-16);
  border-bottom: 1px solid var(--h-border);
  background: var(--nav-glass);
  backdrop-filter: blur(14px);
  font-size: 0.85rem;
  color: var(--h-text);
  text-decoration: none;
  /* once the page and its heading are in, the bar slides down from behind the nav into its place */
  animation: cta-bar-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.9s both;
}
@keyframes cta-bar-in { from { transform: translateY(-100%); opacity: 0; } }

/* green for availability, with a softly pulsing dot */
.cta-bar-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-4);
  background: rgba(52, 211, 153, 0.12);
  color: #6ee7b7;
  font-weight: 500;
  white-space: nowrap;
}
.cta-bar-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34d399;
  animation: cta-bar-dot 2s ease-in-out infinite;
}
@keyframes cta-bar-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}
.cta-bar-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-bar svg { flex-shrink: 0; transition: transform 0.15s; }
.cta-bar:hover svg { transform: translateX(3px); }
/* the same bar shown in place, on the Elements page */
.cta-bar--static { position: relative; top: auto; z-index: auto; backdrop-filter: none; border: 1px solid var(--h-border); border-radius: var(--radius-8); animation: none; }
@media (max-width: 480px) { .cta-bar { font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .cta-bar, .cta-bar-tag::before { animation: none; } }

/* ── NAV: centred links, a Resources dropdown, the CTA on the right ── */
/* Desktop: the list is centred on the bar; its own CTA item is for the mobile menu, a second CTA sits right. */
.nav-cta-desk { display: none; }
@media (min-width: 769px) {
  .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .nav-links .nav-cta-item { display: none; }
  .nav-cta-desk { display: inline-flex; }
}
.nav-links a[aria-current="page"],
.nav-dd.is-current > .nav-dd-btn { color: var(--h-text); font-weight: 500; }

.nav-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.92rem;
  color: var(--h-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.nav-dd-btn svg { transition: transform 0.2s; }
.nav-dd:hover > .nav-dd-btn,
.nav-dd:focus-within > .nav-dd-btn { color: var(--h-text); }
.nav-dd:hover > .nav-dd-btn svg,
.nav-dd:focus-within > .nav-dd-btn svg { transform: rotate(180deg); }

.nav-dd-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  min-width: 260px;
  padding: var(--space-6);
  list-style: none;
  background: var(--nav-glass-solid);
  backdrop-filter: blur(14px);
  border: 1px solid var(--h-border);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-menu);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
/* a bridge over the gap, so the menu stays open on the way down */
.nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nav-dd:hover > .nav-dd-menu,
.nav-dd:focus-within > .nav-dd-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-dd-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-6);
}
.nav-dd-menu a:hover { background: var(--bg3); }
.nav-dd-menu strong { font-size: 0.9rem; font-weight: 500; color: var(--h-text); }
.nav-dd-menu span { font-size: 0.78rem; color: var(--h-muted); }

/* Mobile menu: Resources becomes a small heading with its two links listed under it */
@media (max-width: 768px) {
  .nav-dd-btn {
    width: 100%;
    padding: var(--space-16) 0 var(--space-4);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
  }
  .nav-dd-btn svg { display: none; }
  .nav-dd-menu {
    position: static;
    min-width: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-dd-menu::before { display: none; }
  .nav-dd-menu a { padding: 11px 0; border-radius: 0; }
  .nav-dd-menu a:hover { background: none; }
  .nav-dd-menu span { display: none; }
  .nav-dd-menu strong { font-size: 0.95rem; font-weight: 400; }
}
/* the design system pulls the open mobile menu 24px past the screen edge, so its text touched the edge */
@media (max-width: 768px) { .nav-links { left: 0; right: 0; } }