@import "imports/normalize.css";
@import "imports/resets.css";
@import "imports/fontfaces.css";
@import "imports/inputs.css";
@import "imports/buttons.css";
@import "imports/animations.css";
@import "imports/layout.css";

body>form {
    /*Targets the form that shows on local to select a host, keeps it out of page flow*/
    position: fixed;
    bottom: 0;
}

#page-wrap {
    background: var(--grey-wash);
    font-family: var(--base-font);
    color: var(--tertiary-colour);
    /*Height and flex column keep footer floored*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#content-wrap {
    /*Mid-level page wrapper for page body, spaces apart from header/footer*/
    padding: 30px 0 40px;
    color: var(--tertiary-colour);
    width: 100%;
}

/*==Page contentstyling==*/
/*Site column design can be applied in header/footer/main any element where we want a consistent centered page width*/
.site-column {
    margin: 0 auto;
}

@media only screen and (max-width:767px) {
    .site-column {
        width: 100%;
        padding: 15px;
    }
}

@media only screen and (min-width:768px) and (max-width:1199px) {
    .site-column {
        width: 90%;
    }
}

@media only screen and (min-width:1200px) {
    .site-column {
        width: 1000px;
    }
}

.content-header {
    margin-bottom: 20px;
}

hr {
    display: none;
}

@media only screen and (min-width: 541px) {
    /*Default class to wrap sections of content in to create a visual breakdown on desktop*/
    .content-panel {
        padding: var(--content-margin) 20px 0; /*Remove bottom spacing within container; this will be spaced by the bottom margin of the last child*/
        background: #fff;
        border: 2px solid var(--grey-light);
        border-radius: 8px;
    }

    hr {
        display: block;
        border: 2px solid var(--grey-light);
        margin-bottom: var(--content-margin);
    }
}

/*Keeps the spacing in content panels standardised at edges, top and bottom by controlling margins of child elements*/
.content-panel {
    margin-bottom: var(--content-margin);
}
.content-panel > *:first-child {
   margin-top: 0
}

.content-panel .btn {
    padding: 1.2rem 2rem;
}

.content-panel-row .content-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@media only screen and (min-width:451px) and (max-width:767px) {
    .content-panel-row {
        max-width: 500px;
        margin: 0 auto;
    }
}

@media only screen and (min-width:768px) {
    .content-panel-row {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
    }

    .content-panel {
        flex: 1;
    }
}

.btn, .alert, .input-group, p, h1, h2, h3, h4, ul, ol {
    /*Generally target the elements that will be listed within page content and provide consistent vertical spacing*/
    margin-bottom: var(--content-margin);
}

button.link {
    background-color: transparent;
    color: #578AC3;
    text-decoration: underline;
    cursor: pointer;
    margin: 0;
    padding: 0;
    display: block;
    margin-bottom: var(--content-margin);
}

.link.link-helper {
    margin-top: var(--content-margin);
    margin-bottom: 0;
}

button.link.inline-link {
    display: inline;
    margin-bottom: 0;
}

.content-nav {
    display: flex;
    flex-direction: column;
}

.content-nav .btn {
    margin-bottom: 15px;
}

@media only screen and (min-width:768px) {
    /*Desktop override to align buttons logically from left-right, making sure the action/primary button is to the right and any other buttons remain pulled left by default*/
    .content-nav {
        flex-direction: row;
        justify-content: space-between
    }
    .content-nav .btn-action, .content-nav .btn-primary {
        order: 3; /*Order: 2 would be fine here since current design is only ever 1 or 2 buttons, but 3 has same outcome and future-proofs in case we need a third button for some godless reason*/
        margin-left: auto; /*Makes sure the primary or action button will always be pushed to the right*/
    }
}

.grid {
    /*Generic grid helper class to apply dispaly settings and column/rows in later media queries*/
    display: grid;
    align-items: start;
    column-gap:2rem;
}

@media only screen and (max-width:450px) {
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (min-width:451px) and (max-width:767px) {
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (min-width:768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.dashboard-grid {
    /*Specific class for the homepage button/tile design, adding gaps and margins to space the elements*/
    display: grid;
    gap: 2rem;
    margin-bottom: var(--content-margin);
}

.dashboard-grid > a {
    text-align: center;
    transition: all 0.2s ease-in-out;
    border-radius: 8px;
    padding: 5px;
    width: 100%;
    height: 17rem;
    min-height: 170px;
}

.dashboard-grid > a > span {
    display: inline-grid;
    color: white;
    font-weight: 600;
    font-size: 1.7rem;
    text-decoration: none;
    line-height: 2.2rem;
}

/*The .dashboard-grid columns and <a> spans vary to allow for the centring of the
  variable number of tiles on the dashboard for AXA (7 tiles) and Allianz (6 tiles).
  When we go back to one underwriter we should clear this up.*/
@media only screen and (max-width:450px) {
    .dashboard-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen and (min-width:451px) and (max-width:767px) {
    .dashboard-grid {
        grid-template-columns: repeat(12, 1fr);
    }

    .dashboard-grid > a {
        grid-column: span 6;
    }

    .dashboard-grid:has(:nth-last-child(7)) > a:nth-last-child(1) {
        grid-row-start: 4;
        grid-column: 4 / span 6;
    }
}

@media only screen and (min-width:768px) {
    .dashboard-grid:has(:nth-last-child(6)) {
        grid-template-columns: repeat(3, 1fr);
    }

    .dashboard-grid:has(:nth-last-child(7)) {
        grid-template-columns: repeat(16, 1fr);
    }

    .dashboard-grid > a {
        height: 18.5rem;
        min-height: 185px;
    }

    .dashboard-grid:has(:nth-last-child(7)) > a {
        grid-column: span 4;
    }

    .dashboard-grid:has(:nth-last-child(7)) > a:nth-last-child(3) {
        grid-row-start: 2;
        grid-column: 3 / span 4;
    }
}

details {
    display: inline-block;
}

details summary {
    cursor: pointer;
    margin-bottom: var(--content-margin);
}

/*Very basic replication of bootstrap alert class, more variants can be added as needed*/
.alert {
    padding: var(--content-margin) 20px 0; /*Remove bottom spacing within container; this will be spaced by the bottom margin of the last child*/
    border-radius: 4px;
    overflow: auto; /*Fixes a margin collapse issue which otherwise causes child element margins to push elements outside of this container*/
}

.alert > *:first-child {
    margin-top: 0
}

.alert-success {
    background: #C6DBBF;
    color: #1f4911;
}

.alert-info {
    background: #e5ecf5;
    color: #1E4776;
}

.alert-warning {
    background: #feebd2;
    color: #955d11;
}

.alert-danger {
    background: #fbd2d3;
    color: #750F13;
}

.alert-link {
    background: #f0f0f0;
    display: flex;
    gap: 10px;
}

.alert-flex {
    display: flex;
    gap: 10px;
}

@media only screen and (max-width:540px) {
    .alert-link {
        /*Breakpoint triggers when the section panel BG disappears, so add a border to contrast with the now-grey BG*/
        border: 3px solid #d1d1d1;
    }
}

.icon-circle-check {
    height: 30px;
    width: 30px;
    -webkit-mask-image: url(/img/icons.svg#circle-check);
    mask-image: url(/img/icons.svg#circle-check);
    background-color: #36851b;
}

.icon-check {
    height: 30px;
    width: 40px;
    -webkit-mask-image: url(/img/icons.svg#check);
    mask-image: url(/img/icons.svg#check);
    background-color: #36851b;
}

.icon-circle-cross {
    height: 30px;
    width: 30px;
    -webkit-mask-image: url(/img/icons.svg#circle-cross);
    mask-image: url(/img/icons.svg#circle-cross);
    background-color: #98222d;
}

.icon-cross {
    height: 30px;
    width: 40px;
    -webkit-mask-image: url(/img/icons.svg#cross);
    mask-image: url(/img/icons.svg#cross);
    background-color: #98222d;
}

.icon-pdf {
    height: 30px;
    width: 20px;
    -webkit-mask-image: url(/img/icons.svg#file-pdf);
    mask-image: url(/img/icons.svg#file-pdf);
    background-color: #ce4949;
}

.icon-doc {
    height: 30px;
    width: 20px;
    -webkit-mask-image: url(/img/icons.svg#file-doc);
    mask-image: url(/img/icons.svg#file-doc);
    background-color: #588ac2;
}

.contact-header {
    font-weight: 600;
    font-size: 2rem;
}

/*Helper classes*/
.full-width {
    width: 100%;
}

.auto-width {
    width: auto;
}

.mt-0 {
    margin-top: 0;
}

.mb-0 {
    margin-bottom: 0 !important;
}

span.staticformvalue {
    display: block;
    margin-bottom: 5px;
}

/*Taken from stackoverflow. Hides text visually, but keeps it accessible to screen readers.*/
/* https://stackoverflow.com/questions/62107074/how-to-hide-a-text-and-make-it-accessible-by-screen-reader/62109988#62109988 */
.visually-hidden {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

#generalenquiry::before,
#updatetraveller::before,
#updatemedical::before,
#amendcover::before,
#policydocuments::before,
#policyrenewal::before,
#policycancellation::before,
#covid::before {
    content: "";
    height: 100px;
    background-color: #fff;
    margin-top: 15px;
}

#generalenquiry::before {
    -webkit-mask-image: url(/img/icons.svg#circle-question);
    mask-image: url(/img/icons.svg#circle-question);
}
#updatetraveller::before {
    -webkit-mask-image: url(/img/icons.svg#id-card);
    mask-image: url(/img/icons.svg#id-card);
}
#updatemedical::before {
    -webkit-mask-image: url(/img/icons.svg#med-kit);
    mask-image: url(/img/icons.svg#med-kit);
}
#amendcover::before {
    -webkit-mask-image: url(/img/icons.svg#cog);
    mask-image: url(/img/icons.svg#cog);
}
#policydocuments::before {
    -webkit-mask-image: url(/img/icons.svg#file-send);
    mask-image: url(/img/icons.svg#file-send);
}
#policyrenewal::before {
    -webkit-mask-image: url(/img/icons.svg#renew);
    mask-image: url(/img/icons.svg#renew);
}
#policycancellation::before {
    -webkit-mask-image: url(/img/icons.svg#circle-cross);
    mask-image: url(/img/icons.svg#circle-cross);
}
#covid::before {
    -webkit-mask-image: url(/img/icons.svg#mask);
    mask-image: url(/img/icons.svg#mask);
}