/*
 Theme Name:   Skt. Pauls Skole
 Theme URI:    https://da9l.dk
 Description:  Bricks Builder based child theme for Skt. Pauls Skole
 Author:       Daniel Garde
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

.brx-body {
    min-height: 100vh;
}
.brx-body.admin-bar {
    min-height: calc(100vh - var(--wp-admin--admin-bar--height));
}

#brx-content {
    padding: 2rem 0 3rem;
    @media (max-width: 1140px) {
        padding: 2rem 20px 3rem;
    }
}

.alignfull > .alignfull {
    left: 0;
    right: 0;
}

.alignfull,
.wp-block-categories-list.alignfull {
    width: 100vw;
}

.wp-block-group-is-layout-grid {
    display: grid;
    gap: 2rem;
}

.wp-block-image {
    margin: 1rem 0;
}

.wp-block-heading:first-child {
    margin-top: 0;
}

button.h1 {
    font-size: 36px;
    margin-bottom: 0.5em;
    line-height: 1.4;
    background-color: transparent;
    font-family: "Palantino Linotype";
}

p + ul,
p + ol {
    margin-top: 0.5rem;
}

p + h1,
p + h2,
p + h3,
p + h4,
p + h5,
p + h6 {
    margin-top: 1.5rem;
}

@media screen and (min-width: 768px) {
    .wp-block-group[data-columns] {
        column-count: attr(data-columns number);
        column-gap: 4rem;
    }
}

a[href*=".pdf"],
a[href*=".xls"],
a[href*=".xlsx"],
a[href*=".doc"],
a[href*=".docx"],
a[href*=".zip"] {
    display: inline-flex;
    align-items: center;
}

a[href*=".pdf"]::after,
a[href*=".xls"]::after,
a[href*=".xlsx"]::after,
a[href*=".doc"]::after,
a[href*=".docx"]::after,
a[href*=".zip"]::after {
    speak: never;
    content: "";
    background-color: currentColor;
    background-size: contain;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 7px;
}

a[href*=".pdf"]::after {
    -webkit-mask: url("assets/pdf.svg") no-repeat center / contain;
    mask: url("assets/pdf.svg") no-repeat center / contain;
}

a[href*=".zip"]::after {
    -webkit-mask: url("assets/zip.svg") no-repeat center / contain;
    mask: url("assets/zip.svg") no-repeat center / contain;
}

a[href*=".xls"]::after,
a[href*=".xlsx"]::after {
    -webkit-mask: url("assets/xls.svg") no-repeat center / contain;
    mask: url("assets/xls.svg") no-repeat center / contain;
}

a[href*=".doc"]::after,
a[href*=".docx"]::after {
    -webkit-mask: url("assets/doc.svg") no-repeat center / contain;
    mask: url("assets/doc.svg") no-repeat center / contain;
}

.wp-block-button__link {
    display: flex !important;
    align-items: center;
}

.wp-element-button {
    line-height: 1;
}

.wp-block-buttons-is-layout-flex {
    display: flex;
    gap: 1rem;
}

.brxe-post-content > .wp-block-list {
    margin-left: 2rem;
}

.brxe-post-content {
    p,
    ul,
    ol,
    .wp-block-group-is-layout-constrained {
        max-width: 90ch;
    }
}

:where(.brxe-post-content a):not(
    .no-line,
    .brxe-button,
    .wp-block-button__link
) {
    color: var(--green-700);
    text-decoration: underline;
}

#iframe-wrapper iframe {
    width: 100%;
    height: 740px;
    border: none;
    display: block;
}
#iframe-wrapper {
    height: 740px;
    padding: 10px 20px;
}

.has-background {
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

/* Background colors */

.has-yellow-super-light-background-color {
    background-color: var(--yellow-100);
}

.has-green-super-light-background-color {
    background-color: var(--green-100);
}

.has-green-light-background-color {
    background-color: var(--green-300);
}

.has-green-medium-background-color {
    background-color: var(--green-600);
    color: #fff;
}

.has-green-medium-dark-background-color {
    background-color: var(--green-700);
}

.has-green-dark-background-color {
    background-color: var(--green-900);
}

.has-red-background-color {
    background-color: var(--red-600);
}

/* Text colors */

.has-green-super-light-color {
    color: var(--green-100);
}

.has-yellow-super-light-color {
    color: var(--yellow-100);
}

.has-green-light-color {
    color: var(--green-300);
}

.has-green-medium-color {
    color: var(--green-600);
}

.has-green-medium-color:hover {
    color: var(--green-700);
}

.has-green-medium-dark-color {
    color: var(--green-700);
}

.has-green-medium-dark-color:hover {
    color: var(--green-900);
}

.has-green-dark-color {
    color: var(--green-900);
}

.has-red-color {
    color: var(--red-600);
}

::-moz-selection {
    /* Code for Firefox */
    background: var(--green-300);
    color: #212121;
}

::selection {
    background: var(--green-300);
    color: #212121;
}

/* Årsplaner */

.htmx-remote-wrapper {
    transition: opacity 0.3s;

    .mainblock:has(.class-list__column) > div,
    .yearplans__plans {
        display: flex;
        gap: 24px 20px;
        flex-wrap: wrap;
    }

    ul.class-list__grouping {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li.class-list__grouping__class a {
        border-color: var(--green-600);
        color: var(--green-600);
        border: 2px solid;
        border-radius: 4px;

        font-weight: bold;
        padding: 0.3em 1em;
        text-decoration: none;
    }

    .yearplans__plans {
        padding: 20px 0;
        gap: 10px 20px;
    }

    .yearplans__plan-link {
        font-style: normal;
        border: 2px solid;
        padding: 0.3em 1em;
        border-radius: 4px;
        font-weight: bold;
        display: flex;

        &:has(a) {
            color: var(--green-600);
            padding: 0;
        }

        a {
            padding: 0.3em 1em;
        }
    }

    .mainblock {
        *:not(h1, h2, h3, h4, h5, h6) {
            font-family: "Nunito" !important;
            line-height: 1.2;
        }

        a {
            text-decoration: underline;
        }

        p {
            margin: 1em 0 !important;
        }

        .table-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            margin-bottom: 1.5rem;
        }

        table {
            width: 100% !important;
            margin-top: 30px;
            border-color: var(--muted);
            * {
                border-color: var(--muted);
            }

            td {
                padding: 5px 9px;
            }
        }
    }

    .content-header {
        padding-bottom: 1rem;
        margin-bottom: 2rem;
        border-bottom: 1px solid var(--muted);
    }
}

body.htmx-request .htmx-remote-wrapper {
    opacity: 0.8;
    cursor: progress;
}

.htmx-remote-wrapper.is-loading {
    position: relative;
    min-height: 80px;
    pointer-events: none;
}

.htmx-remote-wrapper.is-loading::after {
    content: "";
    position: absolute;
    inset: -10px 0 0 0;
    background: rgba(255, 255, 255, 0.65);
    z-index: 10;
}

.htmx-remote-wrapper.is-loading::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--green-600);
    animation: htmx-progress 1.2s ease-in-out infinite;
    z-index: 9999;
}

@keyframes htmx-progress {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.htmx-proxy-error {
    padding: 1rem 1.25rem;
    background: #fff5f5;
    border: 1px solid var(--red-600);
    border-radius: 4px;
    color: var(--red-600);
}

.htmx-loading {
    color: #999;
    font-style: italic;
}

.is-layout-flex {
    display: flex;
}