/*
Theme Name: Hypecurve
Theme URI: https://hypecurve.co.uk
Author: ChatGPT Assistant
Author URI: https://openai.com
Description: A premium WordPress theme built for Hypecurve.  The theme blends gaming inspired visuals with professional tech aesthetics and comes with deep integrations for WPBakery Page Builder and Slider Revolution.  It includes multiple page templates, a comprehensive design system, custom post types for tournaments and leaderboards, and conversion‑focused elements for high engagement.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hypecurve
*/

/*
 * CSS variables define the Hypecurve colour system.  These values are extracted
 * from the client’s existing branding and should not be changed without
 * updating the accompanying design system documentation.  Each colour is
 * grouped by intent (primary, accent, success, error, text, backgrounds).
 */
:root {
  /* Brand colours */
  --primary-blue: #27D3FF;
  --primary-purple: #9A1FFF;
  --success-green: #22E58E;
  --error-red: #FF5577;
  /* Neutral colours */
  --text-colour: #EAF1FF;
  --muted-text: #A9B6E8;
  --bg-dark1: #070A18;
  --bg-dark2: #0C1230;
  --bg-dark3: #0A0F25;
  --panel-base: #121736;
  --panel-base-2: #0F142B;
  --border-colour: #232842;
}

/* Base styles */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--text-colour);
  background: linear-gradient(180deg, var(--bg-dark1), var(--bg-dark2), var(--bg-dark3));
}

/*
 * Dynamic TV static canvas.
 *
 * We no longer rely on a tiled PNG for the noise effect.  Instead, a
 * JavaScript routine (see assets/js/main.js) draws random noise to a
 * canvas element on every animation frame.  This canvas is inserted into
 * the DOM with the ID `noiseCanvas`.  Here we declare styling so the
 * canvas covers the entire viewport and sits behind the content while
 * blending with the dark gradient backgrounds.  The mix‑blend‑mode and
 * opacity values provide a subtle grain that doesn’t distract from the
 * page content.
 */
#noiseCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
  opacity: 0.06;
}

/* Global button resets so third‑party buttons adopt theme styling */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-block-button .wp-block-button__link {
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple));
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-block;
  text-decoration: none;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(39, 211, 255, 0.4);
}

a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover,
a:focus {
  color: var(--primary-purple);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-colour);
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--muted-text);
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.btn-primary {
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple));
  color: #fff;
  box-shadow: 0 0 10px rgba(39, 211, 255, 0.55);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(39, 211, 255, 0.8);
}
.btn-secondary {
  background: transparent;
  color: var(--primary-blue);
  border: 2px solid var(--primary-blue);
}
.btn-secondary:hover {
  background: var(--primary-blue);
  color: #fff;
}

/* Larger button variant */
.btn-lg {
  font-size: 1.125rem;
  padding: 1rem 2rem;
}

/* Gradient text utility for hero headings */
.gradient-text {
  background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Utility classes */
.container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.section {
  padding: 4rem 0;
}

.text-center {
  text-align: center;
}

/* Header and Navigation */
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg-dark2);
  border-bottom: 1px solid var(--border-colour);
  z-index: 1000;
  transition: background 0.3s ease;
}

/* Remove default list styles from any unordered lists in the header to prevent
   unwanted bullet points from plugin‑generated menus. */
header.site-header ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
header.site-header .logo {
  display: flex;
  align-items: center;
  height: 60px;
}
header.site-header .logo img {
  height: 40px;
  margin-right: 0.5rem;
}
nav.primary-menu {
  /* The nav container itself acts as a wrapper. All list styling is handled on UL/LI. */
  position: relative;
}

/* Primary navigation structure */
.primary-menu ul,
.primary-menu li {
  /* Remove default bullet points and spacing on all levels of the primary menu */
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-menu ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.primary-menu li {
  position: relative;
}
.primary-menu a {
  color: var(--text-colour);
  font-weight: 500;
  font-size: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  transition: color 0.2s ease, background 0.2s ease;
}
.primary-menu a:hover,
.primary-menu a:focus {
  color: var(--primary-blue);
  background: var(--bg-dark3);
}
/* Dropdown styling */
.primary-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--bg-dark2);
  border: 1px solid var(--border-colour);
  border-radius: 0.5rem;
  display: none;
  z-index: 999;
}
.primary-menu .menu-item-has-children:hover > .sub-menu,
.primary-menu .menu-item-has-children:focus-within > .sub-menu {
  display: block;
}
.primary-menu .sub-menu li {
  width: 100%;
}
.primary-menu .sub-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-colour);
  white-space: nowrap;
}
.primary-menu .sub-menu li a:hover {
  background: var(--bg-dark3);
  color: var(--primary-blue);
}

/* Header layout zones */
.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-center {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header-right a {
  margin-left: 0.5rem;
}
.menu-toggle {
  display: none;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  margin-right: 1rem;
}
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--text-colour);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.menu-toggle::before {
  top: 6px;
}
.menu-toggle span {
  top: 13px;
}
.menu-toggle::after {
  bottom: 6px;
}
/* Toggle open/close states */
.primary-menu.open {
  display: flex !important;
  flex-direction: column;
}

/* Footer */
footer.site-footer {
  background: var(--bg-dark2);
  padding: 2rem 0;
  border-top: 1px solid var(--border-colour);
}
footer.site-footer .footer-widgets {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
}
footer.site-footer .footer-widgets div {
  flex: 1 1 200px;
  min-width: 200px;
}
footer.site-footer .copyright {
  text-align: center;
  margin-top: 2rem;
  color: var(--muted-text);
}

/* Responsive utilities */
@media (max-width: 768px) {
  /* Mobile navigation and header behaviour */
  .header-center {
    justify-content: flex-end;
  }
  .menu-toggle {
    display: block;
  }
  .primary-menu {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: var(--bg-dark2);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem;
    border-bottom: 1px solid var(--border-colour);
    display: none;
  }
  .primary-menu ul {
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .primary-menu li {
    width: 100%;
  }
  .primary-menu .sub-menu {
    position: relative;
    top: 0;
    left: 0;
    border: none;
    border-left: 2px solid var(--border-colour);
    margin-left: 1rem;
    margin-top: 0.5rem;
    display: none;
  }
  .primary-menu .menu-item-has-children.open > .sub-menu {
    display: block;
  }
}