/*  -------------------------------
    Options
    - wq-style: Use this attribute to apply all styles.
    - wq-style-layout: Use this attribute to apply the layout styles.
    - wq-style-no-layout: Use this attribute to disable the layout styles.
    - wq-style-controls: Use this attribute to apply styles to page controls.
    - wq-style-validation: Use this attribute to apply styles to validation.
*/

/* -------------------------------
    Variables
*/

/* Use -impl variables internally in this library to define variables that can be overridden by styling options (like Bootstrap 5) */
:root {
    /* Primary colors */
    --ecy-color-primary-solaryellow: #ffd76d;
    --ecy-color-primary-75-solaryellow: #fedf97;
    --ecy-color-primary-50-solaryellow: #ffebb5;
    --ecy-color-primary-25-solaryellow: #fff5da;
    --ecy-color-primary-galeblue: #80a8cd;
    --ecy-color-primary-75-galeblue: #9fbdd9;
    --ecy-color-primary-50-galeblue: #bed2e4;
    --ecy-color-primary-25-galeblue: #dde7f0;
    --ecy-color-primary-terragreen: #7aa456;
    --ecy-color-primary-75-terragreen: #9bba80;
    --ecy-color-primary-50-terragreen: #bbd0a9;
    --ecy-color-primary-25-terragreen: #dbe6d2;
    --ecy-color-primary-ebbblue: #44688f;
    --ecy-color-primary-75-ebbblue: #728dda;
    --ecy-color-primary-50-ebbblue: #a0b2c5;
    --ecy-color-primary-25-ebbblue: #ced7e1;
    --ecy-color-primary-jettygray: #333333;
    --ecy-color-primary-75-jettygray: #656565;
    --ecy-color-primary-50-jettygray: #979797;
    --ecy-color-primary-25-jettygray: #cacaca;
    /* Secondary colors */
    --ecy-color-secondary-salmonpink: #f2a9a0;
    --ecy-color-secondary-75-salmonpink: #f1bdb9;
    --ecy-color-secondary-50-salmonpink: #f6d3d1;
    --ecy-color-secondary-25-salmonpink: #fae8e7;
    --ecy-color-secondary-lemongrass: #bcd637;
    --ecy-color-secondary-75-lemongrass: #cedf74;
    --ecy-color-secondary-50-lemongrass: #dfeba2;
    --ecy-color-secondary-25-lemongrass: #eef4d0;
    --ecy-color-secondary-pumpkinorange: #f26323;
    --ecy-color-secondary-75-pumpkinorange: #f08361;
    --ecy-color-secondary-50-pumpkinorange: #f5ac95;
    --ecy-color-secondary-25-pumpkinorange: #f9d6ca;
    --ecy-color-secondary-classicclaret: #861626;
    --ecy-color-secondary-75-classicclaret: #568280;
    --ecy-color-secondary-50-classicclaret: #8fabab;
    --ecy-color-secondary-25-classicclaret: #c7d5d4;
    --ecy-color-secondary-evergreen: #135756;
    --ecy-color-secondary-75-evergreen: #a1425c;
    --ecy-color-secondary-50-evergreen: #c18193;
    --ecy-color-secondary-25-evergreen: #efd8d7;
    /* Text colors */
    --ecy-color-text-on-jettygray-galeblue: var(--ecy-color-primary-galeblue);
    --ecy-color-text-on-jettygray-terragreen: var(--ecy-color-primary-terragreen);
    --ecy-color-text-on-jettygray-solaryellow: var(--ecy-color-primary-solaryellow);
    --ecy-color-text-on-jettygray-salmonpink: var(--ecy-color-secondary-salmonpink);
    --ecy-color-text-on-jettygray-pumpkinorange: var(--ecy-color-secondary-pumpkinorange);
    --ecy-color-text-on-jettygray-lemongrass: var(--ecy-color-secondary-lemongrass);
    --ecy-color-text-on-white-ebbblue: var(--ecy-color-primary-ebbblue);
    --ecy-color-text-on-white-jettygray: var(--ecy-color-primary-jettygray);
    --ecy-color-text-on-white-pumpkinorange: var(--ecy-color-secondary-pumpkinorange);
    --ecy-color-text-on-white-classicclaret: var(--ecy-color-secondary-classicclaret);
    --ecy-color-text-on-white-evergreen: var(--ecy-color-secondary-evergreen);
    --ecy-color-text-on-ebbblue-white: #ffffff;
    --ecy-color-text-on-ebbblue-lemongrass: var(--ecy-color-secondary-lemongrass);
    --ecy-color-text-on-ebbblue-solaryellow: var(--ecy-color-primary-solaryellow);
    --ecy-color-text-on-ebbblue-salmonpink: var(--ecy-color-secondary-salmonpink);
    --ecy-color-text-on-solaryellow-jettygray: var(--ecy-color-primary-jettygray);
    --ecy-color-text-on-solaryellow-ebbblue: var(--ecy-color-primary-ebbblue);
    --ecy-color-text-on-solaryellow-classicclaret: var(--ecy-color-secondary-classicclaret);
    --ecy-color-text-on-solaryellow-evergreen: var(--ecy-color-secondary-evergreen);
    --ecy-color-text-on-galeblue-jettygray: var(--ecy-color-primary-jettygray);
    --ecy-color-text-on-galeblue-classicclaret: var(--ecy-color-secondary-classicclaret);
    --ecy-color-text-on-galeblue-evergreen: var(--ecy-color-secondary-evergreen);
    --ecy-color-text-on-terragreen-jettygray: var(--ecy-color-primary-jettygray);
    --ecy-color-text-on-terragreen-classicclaret: var(--ecy-color-secondary-classicclaret);
    /* Font */
    --wq-font-headline: 'Mulish', Arial, sans-serif;
    --wq-font-primary: 'Open Sans', Calibri, Arial, sans-serif;
    /**/
    --wq-color-header: var(--ecy-color-primary-25-galeblue);
    --wq-color-footer: var(--ecy-color-primary-25-galeblue);
    --wq-color-primary: var(--ecy-color-primary-ebbblue);
    --wq-color-secondary: var(--ecy-color-primary-75-jettygray);
    --wq-color-outline: var(--ecy-color-primary-ebbblue);
    --wq-color-body: white;
    --wq-input-border-radius: var(--wq-input-border-radius-impl, 0.375rem);
    --wq-input-border-width: 2px;
    --wq-input-height: 1.75rem;
    /* --wq-input-line-height: var(--wq-input-line-height-impl, 24px); */
    --wq-input-border-color: rgb(118, 118, 118);
    --wq-tile-grid-color: var(--wq-color-primary);
    --wq-tile-grid-size: 200px;
    --wq-tile-grid-outline-size: 3px;
    --wq-tile-grid-gap: 20px;
    --wq-tile-grid-border: 1px solid black;
    --wq-tile-grid-border-radius: 1em;
}

/* -------------------------------
    Font
*/

:is(h1, h2, h3, h4, h5, h6, th, .headline) {
    font-family: var(--wq-font-headline);
    font-weight: 700;
}

th input {
    font-family: var(--wq-font-primary);
    font-weight: 400;
    font-variation-settings: "wdth" 87.5;
}

body {
    font-family: var(--wq-font-primary);
    font-weight: 400;
    font-variation-settings: "wdth" 100;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.font-semicondensed {
    font-variation-settings: "wdth" 87.5;
}

.font-condensed {
    font-variation-settings: "wdth" 75;
}

/* -------------------------------
    Skip Link
*/

.skip-link {
    position: absolute;
    margin: 0.5em;
    padding: 0.2em 1em;
    background-color: var(--wq-color-body);
    border: 1px solid black;
    border-radius: 0.25em;
}

/* -------------------------------
    Ecology logo
*/

svg.ecology-logo.no-text {
    min-width: 55px;
}

svg.ecology-logo.vertical-text, svg.ecology-logo.horizontal-text {
    min-width: 90px;
}

/* -------------------------------
    Basic collapsing animations
*/

.wq-hidden {
    display: none !important;
}

.wq-collapse {
    height: 0px !important;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    white-space: nowrap;
    transition: height 0.4s, padding 0.4s, margin 0.4s;
}

.wq-disappear {
    opacity: 0;
    transition: opacity 0.4s;
}

.wq-expandable {
    transition: height 0.4s;
}

.wq-expandable:not(.wq-expanded) {
    transition: height 0.4s, padding 0.4s, border-radius 0.1s;
    height: 0px !important;
}

/* -------------------------------
    Utility
*/

.wq-fullwidth {
    box-sizing: border-box;
    width: 100%;
}

.wq-rounded {
    border-radius: var(--wq-input-border-radius);
}

.wq-no-border {
    border: 0;
}

.wq-no-background {
    background-color: transparent;
}

.justify-content-stretch {
    justify-content: stretch;
}

.flex-child-grow-1 > * {
    flex-grow: 1;
}

.grid-vcenter {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
}

/* -------------------------------
    Overrides
*/

:is([wq-style], [wq-style-controls]) {
    & button.wq-no-border:hover {
        outline-offset: 0px;
    }

    & button > img {
        vertical-align: text-bottom;
    }
}