/**
 * main.css
 * Global styles, design tokens, and shared component styles for the
 * MHM Computer Hungária landing page.
 *
 * Sections:
 *   1. CSS reset
 *   2. Global design tokens (:root and html.dark overrides)
 *   3. Dark-mode component overrides
 *   4. Base element styles (html, body)
 *   5. Gooey cursor overlay
 *   6. Navigation bar
 *   7. Hero section
 *   8. Dark mode toggle button
 *   9. Responsive overrides
 */

/* ─── 1. CSS reset ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ─── 2. Global design tokens ────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --mhm-blue:       #004B93;
  --mhm-blue-light: #0068CC;
  --mhm-blue-muted: #E8F0FA;
  --mhm-red:        #C8102E;
  --mhm-red-light:  #E01E37;
  --mhm-white:      #ffffff;

  /* Greyscale palette */
  --mhm-gray-50:  #f8f9fb;
  --mhm-gray-100: #eef1f5;
  --mhm-gray-300: #c5cdd8;
  --mhm-gray-500: #6b7a8d;
  --mhm-gray-800: #1e2a3a;
  --mhm-gray-900: #0f1923;

  /* Typography */
  --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Gooey cursor — number of grid columns scales with viewport width. */
  --columns: 15;

  /* Cursor overlay appearance (light mode). */
  --cursor-bg:         radial-gradient(rgba(0,104,204,0.18) 20%, transparent);
  --cursor-blend-mode: normal;
  --cursor-radius:     0;

  /* Semantic colour tokens — components reference these, not raw values. */
  --bg-primary:    #ffffff;
  --bg-nav:        rgba(255,255,255,0.9);
  --bg-stats:      rgba(255,255,255,0.85);
  --text-primary:  #0f1923;
  --text-secondary:#6b7a8d;
  --border-subtle: rgba(0,75,147,0.06);
  --border-stats:  #eef1f5;
  --dot-color:     rgba(0,75,147,0.04);

  /* Nav logo filter — no adjustment needed in light mode. */
  --logo-filter: none;

  /* Brand ribbon — thin alternating blue/red band used under the nav bar
     and above the hero stats bar, added to break up the otherwise mostly
     white/monochrome hero area with the company's actual brand colours
     (rather than relying only on the very low-opacity decorative stripes
     already in the hero background). Same colours in both light and dark
     mode — it's a fixed brand accent, not a themed surface. */
  --ribbon-band:   20px; /* width of each colour band */
  --brand-ribbon: repeating-linear-gradient(
    90deg,
    var(--mhm-blue) 0 var(--ribbon-band),
    var(--mhm-red) var(--ribbon-band) calc(var(--ribbon-band) * 2)
  );
  --ribbon-shadow: rgba(0,0,0,0.2); /* directional shadow cast by each ribbon */
}

/* Double the cursor grid density on wider viewports. */
@media screen and (min-width: 53em) {
  :root { --columns: 30; }
}

/* ─── Dark mode token overrides ──────────────────────────────────────────── */
html.dark {
  --bg-primary:    #0a1628;
  --bg-nav:        rgba(10,22,40,0.9);
  --bg-stats:      rgba(10,22,40,0.7);
  --text-primary:  #f0f4f8;
  --text-secondary:rgba(255,255,255,0.5);
  --border-subtle: rgba(255,255,255,0.06);
  --border-stats:  rgba(255,255,255,0.08);
  --dot-color:     rgba(255,255,255,0.025);
  --logo-filter:   brightness(0) invert(1); /* Invert the logo so it reads on dark backgrounds. */
  --cursor-bg:         radial-gradient(rgba(255,255,255,0.25) 20%, transparent);
  --cursor-blend-mode: exclusion;
}

/* ─── Dark mode component overrides ─────────────────────────────────────── */
/* Hero diagonal stripes become more prominent in dark mode. */
html.dark .stripe-1 { background: linear-gradient(180deg, rgba(0,75,147,0.8)  0%, rgba(0,75,147,0.15)  100%); }
html.dark .stripe-2 { background: linear-gradient(180deg, rgba(200,16,46,0.8) 0%, rgba(200,16,46,0.15) 100%); }
html.dark .stripe-3 { background: linear-gradient(180deg, rgba(0,98,204,0.8)  0%, rgba(0,98,204,0.15)  100%); }

/* Stat numbers and CTA elements switch to white in dark mode for contrast. */
html.dark .stat-number                { color: var(--mhm-white); }
html.dark .stat-cta-email             { color: var(--mhm-white); }
html.dark .stat-cta .icon-btn         { border-color: rgba(255,255,255,0.2); color: var(--mhm-white); }
html.dark .nav-title                  { color: var(--mhm-white); }

/* ─── 4. Base element styles ─────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  background: var(--bg-primary);
  color: var(--mhm-gray-800);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s, color 0.5s;
}

/* Subtle warm overlay applied on top of all content via a fixed pseudo-element.
   Creates a very faint film-grain / aged-paper quality to the background. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(255,243,210,0.06);
  pointer-events: none;
  z-index: 9998;
}

/* ─── 5. Gooey cursor overlay ────────────────────────────────────────────── */
/*
 * A full-viewport grid of small cells. The cell under the cursor is
 * briefly lit and fades out, creating a glowing trail effect.
 * An SVG gooey filter merges adjacent lit cells into organic blob shapes.
 * Hidden on touch devices via the responsive override at the bottom.
 */
.cursor {
  height: 100%;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: var(--cursor-blend-mode);
  --size: calc(100vw / var(--columns));
}

/* The grid of cursor cells. */
.cursor__inner {
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--size));
}

/* Individual cell — starts fully transparent; main.js briefly sets opacity:1. */
.cursor__inner-box {
  width: var(--size);
  height: var(--size);
  background: var(--cursor-bg);
  opacity: 0;
  border-radius: var(--cursor-radius);
}

/* Hidden SVG that holds the gooey filter definition. */
.cursor svg { position: absolute; width: 0; height: 0; }

/* Switch the cursor overlay off while the pointer is over the partner grid.
   Every lit cell re-runs the full-viewport gooey blur, and a fast sweep
   across ten hover-animated tiles lights a whole trail of them at once —
   the two effects compete for the same frames and the tile animation
   stutters. The class is toggled by main.js (section 10) on mouseenter /
   mouseleave of the section — a plain class rather than :has(:hover), so
   nothing is re-evaluated on every hover change inside the grid.
   visibility (not display) so no layout happens on the toggle. */
body.over-partners .cursor { visibility: hidden; }

/* ─── 6. Navigation bar ──────────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 1.25rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Only the two properties that actually change at runtime — `all` would
     also animate padding at breakpoints and re-evaluate every property on
     each change, on an element that is already backdrop-blurred. */
  transition: box-shadow 0.3s, background 0.5s;
}

/* Drop shadow added by main.js once the user scrolls past the hero. */
nav.scrolled { box-shadow: 0 1px 20px rgba(0,0,0,0.06); }

/* Brand ribbon along the very bottom edge of the nav bar — see the
   --brand-ribbon token above for why this exists. Replaces the old plain
   1px border-bottom hairline: an absolutely-positioned bar here renders
   just inside where that border used to sit, so keeping both would have
   left a thin stray grey line directly under the ribbon. */
nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--brand-ribbon);
  /* Positive y-offset casts the shadow downward, away from the nav —
     reads as the ribbon sitting slightly above/in front of the page
     content beneath it. */
  box-shadow: 0 3px 6px var(--ribbon-shadow);
  pointer-events: none;
}

/* Logo + company name as one vertically-centred row. The nav centres
   .nav-links on its midline; centring the logo group the same way keeps
   the name on exactly that line, instead of sitting on the image's
   baseline (where inline content lands by default). */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Company name next to the logo — typographically identical to the nav
   links (.nav-links a) so the whole bar reads as one line. Colour stays
   --text-primary here; dark mode overrides it to white in section 3. */
.nav-title {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--text-primary);
  transition: color 0.5s;
}

/* Logo image — constrained by height; width scales automatically. */
.nav-logo img {
  height: 44px;
  width: auto;
  filter: var(--logo-filter);
  transition: filter 0.5s;
}

/* Navigation link list. */
.nav-links { display: flex; gap: 2.5rem; list-style: none; }

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.3s;
  position: relative;
}

/* Animated underline that slides in on hover. */
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--mhm-red);
  transition: width 0.3s;
}
.nav-links a:hover { color: var(--mhm-blue); }
.nav-links a:hover::after { width: 100%; }

/* ─── 7. Hero section ────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr; /* Left: logo. Right: headline + subhead. */
  overflow: hidden;
  background: var(--bg-primary);
  transition: background 0.5s;
}

/* Dot-grid texture layer — same pattern as section backgrounds. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}

/* ── Diagonal decorative stripes (top-left corner) ── */
.hero-stripes {
  position: absolute;
  top: -15%; left: -8%;
  width: 55%; height: 130%;
  pointer-events: none;
  z-index: 1;
}

/* Base stripe — rotated and animated in on page load. */
.stripe {
  position: absolute;
  transform: rotate(-25deg);
  transform-origin: top left;
  border-radius: 2px;
  opacity: 0;
  animation: stripeIn 1.2s ease-out forwards;
}

.stripe-1 { width: 160px; height: 220vh; top: -80px; left:  60px; background: linear-gradient(180deg, rgba(0,75,147,0.8)  0%, rgba(0,75,147,0.15)  100%); animation-delay: 0.2s; }
.stripe-2 { width: 120px; height: 220vh; top: -60px; left: 230px; background: linear-gradient(180deg, rgba(200,16,46,0.8) 0%, rgba(200,16,46,0.15) 100%); animation-delay: 0.2s; }
.stripe-3 { width:  90px; height: 220vh; top: -40px; left: 370px; background: linear-gradient(180deg, rgba(0,75,147,0.8)  0%, rgba(0,75,147,0.15)  100%); animation-delay: 0.2s; }

@keyframes stripeIn {
  from { opacity: 0; transform: rotate(-25deg) translateY(-40px); }
  to   { opacity: 1; transform: rotate(-25deg) translateY(0); }
}

/* ── Hero left column — company logo ── */
.hero-left {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 100;
  padding: 2rem;
}

.hero-logo-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Logo fades in and scales up from 94% to full size on load. */
.hero-logo-container img {
  width: 400px;
  filter: var(--logo-filter);
  transition: filter 0.5s;
  opacity: 0;
  animation: logoFadeIn 1s ease-out 0.5s forwards;
}

@keyframes logoFadeIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Hero right column — headline and typewriter subhead ── */
.hero-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 4rem 0 0;
  position: relative;
  z-index: 10;
}

.hero-headline {
  font-style: italic;
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
  opacity: 0;
  animation: fadeUp 0.8s ease-out 0.7s forwards;
  transition: color 0.5s;
}
.hero-headline .accent { color: var(--mhm-red); }

/* Forces "Stabil adatközponti alapok." to always stay on one line,
   regardless of viewport width, so the headline never breaks into
   three lines. If the phrase is too wide for very narrow screens,
   it will shrink via font-size rather than wrap further. */
.hero-headline-line { white-space: nowrap; }

.hero-subhead {
  font-size: clamp(1.1rem, 1.8vw, 1.8rem);
  font-weight: bold;
  color: var(--text-primary);
  line-height: 1.4;
  opacity: 0;
  animation: fadeUp 0.8s ease-out 0.9s forwards;
  transition: color 0.5s;
}

/* Typewriter cursor — the blinking border-right on the rotating word span. */
.hero-subhead .rotating-word {
  color: var(--mhm-blue);
  font-weight: 600;
  display: inline;
  border-right: 2px solid var(--mhm-red);
  animation: blink 0.6s step-end infinite;
}

@keyframes blink {
  50% { border-color: transparent; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Stats bar — fixed to the bottom of the hero ── */
.hero-stats {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 1.5rem 3rem;
  background: var(--bg-stats);
  backdrop-filter: blur(16px);
  opacity: 0;
  animation: fadeUp 0.8s ease-out 1.2s forwards;
  transition: background 0.5s;
}

/* Brand ribbon along the top edge of the stats bar — bookends the hero
   with the same accent used under the nav (see --brand-ribbon above),
   replacing the old plain 1px hairline border-top. */
.hero-stats::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--brand-ribbon);
  /* Negative y-offset casts the shadow upward, away from the stats bar —
     the mirror of the nav ribbon's shadow, so the two bars read as
     bookending the hero content between them. */
  box-shadow: 0 -3px 6px var(--ribbon-shadow);
  pointer-events: none;
}

.stat { display: flex; align-items: center; gap: 0.6rem; }

.stat-number {
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--mhm-blue);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  transition: color 0.5s;
}

/* 1 px vertical rule between stat items. */
.stat-divider {
  width: 1px; height: 40px;
  background: var(--border-stats);
  margin: 0 2.5rem;
  transition: background 0.5s;
}

/* CTA group — pushed to the far right via margin-left:auto. */
.stat-cta { margin-left: auto; display: flex; align-items: center; gap: 1rem; }

.stat-cta-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: right;
  transition: color 0.5s;
}

.stat-cta-email {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mhm-blue);
  text-decoration: none;
  transition: color 0.3s;
}
.stat-cta-email:hover { color: var(--mhm-red); }

/* Circular icon button wrapping the email glyph. */
.stat-cta .icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1.5px solid var(--mhm-gray-300);
  border-radius: 50%;
  color: var(--mhm-blue);
  text-decoration: none;
  font-size: 1.1rem;
  transition: all 0.3s;
}
.stat-cta .icon-btn:hover {
  border-color: var(--mhm-red);
  background: var(--mhm-red);
  color: var(--mhm-white);
  transform: scale(1.08);
}

/* Mouse-follow glow — a large radial gradient centred on the cursor.
   Repositioned by main.js on every mousemove event. */
.mouse-glow {
  position: fixed;
  left: 0; top: 0;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,75,147,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  /* Positioned via transform (set by main.js) rather than left/top: moving
     left/top re-runs layout every frame, a transform is compositor-only. */
  transform: translate(-50%, -50%);
  transition: transform 0.5s ease-out;
}

/* ─── 8. Dark mode toggle button ─────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  width: 1.5rem;
  text-align: center;
  color: var(--text-secondary);
  transition: transform 0.3s;
}
.theme-toggle:hover { transform: scale(1.2); }
html.dark .theme-toggle { color: var(--mhm-red); }

/* ─── 9. Responsive overrides ────────────────────────────────────────────── */

/* Intermediate breakpoint — tightens the nav before the full mobile
   layout kicks in at 900px. Without this, the logo, full company name,
   five nav links, and the theme toggle no longer fit on one line
   starting around 1024px, causing the nav title to wrap onto a second
   line and overlap the links. */
@media (max-width: 1100px) {
  nav { padding: 1.25rem 1.5rem; }
  .nav-links { gap: 1.25rem; }
  .nav-links a { font-size: 0.8rem; }

  /* Hide the full company name, keep just the logo mark — it already
     contains "MHM", so the name is not lost, just made more compact. */
  .nav-title { display: none; }

  /* Shrink the stat numbers and tighten CTA spacing so "FELÜGYELT
     ADATVAGYON" no longer crowds into "KAPCSOLAT / info@mhm.hu". */
  .stat-number    { font-size: 2.1rem; }
  .stat-cta       { gap: 0.6rem; }
  .stat-cta-label { font-size: 0.68rem; }

  /* Reduce the headline so it doesn't crowd the fixed-width logo column
     at narrower laptop widths. */
  .hero-headline { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
}

@media (max-width: 900px) {
  /* Hide the gooey cursor on touch devices — it serves no purpose there. */
  .cursor { display: none; }

  /* Stack the hero into a single column on smaller viewports. */
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 5rem; }
  .hero-left { padding: 3rem 2rem 1rem; }
  .hero-logo-container img { width: 200px; }
  .hero-right { padding: 1rem 2rem 8rem; text-align: center; }

  /* Wrap stats bar items and hide the dividers that don't make sense stacked. */
  .hero-stats { flex-wrap: wrap; gap: 1rem; padding: 1.5rem 2rem; }
  .stat-divider { display: none; }
  .stat-cta { width: 100%; justify-content: center; margin-top: 0.5rem; }

  /* Tighten nav spacing. */
  nav { padding: 1rem 1.5rem; }
  .nav-links { gap: 1.5rem; }
  .nav-links a { font-size: 0.8rem; }

  /* Scale down the decorative stripes. */
  .stripe-1 { width: 100px; left:  10px; }
  .stripe-2 { width:  80px; left: 110px; }
  .stripe-3 { width:  60px; left: 200px; }
}