/*
  ASPF COMPACT HEADER LOCK — OWNER APPROVED
  -----------------------------------------
  Desktop: 92px
  Tablet : 78px
  Mobile : 68px
  The logo is rendered as a single gold silhouette on navy so no black Arabic
  lettering can appear on the dark background.
*/

:root{
  --aspf-header-navy:#0B1F3A;
  --aspf-header-gold:#D2A244;
}

.brand{
  height:92px!important;
  min-height:92px!important;
  padding:0 40px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:24px!important;
  overflow:hidden!important;
  background:var(--aspf-header-navy)!important;
  border-bottom:1px solid rgba(210,162,68,.22)!important;
  box-shadow:none!important;
}

/* Keep the original image in the DOM for semantics, but render the visual logo
   through an alpha mask so every visible logo pixel is the approved gold. */
.brand img{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}

.brand::before{
  content:""!important;
  display:block!important;
  flex:0 0 118px!important;
  width:118px!important;
  height:56px!important;
  background:var(--aspf-header-gold)!important;
  -webkit-mask-image:url("/assets/assets/brand/aspf_logo_light.png")!important;
  mask-image:url("/assets/assets/brand/aspf_logo_light.png")!important;
  -webkit-mask-repeat:no-repeat!important;
  mask-repeat:no-repeat!important;
  -webkit-mask-position:center!important;
  mask-position:center!important;
  -webkit-mask-size:contain!important;
  mask-size:contain!important;
}

.brand-note{
  margin:0!important;
  color:#F3E4BB!important;
  font-size:14.4px!important;
  font-weight:400!important;
  line-height:1.6!important;
  white-space:nowrap!important;
}

@media(max-width:1024px){
  .brand{
    height:78px!important;
    min-height:78px!important;
    padding:0 30px!important;
  }
  .brand::before{
    flex-basis:101px!important;
    width:101px!important;
    height:48px!important;
  }
}

@media(max-width:780px){
  .brand{
    height:68px!important;
    min-height:68px!important;
    padding:0 20px!important;
  }
  .brand::before{
    flex-basis:88px!important;
    width:88px!important;
    height:42px!important;
  }
  .brand-note{display:none!important;}
}

/* --------------------------------------------------------------------------
   APPROVED LIVE — compact registration diagnostic hero
   Approved 2026-09-08 after isolated preview review.
   Main title 20px / subtitle 16px / body 12px.
   -------------------------------------------------------------------------- */
body:has(#heroRestartBtn) .shell{
  max-width:1180px!important;
  padding:14px 18px 38px!important;
}
body:has(#heroRestartBtn) .brand{
  height:64px!important;
  min-height:64px!important;
  padding:0 24px!important;
  background:#0B1F3A!important;
  border:0!important;
  box-shadow:none!important;
}
body:has(#heroRestartBtn) .brand::before{
  flex-basis:110px!important;
  width:110px!important;
  height:44px!important;
}
body:has(#heroRestartBtn) .brand-note{
  display:block!important;
  font-size:12px!important;
  line-height:1.5!important;
  color:#F3E4BB!important;
}
body:has(#heroRestartBtn) .brand-note::before,
body:has(#heroRestartBtn) .brand-note::after{
  content:none!important;
  display:none!important;
}
body:has(#heroRestartBtn) .hero{
  min-height:0!important;
  height:auto!important;
  padding:20px 28px 18px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  text-align:right!important;
  overflow:hidden!important;
  background:#0B1F3A!important;
  border:0!important;
  box-shadow:none!important;
}
body:has(#heroRestartBtn) .hero::before,
body:has(#heroRestartBtn) .hero::after{
  content:none!important;
  display:none!important;
}
body:has(#heroRestartBtn) .hook{
  order:1!important;
  margin:0 0 6px!important;
  padding:0!important;
  font-size:16px!important;
  line-height:1.5!important;
  font-weight:700!important;
  color:#D2A244!important;
  text-align:right!important;
  max-width:none!important;
}
body:has(#heroRestartBtn) .hook::after{
  content:none!important;
  display:none!important;
}
body:has(#heroRestartBtn) .hero h1{
  order:2!important;
  margin:0!important;
  padding:0!important;
  font-size:20px!important;
  line-height:1.55!important;
  font-weight:700!important;
  color:#fff!important;
  text-align:right!important;
  max-width:none!important;
  width:100%!important;
}
body:has(#heroRestartBtn) .hero h1::after{
  content:none!important;
  display:none!important;
}
body:has(#heroRestartBtn) .hero h1 span{
  display:inline!important;
}
body:has(#heroRestartBtn) .hero .lead{
  order:3!important;
  margin:7px 0 0!important;
  padding:0!important;
  max-width:900px!important;
  font-size:12px!important;
  line-height:1.8!important;
  font-weight:400!important;
  color:#D6DEE7!important;
  text-align:right!important;
}
body:has(#heroRestartBtn) .hero .lead::after{
  content:none!important;
  display:none!important;
}
body:has(#heroRestartBtn) .start-row{
  order:4!important;
  margin:12px 0 0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:auto!important;
}
body:has(#heroRestartBtn) #heroRestartBtn{
  min-width:150px!important;
  width:auto!important;
  padding:9px 16px!important;
  font-size:12px!important;
  line-height:1.5!important;
  font-weight:700!important;
  background:#D2A244!important;
  color:#0B1F3A!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body:has(#heroRestartBtn) .start-row::after{
  content:none!important;
  display:none!important;
}
body:has(#heroRestartBtn) .hero .question,
body:has(#heroRestartBtn) .hero .facts,
body:has(#heroRestartBtn) #panel>.privacy,
body:has(#heroRestartBtn) #intro{
  display:none!important;
}
body:has(#heroRestartBtn) #panel{margin-top:0!important;}
body:has(#heroRestartBtn) .survey.show,
body:has(#heroRestartBtn) .results.show{margin-top:12px!important;}

@media(max-width:780px){
  body:has(#heroRestartBtn) .shell{padding:10px!important;}
  body:has(#heroRestartBtn) .brand{
    height:58px!important;
    min-height:58px!important;
    padding:0 16px!important;
  }
  body:has(#heroRestartBtn) .brand::before{
    flex-basis:96px!important;
    width:96px!important;
    height:38px!important;
  }
  body:has(#heroRestartBtn) .brand-note{display:none!important;}
  body:has(#heroRestartBtn) .hero{
    min-height:0!important;
    padding:17px 18px 16px!important;
  }
  body:has(#heroRestartBtn) .hook{font-size:16px!important;}
  body:has(#heroRestartBtn) .hero h1{font-size:20px!important;line-height:1.55!important;}
  body:has(#heroRestartBtn) .hero .lead{font-size:12px!important;line-height:1.8!important;}
  body:has(#heroRestartBtn) #heroRestartBtn{font-size:12px!important;min-width:140px!important;width:auto!important;}
}