/*
Theme Name: Die Planungsgruppe
Description: Clean responsive theme with professional color scheme
Version: 100.0
Author: Custom
*/

/* Google Fonts - Updated for proper font assignments with display=swap */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* 
DIE PLANUNGSGRUPPE COLOR SCHEME
Based on https://dieplanungsgruppe.de/

Primary Brand Colors:
- Primary Green: #22c55e (main brand color - headings, buttons, links)
- Primary Green Hover: #16a34a (darker green for hover states)
- Accent Gold: #22c55e (checkmarks, highlights, call-to-action elements - now green)
- Accent Gold Hover: #16a34a (darker green for hover states)

Text Colors:
- Primary Text: #000000 (black - main content)
- Secondary Text: #000000 (black - subheadings)
- Tertiary Text: #333333 (dark gray - descriptions)
- Muted Text: #666666 (medium gray - meta information)
- White Text: #ffffff (on dark backgrounds)

Background Colors:
- Pure White: #ffffff (main content backgrounds)
- Light Gray: #f8f9fa (subtle section backgrounds)
- Very Light Blue: #f8faff (subtle blue tint for alternating sections)
- Very Light Gold: #fffef8 (subtle gold tint for special sections)

UI Element Colors:
- Border Light: #e5e7eb (subtle borders)
- Border Medium: #d1d5db (form inputs, cards)
- Border Dark: #9ca3af (active states)

Dark Theme Colors:
- Dark Background: #21222F (footer, dark sections)
- Dark Text: #cccccc (text on dark backgrounds)

Status Colors:
- Success: #10b981 (success messages, checkmarks)
- Warning: #f59e0b (warnings, attention)
- Error: #ef4444 (errors, alerts)
- Info: #3b82f6 (information, links)
*/

:root {
    /* New Color Scheme Variables */
    --black: #0D0D0D;
    --off-white: #FAFAFA;
    --peach: #F6C5A3;
    --pink: #EFA8B8;
    --green: #0273aa;   /* primary */
    --olive: #1E3A34;
    --peach-tint: #FBEDE6;
    --blue: #0273aa;
	
    /* Primary Brand Colors */
    --color-primary-green: var(--green);
    --color-primary-green-hover: var(--olive);
    --color-primary-green-light: var(--peach-tint);
    --color-accent-gold: var(--peach);
    --color-accent-gold-hover: var(--pink);
    --color-accent-gold-light: var(--peach-tint);
    
    /* Text Colors */
    --color-text-primary: var(--black);
    --color-text-secondary: var(--black);
    --color-text-tertiary: var(--olive);
    --color-text-muted: var(--olive);
    --color-text-white: var(--off-white);
    --light-text-color: var(--off-white);
    --project-excerpt-text-color: var(--off-white);
    
    /* Background Colors */
    --color-bg-white: var(--off-white);
    --color-bg-light: var(--peach-tint);
    --color-bg-blue-tint: var(--peach-tint);
    --color-bg-gold-tint: var(--peach-tint);
    --color-bg-dark: var(--olive);
    
    /* Border Colors */
    --color-border-light: rgba(47, 111, 78, 0.2);
    --color-border-medium: rgba(47, 111, 78, 0.3);
    --color-border-dark: rgba(47, 111, 78, 0.5);
    
    /* Status Colors */
    --color-success: var(--green);
    --color-warning: var(--peach);
    --color-error: var(--pink);
    --color-info: var(--green);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Common rgba backgrounds - Updated for new color scheme */
    --bg-white-95: rgba(250, 250, 250, 0.95);
    --bg-white-85: rgba(250, 250, 250, 0.85);
    --bg-white-80: rgba(250, 250, 250, 0.8);
    --bg-light-blue-85: rgba(251, 237, 230, 0.85); /* Peach tint */
    --bg-light-gold-85: rgba(251, 237, 230, 0.85); /* Peach tint */
    --bg-light-green-80: rgba(47, 111, 78, 0.1); /* Green tint */
    --bg-light-warm-80: rgba(246, 197, 163, 0.2); /* Peach tint */
    --bg-light-cool-80: rgba(239, 168, 184, 0.1); /* Pink tint - avoid olive backgrounds */
    --bg-cyan-gray-85: rgba(251, 237, 230, 0.85); /* Peach tint - no dark green backgrounds */
    --bg-light-gray-85: rgba(251, 237, 230, 0.85); /* Peach tint */
    --bg-pale-cyan-85: rgba(239, 168, 184, 0.3); /* Pink tint */
    
    /* Common rgba overlays and effects */
    --overlay-dark-90: rgba(0, 0, 0, 0.9);
    --overlay-dark-50: rgba(0, 0, 0, 0.5);
    --overlay-dark-80: rgba(0, 0, 0, 0.8);
    --overlay-blue-gold: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(0, 0, 0, 0.7));
    
    /* Common shadow colors */
    --shadow-light: rgba(0,0,0,0.1);
    --shadow-medium: rgba(0,0,0,0.15);
    --shadow-heavy: rgba(0,0,0,0.2);
    --shadow-subtle: rgba(0,0,0,0.05);
    --shadow-blue: rgba(37, 99, 235, 0.3);
    --shadow-gold: rgba(34, 197, 94, 0.3);
    --shadow-text-light: rgba(0,0,0,0.3);
    --shadow-text-subtle: rgba(0,0,0,0.1);
    --shadow-blur-gold: rgba(34, 197, 94, 0.1);
    
    /* Extra shadow depths */
    --shadow-project-card: 0 2px 10px var(--shadow-light);
    --shadow-project-hover: 0 5px 20px var(--shadow-medium);
    --shadow-gallery-item: 0 5px 20px var(--shadow-light);
    --shadow-gallery-hover: 0 15px 40px var(--shadow-heavy);
    --shadow-lightbox: 0 20px 60px rgba(0,0,0,0.5);
    --shadow-text-dark: 0 2px 4px var(--shadow-text-light);
    --shadow-text-light: 0 1px 2px var(--shadow-text-light);
}

/* ==========================================================================
   COLOR OVERRIDES - Fix specific inline colors
   ========================================================================== */

/* Override hero section background color - change from old beige to translucent pink */
[style*="background-color:#cdc0a32b"],
[style*="background-color: #cdc0a32b"],
.wp-block-group[style*="background-color:#cdc0a32b"],
.wp-block-group[style*="background-color: #cdc0a32b"] {
    background-color: rgba(239, 168, 184, 0.3) !important; /* Pink with 30% opacity - translucent */
}

/* Proper Gutenberg color class for pink-peach background (keeping for compatibility) */
.has-pink-peach-background-color {
    background-color: #F2B5A8 !important;
}

.has-pink-peach-color {
    color: #F2B5A8 !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: transparent;
}

body {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    line-height: 1.5;
    color: var(--color-text-primary);
    overflow-x: hidden; /* Prevent horizontal scroll */
    background: transparent;
    font-size: 1rem; /* 16px base size */
}

/* Typography - Font assignments as per requirements */
/* Headings use Montserrat with proper fallback stack */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.project-title,
.error-404-title,
.error-404-content h2,
.error-404-suggestions h3,
.error-404-search h3,
.footer-section h3,
.lightbox-title,
.overlay-content h3 {
    font-family: "Montserrat", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

/* Anchor offset for fixed header */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
section,
div[id],
*[id] {
    scroll-margin-top: 5rem; /* Account for fixed header height (4.375rem) + buffer */
}

/* Body text, lists, blockquotes, paragraphs use Plus Jakarta Sans */
p, li, blockquote, 
.wp-block-paragraph,
.wp-block-list,
.wp-block-quote,
body, 
.nav-menu a,
.footer-menu a,
.footer-links a,
.contact-info p,
.copyright,
.developer-credit,
.footer-legal a {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

/* Header */
.site-header {
    background: var(--bg-white-95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-lg);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.header-wrap {
    max-width: 100rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 5.5rem;
}

.logo {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-primary-green);
    text-decoration: none;
}

/* Desktop Navigation */
.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.75rem;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 1.875rem;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    font-family: 'Montserrat', Arial, sans-serif;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--color-primary-green);
}

/* Language Switcher */
.lang-switcher {
    position: relative;
    justify-self: end;
}

.lang-button {
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    padding: 0.5rem 0.9375rem;
    border-radius: 0.3125rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-button:hover {
    border-color: var(--color-primary-green);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-medium);
    border-radius: 0.3125rem;
    box-shadow: var(--shadow-md);
    min-width: 9.375rem;
    display: none;
    z-index: 100;
}

.lang-dropdown.show {
    display: block;
}

.lang-dropdown a {
    display: block;
    padding: 0.625rem 0.9375rem;
    text-decoration: none;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.lang-dropdown a:last-child {
    border-bottom: none;
}

.lang-dropdown a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary-green);
}

.lang-dropdown a.active {
    background: var(--color-primary-green);
    color: var(--color-text-white);
    font-weight: bold;
}

.lang-dropdown a.active:hover {
    background: var(--color-primary-green-hover);
    color: var(--color-text-white);
}

/* Mobile Menu Toggle */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.3125rem;
}

/* Tablet Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .header-wrap {
        max-width: 95%;
        padding: 0 1rem;
    }
    
    .nav-menu {
        gap: 1.25rem;
    }
    
    .nav-menu a {
        font-size: 0.9rem;
    }
    
    .logo {
        font-size: 1.3rem;
    }
    
    .lang-button {
        padding: 0.4rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {
    .header-wrap {
        display: flex;
        justify-content: space-between;
    }
    
    .mobile-toggle {
        display: block;
    }
    
    .main-nav {
        position: absolute;
        top: 5.5rem;
        left: 0;
        right: 0;
        background: var(--color-bg-white);
        border-top: 1px solid var(--color-border-medium);
        flex-direction: column;
        gap: 0;
        padding: 1.25rem;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        justify-content: flex-start;
        padding-top: 1.25rem;
    }
    
    .main-nav.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin-bottom: 0;
    }
    
    .nav-menu li {
        border-bottom: 1px solid var(--color-border-light);
    }
    
    .nav-menu a {
        display: block;
        padding: 0.9375rem 0;
        font-size: 1.125rem;
    }
    
    .lang-switcher {
        justify-self: auto;
    }
    
    .lang-button {
        width: 100%;
        justify-content: space-between;
        padding: 0.9375rem;
        font-size: 1.125rem;
    }
    
    .lang-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        margin-top: 0.625rem;
        background: var(--color-bg-light);
    }
    
    .lang-dropdown a {
        padding: 0.9375rem;
        font-size: 1rem;
    }
}

/* Content */
main {
    margin-top: 0;
    padding: 0;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll */
    background: transparent;
}

.container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem;
    background: transparent;
}

/* Remove container padding for full-width blocks */
.container:has(.alignfull) {
    padding: 0;
}

/* Full width utility class */
.full-width {
    width: 100vw;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Full width section that breaks out of container */
.full-width-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Gutenberg alignment classes - FIXED */
.alignwide {
    width: calc(100vw - 2.5rem);
    max-width: 87.5rem;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
    position: relative;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Fix alignwide when inside alignfull - simple centering */
.alignfull .alignwide {
    width: calc(100vw - 5rem);
    max-width: 87.5rem;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.alignfull {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    max-width: none !important;
}

/* More specific selectors to override WordPress defaults */
.wp-block-group.alignfull,
.wp-block-columns.alignfull,
.wp-block-cover.alignfull,
div.alignfull {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    max-width: none !important;
}

/* Override WordPress layout constraints that prevent full-width */
.is-layout-constrained > .alignfull,
.wp-block-group__inner-container.is-layout-constrained .alignfull,
.wp-container-core-group-is-layout-constrained .alignfull {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

/* Reset WordPress container constraints */
[class*="wp-container-"] > .alignfull {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

/* Break out of main container padding and post-content constraints */
main .container .alignfull,
main .container article .post-content .alignfull,
.post-content .alignfull {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

/* Fix specific flex layout containers */
.wp-block-group.alignfull.is-layout-flex,
.wp-block-group.alignfull[class*="wp-container-core-group-is-layout"] {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
    overflow-x: visible !important;
}

.container .alignwide {
    width: calc(100vw - 2.5rem);
    max-width: 87.5rem;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    position: relative;
}

/* Center content within full-width blocks */
.alignfull > * {
    max-width: 75rem;
    margin: 0 auto;
    position: relative;
}

/* Specific handling for text content in full-width blocks - only center if not in a group or cover */
.alignfull > p,
.alignfull > h1,
.alignfull > h2,
.alignfull > h3,
.alignfull > h4,
.alignfull > h5,
.alignfull > h6,
.alignfull > .wp-block-paragraph,
.alignfull > .wp-block-heading {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 1.25rem;
}

/* Allow certain elements to be truly full width */
.alignfull > .wp-block-image,
.alignfull > .wp-block-cover,
.alignfull > .wp-block-group.has-background,
.alignfull > .project-gallery-container,
.alignfull > .forminator-form {
    max-width: none;
}

/* Group and Stack Block Fixes */
.wp-block-group.alignfull,
.wp-block-stack.alignfull {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: none;
    box-sizing: border-box;
}


/* Group and Stack block content centering */
.wp-block-stack.alignfull > *,
.wp-block-group.alignfull > * {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    box-sizing: border-box;
}

/* Fix for wide elements inside full-width containers */
.wp-block-group.alignfull .alignwide,
.wp-block-stack.alignfull .alignwide {
    width: calc(100vw - 5rem);
    max-width: 87.5rem;
    margin-left: auto !important;
    margin-right: auto !important;
    position: relative;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Ensure wide blocks are properly centered within full-width parents */
.alignfull .alignwide {
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    position: relative;
}

/* More specific fixes for nested alignment issues */
.wp-block-group.alignfull > .alignwide,
.wp-block-stack.alignfull > .alignwide,
.alignfull > .wp-block-group.alignwide,
.alignfull > .wp-block-stack.alignwide {
    width: calc(100vw - 5rem);
    max-width: 87.5rem;
    margin: 0 auto !important;
    position: relative;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Reset any problematic positioning from WordPress core */
.alignfull .alignwide[style*="margin"],
.alignfull .alignwide[style*="left"],
.alignfull .alignwide[style*="right"] {
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Specific fix for columns inside alignfull */
.alignfull .wp-block-columns.alignwide,
.wp-block-columns.alignfull .alignwide {
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Inner container fixes */
.wp-block-stack.alignfull .wp-block-stack__content,
.wp-block-group.alignfull .wp-block-group__inner-container {
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 1.25rem;
    box-sizing: border-box;
}

/* Specific Group block fixes */
.wp-block-group.alignfull {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Fix for nested blocks in stack and group - only constrain width, don't force center alignment */
.wp-block-stack.alignfull .wp-block-paragraph,
.wp-block-stack.alignfull .wp-block-heading,
.wp-block-stack.alignfull p,
.wp-block-stack.alignfull h1,
.wp-block-stack.alignfull h2,
.wp-block-stack.alignfull h3,
.wp-block-stack.alignfull h4,
.wp-block-stack.alignfull h5,
.wp-block-stack.alignfull h6,
.wp-block-group.alignfull .wp-block-paragraph,
.wp-block-group.alignfull .wp-block-heading,
.wp-block-group.alignfull p,
.wp-block-group.alignfull h1,
.wp-block-group.alignfull h2,
.wp-block-group.alignfull h3,
.wp-block-group.alignfull h4,
.wp-block-group.alignfull h5,
.wp-block-group.alignfull h6 {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

/* Group specific alignment fixes */
.wp-block-group.alignfull.wp-container-core-group-is-layout-flow > *,
.wp-block-group.alignfull.is-layout-flow > * {
    margin-left: auto;
    margin-right: auto;
    max-width: 75rem;
}

/* Fix Group block positioning issues */
.wp-block-group.alignfull {
    position: relative;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Ensure Group block doesn't get weird positioning */
.wp-block-group.alignfull[style*="margin"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Prevent stack from breaking out */
.wp-block-stack {
    overflow-x: hidden;
}

/* Additional Stack block fixes */
.wp-block-stack.alignfull {
    contain: content;
}

/* Fix for stack with custom width */
.wp-block-stack.alignfull[style*="width"] {
    width: 100vw !important;
}

/* Ensure stack children don't overflow */
.wp-block-stack.alignfull > * {
    overflow-x: hidden;
    max-width: 100%;
}

/* Fix for stack gap issues */
.wp-block-stack.alignfull .wp-block-stack__content > * + * {
    margin-top: var(--wp--style--block-gap, 1rem);
}

/* Center alignment for stack content */
.wp-block-stack.alignfull.has-text-align-center,
.wp-block-stack.alignfull[style*="text-align:center"],
.wp-block-stack.alignfull[style*="text-align: center"] {
    text-align: center;
}

.wp-block-stack.alignfull.has-text-align-center > *,
.wp-block-stack.alignfull[style*="text-align:center"] > *,
.wp-block-stack.alignfull[style*="text-align: center"] > * {
    margin-left: auto;
    margin-right: auto;
}

/* Left alignment support */
.wp-block-stack.alignfull.has-text-align-left,
.wp-block-stack.alignfull[style*="text-align:left"],
.wp-block-stack.alignfull[style*="text-align: left"] {
    text-align: left !important;
}
.wp-block-stack.alignfull.has-text-align-left > *,
.wp-block-stack.alignfull[style*="text-align:left"] > *,
.wp-block-stack.alignfull[style*="text-align: left"] > * {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Right alignment support */
.wp-block-stack.alignfull.has-text-align-right,
.wp-block-stack.alignfull[style*="text-align:right"],
.wp-block-stack.alignfull[style*="text-align: right"] {
    text-align: right !important;
}
.wp-block-stack.alignfull.has-text-align-right > *,
.wp-block-stack.alignfull[style*="text-align:right"] > *,
.wp-block-stack.alignfull[style*="text-align: right"] > * {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* General text alignment overrides for all blocks */
.has-text-align-left,
[style*="text-align:left"],
[style*="text-align: left"] {
    text-align: left !important;
}

.has-text-align-right,
[style*="text-align:right"],
[style*="text-align: right"] {
    text-align: right !important;
}

.has-text-align-start,
[style*="text-align:start"],
[style*="text-align: start"] {
    text-align: start !important;
}

.has-text-align-end,
[style*="text-align:end"],
[style*="text-align: end"] {
    text-align: end !important;
}

/* Block-specific alignment support */
.wp-block-group.has-text-align-left,
.wp-block-group[style*="text-align:left"],
.wp-block-group[style*="text-align: left"] {
    text-align: left !important;
}

.wp-block-group.has-text-align-right,
.wp-block-group[style*="text-align:right"],
.wp-block-group[style*="text-align: right"] {
    text-align: right !important;
}

.wp-block-group.has-text-align-start,
.wp-block-group[style*="text-align:start"],
.wp-block-group[style*="text-align: start"] {
    text-align: start !important;
}

.wp-block-group.has-text-align-end,
.wp-block-group[style*="text-align:end"],
.wp-block-group[style*="text-align: end"] {
    text-align: end !important;
}

/* Override WordPress container auto-margins for text alignment */
.is-layout-constrained .has-text-align-left,
.wp-block-group__inner-container .has-text-align-left,
[class*="wp-container-"] .has-text-align-left,
.is-layout-flex .has-text-align-left {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.is-layout-constrained .has-text-align-right,
.wp-block-group__inner-container .has-text-align-right,
[class*="wp-container-"] .has-text-align-right,
.is-layout-flex .has-text-align-right {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.is-layout-constrained .has-text-align-start,
.wp-block-group__inner-container .has-text-align-start,
[class*="wp-container-"] .has-text-align-start,
.is-layout-flex .has-text-align-start {
    text-align: start !important;
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}

.is-layout-constrained .has-text-align-end,
.wp-block-group__inner-container .has-text-align-end,
[class*="wp-container-"] .has-text-align-end,
.is-layout-flex .has-text-align-end {
    text-align: end !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
}

/* Force heading alignment specifically */
.wp-block-heading.has-text-align-left {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

.wp-block-heading.has-text-align-right {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* German text handling for long words */
body, p, h1, h2, h3, h4, h5, h6, div, span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
}

/* Full Page Watermark Texture Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: -10;
    will-change: transform;
    filter: grayscale(60%) contrast(1.3) brightness(1.3);
    pointer-events: none;
}

/* Extend background for full page coverage */
html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 200vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: -15;
    filter: grayscale(60%) contrast(1.3) brightness(1.3);
    pointer-events: none;
}

/* Subtle parallax effect for texture */
@media (prefers-reduced-motion: no-preference) {
    body.parallax-scroll::before {
        transform: translate3d(0, calc(var(--scroll-y, 0) * 0.1), 0);
    }
}

/* Transparent body to show texture */
body {
    background: transparent;
}


/* Content sections - respect Gutenberg blocks with subtle enhancements */
main {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Enhance Gutenberg background blocks with texture visibility and color variations */
.wp-block-group.alignfull {
    position: relative;
    z-index: 1;
}

/* Subtle color variations for different sections while respecting Gutenberg */
.wp-block-group.alignfull:nth-child(odd):not(.has-background) {
    background: var(--bg-light-blue-85);
}

.wp-block-group.alignfull:nth-child(even):not(.has-background) {
    background: var(--bg-light-gold-85);
}

/* Enhance existing Gutenberg color classes with transparency for texture */
.wp-block-group.has-white-background-color {
    background-color: var(--bg-white-85) !important;
}

.wp-block-group.has-cyan-bluish-gray-background-color {
    background-color: var(--bg-light-gray-85) !important; /* Use peach tint instead of dark green */
}

.wp-block-group.has-light-gray-background-color {
    background-color: var(--bg-light-gray-85) !important;
}

.wp-block-group.has-pale-cyan-blue-background-color {
    background-color: var(--bg-pale-cyan-85) !important;
}

/* Add subtle variations for sections without specific background colors */
.wp-block-group.alignfull:not(.has-background):not(#Hero) {
    background: var(--bg-white-80);
    backdrop-filter: blur(1px);
}

/* Alternate subtle background colors - using safe, light colors */
.wp-block-group.alignfull:nth-child(3n):not(.has-background):not(#Hero) {
    background: var(--bg-light-warm-80); /* Peach tint */
}

.wp-block-group.alignfull:nth-child(3n+1):not(.has-background):not(#Hero) {
    background: var(--peach-tint); /* Pure peach tint */
}

.wp-block-group.alignfull:nth-child(3n+2):not(.has-background):not(#Hero) {
    background: var(--bg-white-85); /* Light white */
}

/* Add padding to first block for proper spacing */
.wp-block-group.alignfull:first-child,
.wp-block-cover.alignfull:first-child,
.wp-block-columns.alignfull:first-child,
div.alignfull:first-child {
    padding-top: 5.5rem !important; /* Account for fixed header + extra space */
}

/* Add padding to all blocks with anchors for proper viewport background */
.wp-block-group.alignfull[id],
.wp-block-cover.alignfull[id],
.wp-block-columns.alignfull[id],
div.alignfull[id],
section.alignfull[id],
*[id].alignfull {
    padding-top: 6rem !important; /* Ensure full viewport background visibility */
    scroll-margin-top: 0 !important; /* Override default scroll margin since we have padding */
}

/* Force team and contact blocks to full viewport */
.wp-block-group.alignfull[id*="team"],
.wp-block-group.alignfull[class*="team"],
.wp-block-columns.alignfull[id*="team"],
.wp-block-columns.alignfull[class*="team"],
.wp-block-group.alignfull[id*="contact"],
.wp-block-group.alignfull[class*="contact"],
.wp-block-columns.alignfull[id*="contact"],
.wp-block-columns.alignfull[class*="contact"] {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-top: 6rem !important;
    padding-bottom: 4rem !important;
    min-height: 100vh !important; /* Ensure full viewport height */
    box-sizing: border-box !important;
}

/* Ensure proper content centering within full-width blocks */
.wp-block-group.alignfull[id*="team"] > *,
.wp-block-group.alignfull[class*="team"] > *,
.wp-block-columns.alignfull[id*="team"],
.wp-block-columns.alignfull[class*="team"],
.wp-block-group.alignfull[id*="contact"] > *,
.wp-block-group.alignfull[class*="contact"] > *,
.wp-block-columns.alignfull[id*="contact"],
.wp-block-columns.alignfull[class*="contact"] {
    max-width: 75rem;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}

/* Parallax scroll effect */
@media (prefers-reduced-motion: no-preference) {
    body.parallax-scroll::before {
        transform: translateY(var(--scroll-y, 0)) translateZ(0);
    }
}


/* Responsive font sizing for small screens */
@media (max-width: 480px) {
    h1 { 
        font-size: clamp(1.1rem, 4vw, 1.6rem) !important; 
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
    }
    h2 { 
        font-size: clamp(1rem, 3.5vw, 1.4rem) !important; 
        line-height: 1.3 !important;
        margin-bottom: 0.8rem !important;
        text-align: center !important;
    }
    h3 { 
        font-size: clamp(0.95rem, 3.2vw, 1.2rem) !important; 
        line-height: 1.3 !important;
        text-align: center !important;
    }
    h4 { 
        font-size: clamp(0.9rem, 3vw, 1.1rem) !important; 
        line-height: 1.4 !important;
    }
    h5, h6 { 
        font-size: clamp(0.85rem, 2.8vw, 1rem) !important; 
        line-height: 1.4 !important;
    }
    p, body { 
        font-size: clamp(0.8rem, 2.5vw, 0.9rem) !important; 
        line-height: 1.5 !important;
    }
    
    /* German language word-breaking support - removed empty ruleset */
    
    * {
        word-break: normal;
        overflow-wrap: break-word;
        word-wrap: break-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphenate-limit-chars: 6 3 3;
    }
    
    /* Prevent colons and punctuation from appearing alone on new lines */
    h1, h2, h3, h4, h5, h6, p {
        /* Prevent line breaks before punctuation marks */
        line-break: strict;
        
        /* Balance text to prevent orphaned punctuation */
        text-wrap: balance;
        -webkit-text-wrap: balance;
        
        /* Ensure punctuation stays with previous word */
        white-space: normal;
        word-spacing: normal;
    }
    
    /* Override word-break for punctuation preservation while keeping German hyphenation */
    h1, h2, h3, h4, h5, h6, p {
        word-break: normal !important;
        overflow-wrap: anywhere;
        
        /* Keep hyphens but prevent punctuation breaks */
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
    }
    
    /* Fix container alignment with minimal padding for maximum text space */
    .container {
        max-width: none !important;
        width: calc(100vw - 1rem) !important;
        margin: 0 0.5rem !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    .wp-block-group__inner-container {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
    }
    
    .entry-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Remove all nested container padding on mobile */
    .wp-block-group__inner-container .wp-block-group__inner-container {
        padding: 0 !important;
    }
    
    /* Override WordPress block group padding on mobile */
    .wp-block-group {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    /* Remove side padding from parent groups to maximize text width */
    .wp-block-group.alignfull,
    .wp-block-group.has-background {
        padding-left: 0.625rem !important;
        padding-right: 0.625rem !important;
    }
    
    /* Fix specific content blocks that cause alignment issues */
    .wp-block-group,
    .wp-block-columns,
    .wp-block-column {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
    }
    
    /* Ensure all text content uses full width with minimal edge padding */
    h1, h2, h3, h4, h5, h6, p {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        left: auto !important;
        right: auto !important;
        position: static !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* RTL language support for Arabic */
    [dir="rtl"] h1, 
    [dir="rtl"] h2, 
    [dir="rtl"] h3, 
    [dir="rtl"] h4, 
    [dir="rtl"] h5, 
    [dir="rtl"] h6, 
    [dir="rtl"] p,
    .rtl h1,
    .rtl h2,
    .rtl h3,
    .rtl h4,
    .rtl h5,
    .rtl h6,
    .rtl p {
        text-align: center !important;
        direction: rtl !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    [dir="rtl"] .container,
    [dir="rtl"] .wp-block-group__inner-container,
    [dir="rtl"] .entry-content,
    .rtl .container,
    .rtl .wp-block-group__inner-container,
    .rtl .entry-content {
        text-align: center !important;
        direction: rtl !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Increase padding on very small screens to prevent text cramping */
    .header-wrap {
        padding: 0 0.75rem;
    }
    
    .container {
        padding: 1.25rem 0.75rem;
    }
    
    /* Ensure proper spacing for content blocks */
    .wp-block-group,
    .wp-block-columns,
    .wp-block-cover {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Extra small screens - prevent text from being too cramped */
@media (max-width: 360px) {
    .header-wrap {
        padding: 0 10px;
    }
    
    .container {
        padding: 15px 10px;
    }
    
    /* Reduce excessive margins that might squeeze content */
    .wp-block-group__inner-container,
    .wp-block-cover__inner-container {
        padding: 10px;
    }
    
    /* Ensure paragraphs and text blocks have adequate spacing */
    p, .wp-block-paragraph {
        margin-bottom: 1rem;
        line-height: 1.5;
    }
    
    /* Prevent text from touching edges in any container */
    .entry-content > *,
    .wp-block-group > *,
    .wp-block-column > * {
        margin-left: 5px;
        margin-right: 5px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .alignfull {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .alignwide {
        width: calc(100vw - 2.5rem);
        margin-left: -20px;
        margin-right: -20px;
    }
    
    .container .alignfull {
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .container .alignwide {
        margin-left: -20px;
        margin-right: -20px;
    }
    
    /* Stack and Group mobile fixes */
    .wp-block-stack.alignfull .wp-block-stack__content,
    .wp-block-group.alignfull .wp-block-group__inner-container {
        padding: 0 15px;
    }
    
    .wp-block-stack.alignfull,
    .wp-block-group.alignfull {
        margin-left: auto !important;
        margin-right: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 100vw;
    }
    
    /* Mobile Group content */
    .wp-block-group.alignfull > * {
        max-width: calc(100vw - 30px);
        padding: 0 15px;
    }
    
    /* AGGRESSIVE Mobile WordPress spacing overrides */
    .wp-block-group[style*="var(--wp--preset--spacing"],
    .wp-block-group.is-layout-flex[style*="padding"],
    .wp-block-group.is-nowrap[style*="padding"],
    [class*="wp-container-core-group"][style*="padding"],
    .wp-block-group-is-layout-flex[style*="padding"] {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Target specific WordPress spacing values that are too large on mobile */
    .wp-block-group[style*="var(--wp--preset--spacing--30)"],
    .wp-block-group[style*="var(--wp--preset--spacing--40)"],
    .wp-block-group[style*="var(--wp--preset--spacing--50)"] {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* Small mobile screens - increase padding */
@media (max-width: 480px) {
    .alignfull {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .alignwide {
        width: calc(100vw - 30px) !important;
        margin-left: -15px !important;
        margin-right: -15px !important;
    }
    
    .container .alignfull {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .wp-block-stack.alignfull .wp-block-stack__content,
    .wp-block-group.alignfull .wp-block-group__inner-container {
        padding: 0 12px !important;
    }
    
    .wp-block-group.alignfull > * {
        max-width: calc(100vw - 20px) !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    /* Simple and direct WordPress block padding override for mobile */
    .wp-block-group {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* VERY AGGRESSIVE mobile padding reduction for WordPress blocks */
    .wp-block-group[style*="var(--wp--preset--spacing"],
    .wp-block-group[style*="padding-top:var"],
    .wp-block-group[style*="padding-bottom:var"],
    .wp-block-group.is-layout-flex[style*="padding"],
    .wp-block-group.is-nowrap[style*="padding"],
    [class*="wp-container-core-group"][style*="padding"],
    .wp-block-group-is-layout-flex[style*="padding"] {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    /* Override all WordPress spacing presets on small mobile */
    .wp-block-group[style*="var(--wp--preset--spacing--10)"],
    .wp-block-group[style*="var(--wp--preset--spacing--20)"],
    .wp-block-group[style*="var(--wp--preset--spacing--30)"],
    .wp-block-group[style*="var(--wp--preset--spacing--40)"],
    .wp-block-group[style*="var(--wp--preset--spacing--50)"],
    .wp-block-group[style*="var(--wp--preset--spacing--60)"],
    .wp-block-group[style*="var(--wp--preset--spacing--70)"],
    .wp-block-group[style*="var(--wp--preset--spacing--80)"] {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Extra small mobile - ensure text never touches edges */
@media (max-width: 360px) {
    .alignfull {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .alignwide {
        width: calc(100vw - 24px) !important;
        margin-left: -12px !important;
        margin-right: -12px !important;
    }
    
    .container .alignfull {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .wp-block-stack.alignfull .wp-block-stack__content,
    .wp-block-group.alignfull .wp-block-group__inner-container {
        padding: 0 8px !important;
    }
    
    .wp-block-group.alignfull > * {
        max-width: none !important;
        width: calc(100vw - 12px) !important;
        margin: 0 auto !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Specific German word-breaking fixes */
    .wp-block-group.alignfull h1,
    .wp-block-group.alignfull h2,
    .wp-block-group.alignfull h3,
    .wp-block-group.alignfull p {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        hyphens: auto !important;
        -webkit-hyphens: auto !important;
        -ms-hyphens: auto !important;
        hyphenate-limit-chars: 6 3 3 !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
    }
    
    /* Fix text width issues - ensure adequate width for readable text */
    p, .wp-block-paragraph,
    h1, h2, h3, h4, h5, h6,
    .wp-block-heading {
        max-width: none !important;
        width: calc(100vw - 20px) !important;
        margin: 0 auto !important;
        padding: 0 10px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        hyphens: auto !important;
        box-sizing: border-box !important;
        text-align: center !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    /* Ensure containers are properly centered and don't restrict width */
    .wp-block-group__inner-container,
    .wp-block-stack__content,
    .entry-content {
        max-width: none !important;
        width: calc(100vw - 16px) !important;
        margin: 0 auto !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        text-align: center !important;
    }
    
    /* Grid and column fixes for very small screens */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Icon grids and service blocks */
    .service-grid,
    .icon-grid,
    .wp-block-group.is-layout-grid {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    
    .service-item,
    .icon-item {
        width: 100% !important;
        margin-bottom: 0.9375rem !important;
    }
    
    /* Fix services section padding and checkmark sizing on mobile - OVERRIDE WordPress defaults */
    .wp-block-list.is-style-checkmark-list,
    ul.wp-block-list.is-style-checkmark-list,
    .is-style-checkmark-list,
    ul.is-style-checkmark-list {
        padding-left: 0 !important;
        margin-left: 0 !important;
        list-style: none !important;
        list-style-type: none !important;
        text-align: left !important;
        padding-inline-start: 0 !important;
    }
    
    .wp-block-list.is-style-checkmark-list li,
    ul.wp-block-list.is-style-checkmark-list li,
    .is-style-checkmark-list li,
    ul.is-style-checkmark-list li {
        position: relative !important;
        padding-left: 1.25rem !important;
        padding-inline-start: 1.25rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.4 !important;
        text-align: left !important;
        display: block !important;
        list-style: none !important;
        list-style-type: none !important;
    }
    
    .wp-block-list.is-style-checkmark-list li::before,
    ul.wp-block-list.is-style-checkmark-list li::before,
    .is-style-checkmark-list li::before,
    ul.is-style-checkmark-list li::before {
        content: "✓" !important;
        position: absolute !important;
        left: 0 !important;
        top: 0.05rem !important;
        color: var(--color-accent-gold) !important;
        font-size: 0.875rem !important;
        font-weight: bold !important;
        line-height: 1 !important;
        width: 0.875rem !important;
        height: 0.875rem !important;
        max-width: none !important;
        min-width: unset !important;
        display: inline-block !important;
        text-align: center !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        box-sizing: border-box !important;
        background: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Service section specific fixes */
    .wp-block-group h3,
    .wp-block-group h4 {
        margin-bottom: 0.5rem !important;
        font-size: clamp(1rem, 3.5vw, 1.2rem) !important;
        font-weight: 600 !important;
    }
    
    .wp-block-group p {
        margin-bottom: 1rem !important;
        font-size: clamp(0.85rem, 2.8vw, 0.95rem) !important;
        line-height: 1.5 !important;
    }
    
    /* Fix mobile grid spacing inconsistencies */
    .wp-block-group.is-layout-grid {
        gap: 1rem !important;
        display: block !important;
    }
    
    .wp-block-group.is-layout-grid > * {
        margin-bottom: 1rem !important;
        padding: 1rem !important;
    }
    
    /* Override WordPress spacing variables on mobile - reduce excessive padding */
    .wp-block-group[style*="--wp--preset--spacing"],
    .wp-block-group[style*="padding-top:var"],
    .wp-block-group[style*="padding-bottom:var"],
    .wp-block-group[style*="var(--wp--preset--spacing"],
    .wp-block-group.is-layout-flex[style*="padding"],
    .wp-block-group.is-nowrap[style*="padding"],
    .wp-container-core-group-is-layout-flex[style*="padding"] {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* More specific overrides for different WordPress spacing presets */
    .wp-block-group[style*="var(--wp--preset--spacing--20)"],
    .wp-block-group[style*="var(--wp--preset--spacing--30)"],
    .wp-block-group[style*="var(--wp--preset--spacing--40)"],
    .wp-block-group[style*="var(--wp--preset--spacing--50)"] {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Target larger spacing variables that should be reduced more aggressively */
    .wp-block-group[style*="var(--wp--preset--spacing--60)"],
    .wp-block-group[style*="var(--wp--preset--spacing--70)"],
    .wp-block-group[style*="var(--wp--preset--spacing--80)"] {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Special handling for flex layout groups with excessive padding */
    .wp-block-group.is-layout-flex[style*="var(--wp--preset--spacing"],
    .is-layout-flex.wp-block-group[style*="padding"],
    .wp-block-group.is-nowrap[style*="var(--wp--preset--spacing"] {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Fix heading spacing with WordPress variables */
    h2[style*="--wp--preset--spacing--80"] {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Consistent font icon sizing */
    .wp-block-font-awesome-icon svg {
        font-size: 2rem !important;
        width: 2rem !important;
        height: 2rem !important;
        flex-shrink: 0 !important;
    }
}

/* Fix checkmark SVG images - override max-width: 100% */
.wp-block-image.is-resized img[src*="svg+xml"],
.wp-block-image img[style*="width:50px"] {
    max-width: none !important;
    width: 3.125rem !important; /* 50px in rem */
    height: 3.125rem !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Team Block Image Standardization */
/* Target team sections - common patterns for team blocks */
.wp-block-group[class*="team"] img,
.wp-block-columns[class*="team"] img,
.wp-block-group[id*="team"] img,
.wp-block-columns[id*="team"] img,
[class*="team-member"] img,
[class*="team-grid"] img,
.wp-block-group.has-text-align-center .wp-block-image img,
.wp-block-columns .wp-block-column .wp-block-image img,
.wp-block-columns .wp-block-column img,
.wp-block-image.wp-image-* img,
.wp-block-image img[src*="placeholder"],
.wp-block-image img[alt*="placeholder"],


/* Fix image block layout - text should be below images */
.wp-block-image {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    overflow: visible !important;
}

.wp-block-image img {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    flex-shrink: 0 !important;
}

.wp-block-image figcaption,
.wp-block-image .wp-element-caption {
    position: static !important;
    z-index: 2 !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    text-align: center !important;
    background: none !important;
    color: var(--color-text-primary) !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Ensure equal height for image stacks in columns */
.wp-block-columns .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.wp-block-columns .wp-block-column .wp-block-image {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
}

/* Align text at same baseline across columns */
.wp-block-columns .wp-block-column .wp-block-image figcaption,
.wp-block-columns .wp-block-column .wp-block-image .wp-element-caption {
    margin-top: 0.5rem !important;
    padding-top: 0 !important;
    position: static !important;
}

/* Team block specific styling to prevent text overlap */
.wp-block-group[class*="team"] .wp-block-image,
.wp-block-columns[class*="team"] .wp-block-image,
.wp-block-group[id*="team"] .wp-block-image,
.wp-block-columns[id*="team"] .wp-block-image,
[class*="team-member"] .wp-block-image,
[class*="team-grid"] .wp-block-image {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.wp-block-group[class*="team"] .wp-block-image figcaption,
.wp-block-columns[class*="team"] .wp-block-image figcaption,
.wp-block-group[id*="team"] .wp-block-image figcaption,
.wp-block-columns[id*="team"] .wp-block-image figcaption,
[class*="team-member"] .wp-block-image figcaption,
[class*="team-grid"] .wp-block-image figcaption,
.wp-block-group[class*="team"] .wp-block-image .wp-element-caption,
.wp-block-columns[class*="team"] .wp-block-image .wp-element-caption,
.wp-block-group[id*="team"] .wp-block-image .wp-element-caption,
.wp-block-columns[id*="team"] .wp-block-image .wp-element-caption,
[class*="team-member"] .wp-block-image .wp-element-caption,
[class*="team-grid"] .wp-block-image .wp-element-caption {
    position: static !important;
    display: block !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Responsive team images for mobile */
@media (max-width: 768px) {
    .wp-block-group[class*="team"] img,
    .wp-block-columns[class*="team"] img,
    .wp-block-group[id*="team"] img,
    .wp-block-columns[id*="team"] img,
    [class*="team-member"] img,
    [class*="team-grid"] img,
    .wp-block-group.has-text-align-center .wp-block-image img,
    .wp-block-columns .wp-block-column .wp-block-image img,
    .wp-block-columns .wp-block-column img,
    .wp-block-image.wp-image-* img,
    .wp-block-image img[src*="placeholder"],
    .wp-block-image img[alt*="placeholder"],
    .wp-block-image img {
        width: 150px !important;
        height: 150px !important;
        min-width: 150px !important;
        min-height: 150px !important;
        max-width: 150px !important;
        max-height: 150px !important;
    }
    
    .wp-block-group[class*="team"] .wp-block-image,
    .wp-block-columns[class*="team"] .wp-block-image,
    .wp-block-group[id*="team"] .wp-block-image,
    .wp-block-columns[id*="team"] .wp-block-image,
    [class*="team-member"] .wp-block-image,
    [class*="team-grid"] .wp-block-image,
    .wp-block-group.has-text-align-center .wp-block-image,
    .wp-block-columns .wp-block-column .wp-block-image {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .wp-block-group[class*="team"] img,
    .wp-block-columns[class*="team"] img,
    .wp-block-group[id*="team"] img,
    .wp-block-columns[id*="team"] img,
    [class*="team-member"] img,
    [class*="team-grid"] img,
    .wp-block-group.has-text-align-center .wp-block-image img,
    .wp-block-columns .wp-block-column .wp-block-image img,
    .wp-block-columns .wp-block-column img,
    .wp-block-image.wp-image-* img,
    .wp-block-image img[src*="placeholder"],
    .wp-block-image img[alt*="placeholder"],
    .wp-block-image img {
        width: 120px !important;
        height: 120px !important;
        min-width: 120px !important;
        min-height: 120px !important;
        max-width: 120px !important;
        max-height: 120px !important;
    }
    
    .wp-block-group[class*="team"] .wp-block-image,
    .wp-block-columns[class*="team"] .wp-block-image,
    .wp-block-group[id*="team"] .wp-block-image,
    .wp-block-columns[id*="team"] .wp-block-image,
    [class*="team-member"] .wp-block-image,
    [class*="team-grid"] .wp-block-image,
    .wp-block-group.has-text-align-center .wp-block-image,
    .wp-block-columns .wp-block-column .wp-block-image {
        width: auto !important;
        height: auto !important;
        min-width: auto !important;
        min-height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }
}

/* Mobile checkmark SVG sizing */
@media (max-width: 480px) {
    .project-lightbox {
        padding: 10px;
    }
    
    .lightbox-content {
        width: 98%;
        margin: 15px auto;
    }
    
    .lightbox-image {
        max-height: 35vh;
        object-fit: cover;
        flex-shrink: 0;
    }
    
    .lightbox-info {
        padding: 15px;
        flex: 1;
        max-height: none;
        overflow: visible;
        word-wrap: break-word;
    }
    
    .lightbox-title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .lightbox-description {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* Font hierarchy implementation as per requirements */

/* H1 → Montserrat Bold, 2.5–3rem, ~120% line-height */
h1, 
.wp-block-heading h1 {
    font-family: "Montserrat", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(2.5rem, 4vw, 3rem); /* 2.5–3rem responsive */
    line-height: 1.2; /* ~120% line-height */
    color: var(--color-text-primary); /* Changed from green to black */
    margin-bottom: 1.25rem;
}

/* H2 → Montserrat SemiBold, 2–2.25rem, ~125% line-height */
h2,
.wp-block-heading h2 {
    font-family: "Montserrat", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 600; /* SemiBold */
    font-size: clamp(2rem, 3.5vw, 2.25rem); /* 2–2.25rem responsive */
    line-height: 1.25; /* ~125% line-height */
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

/* H3 → Montserrat Medium, 1.75rem, ~130% line-height */
h3,
.wp-block-heading h3 {
    font-family: "Montserrat", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 500; /* Medium */
    font-size: 1.75rem;
    line-height: 1.3; /* ~130% line-height */
    color: var(--color-text-primary);
    margin-bottom: 0.875rem;
}

/* H4 → Montserrat Regular, 1.5rem */
h4,
.wp-block-heading h4 {
    font-family: "Montserrat", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1.5rem;
    line-height: 1.35;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

/* H5 → Montserrat Regular, 1.25rem */
h5,
.wp-block-heading h5 {
    font-family: "Montserrat", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1.25rem;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin-bottom: 0.625rem;
}

/* H6 → Montserrat Regular, 1.1rem (with letter-spacing) */
h6,
.wp-block-heading h6 {
    font-family: "Montserrat", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Body text (p, li) → Plus Jakarta Sans Regular, 1rem (16px), 150–160% line-height */
p, li,
.wp-block-paragraph,
.wp-block-list li {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 1rem; /* 16px */
    line-height: 1.6; /* 160% line-height for better readability */
    color: var(--color-text-primary);
    margin-bottom: 0.9375rem;
}

/* Small text / captions → Plus Jakarta Sans Regular, 0.875rem (14px), ~140% line-height */
small, .small-text, 
.wp-block-image figcaption,
.wp-block-gallery figcaption,
caption,
.caption,
.footnotes,
.wp-caption-text {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-weight: 400; /* Regular */
    font-size: 0.875rem; /* 14px */
    line-height: 1.4; /* ~140% line-height */
    color: var(--color-text-muted);
}

/* Lists specific styling */
ul, ol {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
}

/* Blockquotes */
blockquote, 
.wp-block-quote {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--color-text-tertiary);
}

/* Footer Styles */
.site-footer {
    background: var(--black);
    color: var(--color-text-white);
    padding: 40px 0 20px;
    margin-top: 60px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
    gap: 2.5rem;
    margin-bottom: 1.875rem;
}

.footer-section h3 {
    color: var(--color-text-primary);
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: 0.625rem;
}

.footer-menu a, 
.footer-links a {
    color: var(--color-text-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-menu a:hover, 
.footer-links a:hover {
    color: var(--color-primary-green);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.625rem;
}

.contact-info p {
    margin-bottom: 0.5rem;
    color: var(--color-text-white);
    line-height: 1.6;
}

.contact-info strong {
    color: var(--color-text-white);
}

.footer-bottom {
    border-top: 1px solid var(--color-border-dark);
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.copyright {
    color: var(--color-text-white);
}

.developer-credit {
    font-size: 0.85em;
    margin-top: 0.3125rem;
    color: var(--color-text-white);
}

.developer-credit a {
    color: var(--color-primary-green);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.developer-credit a:hover {
    color: var(--color-primary-green-hover);
    text-decoration: underline;
}

.footer-legal {
    display: flex;
    gap: 1.25rem;
}

.footer-legal a {
    color: var(--color-text-white);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--color-primary-green);
}

/* Footer Mobile Styles */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 1.875rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.9375rem;
    }
    
    .footer-legal {
        flex-direction: column;
        gap: 0.625rem;
    }
}

/* Projects Styles */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.875rem;
    margin-top: 30px;
}

.project-card {
    background: var(--color-bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px var(--shadow-medium);
}

.project-thumbnail {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-card:hover .project-image {
    transform: scale(1.05);
}

.project-info {
    padding: 20px;
}

.project-title {
    margin: 0 0 10px 0;
    font-size: 20px;
    color: var(--color-text-primary);
}

.project-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.project-title a:hover {
    color: var(--color-primary-green-hover);
}

.project-excerpt {
    color: var(--off-white) !important;
    line-height: 1.6;
    margin-bottom: 15px;
    text-shadow: 1px 1px 2px var(--shadow-text-light);
    background-color: var(--overlay-dark-50) !important;
    padding: 10px !important;
    border-radius: 4px !important;
}

/* Additional specific override for project excerpt text */
.project-card .project-excerpt,
.project-info .project-excerpt,
article.project-card .project-excerpt {
    color: var(--off-white) !important;
    background-color: var(--overlay-dark-50) !important;
    text-shadow: 1px 1px 2px var(--shadow-text-light) !important;
}

.read-more {
    display: inline-block;
    background: var(--color-primary-green);
    color: var(--color-text-white);
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
}

.read-more:hover {
    background: var(--color-primary-green-hover);
}

/* Single Project Styles */
.project-single {
    max-width: 50rem;
    margin: 0 auto;
}

.project-single .project-image {
    margin-bottom: 1.875rem;
    text-align: center;
}

.project-featured-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px var(--shadow-light);
}

.project-single .project-title {
    font-size: 32px;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    text-align: center;
}

.project-description {
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-tertiary);
}

.project-description p {
    margin-bottom: 20px;
}

/* Projects Mobile Styles */
@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .project-single .project-title {
        font-size: 1.5rem;
    }
    
    .project-info {
        padding: 0.9375rem;
    }
}

/* Project Gallery Styles */
.project-gallery-container {
    background: var(--color-bg-light);
    padding: 60px 0;
}

.project-gallery-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    gap: 1.25rem;
}

.tab-button {
    background: var(--color-bg-white);
    border: 2px solid var(--color-primary-green);
    color: var(--color-primary-green);
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tab-button:hover,
.tab-button.active {
    background: var(--color-primary-green);
    color: var(--color-text-white);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(47, 111, 78, 0.3);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.project-gallery-content {
    max-width: 87.5rem;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.875rem;
}

.gallery-item {
    position: relative;
    height: 300px;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-gallery-item);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-gallery-hover);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgb(34 115 197 / 30%), rgb(0 0 0 / 86%));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.overlay-content h3 {
    color: var(--off-white) !important;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.625rem;
}

.overlay-content p {
    color: var(--off-white);
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}

/* Lightbox Styles */
.project-lightbox {
    display: none;
    position: fixed;
    top: 4.375rem;
    left: 0;
    width: 100%;
    height: calc(100% - 4.375rem);
    z-index: 100000;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
}

.project-lightbox.active {
    display: block;
    animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-overlay {
    display: none;
}

.lightbox-content {
    width: 90%;
    max-width: 800px;
    background: var(--color-bg-white);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    animation: lightboxSlideIn 0.3s ease;
    margin: 10px auto;
    min-height: auto;
    max-height: calc(100vh - 5.375rem);
    overflow: hidden;
    position: relative;
}

@keyframes lightboxSlideIn {
    from { transform: scale(0.8) translateY(50px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(13, 13, 13, 0.5);
    color: var(--off-white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease;
}

.lightbox-close:hover {
    background: rgba(13, 13, 13, 0.8);
}

.lightbox-image {
    width: 100%;
    max-height: 40vh;
    object-fit: cover;
    flex-shrink: 0;
}

.lightbox-info {
    padding: 30px;
    text-align: center;
    flex: 1;
    overflow-y: auto;
    max-height: calc(60vh - 60px);
}

.lightbox-title {
    color: var(--color-text-primary);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

.lightbox-description {
    color: var(--color-text-tertiary);
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

/* Project Gallery Mobile Styles */
@media (max-width: 768px) {
    .project-gallery-container {
        padding: 40px 0;
    }
    
    .project-gallery-tabs {
        flex-direction: column;
        align-items: center;
        gap: 0.9375rem;
    }
    
    .tab-button {
        width: 200px;
        padding: 12px 20px;
        font-size: 0.875rem;
    }
    
    .project-gallery-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .gallery-item {
        height: 250px;
    }
    
    .overlay-content h3 {
        font-size: 20px;
    }
    
    .overlay-content p {
        font-size: 0.875rem;
    }
    
    .project-lightbox {
        padding: 10px;
    }
    
    .lightbox-content {
        width: 95%;
        margin: 20px auto;
    }
    
    .lightbox-image {
        max-height: 40vh;
        object-fit: cover;
        flex-shrink: 0;
    }
    
    .lightbox-info {
        padding: 20px;
        flex: 1;
        max-height: none;
        overflow: visible;
    }
    
    .lightbox-title {
        font-size: 22px;
    }
    
    .lightbox-description {
        font-size: 0.875rem;
    }
}

/* Soft Melting Edges Effect with Dynamic Controls */
.has-blur-borders {
    position: relative;
    /* Default values if custom properties aren't set */
    --blur-intensity: 0.5px;
    --blur-spread: 15px;
    --blur-spread-half: 7.5px;
    
    filter: blur(var(--blur-intensity));
}

.has-blur-borders::before {
    content: "";
    position: absolute;
    top: var(--blur-spread-half);
    left: var(--blur-spread-half);
    right: var(--blur-spread-half);
    bottom: var(--blur-spread-half);
    background: inherit;
    filter: blur(var(--blur-spread));
    opacity: 0.7;
    z-index: -1;
    border-radius: inherit;
}

.has-blur-borders::after {
    content: "";
    position: absolute;
    top: calc(var(--blur-spread-half) / 2);
    left: calc(var(--blur-spread-half) / 2);
    right: calc(var(--blur-spread-half) / 2);
    bottom: calc(var(--blur-spread-half) / 2);
    background: inherit;
    filter: blur(calc(var(--blur-spread) / 2));
    opacity: 0.8;
    z-index: -1;
    border-radius: inherit;
}

/* Block-specific melting edges using dynamic values */
.wp-block-group.has-blur-borders,
.wp-block-cover.has-blur-borders {
    filter: blur(calc(var(--blur-intensity) * 0.6));
}

.wp-block-image.has-blur-borders img,
.wp-block-gallery.has-blur-borders img {
    filter: blur(calc(var(--blur-intensity) * 0.4));
    border-radius: 8px;
}

.wp-block-button.has-blur-borders .wp-block-button__link {
    filter: blur(calc(var(--blur-intensity) * 0.4));
    transition: filter 0.3s ease;
}

/* Text content gets soft edges proportional to blur intensity */
.has-blur-borders p,
.has-blur-borders h1,
.has-blur-borders h2,
.has-blur-borders h3,
.has-blur-borders h4,
.has-blur-borders h5,
.has-blur-borders h6 {
    filter: blur(calc(var(--blur-intensity) * 0.2));
    text-shadow: 0 0 calc(var(--blur-spread) / 5) rgba(0, 0, 0, 0.1);
}

/* Editor preview using dynamic values */
.block-editor-block-list__block.has-blur-borders .block-editor-block-list__block-edit {
    position: relative;
    filter: blur(calc(var(--blur-intensity) * 0.6));
}

.block-editor-block-list__block.has-blur-borders .block-editor-block-list__block-edit::before {
    content: "";
    position: absolute;
    top: calc(var(--blur-spread) / 2);
    left: calc(var(--blur-spread) / 2);
    right: calc(var(--blur-spread) / 2);
    bottom: calc(var(--blur-spread) / 2);
    background: rgba(34, 197, 94, 0.1);
    filter: blur(calc(var(--blur-spread) * 0.7));
    z-index: -1;
    border-radius: 8px;
}

/* Hover enhancement - content becomes slightly sharper */
.has-blur-borders:hover {
    filter: blur(calc(var(--blur-intensity) * 0.4));
    transition: filter 0.3s ease;
}

.has-blur-borders:hover::before {
    filter: blur(calc(var(--blur-spread) * 0.8));
    transition: filter 0.3s ease;
}

.has-blur-borders:hover::after {
    filter: blur(calc(var(--blur-spread) * 0.4));
    transition: filter 0.3s ease;
}

/* 404 Error Page Styles */
.error-404-content {
    text-align: center;
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error-404-title {
    font-size: 120px;
    font-weight: 700;
    color: var(--color-accent-gold);
    margin: 0;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.error-404-content h2 {
    font-size: 36px;
    color: var(--color-text-secondary);
    margin: 20px 0;
}

.error-404-message {
    font-size: 18px;
    color: var(--color-text-tertiary);
    margin-bottom: 40px;
    max-width: 600px;
}

.error-404-actions {
    margin-bottom: 60px;
}

.button {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 0.3125rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.button-primary {
    background: var(--color-accent-gold);
    color: var(--color-text-white);
}

.button-primary:hover {
    background: var(--color-accent-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(34, 197, 94, 0.3);
}

.error-404-suggestions {
    margin-bottom: 40px;
}

.error-404-suggestions h3 {
    color: var(--color-text-secondary);
    margin-bottom: 20px;
}

.error-404-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.error-404-suggestions li {
    margin: 0;
}

.error-404-suggestions a {
    color: var(--color-accent-gold);
    text-decoration: none;
    font-weight: 500;
    padding: 5px 10px;
    transition: all 0.3s ease;
}

.error-404-suggestions a:hover {
    color: var(--color-accent-gold-hover);
    text-decoration: underline;
}

.error-404-search {
    max-width: 500px;
    margin: 0 auto;
}

.error-404-search h3 {
    color: var(--color-text-secondary);
    margin-bottom: 20px;
}

.error-404-search form {
    display: flex;
    gap: 10px;
}

.error-404-search input[type="search"] {
    flex: 1;
    padding: 0.625rem 0.9375rem;
    border: 1px solid var(--color-border-medium);
    border-radius: 0.3125rem;
    font-size: 16px;
}

.error-404-search input[type="submit"] {
    background: var(--color-accent-gold);
    color: var(--color-text-white);
    border: none;
    padding: 10px 20px;
    border-radius: 0.3125rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.3s ease;
}

.error-404-search input[type="submit"]:hover {
    background: var(--color-accent-gold-hover);
}

/* Mobile adjustments for 404 page */
@media (max-width: 768px) {
    .error-404-title {
        font-size: 80px;
    }
    
    .error-404-content h2 {
        font-size: 28px;
    }
    
    .error-404-message {
        font-size: 1rem;
        padding: 0 1.25rem;
    }
    
    .error-404-suggestions ul {
        flex-direction: column;
        gap: 0.625rem;
    }
    
    .error-404-search form {
        flex-direction: column;
    }
    
    .error-404-search input[type="search"],
    .error-404-search input[type="submit"] {
        width: 100%;
    }
}

/* Forminator Button Customization - Match Schedule Meeting Button */
.forminator-ui .forminator-button-submit,
.forminator-ui .forminator-button-submit:hover,
.forminator-ui .forminator-button-submit:focus {
    background-color: #0073aa !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    border-radius: 80px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-block !important;
    text-align: center !important;
}

.forminator-ui .forminator-button-submit:hover {
    background-color: #005a87 !important;
}