/**
 * Fondation Arrawaj - Complete Production-Ready Dark Mode Stylesheet
 * 
 * Safely and centrally styles all Elementor templates, Bifrost components,
 * Groovy Menu, Mobile Menu, Gravity Forms, Ajax Search Pro, and cards.
 * Scoped strictly under html[data-theme="dark"].
 */

/* ==========================================================================
   1. Centralized CSS Custom Properties
   ========================================================================== */
:root {
  --arrawaj-site-bg: #ffffff;
  --arrawaj-surface-0: #f8fafc;
  --arrawaj-surface-1: #ffffff;
  --arrawaj-surface-2: #f1f5f9;
  --arrawaj-surface-3: #e2e8f0;
  --arrawaj-surface-card: #ffffff;
  --arrawaj-surface-popover: #ffffff;
  --arrawaj-text-primary: #1e293b;
  --arrawaj-text-secondary: #475569;
  --arrawaj-text-muted: #64748b;
  --arrawaj-text-headings: #0f172a;
  --arrawaj-border: #e2e8f0;
  --arrawaj-border-subtle: #f1f5f9;
  --arrawaj-input-bg: #ffffff;
  --arrawaj-input-text: #1e293b;
  --arrawaj-input-border: #cbd5e1;
  --arrawaj-brand-green: #006633;
  --arrawaj-brand-green-light: #0c8047;
  --arrawaj-brand-orange: #ffa301;
  --arrawaj-toggle-bg: #f8fafc;
  --arrawaj-toggle-border: #cbd5e1;
  --arrawaj-toggle-icon: #334155;
}

html[data-theme="dark"] {
  /* Rich layered dark palette */
  --arrawaj-site-bg: #090d15;
  --arrawaj-surface-0: #06090e;
  --arrawaj-surface-1: #111823;
  --arrawaj-surface-2: #192332;
  --arrawaj-surface-3: #223043;
  --arrawaj-surface-card: #141e2b;
  --arrawaj-surface-popover: #192332;
  
  /* WCAG AAA/AA Typography */
  --arrawaj-text-primary: #f3f4f6;
  --arrawaj-text-secondary: #cbd5e1;
  --arrawaj-text-muted: #94a3b8;
  --arrawaj-text-headings: #ffffff;
  
  /* Borders */
  --arrawaj-border: #223043;
  --arrawaj-border-subtle: #192332;
  
  /* Form Inputs */
  --arrawaj-input-bg: #0e141d;
  --arrawaj-input-text: #f3f4f6;
  --arrawaj-input-border: #2e3f56;
  --arrawaj-input-focus: #10b981;
  
  /* Brand Accents (vibrant against dark backdrop) */
  --arrawaj-brand-green: #10b981;
  --arrawaj-brand-green-light: #34d399;
  --arrawaj-brand-orange: #fbbf24;
  --arrawaj-brand-orange-hover: #f59e0b;
  
  /* Toggle */
  --arrawaj-toggle-bg: #192332;
  --arrawaj-toggle-border: #2e3f56;
  --arrawaj-toggle-icon: #fbbf24;
  
  /* Shadows */
  --arrawaj-shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.55);
  --arrawaj-shadow-elevated: 0 12px 32px -4px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   2. Page Base & Scaffolding
   ========================================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--arrawaj-site-bg) !important;
  color: var(--arrawaj-text-primary) !important;
}

html[data-theme="dark"] .l-main-wrapper,
html[data-theme="dark"] #content,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .elementor-page {
  background-color: var(--arrawaj-site-bg);
}

/* ==========================================================================
   3. Elementor Sections & Containers Global Overrides
   ========================================================================== */
html[data-theme="dark"] .elementor-section.elementor-top-section,
html[data-theme="dark"] .elementor-section.elementor-inner-section,
html[data-theme="dark"] .arrawaj-dark-section {
  background-color: var(--arrawaj-site-bg) !important;
}

/* Alternating/muted sections */
html[data-theme="dark"] .elementor-section[id*="sectionn"],
html[data-theme="dark"] .elementor-section[id*="grey"],
html[data-theme="dark"] .elementor-section[id*="gray"],
html[data-theme="dark"] [data-id="52588d5"],
html[data-theme="dark"] [data-id="ab4b14f"],
html[data-theme="dark"] [data-id="af9eaf5"],
html[data-theme="dark"] [data-id="da87156"],
html[data-theme="dark"] [data-id="41d77c1"],
html[data-theme="dark"] [data-id="f33f232"],
html[data-theme="dark"] [data-id="4f07b36"],
html[data-theme="dark"] [data-id="d342bdf"],
html[data-theme="dark"] [data-id="form_sec_7"] {
  background-color: var(--arrawaj-surface-1) !important;
}

/* Header logo strip in Elementor template 29244 */
html[data-theme="dark"] [data-id="8fcfe32"],
html[data-theme="dark"] #menu-desktop {
  background-color: var(--arrawaj-surface-1) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
}

/* PRESERVE Banner sections, Background Images & Gradients */
html[data-theme="dark"] .elementor-section[style*="background-image"],
html[data-theme="dark"] .elementor-section.elementor-section--has-bg,
html[data-theme="dark"] #nosfin,
html[data-theme="dark"] #chiffres-cles-web,
html[data-theme="dark"] [data-id="8db25eb"],
html[data-theme="dark"] [data-id="bcfab2f"],
html[data-theme="dark"] [data-id="34570cc"],
html[data-theme="dark"] [data-id="2d18dd4"],
html[data-theme="dark"] [data-id="631fe1b"],
html[data-theme="dark"] [data-id="80f30c4"],
html[data-theme="dark"] [data-id="591b415"] {
  background-color: transparent !important;
}

html[data-theme="dark"] #nosfin *,
html[data-theme="dark"] #chiffres-cles-web *,
html[data-theme="dark"] [data-id="8db25eb"] *,
html[data-theme="dark"] [data-id="bcfab2f"] *,
html[data-theme="dark"] [data-id="34570cc"] *,
html[data-theme="dark"] [data-id="2d18dd4"] *,
html[data-theme="dark"] [data-id="631fe1b"] *,
html[data-theme="dark"] [data-id="80f30c4"] * {
  color: inherit;
}

/* ==========================================================================
   4. Columns, Cards, Boxes & Surfaces
   ========================================================================== */
html[data-theme="dark"] .arrawaj-dark-card,
html[data-theme="dark"] .elementor-column-wrap[style*="background-color: #FFFFFF"],
html[data-theme="dark"] .elementor-column-wrap[style*="background-color:#FFFFFF"],
html[data-theme="dark"] .elementor-widget-wrap[style*="background-color: #FFFFFF"],
html[data-theme="dark"] .elementor-widget-wrap[style*="background-color:#FFFFFF"],
html[data-theme="dark"] .elementor-post,
html[data-theme="dark"] .elementor-card,
html[data-theme="dark"] .elementor-testimonial,
html[data-theme="dark"] [data-id="d39aeab"],
html[data-theme="dark"] [data-id="3b12111"],
html[data-theme="dark"] [data-id="647fbb8"],
html[data-theme="dark"] [data-id="d5b0188"],
html[data-theme="dark"] [data-id="1455f09"],
html[data-theme="dark"] [data-id="1c025e1"],
html[data-theme="dark"] [data-id="cfe632d"],
html[data-theme="dark"] [data-id="2b49bc0"],
html[data-theme="dark"] [data-id="c96eca0"],
html[data-theme="dark"] [data-id="6f2abd8"],
html[data-theme="dark"] [data-id="c80baa6"] {
  background-color: var(--arrawaj-surface-card) !important;
  border-color: var(--arrawaj-border) !important;
  box-shadow: var(--arrawaj-shadow-card) !important;
}

/* Elementor Posts & Search Result Cards */
html[data-theme="dark"] .elementor-post__card,
html[data-theme="dark"] .elementor-posts--skin-cards .elementor-post__card,
html[data-theme="dark"] .elementor-posts .elementor-post__card {
  background-color: var(--arrawaj-surface-card) !important;
  border: 1px solid var(--arrawaj-border) !important;
  box-shadow: var(--arrawaj-shadow-card) !important;
}

html[data-theme="dark"] .elementor-post__card .elementor-post__title,
html[data-theme="dark"] .elementor-post__card .elementor-post__title a,
html[data-theme="dark"] .elementor-posts--skin-cards .elementor-post__title,
html[data-theme="dark"] .elementor-posts--skin-cards .elementor-post__title a {
  color: var(--arrawaj-text-headings) !important;
}

html[data-theme="dark"] .elementor-post__card .elementor-post__excerpt,
html[data-theme="dark"] .elementor-post__card .elementor-post__excerpt p,
html[data-theme="dark"] .elementor-posts--skin-cards .elementor-post__excerpt,
html[data-theme="dark"] .elementor-posts--skin-cards .elementor-post__excerpt p {
  color: var(--arrawaj-text-secondary) !important;
}

html[data-theme="dark"] .elementor-post__read-more {
  color: var(--arrawaj-brand-green) !important;
}

/* ==========================================================================
   5. Typography Overrides
   ========================================================================== */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .entry-title,
html[data-theme="dark"] .elementor-heading-title:not([style*="#006633"]):not([style*="#0c8047"]):not([style*="#ffa301"]):not([style*="#F6A500"]):not([style*="#ED7403"]) {
  color: var(--arrawaj-text-headings) !important;
}

/* Dark inline colors */
html[data-theme="dark"] [style*="color: #000"],
html[data-theme="dark"] [style*="color:#000"],
html[data-theme="dark"] [style*="color: #000000"],
html[data-theme="dark"] [style*="color:#000000"],
html[data-theme="dark"] [style*="color: #343434"],
html[data-theme="dark"] [style*="color:#343434"],
html[data-theme="dark"] [style*="color: #353535"],
html[data-theme="dark"] [style*="color:#353535"],
html[data-theme="dark"] [style*="color: #1e293b"],
html[data-theme="dark"] [style*="color:#1e293b"],
html[data-theme="dark"] [style*="color: #222"],
html[data-theme="dark"] [style*="color:#222"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: black"],
html[data-theme="dark"] [style*="color:black"] {
  color: var(--arrawaj-text-headings) !important;
}

/* Body text */
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] .elementor-text-editor,
html[data-theme="dark"] .elementor-widget-text-editor {
  color: var(--arrawaj-text-secondary);
}

/* Meta */
html[data-theme="dark"] .meta,
html[data-theme="dark"] .elementor-post__meta-data,
html[data-theme="dark"] small {
  color: var(--arrawaj-text-muted);
}

/* Links */
html[data-theme="dark"] a:not(.elementor-button):not(.gm-menu-item__link):not(.mobmenu-link):not(.elementor-post__read-more) {
  color: var(--arrawaj-brand-green);
}
html[data-theme="dark"] a:not(.elementor-button):not(.gm-menu-item__link):not(.mobmenu-link):hover {
  color: var(--arrawaj-brand-green-light);
}

/* Breadcrumbs */
html[data-theme="dark"] .bifrost-breadcrumbs,
html[data-theme="dark"] .breadcrumb {
  color: var(--arrawaj-text-muted);
}

/* ==========================================================================
   6. Elementor Widgets & Components
   ========================================================================== */
/* Icon Boxes */
html[data-theme="dark"] .elementor-widget-icon-box .elementor-icon-box-title {
  color: var(--arrawaj-text-headings) !important;
}
html[data-theme="dark"] .elementor-widget-icon-box .elementor-icon-box-description {
  color: var(--arrawaj-text-secondary) !important;
}
html[data-theme="dark"] .elementor-icon-box-icon .elementor-icon {
  fill: var(--arrawaj-brand-green);
  color: var(--arrawaj-brand-green);
}

/* Accordions */
html[data-theme="dark"] .elementor-accordion .elementor-accordion-item {
  border-color: var(--arrawaj-border) !important;
  background-color: var(--arrawaj-surface-card) !important;
}
html[data-theme="dark"] .elementor-accordion .elementor-tab-title {
  background-color: var(--arrawaj-surface-2) !important;
  color: var(--arrawaj-text-headings) !important;
  border-color: var(--arrawaj-border) !important;
}
html[data-theme="dark"] .elementor-accordion .elementor-tab-title.elementor-active {
  background-color: var(--arrawaj-surface-3) !important;
  color: var(--arrawaj-brand-green) !important;
}
html[data-theme="dark"] .elementor-accordion .elementor-tab-content {
  background-color: var(--arrawaj-surface-card) !important;
  color: var(--arrawaj-text-secondary) !important;
  border-color: var(--arrawaj-border) !important;
}

/* Tabs */
html[data-theme="dark"] .elementor-tabs .elementor-tab-title {
  background-color: var(--arrawaj-surface-2) !important;
  color: var(--arrawaj-text-secondary) !important;
  border: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] .elementor-tabs .elementor-tab-title.elementor-active {
  background-color: var(--arrawaj-brand-orange) !important;
  color: #ffffff !important;
  border-color: var(--arrawaj-brand-orange) !important;
}
html[data-theme="dark"] .elementor-tabs .elementor-tab-content {
  background-color: var(--arrawaj-surface-card) !important;
  color: var(--arrawaj-text-primary) !important;
  border: 1px solid var(--arrawaj-border) !important;
}

/* Counters */
html[data-theme="dark"] .elementor-counter .elementor-counter-number-wrapper {
  color: var(--arrawaj-brand-green) !important;
}
html[data-theme="dark"] .elementor-counter .elementor-counter-title {
  color: var(--arrawaj-text-secondary) !important;
}

/* Testimonials */
html[data-theme="dark"] .elementor-testimonial-content {
  background-color: var(--arrawaj-surface-card) !important;
  color: var(--arrawaj-text-secondary) !important;
  border-color: var(--arrawaj-border) !important;
}
html[data-theme="dark"] .elementor-testimonial-name {
  color: var(--arrawaj-text-headings) !important;
}

/* Pagination */
html[data-theme="dark"] .elementor-pagination .page-numbers,
html[data-theme="dark"] .pagination .page-numbers {
  background-color: var(--arrawaj-surface-2) !important;
  color: var(--arrawaj-text-primary) !important;
  border-color: var(--arrawaj-border) !important;
}
html[data-theme="dark"] .elementor-pagination .page-numbers.current,
html[data-theme="dark"] .pagination .page-numbers.current {
  background-color: var(--arrawaj-brand-green) !important;
  color: #ffffff !important;
}

/* Buttons with white backgrounds */
html[data-theme="dark"] .elementor-button[style*="background-color: #fff"],
html[data-theme="dark"] .elementor-button[style*="background-color:#fff"],
html[data-theme="dark"] .elementor-button[style*="background-color: #FFFFFF"],
html[data-theme="dark"] .elementor-button[style*="background-color:#FFFFFF"] {
  background-color: var(--arrawaj-surface-2) !important;
  color: var(--arrawaj-text-primary) !important;
  border: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] .elementor-button[style*="background-color: #fff"]:hover,
html[data-theme="dark"] .elementor-button[style*="background-color:#fff"]:hover,
html[data-theme="dark"] .elementor-button[style*="background-color: #FFFFFF"]:hover,
html[data-theme="dark"] .elementor-button[style*="background-color:#FFFFFF"]:hover {
  background-color: var(--arrawaj-surface-3) !important;
  color: var(--arrawaj-brand-green) !important;
}

/* ==========================================================================
   7. Headers & Groovy Menu
   ========================================================================== */
html[data-theme="dark"] .l-template-header,
html[data-theme="dark"] .l-template-header--sticky,
html[data-theme="dark"] #topmenu,
html[data-theme="dark"] .elementor-29244 {
  background-color: var(--arrawaj-surface-1) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
}

#langswicher .elementor-widget-container {
  display: flex !important;
  align-items: center !important;
}

#langswicher .arrawaj-theme-toggle-header {
  margin-left: 12px;
  flex-shrink: 0;
}

/* Groovy Navbar */
html[data-theme="dark"] .gm-navbar {
  background-color: var(--arrawaj-surface-1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] .gm-navbar .gm-navbar-nav > li > a.gm-menu-item__link {
  color: var(--arrawaj-text-primary) !important;
}
html[data-theme="dark"] .gm-navbar .gm-navbar-nav > li > a.gm-menu-item__link:hover,
html[data-theme="dark"] .gm-navbar .gm-navbar-nav > li.current-menu-item > a.gm-menu-item__link {
  color: var(--arrawaj-brand-green) !important;
}

/* Groovy Dropdown & Mega Menus */
html[data-theme="dark"] .gm-main-menu-wrapper .gm-navbar-nav .gm-dropdown-menu,
html[data-theme="dark"] .gm-main-menu-wrapper .gm-navbar-nav .mega-gm-dropdown .gm-dropdown-menu,
html[data-theme="dark"] .gm-dropdown-menu {
  background-color: var(--arrawaj-surface-2) !important;
  border-top: 3px solid var(--arrawaj-brand-green) !important;
  border-left: 1px solid var(--arrawaj-border) !important;
  border-right: 1px solid var(--arrawaj-border) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
  box-shadow: var(--arrawaj-shadow-elevated) !important;
}
html[data-theme="dark"] .gm-main-menu-wrapper .gm-navbar-nav .gm-dropdown-menu .gm-menu-item__link,
html[data-theme="dark"] .gm-main-menu-wrapper .gm-mega-menu__item__title {
  background-color: transparent !important;
  color: var(--arrawaj-text-primary) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] .gm-main-menu-wrapper .gm-navbar-nav .gm-dropdown-menu .gm-menu-item__link:hover {
  background-color: var(--arrawaj-surface-3) !important;
  color: var(--arrawaj-brand-green) !important;
}

/* ==========================================================================
   8. Mobile Navigation (WP Mobile Menu)
   ========================================================================== */
html[data-theme="dark"] .mob-menu-header-holder.mobmenu {
  background-color: var(--arrawaj-surface-1) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] .mob-menu-icon,
html[data-theme="dark"] .mob-cancel-button {
  color: var(--arrawaj-text-primary) !important;
}
html[data-theme="dark"] .mobmenu-right-panel,
html[data-theme="dark"] .mobmenur-container,
html[data-theme="dark"] .mobmenu-panel-content {
  background-color: var(--arrawaj-surface-1) !important;
  color: var(--arrawaj-text-primary) !important;
}
html[data-theme="dark"] .mobmenu-panel-content a {
  color: var(--arrawaj-text-primary) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] .mobmenu-panel-content a:hover {
  color: var(--arrawaj-brand-green) !important;
}

/* ==========================================================================
   9. Forms (Gravity Forms, Elementor Forms, Search)
   ========================================================================== */
html[data-theme="dark"] .gform_wrapper .gfield_label {
  color: var(--arrawaj-text-headings) !important;
  font-weight: 500;
}
html[data-theme="dark"] .gform_wrapper .gfield_description {
  color: var(--arrawaj-text-muted) !important;
}
html[data-theme="dark"] .gform_wrapper input[type=text],
html[data-theme="dark"] .gform_wrapper input[type=url],
html[data-theme="dark"] .gform_wrapper input[type=email],
html[data-theme="dark"] .gform_wrapper input[type=tel],
html[data-theme="dark"] .gform_wrapper input[type=number],
html[data-theme="dark"] .gform_wrapper input[type=password],
html[data-theme="dark"] .gform_wrapper textarea,
html[data-theme="dark"] .gform_wrapper select,
html[data-theme="dark"] .elementor-field-group input,
html[data-theme="dark"] .elementor-field-group textarea,
html[data-theme="dark"] .elementor-field-group select,
html[data-theme="dark"] input[type=text],
html[data-theme="dark"] input[type=search],
html[data-theme="dark"] input[type=email],
html[data-theme="dark"] input[type=tel],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--arrawaj-input-bg) !important;
  color: var(--arrawaj-input-text) !important;
  border: 1px solid var(--arrawaj-input-border) !important;
  border-radius: 6px;
  box-shadow: none !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--arrawaj-text-muted) !important;
  opacity: 0.8;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--arrawaj-input-focus) !important;
  outline: 2px solid rgba(16, 185, 129, 0.3) !important;
  background-color: var(--arrawaj-surface-2) !important;
}

/* Ajax Search Pro */
html[data-theme="dark"] div.asp_main_container,
html[data-theme="dark"] div.asp_w,
html[data-theme="dark"] div.asp_r {
  background-color: var(--arrawaj-surface-2) !important;
  border-color: var(--arrawaj-border) !important;
}
html[data-theme="dark"] div.asp_r .results {
  background-color: var(--arrawaj-surface-2) !important;
}
html[data-theme="dark"] div.asp_r .results .item {
  background-color: var(--arrawaj-surface-2) !important;
  color: var(--arrawaj-text-primary) !important;
  border-bottom: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] div.asp_r .results .item:hover {
  background-color: var(--arrawaj-surface-3) !important;
}
html[data-theme="dark"] input.orig {
  color: var(--arrawaj-text-primary) !important;
}

/* ==========================================================================
   10. Footers & Copyright
   ========================================================================== */
html[data-theme="dark"] .l-template-footer,
html[data-theme="dark"] #mfooter,
html[data-theme="dark"] .elementor-29602 {
  background-color: var(--arrawaj-surface-1) !important;
  border-top: 1px solid var(--arrawaj-border) !important;
}
html[data-theme="dark"] .copyright {
  background-color: var(--arrawaj-surface-0) !important;
  border-top: 1px solid var(--arrawaj-border-subtle) !important;
  color: var(--arrawaj-text-muted) !important;
}

/* ==========================================================================
   11. Logo & Media Protection
   ========================================================================== */
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] canvas {
  filter: none !important;
}

/* White-backed 30 ANS JPEG logo styled with clean backdrop pill */
html[data-theme="dark"] a img[src*="Capture-30-ans"] {
  background-color: #ffffff;
  padding: 4px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: inline-block;
}

/* ==========================================================================
   12. Theme Toggle UI Component
   ========================================================================== */
.arrawaj-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--arrawaj-toggle-border);
  background-color: var(--arrawaj-toggle-bg);
  color: var(--arrawaj-toggle-icon);
  cursor: pointer;
  padding: 0;
  margin: 0 6px;
  vertical-align: middle;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  outline: none;
  position: relative;
  z-index: 10001;
}

.arrawaj-theme-toggle:hover {
  transform: scale(1.08);
  border-color: var(--arrawaj-brand-green);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.arrawaj-theme-toggle:focus-visible {
  outline: 2px solid var(--arrawaj-brand-green);
  outline-offset: 2px;
}

.arrawaj-theme-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Icon visibility */
html:not([data-theme="dark"]) .arrawaj-theme-toggle .icon-sun {
  display: none !important;
}
html:not([data-theme="dark"]) .arrawaj-theme-toggle .icon-moon {
  display: block !important;
}
html[data-theme="dark"] .arrawaj-theme-toggle .icon-sun {
  display: block !important;
}
html[data-theme="dark"] .arrawaj-theme-toggle .icon-moon {
  display: none !important;
}

/* Mobile header placement */
.mob-menu-header-holder .arrawaj-theme-toggle-mob {
  position: absolute;
  right: 58px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
}

/* Floating quick toggle (guarantees accessibility on every viewport & sticky scroll) */
.arrawaj-theme-toggle-floating {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 99999;
}

/* ==========================================================================
   13. Transitions & Reduced Motion
   ========================================================================== */
html.arrawaj-theme-transitioning,
html.arrawaj-theme-transitioning *,
html.arrawaj-theme-transitioning *:before,
html.arrawaj-theme-transitioning *:after {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.arrawaj-theme-transitioning,
  html.arrawaj-theme-transitioning *,
  .arrawaj-theme-toggle,
  .arrawaj-theme-toggle svg {
    transition: none !important;
    transform: none !important;
  }
}