/* Guardians: The System - Full Stylesheet */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@300;400;700&display=swap');

/* Global Styles */
body {
  font-family: 'Lato', sans-serif;
  background: #0a0a0a url('/guardians/assets/images/bg_main.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #e0e0e0;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  color: #e0d08f;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem; /* Tight layout */
}

/* Header */
.site-header {
  background: rgba(21, 21, 21, 0.5); /* Lighter transparency */
  border-bottom: 1px solid #333;
  padding: 0.5rem 0; /* Reduced padding */
  position: sticky;
  top: 0;
  z-index: 1000;
}
.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%; /* Full width */
  margin: 0;
  padding: 0 1rem; /* Edge padding */
  flex: 1; /* Distribute space evenly */
}
.logo-center {
  margin-right: 0.5rem; /* Reduced space from menu */
}
.logo-center img {
  max-width: 350px; /* Confirmed size */
  height: auto;
  display: block; /* Ensure visibility */
  min-height: 175px; /* Adjusted for new size */
}

.menu-contact-wrapper {
  display: flex;
  align-items: center;
  max-width: 900px; /* Container for menu and Contact */
}

.main-nav {
  display: flex;
  flex: 1;
  flex-wrap: wrap; /* Enable two lines */
  justify-content: center;
  gap: 2rem; /* Increased spacing */
  max-width: 700px; /* Increased for more room */
}
.nav-center {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-center li {
  list-style: none; /* Ensure no bullets */
  margin-bottom: 0.5rem; /* Vertical separation between lines */
}
.main-nav a {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem; /* Increased font size */
  color: #e0e0e0; /* Brighter text for first line */
  padding: 0.4rem 0.6rem; /* Reduced padding to fit */
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 10px; /* Softer shape */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Depth effect */
  border: 1px solid #333; /* Thin border for distinction */
  line-height: 1.5; /* Control vertical spacing */
  flex-basis: 50%; /* Force two-column layout */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle lift */
}
.main-nav a:nth-child(-n+4) {
  font-weight: bold; /* Bold first line for hierarchy */
  color: #e0e0e0; /* Ensure contrast */
}
.main-nav a:nth-child(n+5) {
  color: #d0d0d0; /* Lighter color for second line */
}
.main-nav a:hover, .main-nav a.active {
  background: linear-gradient(to right, rgba(224, 208, 143, 0.2), rgba(0, 0, 0, 0.2)); /* Gradient hover */
  color: #ffd700; /* Gold hover */
  text-decoration: underline; /* Underline on hover */
}

.contact-link {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem; /* Match menu font */
  color: #ccc;
  padding: 0.4rem 0.6rem; /* Match menu padding */
  text-decoration: none;
  transition: all 0.2s ease;
  margin-left: 1.5rem; /* Increased space from menu */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Depth effect */
  border: 1px solid #333; /* Match menu border */
  border-radius: 10px; /* Match menu shape */
}
.contact-link:hover {
  color: #00d4d4;
  text-shadow: 0 0 5px #00d4d4;
}

.nav-toggle, .nav-toggle-label {
  display: none;
}
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    align-items: center;
  }
  .logo-center {
    margin: 0.5rem 0;
  }
  .menu-contact-wrapper {
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }
  .main-nav {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .nav-center {
    flex-direction: column;
    width: 100%;
  }
  .nav-center li {
    width: 100%;
    text-align: center;
  }
  .contact-link {
    margin: 0.5rem 0;
    width: 100%;
    text-align: center;
  }
  .main-nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: rgba(21, 21, 21, 0.5); /* Match header transparency */
    border-bottom: 1px solid #333;
    z-index: 1000;
    position: absolute;
    top: 175px; /* Adjusted for new logo size */
    left: 0;
  }
  .nav-toggle:checked ~ .main-nav ul {
    display: flex;
  }
  .main-nav a {
    padding: 0.5rem 1rem; /* Larger touch target on mobile */
    flex-basis: 100%; /* Full width on mobile */
  }
  .nav-toggle-label {
    display: block;
    font-size: 1.5rem;
    color: #e0d08f;
    cursor: pointer;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
  }
}

/* Hero Section */
.hero-section {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/guardians/assets/images/hero_guardian.jpg') no-repeat center center;
  background-size: cover;
  background-attachment: fixed; /* Parallax effect */
  background-position: center;
  min-height: 80vh;
  display: flex;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden; /* Contain glyph movements */
}
.hero-section .glyph {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0.4;
  transition: transform 0.1s ease-out; /* Smooth movement for parallax */
}
.hero-section .glyph-elemental {
  top: 15%;
  left: 10%;
}
.hero-section .glyph-magic-tech {
  top: 60%;
  right: 10%;
}
.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  z-index: 1; /* Ensure content is above glyphs */
}
.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.9), 0 0 5px rgba(224, 208, 143, 0.5);
}
.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.9);
}
.cta-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap; /* Stack on mobile */
}
.cta-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #e0d08f;
  color: #0a0a0a;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  border-radius: 4px;
  transition: background 0.3s ease, color 0.3s ease;
}
.cta-button:hover, .cta-button:focus {
  background: #00d4d4;
  color: #fff;
  outline: none;
}
.secondary-cta {
  background: #d4a017; /* Slightly different color for distinction */
}
.secondary-cta:hover, .secondary-cta:focus {
  background: #b38600;
  color: #fff;
}
@media (max-width: 768px) {
  .hero-section {
    background-attachment: scroll; /* Disable parallax on mobile */
    min-height: 60vh; /* Adjust for mobile */
  }
  .cta-container {
    flex-direction: column;
    gap: 0.5rem;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
}

/* Lore Preview */
.lore-preview {
  padding: 3rem 0;
}
.lore-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}
.lore-cards-grid .card {
  background: #1d1d1d;
  border: 1px solid #333;
  padding: 1.5rem;
  border-radius: 8px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.lore-cards-grid .card:hover {
  transform: translateY(-5px);
  border-color: #e0d08f;
}

/* System Preview */
.system-preview {
  padding: 3rem 0;
}
.system-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}
.feature-box {
  background: #1c1c1c;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 1rem;
  color: #ccc;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.feature-box:hover {
  background: #2a2a2a;
  color: #e0d08f;
}

/* Spellbook Preview */
.spellbook-preview {
  background: #151515;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 3rem 1.5rem;
}
.spellbook-preview h2, .spellbook-preview p {
  color: #ddd;
}

/* Class Preview */
.classes-preview {
  padding: 3rem 0;
}
.class-icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  text-align: center;
}
.class-icon {
  font-size: 2rem;
  padding: 1rem;
  background: #1b1b1b;
  border: 1px solid #333;
  border-radius: 8px;
  color: #e0d08f;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.class-icon:hover {
  transform: scale(1.1);
  border-color: #00d4d4;
  box-shadow: 0 0 10px rgba(0, 212, 212, 0.5);
}
.class-icon span {
  display: block;
  margin-top: 0.5rem;
  font-size: 1rem;
  color: #ddd;
}
.class-icon p {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  color: #ccc;
}

/* Whispers Preview */
.whispers-preview {
  padding: 3rem 0;
}
.whispers-preview p {
  font-style: italic;
}

/* Downloads Preview */
.downloads-preview {
  padding: 3rem 0;
}
.download-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}
.download-item img {
  max-width: 100px;
  border: 1px solid #333;
  border-radius: 4px;
}

/* Footer */
.site-footer {
  background: #151515;
  border-top: 1px solid #333;
  padding: 2rem 0;
  text-align: center;
}
.site-footer a {
  color: #e0d08f;
  text-decoration: none;
}
.site-footer a:hover, .site-footer a:focus {
  color: #00d4d4;
  outline: none;
}
.footer-links {
  margin: 1rem 0;
}
.footer-links a {
  margin: 0 1rem;
}
.back-to-top {
  cursor: pointer;
  color: #e0d08f;
  margin-top: 1rem;
  display: inline-block;
}
.back-to-top:hover, .back-to-top:focus {
  color: #00d4d4;
  outline: none;
}

/* Accessibility */
:focus {
  outline: 2px solid #00d4d4;
  outline-offset: 2px;
}

/* JavaScript for Glyph Parallax (to be added to a separate .js file or inline) */
<script>
  window.addEventListener('scroll', function() {
    const scrollPosition = window.pageYOffset;
    const glyphs = document.querySelectorAll('.glyph');
    glyphs.forEach(glyph => {
      const speed = 0.5; // Adjust this value (0.1 to 1) for slower/faster movement
      glyph.style.transform = `translateY(${scrollPosition * speed}px)`;
    });
  });
</script>


/* === Guardians: homepage fixes (append) ==================== */
:root{
  --ink:#f1f6ff;
  --muted:#e2ecf7;
  --page-max:1200px;
  --page-pad:clamp(12px,2vw,28px);
}

/* Hero title: glyph · title · glyph */
.hero-title-xl{
  font-family:'Cinzel',serif;
  font-size:clamp(2.6rem,4.2vw + 1rem,4.8rem);
  letter-spacing:.03em;
  color:var(--ink);
  text-shadow:0 6px 24px rgba(0,0,0,.6);
}
.title-with-glyphs{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  color:var(--ink);
}
.title-with-glyphs::before,
.title-with-glyphs::after{
  content:""; width:42px; height:42px;
  background:url("/Guardians/assets/images/glyphs.svg") center/contain no-repeat;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.55)); opacity:.85;
}
@media (max-width:768px){
  .title-with-glyphs::before, .title-with-glyphs::after{ width:28px; height:28px; opacity:.75 }
}

/* Jump bar in hero */
.jumpbar{ margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center }
.btn.jump{
  padding:.45rem .8rem; border-radius:12px; border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08); color:var(--ink); text-decoration:none
}
.btn.jump:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12) }

/* Global section spacing, margins and max-width */
.section{ padding: min(5vw,48px) 0; color:var(--ink); padding-left:var(--page-pad); padding-right:var(--page-pad) }
.hero-section .hero-content{ max-width:var(--page-max); margin-inline:auto; padding-inline:var(--page-pad) }
.section .sec-head, .section .grid-3, .section .grid-4, .section .combined-grid, .section .paths-grid{
  max-width:var(--page-max); margin-inline:auto;
}

/* Headings rhythm */
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.65rem }
.section h2{ position:relative; padding-bottom:.35rem; font-size:clamp(1.25rem,1.2vw + .9rem,1.6rem) }
.section h2::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-2px; width:120px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); opacity:.9
}
.lead, .sublead{ color:#e8f1ff }
.muted{ color:var(--muted) }

/* Grids */
.grid-3{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) }
.grid-4{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.combined-grid{ display:grid; gap:1rem; grid-template-columns:repeat(3,1fr) }
@media (max-width:960px){ .combined-grid{ grid-template-columns:1fr } }

/* Cards + tiles pop */
.card-g{
  background:linear-gradient(180deg, rgba(22,28,36,.7), rgba(14,18,24,.6));
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px; padding:1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.feature-box h3{ margin:.25rem 0 .35rem }

/* Lore thumbnails (1:1 squares) */
.lore-figure{ margin:0 0 .6rem; border-radius:12px; overflow:hidden }
.lore-thumb{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 40%; display:block }
.lore-kicker{ margin:.1rem 0 .35rem; font-size:1.05rem }

/* Paths grid */
.paths-grid{
  display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit, minmax(140px,1fr));
  align-items:stretch;
}
.class-icon{
  text-align:center; padding:1rem; line-height:1.25;
  border-radius:14px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
}
.class-icon span{ display:inline-block; margin-top:.25rem; font-weight:700 }
.paths-note{ margin-top:.6rem; color:#e2ecf7; font-size:.95rem }

/* CTAs */
.cta-button, .btn{ color:var(--ink) }
.cta-button{
  display:inline-block; padding:.55rem .9rem; border-radius:12px;
  border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08);
  text-decoration:none
}
.cta-button:hover{ border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.12) }
.cta-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:.6rem }
.cta-button.compact{ padding:.45rem .8rem; font-size:.98rem }

/* Anchor landing offset */
#world, #system, #paths, #spells, #whispers{ scroll-margin-top:120px }

/* keep everything capped */
main, .section { max-width: 1200px; margin: 0 auto; padding: 0.5rem; }
/* but let the hero background be full width, cap only its inner content */
.hero-section { max-width: none; }
.hero-section .hero-content { max-width: 1200px; margin: 0 auto; padding: 0.5rem; }