/* Joomla-specific additions on top of the unchanged wireframe styles.css.
   Everything here only styles output that the wireframe does not have. */

/* System messages (e.g. after a form error), in the wireframe's width and colours. */
#system-message-container:empty{display:none}
#system-message-container{width:min(1180px,calc(100% - 96px));margin:24px auto 0;font-size:17px}
#system-message-container joomla-alert,#system-message-container .alert{display:block;padding:16px 20px;border:1px solid var(--line);background:var(--mist);color:var(--ink)}
@media(max-width:1050px){#system-message-container{width:calc(100% - 64px)}}
@media(max-width:760px){#system-message-container{width:calc(100% - 48px)}}
@media(max-width:360px){#system-message-container{width:calc(100% - 36px)}}

/* Dropdown above the reading-progress bar (both absolutely positioned in the header; the bar came later and
   was painted over the first submenu item once the page was scrolled). Deviation from the wireframe, approved. */
.desktop-nav .nav-submenu{z-index:1}