/* locaixo.com — estilo original renovado: light + dark */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --data-bg: #d4d4d4;
  --data-fg: #000000;
  --footer-bg: #6FC12F;
  --footer-fg: #000000;
  --menu-home: #000000;
  --menu-about: #00669d;
  --menu-services: #8bd300;
  --logo-bg: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121418;
    --fg: #e4e4e4;
    --data-bg: #1e2228;
    --data-fg: #e4e4e4;
    --footer-bg: #3f6b18;
    --footer-fg: #e4e4e4;
    --logo-bg: #f0f0f0;
  }
}

html[data-theme="dark"] {
  --bg: #121418;
  --fg: #e4e4e4;
  --data-bg: #1e2228;
  --data-fg: #e4e4e4;
  --footer-bg: #3f6b18;
  --footer-fg: #e4e4e4;
  --logo-bg: #f0f0f0;
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Helvetica, Arial, sans-serif;
  background-color: var(--bg);
  color: var(--fg);
}

body { display: flex; flex-direction: column; min-height: 100vh; }

a, a:visited, a:active { text-decoration: none; color: inherit; }

/* logo */
#titl {
  width: 60%;
  margin: 4% auto 0 auto;
  text-align: center;
}
#titl img {
  max-width: 100%;
  height: auto;
  background: var(--logo-bg);
  border-radius: 10px;
  padding: 6px 12px;
}

/* theme toggle */
#theme-toggle {
  position: fixed;
  top: 12px;
  right: 14px;
  font-size: 20px;
  background: none;
  border: 1px solid var(--fg);
  border-radius: 8px;
  color: var(--fg);
  cursor: pointer;
  padding: 2px 9px;
  opacity: 0.65;
}
#theme-toggle:hover { opacity: 1; }

/* content */
#content { text-align: center; flex: 1; position: relative; }

/* menu — posición absoluta: se despliega ENCIMA sin mover el contenido (comportamiento original) */
#menu { position: absolute; left: 0; width: 100%; z-index: 54; }
#navigationMenu { padding: 0; margin: 0; }
#navigationMenu li {
  list-style: none;
  display: inline-block;
  vertical-align: top;
  width: 28%;
  min-width: 160px;
}
#navigationMenu a { font-weight: bold; }
#navigationMenu a:hover { text-decoration: underline; }
#navigationMenu span {
  display: none;
  font-size: 18px;
  letter-spacing: 0.6px;
  white-space: nowrap;
  line-height: 39px;
}
.menulogo { font-size: 300%; }

.home     { background: var(--menu-home); }
.home span,     .home .menulogo     { background: var(--menu-home); color: #fff; }
.about    { background: var(--menu-about); }
.about span,    .about .menulogo    { background: var(--menu-about); color: #fff; }
.services { background: var(--menu-services); }
.services span, .services .menulogo { background: var(--menu-services); color: #000; }

#navigationMenu .home:hover span,
#navigationMenu .about:hover span,
#navigationMenu .services:hover span { display: block; }

/* caja de contenido */
#data {
  position: relative;
  text-align: justify;
  padding: 4%;
  width: 70%;
  max-width: 720px;
  margin: 130px auto 0 auto; /* clearance para la fila del menú absoluto */
  background: var(--data-bg);
  color: var(--data-fg);
  border-radius: 4px;
}
#data a { text-decoration: underline; }
#data a:hover { text-decoration: none; }
#data img { vertical-align: middle; }

/* footer */
#footer {
  width: 100%;
  background-color: var(--footer-bg);
  color: var(--footer-fg);
  text-align: center;
  margin-top: 3%;
  font-size: 80%;
  padding: 4px 0;
}

@media (max-width: 700px) {
  #menu { position: static; } /* en móvil el menú vuelve al flujo normal */
  #navigationMenu li { width: 90%; display: block; margin: 0 auto 10px auto; }
  #navigationMenu span { display: block; } /* en móvil el menú va siempre desplegado */
  #data { width: 86%; margin-top: 6%; }
}