/* ===== Variables ===== */
:root {
  --primary-color: #ffffff; /* Blanco */
  --secondary-color: #000000; /* Negro */
  --font-family: 'Karla', sans-serif; /* Fuente principal */
  --font-size-lg: 18px; /* Tamaño de fuente grande */
  --font-size-md: 14px; /* Tamaño de fuente mediano */
  --font-size-sm: 12px; /* Tamaño de fuente pequeño */
  --overlay-color: rgba(0, 0, 0, 0.5); /* Color de superposición */
}

/* ===== General Styles ===== */
body {
  font-family: var(--font-family);
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--primary-color);
  padding-bottom: 75px;
  position: relative;
}

/* Restore purple overlay to match original Windows appearance */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--overlay-color); /* Revert to rgba(0, 0, 0, 0.5) */
  z-index: -1;
}

@media (min-width: 768px) {
  body {
    padding-bottom: 110px;
  }
}

/* Ensure consistent viewport scaling and centering for all platforms */
body {
  display: block; /* Remove flex to use Bootstrap default centering */
  margin: 0 auto; /* Center body horizontally */
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center all content horizontally in container */
  justify-content: center; /* Center vertically in container */
  width: 100%;
  max-width: 1200px; /* Maintain limit for large screens */
  padding: 0 15px; /* Default Bootstrap padding */
  margin: 0 auto; /* Ensure container is centered */
}

@media (min-width: 1920px) {
    .container {
        max-width: 1200px; /* Limit width for large screens on Ubuntu */
    }
    body {
        min-height: 100vh; /* Ensure full viewport height for Ubuntu */
    }
}

/* Ensure background image scales correctly for high-DPI */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        background-image: url('../images/bg-2x.webp'); /* Assume higher-res version exists */
    }
}

/* ===== Brand (Logo) Styles ===== */
.navbar-brand img {
  height: 72px; /* Restore original size for Windows */
  max-width: none !important; /* Remove max-width to use height only */
  object-fit: contain;
  position: static; /* Remove absolute positioning to use Bootstrap default */
  z-index: auto; /* Remove z-index to prevent overlap issues */
  margin: 0 auto; /* Center logo horizontally */
}

/* Adjust logo for Ubuntu to match original appearance */
@-moz-document url-prefix() { /* Firefox on Ubuntu */
    .navbar-brand img {
        height: 100px; /* Increase size slightly for better visibility on Ubuntu */
    }
    .container {
        align-items: center; /* Ensure horizontal centering */
        justify-content: center; /* Ensure vertical centering */
        margin: 0 auto; /* Center container horizontally */
    }
    main, .page-title, .page-description, .bitcoin-payment-text {
        margin: 0 auto; /* Center all text elements horizontally */
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chromium/Brave on Ubuntu */
    .navbar-brand img {
        height: 100px; /* Increase size slightly for better visibility on Ubuntu */
    }
    .container {
        align-items: center; /* Ensure horizontal centering */
        justify-content: center; /* Ensure vertical centering */
        margin: 0 auto; /* Center container horizontally */
    }
    main, .page-title, .page-description, .bitcoin-payment-text {
        margin: 0 auto; /* Center all text elements horizontally */
    }
}

@media (max-width: 768px) {
    .navbar-brand img {
        height: 50px; /* Reduce for mobile, matching original responsiveness */
    }
}

/* ===== Navigation Bar Styles ===== */
.navbar-dark {
  padding-top: 35px;
  padding-bottom: 35px;
  position: relative;
}

.navbar-dark .navbar-text {
  color: var(--primary-color);
  opacity: 1;
  padding: 0 20px;
  border-right: 1px solid var(--primary-color);
  font-size: var(--font-size-lg);
  font-weight: bold;
  text-align: center;
}

.navbar-dark .navbar-text:last-child {
  border-right: 0;
}

/* Ajustes para los enlaces sociales en la barra de navegación */
.navbar-text {
    display: flex;
    align-items: center;
    gap: 16px; /* Restore original spacing */
    margin: 0; /* Eliminar márgenes por defecto */
    position: static; /* Remove absolute positioning to use Bootstrap default */
    z-index: auto; /* Remove z-index to prevent overlap issues */
}

/* Reducir el tamaño de los iconos */
.social-link {
    width: 30px; /* Reducir el tamaño */
    height: 30px; /* Reducir el tamaño */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--primary-color); /* White circle */
    color: var(--secondary-color); /* Black icon */
    transition: all 0.3s ease-in-out;
}

.social-link:hover {
    background-color: var(--secondary-color); /* Black circle */
    color: var(--primary-color); /* White icon */
}

/* Ajustar el tamaño de los logos dentro de los enlaces */
.nostr-logo, .x-logo {
    width: 16px; /* Reducir el tamaño */
    height: 16px; /* Reducir el tamaño */
    filter: brightness(0) invert(0); /* Black icon */
    transition: filter 0.3s ease-in-out;
}

.social-link:hover .nostr-logo {
    filter: brightness(0) invert(1); /* White icon */
}

.social-link:hover .x-logo {
    filter: brightness(0) invert(1); /* White icon */
}

/* Ajustar el tamaño del ícono de Telegram */
.mdi.mdi-telegram {
    font-size: 16px; /* Reducir el tamaño */
    color: var(--secondary-color); /* Black icon */
    transition: color 0.3s ease-in-out;
}

.social-link:hover .mdi.mdi-telegram {
    color: var(--primary-color); /* White icon */
}

@media (max-width: 767px) {
  .navbar-dark {
    padding-bottom: 0;
  }

  /* Ajustes adicionales para móviles */
  .navbar-text {
      position: static; /* Ensure static positioning for mobile */
      margin-top: 10px;
      width: 100%;
      justify-content: center;
  }

  .social-link {
      width: 25px; /* Reducir aún más el tamaño en móviles */
      height: 25px; /* Reducir aún más el tamaño en móviles */
  }

  .nostr-logo, .x-logo {
      width: 14px; /* Reducir el tamaño en móviles */
      height: 14px; /* Reducir el tamaño en móviles */
  }

  .mdi.mdi-telegram {
      font-size: 14px; /* Reducir el tamaño en móviles */
  }
}

/* ===== Page Title Styles ===== */
.page-title {
  font-size: 80px;
  font-weight: bold;
  margin-bottom: 6px;
  color: var(--primary-color); /* White text for Windows */
  text-align: left; /* Left-align text within centered container */
  margin: 0 auto; /* Center horizontally */
  max-width: 1000px; /* Limit width for left alignment within center */
}

/* Override for Ubuntu to ensure left-aligned and centered text */
@-moz-document url-prefix() { /* Firefox on Ubuntu */
    .page-title {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto; /* Center horizontally */
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chromium/Brave on Ubuntu */
    .page-title {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto; /* Center horizontally */
    }
}

@media (max-width: 767px) {
  .page-title {
    font-size: 35px;
    margin-bottom: 14px;
    max-width: 300px; /* Reduce width for mobile */
  }
}

/* ===== Page Description Styles ===== */
.page-description {
  max-width: 465px;
  font-size: var(--font-size-lg);
  font-weight: bold;
  color: var(--secondary-color); /* Black text for Windows */
  margin: 0 auto 40px; /* Increase bottom margin to create more space before "Mantente Conectado" */
  text-align: left; /* Left-align text within centered container */
}

/* Override for Ubuntu to ensure white, left-aligned, and centered text with increased spacing */
@-moz-document url-prefix() { /* Firefox on Ubuntu */
    .page-description {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto 40px; /* Increase bottom margin for spacing */
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chromium/Brave on Ubuntu */
    .page-description {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto 40px; /* Increase bottom margin for spacing */
    }
}

@media (max-width: 767px) {
  .page-description {
    font-size: var(--font-size-md);
    max-width: 300px; /* Reduce width for mobile */
    margin: 0 auto 20px; /* Reduce margin for mobile to maintain readability */
  }
}

/* ===== Bitcoin Payment Text Styles ===== */
.bitcoin-payment-text {
  font-size: var(--font-size-md);
  font-weight: bold;
  text-align: left; /* Left-align text within centered container */
  margin: 10px auto 20px; /* Center horizontally and reduce margins */
  line-height: 1.6;
  max-width: 600px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  color: var(--primary-color); /* White text to match original */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Maintain shadow for contrast against dark background */
}

/* Ensure perfect centering and alignment on Ubuntu */
@-moz-document url-prefix() { /* Firefox on Ubuntu */
    .bitcoin-payment-text {
        text-align: left; /* Ensure left alignment */
        margin: 10px auto 20px; /* Center horizontally */
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chromium/Brave on Ubuntu */
    .bitcoin-payment-text {
        text-align: left; /* Ensure left alignment */
        margin: 10px auto 20px; /* Center horizontally */
    }
}

/* Ensure social media icons below "Mantente Conectado" are centered */
.footer-social-links {
  display: flex;
  justify-content: center; /* Center icons horizontally */
  margin-top: 20px; /* Añadido margen superior para separar del texto anterior */
}

/* ===== Social Links Styles (Footer) ===== */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary-color); /* White circle */
  color: var(--secondary-color); /* Black icon */
  transition: all 0.3s ease-in-out;
}

.social-link:hover {
  background-color: var(--secondary-color); /* Black circle */
  color: var(--primary-color); /* White icon */
}

/* Estilos para el logo de Nostr */
.nostr-logo {
    width: 20px; /* Ajusta el tamaño según sea necesario */
    height: 20px; /* Ajusta el tamaño según sea necesario */
    filter: brightness(0) invert(0); /* Color predeterminado (negro) */
    transition: filter 0.3s ease-in-out; /* Efecto de hover suave */
}

.social-link:hover .nostr-logo {
    filter: brightness(0) invert(1); /* Color al hacer hover (blanco) */
}

/* X Logo Size */
.x-logo {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(0); /* Black icon */
  transition: filter 0.3s ease-in-out;
}

.social-link:hover .x-logo {
  filter: brightness(0) invert(1); /* White icon */
}

/* Telegram Icon Color */
.mdi.mdi-telegram {
  color: var(--secondary-color); /* Black icon */
  transition: color 0.3s ease-in-out;
}

.social-link:hover .mdi.mdi-telegram {
  color: var(--primary-color); /* White icon */
}

/* Alignment Fix for Social Icons */
.navbar-text, .footer-social-links {
  display: flex;
  align-items: center;
  gap: 16px; /* Restore original spacing */
}

/* ===== Dark Mode Styles ===== */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: var(--primary-color);
  }

  .page-description {
    color: var(--primary-color);
  }

  .navbar-dark .navbar-text {
    border-right: 1px solid var(--primary-color);
  }

  /* Footer Styles */
  footer {
      background-color: transparent;
      color: var(--primary-color);
      padding: 20px 0;
  }

  /* Estilos para el contenedor de logos */
  .logo-container {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap; /* Prevent wrapping to ensure horizontal row on Ubuntu */
      justify-content: center;
      align-items: center;
      gap: 15px; /* Restore original spacing */
      margin-top: 15px;
      min-width: 0; /* Ensure container doesn’t shrink too much */
  }

  /* Estilos para los logos */
  .footer-logo {
      width: 40px; /* Maintain original size for Windows */
      height: auto; /* Mantener la proporción */
      opacity: 0.8; /* Opacidad */
      transition: opacity 0.3s ease; /* Transición suave */
  }

  .footer-logo:hover {
      opacity: 1; /* Opacidad completa al hacer hover */
  }

  /* Ajustes para móviles */
  @media (max-width: 480px) {
      .logo-container {
          gap: 10px;
          flex-wrap: wrap; /* Allow wrapping on very small screens */
      }
      .footer-logo {
          width: 30px; /* Reduce size for mobile */
      }
  }
}

/* Browser-specific fixes for Ubuntu (Firefox) */
@-moz-document url-prefix() { /* Firefox */
    .navbar-brand img {
        height: 100px; /* Increase size for better visibility on Ubuntu */
    }
    main {
        margin-top: 20px;
    }
    .footer-logo {
        width: 30px; /* Reduce size for Ubuntu to avoid "huge" appearance */
    }
    .logo-container {
        flex-wrap: nowrap; /* Force horizontal row on Ubuntu */
        min-width: 600px; /* Ensure enough width for horizontal layout on Ubuntu */
    }
    .page-title {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto; /* Center horizontally */
    }
    .page-description {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto 40px; /* Increase bottom margin for spacing */
    }
    .bitcoin-payment-text {
        color: var(--primary-color); /* Ensure white text for contrast on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 10px auto 20px; /* Center horizontally */
    }
    .container {
        align-items: center; /* Ensure horizontal centering */
        justify-content: center; /* Ensure vertical centering */
        margin: 0 auto; /* Center container horizontally */
    }
    main, .page-title, .page-description, .bitcoin-payment-text {
        margin: 0 auto; /* Center all text elements horizontally */
    }
}

/* Browser-specific fixes for Ubuntu (Chromium/Brave) */
@media screen and (-webkit-min-device-pixel-ratio:0) { /* Chromium/Brave */
    .navbar-brand img {
        height: 100px; /* Increase size for better visibility on Ubuntu */
    }
    main {
        margin-top: 20px;
    }
    .footer-logo {
        width: 30px; /* Reduce size for Ubuntu to avoid "huge" appearance */
    }
    .logo-container {
        flex-wrap: nowrap; /* Force horizontal row on Ubuntu */
        min-width: 600px; /* Ensure enough width for horizontal layout on Ubuntu */
    }
    .page-title {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto; /* Center horizontally */
    }
    .page-description {
        color: var(--primary-color); /* White text for better visibility on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 0 auto 40px; /* Increase bottom margin for spacing */
    }
    .bitcoin-payment-text {
        color: var(--primary-color); /* Ensure white text for contrast on Ubuntu */
        text-align: left; /* Ensure left alignment */
        margin: 10px auto 20px; /* Center horizontally */
    }
    .container {
        align-items: center; /* Ensure horizontal centering */
        justify-content: center; /* Ensure vertical centering */
        margin: 0 auto; /* Center container horizontally */
    }
    main, .page-title, .page-description, .bitcoin-payment-text {
        margin: 0 auto; /* Center all text elements horizontally */
    }
}

/* High-DPI and large screen adjustments */
@media (min-width: 1200px) {
    main, .container {
        max-width: 1000px;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .page-title {
        font-size: 96px; /* Larger for high-DPI */
    }
    .page-description, .bitcoin-payment-text {
        font-size: 21px; /* Larger for high-DPI */
    }
    .navbar-brand img {
        height: 100px; /* Ensure Ubuntu fix applies to high-DPI */
    }
    .footer-logo {
        width: 40px; /* Maintain original size for high-DPI on Windows */
    }
}

/* Mobile adjustments (already working on iOS/Android) */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    .page-title {
        font-size: 28px;
        text-align: left; /* Left-align on mobile */
        margin: 0 auto; /* Center horizontally */
    }
    .page-description {
        font-size: 12px;
        text-align: left; /* Left-align on mobile */
        margin: 0 auto 20px; /* Reduce margin for mobile to maintain readability */
        max-width: 300px; /* Reduce width for mobile */
    }
    .bitcoin-payment-text {
        font-size: 12px;
        text-align: left; /* Left-align on mobile */
        margin: 10px auto 20px; /* Center horizontally */
    }
    .navbar-text {
        position: static;
        margin-top: 10px;
        width: 100%;
        justify-content: center;
    }
    .social-link {
        width: 25px;
        height: 25px;
    }
    .nostr-logo, .x-logo {
        width: 14px;
        height: 14px;
    }
    .mdi.mdi-telegram {
        font-size: 14px;
    }
    .footer-logo {
        width: 30px; /* Reduce size for mobile */
    }
    .logo-container {
        flex-wrap: wrap; /* Allow wrapping on very small screens */
        gap: 10px;
    }
}