/*
Theme Name: Primblock
Theme URI: https://peimsite.net/primblock
Author: Florin Nita
Author URI: https://peimsite.net
Description: A minimal WordPress block theme
Requires at least: 6.0
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: primblock
*/

/*
----------------------------------
RESET
----------------------------------
*/

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Fix mobile Safari increase font-size on landscape mode */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* For images to not be able to exceed their container */
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}

/* Removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

/* Prevents elastic over scroll */
body,
html {
    overscroll-behavior: none;
}



/*
----------------------------------
ROOT VARIABLES
----------------------------------
*/

:root {
    --color-layer-1: var(--wp--preset--color--white);
    --color-layer-2: var(--wp--preset--color--grey-bg);
    --color-text: var(--wp--preset--color--grey);
    --color-title: var(--wp--preset--color--primary);

    --font-title: "Montserrat", sans-serif;
    --font-text: "Karla", sans-serif;

    color-scheme: light;
}

:root.dark-mode {
    --color-layer-1: hsl(0, 0%, 10%);
    --color-layer-2: hsl(0, 0%, 15%);
    --color-text: var(--wp--preset--color--grey-bg);
    --color-title: var(--wp--preset--color--grey-bg);

    color-scheme: dark;
}

/*
----------------------------------
BASE
----------------------------------
*/

section:not(:has(.sticky-top)) {
    overflow: hidden;
}

h1,
h2 {
    font-family: var(--font-title);
    color: var(--color-title);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.04rem;
    /* 4% in Figma (16 x 0.04) */
}

h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    color: var(--color-title);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.04rem;
    /* 4% in Figma (16 x 0.04) */
}

h1 {
    font-size: var(--wp--preset--font-size--fs-1);
}

h2 {
    font-size: var(--wp--preset--font-size--fs-2);
}

h3 {
    font-size: var(--wp--preset--font-size--fs-3);
}

h4 {
    font-size: var(--wp--preset--font-size--fs-4);
}

h5 {
    font-size: var(--wp--preset--font-size--fs-5);
}

h6 {
    font-size: var(--wp--preset--font-size--fs-6);
}

h1>em,
h2>em,
h3>em,
.h1>em,
.h2>em,
.h3>em {
    font-style: normal;
    color: var(--wp--preset--color--accent);
}

body,
p {
    font-family: var(--font-text);
    color: var(--color-text);
    line-height: 1.35;
    letter-spacing: 0.03rem;
    /* 3% in Figma (16 x 0.03) */
}

body {
    background-color: var(--color-layer-1);
}

main {
    margin: 0;
}

a:has(>img) {
    line-height: 1;
}

section .wp-block-image img {
    max-width: 720px;
    width: 100%;
}

.fig-block>img {
    display: block;
}

.wp-block-post {
    display: flex;
}

/* Term Description color fix for Intro section on Archive */
.wp-block-term-description.has-white-color p {
    color: var(--wp--preset--color--white) !important;
}

/* Hide intro and featured sections on paginated archive pages and on tags */
.archive .archive-intro,
.archive .archive-featured,
.archive .archive-banner {
    display: none;
}

.category-journal:not(.paged) .archive-intro,
.category-journal:not(.paged) .archive-featured,
.category-journal:not(.paged) .archive-banner {
    display: block;
}

/*
----------------------------------
HEADER & NAVBAR
----------------------------------
*/

header {
    position: fixed;
    top: 30px;
    width: 100%;
    z-index: 1000;
    transition: top 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.admin-bar header {
    top: 62px;
}

.scrolling-down header {
    transform: translateY(-200%);
    transition: transform 0.6s ease-in-out;
}

.scrolling-up header {
    transform: translateY(0);
    transition: transform 0.6s ease-in-out;
}

.single-post header .floating-header,
.page.page-child header .floating-header,
.scrolling-up header .floating-header,
.scrolling-down header .floating-header {
    background: linear-gradient(270deg, rgba(0, 30, 120, 0.9) 0%, #0C1332 100%);
    border-radius: 20px;
}

.contact-bar a {
    text-decoration: none;
    color: var(--wp--preset--color--text);
}

.contact-bar a:hover,
.contact-bar a:focus {
    color: var(--wp--preset--color--accent);
}

.wp-block-site-logo img {
    height: 2rem;
    width: auto;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background: rgba(0, 0, 0, 0.5);
    padding: 0;
}

.wp-block-navigation__responsive-close {
    background-color: rgba(255, 255, 255, 0.2);
    padding: var(--wp--preset--spacing--space-6);
    padding-bottom: var(--wp--preset--spacing--space-10);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    padding: 1em;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    min-width: 250px !important;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container li {
    margin-bottom: 0.5rem;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container li:last-of-type {
    margin-bottom: 0;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container li>a {
    background-color: var(--color-layer-1);
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container li>a:hover {
    background-color: var(--color-layer-2);
}

.wp-block-navigation:not(.has-text-color) .wp-block-navigation__submenu-container {
    color: var(--color-text);
    border: none;
}

.wp-block-navigation-submenu .wp-block-navigation-item:hover>a {
    color: var(--wp--preset--color--purple);
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container {
    background-color: var(--color-layer-1);
}

/* Force mobile menu on tablets and mobile devices */
@media (max-width: 1024px) {

    /* Show the mobile menu toggle button */
    .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
        display: flex !important;
    }

    /* Hide the regular navigation menu */
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container-open svg {
        fill: #fff;
    }

    .wp-block-navigation__responsive-container-close svg {
        fill: #000;
    }

    .wp-block-navigation__responsive-close ul {
        flex-direction: column;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        overflow: visible;
    }

    .wp-block-navigation__responsive-close {
        background-color: var(--color-layer-1);
    }

    .wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        gap: 1rem;
    }

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
        padding-block: 0;
        gap: 0.5rem !important;
    }

    .wp-block-navigation .has-child .wp-block-navigation__submenu-container li {
        margin-bottom: 0;
    }

    .scrolling-up .wp-block-navigation__responsive-close,
    .scrolling-down .wp-block-navigation__responsive-close {
        margin-top: -30px;
    }

    .wp-block-navigation__responsive-container-close {
        top: 2.5rem;
        right: 1rem;
    }

    .wp-block-navigation__responsive-container {
        height: 100vh;
    }
}

/* Desktop navbar view*/

@media (min-width: 1025px) {

    header nav .wp-block-navigation {
        gap: 0;
    }

    header nav .wp-block-navigation-item a {
        padding: var(--wp--preset--spacing--space-3) 1rem;
        color: var(--wp--preset--color--white) !important;
        border-radius: 5rem;
        transition: background-color 0.2s, color 0.2s;
    }

    header nav .wp-block-navigation-item:hover a {
        background-color: var(--wp--preset--color--accent);
        color: var(--wp--preset--color--primary) !important;
    }

    .wp-block-navigation__responsive-close {
        padding: 0;
        border-radius: 5rem;
        overflow: visible;
    }

    header nav .wp-block-navigation__responsive-container-open svg {
        fill: var(--wp--preset--color--white);
        transition: fill 0.3s ease;
    }

    .wp-block-site-logo img {
        height: 3rem;
        width: auto;
    }

    header nav .wp-block-navigation-item__label {
        font-size: 0.8rem !important;
    }

    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: block !important;
    }

    .wp-block-navigation-submenu .wp-block-navigation__submenu-icon svg {
        stroke: #fff;
    }

    .wp-block-navigation-submenu:hover .wp-block-navigation__submenu-icon svg,
    .wp-block-navigation-submenu:focus-within .wp-block-navigation__submenu-icon svg,
    .wp-block-navigation-submenu:active .wp-block-navigation__submenu-icon svg {
        stroke: var(--wp--preset--color--primary-dark);
    }

    .wp-block-navigation-item.has-child {
        padding-right: var(--wp--preset--spacing--space-4);
    }

    .wp-block-navigation-item.has-child:hover,
    .wp-block-navigation-item.has-child:focus-within {
        background-color: var(--wp--preset--color--accent);
        border-radius: 5rem;
    }

    .wp-block-navigation-item.has-child>a {
        padding-right: var(--wp--preset--spacing--space-2);
    }

    header nav .wp-block-navigation-item.has-child {
        position: relative;
    }

    header nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container {
        margin-top: 0;
        padding: var(--wp--preset--spacing--space-3);
        border-radius: 0.75rem;
        border: 1px solid rgba(141, 177, 222, 0.25);
        background-color: var(--color-layer-1);
        box-shadow: 0 14px 36px rgba(7, 20, 56, 0.2);
        z-index: 1001;
    }

    header nav .wp-block-navigation-item.has-child:hover>.wp-block-navigation__submenu-container,
    header nav .wp-block-navigation-item.has-child:focus-within>.wp-block-navigation__submenu-container {
        visibility: visible;
        opacity: 1;
    }

    header nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        width: 100%;
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        color: var(--color-text) !important;
    }

    header nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    header nav .wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
        background-color: var(--wp--preset--color--primary-bg);
        color: var(--wp--preset--color--primary) !important;
    }

    .wp-block-navigation .has-child.has-megamenu .wp-block-navigation__submenu-container {
        min-width: 100px !important;
    }

    .has-megamenu>ul {
        width: 720px !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        padding: var(--wp--preset--spacing--space-7) 0 !important;
        background-color: var(--color-layer-1) !important;
    }

    .has-megamenu:hover>ul>li,
    .has-megamenu:focus-within>ul>li {
        background-color: var(--color-layer-1) !important;
    }

    .has-megamenu>ul>li {
        display: block !important;
        padding: 0 var(--wp--preset--spacing--space-5) !important;
        margin-bottom: 0 !important;
    }

    .has-megamenu>ul>li:nth-child(2) {
        border-left: 0.5px solid var(--wp--preset--color--grey);
        border-right: 0.5px solid var(--wp--preset--color--grey);
    }

    .has-megamenu>ul>li>button {
        display: none !important;
    }

    .has-megamenu>ul>li a {
        text-transform: none !important;
        color: var(--wp--preset--color--grey) !important;
        padding: .5rem 1rem !important;
        font-weight: 400 !important;
        display: inline-block !important;
        line-height: 1.25 !important;
    }

    .has-megamenu>ul>li>a {
        color: var(--wp--preset--color--accent) !important;
        line-height: 1.1rem !important;
    }

    .has-megamenu>ul>li>ul {
        height: auto !important;
        opacity: 1 !important;
        overflow: visible !important;
        visibility: visible !important;
        width: auto !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .has-megamenu>ul>li>ul>li {
        margin-bottom: 0.25rem !important;
    }
}

@media (min-width: 1200px) {
    header nav .wp-block-navigation-item a {
        padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-5);
    }
}

/*
----------------------------------
FOOTER
----------------------------------
*/
footer a {
    transition: all 0.3s ease;
}

footer nav ul li a:hover,
footer nav ul li a:focus {
    text-decoration: underline;
    text-underline-offset: 0.35rem;
}

.wp-block-navigation.footer-solutions-menu>.wp-block-navigation__container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--space-6);
}

.wp-block-navigation.footer-solutions-menu>.wp-block-navigation__container>li {
    flex-direction: column;
    align-items: flex-start;
}

.wp-block-navigation.footer-solutions-menu .has-child .wp-block-navigation__submenu-container li>a {
    background-color: transparent;
    padding-inline: 0;
}

.wp-block-navigation.footer-solutions-menu .has-child .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
    padding: 0;
}

.wp-block-navigation.footer-solutions-menu .has-child .wp-block-navigation__submenu-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: auto;
    background-color: transparent;
    padding: 0;
    border: none;
}

.wp-block-navigation.footer-solutions-menu .wp-block-navigation-item.has-child:hover,
.wp-block-navigation.footer-solutions-menu .wp-block-navigation-item.has-child:focus-within {
    background-color: transparent;
}

.wp-block-navigation.footer-solutions-menu .has-child .wp-block-navigation__submenu-container {
    min-width: 120px !important;
}

.wp-block-navigation.footer-solutions-menu .wp-block-navigation__submenu-icon {
    display: none;
}

.wp-block-navigation.footer-solutions-menu .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item {
    margin-bottom: 0;
}

.wp-block-navigation.footer-solutions-menu .wp-block-navigation-item.has-child>a {
    padding-right: 0;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
}

.wp-block-navigation.footer-solutions-menu .wp-block-navigation-item.has-child {
    padding-right: 0;
    max-width: 230px;
    display: flex;
    flex-direction: column;
}

footer .has-separators {
    border-top: 0.5px solid rgba(141, 177, 222, 1);
    border-bottom: 0.5px solid rgba(141, 177, 222, 1);
}

footer form .form-row>p {
    display: flex;
}

footer form p {
    margin: 0;
}

footer form input {
    background-color: rgba(255, 255, 255, 0.5);
    height: 2.5rem;
    padding-inline: 1rem;
    border: none;
    border-radius: 3rem;
}

footer form input::placeholder {
    color: var(--wp--preset--color--primary-dark);
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    opacity: 0.6;
}

footer form button[type="submit"] {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    border: none;
    border-radius: 3rem;
    padding: 0 1.5rem;
    height: 2.5rem;
    margin-left: -2rem;
    font-weight: 600;
    letter-spacing: 0.03rem;
    z-index: 2;
    flex-shrink: 0;
    cursor: pointer;
}

footer form button[type="submit"]::after {
    --arrow-icon: url('assets/icons/arrow.svg');
    content: "";
    display: inline-block;
    height: 1rem;
    width: 1rem;
    background-image: var(--arrow-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    margin-left: var(--wp--preset--spacing--space-3);
    transition: transform 0.3s ease;
}

footer form button[type="submit"]:hover::after,
footer form button[type="submit"]:focus::after {
    transform: translateX(4px);
}

@media (max-width: 640px) {
    footer form .form-row>p {
        flex-direction: column;
    }

    footer form button[type="submit"] {
        margin-left: 0;
        margin-right: auto;
    }

    footer form input {
        width: 100%;
    }
}

/*
----------------------------------
BUTTONS & LINKS
----------------------------------
*/

a {
    transition: color 0.3s ease;
}

.wp-block-read-more,
.wp-block-button>div,
.wp-element-button {
    position: relative;
    display: block;
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    font-weight: 600;
    letter-spacing: 0.03rem;
    color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--accent);
    padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-6);
    border-radius: 10rem;
    transition: all 0.3s ease;
}

.is-style-outline .wp-element-button {
    padding: calc(var(--wp--preset--spacing--space-3) - 2px) var(--wp--preset--spacing--space-6);
    background-color: transparent;
    border-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.is-style-outline .wp-element-button:hover {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
}

.link-button>a,
.link-button>div,
.link-button {
    background-color: transparent;
    padding: 0;
    text-decoration: none;
    font-size: var(--wp--preset--font-size--fs-8);
    color: var(--wp--preset--color--grey);
    font-weight: 600;
    letter-spacing: 0.03rem;
    transition: all 0.3s ease;
}

.link-button:hover>a,
.link-button:focus>a,
.link-button:hover>div,
.link-button:focus>div,
.link-button:hover,
.link-button:focus {
    background-color: transparent;
    color: var(--wp--preset--color--grey);
}

.wp-block-read-more,
.wp-block-button:not(.link-button) {
    position: relative;
    overflow: hidden;
}

.wp-block-button:not(.link-button)>a {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.wp-block-button:not(.link-button)>a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    /* darken color */
    opacity: 0;
    /* start transparent */
    transition: opacity 0.25s;
    z-index: -1;
}

.wp-block-button:not(.link-button)>a:hover::before,
.wp-block-button:not(.link-button)>a:focus::before {
    opacity: 0.15;
}

.wp-block-read-more.has-arrow,
.link-button.has-arrow,
.wp-block-button.has-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--wp--preset--spacing--space-3);
}

.wp-block-read-more.has-arrow,
.link-button.has-arrow>a,
.link-button.has-arrow>div,
.wp-block-button.has-arrow>a {
    display: flex;
    align-items: center;
}

.wp-block-read-more.has-arrow::after,
.link-button.has-arrow>a::after,
.link-button.has-arrow>div::after,
.wp-block-button.has-arrow>a::after,
.wp-block-button.has-arrow>div::after {
    --arrow-icon: url('assets/icons/arrow.svg');
    content: "";
    display: inline-block;
    height: 1rem;
    width: 1rem;
    background-image: var(--arrow-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    margin-left: var(--wp--preset--spacing--space-3);
    transition: transform 0.3s ease;
}

.wp-block-button.is-style-outline.has-arrow>a::after,
.wp-block-button.is-style-outline.has-arrow>div::after {
    --arrow-icon: url('assets/icons/arrow-white.svg');
}

.wp-block-button.is-style-outline.has-arrow:hover>a::after,
.wp-block-button.is-style-outline.has-arrow:hover>div::after,
.wp-block-button.is-style-outline.has-arrow:focus>a::after,
.wp-block-button.is-style-outline.has-arrow:focus>div::after {
    --arrow-icon: url('assets/icons/arrow.svg');
}

.wp-block-read-more.has-arrow:hover::after,
.has-arrow:hover>a::after,
.has-arrow:hover>div::after {
    transform: translateX(4px);
}

.has-arrow.back-arrow>a,
.has-arrow.back-arrow>div {
    padding-left: 2.5rem;
}

.has-arrow.back-arrow>a::after,
.has-arrow.back-arrow>div::after {
    position: absolute;
    left: 1rem;
    transform: rotate(180deg);
    margin-right: var(--wp--preset--spacing--space-3);
    margin-left: 0 !important;
}

.has-arrow.back-arrow:hover>a::after,
.has-arrow.back-arrow:hover>div::after {
    transform: rotate(180deg) translateX(4px);
}

@media (max-width: 640px) {

    .wp-block-read-more.has-arrow::after,
    .link-button.has-arrow>a::after,
    .link-button.has-arrow>div::after,
    .wp-block-button.has-arrow>a::after,
    .wp-block-button.has-arrow>div::after {
        height: 0.8rem;
        width: 0.8rem;
        margin-left: var(--wp--preset--spacing--space-2);
    }

    footer form button[type="submit"]::after {
        height: 0.8rem;
        width: 0.8rem;
    }
}

.wp-block-read-more.primary-button,
.wp-block-button.primary-button>a,
.wp-block-button.primary-button>div {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}

.wp-block-read-more.has-arrow.primary-button::after,
.wp-block-button.primary-button.has-arrow>a::after,
.wp-block-button.primary-button.has-arrow>div::after {
    --arrow-icon: url('assets/icons/arrow-yellow.svg');
}

footer .link-button.has-arrow>a,
footer .link-button.has-arrow>div,
footer .wp-block-button.has-arrow>a,
footer .wp-block-button.has-arrow>div {
    font-weight: 400;
}

footer .link-button.has-arrow>a::after,
footer .link-button.has-arrow>div::after,
footer .wp-block-button.has-arrow>a::after,
footer .wp-block-button.has-arrow>div::after {
    --arrow-icon: url(assets/icons/arrow-yellow.svg);
}

.social-icons a {
    display: block;
    transition: transform 0.3s ease;
}

.social-icons a img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    -moz-filter: brightness(0) invert(1);
    -o-filter: brightness(0) invert(1);
    -ms-filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}

.social-icons a:hover img {
    opacity: 1;
    transform: scale(1.1);
}


/*
----------------------------------
FORMS AND INPUTS
----------------------------------
*/
#subscribe-form input,
#contact-form input,
#contact-form textarea {
    width: 100%;
    background-color: var(--color-layer-1);
    border: none;
    border-radius: 0.75rem;
    padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-4);
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

#subscribe-form input {
    border-radius: 5rem;
}

#subscribe-form input::placeholder,
#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: var(--color-text);
    font-size: var(--wp--preset--font-size--fs-8);
    opacity: 0.5;
}

#contact-form label {
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    color: var(--color-text);
    margin-bottom: 0.5rem;
    display: block;
}

#subscribe-form [type="submit"],
#contact-form [type="submit"] {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    border: none;
    border-radius: 3rem;
    padding: 0 1.5rem;
    height: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
}

#subscribe-form [type="submit"]::after,
#contact-form [type="submit"]::after {
    --arrow-icon: url('assets/icons/arrow.svg');
    content: "";
    display: inline-block;
    height: 1rem;
    width: 1rem;
    background-image: var(--arrow-icon);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    margin-left: var(--wp--preset--spacing--space-3);
    transition: transform 0.3s ease;
}

#subscribe-form [type="submit"]::after {
    --arrow-icon: url('assets/icons/arrow-yellow.svg');
}

#subscribe-form [type="submit"]:hover::after,
#contact-form [type="submit"]:hover::after,
#contact-form [type="submit"]:focus::after {
    transform: translateX(4px);
}

#subscribe-form [type="submit"] {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}

#contact-form .input-row {
    display: flex;
    gap: var(--wp--preset--spacing--space-6);
}

#contact-form .input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

#subscribe-form p,
#contact-form .input-group p {
    margin-bottom: 0;
}

.wpcf7-not-valid-tip {
    font-size: 1rem;
    padding-left: 1.25rem;
    padding-top: 0.25rem;
}

.wpcf7 form .wpcf7-response-output {
    border-radius: 1rem;
    font-size: 1rem;
    margin: 2rem 0 0;
    padding: 0.75rem 1rem;
    color: var(--wp--preset--color--white);
}


/*
----------------------------------
PAGINATION
----------------------------------
*/

.wp-block-query-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--space-3);
    margin-top: var(--wp--preset--spacing--space-8);
    flex-wrap: wrap;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--color-text);
    text-decoration: none;
    padding: var(--wp--preset--spacing--space-3) var(--wp--preset--spacing--space-5);
    border: 2px solid var(--color-layer-2);
    border-radius: 10rem;
    transition: all 0.3s ease;
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--primary);
}

.wp-block-query-pagination-numbers {
    display: flex;
    gap: var(--wp--preset--spacing--space-2);
    align-items: center;
}

.wp-block-query-pagination-numbers .page-numbers {
    font-family: var(--font-title);
    font-size: var(--wp--preset--font-size--fs-8);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 100%;
    transition: all 0.3s ease;
}

.wp-block-query-pagination-numbers .page-numbers:hover {
    background-color: var(--color-layer-2);
    color: var(--color-title);
}

.wp-block-query-pagination-numbers .page-numbers.current {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
    font-weight: 600;
}

.wp-block-query-pagination-numbers .page-numbers.dots {
    border: none;
    pointer-events: none;
}


/*
----------------------------------
CUSTOM SEARCH
----------------------------------
*/

.modern-search .wp-block-search__inside-wrapper {
    height: 2.75rem;
    border-radius: 5rem !important;
    overflow: hidden;
    border: none;
    background-color: var(--color-layer-2);
    padding-left: 1rem;
}

.modern-search {
    flex: 0 0 auto;
}

.modern-search input.wp-block-search__input {
    font-family: var(--font-text);
    font-size: var(--wp--preset--font-size--fs-8);
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--color-text);
    min-width: 180px;
}

.modern-search .wp-block-search__button {
    background: transparent;
    border: none !important;
    color: var(--color-text);
    padding-inline: 0.5rem;
    padding-block: 0;
    margin-left: 0;
    cursor: pointer;
    transition: color 0.2s ease;
}

.modern-search .wp-block-search__button:hover,
.modern-search .wp-block-search__button:focus {
    color: var(--wp--preset--color--accent);
}

@media (max-width: 640px) {

    .modern-search {
        width: 100%;
    }

    .modern-search .wp-block-search__inside-wrapper {
        width: 100%;
    }
}


/*
----------------------------------
CUSTOM ELEMENTS
----------------------------------
*/

ul.arrow-list {
    padding-left: 0;
    margin-left: 0;
}

ul.arrow-list li {
    list-style: none;
    font-size: var(--wp--preset--font-size--fs-6);
    font-weight: 500;
    display: flex;
    margin-bottom: 0.75rem;
    gap: var(--wp--preset--spacing--space-4);
}

ul.arrow-list li::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-image: url('assets/icons/arrow-yellow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

@media (max-width: 640px) {
    ul.arrow-list li::before {
        width: 0.8rem;
        height: 0.8rem;
    }
}

ul.splitted-list {
    padding-left: 0;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--wp--preset--spacing--space-4);
    column-gap: var(--wp--preset--spacing--space-6);
}

ul.splitted-list li {
    margin-bottom: 0;
    flex: 1 1 100%;
}

.mini-sidebar {
    width: 250px;
    flex-shrink: 0;
    font-size: var(--wp--preset--font-size--fs-7);
    padding-top: var(--wp--preset--spacing--space-3);
}

.has-noise,
.has-noise-light {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    --noise-opacity: 0.15;
}

.has-noise {
    --noise-opacity: 0.1;
}

.has-noise-light {
    --noise-opacity: 0.15;
}

.has-noise::before,
.has-noise-light::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('./assets/images/noise-64.webp');
    background-size: 64px 64px;
    background-position: 0 0;
    background-repeat: repeat;
    opacity: var(--noise-opacity);
    pointer-events: none;
    z-index: 0;
}

.has-noise-light::before {
    background-image: url('./assets/images/noise-light-128.webp');
    background-size: 128px 128px;
}

.has-noise>*,
.has-noise-light>* {
    position: relative;
    z-index: 1;
}

.icon-wrapper {
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    width: clamp(7rem, 15vw, 10rem);
    height: clamp(7rem, 15vw, 10rem);
    display: grid;
    place-items: center;
}

.icon-wrapper img {
    height: clamp(3.5rem, 10vw, 5rem);
    width: auto;
    object-fit: contain;
}

.topics-widget .wp-block-tag-cloud a {
    display: flex;
    align-items: center;
    margin-right: 0;
    color: var(--color-text);
    text-decoration: none;
    text-transform: capitalize;
    margin-bottom: 0.75rem;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.topics-widget .wp-block-tag-cloud a:hover {
    color: var(--color-title);
    text-shadow:
        0.01em 0 0 var(--color-title),
        -0.01em 0 0 var(--color-title),
        0 0.01em 0 var(--color-title),
        0 -0.01em 0 var(--color-title);
}

.topics-widget .wp-block-tag-cloud a::before {
    content: url('assets/icons/arrow-yellow.svg');
    margin-right: var(--wp--preset--spacing--space-4);
    height: 22px;
    transition: margin-right 0.3s ease, padding-left 0.3s ease;
}

.topics-widget .wp-block-tag-cloud a:hover::before {
    padding-left: 4px;
    margin-right: calc(var(--wp--preset--spacing--space-4) - 4px);
}

.taxonomy-post_tag a {
    text-decoration: none;
    color: var(--color-text);
}

.taxonomy-post_tag a:hover {
    color: var(--color-title);
}

.wp-block-post h2 a,
.wp-block-post h3 a {
    color: var(--color-title);
}

.sticky-top {
    position: sticky;
    top: 2.5rem;
}

li.has-fs-7-font-size a {
    font-size: var(--wp--preset--font-size--fs-7);
}

.contact-details a {
    text-decoration: none;
    color: var(--wp--preset--color--primary);
}

.page-title-wrapper {
    padding-top: 80px;
    min-height: 260px !important;
}

.mt-header {
    padding-top: clamp(8rem, 18vw, 12rem);
}

.max-w-360 {
    width: 100%;
    max-width: 360px;
}

@media (min-width: 1025px) {
    ul.splitted-list li {
        flex: 1 1 calc(50% - var(--wp--preset--spacing--space-6));
    }

    ul.splitted-list.splitted-list-3 li {
        flex: 1 1 calc(33.333% - var(--wp--preset--spacing--space-6));
    }

    .has-trace-line::before {
        content: "";
        position: absolute;
        top: clamp(3.5rem, 15vw, 5rem);
        left: calc((100% - (4 * var(--wp--preset--spacing--space-6))) / 10);
        bottom: clamp(3.5rem, 15vw, 5rem);
        transform: translateX(-50%) scaleY(var(--trace-line-scale, 1));
        transform-origin: top center;
        width: 1px;
        background-color: var(--wp--preset--color--primary-dark);
        z-index: -1;
    }

    .page-title-wrapper {
        min-height: 360px !important;
    }
}

/*
----------------------------------
UTILITY CLASSES
----------------------------------
*/

.font-title {
    font-family: var(--font-title);
}

.font-text {
    font-family: var(--font-text);
}

.text-accent {
    color: var(--wp--preset--color--accent);
}

.block {
    display: block;
}

.no-overflow {
    overflow: hidden;
}

.is-relative {
    position: relative !important;
}

.is-absolute {
    position: absolute !important;
}

.bottom-left {
    bottom: 0;
    left: 0;
}

.is-inset {
    inset: 0;
}

.z-index-1 {
    z-index: 1;
}

.image-gradient {
    position: relative;
    overflow: hidden;
}

.image-gradient>*:not(a:has(img)) {
    position: relative;
    z-index: 5;
}

.image-gradient::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, rgba(12, 19, 50, 0.3) 0%, rgba(141, 177, 222, 0.15) 100%);
    pointer-events: none;
    z-index: 3;
    border-radius: 20px;
}

.image-gradient.secondary-gradient::after {
    background: linear-gradient(0deg, rgba(12, 19, 50, 0.7) 24.76%, rgba(141, 177, 222, 0) 107.29%);
}

.flex-fill {
    flex-grow: 1;
}

.no-shrink {
    flex-shrink: 0;
}

.text-balanced {
    text-wrap: balance;
}

a.no-underline,
.no-underline a {
    text-decoration: none;
}

.ratio-1 {
    aspect-ratio: 1 / 1;
}

.ratio-hero {
    aspect-ratio: 16 / 10;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.min-h-2 {
    min-height: 2lh;
}

/*
----------------------------------
ANIMATIONS
----------------------------------
*/

/* ===== Base (JS-off fallback) ===== */
.fade-in,
.fade-in-up,
.fade-in-left,
.fade-in-right .word-reveal {
    opacity: 1;
    transform: none;
}

/* ===== JS-enhanced initial states ===== */
.js .fade-in {
    opacity: 0;
}

.js .fade-in-up {
    opacity: 0;
    transform: translateY(40px);
}

.js .fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
}

.js .fade-in-right {
    opacity: 0;
    transform: translateX(40px);
}

.js .has-trace-line {
    --trace-line-scale: 0;
}

/* Word reveal spans */
.js .word-reveal span {
    display: inline-block;
    opacity: 0;
}

/*
    ----------------------------------
    CONSTELLATION BACKGROUND ANIMATION
    Add the class .constellation-bg to any block that has the night-sky
    background-image set as an inline style (WordPress Group block).

    The ::before pseudo-element inherits the background and rotates it
    independently of the block content. Adjust transform-origin percentages
    to move the pivot point relative to the image (80% 50% = right-centre,
    near the constellation).
    ----------------------------------
*/

@keyframes constellation-rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(15deg) scale(1.15);
    }

    100% {
        transform: rotate(0deg) scale(1);
    }
}

/* The block itself: clip the overflowing rotated bg and establish stacking */
.constellation-bg {
    position: relative;
    overflow: hidden;
}

/* Push all direct children above the animated pseudo-element */
.constellation-bg>* {
    position: relative;
    z-index: 1;
}

/*
    ::before inherits the background-image from the inline style on the element,
    then gets animated. It is oversized (-20% inset) so rotating 15deg never
    reveals a gap at the edges.
*/
.constellation-bg::before {
    --inset-value: -20%;
    content: '';
    position: absolute;
    inset: var(--inset-value) 0 var(--inset-value) var(--inset-value);
    background-image: inherit;
    background-position: center center;
    background-size: cover;
    border-radius: inherit;
    transform-origin: 75% 50%;
    /* pivot near the right-side constellation */
    animation: constellation-rotate 40s ease infinite;
    will-change: transform;
    z-index: 0;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {

    .fade-in,
    .fade-in-up,
    .fade-in-left,
    .fade-in-right,
    .word-reveal,
    .word-reveal span {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }

    .has-trace-line::before {
        transform: translateX(-50%) scaleY(1) !important;
        animation: none !important;
    }

    .constellation-bg::before {
        animation: none !important;
    }
}


/*
----------------------------------
RESPONSIVENESS (MOBILE-FIRST)
----------------------------------
*/

@media (min-width: 782px) {
    /* Core WP breakpoint */
    /* Small tablets */

    .order-1--sm {
        order: 1;
    }

    .order-2--sm {
        order: 2;
    }
}

@media (min-width: 1025px) {

    /* Tablets and small desktops */

    .grid-5--md {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .order-1--md {
        order: 1;
    }

    .order-2--md {
        order: 2;
    }

    .order-3--md {
        order: 3;
    }

    .order-4--md {
        order: 4;
    }

    .col-2--md {
        grid-column: span 2;
    }

    .col-3--md {
        grid-column: span 3;
    }

    .col-5--md {
        grid-column: span 5;
    }

    .is-absolute--md {
        position: absolute !important;
    }

    .w-250--md,
    .editor-styles-wrapper .w-250--md {
        max-width: 250px;
    }

    .w-600--md,
    .editor-styles-wrapper .w-600--md {
        max-width: 600px;
    }

    .w-700--md,
    .editor-styles-wrapper .w-700--md {
        max-width: 700px;
    }

    .w-800--md,
    .editor-styles-wrapper .w-800--md {
        max-width: 800px;
    }

    .px-8--md,
    .editor-styles-wrapper .px-8--md {
        padding-inline: var(--wp--preset--spacing--space-8);
    }

    .justify-end--md,
    .editor-styles-wrapper .justify-end--md {
        justify-content: flex-end;
    }

    .align-end--md,
    .editor-styles-wrapper .align-end--md {
        align-items: flex-end;
    }

    .align-center--md,
    .editor-styles-wrapper .align-center--md {
        align-items: center;
    }
}



@media (min-width: 1380px) {

    /* Desktops */

    .order-1--lg {
        order: 1;
    }

    .order-2--lg {
        order: 2;
    }

    .order-3--lg {
        order: 3;
    }

    .order-4--lg {
        order: 4;
    }
}

@media (min-width: 1600px) {

    /* Large desktops */
}

/*
----------------------------------
RESPONSIVENESS (DESKTOP-FIRST)
----------------------------------
*/

@media (min-width: 1599px) {

    /* Matches your wideSize */
}

@media (max-width: 1379px) {

    /* Matches your contentSize */
    .is-layout-grid.grid-lg {
        grid-template-columns: 1fr;
    }

    .is-layout-grid.grid-2-lg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .is-layout-grid.grid-3-lg {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .is-layout-flex.center-lg {
        justify-content: center;
    }

    .is-layout-flex.align-items-start-lg {
        align-items: flex-start;
    }

    .is-layout-flex.column-lg {
        flex-direction: column;
    }

}

@media (max-width: 1024px) {

    /* Tablets */
    .is-layout-grid.grid-md {
        grid-template-columns: 1fr;
    }

    .is-layout-grid.grid-2-md {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .is-layout-grid.grid-3-md {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .is-layout-flex.center-md {
        justify-content: center;
    }

    .is-layout-flex.align-items-start-md {
        align-items: flex-start;
    }

    .is-layout-flex.column-md {
        flex-direction: column;
    }

    .is-layout-flex.column-md {
        flex-direction: column;
    }

    .col-1-md {
        grid-column: span 1;
    }

    .col-2-md {
        grid-column: span 2;
    }

    .col-3-md {
        grid-column: span 3;
    }

    .grid-icons img {
        max-height: 48px;
    }

    .nogap-md {
        gap: 0;
    }

    .icon-wrapper {
        margin-left: 0 !important;
    }
}

@media (max-width: 599px) {

    /* Mobile */
    .is-layout-grid.grid-sm {
        grid-template-columns: 1fr;
    }

    .is-layout-grid.grid-2-sm {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .is-layout-flex.center-sm {
        justify-content: center;
    }

    .is-layout-flex.align-items-start-sm {
        align-items: flex-start;
    }

    .is-layout-flex.column-sm {
        flex-direction: column;
    }

    .order-2-sm {
        order: 2;
    }

    .nogap-sm {
        gap: 0;
    }
}



/*
----------------------------------
DARK MODE
----------------------------------
*/

.dark-mode .social-icons img,
.dark-mode .social-share-button .social-icon {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
    -moz-filter: brightness(0) invert(1);
    -o-filter: brightness(0) invert(1);
    -ms-filter: brightness(0) invert(1);
}

.dark-mode .wp-block-navigation-submenu .wp-block-navigation-item:hover>a {
    color: var(--wp--preset--color--accent);
}

.dark-mode h3 a {
    color: var(--wp--preset--color--purple);
}

.dark-mode h3 a:hover {
    color: var(--wp--preset--color--blue)
}

.dark-mode .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
    color: var(--wp--preset--color--white);
}

.dark-mode .wp-block-navigation__responsive-container-close svg {
    fill: #ffffff;
}

.dark-mode section img[src$=".svg"],
.dark-mode section img[src*=".svg?"] {
    filter: contrast(0.5) brightness(1.25);
}

.dark-mode .link-button>a,
.dark-mode .link-button>div,
.dark-mode .link-button {
    color: var(--wp--preset--color--accent);
}

.dark-mode .wp-block-post h3 a {
    color: var(--wp--preset--color--grey-bg);
}

.dark-mode .wp-block-post h3 a:hover,
.dark-mode .wp-block-post h3 a:focus {
    color: var(--wp--preset--color--accent);
}

.dark-mode .text-accent {
    color: var(--wp--preset--color--accent);
}

.dark-mode .has-primary-color {
    color: var(--wp--preset--color--accent) !important;
}

.dark-mode .has-primary-dark-color {
    color: var(--wp--preset--color--accent) !important;
}

.dark-mode li.has-primary-dark-color {
    color: var(--color-text) !important;
}

.dark-mode .has-horizontal-light-gradient-gradient-background {
    background: var(--color-layer-2) !important;
}

.dark-mode .has-noise {
    background-image: none !important;
}

.dark-mode .has-noise::before {
    content: none;
}

.dark-mode .has-noise-light::before {
    content: none;
}

.dark-mode .has-accent-light-background-color {
    background-color: var(--color-layer-2) !important;
}

.dark-mode .has-white-background-color {
    background-color: var(--color-layer-1) !important;
}

.dark-mode .has-primary-light-background-color {
    background-color: var(--color-layer-2) !important;
}

.dark-mode .has-trace-line::before {
    background-color: var(--color-text);
}

.dark-mode .contact-details a:not(.primary-button, .wp-element-button) {
    color: var(--wp--preset--color--accent);
}