@font-face {
    font-family: 'Olivier';
    src: url('../fonts/olivier.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --mid-grey: #888;
    --light-grey: #f0f0f0;
    --xlight-grey: #f9f9f9;
    --pastel-green: #B6B234;
    --light-grey-green: color-mix(in oklab, var(--light-grey) 90%, var(--pastel-green) );
    --xlight-grey-green: color-mix(in oklab, var(--xlight-grey) 90%, var(--pastel-green) );
}

/* Admin Area and Front End */

.pos-text {
    line-height: normal;
    display: grid;
    & P {
        margin-bottom: 0;
    }
}

/* Admin Area */

#pos_preview_side.popout .pos-preview {
    position: fixed;
    bottom: 10px;
    width: 300px;
    right: 10px;
}

.pos-preview-header {
    margin-bottom: 1em;
}

.pos-preview {
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    & .background-image {
        width: 100%;
    }
}

.pos-preview .pos-text * {
    font-size: inherit;
    line-height: inherit;
    margin: inherit;
}

.colour-badge {
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 3px;
    margin-right: 5px;
    margin-top: 5px;
    position: relative;
    top: 2px;
}

.acf-repeater>table.acf-table {
    & th {
        background-color: var(--light-grey);
    }
    & .acf-row {

        background-color: var(--xlight-grey);
        &>.acf-field,
        &>.acf-row-handle {
            background-color: var(--xlight-grey);
            border-top: 1px solid var(--mid-grey);

            & .acf-fields {

                & .acf-field {
                    padding: 8px 0;

                    &::before {
                        width: 30%;
                        background-color: var(--light-grey);
                    }
                }

                .acf-label {
                    width: 30%;
                }

                .acf-input {
                    width: 70%;
                    container: button-group / inline-size;
                    @container (max-width: 150px) {
                        .acf-button-group {
                            width: 100%;
                            flex-direction: column;
                            align-items: stretch;
                            label {
                                border-bottom: none;
                                border-radius: 0;
                                &:first-child {
                                    border-radius: 3px 3px 0 0;
                                }
                                &:last-child {
                                    border-bottom: 1px solid var(--mid-grey);
                                    border-radius: 0 0 3px 3px;
                                }
                            }
                        }
                    }

                }
            }
        }

        &>.acf-row-handle {
            background-color: var(--light-grey);
        }
        &:nth-child(even) {
            background-color: var(--xlight-grey-green);
            &>.acf-row-handle {
                background-color: var(--light-grey-green);
            }
            &>.acf-field {
                background-color: var(--xlight-grey-green);
                & .acf-fields {
                    & .acf-field {
                        &::before {
                            background-color: var(--light-grey-green);
                        }
                    }
                }
            }
        }

    }

}


.postbox {
    & .categorydiv {
        &>div:has(.taxonomy-add-new) {
            display: none;
        }
        & #user-groupchelist {
            & .hidden {
                display: none;
            }
        }
    }
    .search-user-groups {
        width: 100%;
    }
}

#user-groupdiv.postbox .inside::before {
    content: "Leave blank to apply to all user groups.";
}

/* Frontend */

.print-area {
    margin-bottom: 2em;
    position: relative;
}

.print-area .pos-text {
    border: 1px dotted transparent;
}

.print-area .pos-text.show-boundaries {
    border: 1px dotted grey;
}

#pos-area {
    position: relative;
}

.orientation-Landscape + #pos-text-overlays .pos-text p {
    font-size: 1em;
}

.orientation-Portrait + #pos-text-overlays .pos-text p {
    font-size: 1em;
}

#pos-area.creating-pdf .orientation-Landscape + #pos-text-overlays .pos-text p {
    font-size: 1.6em !important; 
}

#pos-area.creating-pdf .orientation-Portrait + #pos-text-overlays .pos-text p {
    font-size: 1.1em !important; 
}
#pos-area.creating-pdf .description {
        display: none;
}

@media print {
    #left-sidebar,
    .entry-title,
    #blz_dss_banner,
    footer.entry-footer,
    header,
    .navigation,
    #wrapper-footer,
    .pos-image.empty,
    .description {
        display: none !important;
    }
    body {
        padding-top: 0 !important;
        overflow: hidden;
    }
    #primary {
        padding: 0;
    }
    #single-wrapper {
        padding: 0;
    }
    #content {
        max-width: 99.5%;
    }
    .orientation-Landscape + #pos-text-overlays .pos-text p {
        font-size: 150%;
    }
    .orientation-Portrait + #pos-text-overlays .pos-text p {
        font-size: 109%;
    }
    .site .wrapper {
        background-color: #ffffff !important;
    }
    .print-area {
        margin-bottom: 0;
    }
    .print-area .pos-text.show-boundaries {
        border: 1px dotted transparent;
    }
}

.pos-preview .pos-image-placeholder::before {
    content: "Image";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    color: #888;
}

.acf-input-wrap .point-size-display{
    width: 100%;
    display: flex;
    background: var(--light-grey);
    align-items: center;
    justify-content: center;
}