/*
Theme Name: Fictioneer Child
Template: fictioneer
Author: Tetrakern
Author URI: https://github.com/Tetrakern
Donate link: https://ko-fi.com/tetrakern
Contributors: tetrakern
License: GNU General Public License v3.0 or later
License URI: http://www.gnu.org/licenses/gpl.html
Requires at least: 5.5
Tested up to: 6.5.0
Requires PHP: 7.4
Version: 1.0.3
Description: A blank child theme for Fictioneer.
*/

/* ============================================
   TITLE MATCH BADGE
   ============================================ */
.title-match-badge {
    background: #0073aa;
    color: white;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: normal;
    margin-left: 8px;
    display: inline-block;
}

/* ============================================
   CUSTOM NOVEL SEARCH FORM
   ============================================ */
.custom-novel-search {
    margin: 20px 0;
}

.custom-novel-search .search-form__bar {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    background: white;
}

.custom-novel-search .search-form__string {
    flex: 1;
    border: none;
    padding: 10px 15px;
    outline: none;
}

.custom-novel-search .search-form__bar-actions {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #f8f8f8;
}

.custom-novel-search .search-form__submit {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: #0073aa;
}
/* ============================================================
   SYSTEM WINDOW CSS — re-scoped for Fictioneer (from AO3 workskin)
   Original selectors used #workskin .userstuff > X (AO3-specific).
   Rescoped to .chapter-formatting > X to match Fictioneer's chapter wrapper.
   If your theme's wrapper class differs, find-and-replace
   ".chapter-formatting" below with the correct class.
   ============================================================ */

/* The main window. Change the width of your windows by altering the "max-width" value below. */
.chapter-formatting > .windorv {
	margin: 3em auto;
	max-width: 600px;
}

/* Glowing around the edges. */
.chapter-formatting > .blue {
	box-shadow: 0 0 20px 10px #4fffff4f, 0 0 0px 10px #4fffff4a inset;
}
.chapter-formatting > .yellow {
  box-shadow: 0 0 20px 10px #ffff004f, 0 0 0px 10px #ffff0046 inset;
  transform: scaleY(-1);
}

/* Angular borders: blue, yellow, and white. */
.chapter-formatting .blue {
  background: -moz-linear-gradient(45deg, transparent 10px, #0091dd 10px), -moz-linear-gradient(135deg, transparent 20px, #0091dd 20px), -moz-linear-gradient(225deg, transparent 10px, #0091dd 10px), -moz-linear-gradient(315deg, transparent 20px, #0091dd 20px);
}
.chapter-formatting .blue {
  background: -o-linear-gradient(45deg, transparent 10px, #0091dd 10px), -o-linear-gradient(315deg, transparent 20px, #0091dd 20px), -o-linear-gradient(225deg, transparent 10px, #0091dd 10px), -o-linear-gradient(135deg, transparent 20px, #0091dd 20px);
}
.chapter-formatting .blue {
  background: -webkit-linear-gradient(45deg, transparent 10px, #0091dd 10px), -webkit-linear-gradient(315deg, transparent 20px, #0091dd 20px), -webkit-linear-gradient(225deg, transparent 10px, #0091dd 10px), -webkit-linear-gradient(135deg, transparent 20px, #0091dd 20px);
}
.chapter-formatting .blue {
  background: linear-gradient(45deg, transparent 10px, #0091dd 10px), linear-gradient(315deg, transparent 20px, #0091dd 20px), linear-gradient(225deg, transparent 10px, #0091dd 10px), linear-gradient(135deg, transparent 20px, #0091dd 20px);
}

.chapter-formatting .yellow {
  background: -moz-linear-gradient(45deg, transparent 10px, #f1a900 10px), -moz-linear-gradient(135deg, transparent 20px, #f1a900 20px), -moz-linear-gradient(225deg, transparent 10px, #f1a900 10px), -moz-linear-gradient(315deg, transparent 20px, #f1a900 20px);
}
.chapter-formatting .yellow {
  background: -o-linear-gradient(45deg, transparent 10px, #f1a900 10px), -o-linear-gradient(315deg, transparent 20px, #f1a900 20px), -o-linear-gradient(225deg, transparent 10px, #f1a900 10px), -o-linear-gradient(135deg, transparent 20px, #f1a900 20px);
}
.chapter-formatting .yellow {
  background: -webkit-linear-gradient(45deg, transparent 10px, #f1a900 10px), -webkit-linear-gradient(315deg, transparent 20px, #f1a900 20px), -webkit-linear-gradient(225deg, transparent 10px, #f1a900 10px), -webkit-linear-gradient(135deg, transparent 20px, #f1a900 20px);
}
.chapter-formatting .yellow {
  background: linear-gradient(45deg, transparent 10px, #f1a900 10px), linear-gradient(315deg, transparent 20px, #f1a900 20px), linear-gradient(225deg, transparent 10px, #f1a900 10px), linear-gradient(135deg, transparent 20px, #f1a900 20px);
}

.chapter-formatting .white {
  background: -moz-linear-gradient(45deg, transparent 10px, #f0fefe 10px), -moz-linear-gradient(135deg, transparent 20px, #f0fefe 20px), -moz-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -moz-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
.chapter-formatting .white {
  background: -o-linear-gradient(45deg, transparent 10px, #f0fefe 10px), -o-linear-gradient(315deg, transparent 20px, #f0fefe 20px), -o-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -o-linear-gradient(135deg, transparent 20px, #f0fefe 20px);
}
.chapter-formatting .white {
  background: -webkit-linear-gradient(45deg, transparent 10px, #f0fefe 10px), -webkit-linear-gradient(315deg, transparent 20px, #f0fefe 20px), -webkit-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -webkit-linear-gradient(135deg, transparent 20px, #f0fefe 20px);
}
.chapter-formatting .white {
  background: linear-gradient(45deg, transparent 10px, #f0fefe 10px), linear-gradient(315deg, transparent 20px, #f0fefe 20px), linear-gradient(225deg, transparent 10px, #f0fefe 10px), linear-gradient(135deg, transparent 20px, #f0fefe 20px);
}

/* General setup for the main window. */
.chapter-formatting .windorv {
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  padding: 2px;
  border-radius: 30px 15px;
}
/* Accounting for AO3's additional <p> tags (harmless to keep). */
.chapter-formatting .windorv p { margin: 0; }

/* Styling for the text within the window. */
.chapter-formatting .lastwin {
  padding: 10px 5px;
  color: #f0fefe;
  font-family: Trebuchet MS, sans-serif;
  text-transform: uppercase;
  text-shadow: 0 0 5px #052160;
  font-weight: bold;
  writing-mode: horizontal-tb !important;
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  justify-content: normal !important;
  align-items: normal !important;
  gap: 0 !important;
}

/* The minimize, resize, and close buttons on the window. */
.chapter-formatting .lastwin::before {
  content: "\2014  \2750  \2716";
  float: right;
  padding: 3px 15px 0 0;
  font-size: 1.2em;
}
.chapter-formatting .yellow.lastwin::before {
  padding: 3px 35px 0 0;
  transform: scaleX(-1);
  position: absolute;
  z-index: 1;
}

/* Aligning the paragraphs within the window. */
.chapter-formatting .lastwin p {
  margin: 0 auto;
  text-align: center;
  padding: 0 10px;
  width: fit-content;
}
.chapter-formatting .lastwin p {
  width: -webkit-fit-content;
}
.chapter-formatting .lastwin p {
  width: -moz-fit-content;
}

/* Scenario window navigation bar, angular and underlying borders. */
.chapter-formatting .outer {
  padding: 1px;
  margin-bottom: 25px;
  margin-top: -5px;
}
.chapter-formatting .blue .outer {
  background: -webkit-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -webkit-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
.chapter-formatting .blue .outer {
  background: -o-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -o-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
.chapter-formatting .blue .outer {
  background: -moz-linear-gradient(225deg, transparent 10px, #f0fefe 10px), -moz-linear-gradient(315deg, transparent 20px, #f0fefe 20px);
}
.chapter-formatting .blue .outer {
  background: linear-gradient(225deg, transparent 10px, #f0fefe 10px), linear-gradient(135deg, transparent 20px, #f0fefe 20px);
  box-shadow: 0px 10px 0px 0px #0091dd, 0px 16px 0px -1px #f0fefe;
}

.chapter-formatting .yellow .outer {
  background: -webkit-linear-gradient(225deg, transparent 20px, #f0fefe 20px), -webkit-linear-gradient(315deg, transparent 10px, #f0fefe 10px);
}
.chapter-formatting .yellow .outer {
  background: -o-linear-gradient(225deg, transparent 20px, #f0fefe 20px), -o-linear-gradient(315deg, transparent 10px, #f0fefe 10px);
}
.chapter-formatting .yellow .outer {
  background: -moz-linear-gradient(225deg, transparent 20px, #f0fefe 20px), -moz-linear-gradient(315deg, transparent 10px, #f0fefe 10px);
}
.chapter-formatting .yellow .outer {
  background: linear-gradient(225deg, transparent 20px, #f0fefe 20px), linear-gradient(135deg, transparent 10px, #f0fefe 10px);
  box-shadow: 0px 10px 0px 0px #f1a900, 0px 16px 0px -1px #f0fefe;
}

/* More navbar angular borders and navbar text styling. */
.chapter-formatting .inner {
  padding: 4px;
  font-size: 1.2em;
  text-align: center;
}
.chapter-formatting .blue .inner {
  background: -webkit-linear-gradient(225deg, transparent 10px, #01c8e8 10px), -webkit-linear-gradient(315deg, transparent 20px, #01c8e8 20px);
}
.chapter-formatting .blue .inner {
  background: -o-linear-gradient(225deg, transparent 10px, #01c8e8 10px), -o-linear-gradient(315deg, transparent 20px, #01c8e8 20px);
}
.chapter-formatting .blue .inner {
  background: -moz-linear-gradient(225deg, transparent 10px, #01c8e8 10px), -moz-linear-gradient(315deg, transparent 20px, #01c8e8 20px);
}
.chapter-formatting .blue .inner {
  background: linear-gradient(225deg, transparent 10px, #01c8e8 10px), linear-gradient(135deg, transparent 20px, #01c8e8 20px);
}
.chapter-formatting .yellow .inner {
  background: -webkit-linear-gradient(225deg, transparent 20px, #ffcb00 20px), -webkit-linear-gradient(315deg, transparent 10px, #ffcb00 10px);
}
.chapter-formatting .yellow .inner {
  background: -o-linear-gradient(225deg, transparent 20px, #ffcb00 20px), -o-linear-gradient(315deg, transparent 10px, #ffcb00 10px);
}
.chapter-formatting .yellow .inner {
  background: -moz-linear-gradient(225deg, transparent 20px, #ffcb00 20px), -moz-linear-gradient(315deg, transparent 10px, #ffcb00 10px);
}
.chapter-formatting .yellow .inner {
  background: linear-gradient(225deg, transparent 20px, #ffcb00 20px), linear-gradient(135deg, transparent 10px, #ffcb00 10px);
}

/* Navbar styling. */
.chapter-formatting .scenario {
  background-position: top right, top left !important;
  -moz-background-size: 50% 100% !important;
  -webkit-background-size: 50% 100% !important;
  background-size: 50% 100% !important;
  background-repeat: no-repeat !important;
}

/* Styling for the headings, like scenario name and clear conditions. */
.chapter-formatting .lastwin p.sys-header {
  font-size: 1.4em !important;
  line-height: 1.3 !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
  writing-mode: horizontal-tb !important;
  display: block !important;
  white-space: normal !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  contain: none !important;
  position: static !important;
  flex: none !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Styling for all other text in the scenario window. */
.chapter-formatting .lastwin p:not(.sys-header) {
  text-align: left;
}

/* Flipping the story window appropriately. */
.chapter-formatting .yellow.lastwin { transform: scale(-1, -1); }
.chapter-formatting .yellow.lastwin > * { transform: scaleX(-1); }