/*
Theme Name: Rampage Gym
Theme URI: https://rampagegym.example.com
Author: Rampage Gym
Author URI: https://rampagegym.example.com
Description: A lightweight, fully Elementor-editable WordPress theme built for Rampage Gym & Spa, Kosgi. This theme hands page-building over completely to Elementor (like Hello Elementor) — no hard-coded layout, no page builder lock-in, no bloat. Header/Footer support Elementor Theme Builder (Pro) if installed, otherwise clean PHP fallbacks are used.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: rampage-gym
Tags: gym, fitness, elementor, one-page, business
*/

/* ==========================================================================
   Base reset — Elementor controls all real layout/design.
   This file only sets sane defaults + a modern gym-brand fallback look
   for anything Elementor doesn't touch (e.g. widget areas, 404, search).
   ========================================================================== */

:root{
  --rg-black:#0b0b0d;
  --rg-charcoal:#161619;
  --rg-red:#e4222f;
  --rg-red-dark:#b3121c;
  --rg-white:#f5f5f5;
  --rg-gray:#9a9a9a;
  --rg-font-heading:'Oswald', 'Arial Narrow', sans-serif;
  --rg-font-body:'Inter', -apple-system, sans-serif;
}

*{box-sizing:border-box;}

body{
  background:var(--rg-black);
  color:var(--rg-white);
  font-family:var(--rg-font-body);
  margin:0;
  line-height:1.6;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--rg-font-heading);
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--rg-white);
}

a{ color:var(--rg-red); text-decoration:none; }
a:hover{ color:var(--rg-red-dark); }

img{ max-width:100%; height:auto; display:block; }

.rg-container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* Fallback header/footer (used only when Elementor Pro Theme Builder is NOT active) */
.rg-site-header{
  background:var(--rg-black);
  border-bottom:2px solid var(--rg-red);
  position:sticky; top:0; z-index:999;
}
.rg-site-header .rg-container{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
}
.rg-logo{ font-family:var(--rg-font-heading); font-size:24px; font-weight:700; color:var(--rg-white); }
.rg-logo span{ color:var(--rg-red); }

.rg-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.rg-nav a{
  color:var(--rg-white); font-family:var(--rg-font-heading);
  text-transform:uppercase; font-size:14px; letter-spacing:.5px;
}
.rg-nav a:hover{ color:var(--rg-red); }

.rg-site-footer{
  background:var(--rg-charcoal);
  border-top:2px solid var(--rg-red);
  padding:40px 0 20px;
  color:var(--rg-gray);
  font-size:14px;
  text-align:center;
}
.rg-site-footer a{ color:var(--rg-white); }

/* Buttons — matches what's used inside Elementor content too */
.rg-btn{
  display:inline-block;
  background:var(--rg-red);
  color:#fff !important;
  font-family:var(--rg-font-heading);
  text-transform:uppercase;
  letter-spacing:1px;
  padding:14px 32px;
  border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.rg-btn:hover{ background:var(--rg-red-dark); transform:translateY(-2px); }

/* Fluent Forms — dark theme override so forms match the gym look */
.fluentform{
  background:var(--rg-charcoal);
  padding:30px;
  border-radius:6px;
  border:1px solid #262626;
}
.fluentform label{ color:var(--rg-white) !important; font-weight:600; }
.fluentform input[type=text],
.fluentform input[type=email],
.fluentform input[type=tel],
.fluentform input[type=number],
.fluentform textarea,
.fluentform select{
  background:#0f0f11 !important;
  border:1px solid #333 !important;
  color:var(--rg-white) !important;
  border-radius:4px !important;
}
.fluentform .ff-btn, .fluentform button[type=submit]{
  background:var(--rg-red) !important;
  border:none !important;
  text-transform:uppercase;
  font-family:var(--rg-font-heading);
  letter-spacing:1px;
}
.fluentform .ff-btn:hover, .fluentform button[type=submit]:hover{
  background:var(--rg-red-dark) !important;
}

/* Simple 404 / search fallback layout */
.rg-fallback-page{ padding:100px 20px; text-align:center; }

@media (max-width:782px){
  .rg-nav ul{ gap:16px; flex-wrap:wrap; }
  .rg-site-header .rg-container{ flex-direction:column; gap:12px; }
}