/*
Theme Name: CCX
Theme URI: https://gitlab.belowtoxic.cloud/belowtoxic/wordpress/themes/ccx
Author: Belowtoxic
Author URI: https://gitlab.belowtoxic.cloud/belowtoxic
Description: Custom Wordpress theme for christinaclar.net.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ccx
*/
:root {
    --primary-color: #FF9933;
    --secondary-color: #f0f0f0;
    --tertiary-color: #FFFFFF;

    --menu-gap: 1.25rem;
    --menu-items-gap: 0.5rem;

    --default-font-family: "Catamaran", sans-serif;
    --default-font-weight: 400;
    --default-font-color: #111111;
    --default-background-color: #f9f9f9;
    --default-background-color-with-opacity: #f9f9f9dd;
    
    --content-max-width: 1000px;
    --paragraph-max-width: 632px;

    --menu-font-weight: 600;
    --menu-font-size: 1.5rem;

    --menu-font-color: var(--primary-color);
    --menu-font-color-hover: #FFFFFF;
    --menu-font-color-active: #FFFFFF;
    --menu-item-bg-color: #FFFFFF;
    --menu-item-bg-color-hover: var(--primary-color);
    --menu-item-bg-color-active: var(--primary-color);

    --menu-item-padding-v: 0.6rem;
    --menu-item-padding-h: 1rem;
    
    --menu-items-transition-duration: 0.15s;
    --menu-items-transition-delay: 0.035s;
    --menu-items-transition-timing: ease-in-out;

    --menu-item-color-transition-duration: 0.5s;

    --post-thumbnail-max-height: 350px;

    --blx-grid-cell-width: 25px;
    --blx-grid-cell-height: 25px;
    --blx-grid-gap: 0.5rem;

    --blx-grid-elem-cols: 1;
    --blx-grid-elem-rows: 1;

    --blx-grid-info-color: gray;
    --blx-grid-info-separator-color: var(--primary-color);
    --blx-grid-info-separator-width: 1px;
    
    --top: 0;
    --left: 0;
    --card-width: 350px;
    --max-card-width: calc(100vw - 2rem);

    --fslb-border-radius: 0.25rem;
    --fslb-infobox-font-size: 0.8rem;
    --fslb-infobox-color: white;
    --fslb-infobox-bg-color: #FF993322;

    --wp--preset--color--base: var(--default-background-color);
    --wp--preset--color--contrast: var(--default-font-color);
    --wp--preset--font-family--body: var(--default-font-family);
    --wp--preset--font-family--heading: var(--default-font-family);
}
@media only screen and (max-width: 956px) {
    :root {
        --menu-item-bg-color: #F0F0F0;
    }
}
.dark-mode {
    --default-font-color: #fdfdfd;
    --default-background-color: #222222;

    --menu-item-bg-color: #1e1e1e;
}





/* MAIN SETTINGS */
* {
    font-family: var(--default-font-family);
    font-optical-sizing: auto;
    font-weight: var(--default-font-weight, 400);
    font-style: normal;

    box-sizing: border-box;
}
html, body {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    min-height: 100vh;
    min-height: 100svh;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
}

#page-wrapper {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    align-items: center;
}

main,
.blx-grid-main-wrapper,
.blx-grid-content-wrapper {
    width: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;

    flex-grow: 1;
}
.blx-grid-main-wrapper {
    flex-direction: column;
}
.grid-page-wrapper {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}
.grid-page-content {
    width: 100%;
    max-width: var(--content-max-width, 1000px);
    margin: 0;
    padding: 0;

    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.grid-page-content.show-page-content {
    display: flex;
}
.blx-grid-content-wrapper {
    width: 100%;

    margin: 0;
    padding: 0;
    padding-left: 1rem;
    padding-right: 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    flex-grow: 1;
}

.single-page-container {
    display: none;
    width: 100%;
    max-width: var(--content-max-width, 1000px);
    margin: 0;
    padding: 0 1rem;
}
.single-page-container.show-page-container {
    display: block;
}

.blx-grid-paggination-wrapper {
    width: 100%;

    margin: 1rem;
    padding: 0;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.blx-grid-paggination-wrapper > ul {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.blx-grid-paggination-wrapper > ul > li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: var(--secondary-color);
}
.blx-grid-paggination-wrapper > ul > li.active {
    background-color: var(--primary-color);
}
.blx-grid-paggination-wrapper > ul > li:hover {
    background-color: var(--primary-color);
}
.blx-grid-paggination-wrapper > ul > li.deactivated {
    color: #999999;
    background-color: var(--secondary-color);
}
.blx-grid-paggination-wrapper > ul > li.deactivated:hover {
    color: #999999;
    background-color: var(--secondary-color);
}

.blx-grid-paggination-wrapper > ul > li > a {
    padding: 0.5rem 1rem;
    text-decoration: none;
}
.blx-grid-paggination-wrapper > ul > li > a:visited {
    text-decoration: none;
}
.blx-grid-paggination-wrapper > ul > li > a:hover {
    text-decoration: none;
}
.blx-grid-paggination-wrapper > ul > li > a:active {
    text-decoration: none;
}

.blx-grid-paggination-wrapper > ul > li > span {
    padding: 0.5rem 1rem;
}



.w-100 {
    width: 100%;
}
.center-content {
    justify-content: center;
    align-items: center;
}



header, footer {
    width: 100%;
    flex-direction: row;
    padding: 0;
    margin: 0;
}
header {
    position: relative;
    display: none;
    justify-content: flex-end;
    align-items: center;
    min-height: 84px;
}
.page-title-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 64px;
    background-color: var(--primary-color);
    border-radius: 0.25rem 0 0 0.25rem;

    position: fixed;
    top: 0.625rem;
    right: 0;

    z-index: 9999;
}
.page-title-wrapper.blx-hidden {
    display: none;
}
.page-title {
    margin: 0 2rem 0 2rem;
    color: white;
    font-family: var(--default-font-family);
    font-optical-sizing: auto;
    font-weight: var(--menu-font-weight, 600);
    font-size: var(--menu-font-size, 1.5rem);
}

.blx-post-thumbnail {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: center center;
    max-height: var(--post-thumbnail-max-height, 350px);
    overflow: hidden;
}
.blx-post-thumbnail-header {
    width: 100%;
    height: max-content;
    object-fit: cover;
    object-position: center center;
    max-height: var(--post-thumbnail-max-height, 350px);
    overflow: hidden;
    z-index: -1000;
}
.blx-post-thumbnail-img {
    width: 100%;
    height: max-content;
    object-fit: cover;
    object-position: center center;
    max-height: var(--post-thumbnail-max-height, 350px);
    overflow: hidden;
}


.single-post-container {
    display: none;
}
.single-post-container.show-post-content {
    display: block;
}

.blx-post-content {
    width: 100%;
    max-width: var(--content-max-width, 1000px);
    margin: 0 1rem 2rem 1rem;
    padding: 0;
}
.blx-post-content > h1,
.blx-post-content > h2,
.blx-post-content > h3,
.blx-post-content > h4,
.blx-post-content > h5,
.blx-post-content > h6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.blx-post-content > div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.5rem;
    background-color: var(--default-background-color-with-opacity, #f9f9f9dd);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.blx-post-content > div.columnize {
    columns: 2;
    padding-right: 1rem;
}
.blx-post-content > div.flex-column {
    display: flex;
}
.blx-post-content > div > p {
    width: 100%;
    max-width: var(--paragraph-max-width, 632px);
    margin: 0 1rem;
    padding: 0 2rem;
}
@media only screen and (max-width: 956px) {
    .blx-post-content > div.columnize {
        columns: 1;
        display: flex;
        padding-right: 0;
    }
}
@media only screen and (min-width: 955px) {
    .grid-page-content {
        padding-left: var(--__pad, 0);
    }
    .blx-post-content {
        padding-left: var(--__pad, 0);
    }
    .single-page-container {
        padding-left: calc(var(--__pad, 0) + 1rem);
    }
}


.ccx-single-post-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}



/* MAIN MENU */
#main-menu {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    gap: var(--menu-gap, 1.25rem);

    position: fixed;
    top: 0;
    left: 0;

    z-index: 9999;
}
#main-menu > .blx-hidden {
    display: flex;
}

#main-nav-icon {
    width: 64px;
    height: 64px;
    position: relative;
    margin: 10px 10px;
    -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
         -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
       -moz-transition: .5s ease-in-out;
         -o-transition: .5s ease-in-out;
        -ms-transition: .5s ease-in-out;
            transition: .5s ease-in-out;
    cursor: pointer;
    background: var(--menu-item-bg-color-active, #FF9933);
    border-radius: 32px;
}
#main-nav-icon span {
    display: none;
}

.menu-items {
    width: max-content;

    padding: 0;
    margin: 0;


    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--menu-items-gap, 0.5rem);
}

.menu-items > div > a,
.menu-items > div > div {
    padding: var(--menu-item-padding-v, 0.6rem) var(--menu-item-padding-h, 1rem);

    text-decoration: none;
    color: var(--menu-font-color, #FF9933);
    background-color: var(--menu-item-bg-color, #FFFFFF);

    font-family: var(--default-font-family);
    font-optical-sizing: auto;
    font-weight: var(--menu-font-weight, 600);
    font-size: var(--menu-font-size, 1.5rem);
}
.menu-items > div > a {
    display: block;
    cursor: pointer;
}
.menu-items > div > a > span {
    display: none;
}
.menu-items > div > div {
    display: none;
    cursor: default;
}

.menu-items > div > a:hover {
    color: var(--menu-font-color-hover, #FFFFFF);
    background-color: var(--menu-item-bg-color-hover, #FF9933);

    cursor: pointer;

    -webkit-transition: color var(--menu-item-color-transition-duration, 0.5s), background-color var(--menu-item-color-transition-duration, 0.5s);
       -moz-transition: color var(--menu-item-color-transition-duration, 0.5s), background-color var(--menu-item-color-transition-duration, 0.5s);
         -o-transition: color var(--menu-item-color-transition-duration, 0.5s), background-color var(--menu-item-color-transition-duration, 0.5s);
        -ms-transition: color var(--menu-item-color-transition-duration, 0.5s), background-color var(--menu-item-color-transition-duration, 0.5s);
            transition: color var(--menu-item-color-transition-duration, 0.5s), background-color var(--menu-item-color-transition-duration, 0.5s);
}
.menu-items > div.active > a {
    display: none;
    color: var(--menu-font-color-active, #FFFFFF);
    background-color: var(--menu-item-bg-color-active, #FF9933);
    cursor: default;
}
.menu-items > div.active > div {
    display: block;
    color: var(--menu-font-color-active, #FFFFFF);
    background-color: var(--menu-item-bg-color-active, #FF9933);
}
.menu-items > div.single > a {
    display: block;
    color: var(--menu-font-color-active, #FFFFFF);
    background-color: var(--menu-item-bg-color-active, #FF9933);
    /*cursor: default;*/
}
.menu-items > div.single > div {
    display: none;
    color: var(--menu-font-color-active, #FFFFFF);
    background-color: var(--menu-item-bg-color-active, #FF9933);
}
.menu-items > div.single > a::before {
    content: "< ";
    margin-top: 0.5rem;
}
.page-title .single-title {
    color: white;
    font-family: var(--default-font-family);
    font-optical-sizing: auto;
    font-weight: var(--menu-font-weight, 600);
    font-size: var(--menu-font-size, 1.5rem);
    text-decoration: none;
}
.page-title .single-title::before {
    content: "< ";
    margin-top: 0.5rem;
}
.page-title .single-title:link {
    text-decoration: none;
}
.page-title .single-title:visited {
    text-decoration: none;
}
.page-title .single-title:hover {
    text-decoration: none;
}

@media only screen and (max-width: 956px) {
    #page-wrapper {
        flex-direction: column;
    }
    
    header {
        display: flex;
    }

    .blx-post-thumbnail {
        display: none;
    }

    #main-menu {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }
    #main-menu > .blx-hidden {
        display: none;
    }

    /* Nav Icon */
    #main-nav-icon span {
        display: block;
        position: absolute;
        height: 6px;
        width: calc(100% - 24px);
        margin-left: 12px;
        background: white;
        border-radius: 6px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
                transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
            -o-transition: .25s ease-in-out;
            -ms-transition: .25s ease-in-out;
                transition: .25s ease-in-out;
    }
    #main-nav-icon span:nth-child(1) {
        top: 15px;
    }
    #main-nav-icon span:nth-child(2) {
        top: 28px;
    }
    #main-nav-icon span:nth-child(3) {
        top: 42px;
    }
    .open #main-nav-icon span:nth-child(1) {
        top: 28px;
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
            -o-transform: rotate(135deg);
            -ms-transform: rotate(135deg);
                transform: rotate(135deg);
    }
    .open #main-nav-icon span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }
    .open #main-nav-icon span:nth-child(3) {
        top: 28px;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
                transform: rotate(-135deg);
    }

    /* Mennu Icons */
    .menu-items > div {
        text-decoration: none;
        
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
            -o-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
                transform: translateX(-100%);
        
        -webkit-transition-delay: calc(var(--__pos, 0) * var(--menu-items-transition-delay, 0.035s));
        -moz-transition-delay: calc(var(--__pos, 0) * var(--menu-items-transition-delay, 0.035s));
            -o-transition-delay: calc(var(--__pos, 0) * var(--menu-items-transition-delay, 0.035s));
            -ms-transition-delay: calc(var(--__pos, 0) * var(--menu-items-transition-delay, 0.035s));
                transition-delay: calc(var(--__pos, 0) * var(--menu-items-transition-delay, 0.035s));
        -webkit-transition-property: transform;
        -moz-transition-property: transform;
            -o-transition-property: transform;
            -ms-transition-property: transform;
                transition-property: transform;
        -webkit-transition-duration: var(--menu-items-transition-duration, 0.15s);
        -moz-transition-duration: var(--menu-items-transition-duration, 0.15s);
            -o-transition-duration: var(--menu-items-transition-duration, 0.15s);
            -ms-transition-duration: var(--menu-items-transition-duration, 0.15s);
                transition-duration: var(--menu-items-transition-duration, 0.15s);
        -webkit-transition-timing-function: var(--menu-items-transition-timing, ease-in-out);
        -moz-transition-timing-function: var(--menu-items-transition-timing, ease-in-out);
            -o-transition-timing-function: var(--menu-items-transition-timing, ease-in-out);
            -ms-transition-timing-function: var(--menu-items-transition-timing, ease-in-out);
                transition-timing-function: var(--menu-items-transition-timing, ease-in-out);
    }
    .open .menu-items > div {
        -webkit-transform: translateX(0%);
        -moz-transform: translateX(0%);
            -o-transform: translateX(0%);
            -ms-transform: translateX(0%);
                transform: translateX(0%);
    }
}



.blx-grid {
    display: grid;
    gap: var(--blx-grid-gap, 0.5rem);
    grid-template-columns: repeat(auto-fit, minmax(var(--blx-grid-cell-width, 25px), 1fr));
    grid-template-rows: repeat(auto-fit, minmax(var(--blx-grid-cell-height, 25px), 1fr));
}
@media only screen and (min-width: 1200px) {
    .blx-grid-content-wrapper .blx-grid {
        /*max-width: 1000px;*/
    }
}

.blx-grid-item-wrapper {
    width: 100%;
    height: 100%;
    
    margin: 0;
    padding: 0;

    grid-column: span var(--blx-grid-elem-cols);
    grid-row: span var(--blx-grid-elem-rows);

    display: flex;
    justify-content: center;
    align-items: center;

    text-decoration: none;
}
@media only screen and (max-width: 956px) {
    [style*="--blx-grid-elem-cols:4"] {
        grid-column: span 3;
    }
}
@media only screen and (max-width: 717px) {
    [style*="--blx-grid-elem-cols:3"] {
        grid-column: span 2;
    }
}
@media only screen and (max-width: 478px) {
    .blx-grid {
        /*gap: 2rem;*/
        gap: 0;
    }
    .blx-grid-item-wrapper {
        /*grid-column: span 1;*/
    }
}

.blx-grid-item-content {
    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    margin: 0.5rem;

    overflow: hidden;
    border-radius: var(--fslb-border-radius, 0.25rem) var(--fslb-border-radius, 0.25rem) 0 0;
}
.blx-grid-item-content:hover {
    cursor: pointer;
}
@media (hover: none) {
    .blx-grid-item-content {
        flex-direction: column;
    }
}
@media (hover: hover) {
    .blx-grid-item-content {
        border-radius: var(--fslb-border-radius, 0.25rem);
    }
}

.blx-grid-item-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.blx-box-overlay {
    width: 100%;
    height: 100%;
}
@media (hover: hover) {
    .blx-box-overlay {
        position: absolute;
        top: 0;
        left: 0;
    }
}

.blx-info-overlay-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    overflow: hidden;
}

.blx-info-box {
    width: 100%;
}
@media (hover: none) {
    .blx-info-box {
        border-top-color: var(--blx-grid-info-separator-color, #FF9933);
        border-top-width: var(--blx-grid-info-separator-width, 1px);
        border-top-style: solid;
    }
}
@media (hover: hover) {
    .blx-info-box {
        height: 100%;
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
    }
    .blx-grid-item-content:hover .blx-info-box {
        opacity: 1;
    }
}

.blx-info-content {
    display: flex;
    justify-content: center;
    align-items: center;
    word-break: break-all;
}
@media (hover: none) {
    .blx-info-content {
        padding-top: 0.125rem;
        color: var(--blx-grid-info-color, gray);
        text-decoration: none;
    }
}
@media (hover: hover) {
    .blx-info-content {
        width: 100%;
        height: 100%;
        padding: 1rem;
        color: black;
        background-color: var(--primary-color, #FF9933);
    }
}

.ellipsify.multiline {
    text-align: center;
    vertical-align: middle;
    max-height: 100%;
    -webkit-line-clamp: var(--__lines, 1);
}
.ellipsify.multiline h4 {
    padding: 0;
    margin: 0;
}
.ellipsify.multiline > p {
    padding: 0;
    margin: 0;
    margin-top: 0.25rem;
}
@media (hover: none) {
    .ellipsify.multiline {
        max-height: 2lh;
        -webkit-line-clamp: 2;
    }
    .ellipsify.multiline > p {
        margin-top: 0.125rem;
    }
}