/* ####################################
   Boxes

   - Critical Rendering Path: Required
   - Remember that most basic/standard layout can be handled with classes from Blocks.css, so only add special boxes here if needed.
   ################################## */

/*
    Default Box Layout
*/

.box {
    /* When added to a content element on its own, it doesn't do much. That is by design so that authors don't need to constantly worry about overrides. Colours, borders, margins, padding, and other stuff can be hanlded with helper classes. */
    box-sizing: border-box;
    width: 100%;
    padding: var(--site-box-padding);
    margin-bottom: var(--site-box-margin-bottom);
    border-radius: var(--site-box-border-radius);
    /*overflow: hidden;*/
}

    .box > :first-child {
        margin-top: 0 !important;
    }

    .box > h2:first-child,
    .box > h3:first-child,
    .box > h4:first-child {
        /* Strongly opinionated and maybe dangerous: Line heights on headings can disturb box padding and the effect is amplified with headings. This adjustment depends on the line height set at different heading levels and there's no easy way to calculate it dynamically, so the value we set here is a reasonable approximation. Note that .box-title-bar should override this. Note that we don't use line-height in case there are long headings in boxes. */
        margin-top: -0.25em !important
    }

    .box > :last-child {
        margin-bottom: 0 !important;
    }

    .box-wide {
        /* Use wide boxes when you want the background colour to fill the screen but the content is inside a fixed width block. */
        box-sizing: content-box;
        margin-left: -10000em !important;
        margin-right: -10000em !important;
        padding-left: 10000em !important;
        padding-right: 10000em !important;
        border-radius: 0;
    }

    .box > .box-title-bar {
        margin: 0 calc(var(--site-box-padding) * -1) var(--site-box-padding);
        padding: calc(var(--site-box-padding) * 0.666) var(--site-box-padding);
        font-size: var(--site-h3-font-size); /* Do you want all the title bars to be the same size or to let the author choose the size with heading levels? */
    }

        .box > .box-title-bar:not([class*=bg-]) {
            background: var(--site-box-title-bar-bg);
        }

        .box > .box-title-bar:not([class*=color-]) {
            color: var(--site-box-title-bar-text-color);
        }

        .box > .box-title-bar:first-child {
            margin-top: calc(var(--site-box-padding) * -1) !important;
            border-top-left-radius: var(--site-box-border-radius);
            border-top-right-radius: var(--site-box-border-radius);
        }

        .box > .box-title-bar:last-child {
            margin-bottom: calc(var(--site-box-padding) * -1) !important;
            border-bottom-left-radius: var(--site-box-border-radius);
            border-bottom-right-radius: var(--site-box-border-radius);
        }

        .box > .box-title-bar :first-child {
            margin-top: 0 !important;
        }

        .box > .box-title-bar :last-child {
            margin-bottom: 0 !important;
        }

@media screen and (max-width: 375px) {

    .box {
        padding: var(--site-padding-thinner);
    }

}

/*
    Box Styles
    - Intended for blocks/boxes/columns but could be used on anything.
    - Remember the helper classes (padding, margins, align, etc.) can be used with these as a general principle, so if you're creating highly specific block styles then inform the authors or override everything.
    - It may or may not be possible to combine block styles, depending on how they are set up. It's okay to create styles that shouldn't be combined with other styles. But don't let this lead to laziness; try to design robust, re-usable patterns.
    - To do: A cool colour spectrum rule set, incorporating backgrounds and borders and all sorts of stuff. Until then, we've got some basic block style ideas and suggestions and you can create your own set of styles.
    - Box styles are after block/background styles in the cascade in case they apply specific background colours.
*/

.box-border,
.box-border-mid,
.icon-border::before,
.icon-border-mid::before,
[class*=border]:not(.icon-border):not(.icon-border-mid):not(.image-border):not(table) {
    /* What's with the "nots"? Some elements handle borders their own way. */
    border-color: var(--site-border-color);
    border-width: var(--site-border-width);
    border-style: solid;
}

.box-border-light,
.icon-border-light::before {
    border-color: var(--site-border-color-bright);
    border-width: var(--site-border-width);
    border-style: solid;
}

.box-border-dark,
.icon-border-dark::before {
    border-color: var(--site-border-color-dark);
    border-width: var(--site-border-width);
    border-style: solid;
}

.box-shadow-soft {
    box-shadow: var(--site-shadow-soft);
}

.box-shadow-wide {
    box-shadow: var(--site-shadow-wide);
}

.box-highlight {
    box-sizing: border-box;
    overflow: hidden;
    margin: var(--site-margin-thick) 0;
    font-size: var(--font-size-big);
    font-style: italic;
    font-family: 'Times New Roman', Times, serif;
    background: var(--site-color-1-lightest);
    border-top: var(--site-color-1-mid-light) 3px solid;
    border-bottom: var(--site-color-1-mid-light) 3px solid;
    box-shadow: 5px 5px 20px rgb(0 0 0 / 15%);
    transform: rotate( -1.25deg );
}