/* ---- AWS SAA-C03 Exam Prep — custom styles ---- */

/* Brand accent tuned closer to AWS "Smile" orange */
:root {
  --md-primary-fg-color:        #ec7211;
  --md-primary-fg-color--light: #ff9900;
  --md-primary-fg-color--dark:  #d05c0d;
  --md-accent-fg-color:         #ff9900;
}

/* Home page "start here" cards */
.grid.cards > ul > li,
.grid.cards > :is(ul) > li {
  border-radius: 0.4rem;
}

/* Simple card grid used on the home page */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}
.home-cards a.card {
  display: block;
  padding: 1rem 1.1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  background: var(--md-default-bg-color);
}
.home-cards a.card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  transform: translateY(-2px);
}
.home-cards a.card h3 {
  margin: 0 0 .35rem 0;
  font-size: .95rem;
}
.home-cards a.card p {
  margin: 0;
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
}

/* Domain weight pills */
.domain-pill {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.domain-1 { background: #c0392b; }  /* Security */
.domain-2 { background: #2e7d32; }  /* Resilient */
.domain-3 { background: #1565c0; }  /* Performance */
.domain-4 { background: #6a1b9a; }  /* Cost */

/* ---- Quiz widget ---- */
.quiz {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.6rem;
  padding: 1rem 1.2rem;
  margin: 1.2rem 0;
}
.quiz .quiz-progress {
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.4rem;
}
.quiz .quiz-question {
  font-weight: 600;
  margin: 0.4rem 0 0.8rem 0;
}
.quiz .quiz-options { list-style: none; padding: 0; margin: 0; }
.quiz .quiz-options li { margin: 0.4rem 0; }
.quiz .quiz-options label {
  display: block;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.quiz .quiz-options label:hover {
  border-color: var(--md-accent-fg-color);
  background: var(--md-default-fg-color--lightest);
}
.quiz .quiz-options input { margin-right: 0.6rem; }
.quiz .quiz-controls {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.quiz button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--md-primary-fg-color);
  color: #fff;
  font-weight: 600;
}
.quiz button.secondary {
  background: transparent;
  color: var(--md-primary-fg-color);
  border: 1px solid var(--md-primary-fg-color);
}
.quiz button:disabled { opacity: 0.5; cursor: not-allowed; }

.quiz .opt-correct   { border-color: #2e7d32 !important; background: rgba(46,125,50,.12) !important; }
.quiz .opt-incorrect { border-color: #c0392b !important; background: rgba(192,57,43,.12) !important; }

.quiz .explanation {
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--md-accent-fg-color);
  background: var(--md-default-fg-color--lightest);
  border-radius: 0 0.3rem 0.3rem 0;
  font-size: 0.86rem;
}
.quiz .explanation .correct-line { color: #2e7d32; font-weight: 600; }

.quiz .quiz-results {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--md-default-fg-color--lightest);
}
.quiz .score-big {
  font-size: 2rem;
  font-weight: 800;
}
.quiz .domain-bar-row {
  display: grid;
  grid-template-columns: 160px 1fr 60px;
  align-items: center;
  gap: 0.5rem;
  margin: 0.3rem 0;
  font-size: 0.82rem;
}
.quiz .domain-bar-track {
  background: var(--md-default-fg-color--lightest);
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 1rem;
  height: 0.7rem;
  overflow: hidden;
}
.quiz .domain-bar-fill {
  height: 100%;
  background: var(--md-primary-fg-color);
}

/* ---- Gap tracker ---- */
.gap-summary {
  margin: 1.2rem 0;
}
.gap-progress-track {
  display: flex;
  height: 1.6rem;
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.gap-seg { height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .72rem; font-weight: 700; }
.gap-seg.known   { background: #2e7d32; }
.gap-seg.review  { background: #ef8c00; }
.gap-seg.new     { background: #7b8794; }

table.gap-table td .seg-btns { display: flex; gap: .3rem; flex-wrap: wrap; }
table.gap-table button.seg {
  font: inherit;
  font-size: .74rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: transparent;
  color: inherit;
  border-radius: .3rem;
  padding: .25rem .5rem;
  cursor: pointer;
}
button.seg.active.known  { background: #2e7d32; color: #fff; border-color: #2e7d32; }
button.seg.active.review { background: #ef8c00; color: #fff; border-color: #ef8c00; }
button.seg.active.new    { background: #7b8794; color: #fff; border-color: #7b8794; }