/*---- e-Oppi CSS styles 0.0.1 --- 2020-09-04 ----*/

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;500;700&display=swap');



html {
    /* e-Oppi colors */
    --eoppi-grey-5: hsl(0, 0%, 5%);
    --eoppi-grey-15: hsl(0, 0%, 15%);
    --eoppi-grey-50: hsl(0, 0%, 50%);
    --eoppi-grey-90: hsl(0, 0%, 90%);
    --eoppi-grey-95: hsl(0, 0%, 95%);
    --eoppi-grey-98: hsl(0, 0%, 98%);
    --eoppi-white: #fff;
    --eoppi-blue-logo: #006DA7;
    --eoppi-blue-logo-40: #99C5DC;      /* Logosininen 40% tint */
    --eoppi-blue-logo-25: #BFDBE9;      /* Logosininen 25% tint */
    --eoppi-blue-logo-10: #E5F0F6;      /* Logosininen 10% tint */
    --eoppi-blue-logo-dark: #00537E;    /* Logosininen darker swatch */
    --eoppi-blue-light: #008BC3;
    --eoppi-blue-light-70: #4BADD4;
    --eoppi-blue-bg: #E3F3F6;
    --eoppi-blue-bg-alt: #CCE8F3;       /* e-Oppi vaalea 70 20% opacity */
    --eoppi-red: #a61416;               /* Punainen */
    --eoppi-red-40: #dba1a2;            /* Punainen 40% tint */
    --eoppi-red-25: #E9C4C5;            /* Punainen 25% tint */
    --eoppi-green-hl: #24b34b;          /* Korostusvihreä */
    --eoppi-green-hl-40: #a7e1b7;       /* Korostusvihreä 40% tint */
    --eoppi-green-hl-25: #c8ecd2;       /* Korostusvihreä 25% tint */
    --eoppi-purple-light-hl: #933cef;   /* Korostusvioletti kirkas */
    --eoppi-color-0: #dbeff7;
    --eoppi-color-1: #55158c;           /* Korostusvioletti */
    --eoppi-color-1-80: #7643A2;        /* Korostusvioletti 80% tint */
    --eoppi-color-1-40: #bba1d1;        /* Korostusvioletti 40% tint */
    --eoppi-color-1-25: #d4c4e2;        /* Korostusvioletti 25% tint */
    --eoppi-color-2: #253a6d;           /* Tumma sininen */
    --eoppi-color-2-40: #a8b0c5;        /* Tumma sininen 40% tint */
    --eoppi-color-2-25: #c8cedb;        /* Tumma sininen 25% tint */
    --eoppi-color-3: #3a7527;           /* Vihreä */
    --eoppi-color-3-40: #b0c8a9;        /* Vihreä 40% tint */
    --eoppi-color-3-25: #cedcc9;        /* Vihreä 25% tint */
    --eoppi-color-4: #9d764f;           /* Vaalea ruskea */
    --eoppi-color-4-40: #d8c8b9;        /* Vaalea ruskea 40% tint */
    --eoppi-color-4-25: #e6ddd3;        /* Vaalea ruskea 25% tint */
    --eoppi-color-5: #cc5817;           /* Korostusoranssi */
    --eoppi-color-5-40: #ebbca2;        /* Korostusoranssi 40% tint */
    --eoppi-color-5-25: #f2d5c5;        /* Korostusoranssi 25% tint */
    --eoppi-color-6: #8c210f;           /* Korostusruoste */
    --eoppi-color-6-40: #d1a69f;        /* Korostusruoste 40% tint */
    --eoppi-color-6-25: #e2c7c3;        /* Korostusruoste 25% tint */
    --eoppi-color-7: #ffee25;           /* Keltainen */
    --eoppi-color-7-40: #fff8a8;        /* Keltainen 40% tint */
    --eoppi-color-7-25: #fffbc8;        /* Keltainen 25% tint */

    /* Replaced by different subjects' own colors and patterns. */
    --eoppi-subject-color: #8B5920;
    --eoppi-subject-color-40: #D1BDA6;
    --eoppi-subject-color-25: #E2D5C7;
    --eoppi-subject-color-10: #F3EEE9;

    --eoppi-pattern: url("https://e-oppi.fi/opiq/patterns/pattern-20-nature.svg");
    --eoppi-pattern-dark: url("https://e-oppi.fi/opiq/patterns/pattern-dark-20-nature.svg");
    --eoppi-pattern-02: url("https://e-oppi.fi/opiq/patterns/pattern-02-nature.svg");
    --eoppi-pattern-dark-02: url("https://e-oppi.fi/opiq/patterns/pattern-dark-02-nature.svg");
    --eoppi-pattern-size: 7.82rem;
    --eoppi-pattern-size-large: 15.63rem;

    --gap: 1rem;
    --radiussmall: 0.15rem;
	--radius: 0.3rem;
	--radiuslarge: 0.5rem;
}


/*
 *      LAYOUTING THINGS
 */

.chapterBar, .taskbar {
    background: var(--eoppi-white);
    padding: calc(var(--gap)/2) var(--gap);
    opacity: 1;
    overflow: auto;
    border-bottom: 1px solid var(--eoppi-grey-95);
}

.chapterBar > span {
    padding: 0.7rem 0;
}

.chapterBar > span span {
    padding: 0; /* CMS style reset */
}

.block h3, .block h4, .block h5, .block h6, .block p,
.block .exercise-description, .block .intro, .block .options, .block cite,.block  span.origin, .block .answers,
.block .twoCols, .block .threeCols, .block .fourCols, .block .fiveCols,
div[class*="kit-VCrZo-box-"],
.block.section-speak-content {
    margin-bottom: var(--gap);
}

.container .block {
    padding-bottom: 0;
}

div[class*="kit-VCrZo-box-"] > :first-child,
.kit-VCrZo-box-exercise .exercise .head h3 {
    margin-top: 0;
}

div[class*="kit-VCrZo-box-"] > :last-child {
    margin-bottom: 0;
}



/*
 *      GENERAL TEXT STUFF
 */

::selection {
   background: var(--eoppi-blue-logo-dark);
   color: var(--eoppi-blue-logo-10);
 }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fira Sans Condensed', sans-serif;
    letter-spacing: normal;
    font-weight: 500;
}

h1, h2 {
    font-weight: 700;
}

/* h3-h6 are usable in the editor. */
.block h3,
.block h4,
.block h5,
.block h6 {
    clear: both;
    margin-top: calc(var(--gap)*2);
    margin-bottom: var(--gap);
}

.block #mediaGallery p,
.block .list li,
.block p,
.block .common.serif,
.block .list:not(.sans-serif) li,
.block .fox-sliders .value {
    font-family: Arial, sans-serif;
}

.block #mediaGallery p,
.block .list li,
.block .common.serif,
.block .fox-sliders .value,
.block cite,
.block span.origin,
.block .answers,
.block .caption,
.block .options,
.block h6,
.block p {
    color: var(--eoppi-grey-15);
    font-size: 1rem;
}

#mediaCaptionContext .caption {
    color: var(--eoppi-grey-90);
}

.block a:link,
.block a:visited,
.block .anchorMarker,
.block .internalLinkMarker,
.chapterBar a:link,
.chapterBar a:visited {
    color: var(--eoppi-blue-logo);
}

.block a:hover,
.block a:active,
.block a:focus,
.block .anchorMarker:hover,
.block .anchorMarker:active,
.block .anchorMarker:focus,
.block .internalLinkMarker:hover,
.block .internalLinkMarker:active,
.block .internalLinkMarker:focus,
.chapterBar a:hover,
.chapterBar a:active,
.chapterBar a:focus {
    color: var(--eoppi-blue-light);
}

.block .anchorMarker,
.block .internalLinkMarker {
    border-bottom: 0.1rem solid var(--eoppi-blue-logo);
}

.block .anchorMarker:hover,
.block .anchorMarker:active,
.block .anchorMarker:focus,
.block .internalLinkMarker:hover,
.block .internalLinkMarker:active,
.block .internalLinkMarker:focus {
    border-bottom-color: #008BC3;
}

.block .definition {
    color: var(--eoppi-color-1-80);
    border-bottom: 0.1rem dashed var(--eoppi-color-1-80);
    padding-bottom: 0;
}

.block .media .caption {
    font-style: italic;
    background: var(--eoppi-grey-95);
    padding: calc(var(--gap)/2) var(--gap);
}

.block blockquote {
    border-left: var(--eoppi-subject-color-10) solid calc(var(--gap)/2);
    padding-left: var(--gap);
}

.block blockquote p {
    quotes: "\0022" "\0022";
}

.block blockquote p::before,
.block blockquote p::after {
    font-style: italic;
    font-weight: bold;
    color: var(--eoppi-subject-color-40);
}

.block blockquote p::before {
    content: open-quote;
    padding-right: 0.4rem;
}

.block blockquote p::after {
    content: close-quote;
}

.block blockquote cite::before {
    content: "\2013\0020";
}




/* --- Exercises --- */

.block .drop-option,
.block .drag-option-content,
.block .dragdrop .group:not([data-default=true]),
.block .dragdrop .groupContent > ul > li,
.block .sortElements .elements > li {
    background: var(--eoppi-blue-bg);
}

.block .drop-option,
.block .drag-option-content,
.block .droppable-area .drag-option-content,
.block .droppable-area:empty,
.block .dragdrop .group,
.block .dragdrop .group:not([data-default=true]) > .groupContent,
.block .dragdrop .groupContent > ul > li,
.block .sortElements .elements > li {
    border-color: var(--eoppi-blue-light-70);
}

.block .sortElements .elements > li {
    border-radius: var(--radiussmall);
}

.block .sortElements .elements > li:first-child {
    border-top-left-radius: var(--radius);
    border-bottom-left-radius: var(--radius);
}

.block .sortElements .elements > li:last-child {
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}

.block .puzzle td.entry,
.block .puzzle input,
.block .rf-tablestyle {
    background-color: var(--eoppi-grey-98);
}

.block .rf-tablestyle {
    border-color: var(--eoppi-grey-90);
}

.block .selectedWord,
.block .puzzle .active,
.puzzle-clues .clues-active {
    background-color: var(--eoppi-color-7-25);
}

.block .selectedWord.selectedWordfirst,
.block .puzzle td input:focus {
    background-color: var(--eoppi-color-7-40);
}

.block .clickElement1 {
    background-color: var(--eoppi-green-hl);
}

html .block table tr td.selectedWordTrajectory {
    background-color: var(--eoppi-grey-90)
}

.block .wordsearchContext .wrong,
.block .math-entry.wrong,
.block input.wrong,
.block .gap.wrong,
.block [data-is-evaluation-unit].wrong .gap,
.block select.wrong,
.block .puzzle-clues .wrong,
.block .taskSelectNodes .node.wrong,
.block .editText .performed-action-container .performed-action.incorrect,
.block .dragToArea li.wrong {
    color: var(--eoppi-color-6);
}

.block .taskSelectNodes .node.wrong,
.block .editText .needed-action-container {
    border-color: var(--eoppi-color-6);
}

.block .drag-option-content.wrong,
.block .dragdrop .group .groupContent > ul > li.wrong,
.block .sortElements .elements > li.wrong,
.block .socket.wrong,
.block .socket.wrong .droppable-option,
.block .taskSelectNodes .node.selected.wrong {
    background-color: var(--eoppi-color-6);
    border-color: var(--eoppi-color-6) !important; /* Needs !important because there's one in the Opiq style sheet. */
}

.block .editText .performed-action-container .performed-action.incorrect {
    background-color: var(--eoppi-color-6-25);
}

.block .wordsearchContext .correct,
.block .math-entry.correct,
.block input.correct,
.block .gap.correct,
.block [data-is-evaluation-unit].correct .gap,
.block select.correct,
.block .puzzle-clues .correct,
.block .taskSelectNodes .node.correct.selected,
.block .puzzle input.done,
.block .editText .performed-action-container .performed-action.correct,
.block .dragToArea li.correct {
    color: var(--eoppi-color-3);
}

.block .taskSelectNodes .node.correct.selected {
    border-color: var(--eoppi-color-3);
    background-color: transparent;
}

.block .drag-option-content.correct,
.block .dragdrop .group .groupContent > ul > li.correct,
.block .sortElements .elements > li.correct,
.block .socket.correct,
.block .socket.correct .droppable-option {
    background-color: var(--eoppi-color-3);
    border-color: var(--eoppi-color-3);
}

.block .puzzle input.done,
.block .editText .performed-action-container .performed-action.correct {
    background-color: var(--eoppi-color-3-25);
}

.block .taskSelectNodes .node.selected {
    color: var(--eoppi-white);
    background-color: var(--eoppi-grey-15);
}

.block .checkbox-wrap.absolute-element,
.block .gap-wrap.absolute-element,
.block .radio-wrap.absolute-element,
.block .select.absolute-element {
    background-color: rgba(242, 242, 242, 0.75); /* --eoppi-grey-95 */
    border: 0.1rem solid var(--eoppi-grey-50);
}

.block .dragToAreaItem.active,
.block .dragToAreaItem:hover {
    background-color: var(--eoppi-color-7);
    box-shadow: 0 0 var(--gap) calc(var(--gap)/2) var(--eoppi-color-7);
}

.block .droppable-element {
    border-radius: var(--radius);
}

.block .droppable-area,
.block .droppable-content {
    border-radius: calc(var(--radius)/2);
}



/*
 *      KIT SPECIFIC BITS
 */

/* --- Text Styles --- */

.kit-VCrZo-text-highlight {
    background-color: var(--eoppi-green-hl-40);
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.kit-VCrZo-text-button {
    background: var(--eoppi-blue-logo);
    border-radius: var(--radius);
    color: var(--eoppi-white);
    display: inline-block;
    margin-bottom: 0.3rem;
    padding: 0.3rem 0.8rem;
    text-decoration: none !important;
}

.kit-VCrZo-text-button:hover {
    background-color: var(--eoppi-blue-light);
}


/* --- Box Styles --- */

.kit-VCrZo-box-highlight,
.kit-VCrZo-box-example,
.kit-VCrZo-box-exercise,
.kit-VCrZo-box-extra-info {
    clear: both;
    padding: var(--gap);
    overflow: hidden;
}

.kit-VCrZo-box-highlight {
    background: var(--eoppi-grey-95);
    border-left: 0.2rem solid var(--eoppi-subject-color-40);
}

.kit-VCrZo-box-highlight.kit-VCrZo-color-1 { background: var(--eoppi-color-1-25); border-color: var(--eoppi-color-1-40); }
.kit-VCrZo-box-highlight.kit-VCrZo-color-2 { background: var(--eoppi-color-2-25); border-color: var(--eoppi-color-2-40); }
.kit-VCrZo-box-highlight.kit-VCrZo-color-3 { background: var(--eoppi-color-3-25); border-color: var(--eoppi-color-3-40); }
.kit-VCrZo-box-highlight.kit-VCrZo-color-4 { background: var(--eoppi-color-4-25); border-color: var(--eoppi-color-4-40); }
.kit-VCrZo-box-highlight.kit-VCrZo-color-5 { background: var(--eoppi-color-5-25); border-color: var(--eoppi-color-5-40); }
.kit-VCrZo-box-highlight.kit-VCrZo-color-6 { background: var(--eoppi-color-6-25); border-color: var(--eoppi-color-6-40); }

.kit-VCrZo-box-highlight.kit-VCrZo-color-3.kit-VCrZo-box-highlight-correct,
.kit-VCrZo-box-highlight.kit-VCrZo-color-6.kit-VCrZo-box-highlight-incorrect {
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 3rem;
    padding-right: 3.5rem;
}

.kit-VCrZo-box-highlight.kit-VCrZo-color-3.kit-VCrZo-box-highlight-correct {
    background-image: url('https://e-oppi.fi/pedanet/icons/highlight/highlight-correct.png');
}

.kit-VCrZo-box-highlight.kit-VCrZo-color-6.kit-VCrZo-box-highlight-incorrect {
    background-image: url('https://e-oppi.fi/pedanet/icons/highlight/highlight-incorrect.png');
}

.kit-VCrZo-box-example {
    background: var(--eoppi-grey-95);
    border-left: 0.2rem solid var(--eoppi-red);
}

.kit-VCrZo-box-summary {
    background: var(--eoppi-subject-color-10);
    border-top: 1px solid var(--eoppi-subject-color-40);
    border-bottom: 1px solid var(--eoppi-subject-color-40);
    clear: both;
    padding: var(--gap);
    overflow: hidden;
}

.kit-VCrZo-box-reference:before {
    content: '';
    border-top: solid 1px var(--eoppi-subject-color);
    display: block;
    margin-bottom: 0.3rem;
    width: 25%;
}

.kit-VCrZo-box-reference p {
    font-size: 0.8rem;
}

.kit-VCrZo-box-exercise {
    border: 0.2rem solid var(--eoppi-subject-color-40);
    border-image: linear-gradient(135deg, var(--eoppi-subject-color-40), var(--eoppi-subject-color-10) 25%, var(--eoppi-grey-95) 35%, var(--eoppi-grey-95) 65%, var(--eoppi-subject-color-10) 75%,var(--eoppi-subject-color-40)) 1;
}

.kit-VCrZo-box-exercise .reflect {
    margin-bottom: 0;
}

.kit-VCrZo-box-extra-info {
    background: var(--eoppi-grey-98);
    border: 0.1rem dashed var(--eoppi-subject-color);
}

.kit-VCrZo-box-formula {
    margin-left: 1rem;
}

/* Tables */

.kit-VCrZo-box-table table.common {
    background: transparent;
    border-collapse: separate;
    border-spacing: 0.2rem 0;
    clear: both;
    vertical-align: middle;
    margin-bottom: var(--gap);
}

.kit-VCrZo-box-table table.common td {
    background-color: var(--eoppi-white);
    border: 0;
    border-bottom: 0.05rem solid var(--eoppi-grey-50);
    color: var(--eoppi-grey-15);
    padding: 0.3rem 0.5rem;
    vertical-align: middle;
}

.kit-VCrZo-box-table-caption h6 {
    background: var(--eoppi-blue-logo);
    background-blend-mode: overlay;
    background-clip: padding-box;
    background-image: var(--eoppi-pattern);
    background-position: center;
    background-repeat: repeat;
    background-size: var(--eoppi-pattern-size);
    border: 0.2rem solid transparent;
    border-top: 0;
    color: var(--eoppi-white);
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 0;
    line-height: 1.2rem;
    padding: 0.5rem;
    text-align: left;
}

.kit-VCrZo-box-table-caption table.common {
    margin-top: 0;
}

.kit-VCrZo-box-table table.common tr:nth-child(odd) td {
    background-color: var(--eoppi-grey-98);
}

.kit-VCrZo-box-table-row table.common tr:first-child td,
.kit-VCrZo-box-table-column table.common tr td:first-child {
    background: var(--eoppi-grey-90) !important;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    vertical-align: middle;
}



/* --- Section Styles --- */

.section.kit-VCrZo-section-intro {

}



.kit-VCrZo-section-exercise {

}




/*
 *  RESPONSIVE STUFFS
*/

@media (min-width: 401px) {

}

@media (max-width: 768px) {
    #page-kit-chapter .section:not(.permanently-visible) .sectionTitle {
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .chapterBar {
        margin-top: calc(var(--gap)*1.5);
    }

    .sectionTitle {
        margin-bottom: calc(var(--gap)*3);
    }
}

@media (min-width: 769px) {
    .section > .container {
        border-top: 1px solid var(--eoppi-grey-50);
        padding: calc(var(--gap)*4) calc(var(--gap)/2);
    }

    .chapterBar,
    .taskBar {
        margin-top: calc(var(--gap)*2);
    }

    .block .main {
        width: calc(60% - (var(--gap) / 2));
    }

    .block .side {
        width: calc(40% - (var(--gap) / 2));
    }

    .sectionTitle {
        margin-bottom: calc(var(--gap)*3);
        width: 100%;
        line-height: 2rem; /* TODO check line height */
    }

    .block > h1,
    .container > .exercise h1,
    .container > h1 {
        margin: calc(var(--gap)*3) 0;
        font-size: 3rem;
        line-height: 3rem; /* TODO check line height */
    }

    .block h2, .sectionTitle { font-size: 2.5rem; }
    .block h3 { font-size: 1.8rem; }
    .block h4 { font-size: 1.5rem; }
    .block h5 { font-size: 1.35rem; }
    .block h6 { font-size: 1.25rem; }

    .kit-VCrZo-box-float-media-left .media,
    .kit-VCrZo-box-float-media-right .media {
        width: calc(50% - (var(--gap)/2));
        margin-bottom: calc(var(--gap)/2);
    }

    .kit-VCrZo-box-float-media-left .media {
        clear: left;
        float: left;
        margin-right: var(--gap);
    }

    .kit-VCrZo-box-float-media-right .media {
        clear: right;
        float: right;
        margin-left: var(--gap);
    }

    .kit-VCrZo-box-float-media-left p,
    .kit-VCrZo-box-float-media-right p {
        display: inherit;
        clear: none;
    }

    .kit-VCrZo-box-float-media-left .media + .media,
    .kit-VCrZo-box-float-media-right .media + .media {
        margin-top: calc(var(--gap)/2);
    }

    .section.kit-VCrZo-section-summary {
        background: var(--eoppi-grey-98);
        background-blend-mode: normal;
        background-clip: padding-box;
        background-image: var(--eoppi-pattern-dark-02);
        background-position: center;
        background-repeat: repeat;
        background-size: var(--eoppi-pattern-size-large);
        border-top: 1px solid var(--eoppi-grey-90);
        border-bottom: 1px solid var(--eoppi-grey-90);
    }

    .section.kit-VCrZo-section-summary .container,
    .kit-VCrZo-section-intro .container,
    .kit-VCrZo-section-intro + .section .container,
    .section.kit-VCrZo-section-summary + .section .container,
    .section:first-of-type > .container,
    .section:first-of-type .background ~ .container,
    #kit-last-section > .container,
    #opiq-footer > .container {
        border-top: 0;
    }

}