/*
 * One look for every page.
 * =========================
 *
 * Loaded LAST on every layout - the portal, the signed-out screens, the
 * guides, the landing page, the staff sign-in flow and the back office - so
 * that type, buttons, fields, panels, the footer and the phone layout are the
 * same wherever somebody is. The colours stay where they were (eml-portal.css,
 * office.css, staff-auth.css); this file is shape and type.
 *
 * Every rule is scoped to one of the three page roots:
 *
 *   .eml-portal   the portal, its signed-out screens, the guides, the landing
 *   .ctl-office   the back office
 *   .staff-auth   the staff sign-in, two-step and password screens
 *
 * so nothing here can reach a page that has not asked for it.
 *
 * Contents: the font, the type scale, buttons, fields, panels and labels, the
 * page heading, the footer and the fixed controls, and phones last.
 */

/* ---------------------------------------------------------------- the font */

/*
 * Open Sans, the theme's own typeface, served from this server
 * (public/fonts/open-sans). One variable file per character set covers every
 * weight. font-display: swap - text appears at once in the fallback and
 * changes face when the font arrives, rather than staying invisible on a slow
 * connection.
 */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../../fonts/open-sans/open-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 100%;
    font-display: swap;
    src: url("../../fonts/open-sans/open-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ctl-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ctl-mono: ui-monospace, Menlo, Consolas, monospace;

    /* The type scale: four steps and two weights, everywhere. */
    --ctl-size-title: 24px;    /* the page's one h1 */
    --ctl-size-section: 18px;  /* a section */
    --ctl-size-panel: 15px;    /* a panel's title */
    --ctl-size-body: 14px;
    --ctl-size-small: 12.5px;
    --ctl-weight-heading: 600;
    --ctl-weight-body: 400;

    /* Shape. */
    --ctl-radius: 8px;
    --ctl-radius-panel: 10px;
    --ctl-control-height: 40px;
    --ctl-touch: 44px;         /* the smallest a thumb should have to hit */

    /* Room the fixed controls take at the foot of the screen. */
    --ctl-fab-clearance: 76px;
    --ctl-tabbar-height: 66px;
}

/* ---------------------------------------------------------------- type */

body:is(.eml-portal, .ctl-office, .staff-auth),
:is(.eml-portal, .ctl-office, .staff-auth) :is(input, select, textarea, button, .btn, .popover, .tooltip) {
    font-family: var(--ctl-font);
}

body:is(.eml-portal, .ctl-office, .staff-auth) {
    font-size: var(--ctl-size-body);
    font-weight: var(--ctl-weight-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/*
 * The theme draws every heading at weight 100 - a hairline. Beside anything
 * set at a normal weight it reads as a different typeface, which is most of
 * why pages looked as though they used different fonts. One heading weight.
 */
:is(.eml-portal, .ctl-office, .staff-auth) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    font-family: var(--ctl-font);
    font-weight: var(--ctl-weight-heading);
    letter-spacing: 0;
}

:is(.eml-portal, .ctl-office) .page-heading :is(h1, h2) {
    font-size: var(--ctl-size-title) !important;
    font-weight: var(--ctl-weight-heading) !important;
    line-height: 1.25;
}

:is(.eml-portal, .ctl-office) .ibox-title :is(h2, h3, h5) {
    font-size: var(--ctl-size-panel) !important;
    font-weight: var(--ctl-weight-heading);
    line-height: 1.4;
}

:is(.eml-portal, .ctl-office, .staff-auth) :is(strong, b, .font-bold) { font-weight: var(--ctl-weight-heading); }

:is(.eml-portal, .ctl-office, .staff-auth) :is(small, .small) { font-size: var(--ctl-size-small); }

:is(.eml-portal, .ctl-office, .staff-auth) :is(code, kbd, pre, samp) { font-family: var(--ctl-mono); }

/* ---------------------------------------------------------------- buttons */

/*
 * One button: one height, one corner, one size of text. The theme's xs and sm
 * stay smaller, but not so small a finger cannot hit them, and every button
 * keeps the same weight so a page of mixed buttons reads as one set.
 */
:is(.eml-portal, .ctl-office, .staff-auth) .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 14px;
    border-radius: var(--ctl-radius);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
}

:is(.eml-portal, .ctl-office, .staff-auth) .btn.btn-block { display: flex; width: 100%; }
:is(.eml-portal, .ctl-office, .staff-auth) .btn-sm { min-height: 32px; padding: 5px 12px; font-size: 13px; }
:is(.eml-portal, .ctl-office, .staff-auth) .btn-xs { min-height: 28px; padding: 3px 10px; font-size: 12.5px; }
:is(.eml-portal, .ctl-office, .staff-auth) .btn-lg { min-height: 46px; padding: 10px 18px; font-size: 16px; }

/* A link styled as a button never gets the link's underline. */
:is(.eml-portal, .ctl-office, .staff-auth) a.btn,
:is(.eml-portal, .ctl-office, .staff-auth) a.btn:hover { text-decoration: none; }

/* ---------------------------------------------------------------- fields */

:is(.eml-portal, .ctl-office, .staff-auth) :is(.form-control, select.form-control) {
    height: var(--ctl-control-height);
    padding: 8px 12px;
    border-radius: var(--ctl-radius);
    font-size: 14px;
    box-shadow: none;
}

:is(.eml-portal, .ctl-office, .staff-auth) textarea.form-control { height: auto; min-height: 84px; }
:is(.eml-portal, .ctl-office, .staff-auth) .form-control[multiple] { height: auto; }
:is(.eml-portal, .ctl-office, .staff-auth) .input-sm { height: 34px; font-size: 13px; }

:is(.eml-portal, .ctl-office, .staff-auth) input[type="file"].form-control { height: auto; padding: 7px 10px; }

:is(.eml-portal, .ctl-office, .staff-auth) .form-control:focus {
    border-color: var(--eml-brand-strong, #0f6fb6);
    box-shadow: 0 0 0 3px rgba(15, 111, 182, .16);
    outline: 0;
}

:is(.eml-portal, .ctl-office, .staff-auth) label { font-weight: 600; }
:is(.eml-portal, .ctl-office, .staff-auth) .checkbox label,
:is(.eml-portal, .ctl-office, .staff-auth) .radio label { font-weight: 400; }

/* ---------------------------------------------------------------- panels */

:is(.eml-portal, .ctl-office) .ibox {
    border-radius: var(--ctl-radius-panel);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 41, 66, .06);
}

/*
 * A PANEL'S TITLE BAR HOLDS ITS TEXT. The theme floats the heading left and
 * the tools right inside a bar with a fixed minimum height; a longer heading,
 * a larger size, or a second line then hung out of the bar and over its lower
 * edge ("Everything your organisation has sent in" on Submissions). As a row
 * instead, the bar grows to whatever it holds: heading on the left, counts and
 * buttons pushed right, wrapping under it on a narrow screen.
 */
:is(.eml-portal, .ctl-office) .ibox-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    min-height: 0;
    height: auto;
    padding: 14px 18px 12px;
    border-top: 3px solid transparent;
}

:is(.eml-portal, .ctl-office) .ibox-title > :is(h1, h2, h3, h4, h5, h6) {
    float: none;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

:is(.eml-portal, .ctl-office) .ibox-title > :is(.ibox-tools, .pull-right, .label, .badge) {
    position: static;
    float: none !important;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
}

:is(.eml-portal, .ctl-office) .ibox-title > .ibox-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

:is(.eml-portal, .ctl-office) .ibox-content {
    padding: 16px 18px 18px;
    /* A long word or address breaks rather than pushing out of the panel. */
    overflow-wrap: break-word;
}

/* Status labels: one pill shape, everywhere. */
:is(.eml-portal, .ctl-office) .label {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: normal;
}

:is(.eml-portal, .ctl-office) .badge { border-radius: 999px; font-weight: 600; }

/* ---------------------------------------------------------------- the page heading */

:is(.eml-portal, .ctl-office) .page-heading .breadcrumb {
    margin: 4px 0 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
}

/* ---------------------------------------------------------------- footer and fixed controls */

/*
 * THE FOOTER IS IN THE PAGE, NOT ON TOP OF IT.
 *
 * The theme pins .footer to the foot of the page with position: absolute and
 * reserves no room for it, so it sat over the last 90 or so pixels of every
 * long page - over a form's last button on the actions page. Here it is in the
 * normal flow: #page-wrapper becomes a column, the main content takes the
 * spare height, and the footer follows it - at the bottom of a short page, and
 * after the last line of a long one, never over it.
 */
:is(.eml-portal, .ctl-office) #page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

:is(.eml-portal, .ctl-office) #page-wrapper > :is(main, .wrapper-content) { flex: 1 0 auto; }

:is(.eml-portal, .ctl-office) .footer {
    position: static !important;
    margin-top: auto;
    width: 100%;
    padding-bottom: 14px;
}

/*
 * The floating "Ask for help" button: room at the end of every page so the
 * last line is never under it.
 */
.eml-portal #ctl-main { padding-bottom: var(--ctl-fab-clearance); }

/* The footer's partner marks at a size that can be seen. */
:is(.eml-portal, .ctl-office) .footer .eml-logos img { height: 28px; width: auto; }

/* ---------------------------------------------------------------- phones */

@media (max-width: 767px) {
    /*
     * 16px in fields, not 14: iPhone zooms the whole page in when somebody taps
     * a field set smaller than 16px, and does not zoom back out.
     */
    :is(.eml-portal, .ctl-office, .staff-auth) :is(.form-control, select, textarea, input) { font-size: 16px; }

    /* Touch-sized controls. */
    :is(.eml-portal, .ctl-office, .staff-auth) .form-control { height: var(--ctl-touch); }
    :is(.eml-portal, .ctl-office, .staff-auth) textarea.form-control { height: auto; }
    :is(.eml-portal, .ctl-office, .staff-auth) .btn { min-height: var(--ctl-touch); }
    :is(.eml-portal, .ctl-office, .staff-auth) :is(.btn-sm, .btn-xs) { min-height: 38px; }

    /*
     * A compact heading. The title is smaller, the breadcrumb becomes one link
     * back to the page above (the item before the current one), and the
     * page's own button runs the full width under it.
     */
    :is(.eml-portal, .ctl-office) .page-heading { padding-top: 14px !important; padding-bottom: 14px !important; }
    :is(.eml-portal, .ctl-office) .page-heading :is(h1, h2) { font-size: 20px !important; }
    :is(.eml-portal, .ctl-office) .page-heading .breadcrumb > li { display: none; }
    :is(.eml-portal, .ctl-office) .page-heading .breadcrumb > li:nth-last-child(2) { display: inline; }
    :is(.eml-portal, .ctl-office) .page-heading .breadcrumb > li:nth-last-child(2)::before { content: "\2039\00a0"; padding: 0; color: inherit; }
    :is(.eml-portal, .ctl-office) .page-heading .text-right { text-align: left; margin-top: 8px !important; }
    :is(.eml-portal, .ctl-office) .page-heading :is(.text-right, .pull-right) .btn { width: 100%; margin: 4px 0 0; }
    :is(.eml-portal, .ctl-office) .page-heading .pull-right { float: none !important; margin-top: 8px !important; }

    /* Panels closer to the edge, so more of a narrow screen is content. */
    :is(.eml-portal, .ctl-office) .wrapper-content { padding-left: 0; padding-right: 0; }
    /* 15px, not less: a Bootstrap .row inside reaches 15px into the padding,
       and anything smaller pushed every row out past the panel's edge. */
    :is(.eml-portal, .ctl-office) .ibox-content { padding: 14px 15px; }

    /*
     * Room above the phone menu bar, for the page and for the footer. On the
     * page wrapper, not the body: the theme gives body a fixed 100% height, so
     * padding there never reached the end of the page and the bar sat over
     * the footer.
     */
    body.eml-portal.has-ctl-tabbar #ctl-main { padding-bottom: 24px; }
    body.eml-portal.has-ctl-tabbar #page-wrapper { padding-bottom: calc(var(--ctl-tabbar-height) + env(safe-area-inset-bottom)); }

    :is(.eml-portal, .ctl-office) .footer { text-align: center; }
    :is(.eml-portal, .ctl-office) .footer .eml-logos { justify-content: center; }

    /*
     * TABLES AS CARDS. A table on a phone either shrinks to unreadable or
     * scrolls sideways inside its box, which few people find. Tables the
     * script in ctl-mobile.js has labelled (.ctl-stack) become one card per
     * row, each cell on its own line with its column's name before it.
     */
    table.ctl-stack,
    table.ctl-stack > tbody,
    table.ctl-stack > tbody > tr,
    table.ctl-stack > tbody > tr > td,
    table.ctl-stack > tbody > tr > th { display: block; width: 100% !important; }

    table.ctl-stack > thead { display: none; }

    table.ctl-stack > tbody > tr {
        margin: 0 0 10px;
        padding: 10px 12px;
        border: 1px solid var(--eml-border, #e3e8ee);
        border-radius: var(--ctl-radius-panel);
    }

    table.ctl-stack > tbody > tr > :is(td, th) {
        padding: 4px 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    /* Inside a card, a long title or a status with its ⓘ wraps rather than
       running past the card's edge. */
    table.ctl-stack :is(a, .ctl-status, .label, .text-nowrap) { white-space: normal !important; }

    table.ctl-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 1px;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--eml-muted-text, #66727e);
    }

    /* A table that was only ever a wrapper for scrolling no longer needs to. */
    .table-responsive:has(> table.ctl-stack) { overflow: visible; border: 0; }

    /* Filters folded behind one button (ctl-mobile.js). */
    .ctl-filter-fold > summary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: var(--ctl-touch);
        padding: 8px 14px;
        border: 1px solid var(--eml-border, #cdd4db);
        border-radius: var(--ctl-radius);
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }

    .ctl-filter-fold > summary::-webkit-details-marker { display: none; }
    .ctl-filter-fold[open] > summary { margin-bottom: 10px; }
}

/* The smallest common phone. */
@media (max-width: 380px) {
    :is(.eml-portal, .ctl-office) .page-heading :is(h1, h2) { font-size: 19px !important; }
    :is(.eml-portal, .ctl-office) .ibox-content { padding: 12px 15px; }
}

/* ---------------------------------------------------------------- dark */

:root[data-theme="dark"] table.ctl-stack > tbody > tr { border-color: var(--eml-border, var(--office-line, #31363c)); }

/* ---------------------------------------------------------------- the portal's top bar */

/*
 * One line at a laptop's width. Below 1400px the account menu shows its icon
 * without the name (a screen reader still hears "signed in as ..."), and the
 * search box is narrower until somebody is typing in it.
 */
.eml-portal .navbar-form .form-control { width: 150px; transition: width .2s ease; }
.eml-portal .navbar-form .form-control:focus { width: 210px; }

@media (min-width: 768px) and (max-width: 1399px) {
    .eml-portal .ctl-account-name { display: none; }
}

/* A tablet held sideways or a small laptop: the words without their icons. */
@media (min-width: 768px) and (max-width: 1199px) {
    .eml-portal .navbar-static-top .navbar-nav > li > a > .fa:first-child { display: none; }
    .eml-portal .navbar-static-top .navbar-nav > li > a { padding-left: 10px; padding-right: 10px; }
    .eml-portal .navbar-form .form-control { width: 120px; }
}

/*
 * A tablet held upright: there is no fitting the whole menu on one line, so
 * it folds behind the same menu button a phone has - Bootstrap's own collapsed
 * navbar, extended from 767px up to 991px.
 */
@media (min-width: 768px) and (max-width: 991px) {
    .eml-portal .navbar-static-top .navbar-header { float: none; }
    .eml-portal .navbar-static-top .navbar-toggle { display: block; }
    .eml-portal .navbar-static-top .navbar-collapse.collapse { display: none !important; }
    .eml-portal .navbar-static-top .navbar-collapse.collapse.in,
    .eml-portal .navbar-static-top .navbar-collapse.collapsing { display: block !important; }
    .eml-portal .navbar-static-top .navbar-collapse { overflow-y: auto; border-top: 1px solid var(--eml-border, #e3e8ee); }
    .eml-portal .navbar-static-top :is(.navbar-nav, .navbar-right, .navbar-form) { float: none !important; margin: 6px 0; }
    .eml-portal .navbar-static-top .navbar-nav > li { float: none; }
    .eml-portal .navbar-static-top .navbar-nav > li > a { padding: 10px 15px; }
    .eml-portal .navbar-static-top .navbar-nav > li > a > .fa:first-child { display: inline-block; }
    .eml-portal .navbar-static-top .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .eml-portal .navbar-static-top .navbar-form .form-control { width: 100%; }
    .eml-portal .ctl-account-name { display: inline; }
}