/* Wheels for Wellness - Driver Privacy Training
   The colours, fonts and card shape are copied from the main website
   (wheelsforwellness.ca) so this module looks like part of the same site.
   If the website's greens ever change, change them here too. */

:root {
  --green:       #7AB532;
  --green-dark:  #5A8A1F;
  --green-light: #E8F5D4;
  --charcoal:    #2D2D2D;
  --gray-100:    #F7F7F5;
  --gray-200:    #EBEBEB;
  --gray-400:    #6B6B6B;
  --white:       #FFFFFF;
  --red:         #B3261E;
  --shadow-md:   0 8px 30px rgba(0,0,0,0.08);
  --radius:      16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--charcoal);
  background: var(--gray-100);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
.pt-header { background: var(--white); border-bottom: 1px solid rgba(0,0,0,0.06); }
.pt-header-inner {
  max-width: 760px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 14px;
}
.pt-logo { height: 46px; width: auto; border-radius: 6px; }
.pt-org { font-weight: 700; font-size: 15px; line-height: 1.3; }
.pt-modname { font-size: 14px; color: var(--green-dark); font-weight: 600; line-height: 1.3; }

/* ---------- page body ---------- */
.pt-main { max-width: 760px; margin: 0 auto; padding: 26px 24px 50px; }

.pt-progress {
  font-size: 14px; color: var(--gray-400); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px;
}

.pt-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 34px 38px;
}

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px; line-height: 1.2; color: var(--charcoal);
  font-weight: 700; margin-bottom: 14px;
}

.pt-lead { color: var(--gray-400); margin-bottom: 18px; }

.pt-body p { margin-bottom: 14px; }
.pt-body p:last-child { margin-bottom: 0; }
ul.pt-body { padding-left: 22px; }
ul.pt-body li { margin-bottom: 12px; }
ul.pt-body li::marker { color: var(--green); }

a { color: var(--green-dark); }
a:hover, a:focus { text-decoration: underline; }

/* ---------- forms and buttons ---------- */
.pt-form { margin-top: 20px; }
.pt-form label {
  display: block; font-weight: 600; font-size: 15px; margin: 14px 0 5px;
}
.pt-form input[type="text"],
.pt-form input[type="password"] {
  width: 100%; max-width: 340px; display: block;
  font-family: inherit; font-size: 17px; padding: 10px 12px;
  border: 1px solid var(--gray-200); border-radius: 8px; background: var(--white);
  color: var(--charcoal);
}
.pt-form input:focus { outline: 2px solid var(--green); outline-offset: 1px; }

.pt-btn {
  display: inline-block; margin-top: 22px;
  font-family: inherit; font-size: 17px; font-weight: 600;
  background: var(--green); color: var(--white);
  border: none; border-radius: 10px; padding: 12px 28px; cursor: pointer;
  text-decoration: none;
}
.pt-btn:hover, .pt-btn:focus { background: var(--green-dark); color: var(--white); }

.pt-nav { margin-top: 24px; }

/* ---------- quiz ---------- */
.pt-question { font-size: 19px; font-weight: 600; margin-bottom: 6px; }

.pt-choice {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--gray-100); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 12px 14px; margin-top: 10px;
  cursor: pointer; font-weight: 400;
}
.pt-choice:hover { border-color: var(--green); }
.pt-choice input { margin-top: 6px; flex: 0 0 auto; }

.pt-feedback {
  background: var(--green-light); border-left: 4px solid var(--green-dark);
  border-radius: 8px; padding: 14px 16px; margin: 16px 0; font-size: 16px;
}

/* ---------- messages ---------- */
.pt-error {
  background: #FDECEA; border-left: 4px solid var(--red); color: var(--red);
  border-radius: 8px; padding: 12px 16px; margin: 16px 0; font-size: 16px;
}
.pt-note { font-size: 15px; color: var(--gray-400); margin-top: 18px; }
.pt-signout { margin-top: 18px; font-size: 15px; }
.pt-footer { text-align: center; color: var(--gray-400); font-size: 14px; padding: 0 24px 30px; }

/* ---------- finish page ---------- */
.pt-tick {
  display: inline-block; background: var(--green-light); color: var(--green-dark);
  font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 14px; margin-bottom: 12px;
}
.pt-oneline {
  background: var(--green-light); border-radius: 10px;
  padding: 16px 20px; margin-top: 20px; font-style: italic;
}

/* ---------- records table ---------- */
.pt-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 16px; }
.pt-table th {
  text-align: left; border-bottom: 2px solid var(--green); padding: 8px 10px; font-size: 15px;
}
.pt-table td { border-bottom: 1px solid var(--gray-200); padding: 8px 10px; }

/* ---------- small screens ---------- */
@media (max-width: 560px) {
  .pt-card { padding: 24px 20px; }
  h1 { font-size: 25px; }
  body { font-size: 16px; }
}

/* ---------- printing (the finish page is the one drivers print) ---------- */
@media print {
  body { background: var(--white); font-size: 12pt; }
  .pt-header { border-bottom: 1px solid #999; }
  .pt-main { padding: 12px 0; max-width: none; }
  .pt-card { box-shadow: none; border: 1px solid #999; border-radius: 0; padding: 18px 20px; }
  .pt-noprint, .pt-signout, .pt-footer, .pt-progress, .pt-btn { display: none !important; }
  a { color: var(--charcoal); text-decoration: none; }
}