/* QARAR Enterprise — Emblem + bilingual institutional brand lockup
 * Visual-size balancing:
 * Arabic remains the structural reference.
 * English is optically adjusted to match perceived size while preserving
 * the same institutional hierarchy and responsive behavior.
 */

/* =========================================================
   Header identity layout
   ========================================================= */

.qarar-v7-header .header-identity-row,
body.home .qarar-v7-header .header-identity-row,
body.front-page .qarar-v7-header .header-identity-row{
  gap:18px!important;
}


/* =========================================================
   Logo container
   ========================================================= */

.qarar-v7-header .brand-lockup.qarar-emblem-lockup,
body.home .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
body.front-page .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
.qarar-v7-header.is-scrolled .brand-lockup.qarar-emblem-lockup{
  width:92px!important;
  min-width:92px!important;
  max-width:92px!important;
  height:78px!important;
  flex:0 0 92px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
  overflow:visible!important;
}


/* =========================================================
   Logo image
   ========================================================= */

.qarar-v7-header .qarar-header-emblem{
  display:block!important;
  width:76px!important;
  height:76px!important;
  max-width:76px!important;
  max-height:76px!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:drop-shadow(0 4px 10px rgba(55,0,10,.18))!important;
  transition:
    width .2s ease,
    height .2s ease,
    filter .2s ease!important;
}


/* =========================================================
   Bilingual institution name
   ========================================================= */

.qarar-v7-header .qarar-header-brand-copy{
  min-width:350px;
  max-width:390px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:3px;
  padding-inline-start:18px;
  border-inline-start:1px solid rgba(255,255,255,.34);
  line-height:1;
}

.qarar-v7-header .qarar-header-brand-ar,
.qarar-v7-header .qarar-header-brand-en{
  display:block;
  font-family:'Tajawal',Arial,sans-serif;
  font-weight:800!important;
  letter-spacing:0!important;
  white-space:nowrap;
  margin:0!important;
  padding:0!important;
}

/* Arabic is the reference size. */
.qarar-v7-header .qarar-header-brand-ar{
  font-size:18px!important;
  line-height:1.22!important;
  color:#fff;
}

/* Optical correction for Latin glyphs in Tajawal. */
.qarar-v7-header .qarar-header-brand-en{
  font-size:15.5px!important;
  font-weight:700!important;
  line-height:1.2!important;
  color:rgba(255,255,255,.92);
  transform:translateY(-1px);
  transform-origin:left center;
}


/* =========================================================
   Scrolled header
   ========================================================= */

.qarar-v7-header.is-scrolled .brand-lockup.qarar-emblem-lockup{
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  flex-basis:82px!important;
  height:70px!important;
}

.qarar-v7-header.is-scrolled .qarar-header-emblem{
  width:66px!important;
  height:66px!important;
  max-width:66px!important;
  max-height:66px!important;
}

.qarar-v7-header.is-scrolled .qarar-header-brand-ar{
  font-size:16px!important;
}

.qarar-v7-header.is-scrolled .qarar-header-brand-en{
  font-size:14px!important;
}


/* =========================================================
   Header actions
   ========================================================= */

.qarar-v7-header .header-identity-actions{
  margin-inline-start:auto!important;
}


/* =========================================================
   Medium desktop
   ========================================================= */

@media(max-width:1260px) and (min-width:1101px){

  .qarar-v7-header .qarar-header-brand-copy{
    min-width:265px;
    max-width:300px;
    padding-inline-start:14px;
  }

  .qarar-v7-header .qarar-header-brand-ar{
    font-size:16px!important;
  }

  .qarar-v7-header .qarar-header-brand-en{
    font-size:14px!important;
  }

  .qarar-v7-header .qarar-header-message{
    display:none!important;
  }

}


/* =========================================================
   Tablet
   ========================================================= */

@media(max-width:1100px){

  .qarar-v7-header .header-identity-row,
  body.home .qarar-v7-header .header-identity-row,
  body.front-page .qarar-v7-header .header-identity-row{
    gap:10px!important;
  }

  .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  body.home .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  body.front-page .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  .qarar-v7-header.is-scrolled .brand-lockup.qarar-emblem-lockup{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
    height:70px!important;
    flex:0 0 68px!important;
  }

  .qarar-v7-header .qarar-header-emblem,
  .qarar-v7-header.is-scrolled .qarar-header-emblem{
    width:60px!important;
    height:60px!important;
    max-width:60px!important;
    max-height:60px!important;
  }

  .qarar-v7-header .qarar-header-brand-copy{
    min-width:0;
    max-width:310px;
    padding-inline-start:11px;
    gap:2px;
  }

  .qarar-v7-header .qarar-header-brand-ar{
    font-size:14px!important;
    line-height:1.22!important;
    white-space:normal;
  }

  .qarar-v7-header .qarar-header-brand-en{
    font-size:12.5px!important;
    line-height:1.2!important;
    white-space:normal;
    transform:none;
  }

  .qarar-v7-header .qarar-header-message,
  .qarar-v7-header .jerusalem-clock{
    display:none!important;
  }

}


/* =========================================================
   Mobile
   ========================================================= */

@media(max-width:620px){

  .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  body.home .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  body.front-page .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  .qarar-v7-header.is-scrolled .brand-lockup.qarar-emblem-lockup{
    width:58px!important;
    min-width:58px!important;
    max-width:58px!important;
    flex-basis:58px!important;
  }

  .qarar-v7-header .qarar-header-emblem,
  .qarar-v7-header.is-scrolled .qarar-header-emblem{
    width:52px!important;
    height:52px!important;
    max-width:52px!important;
    max-height:52px!important;
  }

  .qarar-v7-header .qarar-header-brand-copy{
    max-width:215px;
    border-inline-start-color:rgba(255,255,255,.24);
    padding-inline-start:9px;
  }

  .qarar-v7-header .qarar-header-brand-ar{
    font-size:12px!important;
    line-height:1.2!important;
  }

  .qarar-v7-header .qarar-header-brand-en{
    font-size:10.75px!important;
    line-height:1.2!important;
  }

}


/* =========================================================
   Small mobile
   ========================================================= */

@media(max-width:430px){

  .qarar-v7-header .qarar-header-brand-copy{
    max-width:170px;
  }

  .qarar-v7-header .qarar-header-brand-ar{
    font-size:11px!important;
  }

  .qarar-v7-header .qarar-header-brand-en{
    font-size:10px!important;
  }

}


/* =========================================================
   v26.3.73 — exact optical bilingual width balance
   JS measures both rendered lines and adjusts only the English
   font size so both names occupy the same visual width.
   ========================================================= */
.qarar-v7-header .qarar-header-brand-copy{
  width:390px!important;
  min-width:390px!important;
  max-width:390px!important;
}
.qarar-v7-header .qarar-header-brand-ar,
.qarar-v7-header .qarar-header-brand-en{
  width:max-content!important;
  max-width:100%!important;
}
.qarar-v7-header .qarar-header-brand-en{
  font-size:var(--qarar-brand-en-size,15.5px)!important;
}
@media(max-width:1260px) and (min-width:1101px){
  .qarar-v7-header .qarar-header-brand-copy{width:300px!important;min-width:300px!important;max-width:300px!important}
}
@media(max-width:1100px){
  .qarar-v7-header .qarar-header-brand-copy{width:auto!important;min-width:0!important;max-width:310px!important}
  .qarar-v7-header .qarar-header-brand-ar,.qarar-v7-header .qarar-header-brand-en{width:auto!important;max-width:100%!important}
}
@media(max-width:620px){
  .qarar-v7-header .qarar-header-brand-copy{max-width:215px!important}
}
@media(max-width:430px){
  .qarar-v7-header .qarar-header-brand-copy{max-width:170px!important}
}

/* =========================================================
   QARAR v26.3.90 — Stable sticky-header geometry
   Prevent layout feedback/flicker on single story pages.
   The scrolled state may change shadow/progress only; it must
   not change header, identity-row, emblem or brand-copy size.
   ========================================================= */
@media(min-width:1101px){
  .qarar-v7-header,
  .qarar-v7-header.is-scrolled{
    height:136px!important;
    min-height:136px!important;
  }

  .qarar-v7-header .header-identity-row,
  .qarar-v7-header.is-scrolled .header-identity-row,
  body.home .qarar-v7-header .header-identity-row,
  body.home .qarar-v7-header.is-scrolled .header-identity-row,
  body.front-page .qarar-v7-header .header-identity-row,
  body.front-page .qarar-v7-header.is-scrolled .header-identity-row{
    min-height:84px!important;
  }

  .qarar-v7-header::after,
  .qarar-v7-header.is-scrolled::after{
    top:84px!important;
  }

  .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  .qarar-v7-header.is-scrolled .brand-lockup.qarar-emblem-lockup{
    width:92px!important;
    min-width:92px!important;
    max-width:92px!important;
    height:78px!important;
    flex:0 0 92px!important;
  }

  .qarar-v7-header .qarar-header-emblem,
  .qarar-v7-header.is-scrolled .qarar-header-emblem{
    width:76px!important;
    height:76px!important;
    max-width:76px!important;
    max-height:76px!important;
  }

  .qarar-v7-header .qarar-header-brand-ar,
  .qarar-v7-header.is-scrolled .qarar-header-brand-ar{
    font-size:18px!important;
  }
}


/* =========================================================
   QARAR v26.3.91 — Header hover/scroll stability hardening
   Desktop dropdown interaction must not alter viewport/header geometry.
   ========================================================= */
@media(min-width:1101px){
  html{scrollbar-gutter:stable;}

  .qarar-v7-header,
  .qarar-v7-header.is-scrolled{
    overflow-anchor:none!important;
    transform:none!important;
    transition:box-shadow .2s ease!important;
  }

  .qarar-v7-header .header-identity-row,
  .qarar-v7-header .header-navigation-row,
  .qarar-v7-header .navigation-inner,
  .qarar-v7-header .primary-nav,
  .qarar-v7-header .primary-nav .menu{
    overflow-anchor:none!important;
  }

  .qarar-v7-header .brand-lockup.qarar-emblem-lockup,
  .qarar-v7-header .qarar-header-emblem,
  .qarar-v7-header .qarar-header-brand-copy,
  .qarar-v7-header .qarar-header-brand-ar,
  .qarar-v7-header .qarar-header-brand-en{
    transition:none!important;
    transform:none!important;
  }

  .qarar-v7-header .primary-nav .sub-menu{
    position:absolute!important;
    overflow-anchor:none!important;
    transform:none!important;
    transition:opacity .12s ease, visibility .12s ease!important;
    contain:style!important;
  }

  .qarar-v7-header .primary-nav li:hover > .sub-menu,
  .qarar-v7-header .primary-nav li:focus-within > .sub-menu{
    transform:none!important;
  }
}

/* =========================================================
   QARAR v26.3.101 — Mobile search / bilingual brand clearance
   ========================================================= */
@media(max-width:620px){
  .qarar-v7-header .qarar-header-brand-copy{
    max-width:min(185px, calc(100vw - 190px))!important;
    min-width:0!important;
    flex:0 1 auto!important;
  }
  .qarar-v7-header .navigation-tools{
    inset-inline-end:70px!important;
    top:20px!important;
    z-index:8!important;
  }
}
@media(max-width:430px){
  .qarar-v7-header .qarar-header-brand-copy{
    max-width:min(170px, calc(100vw - 190px))!important;
  }
}