/**
 * Global CSS - KuLaDu Theme
 *
 * Allgemeine Anpassungen, die nicht zu Design System, Components oder Pages passen.
 * Nutze diese Datei für:
 * - WordPress-Core-Overrides
 * - Plugin-spezifische Anpassungen
 * - Globale Helper-Styles
 * - Quick-Fixes die später refactored werden können
 *
 * @package KuLaDu
 *
 * ==========================================================================
 * CSS ARCHITECTURE DOCUMENTATION
 * ==========================================================================
 *
 * Load Order (via functions.php priorities):
 *
 * 1. Priority 15: Design System Variables
 *    - kuladu-variables.css (600+ CSS custom properties)
 *
 * 2. Priority 17: Typography
 *    - kuladu-typography.css (responsive typography system)
 *
 * 3. Priority 18: Utilities
 *    - kuladu-utilities.css (spacing, layout, visibility, etc.)
 *    - custom-classes.css (Bricks custom classes)
 *
 * 4. Priority 19: Global Adjustments
 *    - global.css (THIS FILE - WordPress core, plugins, helpers)
 *
 * 5. Priority 20: Elements
 *    - elements/elements.css (Bricks-specific fixes, gallery)
 *    - elements/button.css (button component)
 *
 * 6. Priority 25: Components (All components)
 *    - components/speech-bubble.css (unified bubble system)
 *    - components/hero.css
 *    - components/hero-veranstaltungen.css
 *    - components/image-text.css
 *    - components/image-bubble.css
 *    - components/text-bubble.css
 *    - components/event-badge.css
 *    - components/event-meta.css
 *    - components/wavy-divider.css
 *    - utilities/parallax.css
 *
 * 7. Priority 30: Page-Specific (Conditional Loading)
 *    - pages/event-single.css (only on single events)
 *    - pages/event-archive.css (only on event archives/taxonomies)
 *    - components/event-card.css (only on event archives/taxonomies)
 *
 * Directory Structure:
 * /assets/css/
 *   ├── design-system/      - Design tokens, variables, typography, utilities
 *   ├── elements/           - Bricks element overrides & custom elements
 *   ├── components/         - Reusable components (bubbles, heroes, etc.)
 *   ├── pages/              - Page-specific styles (single, archive, etc.)
 *   └── global.css          - This file (general adjustments)
 *
 * File Naming Convention:
 * - kebab-case.css
 * - Descriptive names matching component/element purpose
 * - Prefixed with "kuladu-" in enqueue handles
 *
 * Dependencies:
 * - All CSS files depend on 'kuladu-design-system' (variables)
 * - Components using bubbles depend on 'kuladu-speech-bubble'
 * - Page CSS depends on relevant component CSS
 *
 * Performance Notes:
 * - CSS files use filemtime() for cache busting
 * - Conditional loading for page-specific CSS reduces payload
 * - Bricks builder exclusion via !bricks_is_builder_main()
 * - For production: Use plugin (Autoptimize/WP Rocket) for minification
 *
 * ==========================================================================
 */

/* ==========================================================================
   WordPress Core Adjustments
   ========================================================================== */

/* Add your global WordPress overrides here */


/* ==========================================================================
   Plugin Overrides
   ========================================================================== */

/* Add plugin-specific style adjustments here */


/* ==========================================================================
   Global Helpers
   ========================================================================== */

/* Add global helper classes or fixes here */


/* ==========================================================================
   Browser-specific Fixes
   ========================================================================== */

/* ==========================================================================
   Mobile Menu Toggle - Improved Touch Target
   ========================================================================== */

/**
 * Remove unnecessary padding from nav menu wrapper in mobile viewport
 * Applies when mobile menu toggle is active (typically max-width: 991px)
 */
@media (max-width: 991px) {
	.brxe-nav-menu {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/**
 * Increase touch target size to 44x44px (recommended minimum for mobile)
 * while keeping the visual icon size at 20x16px
 * Note: Don't override display property - let Bricks control visibility
 */
.bricks-mobile-menu-toggle {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
}

/**
 * Re-center the icon bars within the larger button
 * Original button: 20x16px, New button: 44x44px
 * Vertical centering: (44 - 16) / 2 = 14px offset
 * Horizontal centering: (44 - 20) / 2 = 12px offset
 */
.bricks-mobile-menu-toggle .bar-top {
	top: 14px !important;
	left: 12px !important;
	right: auto !important;
}

.bricks-mobile-menu-toggle .bar-center {
	top: 21px !important;
	left: 12px !important;
	right: auto !important;
}

.bricks-mobile-menu-toggle .bar-bottom {
	top: 28px !important;
	left: 12px !important;
	right: auto !important;
}

/**
 * Keep hover effect working with new dimensions
 */
.bricks-mobile-menu-toggle:hover span {
	min-width: 12px !important;
	width: 20px !important;
}

/**
 * Animation to X icon (when menu is open)
 * Override to ensure bars move to center of larger button
 */
.show-mobile-menu .bricks-mobile-menu-toggle .bar-top {
	top: 50% !important;
	left: 12px !important;
	transform: translateY(-50%) rotate(45deg) !important;
}

.show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom {
	top: 50% !important;
	left: 12px !important;
	transform: translateY(-50%) rotate(-45deg) !important;
}

/* Fix iOS Safari menu icon color (prevents blue color) */
.brx-header .bricks-mobile-menu-toggle,
.brx-header .bricks-mobile-menu-toggle svg,
.brx-header .bricks-mobile-menu-toggle path,
#brx-mobile-menu-toggle,
#brx-mobile-menu-toggle svg,
#brx-mobile-menu-toggle path {
	color: #000000 !important;
	fill: #000000 !important;
	stroke: currentColor !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* Remove iOS blue tap highlight globally */
* {
	-webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Header/Navigation Fixes
   ========================================================================== */

/**
 * Remove underline from submenu toggle BUTTON in active menu items
 * Structure: .brx-submenu-toggle contains <a>Link</a> + <button><i>Icon</i></button>
 * - Link should keep underline (user wants to see it's active)
 * - Button and icon should NOT have underline
 *
 * Uses ID selector to match Bricks' specificity:
 * Bricks uses: #brxe-xxxxx .bricks-nav-menu > .current-menu-ancestor > .brx-submenu-toggle > *
 * We target only <button> and its children, not <a>
 */
[id^="brxe-"] .bricks-nav-menu > .current-menu-ancestor > .brx-submenu-toggle > button,
[id^="brxe-"] .bricks-nav-menu > .current-menu-ancestor > .brx-submenu-toggle > button *,
[id^="brxe-"] .bricks-nav-menu > .current-menu-item > .brx-submenu-toggle > button,
[id^="brxe-"] .bricks-nav-menu > .current-menu-item > .brx-submenu-toggle > button * {
	text-decoration: none !important;
}


/* ==========================================================================
   Mobile Menu (Off-Canvas) Styling
   ========================================================================== */

/**
 * Mobile Menu Headline "Menü"
 * - Uses h3 class styling but forced black color
 * - Injected via mobile-menu-enhancements.js
 */
.mobile-menu-headline {
	margin: 0 !important;
	padding: var(--space-4) var(--space-6) var(--space-5) var(--space-6);
	/*border-bottom: 1px solid var(--color-sand-300);*/
}

/* Apply h3 class to headline for proper styling */
.mobile-menu-headline {
	font-family: var(--font-heading);
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-black);
	line-height: var(--line-height-heading);
	background-color: var(--color-sand-400);
}

/**
 * Mobile Menu Container Structure
 * - Only borders, spacing, touch targets
 * - NO typography styling
 */
.bricks-mobile-menu-wrapper {
	background-color: var(--color-sand-50);
}

.bricks-mobile-menu-wrapper:before{
	display: none !important;
}

.bricks-mobile-menu-wrapper .bricks-mobile-menu {
	
}

/**
 * Menu Items - Borders and Touch Targets
 */
.bricks-mobile-menu-wrapper .bricks-mobile-menu > li {
	border-bottom: 1px solid var(--color-sand-200);
}

.bricks-mobile-menu-wrapper .bricks-mobile-menu > li:last-child {
	/*border-bottom: none;*/
}

/**
 * First Menu Item - Wavy Divider from Header
 * Uses the same wave pattern as section dividers
 * Fill color matches .mobile-menu-headline background (var(--color-sand-400))
 */
.bricks-mobile-menu-wrapper .bricks-mobile-menu > li:first-child {
	padding-top: var(--space-1) !important;
	position: relative;
}

.bricks-mobile-menu-wrapper .bricks-mobile-menu > li:first-child::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: var(--space-1);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1200,0 L1200,6 C1050,12 850,12 600,6 C350,0 150,0 0,6 Z' fill='%23D4C4B0'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: top;
	pointer-events: none;
	z-index: 0;
}

/**
 * Menu Links - Only Touch Target Size
 */
.bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a {
	display: flex !important;
	align-items: center !important;
	min-height: 44px !important;
	padding: var(--space-6) var(--space-6) !important;
	width: 100% !important;
	font-size: var(--text-size-100) !important;
	line-height: var(--line-height-normal);
	color: var(--color-black) !important;
}

.bricks-mobile-menu-wrapper .bricks-mobile-menu > li > a[aria-current="page"], .bricks-mobile-menu-wrapper .bricks-mobile-menu > li:has(> a[aria-current="page"]){
	background-color: var(--color-sand-100) !important;
}

.bricks-mobile-menu-wrapper .bricks-mobile-menu > .current-menu-item > .brx-submenu-toggle{
	background-color: var(--color-sand-100) !important;
}

/**
 * Submenu Toggle - Structure Only
 */
.bricks-mobile-menu-wrapper .brx-submenu-toggle {
	display: flex !important;
	align-items: stretch !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.bricks-mobile-menu-wrapper .brx-submenu-toggle > a {
	flex: 1 !important;
	display: flex !important;
	align-items: center !important;
	padding: var(--space-6) var(--space-6) !important;
	min-height: 44px !important;
	line-height: var(--line-height-normal);
	font-size: var(--text-size-100) !important;
	color: var(--color-black) !important;
}

.sub-menu.brx-submenu-positioned{
	border-top: 1px solid var(--color-sand-200);
}

/**
 * Dropdown Button - Touch Target + Border
 */
.bricks-mobile-menu-wrapper .brx-submenu-toggle{
	position: relative;
}

.bricks-mobile-menu-wrapper .brx-submenu-toggle > button {
	flex-shrink: 0;
	width: 48px;
	min-width: 48px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0;
	border: none;
	/*border-left: 1px solid var(--color-sand-300);*/
	align-self: stretch;
}

.bricks-mobile-menu-wrapper .brx-submenu-toggle > button > svg{
	height: 12px;
	width: auto;
}

/**
 * Submenus - Structure Only
 */
.bricks-mobile-menu-wrapper .sub-menu,
.bricks-mobile-menu-wrapper .brx-submenu-positioned {
	padding: 0;
	margin: 0;
	list-style: none;
}

.bricks-mobile-menu-wrapper .sub-menu > li,
.bricks-mobile-menu-wrapper .brx-submenu-positioned > li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var(--color-sand-200);
	list-style: none;
	background-color: var(--color-sand-100);
}

.bricks-mobile-menu-wrapper .sub-menu > li:last-child,
.bricks-mobile-menu-wrapper .brx-submenu-positioned > li:last-child {
	border-bottom: none;
}

.bricks-mobile-menu-wrapper .sub-menu > li > a,
.bricks-mobile-menu-wrapper .brx-submenu-positioned > li > a {
	display: flex;
	align-items: center;
	padding: var(--space-4) var(--space-6) var(--space-4) var(--space-12) !important;
	min-height: 32px;
	width: 100%;
	line-height: var(--line-height-normal) !important;
	font-family: var(--font-base);
	font-size: var(--text-size-90) !important;
	font-weight: var(--font-weight-normal);
	color: var(--color-black) !important;
}


/* ==========================================================================
   Section Overflow Fix
   ========================================================================== */

.brxe-section{
   overflow-x: hidden !important;
   max-width: 100vw !important;
}