/* ADAM Questionnaire plugin print and screen styles (copied/adapted) */
.centered-page-template{background: url('../images/1920x1080.jpg') #ff9100; background-size: cover; background-position: center;}
.main { font-family: 'Roboto', sans-serif; margin: 10px; padding: 20px; }
.container { max-width: 800px; margin: 40px auto; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 24px rgb(0 0 0 / 45%); padding: 32px 24px; color: #012169; font-size: 15px; font-family: 'Roboto', sans-serif; font-weight: 400; }
.form-h h1 { font-family: 'Roboto', sans-serif; margin-bottom: 8px; font-size: 30px; color: #012169; text-align: center; }
.intro h2 { font-family: 'Roboto', sans-serif; font-size: 18px; color: #012169; }
.form { margin-top: 32px; }
#questions{ border: solid #012169 1px; border-radius: 15px; }
.question { font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: space-between; padding:20px 100px; border-bottom: 1px solid #eee; }
.question-label { font-family: 'Roboto', sans-serif; flex: 1; font-size: 1rem; color: #012169; }
.switch { position: relative; display: inline-block; width: 76px; height: 40px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 32px; }
.slider:after { content: attr(data-off); position: absolute; left: 9px; top: 12px; color: #555; font-size: 0.95rem; transition: .4s; }
/* Prevent the YES/NO label from wrapping vertically on small screens */
.slider:after { content: attr(data-off); position: absolute; left: 8px; top: 12px; color: #555; font-size: 0.95rem; transition: .4s; white-space: nowrap; line-height: 1; display: inline-block; pointer-events: none; }
/* When checked, pin the label from the right instead of using a fixed left value so it won't wrap inside narrow switches */
input:checked + .slider:after { content: attr(data-on); left: auto; right: 6px; color: #000000; }
.slider:before { position: absolute; content: ""; height: 38px; width: 38px; left: 1px; bottom: 1px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #418fde; }
input:checked + .slider:before { transform: translateX(36px); box-shadow: 0px 0px 5px rgba(14, 31, 77, 0.6); }
.switch-label { display: none; }
#submit-btn { display: block; width: 100%; padding: 12px; background: #418fde; color: #fff; border: none; border-radius: 10px; font-size: 15px; cursor: pointer; margin-top: 24px; transition: background 0.2s; }
#submit-btn:hover { background: #113658; }
#report { display: none; margin-top: 32px; border-radius: 8px; padding: 24px; box-shadow: 0 2px 8px rgba(39,174,96,0.08); }
#download-btn { margin-top: 16px; padding: 10px 24px; background: #418fde; color: #fff; border: none; border-radius: 10px; font-size: 15px; cursor: pointer; }
#download-btn:hover { background: #2191f3; }
.extra-steps { margin-top: 24px; padding: 16px; background: #f9f9f9; border-radius: 6px; color: #444; }
.startBtn { display: block; width: 100%; padding: 12px; background: #418fde; color: #fff; border: none; border-radius: 10px; font-size: 15px; cursor: pointer; margin-top: 24px; transition: background 0.2s; }
.logo { text-align: center;margin-bottom: 20px; padding: 20px; display: flex; flex-direction: row; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; }

/* The print-note under the logo should be hidden on screen and only visible when printing */
.print-note { display: none; margin: 0; padding: 0; font-size: 12px; color: #000; }

/* Print rules when printing from the page (fallback) */
@media print {
  /* Use print-safe serif fonts and ensure high-contrast black text for reliable printing */
  body { font-size: 12px; font-family: Georgia, 'Times New Roman', Times, serif !important; color: #000 !important; }
  /* add a little top padding so content isn't flush with the top of the printed page */
  .container { font-family: Georgia, 'Times New Roman', Times, serif !important; color: #000 !important; background: #fff !important; box-shadow: none !important; padding-top: 20px !important; }
  /* Keep the logo but make it smaller for print */
  .logo img { height: 40px !important; }
  /* Show the print note under the logo in print */
  .print-note { display: block !important; margin-top: 8px !important; font-size: 11px !important; line-height: 1.25 !important; color: #000 !important; font-family: Georgia, 'Times New Roman', Times, serif !important; }
  /* Hide site chrome for printing */
  header, footer, .header, .footer { display: none !important; }
}

/* Responsive mobile adjustments */
@media (max-width: 600px) {
  .centered-page-template{background: url('../images/425x785.jpg') #ff9100; background-size: cover; background-position: center;}
  /* Mobile: reduce padding, remove shadows/radius for clean print and small screens */
  .main{padding:0px; margin:0px}
  .container { margin: 12px; padding: 50px 10px; max-width: calc(100% - 24px); border-radius: 8px !important; box-shadow: none !important; }
  .form-h h1 { line-height: 30px; margin-bottom:20px; }
  .intro h2 {line-height: 20px;margin-bottom:20px }
  .question { flex-direction: column; align-items: flex-start; padding: 12px; width: 100%; box-sizing: border-box; }
  table { font-size: 12px; }
  .container, .report-print-container { overflow-wrap: anywhere; }
  .question-label { margin-bottom: 8px; }
  .switch { width: 60px; height: 34px; }
  .slider:after { top: 11px; font-size: 0.7rem; }
  /* Ensure the label uses right positioning on narrow screens to prevent wrapping */
  input + .slider:after { left: 8px; right: auto; }
  input:checked + .slider:after { left: 43px; right: 0px; }
  .slider:before { height: 32px; width: 32px; }
  #submit-btn, .startBtn, #download-btn { font-size: 14px; padding: 10px; }
}