/*
 * Shared styling for the [AllowAnonymous] pages: Login, TenantSelection,
 * LoggedOutPage and ErrorPage.
 *
 * These four views are the only pages an unauthenticated visitor can reach, so
 * they deliberately depend on nothing but this file and opensans.css. No
 * Bootstrap, no Font Awesome, no jQuery. Values here were taken from what the
 * Bootstrap 3.0.1 + custom.css combination actually rendered, so the pages keep
 * their existing look.
 *
 * The authenticated side of the app still uses Bootstrap; nothing here affects it.
 */

/* ---------------------------------------------------------------- base ---- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    /* custom.css set 12px/Open Sans for the whole app and won over Bootstrap's 14px,
       but the line-height came from Bootstrap and everything inherited it. Without
       it text metrics drift by a pixel or two all over the page. */
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 1.428571429;
    color: #333;
    background-color: #fff;
}

/*
 * Bootstrap's normalize used to make form controls inherit the page font.
 * Without it the browser falls back to its own UI font and the inputs and
 * buttons on Login / TenantSelection change size and typeface.
 */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}
/*
 * Deliberately no `line-height: normal` here. Bootstrap's normalize set that,
 * then its forms rules overrode it, so controls ended up inheriting the body's
 * unitless ratio and computing 20px at 14px font. Leaving line-height alone
 * reproduces that; setting it to `normal` does not.
 */

/* Bootstrap stripped the default fieldset chrome; without this TenantSelection
   grows a full-width browser-drawn border. */
fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

/*
 * Reproduces the Bootstrap `col-xs-12 row` combination this wrapper used to
 * carry: width:100% of the body, pulled 15px left by the row's negative margin,
 * with the column's 15px padding inside. Net effect is a content area 30px
 * narrower than the viewport, which is what centred the page slightly left of
 * true centre. Measured on the original: wrapper x=-15 w=1920, content 0..1890.
 */
#main-wrapper {
    position: relative;
    min-height: 100%;
    width: 100%;
    margin-left: -15px;
    margin-right: -15px;
    padding: 0 15px;
}

/* -------------------------------------------------------------- header ---- */

/* Background colour is applied inline from the model (environment colour). */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 55px;
    /* 30px is where the Bootstrap grid + navbar padding put the logo (measured
       against the live original, which has the img box starting at x=30). */
    padding: 0 20px 0 30px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #700e1b;
    box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.65);
    z-index: 1030;
}

#header .brand-section {
    display: flex;
    align-items: center;
    text-decoration: none;
}

#header .brand-logo {
    display: block;
    width: 169px;
}

#header .brand-text {
    /* 18.4px puts the wording at x=217.4, where the original renders it. */
    margin-left: 18.4px;
    color: #fff;
    font-weight: bold;
    /* Nudged up 3px so the two lines land on the rows the Bootstrap header put
       them on. Measured against the deployed page, not eyeballed. */
    position: relative;
    top: -3px;
}

/*
 * Shown at every width. custom.css used to set .navbar-subtitle to font-size 0
 * and only restore it above 1600px, which kept the wording invisible on most
 * laptops. That gate was working around the old markup, where .navbar-subtitle
 * was a position:fixed 300px box inside the Bootstrap navbar. Here it is an
 * ordinary flex item and clears the environment banner by a constant 25px at
 * every width, so there is nothing left to guard against.
 */
#header .brand-title,
#header .brand-subtitle {
    display: block;
}

#header .brand-title {
    font-size: 20px;
    /* Sets the gap to the subtitle. 28px reproduces the 23px spacing the
       Bootstrap header rendered; measured, not guessed. */
    line-height: 28px;
}

#header .brand-subtitle {
    font-size: 14px;
    line-height: 14px;
    font-style: italic;
    color: #14b9f1;
}

/* Environment banner — only the Login page shows one. Colour comes from the model. */
/* Position and line-height measured off the live original, where this text
   renders at x=490, y=30 with a 17px line box. */
#header .environment-banner {
    position: absolute;
    left: 490px;
    top: 30px;
    font-size: 15px;
    line-height: 17px;
    font-family: 'Math';
    white-space: pre;
}

/* ------------------------------------------------------------- content ---- */

#content-section {
    padding: 100px 0 0;
    margin: auto;
    text-align: center;
}

.welcome-section {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* Every anonymous page carried this same bare h3 rule in its own <style> block. */
h3 {
    margin: 0 0 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.tax-asterisk {
    color: maroon;
}

/* -------------------------------------------------------------- footer ---- */

/* Background colour is applied inline from the model, as in the header. */
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    /* The old footer positioned its text with the ul's 5px top padding rather
       than by centring. Trimming 2px off the bottom of the content box lands
       centred text on the same row, measured against the live original. */
    padding-bottom: 2px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 12px;
    z-index: 1001;
}

/*
 * Out of the flow, so the links below can centre on the full page width rather
 * than on the space left over beside this text. Measured against the deployed
 * page: the Bootstrap footer centred its links on the page, and leaving the
 * version text in the flow pushed them ~91px right of where they belong.
 */
#footer .version-section {
    position: absolute;
    left: 10px;
    display: flex;
    gap: 10px;
    white-space: pre;
}

/*
 * Reproduces the old grid: the links lived in a col-xs-6 that started a
 * col-xs-4 (33.333%) in, and held an 850px-wide <ul> centred in that column.
 * The list items were floated left, so they begin at the ul's left edge rather
 * than centred — which is why the row sits at x=696, not on the page centre.
 */
#footer .links-section {
    width: 50%;
    margin-left: 33.3333%;
    padding: 0 15px;
    display: flex;
}

#footer ul {
    width: 850px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
}

#footer a {
    color: #fff;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

/*
 * Page-centred links start overlapping the version text at 1024px (measured:
 * the gap goes to -3px there, and is only 10px at 1050px). Dropping them below
 * 1100px keeps a comfortable margin without nudging the links off centre.
 */
@media only screen and (max-width: 1100px) {
    #footer .links-section {
        display: none;
    }
}