/* ==========================================
   MODERN FOOTER STYLES
   Glassy, card-like design with gradients
   ========================================== */

/* CRITICAL: Override any white backgrounds from parent elements */
.site-footer,
.site-footer *,
.site-footer *::before,
.site-footer *::after {
  box-sizing: border-box;
}

.site-footer input,
.site-footer button,
.site-footer form,
.site-footer div,
.site-footer nav,
.site-footer ul,
.site-footer li {
  background: transparent !important;
  border: none;
}

:root {
  --footer-bg: #0f172a;
  --footer-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --footer-text: #cbd5e1;
  --footer-text-muted: #94a3b8;
  --footer-heading: #f1f5f9;
  --footer-accent: #7c3aed;
  --footer-accent-hover: #6d28d9;
  --footer-border: rgba(148, 163, 184, 0.1);
  --footer-input-bg: rgba(15, 23, 42, 0.5);
  --footer-card-bg: rgba(30, 41, 59, 0.4);
  --footer-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Light theme variables - keeping footer dark for consistency */
[data-theme="light"] {
  --footer-bg: #0f172a;
  --footer-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --footer-text: #cbd5e1;
  --footer-text-muted: #94a3b8;
  --footer-heading: #f1f5f9;
  --footer-accent: #7c3aed;
  --footer-accent-hover: #6d28d9;
  --footer-border: rgba(148, 163, 184, 0.1);
  --footer-input-bg: rgba(15, 23, 42, 0.5);
  --footer-card-bg: rgba(30, 41, 59, 0.4);
  --footer-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}

/* Footer container */
.site-footer {
  background: #0f172a !important;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  color: var(--footer-text);
  padding: 4rem 0 0;
  position: relative;
  overflow: hidden;
  animation: footerSlideUp 0.8s ease-out;
  /* Ensure no white bleeds from body */
  margin: 0;
  width: 100%;
  isolation: isolate;
}

/* Decorative gradient overlay */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--footer-accent), transparent);
  opacity: 0.5;
}

/* Entrance animation */
@keyframes footerSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer container with max-width */
.footer-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  background: transparent;
}

/* Main footer grid - horizontal layout like image */
.footer-main {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) repeat(3, 1fr);
  gap: 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--footer-border);
  background: transparent;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  justify-items: center;
}

@media (max-width: 1200px) {
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Brand section */
.footer-brand {
  grid-column: 1;
  max-width: 320px;
  text-align: center;
  animation: fadeInLeft 0.6s ease-out 0.1s both;
}

.footer-logo {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--footer-heading);
  text-decoration: none;
  margin-bottom: 1rem;
  transition: transform 0.3s ease;
}

.footer-logo:hover {
  transform: translateX(4px);
}

.footer-logo svg {
  width: 32px;
  height: 32px;
  fill: var(--footer-accent);
}

.footer-tagline {
  color: var(--footer-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 280px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Social icons */
.footer-socials {
  display: flex;
  gap: 0.75rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--footer-card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--footer-border);
  border-radius: 10px;
  color: var(--footer-text);
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  background: var(--footer-accent);
  border-color: var(--footer-accent);
  color: var(--footer-heading);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
}

.footer-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Link columns - evenly spaced */
.footer-links {
    text-align: center;
  animation: fadeInUp 0.6s ease-out 0.2s both;
}

.footer-links-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--footer-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-links-list li {
  margin-bottom: 0.75rem;
}

.footer-links-list a {
  color: var(--footer-text);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  display: inline-block;
  position: relative;
}

.footer-links-list a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--footer-accent);
  transition: width 0.3s ease;
}

.footer-links-list a:hover {
  color: var(--footer-accent);
  transform: translateX(4px);
}

.footer-links-list a:hover::after {
  width: 100%;
}

.footer-links-list a:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Newsletter section */
.footer-newsletter {
  animation: fadeInRight 0.6s ease-out 0.3s both;
  background: transparent;
}

.footer-newsletter-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--footer-heading);
  margin-bottom: 0.75rem;
}

.footer-newsletter-text {
  color: var(--footer-text-muted);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: transparent;
}

.newsletter-input-wrapper {
  position: relative;
  background: transparent;
}

.newsletter-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--footer-border) !important;
  border-radius: 10px;
  color: var(--footer-text);
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--footer-accent);
  background: var(--footer-card-bg);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.newsletter-input::placeholder {
  color: var(--footer-text-muted);
}

.newsletter-button {
  padding: 0.875rem 1.5rem;
  background: var(--footer-accent);
  color: var(--footer-heading);
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.newsletter-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.newsletter-button:hover {
  background: var(--footer-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

.newsletter-button:hover::before {
  left: 100%;
}

.newsletter-button:focus-visible {
  outline: 2px solid var(--footer-accent);
  outline-offset: 2px;
}

.newsletter-button:active {
  transform: translateY(0);
}

/* Newsletter status messages */
.newsletter-status {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  display: none;
  animation: slideDown 0.3s ease;
}

.newsletter-status.show {
  display: block;
}

.newsletter-status.success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #22c55e;
}

.newsletter-status.error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer bottom */
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 0;
  gap: 2rem;
  flex-wrap: wrap;
  background: transparent;
  text-align: center;
}

.footer-copyright {
  color: var(--footer-text-muted);
  font-size: 0.875rem;
}

.footer-legal {
  display: flex;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-legal a {
  color: var(--footer-text-muted);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.footer-legal a:hover {
  color: var(--footer-accent);
}

/* Theme toggle button - hidden */
.theme-toggle {
  display: none !important;
}



/* Fade in animations */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

/* Tablet (iPad, etc.) */
@media (max-width: 1024px) {
  .footer-container {
    padding: 0 1.75rem;
  }

  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }

  .footer-logo {
    justify-content: center;
  }

  .footer-tagline {
    max-width: 500px;
    margin: 0 auto 1.25rem;
  }

  .footer-socials {
    justify-content: center;
  }

  .footer-links {
    text-align: center;
  }

  .footer-links-list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-bottom {
    gap: 1.5rem;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .site-footer {
    padding: 2rem 0 0;
  }

  .footer-container {
    padding: 0 1rem;
  }

  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .footer-brand {
    grid-column: 1;
    max-width: 100%;
    text-align: center;
    margin-bottom: 0;
  }

  .footer-logo {
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .footer-logo svg {
    width: 26px;
    height: 26px;
  }

  .footer-tagline {
    margin-left: auto;
    margin-right: auto;
    font-size: 0.875rem;
    max-width: 100%;
    line-height: 1.5;
  }

  .footer-socials {
    justify-content: center;
    margin: 0 auto;
    gap: 0.75rem;
  }

  .footer-social-link {
    width: 40px;
    height: 40px;
  }

  .footer-social-link svg {
    width: 16px;
    height: 16px;
  }

  .footer-links {
    text-align: center;
    width: 100%;
  }

  .footer-links-title {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
  }

  .footer-links-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem 1.25rem;
  }

  .footer-links-list li {
    margin-bottom: 0;
  }

  .footer-links-list a {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
  }

  .footer-links-list a:hover {
    transform: none;
  }

  .footer-links-list a::after {
    display: none;
  }

  .newsletter-form {
    max-width: 100%;
  }

  .newsletter-input {
    font-size: 0.875rem;
    padding: 0.75rem 0.875rem;
  }

  .newsletter-button {
    width: 100%;
    padding: 0.875rem;
    font-size: 0.875rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 1rem 0;
    gap: 0.75rem;
  }

  .footer-copyright {
    font-size: 0.8rem;
  }

  .footer-legal {
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .footer-legal a {
    font-size: 0.8rem;
  }

  /* Disable animations on mobile for performance */
  .site-footer,
  .footer-brand,
  .footer-links,
  .footer-newsletter {
    animation: none;
  }
}

/* ==========================================
   FINAL OVERRIDES - Eliminate All White Backgrounds
   ========================================== */

/* Force dark background on the footer itself - highest priority
   This prevents any white background from the body element from showing through.
   The !important flags ensure these styles override any conflicting styles from parent elements.
   The isolation property creates a new stacking context to prevent bleed-through. */
body .site-footer {
  background: #0f172a !important; /* Solid dark slate base color */
  background-image: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important; /* Subtle gradient for depth */
  margin: 0 !important; /* Remove any margins that could expose white background */
  border-top: 1px solid rgba(148, 163, 184, 0.1); /* Subtle separator line */
  isolation: isolate; /* Create new stacking context to prevent background bleed */
}

/* Force transparent background on all footer children
   This ensures no child elements create unwanted white boxes or panels.
   All elements inherit the dark footer background, creating a uniform appearance.
   The newsletter-status div is excluded as it needs its own colored background for success/error messages. */
.site-footer .footer-container,
.site-footer .footer-main,
.site-footer .footer-brand,
.site-footer .footer-links,
.site-footer .footer-newsletter,
.site-footer .footer-bottom,
.site-footer nav,
.site-footer ul,
.site-footer li,
.site-footer form,
.site-footer div:not(.newsletter-status) {
  background: transparent !important; /* Inherit footer's dark background */
}

/* Ensure inputs have proper dark background */
.site-footer input[type="email"] {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  color: #cbd5e1 !important;
}

.site-footer input[type="email"]:focus {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: #7c3aed !important;
}

.site-footer input[type="email"]::placeholder {
  color: #94a3b8 !important;
}

/* Ensure buttons maintain proper styling */
.site-footer button {
  background: #7c3aed !important;
  border: none !important;
}

/* Remove any unintended box shadows */
.site-footer *:not(.newsletter-button):not(.footer-social-link):not(.theme-toggle) {
  box-shadow: none !important;
}

/* Allow intentional shadows on interactive elements */
.site-footer .newsletter-button:hover,
.site-footer .footer-social-link:hover,
.site-footer .theme-toggle:hover {
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3) !important;
}

/* Small mobile */
@media (max-width: 480px) {
  .site-footer {
    padding: 1.5rem 0 0;
  }

  .footer-container {
    padding: 0 0.875rem;
  }

  .footer-main {
    gap: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .footer-brand {
    margin-bottom: 0;
  }

  .footer-logo {
    font-size: 1.1rem;
    gap: 0.5rem;
  }

  .footer-logo svg {
    width: 24px;
    height: 24px;
  }

  .footer-tagline {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .footer-socials {
    gap: 0.625rem;
  }

  .footer-social-link {
    width: 38px;
    height: 38px;
  }

  .footer-social-link svg {
    width: 15px;
    height: 15px;
  }

  .footer-links-title {
    font-size: 0.75rem;
    margin-bottom: 0.625rem;
  }

  .footer-links-list {
    gap: 0.5rem 1rem;
  }

  .footer-links-list a {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
  }

  .newsletter-input {
    font-size: 0.8rem;
    padding: 0.7rem 0.8rem;
  }

  .newsletter-button {
    padding: 0.8rem;
    font-size: 0.8rem;
  }

  .footer-bottom {
    padding: 0.875rem 0;
    gap: 0.625rem;
  }

  .footer-copyright {
    font-size: 0.75rem;
  }

  .footer-legal {
    gap: 0.875rem;
    flex-wrap: wrap;
  }

  .footer-legal a {
    font-size: 0.75rem;
  }
}