/* DevelopRent - responsive rules for the Elementor header and footer copy. */

#dr-hdr .dr-navpill .elementor-nav-menu--main{background:transparent}
/* Only the mobile nav is hidden on desktop. The class is shared with the
   desktop sub-menu <ul>, so target the <nav> or the dropdown never opens. */
@media(min-width:1025px){#dr-hdr .elementor-menu-toggle,#dr-hdr nav.elementor-nav-menu--dropdown{display:none!important}}
@media(max-width:1300px){#dr-hdr .dr-navpill{padding-left:24px!important;padding-right:24px!important}}
@media(max-width:1100px){#dr-hdr .dr-navpill .elementor-nav-menu--main .elementor-item{font-size:17px}}
@media(max-width:1024px){
  #dr-hdr .dr-navpill{background:transparent!important;padding:0!important;order:3}
  #dr-hdr > .e-con-inner{flex-wrap:nowrap;gap:12px}
  #dr-hdr .elementor-widget-image{order:1;margin-right:auto}
  #dr-hdr .elementor-nav-menu--dropdown{max-width:100vw}
}
@media(max-width:520px){#dr-hdr .elementor-button{padding:11px 16px!important;font-size:13px!important}}

#dr-ftr .dr-frow > .e-con{width:25%}
#dr-ftr .elementor-icon-list-item a{transition:color .25s ease}
@media(max-width:1024px){#dr-ftr .dr-frow > .e-con{width:50%!important}}
@media(max-width:620px){
  #dr-ftr .dr-frow > .e-con{width:100%!important}
  #dr-ftr .dr-frow > .e-con:nth-child(2),
  #dr-ftr .dr-frow > .e-con:nth-child(3){width:50%!important}
}

/* logo sizing - the theme styles .logo img, so pin it explicitly */
#dr-hdr .elementor-widget-image{flex:0 0 auto;width:auto}
#dr-hdr .elementor-widget-image img{width:200px!important;height:auto!important;max-width:none!important;display:block}
@media(max-width:960px){#dr-hdr .elementor-widget-image img{width:150px!important}}
@media(max-width:520px){#dr-hdr .elementor-widget-image img{width:128px!important}}
#dr-ftr .elementor-widget-image img{width:165px!important;height:auto!important;max-width:100%!important;display:block}

/* DR_HDR_MOBILE - below the desktop breakpoint the row is logo + button + burger,
   matching how the theme condenses its own header. */
@media(max-width:960px){
  #dr-hdr > .e-con-inner{flex-wrap:nowrap!important}
  #dr-hdr > .e-con-inner > .e-con{flex:0 0 auto}
}

/* DR_INHERIT - Palace colours p/li/a directly, which beats the colour Elementor
   puts on the widget wrapper. Let them inherit so Elementor's choice wins. */
#dr-hdr .elementor-widget-text-editor p,#dr-ftr .elementor-widget-text-editor p,
#dr-hdr .elementor-widget-text-editor li,#dr-ftr .elementor-widget-text-editor li,
#dr-ftr .elementor-widget-text-editor ul,#dr-ftr .elementor-widget-text-editor ol{color:inherit}
#dr-ftr .elementor-icon-list-item > .elementor-icon-list-text,
#dr-ftr .elementor-icon-list-item > a > .elementor-icon-list-text{color:inherit}
#dr-hdr .elementor-nav-menu--main .elementor-item{color:#FFFFFF}
#dr-hdr .elementor-nav-menu--main .elementor-item:hover,
#dr-hdr .elementor-nav-menu--main .elementor-item:focus,
#dr-hdr .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#EB2027}
#dr-hdr .elementor-nav-menu--main .elementor-item{transition:color .25s ease}
#dr-hdr nav.elementor-nav-menu--dropdown a:hover,
#dr-hdr nav.elementor-nav-menu--dropdown a.elementor-item-active{color:#FFFFFF;background-color:#EB2027}

/* the bar sits over the hero, so nothing behind it may paint a ground */
#dr-hdr,#dr-hdr > .e-con-inner{background-color:transparent!important}
@media(min-width:961px){#dr-hdr .dr-navpill{background-color:rgba(255,255,255,0.08)!important}}
@media(max-width:960px){#dr-hdr .dr-navpill{background-color:transparent!important}}

/* footer text colours, held against the theme */
#dr-ftr .elementor-heading-title{color:#FFFFFF}
#dr-ftr .elementor-icon-list-text{color:#B3B4B9}
#dr-ftr .elementor-icon-list-item:hover .elementor-icon-list-text{color:#EB2027}

/* DR_OVERLAY - the theme's own header floats over the hero, so this one does too. */
.page-wrapper{position:relative}
.elementor-1455{position:absolute;top:0;left:0;width:100%;z-index:999}

/* footer links - Palace colours every <a> red, so pin these explicitly */
#dr-ftr .elementor-icon-list-item a,
#dr-ftr .elementor-icon-list-item a .elementor-icon-list-text{color:#B3B4B9!important}
#dr-ftr .elementor-icon-list-item a:hover,
#dr-ftr .elementor-icon-list-item a:hover .elementor-icon-list-text{color:#EB2027!important}

/* DR_CENTER_NAV - logo and the right-hand block take equal space, so the
   nav pill lands in the true centre of the bar. */
@media(min-width:961px){
  #dr-hdr > .e-con-inner{position:relative}
  #dr-hdr .dr-navpill{position:absolute;left:50%;transform:translateX(-50%);margin:0;width:max-content}
}

/* DR_TOUCH - finger-sized targets on phones (WCAG asks for 44px) */
#dr-hdr .elementor-menu-toggle{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
#dr-hdr .elementor-button{min-height:44px;align-items:center}
@media(max-width:960px){
  #dr-ftr .elementor-icon-list-item{margin-block:2px}
  #dr-ftr .elementor-icon-list-item a{display:flex;align-items:center;min-height:36px}
  #dr-ftr .elementor-social-icon{min-width:44px;min-height:44px}
}
@media(max-width:344px){
  #dr-ftr .dr-frow > .e-con:nth-child(2),
  #dr-ftr .dr-frow > .e-con:nth-child(3){width:100%!important}
}

/* DR_NAVFIX - the centred pill is positioned absolutely, so the CTA container
   next to it (also z-index 999, later in the DOM) painted on top and swallowed
   every click and hover on the menu. Lift the pill above its siblings. */
#dr-hdr .dr-navpill{z-index:1000}

/* DR_NAVSTATE - red type on the dark bar reads poorly and fights the logo.
   Keep the menu white and let the red underline carry hover and active. */
#dr-hdr .elementor-nav-menu--main .elementor-item{color:rgba(255,255,255,.82)}
#dr-hdr .elementor-nav-menu--main .elementor-item:hover,
#dr-hdr .elementor-nav-menu--main .elementor-item:focus,
#dr-hdr .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FFFFFF}

/* DR_NAVGROUND - the bar is transparent over hero sections that are dark on the
   home page and near-white on the inner pages, so white menu text measured 1:1
   against the light ones. Give the pill its own dark ground so the menu stays
   legible over anything behind it (5.9:1 at worst, 11:1 over the dark hero). */
@media (min-width:1025px){
  #dr-hdr .dr-navpill{
    background-color:#181C22!important;
    border:1px solid rgba(250,248,244,.10)!important;
    box-shadow:0 8px 24px rgba(20,22,26,.22);
  }
}

/* DR_NAVHOVER - the theme's own underline sits at opacity 0 and never animates
   in, so the menu gave no hover feedback at all. Drive it here instead: the
   rule grows a red underline from the left on hover, focus and the active item. */
@media (min-width:1025px){
  #dr-hdr .elementor-nav-menu--main .elementor-item:after{
    content:"";
    position:absolute;
    left:0;
    right:auto;
    bottom:0;
    width:0;
    height:2px;
    opacity:1;
    background-color:#EB2027;
    transition:width .28s cubic-bezier(.22,.61,.36,1);
  }
  #dr-hdr .elementor-nav-menu--main .elementor-item:hover:after,
  #dr-hdr .elementor-nav-menu--main .elementor-item:focus-visible:after,
  #dr-hdr .elementor-nav-menu--main .elementor-item.elementor-item-active:after{
    width:100%;
  }
}
@media (prefers-reduced-motion:reduce){
  #dr-hdr .elementor-nav-menu--main .elementor-item:after{transition:none}
}

/* DR_HDRORDER - phone header ran CTA-logo-burger because the button had no
   order and sorted ahead of the logo. Put the logo first, and apply the wrap and
   gap to #dr-hdr itself (the flex container) rather than a .e-con-inner that this
   full-width container never renders. */
@media(max-width:1024px){
  #dr-hdr{flex-wrap:nowrap!important;gap:12px}
  /* the CTA's flex child is its container, not the button widget inside it */
  #dr-hdr > .e-con{order:2}
  #dr-hdr > .dr-navpill{order:3}
}


/* DR_SUBMENU - Services has a child, so the desktop dropdown needs a ground of
   its own. Elementor gives sub-menu links .elementor-sub-item (not
   .elementor-item), which is why an earlier attempt here did nothing. Behave
   exactly like the top-level menu: white type, no fill, a red underline that
   grows in on hover and retracts on the way out. */
@media(min-width:1025px){
  #dr-hdr .elementor-nav-menu--main ul.sub-menu{
    background-color:#181C22;
    border:1px solid rgba(250,248,244,.10);
    border-radius:6px;
    box-shadow:0 14px 34px rgba(20,22,26,.30);
    padding:6px 0;
    min-width:238px;
  }
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a,
  #dr-hdr .elementor-nav-menu--main ul.sub-menu .elementor-sub-item{
    position:relative;
    color:rgba(255,255,255,.90)!important;
    background-color:transparent!important;
    padding:12px 20px;
    font-size:15px;
    white-space:nowrap;
    transition:color .25s ease;
  }
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a:hover,
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a:focus-visible,
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a.elementor-item-active,
  #dr-hdr .elementor-nav-menu--main ul.sub-menu .elementor-sub-item:hover,
  #dr-hdr .elementor-nav-menu--main ul.sub-menu .elementor-sub-item.elementor-item-active{
    color:#FFFFFF!important;
    background-color:transparent!important;
  }
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a:after{
    content:"";
    display:block;
    position:absolute;
    left:20px;
    right:auto;
    bottom:7px;
    width:0;
    height:2px;
    opacity:1;
    background-color:#EB2027;
    transition:width .28s cubic-bezier(.22,.61,.36,1);
  }
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a:hover:after,
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a:focus-visible:after,
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a.elementor-item-active:after{
    width:calc(100% - 40px);
  }
  /* the parent keeps its underline while a child page is open */
  #dr-hdr .elementor-nav-menu--main > li.current-menu-ancestor > .elementor-item{color:#FFFFFF}
  #dr-hdr .elementor-nav-menu--main > li.current-menu-ancestor > .elementor-item:after{width:100%}
}
@media(prefers-reduced-motion:reduce){
  #dr-hdr .elementor-nav-menu--main ul.sub-menu a:after{transition:none}
}

/* DR_FTR_PHONE - the footer ran nearly a full screen tall on phones. Two causes:
   the address panel stretched edge to edge and read as one giant empty button,
   and the social icons kept the desktop single-column stack, so four of them ate
   212px of height. Size the panel to its own text and lay the icons in a row. */
@media(max-width:767px){
  #dr-ftr .elementor-element-4b70068{
    width:max-content!important;
    max-width:100%;
    padding:12px 16px!important;
  }
  #dr-ftr .elementor-social-icons-wrapper{
    grid-auto-flow:column!important;
    grid-template-columns:none!important;
    justify-content:flex-start!important;
  }
  #dr-ftr .elementor-widget-social-icons{width:100%}
}
/* DR_MENU_FLOW - Elementor's phone dropdown sits in the normal flow inside the
   nav pill, so opening the menu grew the header row. The row is centre aligned
   and the bar floats over the hero, so the logo and the CTA slid down into the
   middle of the hero headline. Float the panel under the bar instead: the row
   keeps its height and nothing moves when the menu opens. */
@media(max-width:1024px){
  /* the in-flow panel used to add 30px to the pill; hold the bar at its old
     height so the closed header looks exactly as it did before. */
  #dr-hdr .dr-navpill{position:relative;min-height:74px}
  #dr-hdr nav.elementor-nav-menu--dropdown{
    position:absolute!important;
    top:calc(100% + 6px);
    right:0;
    left:auto;
    width:260px;
    max-width:calc(100vw - 30px);
    z-index:1002;
  }
}