/*
Theme Name: Cryptid Whispers Virtual Staffing
Theme URI: https://cryptidwhispers.local
Author: Cryptid Whispers Development Team
Author URI: https://cryptidwhispers.local
Description: Minimalist professional corporate-gothic theme for Cryptid Whispers Virtual Staffing, an Arise-platform IBO and CSP support portal. Features a boxed 1200px layout, 0px border radius, subtle cosmic textures, and left-facing Bigfoot silver silhouette.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cryptidwhispers
Tags: black, charcoal, silver, gothic, minimalist, boxed-layout, portal, custom-menu, accessibility-ready
*/

:root {
  /* Astral Glass Theme Palette */
  --cw-black: #06040A;
  --cw-charcoal: #0B061A;
  --cw-charcoal-deep: #05020D;
  --cw-charcoal-elevated: #160B2C;
  --cw-glass-card: rgba(11, 6, 26, 0.88);
  --cw-glass-border: rgba(138, 79, 255, 0.35);
  --cw-glass-border-hover: rgba(45, 226, 230, 0.5);
  --cw-silver: #D4C5F9;
  --cw-moonlight: #F5F5F5;

  /* Starlight & Cosmic Spectral Accents */
  --cw-cyan-starlight: #2DE2E6;
  --cw-amethyst: #8A4FFF;
  --cw-amethyst-bright: #9D4EDD;
  --cw-elderberry: #5A189A;
  --cw-lavender: #C7B7E2;
  --cw-star-mist: #DDE2FF;
  --cw-gold: #FFE680;
  --cw-crimson-accent: #7A1D34;

  /* Metallics & Borders */
  --cw-pewter: #A393BF;
  --cw-soft-steel: #C8C8C8;
  --cw-border-subtle: rgba(138, 79, 255, 0.30);
  --cw-border-active: #2DE2E6;

  /* Typography */
  --cw-font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cw-font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Layout geometry */
  --cw-max-width: 1200px;
  --cw-radius-sm: 0.5rem;
  --cw-radius: 0.75rem;
  --cw-radius-xl: 1.25rem;
  --cw-radius-2xl: 1.5rem;
  --cw-radius-pill: 9999px;
}

/* Base Reset & Background */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--cw-black);
  color: var(--cw-silver);
  font-family: var(--cw-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

body::before {
  content: '';
  position: fixed;
  top: 10%;
  left: 20%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(138, 79, 255, 0.16) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: 15%;
  right: 15%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(45, 226, 230, 0.09) 0%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cw-font-heading);
  color: var(--cw-moonlight);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0;
}

a {
  color: var(--cw-cyan-starlight);
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

a:hover, a:focus {
  color: var(--cw-moonlight);
  text-decoration: underline;
  text-decoration-color: var(--cw-cyan-starlight);
  text-underline-offset: 4px;
}

/* Boxed Container Architecture */
.cw-page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--cw-black);
  position: relative;
  z-index: 1;
}

.cw-container {
  width: 100%;
  max-width: var(--cw-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Boxed Content Cards: Astral Glass 24px blur, rounded-3xl/2xl, cyan-amethyst borders */
.cw-box {
  background-color: var(--cw-glass-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--cw-glass-border);
  border-radius: var(--cw-radius-2xl);
  position: relative;
  overflow: hidden;
  padding: 2.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 16px 50px rgba(138, 79, 255, 0.22);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.cw-box:hover {
  border-color: var(--cw-glass-border-hover);
  box-shadow: 0 20px 60px rgba(138, 79, 255, 0.30);
}

/* Subtle Cosmic Texture Inside Content Boxes */
.cw-cosmic-bg {
  background-image: 
    radial-gradient(ellipse at 85% 15%, rgba(138, 79, 255, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 15% 85%, rgba(45, 226, 230, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(199, 183, 226, 0.04) 0%, transparent 70%);
}

/* Watermark: Bigfoot silhouette at bottom-right, 4-6% opacity */
.cw-watermark-bigfoot::after {
  content: '';
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  width: 140px;
  height: 190px;
  background-image: url('assets/images/bigfoot-silhouette.svg');
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  opacity: 0.05;
  pointer-events: none;
  z-index: 1;
}

/* Buttons: Rounded, glowing gradients, high contrast */
.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cw-font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.75rem 1.6rem;
  border-radius: var(--cw-radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out;
}

.cw-btn-primary {
  background: linear-gradient(135deg, var(--cw-amethyst) 0%, var(--cw-elderberry) 100%);
  color: #FFFFFF;
  border-color: rgba(45, 226, 230, 0.4);
  box-shadow: 0 4px 20px rgba(138, 79, 255, 0.4);
}

.cw-btn-primary:hover, .cw-btn-primary:focus {
  background: linear-gradient(135deg, var(--cw-amethyst-bright) 0%, #7B2CBF 100%);
  border-color: var(--cw-cyan-starlight);
  box-shadow: 0 6px 25px rgba(138, 79, 255, 0.6);
  color: #FFFFFF;
}

.cw-btn-secondary {
  background-color: rgba(12, 7, 32, 0.8);
  color: var(--cw-silver);
  border-color: var(--cw-border-subtle);
}

.cw-btn-secondary:hover, .cw-btn-secondary:focus {
  background-color: rgba(26, 14, 56, 0.9);
  border-color: var(--cw-cyan-starlight);
  color: var(--cw-moonlight);
}

.cw-btn-cyan {
  background: rgba(45, 226, 230, 0.15);
  color: var(--cw-cyan-starlight);
  border-color: rgba(45, 226, 230, 0.5);
  box-shadow: 0 0 15px rgba(45, 226, 230, 0.25);
}

.cw-btn-cyan:hover {
  background: rgba(45, 226, 230, 0.28);
  color: #FFFFFF;
  border-color: var(--cw-cyan-starlight);
  box-shadow: 0 0 20px rgba(45, 226, 230, 0.45);
}

/* Forms: Frosted glass, rounded corners, cyan focus */
.cw-form-group {
  margin-bottom: 1.5rem;
}

.cw-form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--cw-moonlight);
  margin-bottom: 0.5rem;
  letter-spacing: 0.02em;
}

.cw-form-control {
  width: 100%;
  background-color: var(--cw-charcoal-deep);
  border: 1px solid var(--cw-border-subtle);
  border-radius: var(--cw-radius);
  padding: 0.75rem 1rem;
  color: var(--cw-moonlight);
  font-family: var(--cw-font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cw-form-control:focus {
  border-color: var(--cw-cyan-starlight);
  box-shadow: 0 0 0 2px rgba(45, 226, 230, 0.25);
}

/* Accessibility Focus Ring */
:focus-visible {
  outline: 2px solid var(--cw-cyan-starlight);
  outline-offset: 3px;
}