/**
 * Gold Frame Theme
 * ================
 * Reusable gold frame border styles extracted from homepage design.
 * Provides consistent visual treatment for content containers across the site.
 * 
 * Features:
 * - Gold outer stroke with soft glow
 * - Inner keyline via pseudo-elements
 * - Rounded corners with configurable radius
 * - Subtle card shadow for depth
 * - Dark/light mode support
 * - Print and reduced motion considerations
 */

/* CSS Variables for frame theming */
:root {
  /* Frame colors */
  --frame-gold: #ffd700;
  --frame-gold-2: rgba(255, 215, 0, 0.2);
  --frame-gold-hover: rgba(255, 215, 0, 0.4);
  --frame-gold-glow: rgba(255, 215, 0, 0.15);
  
  /* Frame dimensions */
  --frame-border-width: 1.5px;
  --frame-border-width-inner: 1px;
  --frame-radius: 1.5rem;
  --frame-radius-sm: 1rem;
  --frame-radius-xs: 0.75rem;
  
  /* Frame shadows and glows */
  --frame-shadow: 0 4px 32px 0 #111;
  --frame-shadow-hover: 0 12px 40px rgba(255, 215, 0, 0.15);
  --frame-glow: 0 0 20px rgba(255, 215, 0, 0.3);
  --frame-glow-intense: 0 0 40px rgba(255, 215, 0, 0.5);
  
  /* Frame backgrounds */
  --frame-bg: #222;
  --frame-bg-overlay: linear-gradient(135deg, rgba(34, 34, 34, 0.8), rgba(34, 34, 34, 0.6));
}

/* Light mode adjustments */
@media (prefers-color-scheme: light) {
  :root {
    --frame-gold: #b8860b;
    --frame-gold-2: rgba(184, 134, 11, 0.3);
    --frame-gold-hover: rgba(184, 134, 11, 0.5);
    --frame-gold-glow: rgba(184, 134, 11, 0.2);
    --frame-shadow: 0 4px 32px rgba(0, 0, 0, 0.15);
    --frame-shadow-hover: 0 12px 40px rgba(184, 134, 11, 0.25);
    --frame-bg: #f5f5f5;
    --frame-bg-overlay: linear-gradient(135deg, rgba(245, 245, 245, 0.9), rgba(245, 245, 245, 0.7));
  }
}

/* Base frame-gold utility class */
.frame-gold {
  background: var(--frame-bg);
  border: var(--frame-border-width) solid var(--frame-gold);
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Inner keyline effect using ::before */
.frame-gold::before {
  content: '';
  position: absolute;
  inset: var(--frame-border-width);
  border: var(--frame-border-width-inner) solid var(--frame-gold-2);
  border-radius: calc(var(--frame-radius) - var(--frame-border-width));
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* Outer glow effect using ::after */
.frame-gold::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--frame-border-width));
  border-radius: var(--frame-radius);
  box-shadow: var(--frame-glow);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

/* Hover state */
.frame-gold:hover {
  border-color: var(--frame-gold-hover);
  box-shadow: var(--frame-shadow-hover);
  transform: translateY(-2px);
}

.frame-gold:hover::after {
  opacity: 1;
}

/* Frame content wrapper to ensure proper z-index */
.frame-gold > * {
  position: relative;
  z-index: 2;
}

/* Modifier: Padded frame */
.frame-gold.frame-padded {
  padding: 2.5rem 3rem;
}

@media (max-width: 900px) {
  .frame-gold.frame-padded {
    padding: 1.5rem;
  }
}

@media (max-width: 600px) {
  .frame-gold.frame-padded {
    padding: 1rem;
  }
}

/* Modifier: Bleed decorations */
.frame-gold.frame-bleed-top::before,
.frame-gold.frame-bleed-bottom::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--frame-gold-2) 25%, 
    var(--frame-gold) 50%, 
    var(--frame-gold-2) 75%, 
    transparent 100%
  );
  pointer-events: none;
}

.frame-gold.frame-bleed-top::before {
  top: 0;
}

.frame-gold.frame-bleed-bottom::after {
  bottom: 0;
}

/* Animation for bleed lines */
@media (prefers-reduced-motion: no-preference) {
  .frame-gold.frame-bleed-top::before,
  .frame-gold.frame-bleed-bottom::after {
    background: linear-gradient(90deg, 
      transparent 0%, 
      var(--frame-gold-2) 25%, 
      var(--frame-gold) 50%, 
      var(--frame-gold-2) 75%, 
      transparent 100%
    );
    background-size: 200% 100%;
    animation: frame-scan 8s linear infinite;
  }
  
  @keyframes frame-scan {
    0% {
      background-position: 200% center;
    }
    100% {
      background-position: -200% center;
    }
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .frame-gold,
  .frame-gold::before,
  .frame-gold::after {
    transition: none !important;
    animation: none !important;
  }
  
  .frame-gold:hover {
    transform: none;
  }
  
  .frame-gold:hover::after {
    opacity: 0;
  }
}

/* Print styles */
@media print {
  .frame-gold {
    background: white !important;
    border: 1px solid #666 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  
  .frame-gold::before,
  .frame-gold::after,
  .frame-gold.frame-bleed-top::before,
  .frame-gold.frame-bleed-bottom::after {
    display: none !important;
  }
  
  .frame-gold:hover {
    transform: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .frame-gold {
    border-width: 2px;
    border-color: var(--frame-gold);
    background: var(--frame-bg);
  }
  
  .frame-gold::after {
    display: none;
  }
}

/* Ensure no conflicts with code blocks or KaTeX */
.frame-gold pre,
.frame-gold code,
.frame-gold .katex,
.frame-gold .katex-display {
  /* Inherit their own styles, not frame styles */
  border: initial;
  background: initial;
  box-shadow: initial;
}

/* Additional size variants */
.frame-gold.frame-sm {
  border-radius: var(--frame-radius-sm);
}

.frame-gold.frame-xs {
  border-radius: var(--frame-radius-xs);
}

/* Nested frame prevention */
.frame-gold .frame-gold {
  border: none;
  box-shadow: none;
  background: transparent;
}

.frame-gold .frame-gold::before,
.frame-gold .frame-gold::after {
  display: none;
}