/*
Theme Name: Emarat Child
Theme URI: https://expert-themes.com/
Author: Expert Themes
Author URI: https://themeforest.net/user/expert-themes
Template: emarat
Description: Smart, Powerful and Unlimited Customizable WordPress Theme.
Version: 1.0
License: GNU General Public License
License URI: license.txt
Text Domain: emarat-child
Tags: responsive, retina, rtl-language-support, construction, arhitecture, building , engineering custom-colors, live-editor
*/
/* ==========================================================================
   Brouj Doha — service detail page
   The faqs widget exposes a single Title Color applied to both the collapsed
   and active accordion states, so one value can never be readable in both.
   These rules set each state explicitly. Do not set Title Color on the widget.
   ========================================================================== */

:root {
    --brouj-bronze:       #5F452C;
    --brouj-bronze-light: #8C7150;
    --brouj-sand:         #C6AE80;
    --brouj-cream:        #F1E9D7;
    --brouj-charcoal:     #1C1A17;
}

/* Collapsed: charcoal on the light grey pill — 14.4:1 */
.accordion-box .block .acc-btn {
    color: var(--brouj-charcoal) !important;
    background-color: #F4F1EA;
    transition: background-color .25s ease, color .25s ease;
}

.accordion-box .block .acc-btn:hover {
    background-color: var(--brouj-cream);
}

/* Active: white on bronze — 8.85:1 */
.accordion-box .block .acc-btn.active,
.accordion-box .block .acc-btn.active .te-title {
    color: #FFFFFF !important;
    background-color: var(--brouj-bronze);
    border-color: var(--brouj-bronze);
}

.accordion-box .block .acc-btn .icon-outer,
.accordion-box .block .acc-btn.active .icon-outer {
    color: inherit;
}

/* Answer body */
.accordion-box .block .acc-content,
.accordion-box .block .content .text {
    color: var(--brouj-charcoal);
}

/* --- spacing ------------------------------------------------------------ */

/* Breathing room between stacked accordion items */
.accordion-box .block {
    margin-bottom: 14px;
}
.accordion-box .block:last-child {
    margin-bottom: 0;
}
.accordion-box .block .acc-content {
    padding: 18px 28px 26px;
}

/* Separate the tab block from the accordion that follows it */
.service-single .service-tabs,
.service-tabs.tabs-box {
    margin-bottom: 42px;
}
.service-tabs .tabs-content .tab {
    padding: 26px 28px;
}
.service-tabs .tab-btns .tab-btn {
    margin-right: 6px;
}

/* Consistent rhythm between the stacked blocks in the content column */
/* Scoped to the page document only. Without [data-elementor-type="wp-page"]
   this also hit the header and footer templates, which are wp-post documents,
   and pushed the service-page header out of alignment. */
.single-service [data-elementor-type="wp-page"] .elementor-widget-faqs,
.single-service [data-elementor-type="wp-page"] .elementor-widget-heading,
.single-service [data-elementor-type="wp-page"] .elementor-widget-icon-list,
.single-service [data-elementor-type="wp-page"] .elementor-widget-image {
    margin-bottom: 26px;
}

/* Tab and accordion body copy: lists were running flush against the text */
.service-tabs .tabs-content ul,
.accordion-box .acc-content ul {
    margin: 12px 0 0;
    padding-left: 20px;
}
.service-tabs .tabs-content li,
.accordion-box .acc-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}
.service-tabs .tabs-content p + p,
.accordion-box .acc-content p + p {
    margin-top: 12px;
}

/* Tables inside service tabs and FAQ answers */
.service-tabs .tabs-content .bd-table,
.accordion-box .acc-content .bd-table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0 6px;
    font-size: 15px;
}
.service-tabs .tabs-content .bd-table th,
.accordion-box .acc-content .bd-table th {
    background-color: var(--brouj-bronze);
    color: #FFFFFF;
    text-align: left;
    font-weight: 600;
    padding: 10px 14px;
    border: 1px solid var(--brouj-bronze);
}
.service-tabs .tabs-content .bd-table td,
.accordion-box .acc-content .bd-table td {
    padding: 10px 14px;
    border: 1px solid #E3DCCD;
    color: var(--brouj-charcoal);
    vertical-align: top;
}
.service-tabs .tabs-content .bd-table tbody tr:nth-child(even),
.accordion-box .acc-content .bd-table tbody tr:nth-child(even) {
    background-color: #FAF7F0;
}

/* Sub-headings used where several sections share one tab */
.service-tabs .tabs-content h4 {
    color: var(--brouj-bronze);
    font-size: 19px;
    font-weight: 700;
    margin: 26px 0 10px;
}
.service-tabs .tabs-content h4:first-child {
    margin-top: 0;
}

/* Keep wide tables usable on phones */
@media (max-width: 767px) {
    .service-tabs .tabs-content,
    .accordion-box .acc-content {
        overflow-x: auto;
    }
    .service-tabs .tabs-content .bd-table {
        min-width: 460px;
    }
}

/* ---- language switcher -------------------------------------------------- */
.bd-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.bd-lang-switcher .bd-lang-link {
    color: inherit;
    opacity: .75;
    transition: opacity .2s ease, color .2s ease;
    text-decoration: none;
}
.bd-lang-switcher .bd-lang-link:hover { opacity: 1; }
.bd-lang-switcher .bd-lang-link.is-current {
    opacity: 1;
    color: var(--brouj-sand);
}
.bd-lang-switcher .bd-lang-sep { opacity: .4; }

/* Top bar sits on the bronze strip */
.bd-topbar-lang { margin-left: 22px; }
.bd-topbar-lang .bd-lang-switcher { font-size: 15px; }

/* Sticky bar: occupies the slot the search icon used to hold */
.bd-sticky-lang { display: flex; align-items: center; margin-left: 14px; }
.bd-sticky-lang .bd-lang-switcher { font-size: 15px; }

/* Elementor wraps shortcodes in a block-level div; keep them inline in the bar */
.bd-topbar-lang.elementor-widget-shortcode,
.bd-sticky-lang.elementor-widget-shortcode { width: auto; }
.bd-topbar-lang .elementor-shortcode,
.bd-sticky-lang .elementor-shortcode { display: inline-flex; align-items: center; }

/* Arabic label needs a touch more size to read at the same weight */
.bd-lang-switcher .bd-lang-link[lang="ar"] { font-size: 1.05em; }

/* ---- language switcher: explicit colours ------------------------------- */
/* The top bar sits on charcoal, so inheriting the surrounding colour made the
   non-active language almost invisible. Set both states explicitly. */
.bd-topbar-lang .bd-lang-switcher,
.bd-sticky-lang .bd-lang-switcher {
    gap: 8px;
}
.bd-topbar-lang .bd-lang-link {
    color: #FFFFFF;
    opacity: .85;
    font-size: 15px;
    letter-spacing: .2px;
}
.bd-topbar-lang .bd-lang-link:hover { opacity: 1; color: var(--brouj-sand); }
.bd-topbar-lang .bd-lang-link.is-current {
    color: var(--brouj-sand);
    opacity: 1;
    font-weight: 700;
}
.bd-topbar-lang .bd-lang-sep {
    color: #FFFFFF;
    opacity: .45;
    margin: 0 2px;
}

/* Sticky bar sits on white */
.bd-sticky-lang .bd-lang-link {
    color: var(--brouj-charcoal);
    opacity: .85;
    font-size: 15px;
}
.bd-sticky-lang .bd-lang-link:hover { opacity: 1; color: var(--brouj-bronze); }
.bd-sticky-lang .bd-lang-link.is-current {
    color: var(--brouj-bronze);
    opacity: 1;
    font-weight: 700;
}
.bd-sticky-lang .bd-lang-sep { color: var(--brouj-charcoal); opacity: .35; margin: 0 2px; }

/* Arabic reads small next to Latin caps at the same px size */
.bd-lang-switcher .bd-lang-link[lang="ar"] { font-size: 1.12em; }

/* In RTL the switcher should sit away from the edge on the correct side */
.rtl .bd-topbar-lang { margin-left: 0; margin-right: 22px; }
.rtl .bd-sticky-lang { margin-left: 0; margin-right: 14px; }

/* Footer contact lines wrap better with the address on two lines */
.footer-widget .elementor-icon-list-text,
footer .elementor-icon-list-text { line-height: 1.7; }

/* ---- footer contact / link lists ---------------------------------------
   Linked rows (mailto:, tel:) wrap their content in an <a> that stretches to
   the column width, which pushes the icon away from its text. Keep each row as
   a tight flex pair and let direction decide which side the icon sits on.    */
.main-footer .elementor-icon-list-item,
.main-footer .elementor-icon-list-item > a,
footer .elementor-icon-list-item,
footer .elementor-icon-list-item > a {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    width: auto;
}
.main-footer .elementor-icon-list-text,
footer .elementor-icon-list-text {
    flex: 0 1 auto;
    line-height: 1.75;
}
.main-footer .elementor-icon-list-icon,
footer .elementor-icon-list-icon {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* RTL: the icon is the first child, so it should read on the right */
.rtl .main-footer .elementor-icon-list-items,
.rtl footer .elementor-icon-list-items { text-align: right; }

.rtl .main-footer .elementor-icon-list-item,
.rtl .main-footer .elementor-icon-list-item > a,
.rtl footer .elementor-icon-list-item,
.rtl footer .elementor-icon-list-item > a {
    direction: rtl;
    justify-content: flex-start;
    text-align: right;
}

/* Latin strings inside Arabic footer rows must not get reordered */
.rtl footer a[href^="tel:"],
.rtl footer a[href^="mailto:"],
.rtl .main-footer a[href^="tel:"],
.rtl .main-footer a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: embed;
}

/* Elementor's "link full width" option stretches the row anchor, so a long
   value like an email address wraps under its icon. Override it in the footer
   with matching specificity and keep each row on one line. */
.elementor-widget-icon-list.elementor-list-item-link-full_width .elementor-icon-list-item > a,
footer .elementor-widget-icon-list.elementor-list-item-link-full_width .elementor-icon-list-item > a {
    width: auto;
}
footer .elementor-icon-list-items > .elementor-icon-list-item,
.main-footer .elementor-icon-list-items > .elementor-icon-list-item {
    flex-wrap: nowrap;
}
footer .elementor-icon-list-item > a,
.main-footer .elementor-icon-list-item > a {
    flex-wrap: nowrap;
    gap: 10px;
}
/* Right-align the whole row in RTL without detaching the icon */
.rtl footer .elementor-widget-icon-list .elementor-icon-list-items,
.rtl .main-footer .elementor-widget-icon-list .elementor-icon-list-items {
    align-items: flex-end;
}
.rtl footer .elementor-icon-list-item,
.rtl .main-footer .elementor-icon-list-item {
    align-self: flex-end;
}

/* ---- Arabic header: full-bleed dark top bar ----------------------------
   The theme extends the dark strip past the container with a -910px offset
   anchored to the "end" side. That geometry assumes the LTR column order, so
   once the columns mirror the strip lands inside the container instead of
   running to the viewport edge. Anchor it to the viewport instead.          */
.rtl .bd-topbar-bleed {
    left: -100vw !important;
    right: auto !important;
    width: 100vw !important;
    max-width: none !important;
}

/* Welcome line and opening hours must stay on one row in the top bar */
.bd-topbar-list .elementor-icon-list-items.elementor-inline-items {
    flex-wrap: nowrap;
}
.bd-topbar-list .elementor-icon-list-item,
.bd-topbar-list .elementor-icon-list-text {
    white-space: nowrap;
}

/* ---- Arabic header: flat, no angled shapes -----------------------------
   The decorative bronze/charcoal shapes were built from gradients and large
   negative offsets that assume the LTR column order. They are removed on the
   Arabic header; these rules give the flat equivalent instead.              */

/* Charcoal top bar, full viewport width */
.rtl .bd-topbar-flat {
    position: relative;
    background-color: var(--brouj-charcoal);
}
.rtl .bd-topbar-flat::before,
.rtl .bd-topbar-flat::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-color: var(--brouj-charcoal);
    z-index: -1;
}
.rtl .bd-topbar-flat::before { left: -100vw; }
.rtl .bd-topbar-flat::after  { right: -100vw; }

/* White navigation row underneath */
.rtl .exp-header-main,
.rtl #exp-header-main {
    background-color: #FFFFFF;
}

/* Keep the bar comfortable now that nothing overlaps it */
.rtl .bd-topbar-flat {
    padding-top: 10px;
    padding-bottom: 10px;
}
.rtl .bd-topbar-list .elementor-icon-list-items.elementor-inline-items {
    justify-content: flex-start;
}

/* The obsolete bleed override no longer applies */
.rtl .bd-topbar-bleed { left: auto !important; width: auto !important; }

/* ---- Arabic flat top bar (applied from here, not Elementor) -------------
   Elementor does not output _css_classes on containers and only emitted a
   motion-effects background rule, so the flat bar is styled structurally:
   the container that directly holds the top-bar list.                      */
.rtl .e-con:has(> .bd-topbar-list),
.rtl .elementor-element-90435c5 {
    background-color: var(--brouj-charcoal) !important;
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
}
.rtl .e-con:has(> .bd-topbar-list)::before,
.rtl .e-con:has(> .bd-topbar-list)::after,
.rtl .elementor-element-90435c5::before,
.rtl .elementor-element-90435c5::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-color: var(--brouj-charcoal);
    z-index: 0;
}
.rtl .e-con:has(> .bd-topbar-list)::before,
.rtl .elementor-element-90435c5::before { left: -100vw; }
.rtl .e-con:has(> .bd-topbar-list)::after,
.rtl .elementor-element-90435c5::after  { right: -100vw; }

/* keep the bar contents above the bleed layers */
.rtl .e-con:has(> .bd-topbar-list) > *,
.rtl .elementor-element-90435c5 > * { position: relative; z-index: 1; }

/* no leftover motion-effects gradient on the header wrapper */
.rtl .elementor-element-690aff8 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-image: none !important;
}

/* ------------------------------------------------------------------
   Promoted H1
   The theme's heading widget hardcodes <h2>; bd-page-h1 rewrites the
   first one on a page to <h1> for SEO. All of the theme's section-title
   styling is keyed to `.sec-title h2`, so mirror it onto h1 or the
   promoted heading drops to the browser default size.
   ------------------------------------------------------------------ */
.sec-title h1 {
	position: relative;
	color: #222222;
	font-size: 48px;
	font-weight: 700;
	line-height: 1.4em;
	margin: 0;
}

@media only screen and (max-width: 767px) {
	.sec-title h1 { font-size: 24px; }
}

/* About section: the demo video box was replaced with a plain image,
   so carry over the presentation the video box used to provide. */
.bd-about-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

/* Blog index heading injected by broujdoha_blog_index_heading() */
.bd-index-title { margin-bottom: 40px; }
.bd-index-title .te-text { margin-top: 16px; max-width: 760px; }

/* ------------------------------------------------------------------
   Request a Quote form
   The theme's form styling assumes placeholder-only text inputs, so the
   selects, date field and upload control on this form need labels and
   matching control styling.
   ------------------------------------------------------------------ */
.bd-field-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brouj-charcoal, #1C1A17);
}

.bd-quote-form select,
.bd-quote-form input[type="date"] {
	width: 100%;
	height: 56px;
	padding: 0 18px;
	border: 1px solid #E3DCCD;
	border-radius: 6px;
	background-color: #FFFFFF;
	color: var(--brouj-charcoal, #1C1A17);
	font-size: 15px;
	appearance: none;
	-webkit-appearance: none;
}

.bd-quote-form select:focus,
.bd-quote-form input[type="date"]:focus,
.bd-quote-form input[type="file"]:focus {
	outline: 2px solid var(--brouj-bronze, #5F452C);
	outline-offset: 1px;
	border-color: var(--brouj-bronze, #5F452C);
}

/* native arrow is hidden by appearance:none, so draw one */
.bd-quote-form select {
	background-image: linear-gradient(45deg, transparent 50%, #5F452C 50%),
	                  linear-gradient(135deg, #5F452C 50%, transparent 50%);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	background-position: right 20px center, right 14px center;
	padding-right: 44px;
}
.rtl .bd-quote-form select {
	background-position: left 20px center, left 14px center;
	padding-right: 18px;
	padding-left: 44px;
}

.bd-quote-form input[type="file"] {
	width: 100%;
	padding: 14px 18px;
	border: 1px dashed #C6AE80;
	border-radius: 6px;
	background-color: #FFFFFF;
	font-size: 14px;
}

.bd-file-hint {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	color: #777;
}

.bd-quote-form .wpcf7-not-valid-tip { font-size: 13px; margin-top: 6px; }
.bd-quote-form .wpcf7-spinner { display: block; margin: 12px auto 0; }

/* "What happens next" steps */
.bd-step .elementor-icon-box-title { margin-bottom: 10px; }
.bd-step .elementor-icon-box-description { line-height: 1.7; }

/* Quote page bullet lists sit tighter than the theme default */
.bd-quote-list .elementor-icon-list-item { align-items: flex-start; }
.bd-quote-list .elementor-icon-list-icon { margin-top: 6px; }

/* Thank You page */
.bd-thanks-tick { margin-bottom: 26px; }
.bd-thanks-tick .elementor-icon {
	background-color: var(--brouj-bronze, #5F452C);
	color: #FFFFFF;
}

/* Credentials certificate gallery */
.bd-cert img {
	border: 1px solid #E8E0CE;
	border-radius: 6px;
	background: #FFFFFF;
	transition: box-shadow .25s ease, transform .25s ease;
}
.bd-cert:hover img {
	box-shadow: 0 10px 30px rgba(28, 26, 23, .14);
	transform: translateY(-3px);
}
.bd-cert .widget-image-caption {
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	text-align: center;
}
/* credential cards keep an even height in the 2x2 grid */
.bd-step .elementor-icon-box-wrapper { margin-bottom: 4px; }