/*
Theme Name: Cooperl Northern Europe
Theme URI: 
Author: Amazing Full Stack Creatives
Author URI: 
Description: A custom Theme especially developed for Cooperl Northern Europe
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cooperl-northern-europe
Tags: 
*/

/* GLOBALS */
html {
    -webkit-text-size-adjust: 100%;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
    scroll-behavior: smooth;

    &:no-scroll {
        height: 100%;
        overflow: hidden;
    }
}
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

header.wp-block-template-part {
    position: relative;
    z-index: 1024;
}
a,
.wp-block-button__link {
    transition: all 0.2s ease;
}
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}
strong {
    font-weight: 700;
}
.entry-content {
    margin-top: 0 !important;
}

/* Cards */
li:has(.card-item) {
    overflow: clip;
    img {
        transition: all .3s ease-in-out;
        transform: scale(1);
        transform-origin: bottom center;
    }
    &:hover {
        img {
            transform: scale(1.05);
        }
    }
}

/* BUTTONS */
.wp-block-button {
    &.is-style-outline .wp-block-button__link:not(.has-background):hover {
        background-color: var(--wp--preset--color--custom-secondary) !important;
        color: var(--wp--preset--color--custom-white) !important;
    }
    &.is-style-outline .wp-block-button__link.has-custom-secondary-background-color:hover {
        background-color: var(--wp--preset--color--custom-white) !important;
        color: var(--wp--preset--color--custom-secondary) !important;
    }
    .wp-block-button__link.has-background:not(.is-style-outline):hover {
        position: relative;
        &:after {
            content: "";
            position: absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            background: rgba(0, 0, 0, .125);
            mix-blend-mode: multiply;
            border-radius: inherit;
        }
    }
}

/* ALIGNWIDE MARGINS */
/* @media (min-width: 794px) and (max-width: calc(1200px + 10vw)) {
    .alignwide {
        margin-left: 5vw !important;
        margin-right: 5vw !important;
    }
} */

/* SWIPER */
:root {
    --swiper-scrollbar-drag-bg-color: var(--wp--preset--color--custom-secondary-dark);
    --swiper-scrollbar-bg-color: var(--wp--preset--color--custom-blue-gray);
    --swiper-scrollbar-size: 0.5rem !important;
}

.swiper .swiper-wrapper {
	display: flex;
	gap: unset;

	.swiper-slide {
		width: auto;
		height: unset !important;
	}
}

.swiper .wc-block-product-template {
    flex-wrap: nowrap !important;
}

.slider-navigation-wrapper > div:has(.slider-navigation) {
    flex: 0 0 115px !important;
    min-width: 115px !important;
}

.slider-navigation:not(.swiper-button-disabled) {
    --current-background-color: inherit;
    cursor: pointer;

    &:hover {
        background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25));
    }
}

.swiper-button-disabled {
    background-color: var(--wp--preset--color--custom-blue-gray) !important;
    border: var(--wp--preset--color--custom-blue-gray) !important;
    opacity: .5;
}

.swiper-scrollbar {
    position: relative !important;
    max-width: 100%;
}

/* BREADCRUMBS */
.yoast-breadcrumbs > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

/* PAGINATION */
.wp-block-query-pagination,
.wp-block-query[class*="pagination"] {
    gap: 0.5rem;
}
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-query[class*="pagination-previous"],
.wp-block-query .page-numbers,
.wp-block-query[class*="pagination-next"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    aspect-ratio: 1 / 1;
    border-radius: 0.25rem;
    text-decoration: none;
}
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query[class*="pagination-previous"]:hover,
.wp-block-query .page-numbers:hover,
.wp-block-query[class*="pagination-next"]:hover {
    background-color: var(--wp--preset--color--custom-ice-blue);
}

.wp-block-query[class*="pagination"] .page-numbers {
    /* border: solid 1px red; */
    text-decoration: none;
}

.wp-block-query[class*="pagination"] .page-numbers:not(.current) {
    /* border: solid 1px red; */
}

.page-numbers.current {
    background-color: var(--wp--preset--color--custom-ice-blue);
}

.is-arrow-arrow {
    display: none !important;
}
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous,
.wp-block-query[class*="pagination-previous"],
.wp-block-query[class*="pagination-next"] {
     /* border: solid 1px purple; */

    &:after {
        font-size: var(--wp--preset--font-size--custom-1);
        display: inline-block;
        font-family: "cooperl-northern-europe" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        line-height: 1;
        vertical-align: -.125em;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}
.wp-block-query-pagination-next:after,
.wp-block-query[class*="pagination-next"]:after {
    content: "\ea09";
}
.wp-block-query-pagination-previous:after,
.wp-block-query[class*="pagination-previous"]:after {
    content: "\ea08";
}

/* Solutions Tasonomy filter */
[data-filter_value] {
    display: inline-flex;
    gap: .5rem;
    align-items: center;

    &:before {
       display: inline-block;
        font-family: "cooperl-northern-europe" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        line-height: 1;
        vertical-align: -.125em;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: var(--wp--preset--color--custom-primary);
        font-size: 1.5rem;
    }
}
[data-filter_value="farm-management"]:before {
    content: "\ea0c";
}
[data-filter_value="buidling"]:before {
    content: "\ea03";
}
[data-filter_value="genetics"]:before {
    content: "\ea0d";
}
[data-filter_value="nutrition"]:before {
    content: "\ea11";
}
[data-filter_value="health"]:before {
    content: "\ea0e";
}
[data-filter_value="environment"]:before {
    content: "\ea0b";
}
[data-filter_value="slaughtering"]:before {
    content: "\ea16";
}
[data-filter_value="cured-meat"]:before {
    content: "\ea0a";
}
   

/* HELPERS */
.position-relative {
    position: relative;
    z-index: 1;
}

.h-100 {
    height: 100%;
}

.mt-auto {
    margin-top: auto !important;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.color-inherit {
    color: inherit !important;
}

.solution-link figure,
.icon-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.solution-links .wp-block-navigation-item {
    align-self: baseline;
}
.solution-links .wp-block-navigation-item a {
    align-items: baseline;
}
.solution-links .wp-block-navigation-item a:after {
    transform: translateY(0.1em);
}

.breakout-right {
    margin-right: calc(-50vw + 50%) !important;
}

/* VACANCY */
.wp-block-post.vacancy a:hover {
    .is-meta-field.has-custom-primary-background-color {
        color: var(--wp--preset--color--custom-textcolor);
    }
}

/* VENDORS*/
.gutenberghub-query-taxonomy-menu {
    [data-filter_value]:before {
        display: inline-block;
        font-family: "cooperl-northern-europe" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        line-height: 1;
        vertical-align: -.125em;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 1em;
    }
    [data-filter_value]:hover:before,
    .is-active-menu[data-filter_value]:before {
        color: inherit;
    }

    [data-filter_value="building"]:before {
        content: "\ea04";
    }
    [data-filter_value="genetics"]:before {
        content: "\ea0f";
    }
    [data-filter_value="nutrition"]:before {
        content: "\ea13";
    }
    [data-filter_value="health"]:before {
        content: "\ea10";
    }
    [data-filter_value="environment"]:before {
        content: "\ea0d";
    }
    [data-filter_value="slaughtering"]:before {
        content: "\ea18";
    }
    [data-filter_value="cured-meat"]:before {
        content: "\ea0b";
    }
    [data-filter_value="farm-management"]:before {
        content: "\ea0e";
    }
    [data-filter_value="other-solutions"]:before {
        content: "\ea14";
    }
}

.wp-block-post-navigation-link a,
.wp-block-tiptip-hyperlink-group-block {
    text-decoration: none;
}

.wp-block-ghub-tab-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    flex: 1 1 100%;

    i.icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.wp-block-woocommerce-product-template {
    margin-block-start: 0;
}

/* BLOCKSTYLES */
.is-style-two-columns > .is-style-two-columns {
    display: grid !important;
    grid-template-columns: repeat(auto-fit,minmax(200px,calc(50% - 2rem)))
}

.is-style-arrows {
    a {
        display: flex !important;
        align-items: center;
        gap: .5rem;
    }

    a:after {
        font-size: 0.875em;
        content: "\ea01";
        display: inline-block;
        font-family: "cooperl-northern-europe" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        line-height: 1;
        vertical-align: -.125em;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: all .2s ease-in-out;
        transform: translateX(0);
    }
    a:hover:after {
         transform: translateX(25%);
    }
}

.is-style-repeating-pattern .wp-block-post:nth-child(3n+1) {
    grid-column: span 2;
}

.is-style-check-list {
	list-style: none;
	padding: 0;
	
	li {
		padding-left: 1.5em;
		margin-bottom: calc(var(--wp--style--block-gap));
		position: relative;
		
		&:not(:last-child) {
			margin-bottom: 0.5em;
		}
		
		&:before {
            display: inline-block;
            font-family: "cooperl-northern-europe" !important;
            font-style: normal !important;
            font-weight: normal !important;
            font-variant: normal !important;
            text-transform: none !important;
            speak: none;
            line-height: 1;
            vertical-align: -.125em;
            text-rendering: auto;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            content: "\ea06";
			color: var(--wp--preset--color--custom-primary);
			position: absolute;
			left: 0;
			top: 0.2em;
		}
	}
}

*[target=_blank]:not(.wp-block-social-link-anchor)::after {
    display: inline-block;
    font-family: "cooperl-northern-europe" !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    speak: none;
    line-height: 1;
    vertical-align: -.125em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\ea02";
    margin-left: 0.5em;
    font-size: 0.85em;
}

/* Events */
.event-information {
    i {
        transform: translateY(0.15em);
        width: 1.125em;
        flex: 0 0 1.125em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    *:has(i) {
        align-items: baseline;
    }
}

/* Cooperl 360 */
@media (min-width: 794px) {
    .cooperl-360 {
        width: 75vw;
        max-width: 100%;
        min-width: 320px;
        aspect-ratio: 1/1;
        position: relative;
        border-radius: 50%;
        overflow: hidden;
        background-image: url("assets/images/360_cooperl.svg");
        background-size: 100%;
        background-position: center center;
    }

    /* Circle */
    .cooperl-360:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 35%;
        height: 35%;
        background-color: #ffffff;
        transform: rotate(0deg) translate(-50%, -50%);
        z-index: 5;
        border-radius: 100%;
    }

    .cooperl-360-part {
        position: absolute;
        top: 0;
        left: 50%;
        width: 50%;
        height: 50%;
        color: rgba(24, 92, 118, 1);
        transition: all .3s ease-in-out;
        transform-origin: left bottom;
        transform: rotate(0deg);
        clip-path: polygon(100% 0%, 0% 100%, 0 0);
        clip-path: polygon(100% 0%, 0% 100%, 0 0);
        display: flex;
        flex-direction: column;
    }

    .cooperl-360-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 50;
        width: 100%;
        max-width: 200px;
    }

    .cooperl-360-part:hover {
        background-color: rgba(24, 92, 118, 1);
        color: rgba(255, 255, 255, 1) !important;
    }

    .cooperl-360-part:hover .cooperl-360-icon {
        transition: transform .2s ease-in-out;
        transform-origin: center bottom;
        transform: scale(1);
    }

    .cooperl-360-part:hover .cooperl-360-icon {
        transform: scale(1.25);
    }

    .cooperl-360-content {
        position: absolute;
        left: 0;
        right: 50%;
        top: 0;
        bottom: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        transition: all .2s ease-in-out;
        transform: scale(1);
    }

    .cooperl-360-content .cooperl-360-title {
        font-size: clamp(0.625rem, 0.4044rem + 0.9412vw, 0.875rem) !important;
    }

    .uppercase {
        text-transform: uppercase;
    }

    .cooperl-360-part:nth-child(2) {
        transform: rotate(45deg);
    }

    .cooperl-360-part:nth-child(2) .cooperl-360-content {
        transform: rotate(-45deg);
    }

    .cooperl-360-part:nth-child(3) {
        transform: rotate(90deg);
    }

    .cooperl-360-part:nth-child(3) .cooperl-360-content {
        transform: rotate(-90deg);
    }

    .cooperl-360-part:nth-child(4) {
        transform: rotate(135deg);
    }

    .cooperl-360-part:nth-child(4) .cooperl-360-content {
        transform: rotate(-135deg);
    }

    .cooperl-360-part:nth-child(5) {
        transform: rotate(180deg);

    }

    .cooperl-360-part:nth-child(5) .cooperl-360-content {
        transform: rotate(-180deg);

    }

    .cooperl-360-part:nth-child(6) {
        transform: rotate(225deg);
    }

    .cooperl-360-part:nth-child(6) .cooperl-360-content {
        transform: rotate(-225deg);
    }

    .cooperl-360-part:nth-child(7) {
        transform: rotate(270deg);
    }

    .cooperl-360-part:nth-child(7) .cooperl-360-content {
        transform: rotate(-270deg);
    }

    .cooperl-360-part:nth-child(8) {
        transform: rotate(315deg);
    }

    .cooperl-360-part:nth-child(8) .cooperl-360-content {
        transform: rotate(-315deg);
    }
}

.cooperl-360-part-disabled {
    opacity: 0.5;
    filter: grayscale(1);
    pointer-events: none;
}

@media (max-width: 794px) {
    .cooperl-360-part:not(:last-child):after {
        content: "";
        position: absolute;
        left: 50%;
        bottom:0;
        width: 1px;
        height: 1rem;
        background-color: var(--wp--preset--color--custom-secondary) !important;
        transform: translate(-50%, 100%);
    }
}
.wp-block-post-terms,
[rel="tag"]
.label {
    display: inline-flex;
    font-weight: 600;
}

.wp-block-quote {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    &:before,
    &:after {
        display: inline-block;
        font-family: "cooperl-northern-europe" !important;
        font-style: normal !important;
        font-weight: normal !important;
        font-variant: normal !important;
        text-transform: none !important;
        speak: none;
        line-height: 1;
        vertical-align: -.125em;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: var(--wp--preset--color--custom-primary);
        font-size: clamp(2rem, 1.167rem + 3.333vi, 3.25rem);
    }

    &:before {
        content: "\ea17";
    }
    &:after {
        content: "\ea16";
        position: absolute;
        right:0;
        bottom:0;
        transform: translateY(calc(100% + 1rem));
    }
}

/* NAVIGATION */
.main-navigation-wrapper,
.main-navigation-wrapper .main-navigation {
    /* Mobile only */
    @media (max-width: 1025px) {
        gap: 1em;
    }
}

.wp-block-ghub-tab-contents-container,
.wp-block-ghub-tab-content {
    height: 100%;
}