/* English comments: Minimal header styles for H5 Games site */
:root {
  /* Revert site base background to initial flat color (English comments) */
  --bg2: #f8f7f5;
  --h5-text: #252a34;
  /* Primary brand blue (replace with exact blue from http://localhost:8886/) */
  --brand-blue: #2563eb; /* TODO: update to match reference site */
  /* Accent derives from brand blue */
  --h5-accent: var(--brand-blue);
  --h5-border: #e5e7eb;
}

/* Global site background color
   English comment: Use --bg2 for the whole site's base background. Replace --bg2 to match the 8886 project. */
html, body, .wrapper { background: var(--bg2) !important; }

/* Header wrapper */
.h5-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--h5-border);
}
/* Ensure our header stays above page content from vendor CSS (English comments) */
.header.h5-header { z-index: 1001 !important; }

/* Header inner container */
.h5-header-container {
  max-width: 1010px;
  margin: 0 auto;
  padding: 10px 20px;
  /* Nudge content slightly closer to the left edge (English comment) */
  padding-left: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.h5-header-logo { /* Move only the logo 5px left; preserve any outer header margins (English comment) */ transform: translateX(-5px); }
.h5-logo-link { text-decoration: none; }
.h5-logo-text {
  /* Increase logo font size to 24px (English comment) */
  font-size: 24px;
  font-weight: 700;
  color: var(--h5-text);
}

/* Nav */
.h5-header-nav {
  display: flex;
  align-items: center;
  /* Take remaining width between logo and user (English comments) */
  flex: 1 1 auto;
  /* Leave some spacing after the logo; +10px more than previous tweak (English comment) */
  margin-left: 39px;
}
.h5-nav-links { display: flex; align-items: center; gap: 14px; }
.h5-nav-link {
  color: var(--h5-text);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 8px;
}
.h5-nav-link:hover { background: color-mix(in srgb, var(--brand-blue), white 92%); }

/* Dropdown */
.h5-nav-dropdown { position: relative; }
.h5-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--h5-text);
  /* Light tint of brand blue for subtle button background */
  background: color-mix(in srgb, var(--brand-blue), white 88%);
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.h5-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #ffffff;
  border: 1px solid var(--h5-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 8px;
  display: none;
  z-index: 2000; /* Make sure dropdown renders above page content */
}
.h5-dropdown-item {
  display: block;
  padding: 8px 10px;
  color: var(--h5-text);
  text-decoration: none;
  border-radius: 8px;
}
.h5-dropdown-item:hover { background: #f3f4f6; }
.h5-nav-dropdown.open .h5-dropdown-menu { display: block; }

/* User section */
.h5-login-btn {
  background: var(--h5-accent);
  color: #fff;
  border: 0;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

/* Ensure user section doesn't shrink (English comments) */
.h5-header-user { flex: 0 0 auto; margin-left: 12px; }

/* Mobile */
.h5-mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: transparent;
  border: 0;
}
.h5-mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--h5-text);
}

@media (max-width: 640px) {
  .h5-nav-links { display: none; }
  .h5-nav-links.open { display: flex; position: absolute; top: 56px; left: 0; right: 0; background: #fff; padding: 10px 20px; border-bottom: 1px solid var(--h5-border); }
  .h5-mobile-menu-btn { display: inline-flex; }
}

/* Cookie consent styles (English comments) */
.h5-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  background: #111827;
  color: #f9fafb;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 16px;
  display: none;
}
.h5-cookie-banner.show { display: block; }
.h5-cookie-banner a { color: #93c5fd; text-decoration: underline; }
.h5-cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.h5-cookie-btn { cursor: pointer; border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 600; }
.h5-cookie-btn.primary { background: var(--h5-accent); color: #fff; }
.h5-cookie-btn.secondary { background: #374151; color: #fff; }
.h5-cookie-btn.ghost { background: transparent; color: #e5e7eb; }

/* Cookie settings modal */
.h5-cookie-modal { position: fixed; inset: 0; z-index: 10000; display: none; }
.h5-cookie-modal.show { display: flex; align-items: center; justify-content: center; }
.h5-cookie-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.h5-cookie-panel { position: relative; width: min(680px, 92vw); max-height: 88vh; overflow: auto; background: #ffffff; color: #111827; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); padding: 20px; }
.h5-cookie-panel h3 { margin: 0 0 8px; font-size: 18px; }
.h5-cookie-panel p { margin: 0 0 12px; color: #4b5563; }
.h5-cookie-row { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid #e5e7eb; }
.h5-cookie-row:first-of-type { border-top: 0; }
.h5-cookie-toggle { display: flex; align-items: center; gap: 10px; }
.h5-switch { appearance: none; width: 42px; height: 24px; background: #d1d5db; border-radius: 999px; position: relative; cursor: pointer; outline: none; transition: background .2s; }
.h5-switch:before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.h5-switch:checked { background: var(--h5-accent); }
.h5-switch:checked:before { transform: translateX(18px); }
.h5-switch:disabled { opacity: .5; cursor: not-allowed; }
.h5-cookie-close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; cursor: pointer; color: #6b7280; }
.h5-cookie-panel .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* Hide legacy cookie bar if present (we now use modal/banner) */
.cookie-warning { display: none !important; }

/* Fix: Ensure homepage #description section is fully visible (English comments) */
#description { position: relative; z-index: 2; }
#description .description__wrapper { overflow: visible; }