/* ================================
   🌴 Bali Buddy Custom Overrides
   ================================ */

html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: 80px;  
}

/* Ocultar icono y barra de búsqueda en Material for MkDocs */
.md-header__option,
.md-search {
  display: none !important;
}

/* Fondo tropical solo detrás del contenido de página */
.md-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/assets/background.svg') no-repeat center center fixed;
  background-size: cover;
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

/* Capa blanca translúcida sobre el contenido */
.md-content {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  padding: 1rem;
}

/* ================================
   Tipografía y títulos
   ================================ */

/* Hero titles con degradado tropical */
.md-typeset h1,
.md-typeset h2 {
  font-weight: 800;
  background: linear-gradient(90deg, #0077b6, #00b4d8, #90e0ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Emoji más grandes para listas */
.md-typeset li::marker {
  font-size: 1.2em;
}

/* Texto principal más oscuro */
.md-typeset {
  color: #111111;
}

.md-typeset p {
  color: #1a1a1a;
  font-size: 1.05em;
  line-height: 1.65;
}

/* Enlaces visibles */
.md-typeset a {
  color: #0077b6;
  font-weight: 600;
}
.md-typeset a:hover {
  color: #023e8a;
  text-decoration: underline;
}

/* ================================
   Botones
   ================================ */
.md-button {
  border-radius: 12px;
  font-weight: bold;
  background: linear-gradient(90deg, #ffb703, #fb8500);
  color: white !important;
  transition: background 0.3s ease;
}
.md-button:hover {
  background: linear-gradient(90deg, #fb8500, #ffb703);
}

/* ================================
   Logo e iconos
   ================================ */

/* Logo centrado y siempre opaco */
img[alt="Bali Buddy Logo"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
  opacity: 1 !important;
}

/* Iconos WhatsApp y Telegram inline */
img[alt="Whatsapp Icon"],
img[alt="Telegram Icon"] {
  width: 22px;
  height: auto;
  vertical-align: middle;
  margin-right: 4px;
}

/* ================================
   Custom Footer
   ================================ */
.custom-footer {
  text-align: center;
  font-size: 0.85em;
  padding: 0.8rem 0;
  background: #000000;
  color: #cccccc;
}

.custom-footer a {
  color: #ffffff;
  margin: 0 0.5rem;
  text-decoration: underline;
}


/* Botones CTA personalizados */
a.cta {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin: 0.4rem 0.3rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  background: linear-gradient(90deg, #0077b6, #00b4d8); /* azul → teal */
  color: white !important;
  transition: background 0.3s ease, transform 0.2s ease;
}

a.cta:hover {
  background: linear-gradient(90deg, #00b4d8, #0077b6);
  transform: scale(1.05);
}


/* Botones pequeños/intermedios */
a.cta-small,
.md-typeset a.cta-small {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  margin: 0.2rem 0;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  background: #0077b6; /* azul sólido */
  color: white !important;
  font-size: 0.8rem;
  line-height: 1.2;
  transition: background 0.3s ease;
}

a.cta-small:hover,
.md-typeset a.cta-small:hover {
  background: #0096c7;
}

.dev-note {
  background-color: #e6f2ff; /* azul claro */
  border-left: 4px solid #3399ff;
  padding: 1em;
  margin: 1.5em 0;
  border-radius: 6px;
}


/* Quitar degradado azul de la cabecera en Material for MkDocs */
.md-header {
  background: #ffffff !important;  /* Fondo blanco */
  background-image: none !important; /* Elimina cualquier degradado */
  box-shadow: none !important;
}

/* Asegurar que los colores de texto del header se mantengan legibles */
.md-header, .md-header__inner, .md-tabs {
  color: #000000 !important;
}

/* Sobrescribir variables de Material que meten degradado */
:root {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #ffffff;
}