/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/*
 * Color Palette Reference
 * ─────────────────────────────────────────────
 * C1  --theme-palette-color-1   #f2b74a   Accent
 * C2  --theme-palette-color-2   #e0a83f   Accent Hover
 * C3  --theme-palette-color-3   #333333   Headings
 * C4  --theme-palette-color-4   #4a4a4a   Body Text
 * C5  --theme-palette-color-5   #222222   Header Text
 * C6  --theme-palette-color-6   #7a7a7a   Muted Text
 * C7  --theme-palette-color-7   #e6e6e6   Border
 * C8  --theme-palette-color-8   #ededed   Soft Border
 * C9  --theme-palette-color-9   #ffffff   White
 * C10 --theme-palette-color-10  #f7f7f7   Light Background
 * C11 --theme-palette-color-11  #f5f5f5   Footer Background
 * C12 --theme-palette-color-12  #6f6f6f   Footer Text
 * C13 --theme-palette-color-13  #8c8c8c   Footer Muted
 */


:root {
    /* Layout */
    --gs-row-column-padding: 0;
    --theme-content-spacing: 1em;

    /* CF7 */
    --uidesign-color-accent-halo: rgba(224, 168, 63, 0.22);
}

/* ==========================================================================
   Typography
   ========================================================================== */
u,
span[style*="text-decoration: underline"] {
    padding: 0.05em 0.30em;
    border-radius: 0.3em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    text-decoration: none !important;
    color: #ffffff;
    background-color: var(--theme-palette-color-1);
    font-weight: 500;
}


/* ==========================================================================
   Header / Logo
   ========================================================================== */

/* Hide the default logo — only the sticky logo is used (nur Startseite) */
.home .site-logo-container .default-logo {
    display: none;
}

/* Sticky logo: always in flow, fades in when sticky header is active */
.home .site-logo-container .sticky-logo {
    display: block !important;
    opacity: 0;
    transition: opacity 0.5s ease;
}

[data-transparent-row="no"] .site-logo-container .sticky-logo {
    opacity: 1;
}

.uidesign-logo-hero {
	width: clamp(300px, 20vh, 400px) !important;
}

[data-transparent-row="no"] .site-logo-container .sticky-logo {
    opacity: 1;
}

[data-header*="type-1"] nav[class*=menu] li[class*=current-menu-] > .ct-menu-link:hover,
[data-header*="type-1"] nav[class*=menu] li[class*=current-menu-] > .ct-sub-menu-parent:hover {
    color: var(--theme-palette-color-2);
}

#header-menu-1 .ct-menu-link.is-active-section {
    color: var(--theme-palette-color-6) !important;
}

/* =============================================================================
   Buttons
   ============================================================================= */

/* Hero-Scroll-Pfeil: animiert nach unten, blendet ein und aus */
a.uidesign-button-icon-hero {
    animation: bobFade 3.2s linear infinite;
    background-color: transparent;
}
a.uidesign-button-icon-hero:hover {
    background-color: transparent;
}

.uidesign-button-icon-hero .gspb-buttonbox-icon {
    margin: 0 !important;
}

@keyframes bobFade {
    0%   { opacity: 0; transform: translateY(0px);  }
    15%  { opacity: 0; transform: translateY(0px);  }
    40%  { opacity: 1; transform: translateY(10px); }
    70%  { opacity: 1; transform: translateY(16px); }
    90%  { opacity: 0; transform: translateY(20px); }
    100% { opacity: 0; transform: translateY(20px); }
}

/* =============================================================================
   Typography
   ============================================================================= */
.gspb_heading_subtitle {
    font-style: italic;
    font-weight: 400;
    font-size: 18px;
    color: var(--theme-palette-color-12);
    margin-top: 0px !important;
}

/* ==========================================================================
   Separator
   ========================================================================== */

.entry-content .wp-block-separator {
    height: 1px !important;
	margin: 24px auto;
    max-width: 80%;
    color: var(--theme-palette-color-7);
    background-color: var(--theme-palette-color-7);
}


/* ==========================================================================
   Hero Section — Diagonal Divider
   ========================================================================== */

.uidesign-divider-up-down,
.uidesign-divider-down-up {
    position: relative;
    height: 150px;
    margin-top: -150px !important;
    margin-bottom: 0 !important;
    margin-block-end: 0 !important;
    overflow: visible;
    z-index: 2;
    pointer-events: none;
    background: transparent;
}

.uidesign-divider-up-down::after,
.uidesign-divider-down-up::after {
    content: '';
    position: absolute;
    top: 150px;
    right: 0;
    width: 110%;
    height: 100%;
    transform-origin: right top;
    box-shadow: 0 -30px 30px -30px rgba(0, 0, 0, 0.15);
    z-index: 1;
    transform: rotate(2.6deg);
    background: var(--theme-palette-color-9);
}

.uidesign-divider-down-up::after {
    transform-origin: left top;
    transform: rotate(-2.6deg);
    background: var(--theme-palette-color-10);
}

/* First content section after the hero — must sit above the divider layer */
.uidesign-content-start {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Portfolio
   ========================================================================== */

.uidesign-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.uidesign-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    transform: translateY(-2px);
}

.uidesign-card .gspb_image {
    flex: 1;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uidesign-card .gspb_image img {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   About me
   ========================================================================== */

.uidesign-profile {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uidesign-profile img {
    filter: grayscale(100%) brightness(1.15);
    transition: filter 0.4s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.uidesign-profile:hover img {
    filter: grayscale(0%) brightness(1);
}

/* =============================================================================
   CF7
   ============================================================================= */

.entry-content .wpcf7-list-item-label {
    font-size: inherit;
    font-weight: var(--theme-font-weight);
}

/* Inputs – Grundzustand */
.entry-content .wpcf7 input[type="text"],
.entry-content .wpcf7 input[type="email"],
.entry-content .wpcf7 textarea {
    background: var(--theme-palette-color-9);
    border: 1px solid var(--theme-palette-color-7);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--theme-palette-color-4);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

/* Hover */
.entry-content .wpcf7 input[type="text"]:hover,
.entry-content .wpcf7 input[type="email"]:hover,
.entry-content .wpcf7 textarea:hover {
    border-color: var(--theme-palette-color-13);
}

/* Focus */
.entry-content .wpcf7 input[type="text"]:focus,
.entry-content .wpcf7 input[type="email"]:focus,
.entry-content .wpcf7 textarea:focus {
    outline: none;
    border-color: var(--theme-palette-color-2);
    box-shadow: 0 0 0 3px var(--uidesign-color-accent-halo);
}

/* Validation Error */
.entry-content .wpcf7 input[type="text"].wpcf7-not-valid,
.entry-content .wpcf7 input[type="email"].wpcf7-not-valid,
.entry-content .wpcf7 textarea.wpcf7-not-valid {
    border-color: var(--theme-palette-color-2);
    box-shadow: 0 0 0 3px var(--uidesign-color-accent-halo);
}

/* Placeholder */
.entry-content .wpcf7 ::placeholder {
    color: var(--theme-palette-color-6);
}

/* Checkbox + Label alignment */
.entry-content .wpcf7 .wpcf7-list-item label {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.entry-content .wpcf7 .wpcf7-list-item input[type="checkbox"] {
    flex-shrink: 0;
	width: 16px;
    height: 16px;
    accent-color: var(--theme-palette-color-1);
    cursor: pointer;
}

/* Submit Button */
.entry-content .wpcf7 input[type="submit"] {
    background: var(--theme-palette-color-1);
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    color: var(--theme-palette-color-9);
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.entry-content .wpcf7 input[type="submit"]:hover {
    background: var(--theme-palette-color-2);
}

.entry-content .wpcf7 input[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--uidesign-color-accent-halo);
}

/* Spinner */
.entry-content .wpcf7 .wpcf7-spinner {
    position: relative;
    top: 8px;
    background-color: var(--theme-palette-color-6);
}

/* Inline Fehlertext */
.entry-content .wpcf7-not-valid-tip {
    color: var(--theme-palette-color-2);
    font-style: normal !important;
    font-weight: 400;
    display: block;
    margin-top: 4px;
}

/* Response Output */
.entry-content .wpcf7-response-output {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 12px !important;
    color: var(--theme-palette-color-4) !important;
    font-weight: 500;
}

/* Nach dem Absenden: Felder ausblenden */
.entry-content .wpcf7 form.sent p,
.entry-content .wpcf7 form.sent .wpcf7-turnstile {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition:
        opacity 0.6s ease,
        max-height 0.6s ease,
        margin 0.6s ease,
        padding 0.6s ease;
}