/* 
IT 3203 • styles.css
- Single shared stylesheet for all pages
- Dark, clean business theme + responsive layout
- Grid (cards), Flex (nav), hover/focus states, larger typography
- Mobile hamburger nav, color-coded quiz feedback
*/

/* ========== Theme variables ========== */
:root{
  --bg: #0b0f1a;
  --card: #121829;
  --border: #2b3656;
  --text: #e8ecf5;
  --muted: #b9c3da;
  --brand: #5aa9ff;
  --brand-600: #2f86ef;
  --ring: #8bd1ff;

  --radius: 14px;
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --maxw: 1100px;

  /* Global typography scale */
  --base-font-size: 18px;
  --heading-scale-1: 2.0rem;  /* h1 */
  --heading-scale-2: 1.6rem;  /* h2 */
  --heading-scale-3: 1.25rem; /* h3/h4 */
}

/* ========== Reset-ish ========== */
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }

/* ========== Base ========== */
html{ font-size: var(--base-font-size); }
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
h1,h2,h3{ line-height:1.25; margin:0 0 .5rem 0; }
h1{ font-size: var(--heading-scale-1); font-weight: 800; }
h2{ font-size: var(--heading-scale-2); font-weight: 700; }
h3, h4{ font-size: var(--heading-scale-3); font-weight: 700; }
p{ margin: 0 0 var(--space-2) 0; }
ul, ol{ padding-left: 1.2rem; }

a{
  color:#cfe3ff;
  text-decoration:none;
  transition: color .15s ease, text-shadow .15s ease, text-underline-offset .15s ease;
}
a:hover{
  color:#fff;
  text-shadow:0 0 8px rgba(140,197,255,.35);
}
a:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
  border-radius:6px;
}
a[href^="http"]:hover{ text-decoration: underline; }
.text-link{
  color:var(--brand);
  text-underline-offset:2px;
}
.text-link:hover{
  color:var(--brand-600);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ========== Layout helpers ========== */
.container{
  width: min(100% - 2rem, var(--maxw));
  margin-inline:auto;
  padding-inline: 1rem; /* default side padding */
}
@media (min-width: 640px){ .container{ padding-inline: 1.5rem; } }
@media (min-width:1024px){ .container{ padding-inline: 2rem; } }

/* ========== Header / Navbar ========== */
header{
  position: sticky; top:0; z-index:10;
  background: rgba(19,26,46,.6);
  backdrop-filter: blur(6px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:.75rem;
}
.brand{ font-size:1.125rem; font-weight:800; letter-spacing:.2px; }

/* Top nav links */
.nav a{
  color: var(--muted);
  padding:.5rem .75rem;
  border-radius:10px;
  transition: color .2s, background-color .2s, text-underline-offset .2s;
}
.nav a:hover{
  color: var(--text);
  background: rgba(90,169,255,.12);
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:focus-visible, button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: 12px;
}

/* ========== Mobile nav toggle ========== */
.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px; /* finger-friendly */
  border:1px solid var(--border);
  border-radius:10px;
  background: linear-gradient(180deg,#1e2742,#11182d);
  color: var(--text);
  cursor:pointer;
}

#primary-nav{
  display:none;              /* collapsed by default on small screens */
  flex-direction:column;
  gap:.25rem;
  margin-top:.5rem;
}
#primary-nav.open{ display:flex; }

/* On wider screens, show the menu inline and hide the toggle */
@media (min-width:768px){
  .nav-toggle{ display:none; }
  #primary-nav{
    display:flex !important;
    flex-direction:row;
    gap:.25rem;
    margin-top:0;
  }
}

/* ========== Hero / Sections ========== */
.hero{ padding-block: var(--space-4); }
section{ padding-block: .25rem .75rem; } /* gentle vertical rhythm */

/* ========== Cards ========== */
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.card > :first-child{ margin-top:0; }
.card > :last-child{ margin-bottom:0; }

/* ========== Buttons ========== */
button,
.btn,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display:inline-block;
  padding: 1rem 1.2rem;
  border:1px solid var(--border);
  border-radius:12px;
  background: linear-gradient(180deg,#1e2742,#11182d);
  color:#fff;
  font-weight:800;
  font-size:1.125rem;
  line-height:1.1;
  letter-spacing:.2px;
  cursor:pointer;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{
  border-color: var(--brand);
  background: linear-gradient(180deg,#2a3a62,#151d36);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 0 3px rgba(90,169,255,.15);
}

/* ========== Grid (cards layout) ========== */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.25rem;
  margin-block: var(--space-3);
}

/* ========== Tables ========== */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
}
table{
  width:100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  overflow:hidden;
  margin-block: var(--space-2);
}
th, td{
  padding:.85rem 1rem;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}
thead th{ background: rgba(90,169,255,.10); }

/* ========== Footer ========== */
footer{
  margin-top: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--border);
  color: var(--muted);
  background: rgba(18,24,41,.6);
}
.footer-grid{ display:grid; gap: var(--space-2); }
@media(min-width:720px){
  .footer-grid{ grid-template-columns: 1fr auto; align-items:center; }
}

/* ========== ID demo (TOC box) ========== */
#toc{
  border:1px dashed var(--border);
  padding: var(--space-2);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}

/* ========== Code blocks ========== */
pre.code{
  background:#0e1528;
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  overflow:auto;
  font-size:.95rem;
}

/* ========== Media ========== */
.media{ border-radius:12px; overflow:hidden; }
.media figcaption{ padding:.85rem 1.25rem; color:var(--muted); }

/* ========== Quiz styling (feedback & coloring) ========== */
.q-feedback{ margin-top:.5rem; font-weight:700; }
.q-feedback.correct{ color:#16a34a; }     /* green */
.q-feedback.incorrect{ color:#ff6b6b; }   /* red */

.quiz-form fieldset{
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  margin-bottom:1rem;
  background: var(--card);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.quiz-form fieldset.is-correct{
  border-color:#16a34a;
  box-shadow: 0 0 0 2px rgba(22,163,74,.25) inset;
  background: rgba(22,163,74,.06);
}
.quiz-form fieldset.is-incorrect{
  border-color:#ff6b6b;
  box-shadow: 0 0 0 2px rgba(255,107,107,.25) inset;
  background: rgba(255,107,107,.06);
}

/* Option labels so we can color the user selection & right answers */
label.choice{
  display:block;
  border:1px solid var(--border);
  border-radius:10px;
  padding:.5rem .75rem;
  margin:.375rem 0;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
label.choice.correct{
  border-color:#16a34a;
  background: rgba(22,163,74,.12);
}
label.choice.incorrect{
  border-color:#ff6b6b;
  background: rgba(255,107,107,.12);
}
/* When the user is wrong, also show the right answer */
label.choice.answer{
  border-style: dashed;
  border-color:#16a34a;
}

/* Quiz results block */
#overall{ font-size: 1.125rem; font-weight: 800; }
#score-badge{ font-size: 1rem; }

/* Actions row */
.quiz-actions{
  display:flex; gap:.75rem; flex-wrap:wrap;
  margin-top:1rem;
}

/* ========== Utilities ========== */
/* Visually hidden (for accessible, invisible labels) */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; scroll-behavior: auto !important; }
}


/* ====== Mobile-first base (already mostly mobile) ====== */
/* Ensure nav can collapse */
.nav { gap: .5rem; }
.nav-toggle { display: inline-block; font-size: 1.25rem; background: none; border: 1px solid var(--border); padding: .4rem .6rem; border-radius: 10px; }
#primary-nav { display: none; flex-direction: column; gap: .25rem; }
#primary-nav.open { display: flex; }
/* Make content breathe on small screens */
.container { padding-inline: 1rem; }
.hero img, .media img { width: 100%; height: auto; }

/* Tables: horizontal scroll on small screens */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; }
.table-wrapper > table { min-width: 640px; border: none; }

/* Forms (quiz): full-width controls & comfortable tap targets */
.quiz-form input[type="text"],
.quiz-form input[type="email"],
.quiz-form input[type="number"],
.quiz-form select,
.quiz-form textarea {
  width: 100%;
  max-width: 100%;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0e1528;
  color: var(--text);
}
label.choice { padding: .65rem .8rem; }           /* bigger tap area */
button, .btn { min-height: 44px; }                 /* mobile tap target */

/* Images: never overflow */
img { max-width: 100%; height: auto; display: block; }

/* ====== Breakpoint 1: tablets and up (>= 640px) ====== */
@media (min-width: 640px) {
  .container { padding-inline: 1.5rem; }
  .grid { gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ====== Breakpoint 2: desktops (>= 768px) ====== */
@media (min-width: 768px) {
  /* Desktop nav: show links inline, hide hamburger */
  .nav { align-items: center; }
  .nav-toggle { display: none; }
  #primary-nav { display: flex !important; flex-direction: row; gap: .25rem; margin-top: 0; }
}

/* Optional larger desktop spacing (>= 1024px) */
@media (min-width: 1024px) {
  .container { padding-inline: 2rem; }
}