/* Styling follows the public ATSB site (atsb.gov.au): navy chrome, white cards on a
   light grey page, Arial stack, 4px corners. */

:root {
    --navy: #142448;
    --navy-dark: #0e1931;
    --page-bg: #f4f4f7;
    --card-bg: #fefefe;
    --border: #b7b7b9;
    --text: #000;
    --text-soft: #3b3b3b;
    --focus: #f5a623;
    --radius: 4px;
    --shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

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

body {
    margin: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", Arimo, sans-serif;
    font-size: 16px;
    line-height: 1.5;

    /* Every page is a column of header, content and footer that is at least as tall as the
       window. A page with little content therefore still puts its footer on the bottom edge
       rather than part way up, and a long page pushes the footer below the fold as usual.
       This is the layout, not a `position: fixed` footer: the footer never covers content. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh; /* excludes mobile browser chrome, which 100vh does not */
}

.site-header, .site-footer { flex: 0 0 auto; }

h1, h2, h3 { font-weight: 700; line-height: 1.25; }

a { color: var(--navy); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Keyboard users can jump the header without tabbing through it. */
.skip-link {
    position: absolute;
    left: -9999px;
    background: #fff;
    color: var(--navy);
    padding: .75rem 1rem;
    z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Header and footer ------------------------------------------------------- */

.site-header { background: var(--navy); }

/* The header is the same thin bar on every page: a masthead is not what a visitor came for,
   and on a report page the height it gives up goes to the dashboard. */
.header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.logo-link { display: inline-flex; }
.logo { height: 32px; width: auto; display: block; }

.site-name {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .35);
}

/* The breadcrumb in the header names the open dashboard and links back to the list. Its
   last item is the page's h1, so the header carries the heading and the page does not
   need to spend vertical space on one. */
.header-breadcrumb {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .35);
}

.header-breadcrumb a { color: rgba(255, 255, 255, .85); font-size: .9375rem; white-space: nowrap; }
.header-breadcrumb a:hover { color: #fff; }
.crumb-separator { color: rgba(255, 255, 255, .5); }
.crumb-back { display: none; }

.crumb-current {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    /* A long dashboard name shortens rather than pushing the header on to a second line. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.site-footer {
    background: var(--navy-dark);
    color: #fff;
    margin-top: 3rem;
    padding: .875rem 0;
}
.footer-title { margin: 0 0 .25rem; font-weight: 700; font-size: .9375rem; }
.footer-note { margin: 0; color: rgba(255, 255, 255, .8); font-size: .8125rem; }
.site-footer a { color: #fff; }

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

/* Takes the space between the header and the footer, however little content it holds. */
.main { flex: 1 0 auto; padding-top: 2rem; padding-bottom: 1rem; }

.page-title { margin: 0 0 .5rem; font-size: 1.875rem; }
.page-intro { margin: 0 0 1.75rem; max-width: 65ch; color: var(--text-soft); }

.breadcrumb {
    display: flex;
    gap: .5rem;
    font-size: .875rem;
    color: var(--text-soft);
    margin-bottom: .75rem;
}

.button {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    padding: .625rem 1.25rem;
    text-decoration: none;
    font-weight: 700;
}
.button:hover { background: var(--navy-dark); }

/* Landing page cards ------------------------------------------------------ */

.card-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--text);
}

.card:hover { border-color: var(--navy); }
.card:hover .card-cta { background: var(--navy-dark); }

.card-title { margin: 0 0 1rem; font-size: 1.1875rem; color: var(--navy); }

.card-cta {
    margin-top: auto;
    align-self: flex-start;
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    padding: .5rem 1rem;
    font-size: .9375rem;
    font-weight: 700;
}

/* Embedded report --------------------------------------------------------- */

#report-container {
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

#report-container iframe { border: 0; }

.error-panel {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-left: 4px solid var(--navy);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}
.error-panel h2 { margin: 0 0 .5rem; font-size: 1.25rem; }

/* Full-window pages ------------------------------------------------------- */

/* A report page gives the whole window to the report. It takes the column layout every page
   has and pins its height to the window instead of merely meeting it, so the report fills
   the space left over and the page itself never scrolls. */
.fill-viewport {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.fill-viewport .main {
    flex: 1 1 auto;
    min-height: 0; /* lets the report shrink inside the flex column rather than overflow */
    display: flex;
    flex-direction: column;
    max-width: none;
    padding: 0;
}

.fill-viewport #report-container {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.fill-viewport .error-panel { margin: 1.5rem; }

/* No gap above it: on a page pinned to the window there is no scroll for the gap to sit in. */
.fill-viewport .site-footer { margin-top: 0; }

@media (max-width: 600px) {
    .site-name { font-size: 1rem; }
    .page-title { font-size: 1.5rem; }

    .crumb-current { font-size: 1rem; }

    /* A narrow header has no room for the word "Dashboards" and the dashboard name, so the
       link becomes a back chevron. It keeps a labelled way back, which the logo alone does
       not give: a masthead logo reads as a link to the main ATSB site, not to this list. */
    .crumb-home,
    .crumb-separator { display: none; }
    .crumb-back { display: inline; font-size: 1.5rem; line-height: 1; }
    .header-breadcrumb { padding-left: .5rem; }
    .logo { height: 26px; }

    /* Both header links need a finger-sized target. Removing the row's own padding pays
       for it, so the header stays about as thin as it was. */
    .header-inner { padding-top: 0; padding-bottom: 0; min-height: 44px; }
    .header-breadcrumb > a,
    .logo-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    .fill-viewport .footer-note { display: none; }
}

/* On a short window the footer takes a share of the screen the report cannot spare — at
   375 pixels tall it is a seventh of everything the visitor can see. Drop it and give the
   height to the dashboard. Pages that scroll keep their footer at any height, because
   there it sits below the fold and costs the reader nothing. */
@media (max-height: 600px) {
    .fill-viewport .site-footer { display: none; }
}

/* On a narrow window the logo crowds out the dashboard name. The back chevron already
   provides the way back, so the logo is what gives way. */
@media (max-width: 480px) {
    .fill-viewport .logo-link { display: none; }

    /* The divider belongs to the logo. Without one there is nothing to divide. */
    .fill-viewport .header-breadcrumb {
        padding-left: 0;
        border-left: 0;
    }
}