/* docs/style.css */

/* IMPORT & FONT */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}

/* HEADER BAR */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(17, 17, 17, 0.95);
  padding: 0.75rem 2rem;          
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.site-header h1 {
  margin: 0;
  font-size: 2.25rem;
  color: #fff;
  text-align: left;               /* keep the title flush left */
}

/* NAV LINKS */
.site-nav {
  display: flex;
  gap: 1rem;
}

.site-nav a {
  color: #1e90ff;
  font-size: 1.125rem;           
  font-weight: bold;
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-nav a:hover {
  color: #fff;
  text-decoration: underline;
}

/* CONTENT PADDING */
.content,
main {
  /* push everything down so it's not hidden behind the fixed header */
  padding-top: 3.5rem;            /* approx equal to header height */
}

/* FIX ANCHOR SCROLLING UNDER FIXED HEADER */
.content {
    padding-top: 3.5rem;
    scroll-padding-top: 3.5rem;
  }
  
/* HIDE AUTO-GENERATED ANCHORS */
.content h1 a,
.content h2 a,
.content h3 a,
.content h4 a,
.content h5 a,
.content h6 a {
  display: none !important;
}

/* SECTION HEADERS */
.content h2 {
    display: inline-block;
    position: relative;
    margin: 2rem auto 1rem;
    padding-bottom: 0.5rem;
    font-size: 1.75rem;
  }
  
  .content h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4px;
    background: #1e90ff;
  }
  
  /* VIDEO EMBED WRAPPER */
.video-wrapper {
  width: 100%;
  max-width: 800px;       
  margin: 1rem auto;      
  position: relative;    
  padding-bottom: 56.25%; /* 16:9 ratio (9/16 = .5625) */
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

  /* FORCE FEATURES HEADING TO BREAK */
  h2#features {
    display: block;       
    margin-bottom: 1rem;  
  }
  
/* FEATURES */
#features {
    text-align: center;     
  }
  
  #features ul {
    padding-left: 0;        
    margin: 0 auto 2rem;     
    max-width: 800px;        
    
    list-style-position: inside;  
    text-align: center;         
  }
  
  #features ul li {
    margin: 0.5rem 0;      
  }
  
  
/* tower/gallery captions */
.tower-grid,
.balloon-grid {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 1rem auto 2rem;
}

.tower-grid .tower-item,
.balloon-grid .balloon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tower-grid figure,
.balloon-grid figure {
  margin: 0;
  padding: 0;
  border: 2px solid #333;
  border-radius: 6px;
  overflow: hidden;
}

.tower-grid img,
.balloon-grid img {
  display: block;
  width: 100%;
  height: auto;
}

.tower-grid figcaption,
.balloon-grid figcaption {
  margin-top: 0.5rem;
  padding: 0 0.25rem 0.75rem;
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
}

/* UNIFORM BALLOON WIDTH  */
.balloon-grid .balloon-item {
    width: 150px;
    flex: 0 0 150px;
  }
  .balloon-grid img {
    width: 100%;
    height: auto;
  }

/* GAMEPLAY SCREENSHOTS */
.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 480px);  /* three 480px-wide columns */
    justify-content: center;                  /* center the whole grid */
    gap: 1.5rem;
    margin: 1rem auto 2rem;                  
  }
  
  .screenshot-grid img {
    width: 97%;  
    height: auto;
    border: 2px solid #333;
    border-radius: 6px;
    max-width: none; 
  }
  

/* FOOTER */
footer {
  padding: 2rem 0;
  background: #111;
  font-size: 0.9rem;
}

/* INSTALLATION STEPS */
#installation ol {
    max-width: 600px;       /* cap width so text lines aren’t super wide */
    margin: 0 auto 2rem;    
    padding-left: 0;       
  }
  
  #installation ol li {
    margin: 0.75rem 0;      
    font-size: 1.125rem;    
  }
  
  #installation ol li code {
    display: inline-block;  
    padding: 0.2rem 0.5rem; 
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    font-family: monospace;
  }
  
  /* TYPOGRAPHY SCALE */

/* bump up the root font-size (all rems will scale from here) */
html {
    font-size: 45px;    
  }
  
  /* headings */
  .site-header h1 {
    font-size: 2.25rem;    
  }
  
  .content h2 {
    font-size: 2.5rem;  
  }
  
  /* nav links */
  .site-nav a {
    font-size: 1.5rem; 
  }
  
  /* body copy, list items, captions */
  body,
  #about,
  #installation,
  #features ul li,
  #installation ol li,
  .tower-grid figcaption,
  .balloon-grid figcaption,
  .screenshot-grid em,
  .screenshot-grid p {
    font-size: 1.225rem; 
  }