/* Altriss public site: shared styles. Most layout is inline in each page;
   this file holds the base, motion, focus and small-screen rules. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Figtree, "Segoe UI", Arial, sans-serif; color: #26254A; background: #F4F8FB; }
img { max-width: 100%; }
a { color: #2E6B92; }
a:hover { color: #24557A; }
:focus-visible { outline: 3px solid #2E6B92; outline-offset: 2px; }
#site-nav :focus-visible { outline-color: #9ED3ED; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: #FFFFFF; color: #3C3B6D; padding: 12px 16px; font-weight: 700; }
.skip-link:focus { left: 12px; top: 12px; }

/* sidebar stays in view on desktop */
#site-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
#site-menu-toggle { display: none; }

/* logo strip */
@keyframes altriss-logos { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-track { animation: altriss-logos 40s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }

/* small screens: the sidebar becomes a top bar with a Menu button */
@media (max-width: 900px) {
  #site-nav { position: static; height: auto; flex: 1 1 100% !important; padding: 14px 16px !important; gap: 14px !important; display: grid !important; grid-template-columns: 1fr auto; align-items: center; }
  #site-nav > a:first-child { max-width: 170px; padding: 8px 10px !important; }
  #site-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid #9ED3ED; background: transparent; color: #FFFFFF; font: 700 15px Figtree, sans-serif; cursor: pointer; }
  #site-nav > *:not(:first-child):not(#site-menu-toggle) { display: none !important; grid-column: 1 / -1; }
  #site-nav.is-open > *:not(:first-child):not(#site-menu-toggle) { display: flex !important; }
  #site-nav.is-open > a[href*="login"] { margin-top: 0 !important; }
  main section > div, main > section { padding-left: 20px !important; padding-right: 20px !important; }
  main h1 { font-size: 36px !important; }
  main h2 { font-size: 28px !important; }
}