/* ---------- Base Colors ---------- */
:root {
  --bg-peach: #f8ded7;   /* outer background */
  --body-peach: #fff9f6; /* inner body */
  --line: #ead9d2;       /* border */
  --ink: #222;           /* text */
}

/* ---------- Page Background ---------- */
body {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  color: var(--ink);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;

  /* fallback color behind your image */
  background-color: var(--bg-peach);

  /* repeating background image */
  background-image: url("/design/backgrounds/5020.png"); /* update file path/name */
  background-repeat: repeat;      /* tiles in all directions */
  background-size: auto;          /* keeps the image at its real pixel size */
  background-attachment: fixed;   /* optional – makes pattern stay still */
  background-position: top left;  /* start tiling from corner */
}

/* ---------- Main Box ---------- */
.container {
  background: var(--body-peach);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: min(950px, 90%);
  margin-top: 3rem; /* space above header */
  margin-bottom: 3rem;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* ensures clean rounded corners */
}

/* ---------- Header ---------- */
header {
  text-align: center;
  padding: 2rem 1rem 1rem;
  border-bottom: none;
}

h1 {
  margin: 0 0 0.8rem 0;
  font-size: 1.8rem;
}

/* ---------- Navigation ---------- */

nav {
  margin-top: 2rem;
}

/* shared row styles */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* primary nav (top row) */
nav .nav-primary a {
  text-decoration: none;
  color: var(--ink);
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
  transition: background 0.2s ease;
}

nav .nav-primary a:hover {
  background: #ffe7a8;
}

/* spacing between rows */
nav .nav-secondary {
  margin-top: 1.4rem;
}

/* secondary nav (bottom row) */
nav .nav-secondary a {
  text-decoration: none;
  color: var(--ink);
  font-size: 0.85rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #FFEEEB;
  opacity: 0.9;
  transition: background 0.2s ease, opacity 0.2s ease;
}

nav .nav-secondary a:hover {
  background: #fff3cf;
}

/* ---------- Main ---------- */
main {
  padding: 1.25rem 2rem 2rem;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--line);
  text-align: center;
  padding: 1rem;
  background: var(--body-peach);
}


/* ---------- bulletin-board---------- */

.bulletin-board {
  background: #fffaf0;       /* slightly warm cream */
  border: 2px solid #e0d2b8;
  border-radius: 20px;
  padding: 2.5rem;
  margin: 1rem auto 2rem;
  width: 92%;
  max-width: 900px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
}

.bulletin-title {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1.5rem;
  margin-top: .5rem;
  font-weight: 600;
  opacity: 0.6;
  letter-spacing: 1px;
}


/* ---------- Doorway Grid (Rooms) ---------- */


.doorway-grid{
  display: grid;
  grid-template-columns: repeat(3, 240px);
  column-gap: 2rem;
  row-gap: 2rem;
  justify-content: center;
  justify-items: center;
  align-items: start;
  margin-top: 1.25rem;
}



/* each doorway link */
.doorway{
  display: block;
  text-decoration: none;
  color: var(--ink);
  width: 100%;
  max-width: 240px; /* controls doorway width */
}

/* the arch/door shape */

.doorway-card{
  background: var(--door-bg, rgba(255,255,255,0.65));
  border: 2px solid #e0d2b8;
  border-radius: 120px 120px 18px 18px;
  height: 240px;
  padding: 1.25rem 1rem;

  box-shadow: 0 6px 12px rgba(0,0,0,0.05);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.9rem;

  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.doorway:hover .doorway-card{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
  opacity: 0.95;
}
city: 0.95;
}

/* title inside the doorway */

.doorway-title{
  font-size: 1.35rem;
  text-align: center;
  line-height: 1.25;

  min-height: 3.2rem;   /* space for 2 lines */
  display: flex;
  align-items: center;
  justify-content: center;
}



/* optional image inside doorway */

.doorway-card img{
  width: 175px;
  height: 175px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}


/* Responsive: drop columns as screen narrows */
@media (max-width: 1100px){
  .doorway-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px){
  .doorway-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .doorway-grid{ grid-template-columns: 1fr; }
  .doorway{ max-width: 280px; }
}



/* ---------- Recent Media (Twitch embeds) ---------- */

.recent-media{
  margin: 2rem auto 3rem;
  max-width: 900px;
  text-align: center;
}

.video-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
}

/* This is what makes them feel small + calm */
.video-item{
  background: #fffaf0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.04);
}

/* Force embeds to behave */
.video-item iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px;
  border: none;
}

/* Responsive */
@media (max-width: 900px){
  .video-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .video-grid{
    grid-template-columns: 1fr;
  }
}


/* ---------- Recent additions (thumbnail shelf) ---------- */
.recent-media{
  margin: 2.5rem auto 3rem;
  text-align: center;
}

.thumb-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1rem;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.thumb{
  text-decoration: none;
  color: var(--ink);
}

.thumb img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;

  border-radius: 14px;
  border: 2px solid #e0d2b8;
  box-shadow: 0 6px 12px rgba(0,0,0,0.06);
  background: #fffaf0;
}

.thumb-cap{
  margin-top: 0.6rem;
  font-size: 0.95rem;
  opacity: 0.85;
}

.thumb:hover img{
  transform: translateY(-2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 10px 18px rgba(0,0,0,0.08);
}

@media (max-width: 900px){
  .thumb-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .thumb-grid{ grid-template-columns: 1fr; }
}


/* ---------- section separator ---------- */

.section-separator{
  margin: 5rem auto 3rem;
  width: 70%;
  height: 1px;
  background: rgba(0,0,0,0.08);
}


/* ---------- HQ / Admin Footer ---------- */
.hq-footer{
  margin-top: 3rem;
  border-top: 1px solid rgba(0,0,0,0.18);
  background: transparent;
  padding: 2rem 1.5rem 1.25rem;
}

.hq-inner{
  max-width: 1000px;
  margin: 0 auto;

  display: flex;              /* switch from grid */
  justify-content: center;    /* center the group */
  gap: 0.75rem;               /* tighter spacing */
  flex-wrap: wrap;            /* wraps nicely on small screens */
}

/* Button tiles */
.hq-btn{
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  color: var(--ink);
  text-align: center;

  padding: 0.45rem 0.75rem;          /* smaller */
  min-height: unset;               /* important */
  
  
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.14);
  background: rgba(255,255,255,0.45);

  box-shadow: none;                /* remove card feel */
  font-size: 0.85rem;

  transition: background 0.15s ease, transform 0.1s ease;
}

.hq-btn:hover{
  background: rgba(255,255,255,0.7);
  transform: translateY(-1px);

}

/* Bottom row (copyright left, socials right) */
.hq-bottom{
  max-width: 1000px;
  margin: 1.25rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.12);
}

.hq-bottom-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  opacity: 0.85;
  font-size: 0.9rem;
}

.hq-social-bottom{
  display: flex;
  gap: 12px;
  align-items: center;
}

.hq-social-bottom img{
  width: 26px;
  height: 26px;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}

.hq-social-bottom img:hover{
  opacity: 0.65;
}

/* Responsive */
@media (max-width: 1000px){
  .hq-inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .hq-inner{ grid-template-columns: 1fr; }

  .hq-bottom-inner{
    flex-direction: column;
    gap: 0.75rem;
  }
}