/* =========================================================
   BASE THEME VARS & RESETS
   ========================================================= */
:root {
  --bg:#0b1220; --card:#101828; --text:#e6e8ee; --muted:#9aa4b2;
  --accent:#1ea7fd; --tap:48px; --border:#1f2937; --header:#0f172a;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Ubuntu, Arial, sans-serif;
  background:#0e1117; color:var(--text);
}
.container {
  max-width:1100px; margin:0 auto; padding:14px 16px;
}

/* Utility */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
img { max-width:100%; height:auto; display:block; }

/* =========================================================
   PUBLIC SITE HEADER / NAV
   ========================================================= */
.site-header, .site-footer {
  background:#0b0f16; border-bottom:1px solid var(--border);
}
.site-header { background: var(--header); border-bottom:1px solid #1f2a44; }

/* Header inner layout */
.site-header .container {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}

/* Brand */
.brand {
  display:flex; align-items:center; gap:8px; text-decoration:none;
}
.brand-text { font-weight:800; font-size:20px; color:#fff; }
.site-logo, .brand .site-logo {  height:44px; display:inline-block; vertical-align:middle; }
.logo-img.is-hidden { display:none; }
.site-name { font-weight:800; font-size:1.25rem; }
/* Force header links to white */
.site-header a,
.site-header a:visited,
.admin-header a,
.admin-header a:visited {
  color: #fff;
  text-decoration: none;
}

/* Active and hover states */
.site-header a:hover,
.site-header a.is-active,
.admin-header a:hover,
.admin-header a.is-active {
  color: #1ea7fd; /* your accent blue */
}
/* Top nav (links can live in .nav or a <nav>) */
.nav a:link, .nav a:visited {
  color:#cbd5e1; text-decoration:none; font-weight:600;
  padding:6px 10px; border-radius:6px; transition:background .15s, color .15s;
}
.nav a:hover { background:#1e293b; color:#fff; }

/* Generic nav (works for public & admin) */
nav { background: var(--header); border-bottom:1px solid #1f2a44; padding:10px 16px; }
nav .nav-inner {
  max-width:1100px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
nav .brand { font-weight:700; font-size:20px; color:#fff; }
nav ul { list-style:none; margin:0; padding:0; display:flex; gap:18px; }
nav ul li { display:inline-block; }
nav ul a, nav ul .linklike {
  color:#cbd5e1; text-decoration:none; font-weight:500;
  padding:6px 10px; border-radius:6px; transition:background .2s, color .2s;
}
nav ul a:hover, nav ul .linklike:hover { background:#1e293b; color:#fff; }
nav .sep { width:1px; height:18px; background:#334155; margin:auto 6px; }

/* “Main nav” list helper (if you use it) */
.main-nav__links { display:flex; gap:14px; align-items:center; list-style:none; margin:0; padding:0; }
.main-nav__links .spacer { flex:1 1 auto; }
.main-nav__links .hello { color:#9fb0c0; }

.btn-ghost { color:#9fb0c0; text-decoration:none; padding:6px 10px; border:1px solid #273043; border-radius:8px; }
.btn-ghost:hover { color:#e6edf3; border-color:#7aa2ff; }
.link-muted { color:#9fb0c0; text-decoration:none; }
.link-muted:hover { color:#e6edf3; text-decoration:underline; }

/* =========================================================
   Alerts
   ========================================================= */
   .alert { padding:10px 12px; border-radius:8px; margin:12px 0; }
.alert.success { background:#0d3b27; color:#d8ffec; border:1px solid #195e43; }
.alert.error   { background:#3b0d0d; color:#ffd8d8; border:1px solid #5e1919; }
.alert.info    { background:#0d213b; color:#d8e7ff; border:1px solid #193a5e; }
.alert.warning { background:#3b2a0d; color:#ffefc7; border:1px solid #5e4a19; }

/* =========================================================
   CARDS / GRID
   ========================================================= */
.grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px;
}
.card {
  background:var(--card); padding:12px; border-radius:12px; border:1px solid var(--border);
  color:inherit; text-decoration:none; display:block;
}
.card img { width:100%; height:120px; object-fit:cover; border-radius:8px; }
@media (min-width:768px){ .card img{ height:140px; } }
h1,h2,h3 { margin:8px 0 12px; }

/* =========================================================
   FORMS / SEARCH
   ========================================================= */
.search-bar {
  display:grid; grid-template-columns:1fr 160px 160px auto; gap:8px;
  background:var(--card); padding:12px; border-radius:12px; border:1px solid var(--border);
}
.form label { display:block; margin-bottom:10px; }
.form input, .form textarea, .form select {
  width:100%; padding:8px; border-radius:8px; border:1px solid #334155; background:#0b1220; color:var(--text);
}
.form button {
  padding:10px 16px; border-radius:10px; border:0; background:var(--accent); color:#00132b; font-weight:700; cursor:pointer;
}
.error { color:#ff6b6b; }
.listing .logo { width:180px; height:180px; object-fit:cover; border-radius:12px; border:1px solid var(--border); }

/* Larger, easy-to-tap controls + iOS zoom fix */
.search-bar input[type="text"], .search-bar select, .search-bar button,
.form input, .form select, .form textarea, .form button {
  min-height: var(--tap); font-size:16px;
}

/* Search visuals */
.search-bar input[type="text"], .search-bar select {
  background:#0b1220; color:var(--text); border:1px solid #334155;
  border-radius:10px; padding:10px 12px;
}
.search-bar button {
  background:var(--accent); color:#00132b; font-weight:700;
  border:0; border-radius:10px; padding:0 16px; cursor:pointer;
}

/* Accessible focus */
.search-bar input[type="text"]:focus,
.search-bar select:focus,
.search-bar button:focus,
.form input:focus, .form select:focus, .form textarea:focus, .form button:focus {
  outline:2px solid rgba(30,167,253,.5); outline-offset:2px;
}

/* Stats blocks */
.stats { display:flex; gap:12px; flex-wrap:wrap; }
.stat  { background:var(--card); padding:16px; border-radius:12px; border:1px solid var(--border);
         display:flex; flex-direction:column; align-items:center; flex:1 1 160px; }

/* =========================================================
   TABLES (front & admin)
   ========================================================= */
.table-wrapper { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; }
th, td { padding:8px 10px; text-align:left; white-space:nowrap; }

/* =========================================================
   ADMIN AREA (only when <body class="admin">)
   ========================================================= */
body.admin .site-header { background:#0d1117; border-bottom:1px solid #222; }

.admin-wrap { max-width:1024px; margin:18px auto 40px; padding:0 16px; }
.admin-title { font-size:28px; margin:10px 0 18px; }

/* Top admin nav */
.admin-nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.admin-nav a {
  color:#f0f0f0; font-weight:600; text-decoration:none;
  padding:8px 10px; border-radius:6px; transition:background .2s, color .2s;
}
.admin-nav a:hover { background:#1a2230; color:#7aa2ff; }

/* Right-side auth block */
.auth-nav { margin-left:auto; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.auth-nav .welcome { color:#aeb6c3; font-size:14px; }
.auth-nav a {
  color:#ddd; text-decoration:none; padding:6px 10px; border:1px solid #333;
  border-radius:6px; background:#161b22; transition:all .2s;
}
.auth-nav a:hover { background:#222c3d; color:#fff; border-color:#7aa2ff; }

/* Dashboard cards */
.admin-grid { display:grid; gap:16px; grid-template-columns:repeat(12,1fr); }
@media (max-width:900px){ .admin-grid{ grid-template-columns:repeat(6,1fr); } }
@media (max-width:600px){ .admin-grid{ grid-template-columns:repeat(1,1fr); } }

.admin-card {
  grid-column:span 4; background:var(--card); border:1px solid var(--border);
  border-radius:12px; padding:16px; box-shadow:0 1px 0 rgba(0,0,0,.2);
}
.admin-card h2 { font-size:16px; margin:0 0 6px; color:var(--muted); font-weight:600; }
.admin-number { font-size:36px; font-weight:800; margin:6px 0 10px; }
.admin-link { color:#7aa2ff; text-decoration:none; font-weight:600; }
.admin-link:hover { color:#a9c1ff; text-decoration:underline; }

body.admin h1, body.admin h2, body.admin h3 { text-shadow:none; }

/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */

/* Mid screens */
@media (max-width: 768px) {
  /* Header stacks */
  .site-header .container,
  nav .nav-inner {
    flex-wrap:wrap;
  }
  nav ul { flex-wrap:wrap; gap:12px; }
  .brand-text { font-size:18px; }
  th, td { font-size:14px; padding:6px 8px; }
}

/* Phones */
@media (max-width: 576px) {
  /* Stack search controls */
  .search-bar { grid-template-columns:1fr; gap:10px; }
  .search-bar > * { width:100%; }

  /* Full-width form controls & buttons */
  button, .btn, input, select, textarea {
    width:100%; display:block; margin-bottom:10px;
  }

  /* Tighter header nav spacing */
  nav ul { width:100%; justify-content:space-between; }
  .brand-text { font-size:16px; }
}

/* Very small devices */
@media (max-width: 420px) {
  .grid { grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); }
}

/* =========================================================
   HEADER HAMBURGER (public + admin)
   ========================================================= */

/* Neutralize the generic <nav> bar styling INSIDE the header only */
.site-header nav {
  background: transparent;
  border: 0;
  padding: 0;
}

/* Desktop defaults */
.menu-toggle {
  display: none;
  margin-left: auto;
  background: transparent;
  border: 1px solid #273043;
  border-radius: 8px;
  padding: .4rem .6rem;
  font-size: 1.25rem;
  color: #fff;
  cursor: pointer;
}
.main-nav { display: flex; gap: 14px; }

/* Active state (matches your theme) */
.nav-link.is-active {
  color: #fff;
  background: rgba(25,118,210,.25);
  border-radius: 6px;
}

/* Mobile behavior */
@media (max-width: 900px) {
  /* Let header stack on small screens */
  .site-header .container { flex-wrap: wrap; gap: 10px; }

  /* Show the hamburger */
  .menu-toggle { display: inline-block; order: 2; }

  /* Collapse the nav by default; open vertically when toggled */
  .main-nav {
    order: 3;
    width: 100%;
    display: none;               /* hidden by default */
    flex-direction: column;      /* vertical list when open */
    gap: 8px;
    padding-top: 6px;
  }
  .main-nav.open { display: flex; }

  /* Keep auth buttons visible and stacked nicely */
  .auth-nav { order: 4; margin-left: 0; gap: 10px; flex-wrap: wrap; }

  /* Brand first */
  .brand { order: 1; }
}

/* =========================================================
   FOOTER STYLING
   ========================================================= */
.site-footer {
  background:#0b0f16;
  border-top:1px solid #1f2a44;
  color:#cbd5e1;
  padding:40px 16px 20px;
  margin-top:40px;
  font-size:15px;
}

.footer-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:30px;
  margin-bottom:30px;
}

.footer-col h4 {
  color:#fff;
  margin:0 0 12px;
  font-size:16px;
  font-weight:700;
}

.footer-col p {
  margin:0;
  line-height:1.5;
}

.footer-col ul {
  list-style:none;
  padding:0;
  margin:0;
}

.footer-col ul li {
  margin-bottom:8px;
}

.footer-col ul a {
  color:#cbd5e1;
  text-decoration:none;
  transition:color .2s;
}

.footer-col ul a:hover {
  color:#fff;
  text-decoration:underline;
}

.footer-bottom {
  border-top:1px solid #1f2a44;
  padding-top:12px;
  text-align:center;
  font-size:14px;
  color:#9aa4b2;
}
/* Back-to-top button */
.back-to-top{
  position:fixed; right:16px; bottom:16px;
  width:44px; height:44px; border-radius:999px;
  border:1px solid #273043; background:#0b0f16; color:#fff;
  font-size:20px; line-height:44px; text-align:center;
  cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:9999;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:#111827; }

/* Header nav inside header should not look like the global <nav> bar */
.site-header nav { background:transparent; border:0; padding:0; }

/* Make sure hamburger can be visible and clickable */
.menu-toggle{
  display:none;
  margin-left:auto;
  background:transparent;
  border:1px solid #273043;
  border-radius:8px;
  padding:.4rem .6rem;
  font-size:1.25rem;
  color:#fff;
  cursor:pointer;
}

/* Desktop nav row */
.main-nav{ display:flex; gap:14px; }

/* Mobile behavior (≤900px) */
@media (max-width:900px){
  .site-header .container{ flex-wrap:wrap; gap:10px; }
  .menu-toggle{ display:inline-block; order:2; }      /* show the ☰ */
  .main-nav{
    order:3;
    width:100%;
    display:none;                                     /* collapsed by default */
    flex-direction:column;
    gap:8px;
    padding-top:6px;
  }
  .main-nav.open{ display:flex; }                     /* opened by JS */
  .auth-nav{ order:4; margin-left:0; gap:10px; flex-wrap:wrap; }
  .brand{ order:1; }
}
.hero{
  min-height:60vh;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
@media (max-width:1024px){
  .hero{ background-attachment:scroll; }
}
/* Category grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 16px;
  margin: 16px 0 32px;
}
.cat-card {
  background: var(--card,#101828);
  border: 1px solid var(--border,#1f2937);
  border-radius: 10px;
  padding: 12px 12px 8px;
}
.cat-card__head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.cat-card h2 { font-size: 1.05rem; margin:0; }
.cat-card h2 a { color: var(--text,#e6e8ee); text-decoration:none; }
.badge {
  font-size:.85rem; background:#1ea7fd22; border:1px solid #1ea7fd55;
  padding:2px 8px; border-radius:999px;
}
.cat-card__subs { list-style:none; margin:0; padding:0; }
.cat-card__subs li {
  display:flex; justify-content:space-between;
  padding:6px 0; border-top:1px dashed var(--border,#1f2937);
}
.cat-card__subs li:first-child { border-top:0; }
.cat-card__subs a { text-decoration:none; color: var(--muted,#9aa4b2); }
.cat-card__subs a:hover { color: var(--text,#e6e8ee); }
.cat-card__foot { margin-top:8px; text-align:right; }
.view-all { font-size:.9rem; text-decoration:none; opacity:.9; }
.view-all:hover { opacity:1; }