/* header.css — site header, nav, mobile menu, dropdowns, header grid */

/* ================= HEADER ================= */

.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;

  background: var(--header-blue);
  color: var(--header-text);
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--line);

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.header-inner{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 10px 0;
  gap: 22px;
}

.brand{
  display:flex;
  gap:14px;
  align-items:center;
}
.brand:hover{ text-decoration: none; }

.logo{
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}
.logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Default nav (if used on non-grid pages) */
.nav{
  display:flex;
  gap: 26px;
  align-items:center;
  justify-content:center;
  flex: 1;
  min-width: 0;
}
.nav a{
  font-size: 16px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex: 0 0 auto;
}

/* ================= MOBILE MENU (overlay) ================= */

.menu-btn{
  display: none; /* only portrait */
  width: 56px !important;
  height: 56px !important;
  padding: 0;

  /* in-flow so it switches together with the header */
  position: relative;
  z-index: auto;

  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;

  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* Force-remove any inherited button styling on the menu button */
.menu-btn.btn{
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Remove hover/active backgrounds from inherited styles */
.menu-btn:hover,
.menu-btn:active,
.menu-btn:focus{
  background: transparent !important;
  box-shadow: none !important;
}

.menu-btn img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.menu-icon{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;     /* modern mobile */
  min-height: 100vh;  /* fallback */
  z-index: 180;
  background: rgba(0,0,0,.82);
  display: none;
  pointer-events: auto;
}

/* Overlay close button (white icon) — positioned by JS to match header menu button */
.menu-btn-overlay{
  position: fixed;
  z-index: 999; /* above the black overlay */
  display: none;

  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;

  cursor: pointer;
  pointer-events: auto; /* clickable even when header is disabled */
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
}

.menu-btn-overlay img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Show only when menu is open */
body.menu-open .menu-btn-overlay{
  display: block;
}

body.menu-open .mobile-menu{
  display: flex;
}

/* When menu is open, header must not be clickable */
body.menu-open .site-header{
  pointer-events: none;
}

/* When menu is open: freeze background scroll */
body.menu-open{
  overflow: hidden;
  height: 100vh;
  touch-action: none;
}

.mobile-menu-panel{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 22px;
  margin-top: 120px; /* below fixed header */
}

.mobile-menu-link{
  color: #fff;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
}

.mobile-menu-link:hover{
  background: rgba(255,255,255,.12);
  text-decoration: none;
}

/* Force-hide mobile menu in landscape (cannot be used horizontally) */
@media (orientation: landscape){
  /* Hide ONLY the header hamburger in landscape */
  .menu-btn{ display: none !important; }

  /* Do NOT hide the overlay menu here */
  body.menu-open{ overflow: auto; }
}

/* ================= HEADER ICONS — ACTUALLY BIGGER ================= */

/* Make language + user icons visually larger */
.header-squares .lang-current img,
.header-squares .user-current img{
  width: 34px !important;
  height: 34px !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain;
}

/* Optional: slightly larger hitbox, but not required */
.header-squares .lang-current,
.header-squares .user-current{
  width: 56px;
  height: 56px;
}

/* ================= DROPDOWNS (LANG + USER) ================= */

.lang-select,
.user-select{ position: relative; z-index: 100; }

.lang-current{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lang-current img{
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.lang-current span{ font-size: 14px; line-height: 1; }

/* Language button: force text and border to white */
.site-header .lang-current{
  color: var(--header-text) !important;
  border-color: var(--header-text) !important;
}

.site-header .lang-current span{
  color: var(--header-text) !important;
}

.lang-menu{
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 120;
  display: flex;
  gap: 6px;
}

.lang-select.open .lang-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-menu button{
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.lang-menu button:hover{ background: rgba(11,16,32,.06); }

.lang-menu img{
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* User profile button + dropdown */
.user-current{
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-current img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* Force header user button border/icon to white */
.site-header .user-current{
  border-color: var(--header-text) !important;
}

.user-menu{
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 160px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 120;
}

.user-select.open .user-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.user-menu a,
.user-menu button{
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 10px;
  border-radius: 10px;
  font: inherit;
  color: var(--text);
  display: block;
}

.user-menu a:hover,
.user-menu button:hover{ background: rgba(11,16,32,.06); }

/* ================= ACCESSIBILITY ================= */

.brand:focus-visible{
  outline: 2px solid rgba(255,140,0,.55);
  outline-offset: 4px;
  border-radius: 12px;
}

.lang-current:focus-visible{
  outline: 2px solid rgba(255,140,0,.55);
  outline-offset: 2px;
}

/* ================= HEADER GRID (6 RECTANGLES) ================= */

.header-squares{
  display: grid;
  grid-template-columns: 112px 1fr 1fr 1fr 1fr 190px;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.header-squares .brand{
  grid-column: 1;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  margin: 0;
}

.header-squares .nav-squares{
  grid-column: 2 / 6;
  display: contents;
}

.header-squares .nav-squares .nav-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  height: 100%;
  background: transparent;
  border-radius: 0;
  text-decoration: none;

  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0.02em;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-squares .nav-squares .nav-cell.mid:hover{
  background: rgba(255,255,255,.40);
  text-decoration: none;
}

.header-squares .controls{
  grid-column: 6;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 14px;
  gap: 10px;
}

/* Desktop + mobile: keep language button as icon-only circle (like portrait) */
.header-squares .lang-select,
.header-squares .user-select{
  width: auto;
  display: flex;
}

.header-squares .lang-current,
.header-squares .user-current{
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  line-height: 0;
  border: 1px solid var(--header-text);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

/* ================= HEADER ICON BUTTONS — NO CIRCLE, CENTERED ================= */

/* Center controls inside the last grid cell */
.header-squares .controls{
  justify-content: center !important;
}

/* Remove circle + border, keep exact size */
.header-squares .lang-current,
.header-squares .user-current{
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Icons must fill the full clickable area */
.header-squares .lang-current img,
.header-squares .user-current img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Language is icon-only everywhere */
.header-squares .lang-current span{
  display: none !important;
}

/* ================= HEADER ICON SIZE — BIGGER ================= */

/* Increase the visual size of language + user icons */
.header-squares .lang-current,
.header-squares .user-current{
  width: 56px;        /* was 44px */
  height: 56px;       /* was 44px */
  min-width: 56px;
}

/* Ensure images scale properly inside the larger area */
.header-squares .lang-current img,
.header-squares .user-current img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-squares .lang-current span{ display: none; }

.header-squares .lang-current img,
.header-squares .user-current img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Portrait (mobile-like): hide nav, show hamburger */
@media (max-width: 900px){
  /* header layout */
  .header-squares{
    grid-template-columns: 112px 1fr 56px 56px 56px;
  }

  /* 1) nav titles disappear */
  .header-squares .nav-squares{
    display: none !important;
  }

  /* Non-grid pages: hide the normal nav at the same breakpoint */
  .nav{ display: none !important; }

  /* 2) menu icon appears */
  .menu-btn{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    /* ensure the icon has a real containing box */
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
  }

  /* keep original sizes, just reposition */
  .header-squares .menu-btn{
    order: -1;          /* move hamburger to the left */
    margin-right: auto; /* push lang + user to the right */
  }

  /* Ensure hamburger icon fills its button (and is not affected by other header icon sizing rules) */
  .header-squares #menuBtn .menu-icon{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
  }

  /* controls area */
  .header-squares .controls{
    grid-column: 3 / 6;
    justify-content: flex-end !important;
    gap: 10px;         /* reduce from 26px so it fits */
    min-width: 0;       /* allow flex to fit in grid */
  }

  /* IMPORTANT: remove transition lag in portrait */
  .header-squares .lang-current,
  .header-squares .lang-current * ,
  .header-squares .nav-squares,
  .header-squares .menu-btn,
  .header-squares .menu-btn *{
    transition: none !important;
    animation: none !important;
  }

}

/* FORCE all header control icons to be identical size */
@media (max-width: 900px){
  .header-squares .menu-btn,
  .header-squares .lang-current,
  .header-squares .user-current{
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
  }

  .header-squares .menu-btn img,
  .header-squares .lang-current img,
  .header-squares .user-current img{
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
  }

  .header-squares .menu-icon{
    width: 34px !important;
    height: 34px !important;
  }
}