/* IFB105 — Database Management · study site theme */
:root{
  --navy:#002E6D;
  --navy-dark:#00214d;
  --accent:#1F6FB2;
  --accent-dark:#185a93;
  --bg:#eef2f7;
  --surface:#ffffff;
  --ink:#1c2632;
  --muted:#5b6573;
  --line:#dde3ec;
  --code-bg:#eaeef3;
  --code-ink:#13314f;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Calibri,"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  line-height:1.62;
}
img{max-width:100%;}

/* ---------- sticky top nav ---------- */
.topnav{
  position:sticky;top:0;z-index:50;
  background:var(--navy);
  color:#fff;
  box-shadow:0 2px 10px rgba(0,16,48,.18);
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 20px;
}
.brand{display:flex;align-items:baseline;gap:9px;color:#fff;text-decoration:none;margin-right:auto;}
.brand-code{
  font-family:"Cascadia Code",Consolas,monospace;font-weight:700;letter-spacing:.5px;
  background:rgba(255,255,255,.14);padding:3px 9px;border-radius:6px;
}
.brand-sub{font-weight:600;font-size:.95rem;color:#c8d6ea;}
.nav-links{display:flex;gap:4px;flex-wrap:wrap;}
.nav-links a{
  color:#d7e2f1;text-decoration:none;font-weight:600;font-size:.92rem;
  padding:6px 11px;border-radius:6px;white-space:nowrap;
}
.nav-links a:hover{background:rgba(255,255,255,.13);color:#fff;}
.nav-links a[aria-current="page"]{background:var(--accent);color:#fff;}
.nav-toggle{
  display:none;background:transparent;border:1px solid rgba(255,255,255,.45);
  color:#fff;font-size:1.25rem;line-height:1;border-radius:6px;padding:4px 12px;cursor:pointer;
}
@media (max-width:820px){
  .nav-toggle{display:block;}
  .brand-sub{display:none;}
  .nav-links{display:none;flex-direction:column;width:100%;order:3;gap:2px;padding-top:6px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:9px 11px;}
}

/* ---------- layout ---------- */
.container{max-width:880px;margin:0 auto;padding:28px 20px 72px;}
.content{
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:30px 40px;box-shadow:0 1px 3px rgba(16,38,76,.06);
}
@media (max-width:600px){.content{padding:20px 18px;border-radius:10px;}}

/* ---------- headings: top-level = navy banner, sub = accent + underline ---------- */
.content h1{
  background:var(--navy);color:#fff;font-size:1.6rem;line-height:1.25;font-weight:700;
  margin:0 0 1.2rem;padding:14px 18px;border-radius:8px;
}
.content h2{
  background:var(--navy);color:#fff;font-size:1.2rem;font-weight:700;
  margin:2.3rem 0 1rem;padding:9px 16px;border-radius:6px;scroll-margin-top:72px;
}
.content h3{
  color:var(--accent);font-size:1.06rem;font-weight:700;
  margin:1.7rem 0 .6rem;padding-bottom:5px;border-bottom:2px solid var(--accent);scroll-margin-top:72px;
}
.content h4{color:var(--accent);font-size:.98rem;font-weight:700;margin:1.25rem 0 .4rem;}

.content p{margin:.6rem 0;}
.content ul,.content ol{margin:.5rem 0 .95rem;padding-left:1.45rem;}
.content li{margin:.28rem 0;}
.content li::marker{color:var(--accent);}
.content a{color:var(--accent);}
.content strong{color:var(--navy);}
.content em{color:#37414f;}
.content hr{border:none;border-top:1px solid var(--line);margin:1.9rem 0;}
.content blockquote{
  margin:1rem 0;padding:.45rem 1rem;border-left:4px solid var(--accent);
  background:#eef3f9;color:var(--muted);border-radius:0 6px 6px 0;
}

/* ---------- code ---------- */
code,kbd{font-family:"Cascadia Code",Consolas,"SF Mono",Menlo,monospace;font-size:.9em;}
:not(pre)>code{background:var(--code-bg);padding:.12em .42em;border-radius:4px;color:var(--code-ink);}
pre{
  background:var(--code-bg);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;overflow:auto;margin:1rem 0;line-height:1.5;
}
pre code{background:none;padding:0;color:var(--code-ink);}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:1rem 0;-webkit-overflow-scrolling:touch;}
.content table{border-collapse:collapse;width:100%;font-size:.94rem;}
.content th{background:var(--navy);color:#fff;text-align:left;font-weight:600;}
.content th,.content td{border:1px solid var(--line);padding:8px 11px;vertical-align:top;}
.content tbody tr:nth-child(even){background:#f6f9fc;}

/* ---------- show/hide toggle (solutions, answer key) ---------- */
.toggle-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:2rem 0 .3rem;}
.btn-toggle{
  background:var(--accent);color:#fff;border:none;font:inherit;font-weight:600;font-size:1rem;
  padding:11px 22px;border-radius:8px;cursor:pointer;box-shadow:0 1px 2px rgba(16,38,76,.18);
}
.btn-toggle:hover{background:var(--accent-dark);}
.btn-toggle:focus-visible{outline:3px solid #9cc3e6;outline-offset:2px;}
.toggle-note{color:var(--muted);font-size:.9rem;}
.solutions{margin-top:1.2rem;padding-top:.4rem;border-top:3px solid var(--accent);}
.solutions[hidden]{display:none;}

/* ---------- landing page ---------- */
.hero{margin:6px 0 26px;}
.hero-title{color:var(--navy);font-size:2.05rem;line-height:1.18;font-weight:700;margin:0 0 .55rem;}
.hero-lead{color:var(--muted);font-size:1.06rem;max-width:64ch;margin:0;}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}
.card{
  display:flex;flex-direction:column;gap:7px;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:18px 20px 16px;text-decoration:none;color:inherit;
  box-shadow:0 1px 3px rgba(16,38,76,.06);
  transition:transform .13s ease,box-shadow .13s ease,border-left-color .13s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:0 9px 22px rgba(16,38,76,.14);border-left-color:var(--navy);}
.card-icon{color:var(--accent);height:26px;}
.card:hover .card-icon{color:var(--navy);}
.card-title{color:var(--navy);font-weight:700;font-size:1.12rem;}
.card-desc{color:var(--muted);font-size:.92rem;flex:1;}
.card-go{color:var(--accent);font-weight:600;font-size:.85rem;margin-top:4px;}
.card:hover .card-go{color:var(--navy);}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:.85rem;}
.site-footer .nav-inner{padding:16px 20px;max-width:880px;}
.site-footer a{color:var(--accent);}