/* Treasora Academy — shared site styles */
@import url("tokens.css");

:root {
  --black: #020202;
  --black2: #070604;
  --gold: #d4af37;
  --gold2: #ffe37a;
  --gold3: #a87518;
  --silver: #f5f1e8;
  --muted: #b7aea0;
  --line: rgba(212, 175, 55, 0.28);
}

header {
  position: relative;
  z-index: 20;
  background: rgba(2, 2, 2, 0.9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.16);
}

.header-inner {
  padding: var(--treasora-header-pad-y) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--treasora-header-gap);
}

.logo img {
  display: block;
  width: var(--treasora-logo);
  max-width: 72vw;
  height: auto;
  margin: 0 auto;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 18px rgba(212, 175, 55, 0.12));
}

nav,
nav.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0;
}

nav a {
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: var(--treasora-nav-pad-y) var(--treasora-nav-pad-x);
  min-height: var(--treasora-nav-height);
  font-size: var(--treasora-nav);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

nav a:hover,
nav a.current {
  border-color: var(--line);
  color: var(--gold2);
}

nav .pro {
  color: #050505;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold2), var(--gold), var(--gold3));
  border: 0;
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.16);
}

/* nav .signin permanent gold override removed — Sign In now only
   highlights via nav a.current (above) when it is actually the current
   page, matching every other nav item. This was the true root cause of
   Sign In appearing "active" on every page, since site.css loads
   universally ahead of any page-local styles. */

.nav-profile-wrap {
  position: relative;
}

.nav-profile-btn {
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: var(--treasora-nav-pad-y) var(--treasora-nav-pad-x);
  min-height: var(--treasora-nav-height);
  font-size: var(--treasora-nav);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

.nav-profile-btn:hover,
.nav-profile-btn.current,
.nav-profile-wrap.open .nav-profile-btn {
  border-color: var(--line);
  color: var(--gold2);
}

.nav-profile-chevron {
  font-size: 0.75em;
  opacity: 0.85;
}

.nav-profile-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(8, 8, 8, 0.98);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  z-index: 40;
}

.nav-profile-item,
.nav-profile-logout {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--silver);
  font-size: 14px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.nav-profile-item:hover,
.nav-profile-logout:hover {
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold2);
}

.nav-profile-logout {
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 4px;
  padding-top: 12px;
  border-radius: 0 0 10px 10px;
}

.nav-profile-lang {
  padding: 8px 12px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.nav-profile-lang-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.nav-profile-lang-options,
.footer-lang-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.nav-lang-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 0;
}

.nav-lang-btn:hover,
.nav-lang-btn.active {
  color: var(--gold2);
}

/* .footer-lang-btn base/hover/active rules removed from this file: every
   property they set (border, background, font-size, padding, color,
   hover/active color) is redeclared with !important in css/standard.css,
   which loads after this file — so this block was fully dead code with
   zero effect on rendering. Centralizing the real definition in
   standard.css avoids a two-source-of-truth cascade trap. */

.nav-profile-lang-sep,
.footer-lang-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  user-select: none;
}

.footer-lang-bar {
  border-top: 1px solid rgba(212, 175, 55, 0.12);
  background: #040404;
  padding: 22px 16px 18px;
  text-align: center;
}

.footer-lang-label {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 560px) {
  nav,
  nav.site-nav {
    gap: 11px;
  }

  .nav-profile-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    min-width: min(260px, calc(100vw - 32px));
  }
}

@media (min-width: 561px) {
  nav,
  nav.site-nav {
    gap: 12px;
  }
}

footer {
  border-top: 1px solid rgba(212, 175, 55, 0.18);
  padding: 34px 22px 40px;
  text-align: center;
  background: #030303;
  color: var(--muted);
}

footer p {
  max-width: 620px;
  margin: 8px auto;
  color: rgba(245, 241, 232, 0.62);
  font-size: 14px;
  line-height: 1.65;
}

footer a {
  color: var(--gold2);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* Social links — small, thin-line gold icons as a subtle footer detail */
.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 20px auto 4px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--gold);
  opacity: 0.9;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.social-links a:hover,
.social-links a:focus-visible {
  color: var(--gold2);
  opacity: 1;
}

.social-links svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* YouTube's glyph reads visually smaller/weaker than the other three
   icons due to its wide/short shape — nudge it up ~15% to match their
   optical weight. Scoped to this icon only. */
.social-links svg.icon-yt {
  width: 18.4px;
  height: 18.4px;
}