/* OozyJoy Production - Custom Styles */

/* ============================================
   Design Tokens - Colorful Light Theme
   ============================================ */

/* Color Scheme Declaration - Light Mode Only */
:root {
  /* Typography */
  --font-family-base: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  
  /* Vibrant Google-Inspired Brand Colors */
  --brand-blue: #4285F4;
  --brand-blue-hover: #1A73E8;
  --brand-blue-light: #A8C7FA;
  --brand-red: #EA4335;
  --brand-red-hover: #D93025;
  --brand-red-light: #F28B82;
  --brand-yellow: #FBBC04;
  --brand-yellow-hover: #F9AB00;
  --brand-yellow-light: #FDD663;
  --brand-green: #34A853;
  --brand-green-hover: #1E8E3E;
  --brand-green-light: #81C995;
  --brand-purple: #A142F4;
  --brand-purple-hover: #8E24AA;
  --brand-purple-light: #C58AF9;
  --brand-orange: #FF6D00;
  --brand-orange-hover: #E65100;
  --brand-orange-light: #FF9E40;
  
  /* Primary brand mapping (blue is primary) */
  --brand-primary: #4285F4;
  --brand-primary-hover: #1A73E8;
  --brand-secondary: #5F6368;
  --brand-accent: #34A853;
  --brand-accent-hover: #1E8E3E;
  --brand-highlight: #FBBC04;
  --brand-danger: #EA4335;
  
  /* Vibrant Backgrounds for Themed Panels */
  --bg-blue-vibrant: #D3E3FD;
  --bg-red-vibrant: #F8BBD0;
  --bg-yellow-vibrant: #FFF9C4;
  --bg-green-vibrant: #C8E6C9;
  --bg-purple-vibrant: #E1BEE7;
  --bg-orange-vibrant: #FFE0B2;
  
  /* Base Background Colors - White for content */
  --bg-primary: #FFFFFF;
  --bg-secondary: #FFFFFF;
  --bg-content: #FFFFFF;
  
  /* Grayscale for Navigation/Footer */
  --bg-nav-footer: #F8F9FA;
  --text-nav: #495057;
  --text-nav-hover: #212529;
  --border-nav: #DEE2E6;
  
  /* Text Colors - High contrast for readability */
  --text-primary: #202124;
  --text-secondary: #5F6368;
  --text-muted: #80868B;
  
  /* Border Colors */
  --border-default: #DADCE0;
  --border-subtle: #E8EAED;
  
  /* Shadows - Google-style */
  --shadow-sm: 0 1px 2px rgba(60, 64, 67, 0.1);
  --shadow-md: 0 1px 3px rgba(60, 64, 67, 0.15), 0 1px 2px rgba(60, 64, 67, 0.1);
  --shadow-lg: 0 1px 3px rgba(60, 64, 67, 0.2), 0 4px 8px rgba(60, 64, 67, 0.15);
}

/* ============================================
   Bootstrap 5 Theme Overrides
   ============================================ */

:root {
  /* Override Bootstrap colors with vibrant Google palette */
  --bs-primary: #4285F4;
  --bs-primary-rgb: 66, 133, 244;
  --bs-secondary: #5F6368;
  --bs-secondary-rgb: 95, 99, 104;
  --bs-success: #34A853;
  --bs-success-rgb: 52, 168, 83;
  --bs-warning: #FBBC04;
  --bs-warning-rgb: 251, 188, 4;
  --bs-danger: #EA4335;
  --bs-danger-rgb: 234, 67, 53;
  --bs-info: #4285F4;
  --bs-info-rgb: 66, 133, 244;
  
  /* Body colors - white background */
  --bs-body-bg: #FFFFFF;
  --bs-body-color: var(--text-primary);
  
  /* Link colors - vibrant blue */
  --bs-link-color: var(--brand-blue);
  --bs-link-hover-color: var(--brand-blue-hover);
  
  /* Border colors */
  --bs-border-color: var(--border-default);
  --bs-tertiary-bg: #FFFFFF;
}

/* Button overrides - Google vivid colors */
.btn-primary {
  --bs-btn-bg: #4285F4;
  --bs-btn-border-color: #4285F4;
  --bs-btn-hover-bg: #1A73E8;
  --bs-btn-hover-border-color: #1A73E8;
  --bs-btn-active-bg: #1A73E8;
  --bs-btn-active-border-color: #1A73E8;
}

.btn-success {
  --bs-btn-bg: #34A853;
  --bs-btn-border-color: #34A853;
  --bs-btn-hover-bg: #1E8E3E;
  --bs-btn-hover-border-color: #1E8E3E;
  --bs-btn-active-bg: #1E8E3E;
  --bs-btn-active-border-color: #1E8E3E;
}

.btn-warning {
  --bs-btn-bg: #FBBC04;
  --bs-btn-border-color: #FBBC04;
  --bs-btn-hover-bg: #F9AB00;
  --bs-btn-hover-border-color: #F9AB00;
  --bs-btn-active-bg: #F9AB00;
  --bs-btn-active-border-color: #F9AB00;
  --bs-btn-color: #202124;
  --bs-btn-hover-color: #202124;
  --bs-btn-active-color: #202124;
}

.btn-danger {
  --bs-btn-bg: #EA4335;
  --bs-btn-border-color: #EA4335;
  --bs-btn-hover-bg: #D93025;
  --bs-btn-hover-border-color: #D93025;
  --bs-btn-active-bg: #D93025;
  --bs-btn-active-border-color: #D93025;
}

.btn-outline-primary {
  --bs-btn-color: #4285F4;
  --bs-btn-border-color: #4285F4;
  --bs-btn-hover-bg: #4285F4;
  --bs-btn-hover-border-color: #4285F4;
}

.btn-outline-success {
  --bs-btn-color: #34A853;
  --bs-btn-border-color: #34A853;
  --bs-btn-hover-bg: #34A853;
  --bs-btn-hover-border-color: #34A853;
}

.btn-outline-secondary {
  --bs-btn-color: #5F6368;
  --bs-btn-border-color: #5F6368;
  --bs-btn-hover-bg: #5F6368;
  --bs-btn-hover-border-color: #5F6368;
}

.btn-outline-warning {
  --bs-btn-color: #FBBC04;
  --bs-btn-border-color: #FBBC04;
  --bs-btn-hover-bg: #FBBC04;
  --bs-btn-hover-border-color: #FBBC04;
  --bs-btn-hover-color: #202124;
}

.btn-outline-danger {
  --bs-btn-color: #EA4335;
  --bs-btn-border-color: #EA4335;
  --bs-btn-hover-bg: #EA4335;
  --bs-btn-hover-border-color: #EA4335;
}

/* ============================================
   Navigation & Footer - Grayscale Theme
   ============================================ */

/* Navigation - Grayscale with subtle styling */
.navbar {
  background-color: var(--bg-nav-footer) !important;
  border-bottom: 1px solid var(--border-nav);
}

.navbar-brand {
  color: var(--text-nav-hover) !important;
}

.navbar-nav .nav-link {
  color: var(--text-nav);
}

.navbar-nav .nav-link:hover {
  color: var(--text-nav-hover);
}

.navbar-nav .nav-link.active {
  color: var(--text-nav-hover);
  font-weight: 600;
}

/* Footer - Grayscale matching navigation */
footer {
  background-color: var(--bg-nav-footer) !important;
  border-top: 1px solid var(--border-nav);
}

footer .text-body-secondary {
  color: var(--text-nav) !important;
}

footer a {
  color: var(--text-nav);
  transition: color 0.15s ease-in-out;
}

footer a:hover {
  color: var(--text-nav-hover);
  text-decoration: underline;
}

/* ============================================
   Base Styles & Typography
   ============================================ */

/* Sticky footer using flexbox */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-family-base);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

/* Custom styles can be added below */

/* Ensure navbar brand stands out */
.navbar-brand {
  font-size: 1.25rem;
  font-weight: 600;
}

/* ============================================
   Content Link Colors - Red for All Pages
   ============================================ */

/* Make all content links red and bold (excluding nav and footer) */
main a:not(.btn):not(.navbar-brand):not(.nav-link) {
  color: var(--brand-red);
  font-weight: 700;
  transition: color 0.15s ease-in-out;
}

main a:not(.btn):not(.navbar-brand):not(.nav-link):hover {
  color: var(--brand-red-hover);
}

main a:not(.btn):not(.navbar-brand):not(.nav-link):visited {
  color: var(--brand-red-hover);
}

/* Add smooth transitions for nav links */
.nav-link {
  transition: color 0.15s ease-in-out;
}

/* Bootstrap Component Enhancements - Colorful Light Theme */

/* Card styles - Vibrant with white background */
.card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  background-color: #FFFFFF;
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

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

/* Vibrant themed card borders with colorful backgrounds */
.card.border-primary,
.card.border-info {
  border: 2px solid var(--brand-blue);
  background-color: var(--bg-blue-vibrant);
}

.card.border-success {
  border: 2px solid var(--brand-green);
  background-color: var(--bg-green-vibrant);
}

.card.border-warning {
  border: 2px solid var(--brand-yellow);
  background-color: var(--bg-yellow-vibrant);
}

.card.border-danger {
  border: 2px solid var(--brand-red);
  background-color: var(--bg-red-vibrant);
}

/* Card headers with vibrant colors */
.card-header.bg-primary,
.card-header.bg-info {
  background-color: var(--brand-blue) !important;
  color: #FFFFFF !important;
  border-bottom: none;
  font-weight: 600;
}

.card-header.bg-success {
  background-color: var(--brand-green) !important;
  color: #FFFFFF !important;
  border-bottom: none;
  font-weight: 600;
}

.card-header.bg-warning {
  background-color: var(--brand-yellow) !important;
  color: var(--text-primary) !important;
  border-bottom: none;
  font-weight: 600;
}

.card-header.bg-danger {
  background-color: var(--brand-red) !important;
  color: #FFFFFF !important;
  border-bottom: none;
  font-weight: 600;
}

/* Ensure card links don't cause unwanted hover on whole card */
.card a {
  text-decoration: none;
}

.card a:hover {
  text-decoration: underline;
}

/* Badge enhancements */
.badge {
  font-weight: 500;
  padding: 0.35em 0.65em;
}

/* Alert box customizations - Colorful with vibrant backgrounds */
.alert {
  border-left: 4px solid;
  border-radius: 4px;
}

.alert-info {
  background-color: var(--bg-blue-vibrant);
  border-left-color: var(--brand-blue);
  color: var(--text-primary);
  border-color: var(--brand-blue-light);
}

.alert-warning {
  background-color: var(--bg-yellow-vibrant);
  border-left-color: var(--brand-yellow);
  color: var(--text-primary);
  border-color: var(--brand-yellow-light);
}

.alert-danger {
  background-color: var(--bg-red-vibrant);
  border-left-color: var(--brand-red);
  color: var(--text-primary);
  border-color: var(--brand-red-light);
}

.alert-success {
  background-color: var(--bg-green-vibrant);
  border-left-color: var(--brand-green);
  color: var(--text-primary);
  border-color: var(--brand-green-light);
}

/* Accordion styling for FAQ - Vibrant Blue */
.accordion-button:not(.collapsed) {
  background-color: var(--bg-blue-vibrant);
  color: var(--text-primary);
  font-weight: 600;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(66, 133, 244, 0.25);
}

.accordion-item {
  background-color: #FFFFFF;
  border: 1px solid var(--border-default);
}

/* Team member card grid styling */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Progress bar enhancements - Colorful */
.progress {
  border-radius: 0.5rem;
  background-color: #E9ECEF;
  height: 1.5rem;
}

.progress-bar {
  border-radius: 0.5rem;
  font-weight: 600;
}

.progress-bar.bg-primary {
  background-color: var(--brand-blue) !important;
}

.progress-bar.bg-success {
  background-color: var(--brand-green) !important;
}

.progress-bar.bg-warning {
  background-color: var(--brand-yellow) !important;
}

.progress-bar.bg-danger {
  background-color: var(--brand-red) !important;
}

/* List group enhancements - White background */
.list-group-item {
  transition: background-color 0.15s ease-in-out;
  background-color: #FFFFFF;
  border-color: var(--border-default);
}

.list-group-item:hover {
  background-color: #F8F9FA;
}

.list-group-item-action:hover {
  background-color: #F8F9FA;
}

/* Button enhancements */
.btn {
  transition: all 0.15s ease-in-out;
}

/* Blockquote styling */
blockquote {
  font-size: 1.05rem;
  color: var(--text-secondary);
}

/* Post content styling */
.post-content {
  line-height: 1.7;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5rem 0;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1.1rem;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .form-embed-wrapper {
    min-height: 500px;
  }
  
  .form-embed-wrapper iframe {
    height: 500px;
  }
}

/* SVG icon alignment */
svg.bi {
  vertical-align: text-bottom;
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Focus visible for accessibility - Google Blue */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/* Form Embed Styles - Colorful Variants */

/* Base wrapper for Microsoft Forms iframe embeds */
.form-embed-wrapper {
  position: relative;
  width: 100%;
  min-height: 600px;
  border: 3px solid;
  border-radius: 12px;
  overflow: hidden;
  background-color: #FFFFFF;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-embed-wrapper:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(60, 64, 67, 0.25);
}

.form-embed-wrapper iframe {
  width: 100%;
  height: 600px;
  border: none;
  display: block;
}

/* Vibrant Blue Form (Share Your Story) */
.form-embed-blue {
  border-color: var(--brand-blue);
  background: linear-gradient(to bottom, var(--bg-blue-vibrant) 0%, #FFFFFF 120px);
}

.form-embed-blue:hover {
  box-shadow: 0 8px 16px rgba(66, 133, 244, 0.3);
}

/* Vibrant Green Form (Submit Question) */
.form-embed-green {
  border-color: var(--brand-green);
  background: linear-gradient(to bottom, var(--bg-green-vibrant) 0%, #FFFFFF 120px);
}

.form-embed-green:hover {
  box-shadow: 0 8px 16px rgba(52, 168, 83, 0.3);
}

/* Vibrant Purple Form (Get Notified) */
.form-embed-purple {
  border-color: var(--brand-purple);
  background: linear-gradient(to bottom, var(--bg-purple-vibrant) 0%, #FFFFFF 120px);
}

.form-embed-purple:hover {
  box-shadow: 0 8px 16px rgba(161, 66, 244, 0.3);
}

/* Vibrant Yellow Form (optional - for future use) */
.form-embed-yellow {
  border-color: var(--brand-yellow);
  background: linear-gradient(to bottom, var(--bg-yellow-vibrant) 0%, #FFFFFF 120px);
}

.form-embed-yellow:hover {
  box-shadow: 0 8px 16px rgba(251, 188, 4, 0.3);
}

/* Vibrant Red Form (optional - for future use) */
.form-embed-red {
  border-color: var(--brand-red);
  background: linear-gradient(to bottom, var(--bg-red-vibrant) 0%, #FFFFFF 120px);
}

.form-embed-red:hover {
  box-shadow: 0 8px 16px rgba(234, 67, 53, 0.3);
}

/* Vibrant Orange Form (optional - for future use) */
.form-embed-orange {
  border-color: var(--brand-orange);
  background: linear-gradient(to bottom, var(--bg-orange-vibrant) 0%, #FFFFFF 120px);
}

.form-embed-orange:hover {
  box-shadow: 0 8px 16px rgba(255, 109, 0, 0.3);
}

/* ============================================
   Utility Classes
   ============================================ */

/* Styled checkmark list - Vibrant Green */
.feature-list {
  list-style: none;
  padding-left: 0;
}

.feature-list li {
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: 0.5rem;
}

.feature-list li::before {
  content: "✓";
  color: var(--brand-green);
  font-weight: 700;
  font-size: 1.2em;
  position: absolute;
  left: 0;
}