/* DIR v313 — Public guest header alignment fix only.
   Scoped to unauthenticated public header; authenticated chrome is untouched. */
.public-guest-header{
  --pgh-h:76px;
  --pgh-border:rgba(255,255,255,.10);
  --pgh-surface:var(--grad-navy,linear-gradient(135deg,#0B1E33 0%,#1c4670 100%));
  position:sticky!important;
  inset-block-start:0;
  top:0;
  min-height:var(--pgh-h);
  height:auto!important;
  background:var(--pgh-surface);
  border-bottom:1px solid var(--pgh-border);
  box-shadow:0 8px 28px rgba(11,30,51,.12);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

/* Remove the global authenticated-header ordering rules from the guest header. */
.public-guest-header .header-inner{
  min-height:var(--pgh-h);
  height:auto!important;
  max-width:1200px;
  margin-inline:auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.public-guest-header .brand{
  order:0!important;
  margin:0!important;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-width:0;
  text-decoration:none;
}
.public-guest-header .hdr-actions{
  order:1!important;
  margin:0!important;
  margin-inline-start:auto!important;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
/* Respect page language explicitly even if an older global rule changed header direction. */
html[dir="rtl"] .public-guest-header .header-inner{direction:rtl}
html[dir="ltr"] .public-guest-header .header-inner{direction:ltr}

.public-guest-header .brand-logo{
  width:auto;
  height:46px;
  max-width:138px;
  object-fit:contain;
  display:block;
  filter:none;
}
.public-guest-header .brand-tag{
  color:#d8e3ee;
  opacity:.92;
  font-size:12.5px;
  font-weight:700;
  line-height:1.35;
  max-width:220px;
  white-space:nowrap;
}
.public-guest-header .hdr-bell,
.public-guest-header .hdr-icon-action{
  width:40px;height:40px;min-width:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.13);
  border-radius:11px;
  background:rgba(255,255,255,.055);
  color:#f7fafc;
  box-shadow:none;
}
.public-guest-header .hdr-bell:hover,
.public-guest-header .hdr-icon-action:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
}
.public-guest-header .hdr-bell:focus-visible,
.public-guest-header .hdr-icon-action:focus-visible,
.public-guest-header .btn-cta-nav:focus-visible,
.public-guest-header .btn-solid:focus-visible{
  outline:3px solid rgba(230,207,125,.34);
  outline-offset:2px;
}
.public-guest-header .bell-badge{border-color:#0B1E33}
.public-guest-header .btn-cta-nav,
.public-guest-header .btn-solid{
  min-height:40px;
  padding-inline:17px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;
  white-space:nowrap;
  font-size:13px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
}
.public-guest-header .btn-cta-nav svg{display:none!important}
.public-guest-header .btn-cta-nav{
  color:#0B1E33;
  background:var(--grad-gold,linear-gradient(135deg,#C9A84C,#E6CF7D));
  border:1px solid transparent;
  box-shadow:0 3px 10px rgba(0,0,0,.10);
}
.public-guest-header .btn-cta-nav:hover{filter:brightness(1.035)}
.public-guest-header .btn-solid{
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.30);
  box-shadow:none;
}
.public-guest-header .btn-solid:hover{
  color:#fff;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.48)
}
.public-guest-header .nav-combo,
.public-guest-header .sidebar-pin-btn{display:none!important}
[data-theme="dark"] .public-guest-header{background:var(--pgh-surface);border-bottom-color:rgba(255,255,255,.10)}
[data-theme="dark"] .public-guest-header .brand-tag{color:#d8e3ee}
[data-theme="dark"] .public-guest-header .hdr-bell,
[data-theme="dark"] .public-guest-header .hdr-icon-action{color:#fff}

/* Because the public header participates in normal sticky layout, remove the fixed-header compensation. */
.public-guest-header ~ main.wrap.page{padding-top:18px!important}

@media (max-width:768px){
  .public-guest-header{
    --pgh-h:auto;
    min-height:0;
    height:auto!important;
  }

  /* Mobile public header: two deliberate compact rows.
     Row 1 = brand + utility icons. Row 2 = the two CTAs. */
  .public-guest-header .header-inner{
    min-height:0;
    height:auto!important;
    padding:9px 12px 10px;
    display:grid;
    grid-template-columns:38px 38px 38px minmax(0,1fr);
    grid-template-rows:42px 42px;
    grid-template-areas:
      "cart theme lang brand"
      "login login request request";
    align-items:center;
    gap:8px 8px;
    direction:ltr!important;
  }

  html[dir="ltr"] .public-guest-header .header-inner{
    grid-template-areas:
      "brand lang theme cart"
      "request request login login";
  }

  .public-guest-header .brand{
    grid-area:brand;
    order:0!important;
    margin:0!important;
    min-width:0;
    justify-self:end;
    align-self:center;
    direction:rtl;
  }
  html[dir="ltr"] .public-guest-header .brand{
    justify-self:start;
    direction:ltr;
  }
  .public-guest-header .brand-logo{
    height:40px;
    max-width:118px;
  }
  .public-guest-header .brand-tag{display:none}

  /* Let the action children participate directly in the header grid. */
  .public-guest-header .hdr-actions{display:contents!important}

  .public-guest-header .hdr-bell,
  .public-guest-header .hdr-icon-action{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:10px;
    margin:0!important;
    align-self:center;
    justify-self:center;
  }
  .public-guest-header .hdr-bell{grid-area:cart}
  .public-guest-header #themeToggle{grid-area:theme}
  .public-guest-header .hdr-lang-g{grid-area:lang}

  .public-guest-header .btn-cta-nav,
  .public-guest-header .btn-solid{
    width:100%;
    min-width:0;
    min-height:42px;
    padding-inline:12px;
    font-size:13px;
    border-radius:10px;
    margin:0!important;
  }
  .public-guest-header .btn-cta-nav{grid-area:request}
  .public-guest-header .btn-solid{grid-area:login}

  .public-guest-header ~ main.wrap.page{padding-top:10px!important}
}

@media (max-width:430px){
  .public-guest-header .header-inner{
    padding:8px 10px 9px;
    grid-template-columns:36px 36px 36px minmax(0,1fr);
    grid-template-rows:40px 40px;
    gap:7px;
  }
  .public-guest-header .brand-logo{height:37px;max-width:108px}
  .public-guest-header .hdr-bell,
  .public-guest-header .hdr-icon-action{
    width:36px;height:36px;min-width:36px;
  }
  .public-guest-header .btn-cta-nav,
  .public-guest-header .btn-solid{
    min-height:40px;
    font-size:12.5px;
    padding-inline:9px;
  }
}

@media (max-width:350px){
  .public-guest-header .header-inner{
    grid-template-columns:34px 34px 34px minmax(0,1fr);
    grid-template-rows:38px 39px;
    gap:6px;
    padding-inline:8px;
  }
  .public-guest-header .brand-logo{height:34px;max-width:98px}
  .public-guest-header .hdr-bell,
  .public-guest-header .hdr-icon-action{width:34px;height:34px;min-width:34px}
  .public-guest-header .btn-cta-nav,
  .public-guest-header .btn-solid{min-height:39px;font-size:12px;padding-inline:7px}
}


/* ============================================================
   v315 — Final public mobile header geometry
   Mobile only. Desktop and authenticated headers are untouched.
   ============================================================ */
@media (max-width:768px){
  .public-guest-header .header-inner{
    box-sizing:border-box;
    width:100%;
    max-width:none;
    padding:8px 12px 9px;
    display:grid!important;
    grid-template-columns:38px 38px 38px minmax(0,1fr)!important;
    grid-template-rows:40px 40px!important;
    grid-template-areas:
      "cart theme lang brand"
      "ctas ctas ctas ctas"!important;
    column-gap:7px!important;
    row-gap:7px!important;
    align-items:center!important;
  }

  html[dir="ltr"] .public-guest-header .header-inner{
    grid-template-areas:
      "brand lang theme cart"
      "ctas ctas ctas ctas"!important;
  }

  .public-guest-header .brand{
    grid-area:brand!important;
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
    padding:0!important;
    height:40px!important;
    display:flex!important;
    align-items:center!important;
  }
  html[dir="ltr"] .public-guest-header .brand{justify-self:start!important}

  .public-guest-header .brand-logo{
    height:38px!important;
    width:auto!important;
    max-width:108px!important;
    margin:0!important;
  }

  .public-guest-header .hdr-actions{display:contents!important}

  .public-guest-header .hdr-bell,
  .public-guest-header .hdr-icon-action{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
    padding:0!important;
    margin:0!important;
    border-radius:10px!important;
    align-self:center!important;
    justify-self:center!important;
  }

  .public-guest-header .hdr-bell{grid-area:cart!important}
  .public-guest-header #themeToggle{grid-area:theme!important}
  .public-guest-header .hdr-lang-g{grid-area:lang!important}

  /* Both CTA buttons share exactly the same full-width row.
     They are positioned at opposite halves, so neither can steal width. */
  .public-guest-header .btn-cta-nav,
  .public-guest-header .btn-solid{
    grid-area:ctas!important;
    width:calc(50% - 4px)!important;
    max-width:none!important;
    min-width:0!important;
    min-height:40px!important;
    height:40px!important;
    margin:0!important;
    padding:0 12px!important;
    border-radius:10px!important;
    font-size:13px!important;
    line-height:1!important;
    box-sizing:border-box!important;
    align-self:center!important;
  }

  html[dir="rtl"] .public-guest-header .btn-cta-nav{justify-self:end!important}
  html[dir="rtl"] .public-guest-header .btn-solid{justify-self:start!important}
  html[dir="ltr"] .public-guest-header .btn-cta-nav{justify-self:start!important}
  html[dir="ltr"] .public-guest-header .btn-solid{justify-self:end!important}

  /* Keep the hero separated from the header with a small, deliberate gap only. */
  .public-guest-header ~ main.wrap.page{
    padding-top:8px!important;
  }
}

@media (max-width:430px){
  .public-guest-header .header-inner{
    grid-template-columns:35px 35px 35px minmax(0,1fr)!important;
    grid-template-rows:38px 39px!important;
    padding:7px 10px 8px!important;
    column-gap:6px!important;
    row-gap:6px!important;
  }
  .public-guest-header .brand{height:38px!important}
  .public-guest-header .brand-logo{height:35px!important;max-width:100px!important}
  .public-guest-header .hdr-bell,
  .public-guest-header .hdr-icon-action{
    width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
  }
  .public-guest-header .btn-cta-nav,
  .public-guest-header .btn-solid{
    height:39px!important;min-height:39px!important;font-size:12.5px!important;padding-inline:9px!important;
  }
}

@media (max-width:350px){
  .public-guest-header .header-inner{
    grid-template-columns:32px 32px 32px minmax(0,1fr)!important;
    grid-template-rows:36px 38px!important;
    padding-inline:8px!important;
    gap:5px!important;
  }
  .public-guest-header .brand{height:36px!important}
  .public-guest-header .brand-logo{height:33px!important;max-width:94px!important}
  .public-guest-header .hdr-bell,
  .public-guest-header .hdr-icon-action{
    width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;
  }
  .public-guest-header .btn-cta-nav,
  .public-guest-header .btn-solid{
    height:38px!important;min-height:38px!important;font-size:12px!important;padding-inline:7px!important;
  }
}


/* DIR Design Tokens final audit
   Public chrome follows the global theme engine while preserving the existing layout and CTA hierarchy. */
.public-guest-header{
  --pgh-border:color-mix(in srgb,var(--app-on-primary,#fff) 12%,transparent);
  --pgh-surface:var(--app-header,var(--navy,#0B1E33));
  background:var(--pgh-surface);
  border-bottom-color:var(--pgh-border);
  color:var(--app-on-primary,#fff);
  box-shadow:var(--app-shadow-soft,0 8px 28px rgba(11,30,51,.12));
}
.public-guest-header .brand-tag{color:color-mix(in srgb,var(--app-on-primary,#fff) 82%,transparent)}
.public-guest-header .hdr-icon-action{
  border-color:color-mix(in srgb,var(--app-on-primary,#fff) 15%,transparent);
  background:color-mix(in srgb,var(--app-on-primary,#fff) 6%,transparent);
  color:var(--app-on-primary,#fff);
}
.public-guest-header .hdr-icon-action:hover{
  background:color-mix(in srgb,var(--app-on-primary,#fff) 13%,transparent);
  border-color:color-mix(in srgb,var(--app-on-primary,#fff) 26%,transparent);
}
.public-guest-header .bell-badge{border-color:var(--app-header,var(--navy,#0B1E33))}
.public-guest-header .btn-solid{
  color:var(--app-on-primary,#fff);
  border-color:color-mix(in srgb,var(--app-on-primary,#fff) 30%,transparent);
  background:color-mix(in srgb,var(--app-on-primary,#fff) 10%,transparent);
}
.public-guest-header .btn-solid:hover{
  color:var(--app-on-primary,#fff);
  background:color-mix(in srgb,var(--app-on-primary,#fff) 16%,transparent);
  border-color:color-mix(in srgb,var(--app-on-primary,#fff) 48%,transparent);
}
[data-theme="dark"] .public-guest-header{background:var(--app-header);border-bottom-color:var(--pgh-border)}
[data-theme="dark"] .public-guest-header .brand-tag{color:color-mix(in srgb,var(--app-on-primary,#fff) 82%,transparent)}
[data-theme="dark"] .public-guest-header .hdr-icon-action{color:var(--app-on-primary,#fff)}