/* Certificates page styles
:root{
  --bg:#0b1220; --panel:#0f1830; --ink:#e6ebf5; --muted:#9aa3b2;
  --brand:#60a5fa; --accent:#22d3ee; --border:rgba(255,255,255,0.08);
  --chip:rgba(255,255,255,0.06); --shadow:0 8px 30px rgba(0,0,0,0.35);
}
*{box-sizing:border-box}
html,body{height:100%} html{scroll-behavior:smooth}
body{margin:0; font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--ink);
  background: radial-gradient(1200px 800px at 10% 10%, rgba(34,211,238,0.08), transparent 60%),
              radial-gradient(800px 500px at 90% 20%, rgba(96,165,250,0.12), transparent 60%),
              var(--bg);
}
.container{width:min(1100px,92%); margin-inline:auto}
.muted{color:var(--muted)}
.btn{background:var(--brand); color:#0b1220; border:none; padding:.6rem 1rem; border-radius:.7rem; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; box-shadow:var(--shadow)}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--border); box-shadow:none}
.site-header{position:sticky; top:0; z-index:10; background:rgba(11,18,32,0.6); backdrop-filter:blur(10px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.6rem 0}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-weight:700}
.brand-mark{display:grid; place-items:center; width:36px; height:36px; border-radius:.8rem; background:linear-gradient(135deg,var(--brand),var(--accent)); color:#0b1220; font-weight:900}
.main-nav a{color:var(--muted); text-decoration:none; margin-left:1rem; font-weight:600}
.main-nav a:hover,.main-nav a.active{color:var(--ink)}

.certs{padding:1rem 0 2rem}
.layout{display:grid; gap:1rem; grid-template-columns: 1.5fr 1fr}
.viewer{border:1px solid var(--border); background:var(--panel); border-radius:1rem; padding:1rem; box-shadow:var(--shadow)}
.viewer-frame{aspect-ratio: 4/3; background:#0d1427; border-radius:.8rem; overflow:hidden; border:1px solid var(--border)}
.viewer-frame iframe{width:100%; height:100%; border:0; background:#0d1427}
.viewer-actions{display:flex; gap:.6rem; margin-top:.8rem}

.details{display:grid; gap:1rem}
.details-card{border:1px solid var(--border); background:#101a34; border-radius:1rem; padding:1rem; box-shadow:var(--shadow)}
.tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.4rem}
.tags span{background:var(--chip); border:1px solid var(--border); padding:.25rem .5rem; border-radius:.5rem; font-size:.85rem; color:var(--muted)}

.list-head{margin:.2rem 0}
.cert-list{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.cert-item{display:flex; align-items:start; gap:.7rem; padding:.6rem .7rem; border:1px solid var(--border); background:#0f1830; border-radius:.7rem; cursor:pointer}
.cert-item:hover{background:#101a34}
.cert-item .badge{background:var(--chip); border:1px solid var(--border); padding:.2rem .45rem; border-radius:.5rem; font-size:.75rem; color:var(--muted)}

.site-footer{border-top:1px solid var(--border); padding:1rem 0; background:rgba(11,18,32,0.5)}

@media (max-width: 980px){
  .layout{grid-template-columns: 1fr}
  .viewer-frame{aspect-ratio: 3/4}
} */



/* =========================================================
   Certificates Page (theme-aware: uses variables from styles.css)
   Make sure ../styles.css is loaded BEFORE this file.
   ========================================================= */

/* --- Basics --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 10% 10%, rgba(34,211,238,0.08), transparent 60%),
    radial-gradient(800px 500px at 90% 20%, rgba(96,165,250,0.12), transparent 60%),
    var(--bg);
}

.container { width: min(1100px, 92%); margin-inline: auto; }
.muted { color: var(--muted); }

/* --- Header / Nav --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in oklab, var(--bg) 60%, transparent); /* theme-aware glass */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: .8rem;
  background: linear-gradient(135deg, var(--brand), var(--accent));
  color: #0b1220;
  font-weight: 900;
}
.main-nav a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 1rem;
  font-weight: 600;
}
.main-nav a:hover,
.main-nav a.active { color: var(--ink); }

/* --- Page Layout --- */
.certs { padding: 1rem 0 2rem; }

.layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1.5fr 1fr;
}

/* --- Viewer --- */
.viewer {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--shadow);
}
.viewer-frame {
  aspect-ratio: 4 / 3;
  background: #0d1427;            /* neutral canvas behind PDFs */
  border: 1px solid var(--border);
  border-radius: .8rem;
  overflow: hidden;
}
.viewer-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  background: #0d1427;
}
.viewer-actions {
  display: flex;
  gap: .6rem;
  margin-top: .8rem;
}

/* --- Details Panel --- */
.details {
  display: grid;
  gap: 1rem;
}
.details-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .4rem;
}
.tags span {
  background: var(--chip);
  border: 1px solid var(--border);
  padding: .25rem .5rem;
  border-radius: .5rem;
  font-size: .85rem;
  color: var(--muted);
}

/* --- Certificates List --- */
.list-head { margin: .2rem 0; }

.cert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .6rem;
}

.cert-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .6rem .7rem;
  background: var(--panel);          /* theme-aware */
  border: 1px solid var(--border);
  border-radius: .7rem;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.cert-item:hover {
  background: var(--card);
  transform: translateY(-1px);
}
.cert-item .badge {
  background: var(--chip);
  border: 1px solid var(--border);
  padding: .2rem .45rem;
  border-radius: .5rem;
  font-size: .75rem;
  color: var(--muted);
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 1rem 0;
  background: color-mix(in oklab, var(--bg) 85%, #ffffff 15%); /* subtle, theme-aware */
}

/* --- Responsive --- */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .viewer-frame { aspect-ratio: 3 / 4; }
}