/* =============================================================================
 * Armiena Dual Theme — light / dark
 * Everything is scoped to html.arm-dark, so light mode is byte-for-byte the
 * original design. Generated by the Armiena Dual Theme mu-plugin.
 * ========================================================================== */

html.arm-dark {
	--arm-bg:        #1c212c;   /* page                                  */
	--arm-bg-2:      #181d26;   /* slightly recessed sections (#f2f2f2)  */
	--arm-surface:   #1f2530;
	--arm-surface-2: #262d3a;
	--arm-border:    #2b323d;
	--arm-text:      #e9ecf1;
	--arm-text-dim:  #a6adb8;
	--arm-accent:    #ff9b00;
	--arm-black:     #0b0d11;
	color-scheme: dark;
}

/* While the first dark pass is running the site is hidden, so the visitor
   never sees a white flash. The boot script always removes it. */
html.arm-dark.arm-dm-pending #site { visibility: hidden !important; }

/* -----------------------------------------------------------------------------
 * Surfaces — mirrors the theme's own inline stylesheet
 * -------------------------------------------------------------------------- */
html.arm-dark body,
html.arm-dark .site,
html.arm-dark .mask::after,
html.arm-dark .mask::before {
	background-color: var(--arm-bg) !important;
	color: var(--arm-text);
}
html.arm-dark body { color: var(--arm-text); }

html.arm-dark h1, html.arm-dark h2, html.arm-dark h3,
html.arm-dark h4, html.arm-dark h5 { color: var(--arm-text); }
html.arm-dark h6 { color: var(--arm-accent); }
html.arm-dark p, html.arm-dark li, html.arm-dark dt, html.arm-dark dd,
html.arm-dark td, html.arm-dark th, html.arm-dark label,
html.arm-dark blockquote, html.arm-dark address { color: inherit; }
html.arm-dark strong, html.arm-dark b { color: var(--arm-text); }
html.arm-dark a { color: var(--arm-accent); }
html.arm-dark a:hover { color: #ffc061; }
html.arm-dark hr { border-color: var(--arm-border); }
html.arm-dark blockquote { border-left-color: var(--arm-accent); }
html.arm-dark code, html.arm-dark pre, html.arm-dark kbd {
	background-color: var(--arm-surface-2);
	color: var(--arm-text);
	border-color: var(--arm-border);
}
html.arm-dark mark { background-color: #3a2f16; color: var(--arm-text); }
html.arm-dark ::selection { background: var(--arm-accent); color: #12151b; }

/* Top bar / header / title bar / footer ------------------------------------- */
html.arm-dark .site-topbar {
	background-color: var(--arm-black) !important;
	color: #b6bdc8;
}
html.arm-dark .site-topbar a { color: #b6bdc8; }
html.arm-dark .site-topbar a:hover,
html.arm-dark .site-topbar .menu-top li:hover a { color: #ffffff; }
html.arm-dark .site-header,
html.arm-dark .site-header-inner { background-color: transparent; }
html.arm-dark .site-header-sticky,
html.arm-dark .site-header-sticky .widget.widget_search {
	background-color: rgba(24, 29, 38, .97) !important;
	box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
}
html.arm-dark .site-header-sticky .off-canvas-toggle,
html.arm-dark .site-header-sticky .navigator .menu > li > a,
html.arm-dark .site-header-sticky a { color: var(--arm-text-dim); }
html.arm-dark .site-header-sticky .navigator > .menu > li:hover > a,
html.arm-dark .site-header-sticky .navigator > .menu > li.current-menu-item > a,
html.arm-dark .site-header-sticky .navigator > .menu > li.current_page_item > a,
html.arm-dark .site-header-sticky .navigator > .menu > li.current-menu-ancestor > a,
html.arm-dark .site-header-sticky .navigator > .menu > li.current-menu-parent > a,
html.arm-dark .site-header-sticky .navigator > .menu > li.current-page-ancestor > a { color: var(--arm-accent); }
/* the black logo would disappear on a dark sticky header */
html.arm-dark .logoDark { filter: invert(1) hue-rotate(180deg); }

html.arm-dark .content-header { background-color: var(--arm-black) !important; }

html.arm-dark .site-footer {
	background-color: var(--arm-black) !important;
	color: #b0b7c3;
}
html.arm-dark .site-footer h1, html.arm-dark .site-footer h2,
html.arm-dark .site-footer h3, html.arm-dark .site-footer h4,
html.arm-dark .site-footer h5, html.arm-dark .site-footer h6 { color: #ffffff; }
html.arm-dark .footer-copyright { color: rgba(255, 255, 255, .72); }

/* Off-canvas / sliding menu ------------------------------------------------- */
html.arm-dark .sliding-menu { background-color: #12161e !important; }
html.arm-dark .off-canvas-wrap,
html.arm-dark .off-canvas-left .off-canvas-wrap { background-color: #12161e; }

/* Forms --------------------------------------------------------------------- */
html.arm-dark input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.arm-dark textarea,
html.arm-dark select {
	background-color: var(--arm-surface) !important;
	border-color: var(--arm-border) !important;
	color: var(--arm-text) !important;
}
html.arm-dark input::placeholder,
html.arm-dark textarea::placeholder { color: #8d95a3; opacity: 1; }
html.arm-dark input[type="submit"], html.arm-dark button[type="submit"],
html.arm-dark .button, html.arm-dark .btn { color: #ffffff; }
html.arm-dark select option { background-color: var(--arm-surface); color: var(--arm-text); }

/* Widgets / sidebar / tables / pagination ----------------------------------- */
html.arm-dark .widget,
html.arm-dark .main-sidebar .widget { color: var(--arm-text-dim); }
html.arm-dark .widget > .widget-title,
html.arm-dark .widget-title { color: var(--arm-text); }
html.arm-dark .widget a { color: var(--arm-accent); }
html.arm-dark table, html.arm-dark th, html.arm-dark td { border-color: var(--arm-border); }
html.arm-dark .pagination a, html.arm-dark .pagination span {
	background-color: var(--arm-surface); border-color: var(--arm-border); color: var(--arm-text);
}
html.arm-dark .pagination .current { background-color: var(--arm-accent); color: #12151b; border-color: var(--arm-accent); }
html.arm-dark .breadcrumbs a, html.arm-dark .breadcrumbs { color: var(--arm-text-dim); }

/* Cards, icon boxes, media, overlays --------------------------------------- */
html.arm-dark .vc_tta-panels, html.arm-dark .vc_tta-panel-body,
html.arm-dark .vc_tta-tab > a { background-color: var(--arm-surface); color: var(--arm-text); border-color: var(--arm-border); }
html.arm-dark .vc_tta-tab.vc_active > a,
html.arm-dark .vc_tta-tab > a:hover { background-color: var(--arm-surface-2); color: var(--arm-text); }
html.arm-dark .wpb_content_element .wpb_tabs_nav li a { color: var(--arm-text-dim); }
html.arm-dark .vc_separator .vc_sep_holder .vc_sep_line { border-color: var(--arm-border); }
html.arm-dark .search-form .search-field { background-color: var(--arm-surface); }

/* the white "reveal" highlight behind icon-box titles must not stay white */
html.arm-dark #site .iconbox .box-title { background-image: linear-gradient(180deg, transparent 65%, #2b323d 0); }
html.arm-dark #site .iconbox.accent .box-title { background-image: linear-gradient(180deg, transparent 65%, rgba(255, 155, 0, .38) 0); }

/* Some boxes on this site are painted by pseudo-elements (the runtime mapper
   only sees real elements, so these have to be named by hand):
   - the theme's nav dropdown / mega-menu boxes are white :after plates
   - the dark "shape" sections carry a white band at their bottom edge */
html.arm-dark #site .navigator .menu-primary li .sub-menu:after,
html.arm-dark #site .navigator .menu-primary li .children:after,
html.arm-dark #site .navigator .menu-primary li .sub-menu li .sub-menu:after,
html.arm-dark #site .navigator .menu-primary li .sub-menu li .children:after,
html.arm-dark #site-header .menu-extras > li.shopping-cart .sub-menu:after,
html.arm-dark #site .arm-mega-panel:after {
	background: var(--arm-surface);
	box-shadow: 0 30px 50px rgba(0, 0, 0, .45);
}
html.arm-dark #site .vc_section.shape-1:before,
html.arm-dark #site .vc_row.shape-1:before { background: var(--arm-bg); }

/* The Services mega tab strip and its CTA card are painted with a light
   background image / hover flip; on a dark panel they need dark equivalents. */
html.arm-dark #site .arm-mega-panel .arm-mega-cta {
	background-image: none !important;
	background-color: var(--arm-surface-2) !important;
	box-shadow: none;
	border: 1px solid var(--arm-border);
}
html.arm-dark #site .arm-svm-panel .arm-svm-foot { border: 1px solid var(--arm-border); }

/* Hover flips: the site inverts several controls to a white/#f2f2f2 surface on
   hover, which would leave the lightened text unreadable — keep the flip but
   land on a dark surface. !important is required here: the runtime mapper
   writes the resting colour with !important. */
html.arm-dark #site a.moreBox:hover,
html.arm-dark #site .button.border.light:hover,
html.arm-dark #site .button.border.white:hover,
html.arm-dark #site .vc_carousel-control:hover,
html.arm-dark #site .arm-svm-panel button.arm-svm-tab:hover,
html.arm-dark #site a.arm-svm-foot-btn:hover,
html.arm-dark #site .arm-ind-btn-accent:hover,
html.arm-dark #site .arm-ind-faq-aside .arm-ind-btn:hover,
html.arm-dark #site .arm-compliance-cta .arm-ind-cta-btn:hover {
	background: var(--arm-surface-2) !important;
	color: var(--arm-text) !important;
}
html.arm-dark #site .arm-svm-panel button.arm-svm-tab.is-active,
html.arm-dark #site .arm-svm-panel button.arm-svm-tab.is-active:hover {
	background: var(--arm-accent) !important;
	color: #12151b !important;
}
html.arm-dark #site .arm-mega-panel a.arm-mega-card:hover,
html.arm-dark #site .arm-mega-panel a.arm-mega-card:hover .arm-mega-label,
html.arm-dark #site .arm-mega-panel a.arm-mega-card:hover .arm-mega-ico,
html.arm-dark #site .arm-mega-panel a.arm-mega-cta-btn:hover { color: #12151b !important; }
html.arm-dark #site .arm-mega-panel a.arm-mega-cta-btn {
	background: var(--arm-accent) !important;
	color: #12151b !important;
}

/* gradients that paint white fade-outs over photos */
html.arm-dark #site .vc_section.overlay-1:before,
html.arm-dark #site .vc_row.overlay-1:before { background: linear-gradient(-90deg, var(--arm-bg) 0%, rgba(28, 33, 44, 0) 100%); }
html.arm-dark #site .vc_section.overlay-1:after,
html.arm-dark #site .vc_row.overlay-1:after { background: linear-gradient(0deg, var(--arm-bg) 0%, rgba(28, 33, 44, 0) 100%); }
html.arm-dark #site .imagebox.style2 .box-image { background: var(--arm-surface); }
html.arm-dark #site .imagebox.style2 .box-image:before { background: linear-gradient(-90deg, var(--arm-surface) 0%, rgba(31, 37, 48, 0) 100%); }
html.arm-dark #site .imagebox.style2 .box-image .box-title:after { background: linear-gradient(0deg, var(--arm-surface) 0%, rgba(31, 37, 48, 0) 100%); }
html.arm-dark #site .imagebox.style2 .box-content,
html.arm-dark #site .imagebox.style2 .box-button { background: var(--arm-surface); }
html.arm-dark a.more:after { background: linear-gradient(0deg, var(--arm-bg) 60%, rgba(28, 33, 44, 0) 100%); }

/* Partner / certification logo strips are dark artwork on transparency — give
   them a light plate so they stay readable on a dark page. */
html.arm-dark ul.iconlist .iconlist-item-icon img,
html.arm-dark .certification-logos img,
html.arm-dark img[src*="/uploads/2022/10/Majlis"] {
	background-color: #eef0f4;
	padding: 8px 12px;
	border-radius: 4px;
	box-sizing: content-box;
}

/* Theme's icon fonts are glyphs, not text — never re-colour them by hand */
html.arm-dark .box-icon i, html.arm-dark .iconlist-item-icon i { color: inherit; }

/* =============================================================================
 * The sticky toggle button — fixed to the left edge, vertically centred
 * ========================================================================== */
.arm-dm-toggle {
	position: fixed;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 99990;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 44px;
	padding: 7px 0;
	margin: 0;
	border: 0;
	border-radius: 0 999px 999px 0;
	background: rgba(20, 23, 30, .92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width .22s ease, background-color .22s ease;
}
.arm-dm-toggle:hover { width: 48px; background: #14171e; }
.arm-dm-toggle:focus-visible { outline: 2px solid #ff9b00; outline-offset: 2px; }

.arm-dm-toggle__opt {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #8d95a3;
	transition: background-color .22s ease, color .22s ease;
}
.arm-dm-toggle__opt svg { display: block; }

.arm-dm-toggle[data-mode="light"] .arm-dm-toggle__opt--light,
.arm-dm-toggle[data-mode="dark"]  .arm-dm-toggle__opt--dark {
	background: #ff9b00;
	color: #14171e;
}
.arm-dm-toggle[data-mode="dark"] { background: rgba(28, 33, 44, .95); }

/* screen-reader only label */
.arm-dm-toggle__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 782px) {
	.arm-dm-toggle { width: 32px; padding: 4px 0; opacity: .92; }
	.arm-dm-toggle:hover, .arm-dm-toggle:focus-visible { width: 36px; opacity: 1; }
	.arm-dm-toggle__opt { width: 25px; height: 25px; }
	.arm-dm-toggle__opt svg { width: 15px; height: 15px; }
}

@media print {
	.arm-dm-toggle { display: none !important; }
}