/**
 * Theme Name: Real Printing
 * Template:   generatepress
 * Author:     Gert Knibbe
 */

:root {
    --gradient: linear-gradient(35deg,#8e034f 9%,#e6007e 64%,#e099c1 98%);
    --main-spacing: 0.875rem;
    --half-spacing: calc(var(--main-spacing) / 2);
    --double-spacing: calc(var(--main-spacing) * 2);
    --container-spacing-l: 4rem;
    --container-spacing-m: 2rem;
    --container-spacing-s: 2rem;
    --border-radius: var(--main-spacing);
}

@media (width > 1024px) {
    :root {
        --container-spacing-l: 8rem;
        --container-spacing-m: 4rem;
    }
}

/* General */
html body {
    scroll-padding-top: calc(60px + var(--main-spacing));
	overflow-x: clip;
}

p {
    margin-bottom: var(--main-spacing);
}

.separate-containers .site-main {
    padding: 0;
    margin: 0;
}

.site-content article .inside-article {
    padding-top: 0;
}

.btn-primary {
    background: var(--gradient);
    transition: all .2s ease-in-out;
}

.btn-primary:hover {
    filter: brightness(1.12) saturate(1.08);
}

.cta-banner {
    background-size: 150% 100%;
    animation: gradientMove 18s ease infinite;
}

@keyframes gradientMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.cta-banner .btn-secondary,
.sticky-enabled .main-navigation.is_stuck {
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
}

.main-navigation .main-nav ul li a, .menu-toggle, .main-navigation .menu-bar-item > a {
    transition: all .2s ease-in-out;
}

@media (width < 1025px) {
    .site-header .mobile-menu-control-wrapper .menu-toggle,
    #sticky-navigation .menu-toggle {
        background-color: unset !important;
        padding: 0;
        display: flex;
        align-content: center;
    }

    .site-header .menu-toggle > .mobile-menu,
    #sticky-navigation .menu-toggle > .mobile-menu {
        line-height: 15px;
        padding-left: 6px;
    }
}

@media (width > 1023px) {
    #sticky-navigation {
        padding: 0 16px;
    }
}

#sticky-navigation .navigation-branding {
    margin-left: 0;
}

.site-header .header-image {
    height: 40px;
    width: auto;
}

@media (width < 768px) {
    .site-header .header-image {
        height: 30px;
    }

    #sticky-navigation {
        padding: 0 16px;
    }
}

@media (width > 1023px) {
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        position: relative;
    }

    .main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        background: var(--accent);
        border-radius: 999px;
        position: absolute;
        bottom: 12px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Homepage */
.stamp {
    animation: stampRotate 60s linear infinite;
}

@keyframes stampRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.customer-review-tabs .gb-tabs__menu-item img,
.customer-review-tabs .gb-tabs__menu-item,
.customer-review-tabs .gb-tabs__item {
    transition: all .2s ease-in-out;
}

.customer-review-tabs .gb-tabs__menu-item:not(.gb-block-is-current) img {
    filter: grayscale(1);
    opacity: .75;
}

@media (width < 768px) {
    .customer-review-tabs .gb-tabs__menu {
        grid-template-columns: repeat(3, 1fr);
    }

    .customer-review-tabs .gb-tabs__menu-item:not(:nth-child(-n + 3)) {
        display: none;
    }
}

.customer-review-tabs .gb-tabs__item .review-content {
    min-height: 92px;
}

@media (width < 768px) {
    .customer-review-tabs .gb-tabs__item .review-content {
        min-height: 153px;
    }
}

/* Footer */
.site-footer {
    background: var(--background-light);
}

/* Forms */
.fluentform {
    width: 100%;
}

.fluentform .ff-el-group {
    margin-bottom: var(--double-spacing);
}

.fluentform .ff_submit_btn_wrapper {
	margin-bottom: 0;
}

.fluentform .ff-el-input--label {
    margin-bottom: var(--half-spacing);
}

.fluentform .ff-el-input--label label {
    display: inline-block;
    font-weight: 600;
    line-height: 1.3;
}

.fluentform .ff-el-form-control {
    width: 100%;
    min-height: 56px;
    padding: 0 var(--main-spacing);
    border: 0;
    border-radius: calc(var(--border-radius) * .75);
    box-shadow: none;
    font: inherit;
    line-height: 1.4;
	background-color: var(--base-3);
    transition:
        box-shadow .2s ease-in-out,
        border-color .2s ease-in-out,
        background-color .2s ease-in-out;
}

.fluentform textarea.ff-el-form-control {
    min-height: 200px;
    padding-top: var(--main-spacing);
    padding-bottom: var(--main-spacing);
    resize: vertical;
}

.fluentform .ff-el-form-control::placeholder {
    opacity: .65;
}

.fluentform .ff-el-form-control:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .12);
}

.fluentform .ff-el-is-required label::after {
    margin-left: 2px;
}

.fluentform .ff-btn-submit {
    min-height: 52px;
    padding: 0 var(--double-spacing);
    border: 0;
    border-radius: calc(var(--border-radius) * .75);
    background: var(--gradient);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
        filter .2s ease-in-out,
        transform .2s ease-in-out;
}

.fluentform .ff-btn-submit:hover {
    filter: brightness(1.12) saturate(1.08);
}

.fluentform .ff-btn-submit:active {
    transform: translateY(1px);
}

.fluentform .ff-btn-submit:focus-visible,
.fluentform .ff-el-form-control:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.fluentform .ff-el-is-error .ff-el-form-control {
    box-shadow: 0 0 0 2px currentColor;
}

.fluentform .ff-el-form-check-label,
.fluentform .ff-el-form-check-input {
    cursor: pointer;
}

.fluentform .ff-message-success {
	border: none;
	padding: 0;
	box-shadow: unset;
	margin: 0;
}

@media (width < 768px) {
    .fluentform .ff-el-form-control {
        min-height: 52px;
    }

    .fluentform textarea.ff-el-form-control {
        min-height: 180px;
    }

    .fluentform .ff-btn-submit {
        width: 100%;
    }
}

/* GLightbox */
#glightbox-slider .gslide-description .gdesc-inner {
	padding: var(--main-spacing)
}

#glightbox-slider .gslide-description .gdesc-inner h4 {
	font-family: Noto Sans, sans-serif;
	margin-bottom: 0;
}

#glightbox-body .gbtn {
	border-radius: 100%;
	background-color: var(--base-3);
	height: 42px;
	width: 42px;
	transition: all ease 2s;
}

#glightbox-body .gbtn:is(:hover, :focus) {
	background-color: #fafafa;
}

#glightbox-body .gbtn:is(:hover, :focus) path {
	fill: var(--accent);
}

#glightbox-body .gbtn path {
	fill: var(--accent-light);
}