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

/* =========================================================
   Muniverse — Black/Orange UI
   ========================================================= */
:root{
  --bg:#0b0b0b;
  --panel:#141414;
  --panel-2:#1b1b1b;
  --ink:#f3f3f3;
  --muted:#9aa0a6;
  --accent:#ff6a00;
  --accent-2:#ff9f57;
  --ring:0 0 0 2px rgba(255,106,0,.25), 0 0 36px rgba(255,106,0,.15);
  --stroke:#2a2a2a;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Kanit,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  background:linear-gradient(180deg,#0b0b0b 0%, #0e0e0e 100%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}

/* =========================================================
   Header / Topbar / Navigation
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  background:rgba(10,10,10,.7);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid #1f1f1f;
}
.logo{display:flex;gap:8px;align-items:center;font-weight:700;color:var(--ink)}
.logo span{letter-spacing:.5px}

/* Desktop navigation links */
.nav {
  display: flex;
  gap: 14px;
  align-items: center;
}
.nav a{
  padding:8px 10px;border-radius:10px;color:#ddd;
  border:1px solid transparent;
}
.nav a.active{background:var(--panel);box-shadow:var(--ring);border-color:var(--stroke)}
.nav .pill{
  padding:8px 14px;background:var(--accent);color:black;
  border-radius:999px;font-weight:700;border:1px solid transparent;
}

/* Hide the checkbox from view but keep it functional */
.menu-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none; /* Prevents it from blocking other clicks */
}

/* Base styles for the hamburger icon lines (hidden on desktop) */
.hamburger {
  display: none; /* Hide on desktop by default */
}

/* Avatar (topbar) */
.avatar-circle{
  width:36px;height:36px;border-radius:50%;object-fit:cover;margin-left:.5rem;
  border:1px solid rgba(255,255,255,.2);
}
.avatar-link{display:flex;align-items:center}

/* Logo image inside .logo link (if used) */
.logo-image{
  max-height:40px;max-width:40px;height:auto;width:auto;display:inline-block;vertical-align:middle;margin-right:0;
}
.logo-up-image{
  max-height:60px;max-width:60px;height:auto;width:auto;display:inline-block;vertical-align:middle;margin-right:0;
}

/* --- Mobile Styles (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Restructure the header for mobile */
  .topbar {
    justify-content: space-between;
  }

  /* The menu starts hidden on mobile */
  .nav {
    display: none;
    flex-direction: column;
    gap: .5rem;
    background: #000000;
    position: absolute;
    right: 10px;
    top: 60px;
    padding: .8rem;
    border-radius: 10px;
    border: 1px solid #2b2b2b;
    box-shadow: var(--shadow);
    z-index: 999;
  }

  /* The hamburger icon is now visible on mobile */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 22px;
    width: 28px;
    cursor: pointer;
    z-index: 1000;
  }
  
  /* Style the individual bars of the hamburger */
  .hamburger .bar {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #fff;
    border-radius: 2px;
    transition: all 0.25s ease-in-out; /* Add transition for the animation */
  }

  /* Animate hamburger to a cross (X) when the menu is active */
  #menu-toggle:checked ~ .hamburger .top-bar {
    transform: translateY(9px) rotate(315deg);
  }

  #menu-toggle:checked ~ .hamburger .middle-bar {
    opacity: 0;
  }

  #menu-toggle:checked ~ .hamburger .bottom-bar {
    transform: translateY(-10px) rotate(-315deg);
  }

  /* Show the menu when the checkbox is checked */
  #menu-toggle:checked ~ .nav {
    display: flex;
  }
}

/* =========================================================
   Layout / Cards / Buttons / Forms
   ========================================================= */
.container{max-width:1100px;margin:24px auto;padding:0 16px}
.container.narrow{max-width:760px}
.section-title{margin:8px 2px 16px 2px;font-size:22px;font-weight:700}

.center-hero{min-height:70vh;display:grid;place-items:center;text-align:center;padding:24px}
.headline{font-size:28px;max-width:800px}
.glow{text-shadow:0 0 18px rgba(255,106,0,.35)}

.actions{display:flex;gap:12px;margin-top:18px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 16px;border-radius:12px;font-weight:700;
  border:1px solid var(--stroke);
  background:var(--panel); color:var(--ink); box-shadow:var(--shadow);
  transition:transform .08s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#111;border-color:transparent;box-shadow:var(--ring)
}
.btn-secondary{background:#222;border:1px solid #333}
.btn-ghost{background:transparent;border:1px solid var(--stroke)}

.card{
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%);
  border:1px solid #262626; border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.pad{padding:18px} .pad-sm{padding:12px}

.form{display:grid;gap:14px;padding:18px}
.form input,.form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke);
  background:#0f0f0f; color:var(--ink); outline:none;
}
.form input:focus,.form textarea:focus{box-shadow:var(--ring);border-color:#3a3a3a}
.form label{display:grid;gap:8px}
.form small{color:var(--muted);opacity:.9}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:720px){.two-col{grid-template-columns:1fr}}

/* =========================================================
   Feed / Posts / Media
   ========================================================= */
.feed-list{display:grid;gap:18px}

.post .post-head{display:flex;align-items:center;gap:10px;padding:14px 14px 0}
.username{font-weight:700;color:#e8e8e8}
.post .post-media img{width:100%;height:auto;display:block;background:#000}
.post .post-body{padding:12px 14px 16px}
.caption{line-height:1.55}

/* generic meta row (likes / comments) */
.meta{display:flex;align-items:center;gap:14px;color:#ddd;opacity:.95}

/* Avatar letter fallback */
.avatar-letter{
  width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #2b2b2b, #1a1a1a);
  border:1px solid #333; display:grid; place-items:center; box-shadow:var(--ring);
  position:relative; overflow:hidden;
}
.avatar-letter::after{content:attr(data-letter); color:#fff; font-weight:700}

/* Profile header */
.avatar-img{
  width:96px;height:96px;border-radius:16px;object-fit:cover;border:1px solid #2e2e2e;box-shadow:var(--shadow)
}
.page-title{margin:10px 0 4px;font-size:26px}
.p-header{display:flex;gap:14px;align-items:center;padding:16px}
.p-meta .desc{margin-top:6px;color:#eaeaea}

/* Masonry / Grid */
.masonry{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px}
.masonry .tile{position:relative;border-radius:14px;overflow:hidden;border:1px solid #262626}
.masonry .tile img{display:block;width:100%;height:100%;object-fit:cover}
.masonry .tile .tile-overlay{
  position:absolute;inset:auto 0 0 0;padding:10px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.75));
  color:#f3f3f3;font-weight:700;text-shadow:0 1px 8px rgba(0,0,0,.5);
}
@media (max-width:920px){.masonry{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.masonry{grid-template-columns:1fr}}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid .cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:1px solid var(--stroke);background:#000}
.grid .hoverable:hover{transform:translateY(-2px)}
@media (max-width:920px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

.hero img{display:block;width:100%;height:auto;object-fit:cover;background:#000}

.search{padding:10px}
.search input{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke);
  background:#0f0f0f; color:var(--ink);
}

/* Conferences cards */
.conf .conf-media img{
  width:100%;aspect-ratio:16/9;object-fit:cover;background:#000;border-bottom:1px solid #262626
}
.conf .conf-body{padding:14px}
.conf-title{margin:0 0 6px 0}
.desc{color:#eee}

.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{
  padding:6px 10px; border-radius:999px; font-size:13px;
  background:#1f1f1f; border:1px solid #2d2d2d; color:#f7f7f7;
}
.tag:hover{border-color:#3a3a3a}

.bullets{line-height:1.8}
hr{border:none;border-top:1px solid #2a2a2a;margin:14px 0}
.empty{display:grid;gap:10px;place-items:center;padding:24px;text-align:center}

.clamp-2{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.attend-cta{margin-top:14px;display:flex;gap:12px;align-items:center}

/* =========================================================
   Likes & Comments
   ========================================================= */
/* like count pill */
.like-count{
  font-weight:700; padding:2px 10px; border-radius:999px;
  border:1px solid var(--stroke); background:var(--panel); color:#fff;
}

/* like button */
.like-btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--stroke);
  background:var(--panel);
  color:#fff;
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .08s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow:0 0 0 rgba(255,106,0,0);
  user-select:none;
}
.like-btn:hover{ border-color:#3a3a42; transform:translateY(-1px) }
.like-btn:active{ transform:translateY(0) }
.like-btn[disabled]{ opacity:.6; cursor:not-allowed }

/* toggled state */
.like-btn.liked,
.like-btn:is(.liked,[data-liked="true"]){
  border-color:rgba(255,106,0,.5);
  box-shadow:0 0 0 2px rgba(255,106,0,.12) inset;
  background:linear-gradient(180deg, rgba(255,106,0,.12), rgba(255,106,0,.06));
}

/* heart pop micro-animation */
@keyframes heart-pop{
  0%{transform:scale(1)}
  40%{transform:scale(1.18)}
  100%{transform:scale(1)}
}
.like-btn.heart-pop{animation:heart-pop .18s ease}

/* comments list */
.comments{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:12px;
}
.comments li{
  border:1px solid var(--stroke);
  background:var(--panel-2);
  border-radius:12px;
  padding:10px 12px;
}
.comments li .muted{ color:var(--muted); font-size:.85em; margin-left:.4rem }
.comments li strong{ color:#fff }

/* new comment animation */
@keyframes comment-in{
  from{opacity:0; transform:translateY(4px)}
  to{opacity:1; transform:translateY(0)}
}
.comments li.added{animation:comment-in .18s ease-out}

/* comment form row */
.row{display:flex; align-items:center; gap:8px; margin-top:12px}
.row input{
  flex:1; height:40px; padding:0 12px; border-radius:10px;
  border:1px solid var(--stroke); background:#12131a; color:#fff;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.row input::placeholder{color:#6b6f7c}
.row input:focus{border-color:rgba(255,106,0,.6); box-shadow:0 0 0 3px rgba(255,106,0,.12)}
.row .btn, .row button{
  height:40px; padding:0 14px; border-radius:10px;
  border:1px solid var(--stroke); background:#14151b; color:#fff; cursor:pointer; font-weight:700;
}
.row .btn.btn-primary, .row button.btn-primary{
  background:var(--accent); border-color:var(--accent); color:#111;
}
.row .btn:disabled{opacity:.6; cursor:not-allowed}

/* touch targets */
@media (max-width:560px){
  .like-btn{padding:10px 12px}
  .row{gap:6px}
  .row input{height:44px}
  .row .btn, .row button{height:44px}
}
.form-check-label {
  display: flex;         /* Lays out the checkbox and text in a row */
  align-items: center;   /* Vertically aligns them nicely */
  gap: 8px;              /* Adds a small space between the checkbox and the text */
  white-space: nowrap;   /* Prevents the text from ever wrapping to a new line */
}
.form-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 1rem;
}

.form-wizard {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 1.8rem;
  transition: all .4s ease;
}

.form-step {
  display: none;
  animation: fadeInUp .4s ease;
}

.form-step.active {
  display: block;
}

.form-step h2 {
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 1.2rem;
  text-align: center;
}

.step-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
}

@keyframes fadeInUp {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

/* Mobile fullscreen form feel */
@media (max-width: 720px) {
  .form-overlay {
    align-items: flex-start;
    padding-top: 5rem;
  }
  .form-wizard {
    border-radius: 0;
    max-width: none;
    height: calc(100vh - 5rem);
    overflow-y: auto;
  }
    /* --- @mention styling --- */
.mention {
  color: #ff8b3d;
  font-weight: 600;
  text-decoration: none;
}

.mention:hover {
  text-decoration: underline;
  color: #ffb06a;
}

}