/* Additions to the legacy theme for the rebuilt site. */
[x-cloak] { display: none !important; }

/* Long news titles are clipped to two lines (was done in jQuery). */
.index-news-list li a.title p,
.news-list li h3.title p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.page-box a, .page-box span { cursor: pointer; }

.form-error { display: block; color: #c0392b; font-size: .875em; margin-top: 4px; }
/* The legacy theme floats every span in a form row; keep error messages on their own line below the field. */
ul.form-list li .right .form-error,
ul.order-form-list li .right .form-error { float: none; clear: both; width: 100%; padding-top: 4px; }
.form-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.btn-style01[disabled] { opacity: .6; cursor: wait; }

/* Page headings are real h1s; keep the legacy look. */
h1.unitTitle { font-size: 1em; font-weight: normal; }
.newsArticle header h1 { float: left; width: calc(100% - 100px); margin: 0 15px 0 0; font-size: 0.938em; font-weight: normal; }
@media screen and (max-width: 1024px) {
    .newsArticle header h1 { width: 100%; }
}

/*
 * Keep the footer at the bottom of the window on short pages (e.g. a few news items on a tall
 * screen), instead of showing the sky background below it. Decorations are absolutely positioned
 * and stay out of this flow.
 */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; }
body > header, body > footer { flex-shrink: 0; }

/*
 * The legacy night-sky star container is 100% of the window tall but starts 125px down, so it
 * stretched short pages past the footer (a blue strip under it at night). The stars inside are
 * absolutely positioned from its top, so it needs no height of its own.
 */
.star-box { height: 0; }

/*
 * Header dropdowns sit at their open position (.on) and fade/slide in and out from there,
 * like the legacy jQuery animation, so no gap opens up under the menu bar while closing.
 */
.menu-motion { transition: opacity .3s ease, transform .3s ease; }
.menu-hidden { opacity: 0; transform: translateY(10px); }