/* EQuALS / TechAccel branding — header, logo, top menu, footer (Nov 2026)
   Colors from the TechAccel EQuALS logo:
     navy  #2C3A50   dark #1C2533   red #C44B3D   gold #D19A33   green #8AAB10   cream #F5F3EE   slate #AEB9C8
------------------------------------------------------------------------------------------------------------- */

/* ---------- Header band ---------- */
#header.brand-header {
    background: #1C2533;
    border-radius: 10px 10px 0 0;
    margin: 10px 0 0 0;
    padding: 10px 18px 8px 14px;
    color: #F5F3EE;
}
#header.brand-header #logo {
    float: left;
    display: flex;
    align-items: center;
}
#header.brand-header .equals-logo-link { display: block; line-height: 0; }
#header.brand-header .equals-logo-svg { width: 350px; height: 70px; display: block; }
#header.brand-header .tagline {
    color: #AEB9C8;
    margin: 0 0 0 18px;
    padding-left: 18px;
    border-left: 1px solid #3E4E68;
    font-size: 0.95em;
    line-height: 1.3;
    max-width: 200px;
}
#header.brand-header #navigation {
    float: right;
    margin-top: 6px;
    color: #F5F3EE;
    text-align: right;
}
#header.brand-header #navigation a { color: #F5F3EE; }
#header.brand-header #navigation a:hover { color: #D19A33; }
#header.brand-header .user-links { display: block; margin-top: 6px; font-size: 0.95em; }
#header.brand-header .user-links a { margin-left: 4px; }
#header.brand-header .user-links .sep { color: #5D6E88; margin: 0 4px; }

/* Member (non-admin) menu inside the header */
#header.brand-header ul.main-menu li a { color: #F5F3EE; padding-left: 18px; }
#header.brand-header ul.main-menu li a:hover { color: #D19A33; }

/* ---------- Logo animation (plays when the "play" class is added) ---------- */
.equals-logo-svg .ring, .equals-logo-svg .word, .equals-logo-svg .tag, .equals-logo-svg .pop {
    transform-box: fill-box; transform-origin: center;
}
.equals-logo-svg.play .ring { animation: equalsSpinup 2.6s both; }
.equals-logo-svg.play .word { animation: equalsFlyin .8s .35s both cubic-bezier(.2,.8,.2,1); }
.equals-logo-svg.play .tag  { animation: equalsFade .7s 1.1s both; }
.equals-logo-svg.play .pop  { animation: equalsPopspin .8s both cubic-bezier(.3,1.35,.5,1); }
.equals-logo-svg.play .p1 { animation-delay: 2.2s; }
.equals-logo-svg.play .p2 { animation-delay: 2.6s; }
.equals-logo-svg.play .p3 { animation-delay: 3.0s; }
.equals-logo-svg.play .p4 { animation-delay: 3.4s; }
.equals-logo-svg.play .s1 { animation: equalsFlash .7s 2.2s; }
.equals-logo-svg.play .s2 { animation: equalsFlash .7s 2.6s; }
.equals-logo-svg.play .s3 { animation: equalsFlash .7s 3.0s; }
.equals-logo-svg.play .s4 { animation: equalsFlash .7s 3.4s; }
@keyframes equalsSpinup {
    0%   { transform: rotate(0deg);    animation-timing-function: cubic-bezier(.5,0,.75,.5); }
    55%  { transform: rotate(720deg);  animation-timing-function: cubic-bezier(.25,.5,.5,1); }
    100% { transform: rotate(1440deg); }
}
@keyframes equalsFlyin  { from { opacity: 0; transform: translateX(-30px) skewX(-10deg); } to { opacity: 1; transform: none; } }
@keyframes equalsFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes equalsPopspin { 0% { opacity: 0; transform: scale(.2) rotate(-300deg); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes equalsFlash  { 0%, 100% { stroke-width: 7; } 40% { stroke-width: 11; } }
@media (prefers-reduced-motion: reduce) {
    .equals-logo-svg .ring, .equals-logo-svg .word, .equals-logo-svg .tag, .equals-logo-svg .pop, .equals-logo-svg .seg { animation: none !important; }
}

/* ---------- Top menu (Telerik menu restyled) ---------- */
#menu.t-menu {
    background: #2C3A50 !important;
    border: 0 !important;
    border-bottom: 3px solid #D19A33 !important;
    border-radius: 0 0 10px 10px;
    padding: 0 8px;
    margin: 0 0 14px 0;
    font-size: 1em;
}
#menu.t-menu > .t-item {
    background: transparent !important;
    border: 0 !important;
    margin: 0;
}
#menu.t-menu > .t-item > .t-link {
    color: #F5F3EE !important;
    padding: 11px 16px 9px 16px;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
}
#menu.t-menu > .t-item.t-state-hover,
#menu.t-menu > .t-item:hover {
    background: #3A4B66 !important;
}
#menu.t-menu > .t-item.t-state-hover > .t-link,
#menu.t-menu > .t-item:hover > .t-link {
    color: #FFFFFF !important;
    border-bottom-color: #D19A33;
}
#menu.t-menu > .t-item.t-state-selected > .t-link {
    border-bottom-color: #F5F3EE;
}
/* Down arrows: white */
#menu.t-menu > .t-item > .t-link .t-arrow-down {
    filter: brightness(0) invert(1);
    opacity: .8;
}
/* Drop-downs */
#menu .t-group {
    background: #FFFFFF !important;
    border: 1px solid #C9D0DA !important;
    border-top: 3px solid #D19A33 !important;
    box-shadow: 0 6px 16px rgba(28,37,51,.18);
    min-width: 200px;
}
#menu .t-group .t-item { background: transparent !important; border: 0 !important; }
#menu .t-group .t-link { color: #2C3A50 !important; padding: 7px 18px 7px 14px; }
#menu .t-group .t-item.t-state-hover,
#menu .t-group .t-item:hover { background: #F5F3EE !important; }
#menu .t-group .t-item.t-state-hover > .t-link,
#menu .t-group .t-item:hover > .t-link { color: #C44B3D !important; }

/* ---------- Footer ---------- */
#footer a { color: #2C3A50; }
#footer a:hover { color: #C44B3D; }
#footer .footer-brand { color: #6B7A90; font-size: .9em; margin-left: 18px; }
#footer .sep, #footer-menu .sep { color: #D19A33; margin: 0 8px; }

/* Members without the admin menu: round the bottom of the header band */
#header.brand-header.no-menu { border-radius: 10px; margin-bottom: 14px; }

/* Telerik puts .t-state-hover on the LINK (a.t-link), which brought back its pale-yellow hover.
   Override it so hover stays readable: top bar = lighter navy + white text + gold underline;
   drop-downs = cream background + navy text. */
#menu.t-menu > .t-item > .t-link.t-state-hover,
#menu.t-menu > .t-item > .t-link:hover {
    background: #3A4B66 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
    border-bottom: 3px solid #D19A33 !important;
}
#menu .t-group .t-link.t-state-hover,
#menu .t-group .t-link:hover {
    background: #F5F3EE !important;
    background-image: none !important;
    color: #1C2533 !important;
    border-color: transparent !important;
    box-shadow: inset 4px 0 0 #D19A33;
}