/*
Theme Name: Realtor Maha Labib - Astra Child
Template: astra
Author: Echo & Scale LLC
Author URI: https://echoandscale.com
Description: Astra child theme for Realtor Maha Labib. Layout, colour and type are controlled from Elementor. This stylesheet carries only the design tokens, the Astra resets, and the few treatments Elementor cannot express.
Version: 2.0.0
Requires PHP: 8.0
Text Domain: maha-labib-astra
*/

:root{
  --bg:#0F0F10; --bg-2:#141414; --bg-3:#1A1A1A;
  --gold:#D4B07A; --gold-soft:#D5B17B; --gold-deep:#B08F5E;
  --cream:#F2EEE7; --muted:#A29B90; --muted-2:#7C766D;
  --line:rgba(212,176,122,.20); --line-soft:rgba(242,238,231,.09);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,'Segoe UI',sans-serif;
}

/* ---- base ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--gold);color:#141414;padding:12px 20px;font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}

/* ---- Astra resets: this design supplies its own shell ---- */
.ast-container,.ast-container-fluid{max-width:none;padding:0}
#content .ast-container{display:block;margin:0;padding:0;max-width:none}
.site-content,#primary{padding:0;margin:0}
.entry-content{margin:0}
.entry-content>*{margin-block:0}
#page,.site,body.ast-separate-container{background:var(--bg)}
.ast-separate-container .ast-article-single{padding:0;background:transparent;border:0}
.e-con>.e-con-inner{padding:0;max-width:none}
/* Sellers page (ID 13) only: restore Elementor's native boxed-container behaviour.
   The rule above (0,2,0) outranks Elementor's own .e-con>.e-con-inner (0,2,0, earlier
   in source order) and was killing --content-width and vertical padding site-wide.
   Scoped with body.page-id-13 (0,3,0) so no other page is affected. */
body.page-id-13 .e-con>.e-con-inner{max-width:var(--content-width);padding-block-start:var(--padding-block-start);padding-block-end:var(--padding-block-end);padding-inline-start:0;padding-inline-end:0}
body.page-id-13 .e-con.ml-sec,body.page-id-13 .e-con.hero-in{padding-top:0;padding-bottom:0}

/* ---- treatments Elementor has no control for ---- */

/* hero glow: a radial wash Elementor's background control cannot describe */
.e-con.hero,.e-con.subhero{position:relative;overflow:hidden}
.e-con.hero::before,.e-con.subhero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 78% 12%,rgba(212,176,122,.13),transparent 58%)}
.e-con.hero>*,.e-con.subhero>*{position:relative;z-index:1}

/* skyline sits at the foot of the hero and closing CTA and fades upward */
.e-con.hero,.e-con.final{background-position:bottom center;background-repeat:no-repeat;background-size:100% auto}

/* the RTL Arabic panel */
.bil-ar,.bil-ar .elementor-heading-title{direction:rtl}

/* accordion hairline: Elementor's border control draws all four sides */
.elementor-accordion .elementor-accordion-item{border:0;border-bottom:1px solid var(--line-soft)}
.elementor-accordion .elementor-tab-title,.elementor-accordion .elementor-tab-content{background:transparent;border:0}

/* chips are pills; Elementor radius on a heading wrapper needs the box */
.elementor-element.chip{border:1px solid var(--line);border-radius:999px;padding:7px 16px}

/* WPForms fields are rendered by the form plugin, outside Elementor's controls */
.wpforms-container .wpforms-field-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400}
.wpforms-container input[type=text],.wpforms-container input[type=email],.wpforms-container input[type=tel],.wpforms-container select,.wpforms-container textarea{padding:14px 15px;background:rgba(242,238,231,.05);border:1px solid var(--line-soft);color:var(--cream);font-family:var(--sans);font-size:15px;border-radius:2px;width:100%}
.wpforms-container input:focus,.wpforms-container select:focus,.wpforms-container textarea:focus{outline:none;border-color:var(--gold)}
.wpforms-container button[type=submit]{background:var(--gold);color:#141414;border:0;border-radius:2px;padding:15px 30px;font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;cursor:pointer}
.wpforms-container button[type=submit]:hover{background:var(--cream)}

/* Xpro header and footer */
.ml-xpro-header{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px)}
.ml-brand .xpro-heading-title,.ml-brand .xpro-heading-title a{color:var(--cream);line-height:1}
.ml-brand .xpro-heading-center-title{color:var(--gold)}
.ml-xpro-footer{color:var(--cream)}
.ml-xpro-footer .legal{font-size:11.5px;line-height:1.8;opacity:.72;max-width:62ch}
.ml-footer-info .xpro-infolist-title{font-size:14px;color:var(--cream);font-family:var(--sans);font-weight:400}
.ml-footer-info .xpro-infolist-desc{font-size:12.5px;color:var(--muted-2)}
.ml-social .xpro-social-icon-list a{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s,transform .3s}
.ml-social .xpro-social-icon-list a:hover{transform:translateY(-3px)}

/* card hover lift */
.e-con.fcard,.e-con.card,.e-con.cmeth,.e-con.ivc{transition:border-color .25s,transform .25s}
.e-con.fcard:hover,.e-con.card:hover,.e-con.cmeth:hover,.e-con.ivc:hover{border-color:var(--gold);transform:translateY(-3px)}

@media(prefers-reduced-motion:reduce){.e-con.fcard,.e-con.card,.e-con.cmeth,.e-con.ivc{transition:none}}
@media(max-width:1024px){.e-con.hero-in{padding-top:52px;padding-bottom:110px}.e-con.ml-sec{padding-top:70px;padding-bottom:70px}}


/* ---- EDITOR CANVAS ----
   Elementor's editor iframe does not always inherit the theme's body ground,
   which made cream text render on white and read as blank. */
body.elementor-editor-active,
body.elementor-editor-preview,
body.elementor-html body,
.elementor-edit-area,
.elementor-edit-area-active{background-color:var(--bg)!important;color:var(--cream)}
body.elementor-editor-active .elementor-heading-title,
body.elementor-editor-active .elementor-widget-text-editor{color:inherit}
body.elementor-editor-active .e-con-inner,
body.elementor-editor-active .e-con{min-height:1px}