/*

Theme Name: Frost Child (Security Hardened + DEGEN DESIGNER)

Template: frost

Description: Child theme for Stoic Disciples with premium design patterns

Version: 2.0.0

*/



/* ============================================

   CSS CUSTOM PROPERTIES - Design System Tokens

   ============================================ */

:root {

  /* Brand Colors */

  --sd-primary: #00D9C5;

  --sd-secondary: #1a1a2e;

  --sd-accent: #FFD700;

  --sd-background: #0f0f1a;

  --sd-text: #e0e0e0;

  --sd-text-muted: #808080;

  --sd-surface: #1a1a2e;

  --sd-border: rgba(255,255,255,0.1);



  /* Timing */

  --duration-fast: 150ms;

  --duration-normal: 250ms;

  --duration-slow: 400ms;



  /* Easings */

  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);

  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);



  /* Glassmorphism */

  --glass-bg: rgba(26, 26, 46, 0.7);

  --glass-border: rgba(255, 255, 255, 0.1);

  --glass-blur: 12px;



  /* Glow colors */

  --glow-primary: rgba(0, 217, 197, 0.4);

  --glow-accent: rgba(255, 215, 0, 0.3);

}



/* ============================================

   FOCUS INDICATORS (Accessibility)

   ============================================ */

a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible,

select:focus-visible {

  outline: 2px solid var(--sd-primary) !important;

  outline-offset: 2px !important;

}



/* ============================================

   SCROLL REVEAL ANIMATIONS

   ============================================ */

@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



@keyframes slideInLeft {

  from {

    opacity: 0;

    transform: translateX(-30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes slideInRight {

  from {

    opacity: 0;

    transform: translateX(30px);

  }

  to {

    opacity: 1;

    transform: translateX(0);

  }

}



@keyframes shimmer {

  from { background-position: -200% 0; }

  to { background-position: 200% 0; }

}



@keyframes pulseGlow {

  0%, 100% { box-shadow: 0 0 20px var(--glow-primary); }

  50% { box-shadow: 0 0 40px var(--glow-primary), 0 0 60px var(--glow-accent); }

}



/* Reveal classes - applied via IntersectionObserver */

.sd-reveal {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity var(--duration-slow) var(--ease-out),

              transform var(--duration-slow) var(--ease-out);

}



.sd-reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Staggered children animation */

.sd-stagger > * {

  opacity: 0;

  transform: translateY(20px);

}



.sd-stagger.visible > *:nth-child(1) { animation: fadeUp 0.5s var(--ease-out) forwards 0.1s; }

.sd-stagger.visible > *:nth-child(2) { animation: fadeUp 0.5s var(--ease-out) forwards 0.2s; }

.sd-stagger.visible > *:nth-child(3) { animation: fadeUp 0.5s var(--ease-out) forwards 0.3s; }

.sd-stagger.visible > *:nth-child(4) { animation: fadeUp 0.5s var(--ease-out) forwards 0.4s; }

.sd-stagger.visible > *:nth-child(5) { animation: fadeUp 0.5s var(--ease-out) forwards 0.5s; }

.sd-stagger.visible > *:nth-child(6) { animation: fadeUp 0.5s var(--ease-out) forwards 0.6s; }

.sd-stagger.visible > *:nth-child(7) { animation: fadeUp 0.5s var(--ease-out) forwards 0.7s; }

.sd-stagger.visible > *:nth-child(8) { animation: fadeUp 0.5s var(--ease-out) forwards 0.8s; }



/* ============================================

   GLASSMORPHISM UTILITIES

   ============================================ */

.sd-glass {

  background: var(--glass-bg);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  border: 1px solid var(--glass-border);

  border-radius: 16px;

}



.sd-glass-hover {

  transition: all var(--duration-normal) var(--ease-out);

}



.sd-glass-hover:hover {

  background: rgba(26, 26, 46, 0.85);

  border-color: rgba(0, 217, 197, 0.3);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),

              0 0 0 1px rgba(0, 217, 197, 0.2);

}



/* ============================================

   MICRO-INTERACTIONS

   ============================================ */

.sd-hover-lift {

  transition: transform var(--duration-normal) var(--ease-out),

              box-shadow var(--duration-normal) var(--ease-out);

}



.sd-hover-lift:hover {

  transform: translateY(-6px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}



.sd-hover-glow {

  transition: box-shadow var(--duration-normal) var(--ease-out);

}



.sd-hover-glow:hover {

  box-shadow: 0 0 30px var(--glow-primary);

}



.sd-hover-scale {

  transition: transform var(--duration-fast) var(--ease-spring);

}



.sd-hover-scale:hover {

  transform: scale(1.02);

}



/* ============================================

   BENTO GRID SYSTEM

   ============================================ */

.sd-bento-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

}



.sd-bento-card {

  background: var(--sd-surface);

  border: 1px solid var(--sd-border);

  border-radius: 16px;

  padding: 32px;

  position: relative;

  overflow: hidden;

  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}



.sd-bento-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: transparent;

  transition: background 0.3s ease;

}



.sd-bento-card:hover {

  border-color: rgba(0, 217, 197, 0.5);

  transform: translateY(-6px);

  box-shadow:

    0 20px 40px rgba(0, 0, 0, 0.3),

    0 0 0 1px rgba(0, 217, 197, 0.2);

}



.sd-bento-card:hover::before {

  background: linear-gradient(90deg, var(--sd-primary), var(--sd-accent));

}



/* Featured cards span 2 columns */

.sd-bento-featured {

  grid-column: span 2;

  background: linear-gradient(135deg,

    var(--sd-surface) 0%,

    rgba(0, 217, 197, 0.08) 100%);

  border-color: rgba(0, 217, 197, 0.25);

}



.sd-bento-featured::before {

  background: linear-gradient(90deg, var(--sd-primary), transparent);

}



@media (max-width: 1024px) {

  .sd-bento-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .sd-bento-featured {

    grid-column: span 2;

  }

}



@media (max-width: 768px) {

  .sd-bento-grid {

    grid-template-columns: 1fr;

    gap: 16px;

  }

  .sd-bento-featured {

    grid-column: span 1;

  }

  .sd-bento-card {

    padding: 24px;

  }

}



/* ============================================

   CATEGORY PILLARS (8 pillars)

   ============================================ */

.sd-pillars-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

  max-width: 1200px;

  margin: 60px auto;

  padding: 0 20px;

}



.sd-pillar {

  background: var(--glass-bg);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  border: 1px solid var(--glass-border);

  border-radius: 16px;

  padding: 32px 24px;

  text-align: center;

  transition: all var(--duration-normal) var(--ease-out);

  position: relative;

  overflow: hidden;

}



.sd-pillar::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, var(--sd-primary), var(--sd-accent));

  transform: scaleX(0);

  transition: transform var(--duration-normal) var(--ease-out);

}



.sd-pillar:hover {

  transform: translateY(-8px);

  border-color: rgba(0, 217, 197, 0.4);

  box-shadow:

    0 20px 50px rgba(0, 0, 0, 0.4),

    0 0 40px var(--glow-primary);

}



.sd-pillar:hover::after {

  transform: scaleX(1);

}



.sd-pillar-icon {

  font-size: 2.5rem;

  margin-bottom: 16px;

}



.sd-pillar h3 {

  color: var(--sd-text);

  font-size: 1.25rem;

  margin-bottom: 8px;

  font-weight: 600;

}



.sd-pillar p {

  color: var(--sd-text-muted);

  font-size: 0.875rem;

  line-height: 1.5;

  margin: 0;

}



/* Featured pillars (first 2) */

.sd-pillar:nth-child(1),

.sd-pillar:nth-child(2) {

  grid-column: span 2;

  background: linear-gradient(135deg,

    var(--glass-bg) 0%,

    rgba(255, 215, 0, 0.05) 100%);

}



@media (max-width: 1024px) {

  .sd-pillars-grid {

    grid-template-columns: repeat(2, 1fr);

  }

  .sd-pillar:nth-child(1),

  .sd-pillar:nth-child(2) {

    grid-column: span 1;

  }

}



@media (max-width: 600px) {

  .sd-pillars-grid {

    grid-template-columns: 1fr;

  }

}



/* ============================================

   QUOTE CARDS (Stoic quotes with glow)

   ============================================ */

.sd-quote-card {

  background: var(--glass-bg);

  backdrop-filter: blur(var(--glass-blur));

  -webkit-backdrop-filter: blur(var(--glass-blur));

  border: 1px solid var(--glass-border);

  border-radius: 20px;

  padding: 40px;

  position: relative;

  overflow: hidden;

  transition: all var(--duration-slow) var(--ease-out);

}



.sd-quote-card::before {

  content: '"';

  position: absolute;

  top: 20px;

  left: 30px;

  font-size: 6rem;

  color: var(--sd-accent);

  opacity: 0.15;

  font-family: Georgia, serif;

  line-height: 1;

}



.sd-quote-card:hover {

  border-color: rgba(255, 215, 0, 0.4);

  box-shadow:

    0 25px 60px rgba(0, 0, 0, 0.4),

    0 0 60px var(--glow-accent);

}



.sd-quote-text {

  font-size: 1.5rem;

  color: var(--sd-text);

  line-height: 1.6;

  font-style: italic;

  margin-bottom: 24px;

  position: relative;

  z-index: 1;

}



.sd-quote-author {

  color: var(--sd-primary);

  font-size: 1.125rem;

  font-weight: 600;

}



.sd-quote-source {

  color: var(--sd-text-muted);

  font-size: 0.875rem;

  margin-top: 4px;

}



/* ============================================

   ARTICLE CARDS (Blog listing)

   ============================================ */

.sd-article-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  gap: 24px;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

}



.sd-article-card {

  background: var(--sd-surface);

  border: 1px solid var(--sd-border);

  border-radius: 16px;

  overflow: hidden;

  transition: all var(--duration-normal) var(--ease-out);

}



.sd-article-card:hover {

  transform: translateY(-8px);

  border-color: rgba(0, 217, 197, 0.4);

  box-shadow:

    0 20px 40px rgba(0, 0, 0, 0.3),

    0 0 30px var(--glow-primary);

}



.sd-article-card img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  transition: transform var(--duration-slow) var(--ease-out);

}



.sd-article-card:hover img {

  transform: scale(1.05);

}



.sd-article-content {

  padding: 24px;

}



.sd-article-category {

  display: inline-block;

  background: rgba(0, 217, 197, 0.15);

  color: var(--sd-primary);

  padding: 4px 12px;

  border-radius: 20px;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  margin-bottom: 12px;

}



.sd-article-card h3 {

  color: var(--sd-text);

  font-size: 1.25rem;

  margin-bottom: 12px;

  line-height: 1.4;

}



.sd-article-card p {

  color: var(--sd-text-muted);

  font-size: 0.9375rem;

  line-height: 1.6;

}



/* ============================================

   CTA BUTTONS

   ============================================ */

.sd-btn {

  display: inline-block;

  padding: 14px 32px;

  border-radius: 8px;

  font-weight: 600;

  text-decoration: none;

  transition: all var(--duration-normal) var(--ease-out);

  position: relative;

  overflow: hidden;

}



.sd-btn-primary {

  background: var(--sd-primary);

  color: var(--sd-background);

}



.sd-btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 30px var(--glow-primary);

}



.sd-btn-secondary {

  background: transparent;

  color: var(--sd-primary);

  border: 2px solid var(--sd-primary);

}



.sd-btn-secondary:hover {

  background: rgba(0, 217, 197, 0.1);

  transform: translateY(-2px);

}



.sd-btn-accent {

  background: linear-gradient(135deg, var(--sd-accent), #FFA500);

  color: var(--sd-background);

}



.sd-btn-accent:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 30px var(--glow-accent);

}



/* ============================================

   DIVIDERS & DECORATIONS

   ============================================ */

.sd-divider {

  height: 1px;

  background: linear-gradient(90deg,

    transparent,

    var(--sd-border) 20%,

    var(--sd-border) 80%,

    transparent

  );

  margin: 60px auto;

  max-width: 800px;

}



.sd-section {

  padding: 80px 0;

  position: relative;

}



.sd-section::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 1px;

  background: linear-gradient(90deg,

    transparent,

    rgba(0, 217, 197, 0.3) 50%,

    transparent

  );

}



/* ============================================

   GRADIENT TEXT

   ============================================ */

.sd-gradient-text {

  background: linear-gradient(135deg, var(--sd-primary), var(--sd-accent));

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

}



/* ============================================

   REDUCED MOTION

   ============================================ */

@media (prefers-reduced-motion: reduce) {

  .sd-reveal,

  .sd-stagger > * {

    opacity: 1;

    transform: none;

    transition: none;

    animation: none;

  }



  *,

  *::before,

  *::after {

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;

  }

}



/* ============================================
   HOME PAGE LAYOUT FIXES (2026-01-30)
   ============================================ */

/* Hide WordPress page title on home page */
.home .entry-title,
.home .wp-block-post-title,
.page-id-home .entry-title,
body.home h1.entry-title,
body.home header.entry-header,
.entry-header,
.wp-block-post-title,
.page .entry-title,
h1.wp-block-post-title {
  display: none !important;
}

/* Full-width page content - break out of WordPress container */
.sd-page {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* Ensure hero is full width */
.sd-hero {
  width: 100%;
  max-width: none;
}

/* Remove any WordPress content wrapper padding */
.entry-content,
.wp-block-post-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
}