/* =========================================================
   The Irregulars — styles.css
   Natural, high-contrast, NO gradients
   Neutrals: paper + charcoal
   Energy: brick / rust
   Accents: cyan + deep forest green
   ========================================================= */

/* ============ THEME TOKENS ============ */
:root{
  --bg: #f3efe6;              /* paper */
  --panel: #fbfaf6;           /* card surface */
  --panel2: #ebe4d6;          /* sidebar/alt surface */
  --text: #1d1b18;            /* charcoal ink */
  --muted: #6d645b;           /* warm gray */

  /* Contrast + lines */
  --stroke: rgba(29,27,24,0.14);
  --stroke-soft: rgba(29,27,24,0.10);
  --shadow: 0 12px 24px rgba(20, 16, 12, 0.12);
  --brick: #b5482f;           /* brick */
  --rust: #d0602b;            /* rust orange */
  --amber: #f2a65a;           /* warm highlight */

  /* Accents */
  --cyan: #1aa7a1;            /* cyan */
  --forest: #1f4b3a;          /* deep forest green */
  --forest-soft: rgba(31,75,58,0.12);
  --cyan-soft: rgba(26,167,161,0.14);
  --brick-soft: rgba(181,72,47,0.14);

  /* Main accent used by primary buttons */
  --accent: var(--rust);

  --sidebarW: 280px;
}

/* ============ BASE / RESET ============ */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

.muted{ color: var(--muted); }
.small{ font-size: 0.92rem; }

/* ============ TOP BAR ============ */
.topbar{
  position: sticky;
  top:0;
  z-index: 20;
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 12px 14px;

  background: rgba(243,239,230,0.96);
  border-bottom: 1px solid var(--stroke);
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.brand__mark{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: var(--brick);
  color: #fff;
  border: 1px solid rgba(29,27,24,0.18);
  box-shadow: var(--shadow);
}

.topnav{
  margin-left:auto;
  display:flex;
  gap: 10px;
}

.topnav a{
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--muted);
}

.topnav a:hover{
  color: var(--text);
  background: rgba(29,27,24,0.05);
  text-decoration:none;
}

.iconBtn{
  border: 1px solid var(--stroke);
  background: rgba(29,27,24,0.04);
  color: var(--text);
  border-radius: 14px;
  padding: 8px 12px;
  cursor:pointer;
}

.mobileOnly{ display:none; }

/* ============ APP LAYOUT (Hub) ============ */
.app{
  display:grid;
  grid-template-columns: var(--sidebarW) 1fr;
  min-height: calc(100vh - 58px);
}

/* Sidebar */
.sidebar{
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
  overflow: auto;

  border-right: 1px solid var(--stroke);
  background: var(--panel2);
  padding: 14px;
}

.sidebar__section{ margin-bottom: 18px; }

.sidebar__title{
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.3px;
}

/* Member items */
.memberItem{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;

  border: 1px solid var(--stroke-soft);
  background: var(--panel);
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}

.memberItem:hover{
  text-decoration:none;
  border-color: rgba(26,167,161,0.45);       
  box-shadow: 0 14px 30px rgba(26,167,161,0.10);
}

.memberItem__avatar{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 900;
  color: #fff;

  background: var(--forest);                 
  border: 1px solid rgba(29,27,24,0.14);
}

.avatar--brick{ background: var(--brick); }
.avatar--cyan{ background: var(--cyan); }

.memberItem__name{ font-weight: 900; }
.memberItem__meta{ font-size: 0.9rem; color: var(--muted); }

/* Sidebar links */
.sideLink{
  display:block;
  padding: 10px 12px;
  border-radius: 16px;

  border: 1px solid var(--stroke-soft);
  background: rgba(251,250,246,0.75);
  color: var(--muted);
  margin-bottom: 10px;
}

.sideLink:hover{
  text-decoration:none;
  color: var(--text);
  border-color: rgba(31,75,58,0.45);        
  background: var(--forest-soft);
}

.sidebar__footer{
  padding-top: 10px;
  border-top: 1px solid rgba(29,27,24,0.10);
}

/* Main */
.main{
  padding: 18px 18px 60px;
}

/* ============ FEATURED SECTION ============ */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.featured__media {
  border: 1px solid var(--stroke-soft);
  background: var(--panel);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
}


.mediaPlaceholder{
  height: 320px;
  border-radius: 16px;
  border: 2px dashed rgba(26,167,161,0.45);   /* cyan */
  background: rgba(26,167,161,0.08);

  display:flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
}

.mediaPlaceholder__tag{
  display:inline-block;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;

  background: var(--brick-soft);
  border: 1px solid rgba(181,72,47,0.28);
  color: var(--text);

  font-weight: 850;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.mediaPlaceholder__title{
  font-weight: 900;
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.mediaPlaceholder__meta{ color: var(--muted); }

/* ============ SECTIONS BELOW THE FOLD ============ */
.section{
  padding: 18px 0;
  margin-top: 18px;
  border-top: 1px solid rgba(29,27,24,0.07);
}

.section__head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section__head h2{
  margin:0;
  font-size: 1.35rem;
}

/* Panels / cards */
.panel{
  border: 1px solid var(--stroke-soft);
  background: var(--panel);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow);
}

/* Use these for variety (optional classes in HTML) */
.panel--brick{
  background: rgba(181,72,47,0.08);
  border-color: rgba(181,72,47,0.22);
}
.panel--cyan{
  background: var(--cyan-soft);
  border-color: rgba(26,167,161,0.30);
}
.panel--forest{
  background: var(--forest-soft);
  border-color: rgba(31,75,58,0.28);
}

.panelRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

.panelTitle{ font-weight: 900; }

.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.linkCard{
  border: 1px solid var(--stroke-soft);
  background: var(--panel);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}

.linkCard:hover{
  text-decoration:none;
  border-color: rgba(181,72,47,0.35);
  box-shadow: 0 14px 30px rgba(181,72,47,0.10);
}

.linkCard__title{
  font-weight: 900;
  margin-bottom: 4px;
}

.contactGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  font-weight: 850;
  cursor: pointer;
}

.btn:hover{
  text-decoration:none;
  transform: translateY(-1px);
}

.btn--primary{
  background: var(--accent); /* rust */
  color: #fff;
  border: 1px solid rgba(29,27,24,0.18);
  box-shadow: 0 12px 22px rgba(208,96,43,0.18);
}

.btn--primary:hover{ filter: brightness(1.03); }

.btn--ghost{
  background: rgba(29,27,24,0.04);
  border: 1px solid var(--stroke);
  color: var(--text);
}

.btn--cyan{
  background: var(--cyan);
  color: #fff;
  border: 1px solid rgba(29,27,24,0.18);
  box-shadow: 0 12px 22px rgba(26,167,161,0.18);
}

.btn--forest{
  background: var(--forest);
  color: #fff;
  border: 1px solid rgba(29,27,24,0.18);
  box-shadow: 0 12px 22px rgba(31,75,58,0.18);
}

/* ============ CHIPS (SOCIALS) ============ */
.chip{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  background: rgba(29,27,24,0.04);
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 750;
}

.chip--brick{
  border-color: rgba(181,72,47,0.28);
  background: rgba(181,72,47,0.10);
}
.chip--cyan{
  border-color: rgba(26,167,161,0.30);
  background: rgba(26,167,161,0.10);
}
.chip--forest{
  border-color: rgba(31,75,58,0.30);
  background: rgba(31,75,58,0.10);
}

.chip:hover{
  text-decoration:none;
  border-color: rgba(29,27,24,0.18);
}

/* ============ FOOTER ============ */
.footer{
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(29,27,24,0.12);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}

/* ============ RESPONSIVE EMBEDS (YouTube/Twitch) ============ */
.embed{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;

  border: 1px solid var(--stroke-soft);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============ MEMBER PROFILE PAGES ============ */
.profile{
  padding: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.profileHero{
  border: 1px solid var(--stroke-soft);
  background: var(--panel);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.profileHero__banner{
  position: relative;
  height: 160px;

  /* IMPORTANT: allow background-image to show */
  background-color: transparent;

  border-bottom: 1px solid rgba(29,27,24,0.10);
}

.profileHero__overlay{
  position: absolute;
  inset: 0;

  /* subtle cinematic tint, DOES NOT hide image */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.35)
  );
}

.profileHero__content{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 14px;
  align-items: center;
}

.profileHero__avatar{
  width: 70px;
  height: 70px;
  border-radius: 22px;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 1.35rem;
  color: #fff;

  background: var(--brick);
  border: 1px solid rgba(29,27,24,0.18);
}

.profileHero__text h1{
  margin: 0 0 4px 0;
  font-size: 1.9rem;
}

.profileHero__socials{
  margin-top: 10px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profileHero__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .featured{ grid-template-columns: 1fr; }
  .mediaPlaceholder{ height: 260px; }
  .grid2{ grid-template-columns: 1fr; }
  .contactGrid{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .profileHero__content{ grid-template-columns: auto 1fr; }
  .profileHero__cta{
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

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

  .sidebar{
    position: fixed;
    top: 58px;
    left: 0;
    width: min(92vw, 320px);
    height: calc(100vh - 58px);
    transform: translateX(-110%);
    transition: transform 180ms ease;
    z-index: 30;
    box-shadow: var(--shadow);
  }

  .sidebar.sidebar--open{ transform: translateX(0); }

  .mobileOnly{ display:inline-flex; }
  .topnav{ display:none; }
}