/* Shared VEX site chrome: the top bar and footer, kept identical to the VEX Audience site
   (competition-audience/dist/audience.css, October 2026). The top bar follows
   education.vex.com's font and colors; the footer matches api.vex.com, including its
   system font stack. Both are exempt from the site body font. When one site changes
   its chrome, copy the same rules to the other. Loaded after the site stylesheets. */

.site-header { background: white; }
.global-bar { border-bottom: 5px solid #595959; line-height: 1.55; font-family: Arial, Helvetica, "Helvetica Neue", Verdana, sans-serif; }
.global-inner { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-lockup { display: flex; align-items: center; gap: 20px; min-width: 0; }
.corporate-brand { display: flex; align-items: center; flex: none; text-decoration: none; }
.corporate-brand img { width: 78px; height: 38px; object-fit: contain; }
.site-brand { display: inline-flex; align-items: center; gap: 15px; min-width: 0; text-decoration: none; color: #212529; flex-shrink: 0; }
.brand-divider { width: 1px; height: 25px; background: #d4d9dc; }
.site-name { font-size: 23px; letter-spacing: -.035em; font-weight: 700; }
.site-shortcut { font-size: 14px; font-weight: 400; color: #5c707b; letter-spacing: 0; white-space: nowrap; padding-left: 15px; border-left: 1px solid #e0e6e8; line-height: 1.3; }
.site-brand:hover .site-shortcut { text-decoration: underline; text-underline-offset: 4px; }
.utility-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 22px; }
.utility-nav a { display: inline-flex; align-items: center; min-height: 36px; padding-block: 6px; font-size: 15px; line-height: 1.4; font-weight: 600; color: #006bb4; text-decoration: none; white-space: nowrap; }
.utility-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Matches the shared VEX site footer on api.vex.com, including its system font stack. */
.site-footer { background: white; padding: 48px 0 8px; margin-top: auto; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
.footer-inner { display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; border-top: 1px solid #ccc; padding-top: 24px; text-align: center; }
.footer-logo img { display: block; width: 175px; height: auto; margin: 0 auto 16px; }
.footer-legal { margin: 0; font-size: 10px; line-height: 1.5; color: #000; }
.footer-legal a { color: #006bb4; text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-social { display: flex; justify-content: center; margin-top: 16px; }
.footer-social a { padding: 4px; }
.footer-social img { display: block; width: 42px; height: 42px; }

@media (max-width: 1100px) { .utility-nav { gap: 4px 17px; } }
@media (max-width: 991px) { .footer-inner { grid-template-columns: 1fr; } }
@media (max-width: 820px) { .global-inner { min-height: 50px; } .site-name { font-size: 21px; } }
@media (max-width: 800px) { .global-inner { flex-wrap: wrap; row-gap: 0; padding-top: 8px; padding-bottom: 0; } .utility-nav { flex: 0 0 100%; justify-content: flex-start; gap: 0 18px; margin-top: 2px; } }
@media (max-width: 680px) { .brand-lockup { gap: 14px; } .corporate-brand img { width: 66px; height: 32px; } .site-brand { flex-direction: column; align-items: flex-start; gap: 3px; } .site-name { font-size: 21px; } .site-shortcut { border: 0; padding: 0; font-size: 11px; line-height: 1.2; } .global-inner { column-gap: 15px; } .utility-nav { gap: 0 14px; } .utility-nav a { min-height: 32px; font-size: 13px; } }
@media (max-width: 650px) { .global-inner { padding-inline: 18px; } .brand-divider { height: 21px; } }
@media (max-width: 390px) { .global-inner { column-gap: 10px; padding-inline: 15px; } .brand-lockup { gap: 10px; } .corporate-brand img { width: 57px; height: 28px; } .brand-lockup .brand-divider { height: 27px; } .site-name { font-size: 19px; } .site-shortcut { font-size: 10px; } .utility-nav { column-gap: 10px; } }
@media (max-width: 360px) { .utility-nav a { font-size: 12px; } .utility-nav { column-gap: 8px; } }
@media print { .site-header, .site-footer { display: none; } }