/* Variables */
:root {
  --spacing: 1rem;
  --half-spacing: calc(var(--spacing) / 2);
  --quarter-spacing: calc(var(--spacing) / 4);
  --line-height: 1.5;

  --not-black: #191919;
  --not-white: #FFF9F2;
  --primary-accent: #83254f;
  --secondary-accent: #FFAB5C;

  --black: #000000;
  --white: #ffffff;

  --border: solid 2px var(--not-black);
  --border-radius: var(--half-spacing);

  --bold-mark: #FF9999;
  --italic-mark: #33ff33;
  --strike-mark: #9999ff;
  --size-mark: #ffff33;
  --opacity-mark: #ff33ff;
  --color-mark: #33ffff;
  --mark-mark: #FFCCBB;
  --upper-mark: #BBFFCC;
  --lower-mark: #CCBBFF;
  --blur-mark: #33FF99;
  --rev-mark: #FF9933;
}

/* Font Definitions */
@font-face {
  font-family: 'atkinson-hyperlegible';
  src: url(./assets/fonts/AtkinsonHyperlegibleNext-Regular.woff2) format("woff2");
}
@font-face {
  font-family: 'atkinson-hyperlegible-mono';
  src: url(./assets/fonts/AtkinsonHyperlegibleMono-Regular.woff2) format("woff2");
}

/* General Element Styles */
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'atkinson-hyperlegible', sans-serif;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  margin: 0;
  background-color: var(--not-white);
  color: var(--not-black);
}

header {
  text-align: center;
}

header h1 {
  font-weight: normal;
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: var(--spacing);
}

code {
  font-family: 'atkinson-hyperlegible-mono', monospace;
}

blockquote {
  border-left: var(--border);
  border-color: #cccccc;
  margin: var(--half-spacing);
  padding-left: var(--half-spacing);
}

fieldset, textarea, input, button, select, option, details {
  border: var(--border);
  border-radius: var(--border-radius);
}

textarea, input, button, select, option, details summary {
  font-family: inherit;
  font-size: inherit;
  line-height: var(--line-height);
  padding: var(--half-spacing);
  padding-left: var(--spacing);
  accent-color: var(--secondary-accent);
}

input[type="checkbox"], input[type="checkbox"] + label, button, select, details summary {
  cursor: pointer;
}

button, select, details summary {
  background-color: var(--primary-accent);
  color: var(--white);
}

select, fieldset legend {
  font-weight: bold;
}

option {
  background-color: var(--white);
  color: var(--not-black);
}

/* Fieldset Styles */
fieldset {
  margin: 0;
}

fieldset legend {
  padding: 0 var(--spacing);
  margin: auto;
}

/* Details Styles */
details {
  margin-top: var(--spacing);
  border: var(--border);
  border-radius: var(--border-radius);
  background-color: var(--white);
}

details summary {
  border: none;
}

details[open] {
  background-color: var(--white);
}

details[open] summary {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

details summary ~ div {
  padding: var(--spacing);
}

/* Styles to apply different font family types (sans-serif/serif/monospace) */
.sans-serif-font,
body:has(select option[value="sans-serif"]:checked) .dynamic-font {
  font-family: Arial, Helvetica, sans-serif;
}
.serif-font,
body:has(select option[value="serif"]:checked) .dynamic-font {
  font-family: Georgia, 'Times New Roman', Times, serif;
}
.monospace-font,
body:has(select option[value="monospace"]:checked) .dynamic-font {
  font-family: 'Courier New', Courier, monospace;
}

/* Start of Specific Page Styles */
main {
  display: flex;
  flex-direction: column;
}

section {
  margin: 0 var(--spacing) var(--spacing);
}

@media (min-width: 1369px) {
  main {
    width: 75vw;
  }
  
  section {
    margin: 0 0 var(--spacing);
  }
}

/* Display Options Section */
.display-opts-section {
  display: flex;
  justify-content: center;
  margin: 0 var(--spacing) var(--spacing);
}

.display-opts {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-right: calc(var(--spacing) * -1);
}

.display-opts {
  background-color: var(--white);
}

.display-opts .field {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin-right: var(--spacing);
}

.display-opts label {
  font-weight: bold;
}

.display-opts select {
  padding-left: var(--spacing);
  flex-grow: 1;
}

.display-opts .color-input-wrap {
  position: relative;
  display: flex;
}

.display-opts .color-input-wrap::before {
  content: ' #';
  position: absolute;
  top: calc(var(--spacing) / 1.5);
  left: calc(var(--half-spacing) + var(--quarter-spacing));
}

.display-opts .color-input-wrap .color-input {
  flex-grow: 1;
  padding-left: calc(var(--spacing) * 1.5);
}

.display-opts .color-input-wrap .color-input:invalid {
  background: lightpink;
}

/* Notifs Section */
#notifications {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0;
}

#notifications div {
  flex: 1 1 0;
  text-align: center;
  margin: 0 var(--half-spacing) var(--spacing);
  padding: var(--half-spacing);
  background-color: var(--secondary-accent);
  border: var(--border);
  border-radius: var(--border-radius);
  font-weight: bold;
}

#notifications div:first-of-type {
  margin-left: 0;
}

#notifications div:last-of-type {
  margin-right: 0;
}

/* Parser Input Columns Section */
.input-area {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.input-area .column {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin: 0 var(--half-spacing);
  overflow-wrap: break-word;
}

.input-area .column:first-child {
  margin-left: 0;
}

.input-area .column:last-child {
  margin-right: 0;
}

.input-area .text-grow {
  flex: 1 1 auto;
  white-space: pre-line;
}

/* Input Column */
.input-area textarea {
  font-family: initial;
  margin: 0;
  padding: var(--spacing);
  resize: vertical;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-accent) transparent;
  scrollbar-gutter: stable;
}

/* Input Column HTML Options */
.input-area .html-opts {
  margin-top: var(--spacing);
  background-color: var(--white);
}

.input-area .html-opts .checkbox {
  display: flex;
  align-items: center;
}

.input-area .html-opts .checkbox label {
  margin-left: var(--half-spacing);
}

/* Markup & Output Columns */
.input-area #text-marked,
.input-area #text-output {
  min-height: 250px;
  line-height: var(--line-height);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: var(--spacing);
}

/* Markup Column */
.input-area #text-marked {
  background-color: var(--white);
}

.input-area .marked-footer ul {
  list-style: inside;
  margin: 0;
  padding: 0;
}

.input-area .marked-footer li {
  margin: var(--quarter-spacing) 0;
  padding: var(--quarter-spacing) var(--spacing);
}

/* Markup Column Highlighting Styles */
.legend-text {
  margin: var(--spacing) 0 0;
}
.null-mark {
  border: var(--border);
  border-width: 4px;
  border-color: var(--black);
  border-top-color: var(--white);
  border-bottom-color: var(--white);
}
.per-char span:not(.null-mark) {
  border-left: var(--border);
  border-color: #777777;
}
.legend-text .null-mark,
.legend-text .per-char {
  white-space: nowrap;
}
.bold-mark {
  background-color: var(--bold-mark);
}
.italic-mark {
  background-color: var(--italic-mark);
}
.strike-mark {
  background-color: var(--strike-mark);
}
.size-mark {
  background-color: var(--size-mark);
}
.opacity-mark {
  background-color: var(--opacity-mark);
}
.color-mark {
  background-color: var(--color-mark);
}
.mark-mark {
  background-color: var(--mark-mark);
}
.upper-mark {
  background-color: var(--upper-mark);
}
.lower-mark {
  background-color: var(--lower-mark);
}
.blur-mark {
  background-color: var(--blur-mark);
}
.rev-mark {
  background-color: var(--rev-mark);
}
.tag-error {
  border: solid 4px;
  border-color: red;
  background-color: red;
  color: white;
}

/* Output Column */
.input-area .output-footer {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing);
}

.input-area details summary {
  text-align: center;
}

.input-area #html-output {
  max-height: 200px;
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--primary-accent) transparent;
  scrollbar-gutter: stable;
}

/* Instructions Section */
.instructions details {
  margin: var(--spacing);
}

.instructions summary {
  font-size: 1.25rem;
}

.instructions summary ~ div p {
  margin: 0;
}

.instructions summary ~ div p + p,
.instructions summary ~ div blockquote + p {
  margin-top: 1rem;
}