/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ===== PLATO MATH DESIGN SYSTEM ===== */
:root {
  /* Core Colors */
  --background: 0 0% 100%;
  --foreground: 220 25% 25%;

  /* Card & Surface Colors */
  --card: 0 0% 100%;
  --card-foreground: 220 25% 25%;
  --surface: 207 12% 91%;
  --surface-foreground: 220 25% 25%;

  /* Primary Orange Theme */
  --primary: 18 95% 60%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 18 100% 70%;
  --primary-glow: 18 85% 65%;

  /* Secondary Deep Blue/Teal */
  --secondary: 213 50% 35%;
  --secondary-foreground: 0 0% 100%;
  --secondary-light: 213 40% 45%;

  /* Muted & Neutral Colors */
  --muted: 210 20% 96%;
  --muted-foreground: 215 15% 50%;

  /* Accent Colors */
  --accent: 213 35% 90%;
  --accent-foreground: 213 50% 25%;

  /* Greek-inspired accent */
  --marble: 45 15% 95%;
  --marble-foreground: 220 25% 25%;

  /* Astronomical accents */
  --cosmic: 240 50% 20%;
  --cosmic-foreground: 0 0% 100%;
  --stardust: 240 30% 85%;

  /* Status Colors */
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  /* Border & Input */
  --border: 210 20% 90%;
  --input: 210 20% 90%;
  --ring: 18 95% 60%;

  /* Design System Values */
  --radius: 0.75rem;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
  --gradient-cosmic: linear-gradient(135deg, hsl(var(--cosmic)) 0%, hsl(var(--secondary)) 100%);
  --gradient-marble: linear-gradient(135deg, hsl(var(--marble)) 0%, hsl(var(--surface)) 100%);
  --gradient-subtle: #e7eced;

  /* Shadows */
  --shadow-marble: 0 10px 40px -10px hsl(var(--primary) / 0.15);
  --shadow-cosmic: 0 20px 60px -15px hsl(var(--cosmic) / 0.25);
  --shadow-card: 0 4px 20px -2px hsl(var(--foreground) / 0.08);

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Cosmic button styles */
.btn-cosmic {
  background: var(--gradient-cosmic);
  color: hsl(var(--cosmic-foreground));
  box-shadow: var(--shadow-cosmic);
  transition: var(--transition-smooth);
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.btn-cosmic:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: 0 25px 70px -20px hsla(var(--cosmic) / 0.3);
}

/* Global Font Styling */
* {
  font-family: var(--font-body);
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
}

/* Additional font utilities */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }

/* Ensure form elements use the global font */
input, textarea, select, button {
  font-family: var(--font-body);
}

/* Ensure links inherit the font */
a {
  font-family: inherit;
}

/* Ensure table elements use the global font */
table, th, td {
  font-family: var(--font-body);
}

/* Ensure list elements use the global font */
ul, ol, li {
  font-family: var(--font-body);
}

/* Ensure paragraph and span elements use the global font */
p, span, div {
  font-family: var(--font-body);
}

/* Utility Classes */
.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

.gradient-hero { background: var(--gradient-hero); }
.gradient-cosmic { background: var(--gradient-cosmic); }
.gradient-marble { background: var(--gradient-marble); }
.gradient-subtle { background: var(--gradient-subtle); }

.shadow-marble { box-shadow: var(--shadow-marble); }
.shadow-cosmic { box-shadow: var(--shadow-cosmic); }
.shadow-card { box-shadow: var(--shadow-card); }

.transition-smooth { transition: var(--transition-smooth); }
.transition-bounce { transition: var(--transition-bounce); }

/* Greek architectural elements */
.greek-pattern {
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(52, 101, 164, 0.15) 0px,
      rgba(52, 101, 164, 0.15) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(52, 101, 164, 0.03) 0px,
      rgba(52, 101, 164, 0.03) 1px,
      transparent 1px,
      transparent 40px
    );
}

.cosmic-stars {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(51, 51, 153, 0.2), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(169, 180, 214, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(51, 51, 153, 0.1), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(169, 180, 214, 0.2), transparent);
  background-repeat: repeat;
  background-size: 150px 100px;
}

/* Button styles */
.btn-hero {
  background: var(--gradient-hero);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-marble);
  transition: var(--transition-smooth);
  font-weight: 600;
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.btn-hero:hover {
  transform: translateY(-2px) scale(1.05) translateZ(0);
}

.btn-marble {
  background: var(--gradient-marble);
  color: hsl(var(--marble-foreground));
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
  border: 1px solid hsl(var(--border));
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.btn-marble:hover {
  transform: translateY(-2px) translateZ(0);
}

/* Card styles */
.card {
  background-color: hsla(0, 0%, 100%, 0.9);
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  border: 1px solid hsla(210, 20%, 90%, 0.5);
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.card:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: var(--shadow-marble);
}

/* Content cards (like policy pages) should not have hover effects */
.content-card:hover {
  transform: none;
  box-shadow: var(--shadow-card);
}

/* Gradient text */
.gradient-text-hero {
  background: linear-gradient(135deg, #f97316, #fb923c, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* ===== FOOTER STYLES ===== */
.site-footer {
  background: linear-gradient(135deg, hsl(var(--surface)) 0%, hsl(var(--muted)) 100%);
  border-top: 1px solid hsl(var(--border));
  padding: 2rem 0 1rem 0;
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
}

.site-footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
}

/* Footer Brand Section */
.footer-brand .brand-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.footer-brand .logo-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  overflow: hidden;
}

.footer-brand .logo-icon .logo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.footer-brand .brand-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  font-family: var(--font-heading);
}

.footer-brand .brand-description {
  color: hsl(var(--muted-foreground));
  line-height: 1.5;
  margin-bottom: 1rem;
  max-width: 280px;
  font-size: 0.875rem;
}

.contact-info .contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: hsl(var(--secondary));
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition-smooth);
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.contact-info .contact-link:hover {
  color: hsl(var(--primary));
  transform: translateX(4px) translateZ(0);
}

.contact-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Footer Navigation Sections */
.footer-nav h4,
.footer-support h4,
.footer-legal h4 {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.75rem;
  font-family: var(--font-heading);
}

.footer-nav ul,
.footer-support ul,
.footer-legal ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav li,
.footer-support li,
.footer-legal li {
  margin-bottom: 0.5rem;
}

.footer-nav a,
.footer-support a,
.footer-legal a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: var(--transition-smooth);
  position: relative;
  font-size: 0.875rem;
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.footer-nav a:hover,
.footer-support a:hover,
.footer-legal a:hover {
  color: hsl(var(--primary));
  transform: translateX(4px) translateZ(0);
}

/* Footer Bottom Section */
.footer-bottom {
  border-top: 1px solid hsl(var(--border));
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

.copyright p {
  margin: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}

.copyright .tagline {
  font-style: italic;
  color: hsl(var(--secondary));
  margin-top: 0.25rem;
}

/* Greek Ornament */
.greek-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: hsl(var(--secondary));
}

.ornament-line {
  width: 2rem;
  height: 1px;
  background: hsl(var(--secondary));
  opacity: 0.5;
}

.ornament-center {
  font-size: 1.25rem;
  color: hsl(var(--primary));
}

/* Decorative Background Elements */
.footer-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.05;
}

.deco-element {
  position: absolute;
  border: 1px solid hsl(var(--secondary));
  border-radius: 50%;
}

.deco-1 {
  width: 3rem;
  height: 3rem;
  top: 20%;
  right: 10%;
  animation: float 6s ease-in-out infinite;
}

.deco-2 {
  width: 2rem;
  height: 2rem;
  bottom: 20%;
  left: 15%;
  animation: float 8s ease-in-out infinite reverse;
}

.deco-3 {
  width: 1.5rem;
  height: 1.5rem;
  top: 60%;
  right: 25%;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(180deg); }
}

/* ===== ALERT SYSTEM ===== */
/* Alert Container - Fixed positioning for top-right display */
.alert-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  max-width: 24rem;
  width: calc(100% - 2rem);
  pointer-events: none;
}

/* Base Alert Styling */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  border: 1px solid transparent;
  box-shadow: var(--shadow-cosmic);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  transition: var(--transition-smooth);
  animation: alertSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Fix for rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.alert::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  opacity: 0.1;
  z-index: -1;
}

/* Success Alert - Using your success colors with Greek marble accent */
.alert-success {
  background: linear-gradient(135deg, 
    hsla(var(--success), 0.15) 0%, 
    hsla(var(--marble), 0.95) 50%,
    hsla(var(--success), 0.1) 100%);
  border-color: hsl(var(--success) / 0.3);
  color: hsl(var(--success));
}

.alert-success .alert-icon {
  color: hsl(var(--success));
}

.alert-success .alert-title {
  color: hsl(var(--success));
}

.alert-success .alert-message {
  color: hsl(var(--foreground));
}

/* Error Alert - Using your destructive colors with cosmic accent */
.alert-error {
  background: linear-gradient(135deg, 
    hsla(var(--destructive), 0.15) 0%, 
    hsla(var(--cosmic), 0.05) 50%,
    hsla(var(--destructive), 0.1) 100%);
  border-color: hsl(var(--destructive) / 0.3);
  color: hsl(var(--destructive));
}

.alert-error .alert-icon {
  color: hsl(var(--destructive));
}

.alert-error .alert-title {
  color: hsl(var(--destructive));
}

.alert-error .alert-message {
  color: hsl(var(--foreground));
}

/* Info Alert - Using your secondary/cosmic colors */
.alert-info {
  background: linear-gradient(135deg, 
    hsla(var(--secondary), 0.15) 0%, 
    hsla(var(--stardust), 0.9) 50%,
    hsla(var(--secondary), 0.1) 100%);
  border-color: hsl(var(--secondary) / 0.3);
  color: hsl(var(--secondary));
}

.alert-info .alert-icon {
  color: hsl(var(--secondary));
}

.alert-info .alert-title {
  color: hsl(var(--secondary));
}

.alert-info .alert-message {
  color: hsl(var(--foreground));
}

/* Warning Alert - Using your primary orange colors */
.alert-warning {
  background: linear-gradient(135deg, 
    hsla(var(--primary), 0.15) 0%, 
    hsla(var(--marble), 0.95) 50%,
    hsla(var(--primary), 0.1) 100%);
  border-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--primary));
}

.alert-warning .alert-icon {
  color: hsl(var(--primary));
}

.alert-warning .alert-title {
  color: hsl(var(--primary));
}

.alert-warning .alert-message {
  color: hsl(var(--foreground));
}

/* Alert Icon Styling */
.alert-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
}

.alert-icon-svg {
  width: 1.25rem;
  height: 1.25rem;
  stroke-width: 2.5;
}

/* Alert Content */
.alert-content {
  flex: 1;
  min-width: 0;
}

.alert-title {
  font-weight: 600;
  font-family: var(--font-heading);
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}

.alert-message {
  font-weight: 400;
  word-wrap: break-word;
  line-height: 1.5;
}

/* Close Button */
.alert-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  border-radius: calc(var(--radius) / 2);
  transition: var(--transition-smooth);
  margin-top: 0.125rem;
  opacity: 0.7;
  /* Fix for rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.alert-close:hover {
  opacity: 1;
  background: hsla(var(--foreground), 0.1);
  color: hsl(var(--foreground));
  transform: scale(1.1) translateZ(0);
}

.alert-close svg {
  width: 1rem;
  height: 1rem;
}

/* Hover Effects for the entire alert */
.alert:hover {
  transform: translateY(-2px) translateZ(0);
  box-shadow: var(--shadow-marble);
}

/* Responsive Design */
@media (max-width: 640px) {
  .alert-container {
    top: 0.5rem;
    right: 0.5rem;
    left: 0.5rem;
    max-width: none;
    width: auto;
  }
  
  .alert {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
  }
  
  .alert-icon-svg {
    width: 1.125rem;
    height: 1.125rem;
  }
  
  .alert-title {
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .alert-container {
    top: 0.25rem;
    right: 0.25rem;
    left: 0.25rem;
  }
}

/* Animation Keyframes */
@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-1rem) scale(0.95) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) translateZ(0);
  }
}

@keyframes alertSlideOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1) translateZ(0);
  }
  to {
    opacity: 0;
    transform: translateY(-1rem) scale(0.95) translateZ(0);
  }
}

/* Auto-dismiss functionality */
.alert-auto-dismiss {
  position: relative;
  overflow: hidden;
}

.alert-auto-dismiss::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  animation: alertProgress 5s linear forwards;
}

@keyframes alertProgress {
  from { width: 100%; }
  to { width: 0%; }
}

/* Greek Pattern Overlay for Special Alerts */
.alert-greek-pattern::before {
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 8px,
      rgba(255, 255, 255, 0.1) 8px,
      rgba(255, 255, 255, 0.1) 9px
    );
}