/*
  Main site stylesheet
  --------------------
  This file intentionally contains both the structural layout and the component
  styles for the landing page. It replaces the former split between style.css
  and layout.css so the site can be maintained from one place.
*/

/* Design tokens */
:root {
  --bg: #0f1720;
  --card: #0b1220;
  --fg: #e6eef6;
  --muted: #9fb0c8;
  --link: #7c9c59;
  --mold-green: #7a8a6e;
  --header-height: 96px;
}

/* Global defaults */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

a {
  color: var(--link);
}

/* Fixed header and language controls */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--card);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.site-header + .container {
  padding-top: var(--header-height);
}

.header-inner {
  max-width: 900px;
  min-height: 72px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.header-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-title {
  color: var(--fg);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.site-nav {
  width: 100%;
  margin-top: 0.25rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--fg);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.25rem 0;
}

.lang-select button {
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--card);
  color: var(--fg);
  padding: 0.18rem 0.38rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
}

.lang-select button[aria-pressed="true"] {
  border: 2px solid #ffffff;
  font-weight: 700;
}

.site-nav a:focus,
.lang-select button:focus {
  outline: 2px solid #dddddd;
  outline-offset: 2px;
}

/* Main content wrapper */
.container {
  max-width: 900px;
  margin: 1rem auto;
  padding: 0 1rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  text-align: center;
}

.hero {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.avatar {
  width: 200px;
  height: 200px;
  display: block;
  margin: 0 auto 12px;
  border: 3px solid #ffffff;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
}

section {
  margin: 2.5rem 0;
}

.container > section {
  margin: 1.75rem 0;
  padding: 1.25rem;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.container > section h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

section h2,
h2[id] {
  scroll-margin-top: var(--header-height);
}

/* Reusable buttons */
.button {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  background: var(--card);
  color: var(--fg);
  text-decoration: none;
}

.button:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.button.contact-submit {
  margin-top: 8px;
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 10px;
  background: var(--link);
  color: var(--fg);
  cursor: pointer;
  font-weight: 700;
}

.button.contact-submit:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

/* News section */
.news-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-item {
  max-height: 600px;
  overflow: hidden;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  transition: max-height 360ms ease, opacity 280ms ease, margin 280ms ease, padding 280ms ease;
}

.news-item.collapsed {
  max-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  border-width: 0;
}

.news-text {
  margin: 0 0 0.6rem;
  color: var(--fg);
}

.news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.news-date {
  color: var(--muted);
  font-family: monospace;
  font-size: 0.9rem;
}

.news-links a {
  margin-right: 0.6rem;
  color: var(--link);
  text-decoration: underline;
}

.news-controls {
  display: flex;
  justify-content: center;
  margin-top: 0.75rem;
}

#news-toggle {
  padding: 0.45rem 0.9rem;
  border: 0;
  border-radius: 10px;
  background: var(--link);
  color: var(--fg);
  cursor: pointer;
  font-weight: 700;
}

/* Recommendation banner */
.recommendation-banner {
  margin: 12px 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--mold-green);
  color: #f6f8f4;
  text-align: left;
}

.recommendation-banner .banner-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recommendation-banner strong {
  font-size: 0.95rem;
  letter-spacing: 0.4px;
}

.recommendation-banner .banner-text {
  font-size: 0.9rem;
  opacity: 0.95;
}

.recommendation-banner a {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.85);
  color: #041123;
  text-decoration: none;
  font-weight: 600;
}

/* Projects */
.projects .project-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.project {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.project-title {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  padding: 18px 22px 8px;
  text-align: left;
}

.project-title h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.project-text {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding: 0 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  color: var(--fg);
  line-height: 1.45;
}

.project-text p {
  margin: 0;
}

.project-links {
  margin-top: 12px;
}

.project-links a {
  color: var(--link);
  font-size: 0.95rem;
  font-weight: 700;
}

.project-image {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.project-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 10px 10px 0;
}

.project:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.project:nth-child(even) .project-image {
  grid-column: 1;
}

.project:nth-child(even) .project-title {
  grid-column: 2;
  grid-row: 1;
}

.project:nth-child(even) .project-text {
  grid-column: 2;
  grid-row: 2;
}

.project:nth-child(even) .project-image img {
  border-radius: 10px 0 0 10px;
}

.project:nth-child(even) .project-title,
.project:nth-child(even) .project-text,
.project:nth-child(even) .project-links {
  text-align: right;
}

.project:not(:nth-child(even)) .project-title,
.project:not(:nth-child(even)) .project-text,
.project:not(:nth-child(even)) .project-links {
  text-align: left;
}

/* Contact form */
.contact {
  margin-top: 18px;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 10px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
}

.form-success {
  margin: 6px 0 12px;
  padding: 10px;
  border-radius: 8px;
  background: var(--mold-green);
  color: #f6f8f4;
  text-align: left;
}

/* Utility helpers */
.hidden {
  display: none;
  position: absolute;
  left: -9999px;
}

[data-lang] {
  display: none;
}

[lang="en"] [data-lang="en"],
[lang="es"] [data-lang="es"] {
  display: inline;
}

/* Footer */
.site-footer {
  padding: 1rem 0;
  border-top: 0;
  background: var(--card);
  box-shadow: none;
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  color: var(--fg);
}

/* Responsive adjustments */
@media (min-width: 700px) {
  .recommendation-banner .banner-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

@media (max-width: 720px) {
  :root {
    --header-height: 80px;
  }

  .header-inner {
    padding: 0.5rem;
  }

  .container > section {
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }

  .avatar {
    width: 140px;
    height: 140px;
  }

  .project {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: 10px;
  }

  .project-title {
    padding: 18px 18px 8px;
    text-align: center;
  }

  .project-image {
    order: 2;
    width: calc(100% - 36px);
    margin: 0 auto 12px;
    border-radius: 8px;
  }

  .project-image img {
    border-radius: 8px;
  }

  .project-text {
    padding: 0 18px 18px;
    text-align: center;
  }

  .project-links,
  .project:nth-child(even) .project-title,
  .project:nth-child(even) .project-text,
  .project:nth-child(even) .project-links,
  .project:not(:nth-child(even)) .project-title,
  .project:not(:nth-child(even)) .project-text,
  .project:not(:nth-child(even)) .project-links {
    text-align: center;
  }
}