/* ============================================================
   Emirates Pearl — Desktop Header Balance V10.1
   Fixes brand/nav/actions separation after configurable logo sizing.
   ============================================================ */

@media(min-width:721px){
  .site-header,
  .site-header.scrolled{
    overflow:visible!important;
  }

  .site-header .header-inner,
  html[dir="rtl"] .site-header .header-inner,
  html[dir="ltr"] .site-header .header-inner{
    width:min(calc(100% - 40px),1440px)!important;
    max-width:1440px!important;
    min-height:76px!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    align-items:center!important;
    gap:24px!important;
  }

  html[dir="ltr"] .site-header .header-inner{
    grid-template-columns:minmax(150px,1fr) minmax(430px,auto) minmax(250px,1fr)!important;
    grid-template-areas:"brand nav actions"!important;
  }

  html[dir="rtl"] .site-header .header-inner{
    grid-template-columns:minmax(250px,1fr) minmax(430px,auto) minmax(150px,1fr)!important;
    grid-template-areas:"actions nav brand"!important;
  }

  /* The logo width controls ONLY the logo, never the whole brand cell. */
  .site-header .brand,
  html[dir="rtl"] .site-header .brand,
  html[dir="ltr"] .site-header .brand{
    grid-area:brand!important;
    width:auto!important;
    min-width:0!important;
    max-width:100%!important;
    height:64px!important;
    margin:0!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    overflow:visible!important;
    background:transparent!important;
    border-radius:0!important;
  }

  html[dir="ltr"] .site-header .brand{
    justify-self:start!important;
    justify-content:flex-start!important;
  }

  html[dir="rtl"] .site-header .brand{
    justify-self:end!important;
    justify-content:flex-end!important;
  }

  /* The uploaded logo already contains the company name.
     Hiding duplicate copy prevents it floating away from the logo. */
  .site-header .brand-copy{
    display:none!important;
  }

  .site-header .brand-logo-shell{
    position:relative!important;
    display:block!important;
    flex:0 0 clamp(90px,var(--ep-logo-desktop-width),220px)!important;
    width:clamp(90px,var(--ep-logo-desktop-width),220px)!important;
    max-width:220px!important;
    height:64px!important;
    overflow:hidden!important;
    background:transparent!important;
    border-radius:0!important;
  }

  .site-header .brand-logo{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
  }

  .site-header .nav,
  html[dir="rtl"] .site-header .nav,
  html[dir="ltr"] .site-header .nav{
    grid-area:nav!important;
    justify-self:center!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(20px,2.2vw,38px)!important;
    margin:0!important;
    padding:0!important;
    white-space:nowrap!important;
  }

  .site-header .nav a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  .site-header .header-actions,
  html[dir="rtl"] .site-header .header-actions,
  html[dir="ltr"] .site-header .header-actions{
    grid-area:actions!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:9px!important;
    margin:0!important;
    padding:0!important;
  }

  html[dir="ltr"] .site-header .header-actions{
    justify-self:end!important;
    justify-content:flex-end!important;
  }

  html[dir="rtl"] .site-header .header-actions{
    justify-self:start!important;
    justify-content:flex-start!important;
  }

  /* Hamburger is mobile-only. This also removes the clipped circle
     seen at the far edge of the desktop screenshot. */
  .site-header .menu-btn{
    display:none!important;
  }

  .site-header .lang-btn{
    flex:0 0 auto!important;
    min-width:82px!important;
    height:44px!important;
    white-space:nowrap!important;
  }

  .site-header .quote-btn{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:142px!important;
    max-width:190px!important;
    height:46px!important;
    padding:0 18px!important;
    white-space:nowrap!important;
  }
}

/* Compact laptop widths: preserve three balanced zones without collisions. */
@media(min-width:721px) and (max-width:1180px){
  .site-header .header-inner,
  html[dir="rtl"] .site-header .header-inner,
  html[dir="ltr"] .site-header .header-inner{
    width:calc(100% - 28px)!important;
    gap:14px!important;
  }

  html[dir="ltr"] .site-header .header-inner{
    grid-template-columns:minmax(112px,.8fr) minmax(390px,auto) minmax(210px,.9fr)!important;
  }

  html[dir="rtl"] .site-header .header-inner{
    grid-template-columns:minmax(210px,.9fr) minmax(390px,auto) minmax(112px,.8fr)!important;
  }

  .site-header .brand-logo-shell{
    flex-basis:clamp(90px,var(--ep-logo-desktop-width),150px)!important;
    width:clamp(90px,var(--ep-logo-desktop-width),150px)!important;
  }

  .site-header .nav{
    gap:18px!important;
  }

  .site-header .nav a{
    font-size:13px!important;
  }

  .site-header .quote-btn{
    min-width:124px!important;
    padding-inline:14px!important;
    font-size:12px!important;
  }

  .site-header .lang-btn{
    min-width:74px!important;
  }
}

/* Tablet transition: let the existing mobile header take over sooner,
   rather than squeezing desktop navigation until it breaks. */
@media(min-width:721px) and (max-width:940px){
  .site-header .nav{
    display:none!important;
  }

  html[dir="ltr"] .site-header .header-inner,
  html[dir="rtl"] .site-header .header-inner{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:"brand actions"!important;
  }

  .site-header .menu-btn{
    display:grid!important;
    place-items:center!important;
    flex:0 0 44px!important;
    width:44px!important;
    height:44px!important;
  }
}

@media(max-width:720px){
  /* Logo dashboard control remains safe on mobile. */
  .site-header .brand,
  html[dir="rtl"] .site-header .brand,
  html[dir="ltr"] .site-header .brand{
    flex-basis:clamp(42px,var(--ep-logo-mobile-width),100px)!important;
    width:clamp(42px,var(--ep-logo-mobile-width),100px)!important;
    min-width:clamp(42px,var(--ep-logo-mobile-width),100px)!important;
  }

  .site-header .brand-logo-shell{
    width:100%!important;
    max-width:100%!important;
  }
}