/*
 * ngo-charity-hub — bilingual (DE/AR) styles.
 *
 * Loaded on every page (functions.php). Every rule in sections 1-6 is scoped to html[dir="rtl"]
 * (the Arabic /ar/ pages), so German pages only gain section 7, the language switcher, which is
 * shown in both languages.
 *
 * Sections:
 *   1. Arabic typography
 *   2. Bidi isolation (Latin fragments, phone numbers, e-mail addresses)
 *   3. Theme (bizberg) layout mirroring
 *   4. Elementor / Charity Addon widgets
 *   5. The Events Calendar
 *   6. Forms (Ninja Forms), cookie banner and modal (GDPR Cookie Compliance)
 *   7. Language switcher (both languages)
 *   8. Mobile menu height (both languages, bizberg fix)
 *
 * Rules that name an Elementor element id (.elementor-element-xxxx) mirror a value saved in that
 * element's Elementor settings (alignment, gradient angle). If the element is edited or rebuilt
 * in Elementor, re-check the matching rule here.
 */

/* ==========================================================================
   1. Arabic typography
   Cairo is declared as "DIMCI Arabic" in wp-content/fonts/cairo/cairo.css and aliased under the
   site's Latin family names by ngo_charity_hub_arabic_font_aliases() (inc/i18n-rtl.php). Here:
   stacks built on system fonts, and properties that break Arabic script.
   ========================================================================== */

/* Plugins that set system-font stacks. "DIMCI Arabic" covers only the Arabic unicode-range, so
   putting it first changes Arabic glyphs only; Latin text keeps the rest of the original stack. */
html[dir="rtl"] {
	/* The Events Calendar */
	--tec-font-family-sans-serif: "DIMCI Arabic", "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}
/* Essential Addons event calendar (home page): font-family: Segoe UI. */
html[dir="rtl"] .eael-event-calendar-wrapper {
	font-family: "DIMCI Arabic", "Segoe UI";
}

html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
	font-family: inherit;
}

/* Tracking separates the joined letters of Arabic words. The theme and Charity Addon buttons
   are letter-spaced (uppercase Latin styling), which Arabic has no use for. */
html[dir="rtl"] .nacep-btn,
html[dir="rtl"] .navbar-nav > li > a,
html[dir="rtl"] .slicknav_nav a {
	letter-spacing: normal;
}

/* ==========================================================================
   2. Bidi isolation
   Phone numbers and e-mail addresses are left-to-right tokens: in a right-to-left paragraph
   the "+" of "+49 1590 3038280" otherwise moves to the end and the digit groups reverse.
   Text-node fragments that CSS cannot target are wrapped in <bdi> on output
   (ngo-charity-hub/inc/i18n-rtl.php).
   ========================================================================== */

html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] bdi.dimci-ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

html[dir="rtl"] bdi {
	unicode-bidi: isolate;
}

/* ==========================================================================
   3. Theme (bizberg) layout mirroring
   bizberg's rtl.css mirrors the header menu but not the Bootstrap 3 grid, the Kirki-generated
   banner alignment or the post navigation.
   ========================================================================== */

/* Bootstrap 3 columns float left: content/sidebar, top bar and blog grid stay in LTR order. */
html[dir="rtl"] [class^="col-xs-"],
html[dir="rtl"] [class*=" col-xs-"] {
	float: right;
}
@media (min-width: 768px) {
	html[dir="rtl"] [class^="col-sm-"],
	html[dir="rtl"] [class*=" col-sm-"] {
		float: right;
	}
}
@media (min-width: 992px) {
	html[dir="rtl"] [class^="col-md-"],
	html[dir="rtl"] [class*=" col-md-"] {
		float: right;
	}
}
@media (min-width: 1200px) {
	html[dir="rtl"] [class^="col-lg-"],
	html[dir="rtl"] [class*=" col-lg-"] {
		float: right;
	}
}
/* Kirki prints ".content-wrapper:not(.content-wrapper-no-sidebar){float:left}" inline. */
html[dir="rtl"] body.blog-detail-page .content-wrapper:not(.content-wrapper-no-sidebar),
html[dir="rtl"] body .bizberg_default_page .content-wrapper:not(.content-wrapper-no-sidebar) {
	float: right;
}

/* Top bar: bizberg's text-align:right on the info list pointed at the outer edge; after the
   column swap the list sits on the left, so align it to that edge. */
@media (min-width: 768px) {
	html[dir="rtl"] #top-bar .top-bar-right {
		text-align: left;
	}
}

/* Inner-page banner (title + breadcrumbs): Kirki prints text-align:left inline. */
html[dir="rtl"] body .breadcrumb-wrapper.not-home .section-title {
	text-align: right;
}

/* Previous/next post links. */
html[dir="rtl"] .post-navigation .nav-previous,
html[dir="rtl"] .comment-navigation .nav-previous {
	float: right;
}
html[dir="rtl"] .post-navigation .nav-next,
html[dir="rtl"] .comment-navigation .nav-next {
	float: left;
}

/* Mobile header: rtl.css shifts the menu button 15px inwards, onto the search icon. */
html[dir="rtl"] .slicknav_btn {
	left: 0;
	right: auto;
}

/* ==========================================================================
   4. Elementor / Charity Addon widgets
   ========================================================================== */

/* Charity Addon button: the coloured disc sits at the start of the label. */
html[dir="rtl"] .nacep-btn:before,
html[dir="rtl"] .nacep-btn:after {
	left: auto;
	right: 0;
}
/* The arrow icon points forward, which is to the left in Arabic. */
html[dir="rtl"] .nacep-btn i[class*="arrow-right"] {
	display: inline-block;
	transform: scaleX(-1);
}

/* Buttons saved with alignment "left" (home page 886). */
html[dir="rtl"] body .elementor-886 .elementor-element.elementor-element-225b3ab4 .nacep-btns-wrap,
html[dir="rtl"] body .elementor-886 .elementor-element.elementor-element-3fda1dbc .nacep-btns-wrap,
html[dir="rtl"] body .elementor-886 .elementor-element.elementor-element-4b48e746 .nacep-btns-wrap,
html[dir="rtl"] body .elementor-886 .elementor-element.elementor-element-1be53365 .nacep-btns-wrap,
html[dir="rtl"] body .elementor-886 .elementor-element.elementor-element-369d7a2d .nacep-btns-wrap,
html[dir="rtl"] body .elementor-886 .elementor-element.elementor-element-6c99009b .nacep-btns-wrap {
	text-align: right;
}

/* Home hero (886, section 3f3ed5e): the dark side of the overlay gradient (270deg) is behind
   the text column; mirrored columns need the mirrored angle. */
html[dir="rtl"] body .elementor-886 .elementor-element.elementor-element-3f3ed5e > .elementor-background-overlay {
	background-image: linear-gradient(90deg, #B8AE3F00 0%, #000000 100%);
}

/* Die Schule (1013, container cd4b20b): white side of the 282deg gradient behind the text. */
html[dir="rtl"] body .elementor-1013 .elementor-element.elementor-element-cd4b20b:not(.elementor-motion-effects-element-type-background) {
	background-image: linear-gradient(78deg, #010203 0%, #FFFFFF 62%);
}

/* Charity Addon contact box (Kontakt): icon floats left of the text. */
html[dir="rtl"] .nacep-contact-item .nacep-icon,
html[dir="rtl"] .elementor-widget-nacharity_basic_contact .nacep-icon {
	float: right;
}

/* Charity Addon slider caption saved as left-aligned (Team beitreten). */
html[dir="rtl"] .banner-caption.left-align {
	text-align: right;
}

/* ==========================================================================
   5. The Events Calendar
   TEC flows its bars with flexbox (so they mirror) but draws chevrons and their spacing for LTR.
   ========================================================================== */

html[dir="rtl"] .tribe-events-c-top-bar__nav-link-icon-svg,
html[dir="rtl"] .tribe-events-c-nav__prev-icon-svg,
html[dir="rtl"] .tribe-events-c-nav__next-icon-svg,
html[dir="rtl"] .tribe-events-c-top-bar__nav-list-item svg,
html[dir="rtl"] .tribe-events-c-nav__prev svg,
html[dir="rtl"] .tribe-events-c-nav__next svg {
	transform: scaleX(-1);
}
html[dir="rtl"] .tribe-events .tribe-events-c-nav__prev svg {
	margin-left: 15px;
	margin-right: 0;
}
html[dir="rtl"] .tribe-events .tribe-events-c-nav__next svg {
	margin-left: 0;
	margin-right: 15px;
}
html[dir="rtl"] .tribe-events .tribe-events-c-top-bar__nav-list-item {
	padding-left: 15px;
	padding-right: 0;
}
html[dir="rtl"] .tribe-events .tribe-events-c-top-bar__nav-list-item:last-child {
	padding-left: 0;
}
html[dir="rtl"] .tribe-events .tribe-events-calendar-month__header-column-title {
	text-align: right;
}

/* Single event meta groups (details, venue, map) keep their 24px gap on the right: in RTL the
   groups touch, and on phones the 350px map is pushed past the left edge. */
html[dir="rtl"] .tribe-events-single .tribe-events-event-meta .tribe-events-meta-group {
	margin-left: 24px;
	margin-right: 0;
}

/* Essential Addons' FullCalendar widget (the calendar on the front page) puts a Font Awesome glyph
   in front of each view button with `padding-right: 5px`, a physical side. In Arabic the button's
   inline direction is reversed, so that padding lands away from the label and the icon touches the
   word ("أجندة", "شهر"). The logical property puts the gap between icon and text in
   both directions. */
html[dir="rtl"] .fc-toolbar.fc-header-toolbar button.fc-button::before {
	padding-right: 0;
	padding-inline-end: 5px;
}

/* ==========================================================================
   6. Forms (Ninja Forms)
   Ninja Forms ships .rtl rules for choice lists; labels, the required asterisk and the
   error message still assume LTR.
   ========================================================================== */

html[dir="rtl"] .nf-form-cont .nf-field-label label,
html[dir="rtl"] .nf-form-cont .nf-error-msg,
html[dir="rtl"] .nf-form-cont .nf-form-fields-required {
	text-align: right;
}
html[dir="rtl"] .nf-form-cont .nf-after-field .nf-error-msg {
	margin-left: 10px;
	margin-right: 0;
}
html[dir="rtl"] .nf-form-cont .ninja-forms-req-symbol {
	margin-left: 0;
	margin-right: 2px;
}

/* ==========================================================================
   6b. GDPR Cookie Compliance banner and settings modal
   The plugin sets text-align:left on its containers and positions the modal's tab menu
   absolutely on the left.
   ========================================================================== */

html[dir="rtl"] #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content,
html[dir="rtl"] #moove_gdpr_cookie_modal .moove-gdpr-modal-content,
html[dir="rtl"] #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-company-logo-holder,
html[dir="rtl"] #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content .moove-gdpr-status-bar .gdpr-cc-form-wrap,
html[dir="rtl"] #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content .moove-gdpr-status-bar form {
	text-align: right;
}
html[dir="rtl"] #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-company-logo-holder {
	float: right;
}
@media (min-width: 768px) {
	html[dir="rtl"] #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content {
		float: right;
		left: auto;
		right: 0;
		border-radius: 0 5px 5px 0;
	}
	html[dir="rtl"] #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
		float: left;
		right: auto;
		left: 0;
		border-radius: 5px 0 0 5px;
	}
}

/* ==========================================================================
   7. Language switcher (both languages)
   Markup: dimci_language_switcher() in inc/i18n-language-switcher.php. Two copies per page:
   .dimci-lang-switch--menu inside the menu <ul> (desktop, and cloned by slicknav into the mobile
   menu) and .dimci-lang-switch--bar next to the mobile search icon (<= 1024px only, where bizberg
   swaps the menu for the hamburger). Text #767676 (4.54:1 on white; the
   Kirki menu colour #777 next to it is 4.48:1, just under AA), hover #8a6d1f (the theme gold darkened
   to AA contrast).
   ========================================================================== */

/* "ع" on German pages: Cairo is only loaded on /ar/, so this face is a subset of the same Cairo
   file holding the one glyph U+0639 (2 KB, cairo-ain-wght.woff2, same OFL licence), so the letter
   looks the same in both languages and no system Arabic fallback shows. font-display: block: a
   one-letter label must not flash in a fallback face; the file is 2 KB. */
@font-face {
	font-family: 'DIMCI Arabic Switch';
	font-style: normal;
	font-weight: 200 1000;
	font-display: block;
	src: url(../../../fonts/cairo/cairo-ain-wght.woff2) format('woff2');
	unicode-range: U+0639;
}

.dimci-lang-switch {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	direction: ltr; /* "DE | ع" in both languages, so the links do not swap places between pages */
	background: #f1f2f4;
	border-radius: 999px;
}

.dimci-lang-switch .dimci-lang-switch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	min-height: 26px;
	padding: 0 10px;
	color: #6b7280;
	font-family: 'MontserratRegular', 'Montserrat', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* No drawn "|" any more: the two languages sit in a segmented track, which says "pick one" on its
   own, and the header's own menu separators no longer make the switcher look like two more menu
   entries. Nothing decorative is added to the DOM, so a screen reader still hears only the two
   links. */

.dimci-lang-switch .dimci-lang-switch__item--ar {
	font-family: 'DIMCI Arabic Switch', 'DIMCI Arabic', 'Segoe UI', Tahoma, sans-serif;
	font-size: 17px;
	font-weight: 600;
	/* Cairo's "ع" hangs below its baseline; without this it looks pushed down against the "DE". */
	padding-bottom: 2px;
}

.dimci-lang-switch .dimci-lang-switch__item.is-current {
	color: #1f2937;
	font-weight: 700;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.14);
}

.dimci-lang-switch .dimci-lang-switch__item--ar.is-current {
	font-weight: 600; /* Cairo 700 reads much heavier than the Latin "DE" beside it */
}

.dimci-lang-switch .dimci-lang-switch__item:hover {
	color: #8a6d1f;
	background: rgba(255, 255, 255, 0.72);
}

.dimci-lang-switch .dimci-lang-switch__item.is-current:hover {
	color: #1f2937;
	background: #fff;
	cursor: default;
}

.dimci-lang-switch .dimci-lang-switch__item:focus {
	outline: none;
}

.dimci-lang-switch .dimci-lang-switch__item:focus-visible {
	color: #333;
	outline: 2px solid #026191;
	outline-offset: 1px;
}

/* Desktop menu: vertically centred in the 77px menu row, a little space before the search icon. */
#responsive-menu > .dimci-lang-switch-item {
	display: flex;
	align-items: center;
	padding: 0 6px 0 10px;
}

/* Mobile bar copy: hidden where the desktop menu is visible. The auto margin takes the free space
   bizberg's space-between leaves, so the switcher sits next to the search icon and hamburger. */
.dimci-lang-switch--bar {
	display: none;
}

@media only screen and (max-width: 1024px) {
	.bizberg_header_wrapper > .dimci-lang-switch--bar {
		display: flex;
		height: auto;
		margin-left: auto;
		margin-right: 12px;
	}
	html[dir="rtl"] .bizberg_header_wrapper > .dimci-lang-switch--bar {
		margin-left: 12px;
		margin-right: auto;
	}
}

/* Mobile menu (slicknav clone of the menu item): one row, aligned with the other entries.
   The panel is dark (#1f1d26) and Kirki prints ".slicknav_nav a{color:#B6B3C4 !important}", so the
   header colours cannot apply here and must not be faked with a counter-!important: the current
   language is marked by the underline and full opacity instead, the other one is dimmed. */
.slicknav_nav .dimci-lang-switch-item {
	padding: 6px 10px;
}

.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item {
	display: inline-flex;
	min-height: 40px;
	padding: 0 12px;
	opacity: 0.7;
}

.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item.is-current,
.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item:hover,
.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item:focus-visible {
	opacity: 1;
}

.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item.is-current {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item:focus-visible {
	outline-color: #fff;
}

.slicknav_menu .slicknav_nav .dimci-lang-switch {
	background: rgba(255, 255, 255, 0.1);
}

.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item.is-current {
	background: rgba(255, 255, 255, 0.18);
	box-shadow: none;
}

.slicknav_menu .slicknav_nav .dimci-lang-switch .dimci-lang-switch__item:hover {
	background: rgba(255, 255, 255, 0.18);
}

html[dir="rtl"] .slicknav_nav .dimci-lang-switch {
	justify-content: flex-end;
}

/* ==========================================================================
   8. Mobile menu height (both languages)
   Not an RTL rule and not the switcher: this file is the only child-theme stylesheet that is
   loaded on every page, and the switcher is the last entry of the mobile menu, so it is the
   defect's most visible symptom.

   bizberg's Customizer field "Dropdown Menu Height (Mobile)" (inc/customizer/navigation/mobile-menu.php,
   theme_mod main_menu_dropdown_height, default and stored value 200, slider maximum 300) makes Kirki
   print ".navbar .slicknav_nav{max-height:200px;overflow-y:scroll}" for 320-1024px. The menu has
   eight entries (~414px), so at 390px only the first four are inside the box: "Mitmachen", "Kontakt"
   and the language switcher are outside it, and because the box is a scroll container with no visible
   scrollbar on a phone, nothing suggests that they are one scroll away.

   The box now takes the height the viewport actually offers, minus the header above it (the menu is
   absolutely positioned under the header, whose height is ~90px, 73px once sticky), so the whole menu
   fits on a phone and still scrolls on a very short viewport. overflow-y:auto instead of scroll so no
   empty scrollbar gutter is drawn where the menu fits. Desktop (>= 1025px) never shows this element.
   ========================================================================== */

@media only screen and (max-width: 1024px) {
	header#masthead .navbar .slicknav_nav {
		max-height: calc(100vh - 100px);
		/* dvh is the viewport as it is right now, with the browser's URL bar shown; older browsers
		   ignore this line and keep the vh value above. */
		max-height: calc(100dvh - 100px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}