/* ❄️ FIREFROST GAMING - FROST PALETTE CSS INJECTION
 * Purpose: Transform Ghost Casper theme into Frost-branded site
 * Usage: Ghost Admin → Settings → Code Injection → Site Header
 * Version: 1.0
 * Created: February 14, 2026
 * 
 * INSTRUCTIONS:
 * 1. Copy this entire file
 * 2. Go to Ghost Admin → Settings → Code Injection
 * 3. Paste into "Site Header" section
 * 4. Click Save
 * 5. View site - changes apply immediately
 */

/* ═══════════════════════════════════════════════════════════
   GOOGLE FONTS - Load Orbitron & Inter
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES - Frost Palette
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Frost Colors */
  --frost-primary: #00E5FF;        /* Electric Cyan - Headings, Links */
  --frost-secondary: #01579B;      /* Deep Navy - Buttons, Nav */
  --frost-background: #0A0A0A;     /* Obsidian Black - Main Background */
  --frost-text: #FFFFFF;           /* Pure White - Body Text */
  --frost-border: #00E5FF;         /* Cyan Borders */
  
  /* Accents */
  --frost-glass: rgba(1, 87, 155, 0.1);  /* Glassmorphism background */
  --frost-glow: rgba(0, 229, 255, 0.3);  /* Subtle glow effect */
  
  /* Override Ghost defaults */
  --color-primary: var(--frost-primary);
  --color-secondary: var(--frost-secondary);
  --color-base: var(--frost-text);
  --color-border: var(--frost-border);
  
  /* Typography */
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', monospace;
  
  /* Spacing (16px base) */
  --spacing-sm: 0.5rem;   /* 8px */
  --spacing-md: 1rem;     /* 16px */
  --spacing-lg: 2rem;     /* 32px */
  --spacing-xl: 4rem;     /* 64px */
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL STYLES
   ═══════════════════════════════════════════════════════════ */

body {
  background: var(--frost-background) !important;
  color: var(--frost-text) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}

/* Reset any Ghost light mode styles */
.gh-viewport,
.gh-main,
.gh-page,
.site-main {
  background: var(--frost-background) !important;
  color: var(--frost-text) !important;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.gh-head-brand,
.post-card-title {
  font-family: var(--font-heading) !important;
  color: var(--frost-primary) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

h1 { font-size: 2.5rem !important; }
h2 { font-size: 2rem !important; }
h3 { font-size: 1.5rem !important; }
h4 { font-size: 1.25rem !important; }

p, li, span, div {
  color: var(--frost-text) !important;
}

a {
  color: var(--frost-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a:hover {
  color: var(--frost-text) !important;
  text-decoration: underline !important;
}

code, pre {
  font-family: var(--font-mono) !important;
  background: rgba(0, 229, 255, 0.05) !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: 0 !important;
  padding: 0.25rem 0.5rem !important;
}

/* ═══════════════════════════════════════════════════════════
   HEADER / NAVIGATION
   ═══════════════════════════════════════════════════════════ */

.gh-head {
  background: var(--frost-background) !important;
  border-bottom: 2px solid var(--frost-border) !important;
  backdrop-filter: blur(10px) !important;
}

.gh-head-brand,
.gh-head-menu a {
  color: var(--frost-text) !important;
  font-family: var(--font-heading) !important;
  font-weight: 500 !important;
}

.gh-head-menu a:hover {
  color: var(--frost-primary) !important;
}

/* Logo styling (if you upload Firefrost emblem) */
.gh-head-logo img {
  height: 48px !important;
  filter: drop-shadow(0 0 8px var(--frost-glow)) !important;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

button,
.gh-btn,
.gh-button,
input[type="submit"],
a.button {
  background: var(--frost-secondary) !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: 0 !important; /* Sharp corners = Frost style */
  color: var(--frost-text) !important;
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

button:hover,
.gh-btn:hover,
.gh-button:hover,
input[type="submit"]:hover,
a.button:hover {
  background: var(--frost-primary) !important;
  color: var(--frost-background) !important;
  border-color: var(--frost-primary) !important;
  box-shadow: 0 0 16px var(--frost-glow) !important;
}

/* Primary CTA buttons (extra emphasis) */
.gh-btn-primary,
.button-primary {
  background: var(--frost-primary) !important;
  color: var(--frost-background) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════
   CARDS (Post Cards, Feature Cards)
   ═══════════════════════════════════════════════════════════ */

.post-card,
.gh-card,
article.post {
  background: var(--frost-glass) !important;
  backdrop-filter: blur(10px) !important; /* Glassmorphism effect */
  border: 1px solid var(--frost-border) !important;
  border-radius: 0 !important; /* Sharp corners */
  box-shadow: none !important; /* Flat design */
  padding: var(--spacing-md) !important;
  transition: all 0.2s ease !important;
}

.post-card:hover,
.gh-card:hover {
  border-color: var(--frost-primary) !important;
  box-shadow: 0 0 24px var(--frost-glow) !important;
  transform: translateY(-2px) !important;
}

.post-card-title,
.gh-card-title {
  color: var(--frost-primary) !important;
  font-family: var(--font-heading) !important;
}

.post-card-excerpt,
.gh-card-excerpt {
  color: var(--frost-text) !important;
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION (Homepage)
   ═══════════════════════════════════════════════════════════ */

.gh-canvas {
  background: var(--frost-background) !important;
}

/* If you add a custom hero section with class .hero */
.hero {
  background: linear-gradient(
    180deg,
    rgba(10, 10, 10, 0.95) 0%,
    var(--frost-background) 100%
  ) !important;
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: var(--spacing-xl) var(--spacing-md) !important;
}

.hero h1 {
  font-size: 3.5rem !important;
  margin-bottom: var(--spacing-md) !important;
  text-shadow: 0 0 20px var(--frost-glow) !important;
}

.hero p {
  font-size: 1.25rem !important;
  margin-bottom: var(--spacing-lg) !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

.gh-foot {
  background: var(--frost-background) !important;
  border-top: 2px solid var(--frost-border) !important;
  color: var(--frost-text) !important;
  padding: var(--spacing-lg) var(--spacing-md) !important;
}

.gh-foot a {
  color: var(--frost-primary) !important;
}

.gh-foot a:hover {
  color: var(--frost-text) !important;
}

/* ═══════════════════════════════════════════════════════════
   FORMS (Subscribe, Contact)
   ═══════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  background: var(--frost-glass) !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: 0 !important;
  color: var(--frost-text) !important;
  font-family: var(--font-body) !important;
  padding: 0.75rem !important;
  transition: all 0.2s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--frost-primary) !important;
  box-shadow: 0 0 8px var(--frost-glow) !important;
  outline: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem !important;
  }
  
  .hero p {
    font-size: 1rem !important;
  }
  
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.5rem !important; }
  
  .post-card,
  .gh-card {
    margin-bottom: var(--spacing-md) !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   CUSTOM UTILITY CLASSES
   ═══════════════════════════════════════════════════════════ */

/* Frost Card (for custom layouts) */
.frost-card {
  background: var(--frost-glass) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid var(--frost-border) !important;
  border-radius: 0 !important;
  padding: var(--spacing-lg) !important;
  margin-bottom: var(--spacing-md) !important;
}

/* Section divider */
.section-divider {
  border-top: 2px solid var(--frost-border) !important;
  margin: var(--spacing-xl) 0 !important;
  position: relative !important;
}

.section-divider::before {
  content: "❄️" !important;
  position: absolute !important;
  top: -1rem !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--frost-background) !important;
  padding: 0 var(--spacing-md) !important;
  font-size: 1.5rem !important;
}

/* Glow effect utility */
.frost-glow {
  box-shadow: 0 0 16px var(--frost-glow) !important;
}

/* Text align utilities */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

/* ═══════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

/* Focus states (keyboard navigation) */
a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 2px solid var(--frost-primary) !important;
  outline-offset: 2px !important;
}

/* Skip to content link (for screen readers) */
.skip-to-content {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: var(--frost-primary) !important;
  color: var(--frost-background) !important;
  padding: 8px !important;
  text-decoration: none !important;
  z-index: 100 !important;
}

.skip-to-content:focus {
  top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   END OF FROST PALETTE CSS
   
   🔥❄️ Fire + Frost + Forever
   Built for Firefrost Gaming by Catalyst the Second
   ═══════════════════════════════════════════════════════════ */