/* KCI - Kingly Coastal Investments LLC - Global Styles */

/* CSS Variables for Theming */
:root {
  /* Color Palette */
  --primary-cyan: #00ffff;
  --primary-green: #99f2c8;
  --dark-base: #0f2027;
  --medium-dark: #203a43;
  --light-dark: #2c5364;
  --text-light: #f0f0f0;
  --text-dark: #1a1a1a;
  
  /* Spacing */
  --section-padding: 2rem;
  --border-radius: 1rem;
  --image-radius: 12px;
  
  /* Effects */
  --blur-strength: 10px;
  --shadow-glow: 0 0 20px rgba(0, 255, 255, 0.2);
}

/* Base HTML Styles */
html {
  height: 100%;
  width: 100%;
  scroll-behavior: smooth;
}

/* Navigation & Footer Common Styles */
nav, footer {
  backdrop-filter: blur(var(--blur-strength));
}

nav ul {
  margin: 0;
  padding: 0;
}

/* Section Styling */
section {
  padding: var(--section-padding);
  border-radius: var(--border-radius);
}

/* Image Styling */
figure img, img {
  border-radius: var(--image-radius);
  max-width: 100%;
  height: auto;
}

/* Button Accents */
a.button-accent, button.button-accent {
  background-color: var(--primary-cyan);
  color: #000;
  font-weight: 600;
}

/* Form Styling */
form.grid {
  gap: 1rem;
}

form input, form button {
  margin-bottom: 0;
}

/* Contact Modal */
#contact-modal {
  /* Don't set display:none - let the dialog element handle its own display */
  border: none;
  padding: 0;
  max-width: 500px;
}

#contact-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
}

#contact-modal article {
  margin: 0;
}

/* Success Message */
.success-message {
  background-color: rgba(0, 255, 0, 0.2);
  border: 1px solid rgba(0, 255, 0, 0.5);
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
  display: none;
}

.success-message.show {
  display: block;
}

/* Page-Specific Theme Variables */
body.home-page {
  background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  color: var(--text-light);
}

body.home-page nav,
body.home-page footer {
  background-color: rgba(0, 0, 0, 0.1);
}

body.home-page section {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-glow);
}

body.tech-page {
  background: linear-gradient(to right, #1f4037, #99f2c8);
  color: var(--text-dark);
}

body.tech-page nav,
body.tech-page footer {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

body.tech-page section {
  background: #ffffff11;
  box-shadow: 0 0 15px rgba(0, 255, 180, 0.3);
}

body.industry-page {
  background: linear-gradient(to right, #232526, #414345);
  color: #e0e0e0;
}

body.industry-page nav,
body.industry-page footer {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}

body.industry-page section {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 0 15px rgba(200, 200, 200, 0.2);
}

/* Responsive Design */
@media (max-width: 768px) {
  :root {
    --section-padding: 1.5rem;
  }
  
  form.grid {
    grid-template-columns: 1fr;
  }
}