@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@700&display=swap');

/* Custom typing.cornelcaba.com */

/* hide top PSA/merch banner */
div.fixed.top-0.left-0.z-1000.w-full { display: none !important; }

/* hide footer */
footer { display: none !important; }

/* hide original monkeytype logo (replaced by custom .mt-logo) */
header[data-ui-element="header"] a[aria-label="Monkeytype Home"] { display: none !important; }

/* hide header nav buttons: crown/leaderboards + about(info) */
header[data-ui-element="header"] a[href="/leaderboards"],
header[data-ui-element="header"] a[href="/about"] { display: none !important; }

/* hide cookie consent modal */
dialog#CookiesModal { display: none !important; }

/* remove ALL ads: result-page ad, footer ad, vertical side ads, video ad popup */
[id^="ad-"],
[id^="videoAd"],
.advertisement { display: none !important; }

/* HEADER: always visible + sticky on all pages */
header[data-ui-element="header"],
header[data-ui-element="header"][data-focused] {
  position: sticky !important;
  top: 0;
  z-index: 50;
  opacity: 1 !important;
  background-color: var(--bg-color);
  padding-block: 0.5rem;
}

/* HEADER order (flex order inside nav). Grow spacer stays left and pushes
   the cluster right. Final, from the RIGHT:
   user, theme, settings, notifications, racer, keyboard(typing) -- logo far left. */
header[data-ui-element="header"] nav .grow { order: 0; }
header[data-ui-element="header"] nav a[href="/"] { order: 1; }         /* keyboard / typing */
header[data-ui-element="header"] nav a.mt-racer-btn { order: 2; }      /* NEW: typing racer */
header[data-ui-element="header"] nav button { order: 3; }              /* notifications bell */
header[data-ui-element="header"] nav a[href="/settings"] { order: 4; } /* settings */
header[data-ui-element="header"] nav .mt-theme-btn { order: 5; flex-shrink: 0; }
header[data-ui-element="header"] nav > div:not(.grow) { order: 6; }    /* account/user -> first from right */

/* theme button: show only the palette icon, hide the theme name text */
header[data-ui-element="header"] nav .mt-theme-btn .text { display: none !important; }

/* Typing Racer nav button — matches the grey icon-only style of the other
   header nav buttons (inherits sub-color, brightens on hover). */
header[data-ui-element="header"] nav a.mt-racer-btn {
  color: var(--sub-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s;
}
header[data-ui-element="header"] nav a.mt-racer-btn:hover {
  color: var(--text-color);
}

/* custom "typing" logo, CCC / terminal style (JetBrains Mono, green glow) */
header[data-ui-element="header"] .mt-logo {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #00ff66;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: 0 0 8px rgba(0, 255, 102, 0.5);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
header[data-ui-element="header"] .mt-logo .mt-logo-cur {
  margin-left: 1px;
  animation: mtblink 1.05s steps(1) infinite;
}
@keyframes mtblink { 50% { opacity: 0; } }


/* ===== Unified custom header on the SPA (identical to lessons/racer) ===== */
/* hide the native monkeytype header but KEEP it in the DOM (theme/notifications still work) */
header[data-ui-element="header"] { display: none !important; }

.cc-header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--bg-color,#323437);display:flex;align-items:center;gap:1rem;padding:.75rem 2rem;border-bottom:1px solid rgba(255,255,255,.03);font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cc-header .cc-logo{font-family:"JetBrains Mono",ui-monospace,monospace;color:#00ff66;font-weight:700;font-size:1.6rem;line-height:2.125rem;letter-spacing:.02em;text-shadow:0 0 8px rgba(0,255,102,.5);text-decoration:none;display:inline-flex;align-items:center}
.cc-header .cc-cur{margin-left:1px;animation:mtblink 1.05s steps(1) infinite}
.cc-header .cc-grow{flex:1}
.cc-header nav{display:flex;align-items:center;gap:.75rem}
.cc-header nav > a{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;color:var(--sub-color,#646669);text-decoration:none;transition:color .12s}
.cc-header nav > a.active,.cc-header nav > a:hover{color:var(--text-color,#d1d0c5)}
.cc-header .cc-usermenu{position:relative;display:inline-flex}
.cc-header .cc-usermenu .cc-userbtn{display:inline-flex;align-items:center;gap:.4rem;color:var(--sub-color,#646669);font:inherit;font-size:.9rem;background:transparent;border:none;cursor:pointer;padding:.3rem .3rem;transition:color .12s}
.cc-header .cc-usermenu:hover .cc-userbtn,.cc-header .cc-usermenu .cc-userbtn:hover{color:var(--text-color,#d1d0c5)}
.cc-header .cc-usermenu .cc-uname{letter-spacing:.02em;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-header .cc-usermenu-dd{position:absolute;right:0;top:100%;display:none;flex-direction:column;gap:.1rem;background:var(--sub-alt-color,#2c2e31);border-radius:.55rem;padding:.4rem;min-width:200px;box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:60}
.cc-header .cc-usermenu.open .cc-usermenu-dd{display:flex}
.cc-header .cc-usermenu-dd a{display:flex;align-items:center;justify-content:flex-start;gap:.65rem;color:var(--sub-color,#646669);padding:.55rem .7rem;border-radius:.4rem;font-size:.9rem;white-space:nowrap;text-decoration:none;min-width:0;width:auto;height:auto;transition:background .12s,color .12s}
.cc-header .cc-usermenu-dd a:hover{background:var(--bg-color,#323437);color:var(--text-color,#d1d0c5)}
.cc-header .cc-usermenu-dd a i{width:1.1rem;text-align:center}
.cc-header .cc-usermenu-dd .dd-in{display:none}
.cc-header .cc-usermenu-dd .dd-out{display:flex}
.cc-header .cc-usermenu.signed .cc-usermenu-dd .dd-in{display:flex}
.cc-header .cc-usermenu.signed .cc-usermenu-dd .dd-out{display:none}

/* use the same FontAwesome 6 as the lessons page so glyphs match exactly (scoped) */
@font-face{font-family:"CC Font Awesome 6";font-style:normal;font-weight:900;font-display:block;src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2")}
.cc-header .fa,.cc-header .fas{font-family:"CC Font Awesome 6"!important;font-weight:900!important;line-height:1;display:inline-block}

/* cc-scrollbar-normalize: reserve scrollbar gutter on every page so header right edge is identical */
html{overflow-y:scroll}

/* pass-through notification container so the account menu (User stats) is clickable; real toasts (children) stay clickable */
.z-99999999{pointer-events:none}
.z-99999999 > *{pointer-events:auto}

@media (max-width:640px){
  .cc-header{padding:.6rem .8rem;gap:.55rem}
  .cc-header .cc-grow{display:none}
  .cc-header nav{flex:1 1 0;min-width:0;overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start}
  .cc-header nav::-webkit-scrollbar{height:0;display:none}
  .cc-header nav > a,.cc-header .cc-usermenu{flex:0 0 auto}
  .cc-header .cc-usermenu-dd{position:fixed;top:54px;right:8px;left:auto}
}