/* Mechanics page styles - scoped additions, leveraging base.css variables */

.breadcrumbs { padding: var(--space-4) 0; border-bottom: var(--border-width) solid var(--border-color); }

.hero-mechanics .hero-visual { overflow: hidden; }
.hero-mechanics img { border-radius: var(--radius-lg); }

.subnav { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bg-secondary); border-top: var(--border-width) solid var(--border-color); border-bottom: var(--border-width) solid var(--border-color); box-shadow: var(--shadow-base); }
.subnav-inner { padding: var(--space-2) 0; }
.subnav-list { display: flex; gap: var(--space-3); white-space: nowrap; }
.subnav-link { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); }
.subnav-link:hover { color: var(--color-text-primary); background: rgba(27,125,125,0.08); }
.subnav-link.active { color: var(--color-accent-gold-light); border: var(--border-width) solid var(--color-accent-gold); background: rgba(184,147,95,0.08); }

.updates .card + .card { margin-top: var(--space-4); }

/* FAQ details */
#faq details summary { list-style: none; cursor: pointer; }
#faq details[open] summary h3 { color: var(--color-accent-gold-light); }
#faq details summary::-webkit-details-marker { display: none; }
#faq details summary h3 { display: inline-flex; align-items: center; gap: var(--space-2); }
#faq details summary h3::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 0.85em; color: var(--color-text-secondary); transition: transform var(--transition-base) var(--transition-timing); }
#faq details[open] summary h3::after { transform: rotate(180deg); }

/* Search input spacing inside card */
[role='search'].card { display: block; }

/* Minor responsiveness tweaks */
@media (max-width: 767px) {
  .hero-mechanics .hero-visual { margin-top: var(--space-6); }
}