/*
Theme Name:  RTN Trading — GeneratePress Child
Theme URI:   https://generatepress.com
Description: RTN Trading homepage. Avool-style monochrome hero: pure black, dotted grid, massive centered Inter headline, pill badge and buttons, six glowing orbs traveling the grid lines.
Author:      Manny
Template:    generatepress
Version:     4.1.0
Text Domain: gp-journal-child
*/

/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------ */
:root {
  --rtn-bg:        #000000;
  --rtn-raise:     #0A0A0A;
  --rtn-line:      rgba(255,255,255,0.12);
  --rtn-line-soft: rgba(255,255,255,0.06);
  --rtn-dot:       rgba(255,255,255,0.16);
  --rtn-text:      #F5F5F5;
  --rtn-text-soft: #8A8A8A;
  --rtn-font:      "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --rtn-grid:      120px;
  --rtn-pill:      999px;
}

/* ------------------------------------------------------------------
   Global dark skin — every page
------------------------------------------------------------------ */
body {
  background-color: var(--rtn-bg);
  color: var(--rtn-text);
  font-family: var(--rtn-font);
}
#page, .grid-container { background: transparent; }
.site-content { background: transparent; }

/* Homepage only: dotted grid canvas + full-bleed layout */
body.tj-home {
  background-image:
    radial-gradient(circle 3px at 0 0, var(--rtn-dot) 2px, transparent 3px),
    linear-gradient(var(--rtn-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rtn-line-soft) 1px, transparent 1px);
  background-size: var(--rtn-grid) var(--rtn-grid);
}
body.tj-home #page,
body.tj-home .grid-container { max-width: none; padding: 0; }
body.tj-home .site-content { padding: 0; }

/* ------------------------------------------------------------------
   GP header + nav + footer, dark on every page
------------------------------------------------------------------ */
.site-header,
.main-navigation,
.main-navigation .inside-navigation {
  background: transparent;
  border: 0;
}
.site-header .inside-header { padding: 20px 32px; }
.main-title a,
.site-branding a {
  color: var(--rtn-text);
  font-family: var(--rtn-font);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-description { color: var(--rtn-text-soft); }
.main-navigation a {
  color: var(--rtn-text-soft);
  font-family: var(--rtn-font);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.15s ease;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--rtn-text);
  background: transparent;
}
.main-navigation .menu-toggle,
button.menu-toggle,
.main-navigation ul ul { background: var(--rtn-raise); color: var(--rtn-text); }
.site-footer {
  background: transparent;
  border-top: 1px solid var(--rtn-line-soft);
  color: var(--rtn-text-soft);
}
.site-footer a { color: var(--rtn-text-soft); }
.site-info { color: var(--rtn-text-soft); }

/* ------------------------------------------------------------------
   Inner pages — content styled dark
------------------------------------------------------------------ */
body:not(.tj-home) .site-content { padding-top: 24px; }

.separate-containers .inside-article,
.separate-containers .site-main > *,
.one-container .inside-article,
.comments-area,
.page-header,
.inside-page-header {
  background: var(--rtn-raise);
  border: 1px solid var(--rtn-line-soft);
  border-radius: 16px;
}

.entry-title,
.entry-title a,
h1, h2, h3, h4, h5, h6 {
  color: var(--rtn-text);
  font-family: var(--rtn-font);
  letter-spacing: -0.02em;
}
.entry-title a:hover { color: var(--rtn-text-soft); }

.entry-content, .entry-summary, p, li {
  color: #C9C9C9;
}
.entry-meta, .posted-on, .byline, .cat-links, .tags-links {
  color: var(--rtn-text-soft);
  font-size: 13px;
}
.entry-meta a, .cat-links a, .tags-links a { color: var(--rtn-text-soft); }

.entry-content a, .entry-summary a, .comment-content a {
  color: var(--rtn-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rtn-line);
}
.entry-content a:hover { text-decoration-color: var(--rtn-text); }

.read-more, a.read-more, .paging-navigation a, .post-navigation a {
  color: var(--rtn-text);
}

blockquote {
  border-left: 2px solid var(--rtn-line);
  color: var(--rtn-text-soft);
}
code, pre {
  background: #050505;
  border: 1px solid var(--rtn-line-soft);
  color: #C9C9C9;
  border-radius: 8px;
}
hr { border-color: var(--rtn-line-soft); }

input[type="text"], input[type="email"], input[type="url"],
input[type="search"], input[type="password"], textarea, select {
  background: var(--rtn-raise);
  border: 1px solid var(--rtn-line);
  color: var(--rtn-text);
  border-radius: 10px;
}
input[type="submit"], button, .button, .wp-block-button__link {
  background: var(--rtn-text);
  color: var(--rtn-bg);
  border: 1px solid var(--rtn-text);
  border-radius: var(--rtn-pill);
  font-family: var(--rtn-font);
  font-weight: 500;
  transition: background 0.15s ease;
}
input[type="submit"]:hover, button:hover, .button:hover { background: #D9D9D9; color: var(--rtn-bg); }

.sidebar .widget, .footer-widgets {
  background: var(--rtn-raise);
  border: 1px solid var(--rtn-line-soft);
  border-radius: 16px;
  color: #C9C9C9;
}
.widget-title { color: var(--rtn-text); }

/* ------------------------------------------------------------------
   Hero — single viewport, centered
------------------------------------------------------------------ */
.rtn-hero {
  position: relative;
  overflow: hidden;
  min-height: max(560px, calc(100vh - 120px));
  min-height: max(560px, calc(100svh - 120px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 88px;
}

.rtn-hero > * { position: relative; z-index: 1; }

.rtn-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--rtn-text);
  background: var(--rtn-raise);
  border: 1px solid var(--rtn-line);
  border-radius: var(--rtn-pill);
  padding: 10px 22px;
  text-decoration: none;
  margin-bottom: 44px;
  transition: border-color 0.15s ease;
}
.rtn-badge:hover { border-color: rgba(255,255,255,0.32); color: var(--rtn-text); }
.rtn-badge::after { content: "›"; color: var(--rtn-text-soft); font-size: 17px; line-height: 1; }

.rtn-hero h1 {
  font-family: var(--rtn-font);
  font-weight: 800;
  font-size: clamp(44px, 7.6vw, 96px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--rtn-text);
  margin: 0 0 26px;
  max-width: 21ch;
}

.rtn-hero__sub {
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.65;
  color: var(--rtn-text-soft);
  max-width: 52ch;
  margin: 0 0 40px;
}

.rtn-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.rtn-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--rtn-text);
  background: var(--rtn-raise);
  border: 1px solid var(--rtn-line);
  border-radius: var(--rtn-pill);
  padding: 13px 26px;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.rtn-btn:hover { border-color: rgba(255,255,255,0.35); color: var(--rtn-text); }
.rtn-btn--primary { background: var(--rtn-text); color: var(--rtn-bg); border-color: var(--rtn-text); }
.rtn-btn--primary:hover { background: #D9D9D9; color: var(--rtn-bg); border-color: #D9D9D9; }
.rtn-btn--primary::after { content: "→"; }

/* ------------------------------------------------------------------
   Orbs — six lights traveling the grid lines
   Grid lines sit at multiples of var(--rtn-grid) (120px).
------------------------------------------------------------------ */
.rtn-orb { position: absolute; z-index: 0; pointer-events: none; opacity: 0; }
.rtn-orb i {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 0 12px 4px rgba(255,255,255,0.5), 0 0 28px 10px rgba(255,255,255,0.16);
}
.rtn-orb--h { height: 2px; width: 70px; margin-top: -0.5px; }
.rtn-orb--v { width: 2px; height: 70px; margin-left: -0.5px; }
.rtn-orb--r { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5)); }
.rtn-orb--r i { right: -4px; top: -3px; }
.rtn-orb--l { background: linear-gradient(270deg, transparent, rgba(255,255,255,0.5)); }
.rtn-orb--l i { left: -4px; top: -3px; }
.rtn-orb--d { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5)); }
.rtn-orb--d i { bottom: -4px; left: -3px; }
.rtn-orb--u { background: linear-gradient(0deg, transparent, rgba(255,255,255,0.5)); }
.rtn-orb--u i { top: -4px; left: -3px; }

@keyframes rtn-go-r { 0% { transform: translateX(-90px); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(110vw); opacity: 0; } }
@keyframes rtn-go-l { 0% { transform: translateX(110vw); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(-90px); opacity: 0; } }
@keyframes rtn-go-d { 0% { transform: translateY(-90px); opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateY(110vh); opacity: 0; } }
@keyframes rtn-go-u { 0% { transform: translateY(110vh); opacity: 0; } 10% { opacity: 1; } 86% { opacity: 1; } 100% { transform: translateY(-90px); opacity: 0; } }

.rtn-o1 { top: calc(var(--rtn-grid) * 1); left: 0; animation: rtn-go-r 10s linear infinite; }
.rtn-o2 { top: calc(var(--rtn-grid) * 3); left: 0; animation: rtn-go-l 14s linear infinite 3s; }
.rtn-o3 { top: calc(var(--rtn-grid) * 5); left: 0; animation: rtn-go-r 12s linear infinite 6.5s; }
.rtn-o4 { left: calc(var(--rtn-grid) * 2); top: 0; animation: rtn-go-d 11s linear infinite 1.5s; }
.rtn-o5 { left: calc(var(--rtn-grid) * 5); top: 0; animation: rtn-go-u 15s linear infinite 5s; }
.rtn-o6 { left: calc(var(--rtn-grid) * 8); top: 0; animation: rtn-go-d 12.5s linear infinite 8.5s; }

@media (prefers-reduced-motion: reduce) {
  .rtn-orb { display: none; }
}

/* ------------------------------------------------------------------
   A11y + responsive
------------------------------------------------------------------ */
a:focus-visible {
  outline: 2px solid var(--rtn-text);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  :root { --rtn-grid: 90px; }
  .rtn-hero { min-height: max(520px, calc(100svh - 100px)); padding-bottom: 64px; }
  .rtn-o3, .rtn-o5, .rtn-o6 { display: none; }
  .rtn-hero__actions { flex-direction: column; align-items: stretch; width: min(320px, 100%); }
  .rtn-btn { justify-content: center; }
}