/* =========================
   TOP BAR / HEADER
   ========================= */
html, body{
  margin:0;
  padding:0;
}

.gf-topbar{
  width:100%;
  height:100px;
  background:#EEF1F7;
  padding:0 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  box-sizing:border-box;
  max-width:100%;
  overflow:visible;
  z-index:1000;
}

/* allow flex children to shrink (fix overflow) */
.gf-topbar-left,
.gf-topbar-center,
.gf-topbar-right{
  min-width:0;
}

/* --- desktop left links --- */
.gf-topbar-left{
  display:flex;
  align-items:center;
  gap:28px;
}

.gf-topbar-left a{
  font-family:"Noah", sans-serif;
  font-size:18px;
  font-weight:400;
  color:#0C0F1C;
  text-decoration:none;
}

.gf-topbar-left a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

/* --- mobile burger (hidden on desktop) --- */
.gf-topbar-burger{
  display:none;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  background:transparent;
  cursor:pointer;
  align-items:center;
  justify-content:center;
}

.gf-topbar-burger img{
  width:28px;
  height:28px;
  display:block;
}

/* --- center logo --- */
.gf-topbar-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  flex:0 0 auto;
}

.gf-topbar-logo{
  height:28px;
  width:auto;
  display:block;
}

/* --- right --- */
.gf-topbar-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex:0 1 auto;
  position:relative;
}

.gf-lang-btn{
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:"Noah", sans-serif;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#0C0F1C;
  line-height:1;
}

.gf-lang-caret{
  font-size:14px;
  opacity:.7;
  transform:translateY(1px);
}

/* =========================
   LANGUAGE DROPDOWN (DESKTOP)
   ========================= */
.gf-lang-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  display:none;
  background:#FFFFFF;
  border-radius:18px;
  padding:10px 8px; /* ✅ inset padding so hover doesn't touch edges */
  box-shadow:0 18px 45px rgba(15,23,42,.18);
  z-index:2000;
  box-sizing:border-box;

  /* ✅ hug content */
  width:max-content;
  max-width:calc(100vw - 24px);
}

/* show when JS sets aria-expanded="true" on button */
.gf-lang-btn[aria-expanded="true"] + .gf-lang-menu{
  display:block;
}

/* items */
.gf-lang-menu button{
  display:block;
  width:100%;
  border:none;
  background:transparent;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;

  font-family:"Noah", sans-serif;
  font-size:16px;
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#0C0F1C;
  line-height:1.2;
  white-space:nowrap;

  border-radius:12px; /* ✅ local rounding for hover highlight */
}

.gf-lang-menu button:hover{
  background:rgba(63,82,179,.08);
}

.gf-cabinet-link{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.gf-cabinet-link img{
  width:22px;
  height:22px;
  display:block;
  filter:
    drop-shadow(0 0 0 #0C0F1C)
    drop-shadow(0 0 0 #0C0F1C);
}

/* =========================
   USER EMAIL (DESKTOP)
   ========================= */
.gf-user-label{
  font-family:"Noah", sans-serif;
  font-size:16px;
  font-weight:400;
  color:#0C0F1C;
  line-height:1.2;
  padding-bottom:1px;
  white-space:nowrap;
  margin-left:20px;
  display:inline-block;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  vertical-align:middle;
}

.gf-user-label:empty{
  display:none;
  margin-left:0;
  max-width:none;
}


.gf-account-popover-backdrop{
  position:fixed;
  inset:0;
  background:rgba(12,15,28,.38);
  z-index:4990;
  display:none;
}

/* =========================
   ACCOUNT POPOVER (DESKTOP / TABLET)
   ========================= */
.gf-account-popover{
  z-index:5000;
}

.gf-account-popover .gf-account-card{
  background:#EEF1F7;
  border-radius:18px;
  padding:32px 36px;
  width:300px;
  max-width:calc(100vw - 24px);
  box-sizing:border-box;
  box-shadow:none;
}

.gf-account-popover .gf-account-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.gf-account-popover .gf-account-title{
  font-family:"Noah", sans-serif;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  text-align:left;
  margin:0;
}

.gf-account-popover .gf-account-settings-link{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#3F52B3;
  text-decoration:none;
  border-radius:10px;
  transition:background-color .18s ease, transform .12s ease;
}

.gf-account-popover .gf-account-settings-link:hover{
  background:rgba(63, 82, 179, .12);
}

.gf-account-popover .gf-account-settings-link:active{
  background:rgba(63, 82, 179, .2);
  transform:scale(.96);
}

.gf-account-popover .gf-account-settings-link img{
  width:20px;
  height:20px;
  display:block;
}

.gf-account-popover .gf-account-email{
  margin-top:24px;
  font-family:"Noah", sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  text-align:left;
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.gf-account-popover .gf-account-actions{
  margin-top:28px;
  display:block;
}

.gf-account-popover .gf-account-switch{
  margin-top:12px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  border:1px solid #3F52B3;
  border-radius:14px;
  overflow:hidden;
  background:#EEF1F7;
}

.gf-account-popover .gf-account-switch-btn{
  flex:1 1 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:10px 12px;
  border:0;
  background:transparent;
  color:#3F52B3;
  font-family:"Noah", sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, transform .12s ease;
}

.gf-account-popover .gf-account-switch-btn:hover:not(:disabled):not([aria-disabled="true"]):not(.is-active){
  background:rgba(63, 82, 179, .12);
}

.gf-account-popover .gf-account-switch-btn:active:not(:disabled):not([aria-disabled="true"]){
  transform:scale(.98);
}

.gf-account-popover .gf-account-switch-btn.is-active:hover:not(:disabled):not([aria-disabled="true"]){
  background:#36489f;
}

.gf-account-popover .gf-account-switch-btn.is-active{
  background:#3F52B3;
  color:#FFFFFF;
}

.gf-account-popover .gf-account-switch-btn:disabled,
.gf-account-popover .gf-account-switch-btn[aria-disabled="true"]{
  opacity:0.55;
  cursor:not-allowed;
}

.gf-account-popover #gf-account-logout{
  width:100%;
  min-width:0;
  display:block;
}

/* =========================
   HEADER — TABLET / NARROW DESKTOP
   ========================= */
@media (max-width:1030px){
  .gf-topbar{
    padding:0 32px;
  }

  .gf-topbar-left{
    display:none;
  }

  .gf-topbar-burger{
    display:inline-flex;
  }

  .gf-user-label{
    display:none;
  }

  .gf-topbar-center{
    position:static;
    transform:none;
    flex:1 1 auto;
    display:flex;
    justify-content:center;
  }

  .gf-topbar-right{
    gap:12px;
  }
}

/* =========================
   MOBILE ACCOUNT POPOVER
   ========================= */
@media (max-width:768px){
  body.gf-account-popover-open{ overflow:hidden; }
  body.gf-account-popover-open .gf-account-popover-backdrop{
    display:block;
    top:72px; /* Keep header interactive while page content is dimmed */
  }

  .gf-account-popover{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:72px !important;
    padding:0;
    display:block;
    box-sizing:border-box;
  }

  .gf-account-popover .gf-account-card{
    width:100%;
    max-width:100%;
    border-radius:0;
    padding:24px 20px 28px;
  }

  .gf-account-popover .gf-account-title{
    font-size:16px;
    text-align:left;
  }

  .gf-account-popover .gf-account-email{
    font-size:14px;
    margin-top:16px;
  }

  .gf-account-popover .gf-account-actions{
    margin-top:28px;
  }

  .gf-account-popover .gf-account-switch{
    margin-top:12px;
  }

  .gf-account-popover #gf-account-logout{
    width:100%;
  }
}

/* =========================
   HEADER — MOBILE
   ========================= */
@media (max-width:768px){
  .gf-topbar{
    height:72px;
    padding:0 20px;
  }

  .gf-topbar-burger{ display:inline-flex; }
  .gf-topbar-left{ display:none; }
  .gf-lang-btn{ display:none; }

  .gf-topbar-center{
    position:static;
    transform:none;
    flex:1 1 auto;
    display:flex;
    justify-content:center;
  }

  .gf-topbar-logo{
    height:24px;
  }

  .gf-topbar-right{
    gap:0;
  }
}

/* =========================
   MOBILE MENU OVERLAY
   ========================= */
.gf-burger{
  width:28px;
  height:28px;
  position:relative;
  display:inline-block;
}

.gf-burger span{
  position:absolute;
  left:3px;
  right:3px;
  height:2px;
  background:#3F52B3;
  border-radius:999px;
  transform-origin:center;
  transition:transform .22s ease, top .22s ease, opacity .22s ease;
}

.gf-burger span:first-child{ top:10px; }
.gf-burger span:last-child{ top:18px; }

body.gf-menu-open .gf-burger span:first-child{
  top:14px;
  transform:rotate(45deg);
}

body.gf-menu-open .gf-burger span:last-child{
  top:14px;
  transform:rotate(-45deg);
}

.gf-mobilemenu{
  position:fixed;
  inset:0;
  background:#FFFFFF;
  z-index:2500;
  display:none;
}

@media (max-width:1030px){
  body.gf-menu-open .gf-mobilemenu{ display:block; }
}

body.gf-menu-open{
  overflow:hidden;
  touch-action:none;
}

.gf-mm-inner{
  padding:92px 20px 24px;
  box-sizing:border-box;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.gf-mm-title{
  font-family:"Noah", sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#3F52B3;
  margin-bottom:24px;
}

.gf-mm-nav{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.gf-mm-link{
  font-family:"Noah", sans-serif;
  font-size:22px;
  font-weight:400;
  color:#0C0F1C;
  text-decoration:none;
}