/*
Theme Name: Oblong Base Theme
Author: Oblong Tech
Version: 26.2.alpha-3434
*/

/**============================================================================
 * RESET / DEFAULTS
 =============================================================================*/
* {
    border-width: 0;
}
body {
    margin: 0;
}
p {
    margin-top: 0;
    margin-bottom: 1lh;
    &:last-child {
        margin-bottom: 0;
    }
    strong {
        font-weight: 600;
    }
}
p:last-child {
    margin-bottom: 0;
}
a, u {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.33em;
    text-decoration-thickness: 0.033em;
    text-decoration-color: currentColor;
    text-decoration-color: color-mix(in srgb, currentColor, transparent 25%);
}
a[href^="mailto:"] {
    word-break: break-all;
}

ul {
    padding-inline-start: 16px;
    &:is(li > ul) {
        padding-inline-start: 32px;
    }
}

ul > li {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}
li:not(ul > li) {
    list-style: none;
    margin: 0;
}


/*headings*/
:is(h1, h2, h3, h4, h5, h6),
.wp-block-post-title
{
    margin-top: 0;
    margin-bottom: 0.55em;

    /*section separation*/
    &:is(h1~*, h2~*, h3~*, h4~*, h5~*, h6~*) {
        margin-top: 2rem;
    }
    &:last-child {
        margin-bottom: 0;
    }
    p {
        display: contents;
    }

}
:where(h1, h2, h3, h4, h5, h6, label) + :is(h1, h2, h3, h4, h5, h6)
{
    margin-top: 0 !important;
}
:where(h1, h2, h3, h4, h5, h6):has(+h1, +h2, +h3, +h4, +h5, +h6)
{
    margin-bottom: 0.5rem!important;
}
h1:has(+h1), h2:has(+h2), h3:has(+h3), h4:has(+h4), h5:has(+h5), h6:has(+h6)
{
    margin-bottom: 0 !important;
}
h6 + * {
    margin-top: 0;
}

img {
    display: block;
    height: auto;
    max-width: 100%;
}



/**============================================================================
 * FONTS & TYPOGRAPHY
 =============================================================================*/
:root {
    --theme-header-height: 130px;
    --em: 16px;
    font-size: var(--em);
    
    @media (max-width: 991px) {
        --font-size-tiny: 11px;
        --font-size-small: 13px;
        --font-size-medium: 16px;
        --font-size-large: 20px;
        --font-size-xlarge: 30px;
        --font-size-huge: 45px;
    }
    @media (min-width: 992px) {
        --font-size-tiny: 11px;
        --font-size-small: 14px;
        --font-size-medium: 17px;
        --font-size-large: 30px;
        --font-size-xlarge: 50px;
        --font-size-huge: 75px;
    }
}

h1 { font-size: clamp(1.743*var(--em), 1.743*var(--em) + 1.743vw, 3*var(--em)); }
h2 { font-size: clamp(1.502*var(--em), 1.502*var(--em) + 1.502vw, 2.5*var(--em)); }
h3 { font-size: clamp(1.119*var(--em), 1.119*var(--em) + 1.119vw, 1.75*var(--em)); }
h4 { font-size: clamp(0.984*var(--em), 0.984*var(--em) + 0.984vw, 1.5*var(--em)); }
h5 { font-size: clamp(1.188*var(--em), 1.188*var(--em) + 1.188vw, 1.875*var(--em)); }
h6 { font-size: clamp(0.875*var(--em), 0.875*var(--em) + 0.875vw, 1.175*var(--em)); }


/**============================================================================
 * HEADER, FOOTER, NAV
 =============================================================================*/
.wp-block-template-part:has(>.desktopHeader),
.wp-block-template-part:has(>.mobileHeader)
{
    display: contents;
}

.block-editor-block-list__layout .desktopHeader { top: 0 !important; }
.desktopHeader {
    --padding-left: var(--wp--style--root--padding-left, 0px);
    --padding-right: var(--wp--style--root--padding-right, 0px);
    z-index: 99999;
    position: sticky;
    top: 0;
    top: calc( -1 * var(--theme-header-height, 0px) );
    transform: translateY(0);
    &.\:stuck {
        transition: transform 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
    }
}
html.onscroll\:up .desktopHeader.\:stuck {
    transform: translateY(var(--theme-header-height, 0px));
}

.mobileHeader {
    --padding-left: var(--wp--style--root--padding-left, 0px);
    --padding-right: var(--wp--style--root--padding-right, 0px);
    z-index: 99999;
    position: sticky;
    top: 0;
}
ui-view::part(container){
    background: #000;
    color: #fff;
}
ui-view:has(>.mobileMenu)::part(header){
    height: 0;
}
ui-view:has(>.mobileMenu)::part(content){
    padding: 0;
}

#form_contact-form .frm_button_submit {
    background-color: #aebb1a;
}

.mobileMenu {

    .wp-block-search__inside-wrapper {
        background: transparent;
        margin: 0px 20px;
        flex: none;
        display: grid;
        grid-template-columns: 1fr auto;
        width: -webkit-fill-available !important;
        width: stretch !important;
    }
    .wp-block-search__input {
        padding-left: 24px;
        padding-right: 48px;
        grid-area: 1 / 1 / -1 / -1;
    }
    .wp-block-search__button {
        grid-area: 1 / 2 / span 1 / span 1;
        margin: 0;
        width: min-content;
        padding: 0px 12px;
    }
    
}

.frontpageHeroPanels {

    p {
        width: stretch;
        padding: 24px 12px;
        margin-bottom: 0;
        text-align: center;
        align-items: center;
        justify-items: center;
        justify-content: center;
        gap: 12px;

        @media (max-width: 768px) {
            display: grid;
        }
        @media (min-width: 768px) and (max-width: 991px) {
            display: flex;
        }
        @media (min-width: 992px) and (max-width: 1279px) {
            display: grid;
        }
        @media (min-width: 1280px) {
            display: flex;
        }

    }
    p:hover {
        background: #868d94;
    }
    p::before {
        font-size: 64px;
    }
    @media (min-width: 992px) {
        p {
            border-left: 1px solid #868d94;
            border-right: 1px solid #868d94;
            margin-left: -1px;
        }
    }

}


/**============================================================================
 * WORDPRESS BLOCK OVERRIDES ...
 =============================================================================*/
.wp-block-query > .wp-block-post-template > li {
    margin: 0;
    padding: 0;
}
.wp-site-blocks > * {
    margin-block-start: 0 !important;
}


/**============================================================================
 * WORDPRESS ADMIN CMS ...
 =============================================================================*/
 .editor-visual-editor__post-title-wrapper {
    margin: 24px 12px !important;
}
.acf-block-preview {
    margin-block-start: 0;
}
.block-editor-block-list__block .block-list-appender {
    line-height: 1;
}
:where(.editor-styles-wrapper) .is-root-container {
    container-type: inline-size;
}