/*
    MEMBERS AREA + ADMIN - additions to the theme (wp-content/themes/MMI/style.css).

    The game's own styles (Investigation Boards, Clue List, profiles, notebooks, account nav ...) are already in
    the theme and are used as they are. The live site wrapped some controls in <form> tags that the theme CSS
    targets (form.edit_board, form#addToBoard, form[name="edit_notebook"]); Web Forms can't nest forms, so those
    are <div>s here and the matching rules are repeated below for the <div> versions.
*/

/* ---- Pages: dark background like the game (the board/profile styles are designed for it) ---- */
.members-page .page-row.bg-black { background-image: url(../wp-content/themes/MMI/images/Fingerprint-50.png); background-position: center; background-repeat: no-repeat; }
.members-page .inner-content a:not(.button) { color: #fff; text-decoration: underline; }
.members-page .main-title { margin-bottom: 10px; }
.members-page .case-subtitle { color: #AE0C0C; font-family: 'Type-writer', Arial, serif; letter-spacing: 1px; margin: 0 0 25px; font-size: 18px; }
.members-message { background: #fff; color: #000; border: solid 2px #AE0C0C; padding: 10px 15px; margin: 0 0 25px; }
.members-message.success { border-color: #46b450; }
.members-locked { border: solid 1px #AE0C0C; padding: 20px; text-align: center; margin: 20px 0; }
.members-locked .fa { font-size: 30px; color: #AE0C0C; display: block; margin-bottom: 10px; }
.members-empty { font-style: italic; opacity: 0.75; }
.members-section-title { color: #AE0C0C; font-family: 'Type-writer', Arial, serif; letter-spacing: 1px; margin: 35px 0 15px; }
.members-page .button.red, .members-page input[type="submit"].button { cursor: pointer; }

/* ---- Account nav (theme: .account-nav.columns-5 - the live site's 5 red dropdowns) ---- */
.account-nav .account-nav-item .account-nav-item-heading { overflow: hidden; color: #fff; white-space: nowrap; }
.account-nav .account-nav-item .account-nav-item-heading a { color: #fff; text-decoration: none; width: 100%; box-sizing: border-box; }
.members-page .account-nav .account-nav-item ul li a { text-decoration: none; color: #202020; }
.members-page .account-nav .account-nav-item ul li a:hover { color: #AE0C0C; }
.account-nav .account-nav-item ul li a.switch_mystery.Grey { color: #888; }      /* "My Plots": the case being played */
.account-nav-wrapper { margin-bottom: 25px; }

/* ---- Page headers inside the dark panel (theme: .content_wrapper), e.g. "Chapter 1 Evidence - If you haven't ..." ---- */
.content_wrapper .content_header h2 { margin-bottom: 15px; }
.content_wrapper .content_header h2 span { font-size: 13px; font-weight: normal; margin-left: 4px; }
.content_wrapper .content_header h3 { font-size: 15px; margin-bottom: 15px; }
.content_wrapper .content.style1:empty { display: none; }
.content_wrapper .content.style1 { margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
.members-page .boards-page-title { margin: 0 0 5px; }

/* ---- Choosing a case (My Investigation, no case chosen yet) ---- */
.case-cards .case-card { text-align: center; border: solid 1px #AE0C0C; padding: 20px; box-sizing: border-box; }
.case-cards .case-card img { display: block; margin: 0 auto 15px; max-height: 260px; width: auto; }
.case-cards .case-card h2 { font-size: 20px; margin-bottom: 8px; }
.case-cards .case-card .case-status { display: block; margin-bottom: 15px; font-size: 14px; }

/* ---- Investigation Boards: <div> versions of the theme's form rules ---- */
.investigation-boards .investigation-board div.edit_board { display: none; }
.investigation-boards .investigation-board div.edit_board input[type="text"] { color: #202020; margin: 12px 0; }
.investigation-boards .investigation-board .board-title { color: #202020; }
/* "Add/Edit Board Name" on the right of the board's title, dark on the white board (as on the live site) */
.members-page .investigation-boards .board-title a.edit_board_title { float: right; color: #202020 !important; text-decoration: none !important; font-size: 13px; font-weight: bold; margin-top: 6px; }
.members-page .investigation-boards .add_board_slide .add-board-wrapper { text-align: center; padding-top: 40%; }
.investigation-boards .investigation-board .board-clue { background: #fff; padding: 5px; box-sizing: border-box; font-size: 13px; }
.investigation-boards .investigation-board .board-clue img { display: block; width: 100%; height: auto; margin-bottom: 5px; }
.investigation-boards .investigation-board .board-clue .remove_clue,
.investigation-boards .investigation-board .board-clue .print-clue { border: 0; cursor: pointer; line-height: 1; }
.investigation-boards .investigation-board .remove_investigation_board { background: none; border: 0; cursor: pointer; }
.investigation-boards .add_board_slide { position: relative; width: 300px; }
.investigation-boards .add_board_slide .add-board-wrapper .fa { font-size: 50px; display: block; padding-bottom: 15px; }
.investigation-boards .add_board_slide .add-board-wrapper input[type="text"] { color: #202020; width: 80%; margin: 10px auto; display: block; padding: 8px; }
.investigation-slick-arrows .fa { font-size: 50px; color: #fff; }

/* ---- Chapter Evidence / profile cards: <div> version of the theme's form#addToBoard ---- */
.clues-list .clue { margin-bottom: 20px; }
.clues-list .clue .clue-title { min-height: 1.4em; }
.clues-list .clue .addToBoard { margin-top: 10px; }
.clues-list .clue .addToBoard select { width: 100%; border: 0; padding: 5px; color: #000; }
.clues-list .clue .addToBoard input[type="submit"] { width: 100%; color: #fff; text-align: center; padding: 5px; background: #AE0C0C; border: 0; cursor: pointer; margin-top: 5px; }
.clues-list .clue img { display: block; width: 100%; height: auto; margin: 0 auto; cursor: zoom-in; }
.clues-list .clue img.magnific-popup-video { cursor: pointer; }
.clues-list .clue .clue-description { margin-top: 8px; font-size: 13px; }
/* A video with no thumbnail, or a profile with no photo */
.clues-list .clue .clue-video-button,
.clues-list .clue .profile-no-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; background: #111; color: #fff !important; text-decoration: none !important; }
.clues-list .clue .clue-video-button .fa { font-size: 50px; color: #AE0C0C; margin-bottom: 8px; }
.clues-list .clue .profile-no-photo .fa { font-size: 70px; color: #888; }
.clues-list .clue .victim-suspect-profile-link { display: block; margin-top: 10px; text-decoration: none !important; color: #fff !important; }

/* ---- Victim / Suspect Sheet (Profile.aspx) - the theme's .suspect-profile is a white "form" ---- */
.members-page .suspect-profile a { color: #000; }
.suspect-profile .profile-row-image img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.suspect-profile .victim-photo { margin-bottom: 20px; }
.content_wrapper > div > a.topNav { display: inline-block; margin-bottom: 15px; color: #fff; }
.profile-extra { margin-top: 20px; }

/* ---- Chapter Summaries cards ---- */
.chapter-summary-list .chapter-summary-item { margin-bottom: 20px; }
.chapter-summary-list .chapter-summary-item img { display: block; width: 100%; height: auto; cursor: pointer; }
.chapter-summary-list .chapter-summary-item a { text-decoration: none !important; }
/* A card with no image: a plain "SPOILERS" card like the live site's */
.chapter-summary-list .spoiler-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 140px; background: #fff; color: #000 !important; font-family: 'Type-writer', 'Courier Prime', monospace; text-align: center; padding: 10px; box-sizing: border-box; }
.chapter-summary-list .spoiler-card strong { font-size: 20px; letter-spacing: 2px; margin-bottom: 6px; }
.chapter-summary-list a.magnific-popup-video.spoiler-card { background: #111; color: #fff !important; }
.chapter-summary-list a.magnific-popup-video.spoiler-card .fa { font-size: 50px; color: #AE0C0C; margin-bottom: 8px; }
/* Help typed as HTML on the admin page: hidden until its card is clicked (theme JS: .toggleAnything) */
.content_wrapper .spoiler { display: none; background: #fff; color: #000; padding: 15px; margin-top: 15px; }
.members-page .content_wrapper .spoiler a { color: #AE0C0C; }

/* ---- Inspector's Full Summation: hidden until "Show me the summation" ---- */
.spoiler-summation { display: none; background: #fff; color: #000; padding: 20px; margin: 20px 0; }
.members-page .spoiler-summation a { color: #AE0C0C; }

/* ---- Notebooks: <div> version of form[name="edit_notebook"] ---- */
.notebooks-wrapper .notebooks .notebook .edit_notebook textarea { width: 100%; max-width: 100%; height: 565px; box-sizing: border-box; color: #000 !important; background: transparent; border: 0; font-family: 'Courier Prime', monospace; font-size: 16px; line-height: 1.6; }
.notebooks-wrapper .notebooks .notebook .board-title { color: #202020; }
.notebooks-wrapper .notebooks .notebook div.edit_notebook_title_form { display: none; }
.notebooks-wrapper .notebooks .notebook .notebook-saved { color: #202020; font-size: 12px; }
@media only screen and (max-width: 840px) { .notebooks-wrapper .notebooks .notebook .edit_notebook textarea { height: 410px; } }
@media only screen and (max-width: 600px) { .notebooks-wrapper .notebooks .notebook .edit_notebook textarea { height: 280px; } }

/* ---- Conclusion ---- */
.conclusion-question { border: solid 1px #AE0C0C; padding: 15px; margin-bottom: 20px; }
.conclusion-question .question-text { font-weight: bold; margin-bottom: 10px; display: block; }
.conclusion-question label { width: auto; display: inline; margin-left: 6px; }
.conclusion-question .answer { margin: 6px 0; }
.conclusion-question .result-mark { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; }
.conclusion-score { font-size: 28px; font-family: 'Type-writer', Arial, serif; color: #AE0C0C; }
.certificate-badge { display: inline-block; padding: 6px 14px; color: #000; font-weight: bold; margin: 10px 0; }
.certificate-badge.Gold { background: #d4af37; }
.certificate-badge.Silver { background: #c0c0c0; }
.certificate-badge.Bronze { background: #cd7f32; }

/* ---- Profile / forms in the members area ---- */
.members-form .form-row { margin-bottom: 15px; }
.members-form label { display: block; width: auto; margin-bottom: 5px; }
.members-form input[type="text"], .members-form input[type="email"], .members-form input[type="password"], .members-form select { width: 100%; max-width: 400px; padding: 8px; box-sizing: border-box; color: #000; }
.members-form .hint { display: block; font-size: 12px; opacity: 0.8; margin-top: 3px; }
.members-form .form-error { display: block; color: #ff6b6b; font-style: italic; margin-top: 3px; }
/* My Profile: labels beside the boxes, as on the live site (stacked on phones) */
.my-profile-form .form-row label { display: inline-block; width: 140px; vertical-align: middle; }
.my-profile-form .form-row input[type="text"], .my-profile-form .form-row input[type="email"], .my-profile-form .form-row input[type="password"], .my-profile-form .form-row select { max-width: 260px; }
.my-profile-form .form-row input[type="text"], .my-profile-form .form-row input[type="email"], .my-profile-form .form-row input[type="password"] { color: #fff; }
.my-profile-form .form-row .hint, .my-profile-form .form-row .form-error { margin-left: 144px; }
@media only screen and (max-width: 600px) {
    .my-profile-form .form-row label { display: block; width: auto; }
    .my-profile-form .form-row .hint, .my-profile-form .form-row .form-error { margin-left: 0; }
}

/* ---- Choose Your Investigation (Payment.aspx) ---- */
.mystery-pay-box { margin-bottom: 20px; }
.mystery-pay-box .mystery-pay-box-title small { display: block; font-size: 16px; margin-top: 5px; }
.mystery-pay-box .mystery-pay-box-title small s { opacity: 0.6; }
.mystery-pay-box .pay-by-card { cursor: pointer; margin-top: 10px; }
.discount_code_wrap #pressCodeForm input[type="text"] { padding: 6px; margin-right: 6px; }
.secure-payment-note { font-size: 14px; color: #555; }
.page-template-template-pay .members-message { margin-top: 15px; }

/* ---- Whodunnit Christmas Card: "Number of packs" + "Buy now" (instead of the live page's PayPal button) ---- */
.card-order-form { margin: 15px 0; }
.card-order-form label { display: block; width: auto; font-weight: bold; margin-bottom: 5px; }
.card-order-form select { padding: 8px; margin: 0 10px 10px 0; max-width: 100%; }
.card-order-form .button { cursor: pointer; }

/* ---- Admin pages ---- */
.admin-page .inner-content { max-width: 1100px; }
.admin-nav { margin: 0 0 25px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.admin-nav li a { display: inline-block; background: #AE0C0C; color: #fff !important; padding: 6px 12px; text-decoration: none !important; font-size: 14px; }
.admin-nav li a.current { background: #000; }
.admin-table { width: 100%; border-collapse: collapse; margin-bottom: 25px; font-size: 14px; background: #fff; color: #000; }
.admin-table th, .admin-table td { border: solid 1px #ccc; padding: 6px 8px; text-align: left; vertical-align: top; }
.admin-table th { background: #eee; }
.admin-table td.actions { white-space: nowrap; }
.admin-form { background: #fff; color: #000; padding: 15px; border: solid 1px #ccc; margin-bottom: 25px; }
.admin-form .form-row { margin-bottom: 12px; }
.admin-form label { display: block; width: auto; font-weight: bold; margin-bottom: 4px; }
.admin-form .hint { font-size: 12px; color: #555; display: block; margin-top: 3px; }
.admin-form input[type="text"], .admin-form input[type="number"], .admin-form select, .admin-form textarea { width: 100%; padding: 6px; box-sizing: border-box; font-family: inherit; }
.admin-form textarea { min-height: 140px; font-family: Consolas, monospace; font-size: 13px; }
.admin-form input[type="checkbox"] { width: auto; }
.admin-form .inline label { display: inline; font-weight: normal; }
.admin-form .answer-row { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.admin-form .answer-row input[type="text"] { flex: 1; }
.admin-page .button.small, .admin-table .button { padding: 4px 10px; font-size: 13px; }
.admin-message { padding: 8px 12px; margin-bottom: 15px; background: #fff; color: #000; border-left: solid 4px #46b450; }
.admin-message.error { border-left-color: #dc3232; }
.admin-thumb { max-width: 80px; max-height: 60px; }
.admin-form .admin-checklist { display: block; max-height: 220px; overflow-y: auto; border: solid 1px #ccc; padding: 6px; }
.admin-form .admin-checklist input { width: auto; margin-right: 6px; }
.admin-form .admin-checklist label { display: inline; font-weight: normal; }
.admin-form .admin-checklist br + input, .admin-form .admin-checklist input:first-child { margin-top: 4px; }