/*
Theme Name: Oblong Base Theme
Author: Oblong Tech
Version: 26.2.build-9291939
*/

/**============================================================================
 * RESET / DEFAULTS
 =============================================================================*/
* {
    border-width: 0;
}
body {
    margin: 0;
}
p {
    margin-top: 0;
    margin-bottom: 1em;
    &: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>*) {
        padding-inline-start: 32px;
    }
}
:where(ul>li, ol>li) {
    margin-bottom: 0.25lh;
    margin-top: 0.25lh;
    margin-left: 1em;
}
li:not( ul>*, ol>* ) {
    list-style: none;
    margin: 0;
    padding: 0;
}


/*headings*/
h1.wp-block-post-title:first-child {
    margin-top: 40px;
}
h1.wp-block-post-title:not(:first-child) {
    margin-top: 64px;
}
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6),
.wp-block-post-title
{
    margin-top: 0;
    margin-bottom: 0.25lh;

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

}
:is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: 1lh;
}
: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 {
    --em: 16px;
    font-size: var(--em);
    --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;
}
.desktopHeader {
    position: sticky;
    top: 0;
    z-index: 99999;
    box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
}

.mobileHeader {
    --theme-header-height: 64px;
    position: sticky;
    top: 0;
    z-index: 99999;
    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 .mobileHeader.\:stuck {
    transform: translateY(var(--theme-header-height, 0px));
}
.floatingButton {
    position: fixed;
    bottom: 0;
    width: 100%;
    filter: drop-shadow(0px 10px 10px rgba(0 0 0 / 25%));
    transition: transform 400ms cubic-bezier(0.65, 0.05, 0.36, 1);
    transform: translateY(100%);

    .wp-block-button {
        position: relative;
        width: -webkit-fill-available;
        width: stretch;
        padding: 0 8px;
    }
    .wp-block-button__link {
        display: block;
    }

}

html.onscroll\:down .floatingButton {
    transform: translateY(0);
}


.mainMenu:not(.wp-block-navigation),
.mainMenu.wp-block-navigation > .wp-block-navigation__container
{
    text-align: center;
    place-self: start center;
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    font-size: 20px !important;
    margin: 0;
    padding: 0;
    @media (min-width: 769px) {
        text-align: left;
    }
}
.mainMenu {

    width: -webkit-fill-available; width: stretch;

    .wp-block-navigation-item {
        padding: 2px 0;
        margin: 0;
        position: relative;
    }
    .wp-block-navigation-link > a {
        cursor: pointer;
        text-decoration: none;
        color: rgba(249, 247, 246, .55) !important;
        background-color: #767676;
        padding: 4px 24px;
        display: inline-block;
        transition: all .2s cubic-bezier(0, 0, 0.32, 0.98);
    }

    .current-menu-item > a > span,
    .current-page-ancestor > a > span
    {
        font-weight: 600;
        text-shadow: 0px 0px 1px #000;
    }
    .wp-block-navigation-link > a:hover > span,
    .current-menu-item > a > span,
    .current-page-ancestor > a > span
    {
        color: rgba(249, 247, 246, 1);
    }

    @media (min-width: 769px) {
        .wp-block-navigation-link > a:hover {
            padding-left: 48px;
        }
    }
    
    .wp-block-navigation-link > a:hover:before {
        content: '';
        display: inline-block;
        width: 12px;
    }
    .wp-block-navigation-link > a:after {
        content: '';
        position: absolute;
        inset: 0;
    }
        
}

.homepageScrollDownAnimation {
    
    width: 17px;
    height: 60px;
    border-radius: 24px;
    border: 2px solid #d8d8d8;
    position: relative;
    display: grid;
    justify-items: center;

    &::before {
        opacity: 0;
        content: '';
        width: 12px;
        aspect-ratio: 1/1;
        background: #d8d8d8;
        border-radius: 8px;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-name: scroll;
    }
}
@keyframes scroll {
    0% {
        opacity: 0;
        width: 0px;
        transform: translateY(0px);
    }
    5% {
        opacity: 1;
        width: 12px;
    }
    20% {
        opacity: 1;
    }
    24% {
        opacity: 0;
        width: 12px;
        transform: translateY(44px);
    }
    25% {
        opacity: 0;
        width: 0px;
        transform: translateY(0px);
    }
    30% {
        opacity: 1;
        width: 12px;
    }
    45% {
        opacity: 1;
        transform: translateY(44px);
    }
    49% {
        opacity: 0;
        width: 12px;
    }
}


.wp-block-post.type-testimonial {

    font-size: var(--font-size-medium);
    font-style: italic;
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: center;
    align-items: center;
    margin: 24px 0 64px;
    gap: 16px;
    @media (min-width: 769px) {
        column-gap: 1lh;
    }
    /*
    margin-bottom: 1lh;
    padding-top: 1lh;
    padding-bottom: 1lh;
    border-bottom: 1px solid #ddd;
    */

    .wp-block-post-featured-image {
        order: 1;
        width: 128px;
        max-width: 20vw;
        margin-bottom: 0;
    }
    .wp-block-post-content p {
        margin: 0;
        grid-column: span 2;
    }
    .wp-block-post-content p:first-child {
        position: relative;
    }
    .wp-block-post-content p:first-child::before {
        content: '';
        width: 4px;
        height: 32px;
        box-sizing: content-box;
        border-width: 0px 8px;
        border-style: solid;
        border-color: #eee;
        position: absolute;
        top: -10px;
        left: -20px;
        transform: rotate(-26deg);
        z-index: -1;
    }

    /*
    &:nth-child(8n) .wp-block-post-content p:first-child::before { border-color: #f1c839; }
    &:nth-child(8n+1) .wp-block-post-content p:first-child::before { border-color: #eca92f; }
    &:nth-child(8n+2) .wp-block-post-content p:first-child::before { border-color: #d4ad34; }
    &:nth-child(8n+3) .wp-block-post-content p:first-child::before { border-color: #e6823b; }
    &:nth-child(8n+4) .wp-block-post-content p:first-child::before { border-color: #babc4f ; }
    &:nth-child(8n+5) .wp-block-post-content p:first-child::before { border-color: #f9a434 ; }
    &:nth-child(8n+6) .wp-block-post-content p:first-child::before { border-color: #e2ce2e ; }
    &:nth-child(8n+7) .wp-block-post-content p:first-child::before { border-color: #f48134 ; }
    */

    .wp-block-post-content p:last-child:has(>em) {
        box-sizing: border-box;
        order: 2;
        grid-column: span 1;
        font-size: var(--font-size-small);
        em {
            font-style: normal;
        }
    }
    .wp-block-post-content,
    .wp-block-post-content > .block-editor-block-list__block,
    .wp-block-post-content > .block-editor-block-list__block > div
    {
        display: contents;
    }
}

.portfolio-style-2 > li {

    text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    margin: 0;
    
    @media (max-width: 991px) {
        overflow: hidden;
        border-radius: 12px;
        margin: 12px !important;
    }
    @media (min-width: 992px) {
        &:nth-child(odd) .wp-block-post-featured-image {
            order: -1;
        }
    }

    .wp-block-post-featured-image {
        margin: 0;
    }
    &:nth-child(8n) { background-color: #f1c839; }
    &:nth-child(8n+1) { background-color: #eca92f; }
    &:nth-child(8n+2) { background-color: #d4ad34; }
    &:nth-child(8n+3) { background-color: #e6823b; }
    &:nth-child(8n+4) { background-color: #babc4f ; }
    &:nth-child(8n+5) { background-color: #f9a434 ; }
    &:nth-child(8n+6) { background-color: #e2ce2e ; }
    &:nth-child(8n+7) { background-color: #f48134 ; }

}

.portfolio-style-1 {
    display: grid;
    gap: var(--theme-spacing-medium);
}
.portfolio-style-1 > li {

    text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
    margin: 0;

    .wp-block-post-featured-image {
        margin: 0;
    }
    .wp-block-post-title,
    .wp-block-post-excerpt__excerpt
    {
        display: inline;
        width: fit-content;
    }
    .wp-block-post-title {
        padding: .1em .4em .15em;
        margin: 0;
        line-height: 1;
        @media (min-width: 769px) {
            margin-left: -56px;
        }
    }
    .wp-block-post-excerpt__excerpt {
        line-height: 1.5;
        padding: .75em 1.25em;
    }
    
    &:nth-child(1n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #f9a434; }
    }
    &:nth-child(2n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #f48434; }
    }
    &:nth-child(3n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #f7c531; }
    }
    &:nth-child(4n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #e2ce2e; }
    }
    &:nth-child(5n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #c7bd33; }
    }
    &:nth-child(6n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #f9a434; }
    }
    &:nth-child(7n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #e2ce2e; }
    }
    &:nth-child(8n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #e2ce2e; }
    }
    &:nth-child(9n) {
        .wp-block-post-title,
        .wp-block-post-excerpt__excerpt
        { background-color: #e2ce2e; }
    }
    
}

ol {

    padding: 0;
    counter-reset: custom-list-counter;
    
    li {
        list-style-type: upper-alpha;
        list-style: none;
        margin-left: 40px;
    }
    li::before {
        counter-increment: custom-list-counter;
        content: counter(custom-list-counter, decimal);
        font-weight: 600;
        font-size: 20px;
        line-height: 27px;
        font-family: var(--wp--preset--font-family--miso);
        text-indent: 1px;
        text-align: center;
        float: left;
        width: 28px;
        height: 28px;
        border-radius: 28px;
        margin-left: -40px;
        background: rgba(172, 172, 172, 0.25);
        backdrop-filter: brightness(1.15);
        
    }
}
ol.list-style-alpha > li::before {
    content: counter(custom-list-counter, upper-alpha);
}


/**============================================================================
 * WORDPRESS BLOCK OVERRIDES ...
 =============================================================================*/
.wp-block-query > .wp-block-post-template > li {
    margin: 0;
    padding: 0;
}
.wp-block-post-content {
    container-type: inline-size;
}
.wp-site-blocks > * {
    margin-block-start: 0 !important;
}
/*
:has(>.is-layout-constrained) {
    container-type: inline-size;
}
.wp-block-post-content:is(.width\:boxed) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, figure, span, table)
{
    padding-left: max( var(--wp--style--root--padding-left, 0px), min(50%, 50cqw) - var(--wp--style--global--content-size) / 2 );
    padding-right: max( var(--wp--style--root--padding-right, 0px), min(50%, 50cqw) - var(--wp--style--global--content-size) / 2);
}
@container style( 100cqw > --wp--style--global--content-size ) {
    .is-layout-constrained {
        width: -webkit-fill-available; width: stretch;
        padding-left: max( var(--wp--style--root--padding-left, 0px), min(50%, 50cqw) - var(--wp--style--global--content-size) / 2 );
        padding-right: max( var(--wp--style--root--padding-right, 0px), min(50%, 50cqw) - var(--wp--style--global--content-size) / 2);
    }
}
*/
/*
:root :where(.is-layout-flow) > * {
    margin-block-start: 0;
    margin-block-end: 0;
}
*/


/**============================================================================
 * 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;
}

.cky-btn-revisit-wrapper { display: none !important; }
ui-view {
    
    .cky-btn-close,
    .cky-preference-header
    { display: none; }
    .cky-preference-content-wrapper {
        padding: 24px;
        padding-top: 0;
    }
    .cky-preference-body-wrapper {
        padding: 0;
        font-family: roboto;
        font-weight: 300;
    }

}

ui-view::part(header){
    height: 0;
}

@media (max-width: 767px) {
    ui-view .frm_submit > button::before,
    ui-view .frm_submit > .submit::before
    {
        border-radius: 64px;
    }
}

.wp-block-post-content {

    &>h2:nth-child(1n) { color: #f9a434; }
    &>h2:nth-child(2n) { color: #f48434; }
    &>h2:nth-child(3n) { color: #f7c531; }
    &>h2:nth-child(5n) { color: #babc4f; }
    &>h2:nth-child(7n) { color: #fcb900; }
    &>h2:nth-child(11n) { color: #faaa33; }

}