/*
  Custom styles for the stand‑alone Leiðleitatil landing page.

  This file defines a minimalist dark theme inspired by the original Weebly
  site.  Accent colours and typography are drawn from the original page to
  preserve its look and feel while relying solely on local assets.  You can
  adjust variables at the top of the file to tweak colours or spacing across
  the entire site.
*/

/* Colour palette */
:root {
  --color-bg-dark: #000000;
  --color-bg-medium: #191919;
  --color-accent: #4caac9;
  --color-text-light: #eff1fd;
  --color-text-muted: #a1a1a1;
}

/* Global resets */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
  line-height: 1.6;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

strong {
  color: var(--color-accent);
}

p + p {
  margin-top: 1.5rem;
}


/* Header styles */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
}

.nav-logo a {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text-light);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a {
  font-weight: 500;
  color: var(--color-text-light);
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--color-accent);
}

/* Highlight the currently-active nav link */
.nav-links a.active {
  color: var(--color-accent);          /* same blue as your runes */
  font-weight: bold;                   /* keep it bold if you like */
}

.stanza {
  color: var(--color-accent);
}

/* Hero section */
.hero {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--color-text-light);
  padding-top: 2rem; /* leave space for fixed header */
  gap: 1rem;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: brightness(0.5);
}

.hero-overlay {
  position: relative;
  z-index: 1;
  padding: 1rem;
}

.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: var(--color-text-muted);
}

.hero-subtitle .rune {
  color: var(--color-accent);
  font-size: 1.25rem;
  margin: 0 0.125rem;
}

/* Section base styles */
section {
  padding: 1rem 1rem;
}

.dark-section {
  background-color: var(--color-bg-medium);
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Columns layout */
.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 1rem;
}

.column {
  flex: 1;
  min-width: 280px;
}

.column-stanza {
  flex: 1;
  min-width: 500px;
}

.column-small {
  flex: 1 1 40%;
}

.column-large {
  flex: 1 1 60%;
}

.image-container {
  text-align: center;
  margin-bottom: 1rem;
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.section-divider {
  margin: 1rem auto;
  height: 1px;
  width: 100%;
  background-color: var(--color-accent);
  opacity: 0.4;
  border: none;
}

/* Star illustration section */
.star-section {
  background-color: var(--color-bg-medium);
}

.star-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.star-img {
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Rune listing above Stave explanation */
.runes-listing {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 1.5rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.runes-listing .rune {
  color: var(--color-accent);
  font-size: 2rem;
  font-weight: 600;
}

/* Ouroboros section */
.ouroboros {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: flex-start;
}

.ouroboros-img {
  max-width: 200px;
  width: 40%;
  flex-shrink: 0;
  border-radius: 0.25rem;
  margin-right: 1rem;
}

.ouroboros-text {
  flex: 1;
  min-width: 250px;
}

/* Gallery section */
.gallery-section {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color: var(--color-text-light);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.gallery-item {
  display: block;
  overflow: hidden;
  border-radius: 0.25rem;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

/* Footer */
.site-footer {
  background-color: var(--color-bg-dark);
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

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

.site-footer a:hover {
  text-decoration: underline;
}

/* Utility classes */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.25rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .nav-links {
    gap: 1rem;
  }
  .nav-container {
    padding: 1rem;
  }
}

/* 1) Black background on "Stave Explained" */
.stave-explained {
  background-color: var(--color-bg-dark);
}

/* 2) Bigger, grey heading */
.stave-explained h2 {
  font-size: 2.5rem;                /* adjust to taste */
  color: var(--color-text-muted);   /* dark grey instead of white */
  text-align: center;
  margin-bottom: 2rem;
}

/* 3) 2×2 grid layout for images and text */
.image-grid,
.text-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;        /* space between columns and rows */
  margin-bottom: 2rem;
}

/* LIGHTBOX OVERLAY */
.lightbox-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 0.25rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.runic-block {
  color: var(--color-accent);
  white-space: pre-wrap;
  text-align: left;
}

.runic-block .colon {
  color: var(--color-text-light);
}

.translation-block {
  white-space: pre-wrap;
  text-align: left;
}

.runatal-content {
  font-size: 2rem;
}