/* ============================
   styl.css — Standings + UI
   Applies to the previously provided HTML
   ============================ */

/* ─── CSS Variables ─────────────────────────────── */
:root{
  --primary:#6ec1e4;
  --secondary:#9ad0f5;
  --accent:#b3e5fc;
  --bg:#f7f8fa;
  --text:#222;
  --radius:14px;
}

/* ─── Global Resets ─────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Poppins',sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}
img{max-width:100%;display:block;}

/* ─── Header / Nav ─────────────────────────────── */
header{
  position:fixed;top:0;left:0;width:100%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  padding:1rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  z-index:999;
}
.logo{
  font-size:1.9rem;font-weight:700;color:#fff;letter-spacing:.5px;
  text-decoration:none;
}

/* Hamburger Menu Button */
.hamburger-menu {
  display:none;
  flex-direction:column;
  justify-content:space-around;
  width:2rem;height:1.5rem;
  background:transparent;border:none;cursor:pointer;padding:0;
  z-index:1000;
}
.hamburger-menu span {
  display:block;width:100%;height:3px;background:#fff;
  border-radius:3px;transition:all .3s ease-in-out;
}
/* 'X' icon state for active hamburger */
nav.nav-active .hamburger-menu span:nth-child(1){transform:translateY(8px) rotate(45deg);}
nav.nav-active .hamburger-menu span:nth-child(2){opacity:0;}
nav.nav-active .hamburger-menu span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

nav .nav-links{list-style:none;display:flex;gap:2rem;margin:0;padding:0;}
nav a{
  color:#fff;text-decoration:none;font-weight:500;position:relative;cursor:pointer;
  padding:.25rem 0;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:-4px;height:2px;width:0;background:#fff;
  transition:width .3s;pointer-events:none;
}
nav a:hover::after{width:100%;}

/* ─── Hero Section ─────────────────────────────── */
.hero{
  padding:8rem 1rem 1rem;
  text-align:center;
  background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
  color:#fff;
}
.hero h1{font-size:2.8rem;font-weight:700;line-height:1.2;}
.hero h1 {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: inherit;
}
.hero p{margin:.8rem auto 2.2rem;max-width:700px;font-size:1.1rem;}

/* ─── Sections / Headings ─────────────────────── */
section{padding:4rem 1rem;max-width:1100px;margin:0 auto;}
h2, h1 {
  font-size:2.1rem;text-align:left;margin:2rem 0 1rem;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ─── Cards / Utilities (for optional content) ─ */
.job-container{
  background:#fff;padding:2rem;border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.job-container h2{color:var(--primary);border-bottom:2px solid var(--secondary);
  padding-bottom:.5rem;margin-bottom:1.5rem;font-size:1.6rem;}
.detail-list{list-style:none;padding-left:0;}
.detail-list li{padding-left:1.5rem;position:relative;margin-bottom:.75rem;}
.detail-list li::before{content:'✓';color:var(--primary);position:absolute;left:0;font-weight:bold;}
blockquote{
  background:#eef7ff;border-left:5px solid var(--secondary);
  margin:1.5rem 0;padding:1rem 1.5rem;font-style:italic;color:#555;
}
.glance-item{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.glance-item .icon{font-size:1.5rem;width:30px;text-align:center;}
.apply-section{text-align:center;margin-top:3rem;}
.apply-button{
  display:inline-block;padding:.85rem 2rem;background:var(--primary);color:#fff;font-weight:600;
  border-radius:var(--radius);text-decoration:none;transition:transform .25s,background-color .3s;cursor:pointer;
}
.apply-button:hover{transform:translateY(-3px);background:var(--secondary);}
.back-button {
  display: inline-block; padding: .6rem 1.5rem; background: var(--primary); color: #fff; font-weight: 500; border-radius: var(--radius); text-decoration: none; transition: transform .25s, background-color .3s; cursor: pointer; margin-bottom: 1.5rem;
}
.back-button:hover { transform: translateY(-2px); background: var(--secondary); }
footer{text-align:center;padding:2rem 1rem;color:#888;font-size:.9rem;}

/* ─── Standings Tables (specific to provided HTML) ─ */
.l-strip_list .legend,
.strip-plain .table-legend{font-size:.9rem;color:#666;margin-bottom:.75rem;}
.table-legend-statuses{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;}
.table-legend-status{display:flex;gap:.35rem;align-items:center;}

.table-wrapper{
  overflow-x:auto;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  padding:1rem;
}

/* Table base */
.table2.standings-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  font-size:.95rem;
}
.table2.standings-table thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#f9fbff,#f1f5ff);
  color:#2a2a2a;
  text-align:left;
  padding:.6rem .75rem;
  border-bottom:1px solid #e7ecf5;
}
.table2.standings-table tbody td{
  padding:.55rem .75rem;
  border-bottom:1px solid #f0f2f6;
  vertical-align:middle;
}
.table2.standings-table tbody tr:nth-child(even){background:#fcfdff;}
.table2.standings-table tbody tr:hover{background:#f7fbff;}

/* Rank cell */
.table-item-autofit.font-bold{
  font-weight:700;
}
.table2 .table-item-autofit.font-bold{
  width:56px;text-align:center;
}

/* Right-aligned numeric columns */
.table-align-right{ text-align:right; }

/* Team link styling */
.standings-cell--expand a{
  color:#0f62fe;
  text-decoration:none;
  font-weight:600;
}
.standings-cell--expand a:hover{
  text-decoration:underline;
}

/* Problem result cells */
.standings-table-result-cell{
  display:inline-block;
  min-width:46px;
  padding:.2rem .4rem;
  border-radius:999px;
  font-size:.85rem;
  line-height:1.2;
  text-align:center;
  border:1px solid transparent;
}

/* Status coloring */
.solved .standings-table-result-cell{
  background:#e9f8ef;border-color:#c8efd4;color:#176b37;
}
.attempted .standings-table-result-cell{
  background:#fff0f0;border-color:#ffd8d8;color:#a40000;
}
.pending .standings-table-result-cell,
.legend-pending .standings-table-result-cell{
  background:#fff6e6;border-color:#ffe1b5;color:#8a4d00;
}

/* Legend icons + cell icons (Font Awesome fallback) */
.status-icon{display:inline-block;width:18px;height:18px;border-radius:50%;margin-right:.25rem;vertical-align:middle;}
.status-icon.cell-solved{background:#22c55e;}
.status-icon.cell-attempted{background:#ef4444;}
.status-icon.cell-pending,
.status-icon.legend-pending{background:#f59e0b;}
/* Add glyphs if FA isn't loaded */
.status-icon.cell-solved::before{content:'✓';color:#fff;font-size:.75rem;display:block;text-align:center;line-height:18px;}
.status-icon.cell-attempted::before{content:'×';color:#fff;font-size:.78rem;display:block;text-align:center;line-height:18px;}
.status-icon.cell-pending::before,
.status-icon.legend-pending::before{content:'?';color:#fff;font-size:.75rem;display:block;text-align:center;line-height:18px;}

/* Column headers (A..J/K) links */
.col-url{
  color:#334155;
  text-decoration:none;
  font-weight:600;
}
.col-url:hover{color:#0f62fe;text-decoration:underline;}

/* Division spacing */
h2 + .l-strip_list{margin-top:.5rem;}
.l-strip_list{scroll-margin-top:80px;} /* helpful if anchored */

/* ─── Responsive Tweaks ───────────────────────── */
@media(max-width:1024px){
  .table2.standings-table{font-size:.9rem;}
}
@media(max-width:768px){
  .hero h1{font-size:2.35rem;}
  .hamburger-menu{display:flex;}
  nav .nav-links{
    display:none;flex-direction:column;position:absolute;top:100%;left:0;width:100%;
    background:var(--primary);box-shadow:0 4px 10px rgba(0,0,0,.1);padding:.5rem 0;gap:0;
  }
  nav.nav-active .nav-links{display:flex;}
  nav .nav-links li{width:100%;text-align:center;}
  nav .nav-links a{display:block;padding:1rem 2rem;}
  nav .nav-links a::after{left:50%;transform:translateX(-50%);bottom:.5rem;}
  nav .nav-links a:hover::after{width:50%;}

  .table2.standings-table thead th,
  .table2.standings-table tbody td{padding:.5rem .6rem;}
  .standings-table-result-cell{min-width:42px;font-size:.8rem;}
}


body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 24px; }
h2 { margin: 24px 0 12px; }

h1 {
  text-align: center;
}

.table-wrapper { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 6px 8px; white-space: nowrap; }
thead th { position: sticky; top: 0; }
.font-bold { font-weight: 700; }
.table-align-right { text-align: right; }
.standings-table-result-cell { display: inline-block; min-width: 40px; text-align: center; }
.legend { font-size: 12px; margin-bottom: 6px; }