/*
 Theme Name:   WP Profis
 Description:  Theme for WP Profis
 Author:       Daniel Alzer (WP Profis)
 Author URI:   https://www.wp-profis.com
 Template:     twentytwentyfive
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0 License: GNU General Public License v2 or later
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Tags:         Tags: one-column,
custom-colors,
custom-menu,
custom-logo,
editor-style,
featured-images,
full-site-editing,
block-patterns,
rtl-language-support,
sticky-post,
threaded-comments,
translation-ready,
wide-blocks,
block-styles,
style-variations,
accessibility-ready,
blog,
portfolio,
news
 Text Domain:  wpprofis
*/

html {
    scroll-behavior: auto !important;
    --border-radius: .33rem;
}

/* CRITICAL: Header CLS Prevention - Reserve space BEFORE header loads */
/* This prevents the jarring layout shift when the page loads */
body>.wp-site-blocks>header:first-child,
body>.wp-site-blocks>.wp-block-group:first-child:has(.wp-block-navigation) {
    min-height: 88px;
    content-visibility: visible !important;
    /* Reserve space for header height */
}

/* Navigation container spacing */
.wp-block-navigation {
    min-height: 60px;
    /* Reserve nav height */
}

/* Logo - Explicit dimensions to prevent shift */
.wpplogo {
    width: 175px;
    height: 45px;
    display: inline-block;
    flex-shrink: 0;
}

.wpplogo svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* .wpplogo svg path {
    fill: yellowgreen;
} */

.hidden {
    display: none !important;
}

/* Menu */
.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
    min-width: 16rem;
}

/* Mobile Menu */
.has-modal-open .wp-block-navigation-item__label {
    text-align: right;
}

.has-modal-open li.has-child>.wp-block-navigation-item__content,
.has-modal-open .wp-block-navigation-item.wp-block-navigation-link {
    border-bottom: #e5e5e5 1px solid;
}

.has-modal-open .wp-block-navigation-item.wp-block-navigation-link {
    padding: 3px 0;
}

ul.is-style-checkmark-list li:not(:last-child) {
    margin-bottom: 1rem;
}

/**
 * Contact Form
 */
.wpcf7 .wpcf7-form-control {
    max-width: 100%;
    box-sizing: border-box;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid #e5e5e5;
    background-color: var(--wp--preset--color--base);
    padding: .6rem .3rem;
    font-size: var(--wp--preset--font-size--medium);
    font-family: inherit;
}

.wpcf7 input[type="submit"] {
    background-color: var(--wp--preset--color--primary-blue);
    border-radius: var(--border-radius);
    border-color: var(--wp--preset--color--primary-blue);
    border-width: 0;
    color: var(--wp--preset--color--base);
    font-family: inherit;
    font-size: var(--wp--preset--font-size--medium);
    font-style: normal;
    font-weight: 500;
    line-height: inherit;
    padding-top: 0.6rem;
    padding-right: 1rem;
    padding-bottom: 0.6rem;
    padding-left: 1rem;
    text-decoration: none;
    cursor: pointer;
}

.wpcf7 input[type="submit"]:disabled {
    opacity: 60%;
    cursor: not-allowed;
}

.wpcf7 .wpcf7-list-item {
    margin: 0;
}

/* --- Error Messages --- */
.wpcf7-not-valid-tip {
    font-size: var(--wp--preset--font-size--small);
    color: #dc2626;
    margin-top: 4px;
}

.wpcf7-validation-errors {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
    padding: var(--wp--preset--spacing--10);
    border-radius: var(--wp--preset--spacing--20);
    font-size: var(--wp--preset--font-size--small);
    margin-top: var(--wp--preset--spacing--10);
}

.hidden-field {
    display: none !important;
}

.wp-duotone-duotone-1.wp-block-image img {
    transition: filter 0.25s ease-in-out;
    filter: grayscale(100%) contrast(1) brightness(1);
}

.wp-duotone-duotone-1.wp-block-image img:hover {
    filter: none;
}

.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-text-color, .has-background):hover {
    background-color: var(--wp--preset--color--turquoise);
    border-color: var(--wp--preset--color--turquoise) !important;
    color: var(--wp--preset--color--contrast);
}

@media (max-width: 767px) {
    .grid-numbering .has-light-gray-background-color.has-background.has-large-font-size {
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
}

@media (max-width: 600px) {
    .grid-numbering .has-light-gray-background-color.has-background.has-large-font-size {
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
    }

    /* Switch columns on mobile */
    .references .wp-block-columns .wp-block-column:nth-child(2):has(figure) {
        order: 1;
    }

    .references .wp-block-columns .wp-block-column:nth-child(1):not(:has(figure)) {
        order: 2;
    }
}

.none {
    display: none !important;
}

/** 
 * Footer
 */

:root :where(footer .wp-block-navigation a:where(:not(.wp-element-button))) {
    text-decoration: underline;
}

:root :where(footer a:where(:not(.wp-element-button)):hover) {
    text-decoration: none;
}

footer .wp-block-latest-posts li {
    margin-bottom: var(--wp--preset--spacing--10);
    margin-left: calc(var(--wp--preset--spacing--10) * 1.2);
}

footer .wp-block-latest-posts.wp-block-latest-posts__list {
    list-style: disc;
}







/*

This CSS code styles elements within a WordPress block group that uses a grid layout. 

- The first rule adds an arrow symbol (→) after each `.wp-block-group` element within a `.process` block group, positioning it to the right of the element.
- The second rule removes the right padding from the last child of the `.wp-block-group` elements within a grid layout.
- The third rule removes the arrow symbol from the last child of the `.process` block group to avoid displaying the arrow after the last element.

Details:
- The arrow symbol is styled with a font size of 20px and a light blue color.
- The arrow is positioned absolutely to the right of the element, centered vertically.
- The right padding is set to 0 for the last child to ensure proper alignment.
*/
.process.wp-block-group.is-layout-grid>.wp-block-group::after {
    content: '→';
    /* Pfeil-Symbol */
    font-size: 20px;
    color: var(--wp--preset--color--light-blue);
    position: absolute;
    right: calc(var(--wp--preset--spacing--30) / -1.5);
    top: 50%;
    transform: translateY(-50%);
}

.wp-block-group.is-layout-grid>.wp-block-group:last-child {
    padding-right: 0;
}

.process.wp-block-group.is-layout-grid>.wp-block-group:last-child::after {
    content: '';
}



/** 
 * Rank Math SEO Adjustments
 */
p.rank-math-question {
    font-weight: bold;
}

/**
* Table of Contents
*/

.toc-side {
    padding: var(--wp--preset--spacing--20);
}

.toc-side .wp-block-rank-math-toc-block h2 {
    margin-top: 0;
}

.toc-side nav>ul>li {
    margin-bottom: calc(var(--wp--preset--spacing--10) / 2);
}

.toc-side nav>ul {
    padding-left: calc(var(--wp--preset--spacing--10) * 1.2);
}

@media (min-width: 782px) {
    .toc-side {
        margin-right: var(--wp--preset--spacing--30);
        position: sticky;
        width: calc(var(--wp--preset--spacing--60) * 3);
        top: var(--wp--preset--spacing--20);
        float: left;
        z-index: 1;
        max-height: 100vh;
        overflow-y: auto;
        font-size: var(--wp--preset--font-size--small) !important;
    }

    .toc-side+* {
        position: relative;
    }
}

@media (max-width: 781px) {
    .toc-side {
        padding-right: var(--wp--style--root--padding-right);
        padding-left: var(--wp--style--root--padding-left);
    }
}

.highlight-block {
    margin-top: calc(var(--wp--preset--spacing--10) * -1) !important;
    margin-bottom: calc(var(--wp--preset--spacing--10) * -1) !important;
}

/* Media Queries */
@media (max-width: 767px) {
    .highlight-block {
        margin-top: 0;
        margin-bottom: 0;
    }

    .pricing-table {
        gap: var(--wp--preset--spacing--50);
    }
}

/**
 * Auto-numbered Blocks
 * 
 * Automatically numbers blocks within a container using CSS counters.
 * Add the class 'numbered-blocks' to the parent container to enable automatic numbering.
 * 
 * Best Practices (based on 2024 UI/UX trends):
 * - Uses CSS counters for performance (no JavaScript required)
 * - Semantic and accessible (WCAG AA compliant)
 * - Maintainable and flexible with inherit-based styling
 * - Responsive and mobile-first approach
 * - Minimalist design with clear visual hierarchy
 * - Works with any number of blocks
 * 
 * Usage:
 * <div class="numbered-blocks wp-block-group">
 *     <div class="wp-block-group">...</div>
 *     <div class="wp-block-group">...</div>
 * </div>
 */
.numbered-blocks {
    counter-reset: block-number;

    /* Badge sizing */
    --numbered-badge-font-size: 0.55em;
    --numbered-badge-size: 1.6em;

    /* Spacing */
    --numbered-badge-margin-right: 0.5em;

    /* Badge styling */
    --numbered-badge-border-radius: 50%;
    --numbered-badge-background-color: var(--wp--preset--color--primary-blue);
    --numbered-badge-text-color: #ffffff;
    --numbered-badge-font-weight: 700;
    --numbered-badge-line-height: 1;
}

.numbered-blocks>.wp-block-group {
    counter-increment: block-number;
}

/**
 * Filled Badge Design mit verbesserter vertikaler Zentrierung
 */
.numbered-blocks>.wp-block-group>.wp-block-heading:first-child::before {
    content: counter(block-number);
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Typography */
    font-family: inherit;
    font-size: var(--numbered-badge-font-size);
    font-weight: var(--numbered-badge-font-weight);
    line-height: var(--numbered-badge-line-height);

    /* Filled Design */
    background-color: var(--numbered-badge-background-color);
    color: var(--numbered-badge-text-color);
    border-radius: var(--numbered-badge-border-radius);

    /* Sizing */
    width: var(--numbered-badge-size);
    height: var(--numbered-badge-size);
    flex-shrink: 0;

    /* Spacing */
    margin-right: var(--numbered-badge-margin-right);

    /* Verbesserte vertikale Ausrichtung */
    vertical-align: middle;
    position: relative;
    top: -0.15em;
    /* Höher positioniert */

    /* Subtle shadow */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/**
 * Responsive
 */
@media (max-width: 767px) {
    .numbered-blocks {
        --numbered-badge-size: 1.5em;
        --numbered-badge-margin-right: 0.4em;
    }

    .numbered-blocks>.wp-block-group>.wp-block-heading:first-child::before {
        top: -0.12em;
    }
}

/**
 * High contrast mode
 */
@media (prefers-contrast: high) {
    .numbered-blocks>.wp-block-group>.wp-block-heading:first-child::before {
        font-weight: 800;
        box-shadow: 0 0 0 2px currentColor;
    }
}




/**
 * Blog Post
 */

.blog-post-content .wp-block-group:not(:has(+ hr)) {
    margin-bottom: var(--wp--preset--spacing--30);
}

.regular-global-padding {
    padding: var(--wp--preset--spacing--30);
}

.tip {
    padding: var(--wp--preset--spacing--10);
    background-color: var(--wp--preset--color--light-blue);
    border-radius: var(--wp--preset--border-radius--small);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    font-size: var(--wp--preset--font-size--small);
}

/* Removed empty rule - text-align: justify was commented out */

@media (min-width: 2005px) {
    .tip {
        --tip-width: 20rem;
        position: absolute;
        z-index: 1;
        top: 0;
        right: calc(((var(--wp--preset--spacing--30) * 1.5) + var(--tip-width)) * -1);
        width: var(--tip-width);
    }

    .tip:before {
        --arrow-size: 10px;
        content: '';
        position: absolute;
        top: 1.5rem;
        left: calc(-1 * var(--arrow-size));
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: var(--arrow-size) solid transparent;
        border-bottom: var(--arrow-size) solid transparent;
        border-right: calc(var(--arrow-size) + 1px) solid var(--wp--preset--color--light-blue);
    }
}