/*
Theme Name: sowas-von
Theme URI: https://sowas-von.de
Author: SowasVon-Dev
Version: 1.0
Text Domain: sowas-von
*/

:root {
    /* System Colors */
    --color-main: #E6261F;
    --color-accent: #F2784B;
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-gray: #F5F5F5;

    /* Typography - Fluid Sizes (Mobile -> Desktop) */
    --fs-xl: clamp(1.9rem, 3.8vw, 4rem);
    /* Hero Size */
    --fs-lg: clamp(1.5rem, 2.5vw, 3rem);
    /* Section Size */
    --fs-md: clamp(1.1rem, 2vw, 2.5rem);
    /* Block Size */
    --fs-sm: clamp(0.9rem, 1.5vw, 1.5rem);
    /* Card Size */
    --fs-body: clamp(1.125rem, 0.5vw + 1rem, 1.25rem);
    /* 18px -> 20px */

    /* Fonts */
    --font-heading: 'Lexend', sans-serif;
    --font-body: 'Atkinson Hyperlegible', sans-serif;
}

/* Gutenberg Color Utilities */
.has-main-color {
    color: var(--color-main);
}

.has-main-background-color {
    background-color: var(--color-main);
}

.has-accent-color {
    color: var(--color-accent);
}

.has-accent-background-color {
    background-color: var(--color-accent);
}

.has-gray-color {
    color: var(--color-gray);
}

.has-gray-background-color {
    background-color: var(--color-gray);
}

.has-black-color {
    color: var(--color-black);
}

.has-black-background-color {
    background-color: var(--color-black);
}

.has-white-color {
    color: #fff;
}

.has-white-background-color {
    background-color: #fff;
}

/* Basic Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--color-black);
    background-color: var(--color-white);
}

/* -------------------------------------------------------------------------- */
/* Typography Styles                                                           */
/* -------------------------------------------------------------------------- */

p {
    word-break: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-black);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

/* Semantic Defaults (fallback) */
h1 {
    font-size: var(--fs-xl);
}

h2 {
    font-size: var(--fs-lg);
}

h3 {
    font-size: var(--fs-md);
}

h4 {
    font-size: var(--fs-sm);
}

/* Utility Classes (Visual Sizing) */
.sv-title-xl {
    font-size: var(--fs-xl) !important;
    font-weight: 700;
    line-height: 1.05;
}

.sv-title-lg {
    font-size: var(--fs-lg) !important;
    font-weight: 700;
    line-height: 1.1;
}

.sv-title-md {
    font-size: var(--fs-md) !important;
    font-weight: 700;
    line-height: 1.15;
}

.sv-title-sm {
    font-size: var(--fs-sm) !important;
    font-weight: 600;
    line-height: 1.2;
}

/* -------------------------------------------------------------------------- */

a {
    color: var(--color-main);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent);
}

/* -------------------------------------------------------------------------- */
/* Global Buttons (Standardized) */
/* -------------------------------------------------------------------------- */

/* Base Button Style */
.btn,
.wp-block-button__link,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px !important;
    border-radius: 20px !important;
    font-family: var(--font-body);
    font-weight: 500 !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    cursor: pointer;
    border: 2px solid var(--color-main) !important;
    background-color: var(--color-main) !important;
    color: var(--color-white) !important;
    box-shadow: 0 4px 12px rgba(230, 38, 31, 0.15) !important;
    text-align: center;
}

.btn:hover,
.wp-block-button__link:hover {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
}

/* --- Variants --- */

/* 1. Outline Red (Ghost) */
.btn-outline,
.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: #000 !important;
    border-color: var(--color-main) !important;
    box-shadow: none !important;
}

.btn-outline:hover,
.is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-main) !important;
    color: #fff !important;
    border-color: var(--color-main) !important;
}

/* 2. Solid White (Primary on Red backgrounds) */
.btn-white {
    background-color: #fff !important;
    color: var(--color-main) !important;
    border-color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.btn-white:hover {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

/* 3. Outline White (Ghost on Red backgrounds) */
.btn-outline-white {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
}

.btn-outline-white:hover {
    background-color: #fff !important;
    color: var(--color-main) !important;
    border-color: #fff !important;
}

/* Small Variant */
.btn-sm {
    padding: 8px 20px !important;
    font-size: 0.9rem !important;
}


.wp-block-buttons .wp-block-button__link {
    width: auto;
}

/* -------------------------------------------------------------------------- */
/* Global Scroll Next Button (Shared across blocks) */
/* -------------------------------------------------------------------------- */

.sv-scroll-next {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100px;
    min-height: 170px;
    background-color: var(--color-main, #E6261F);
    color: #fff;
    border-radius: 35px 0 0 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-decoration: none;
    z-index: 22;
    letter-spacing: 1px;
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 30px;
}

*:not(.main-cover-block)>.sv-scroll-next:hover {
    background-color: #000;
    color: #fff;
    transform: none;
}

.main-cover-block .sv-scroll-next:hover svg,
.arrow-box-service:hover svg {
    animation: sv-bob 1.5s ease-in-out infinite;
}

@keyframes sv-bob {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

.sv-scroll-next .tab-icon {
    font-size: 2.5rem;
    font-weight: 400;
    margin-left: 5px;
}

.sv-scroll-next svg {
    width: 20px;
    height: 40px;
    fill: none;
}

.sv-scroll-next svg path {
    fill: #fff;
}

@media (max-width: 991px) {
    .sv-scroll-next {
        width: 65px;
        min-height: 100px;
        gap: 8px;
        font-size: 13px;
    }

    .sv-scroll-next svg {
        width: 15px;
        height: 26px;
    }

    .wp-block-spacer {
        max-block-size: 30px;
    }
}

.gutenberg-content-wrapper {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
}

/* Responsive Max-Widths for Gutenberg Wrapper - Matching Bootstrap + Custom XXL */
@media (min-width: 576px) {
    .gutenberg-content-wrapper {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .gutenberg-content-wrapper {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .gutenberg-content-wrapper {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .gutenberg-content-wrapper {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {

    /* Custom Max-Width for XXL */
    .gutenberg-content-wrapper {
        max-width: 1220px;
    }

    /* Also apply the 1220px to standard containers as requested for "same size" */
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1220px;
    }
}

/* Handle nested wrappers to avoid cumulative padding and double-centering */
.gutenberg-content-wrapper .gutenberg-content-wrapper,
.gutenberg-content-wrapper .container,
.container .gutenberg-content-wrapper {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


.top-bar-logo img {
    width: 50px;
    height: auto;
    border-right: 1px solid #ffffff82;
    padding-right: 10px;
}

/* -------------------------------------------------------------------------- */
/* Footer                                                                      */
/* -------------------------------------------------------------------------- */

.site-footer {
    background-color: var(--color-main, #E6261F);
    color: #fff;
    padding: 60px 0 40px;
    position: relative;
}

.footer-main-row {
    gap: 30px;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

.site-footer a:hover {
    color: #fff;
    opacity: 0.75;
}

/* Left Column */
.footer-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-logo img {
    width: 90%;
    max-width: 175px;
    height: auto;
}

.footer-logo .logo-text {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
}

.footer-contact p {
    margin: 0 0 5px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.footer-legal .legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0px;
    flex-direction: column;
}

.footer-legal .legal-menu li a {
    font-size: 0.9rem;
    opacity: 0.8;
}

.footer-legal .legal-menu li a:hover {
    opacity: 1;
}

/* Right Column */
.footer-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 30px;
    align-items: flex-start;
}

.footer-contact-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-logo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.footer-newsletter-headline {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin: 0;
}

.footer-newsletter-btn {
    color: #000 !important;
}

/* Back to Top */
.back-to-top {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    min-height: 170px;
    background: #fff;
    color: var(--color-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    border-radius: 35px 0 0 0;
    text-decoration: none;
    z-index: 22;
    letter-spacing: 1px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 30px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.back-to-top:hover {
    background-color: #000;
    color: #fff;
    transform: none;
}

.back-to-top .tab-text {
    display: none;
}

.back-to-top svg {
    width: 23px;
    height: 40px;
}

.back-to-top svg path {
    fill: var(--color-main);
}

@media (max-width: 991px) {
    .back-to-top {
        width: 65px;
        min-height: 100px;
        gap: 8px;
        font-size: 13px;
        padding: 20px 10px;
    }

    .back-to-top svg {
        width: 15px;
        height: 26px;
    }

    .site-footer {
        padding: 60px 0 100px;
    }

    .footer-contact-wrapper {
        gap: 10px;
    }
}

@media (max-width: 991px) {
    .footer-right {
        margin-top: 10px;
    }
}

/* -------------------------------------------------------------------------- */
/* Global Quote Bubble (Shared across blocks)                                  */
/* ==============================================
   Speech Bubbles
   ============================================== */

/* Global Wrapper for Grid Alignment */
.sv-quote-wrapper-global {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
}

.sv-quote-wrapper-global .container {
    height: 100%;
    position: relative;
    pointer-events: none;
}

.sv-quote-wrapper-global .sv-quote-bubble {
    pointer-events: auto;
}

.sv-quote-bubble {
    position: absolute;
    top: -75px;
    left: 15px;
    width: 320px;
    min-height: 180px;
    background-color: var(--color-main, #E6261F);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.4;
    z-index: 10;
    opacity: 0;
    /* Hidden initially for GSAP */

    /* Use SVG Path as mask shape for maximum robustness */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='410' height='207' viewBox='0 0 410 207' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M410 0H40C17.9086 0 0 17.9086 0 40V51.1769C0 63.4645 3.23444 75.5356 9.37822 86.1769L52 160H227L239.5 207L301.5 128H380C396.569 128 410 114.569 410 98V0Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='410' height='207' viewBox='0 0 410 207' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M410 0H40C17.9086 0 0 17.9086 0 40V51.1769C0 63.4645 3.23444 75.5356 9.37822 86.1769L52 160H227L239.5 207L301.5 128H380C396.569 128 410 114.569 410 98V0Z' fill='black'/%3E%3C/svg%3E");

    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* Spacing: Left padding increased for the slant, bottom padding for the tail */
    display: flex;
    align-items: flex-start;
    padding: 30px 30px 60px 50px;
}

.sv-quote-bubble-content {
    color: #fff;
    /* Center text vertically within the rectangle area (excluding tail) */
    align-self: center;
    width: 100%;
}

@media (max-width: 991px) {
    .sv-quote-bubble {
        position: relative;
        left: 0 !important;
        top: 15px;
        margin: 0 auto 40px;
        width: 100%;
        max-width: 320px;
        height: auto;
        min-height: 160px;
        transform: translate(0, 0) !important;
    }
}



.wp-block-columns {
    padding: 75px 0;
}

.wp-block-columns .wp-block-columns {
    padding: 0;
}

.wpcf7-form.init {
    position: relative;
    background: #EFEFEF;
    padding: 30px;
    border-radius: 30px 0 20px;
}

.wpcf7-form.init::after {
    content: "";
    position: absolute;
    bottom: -85px;
    right: 1px;
    width: 120px;
    height: 100px;
    background: #EFEFEF;
    clip-path: polygon(0 100%, 0 0, 100% 0);
}

.wpcf7-form.init input,
.wpcf7-form.init textarea {
    border: none;
    padding: 5px;
    width: 100%;
}

.wpcf7-form-control.wpcf7-submit {
    width: auto !important;
}

/* --- Global Footer Widget Area --- */
.global-footer-widget-area {
    position: relative;
    width: 100%;
}

.global-footer-widget-area .widget {
    margin: 0;
    padding: 0;
}