:root {
  --color: hsl(232, 58%, 59%);
  --color-bg: hsl(0, 0%, 95%);
  --color-text: hsl(0, 0%, 0%);
  --color-link: hsl(240, 100%, 50%);

  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 2rem;
}

/* RESET */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  line-height: calc(1em + 0.5rem);
}

body {
  margin: 0;
}

a {
  text-underline-offset: 0.25rem;
}

ul[role="list"] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

table {
  border-collapse: collapse;
}

th {
  text-align: start;
}

input,
select,
textarea,
button {
  font: inherit;
}

/* BASICS */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, sans-serif;
}

code,
kbd,
samp,
pre,
.code {
  font-family: ui-monospace, monospace;
}

a {
  color: var(--color-link);
}

svg {
  stroke: 1px currentColor;
  fill: currentColor;
}

dialog {
  max-height: 50dvh;
  overflow: hidden;
}

details {
  margin-block: 1em;
}

th,
td,
input,
select,
textarea {
  padding: var(--space-xs) var(--space-s);
}

input,
select,
textarea,
button,
a.button {
  margin: 0.25em;
  background-color: inherit;
  color: inherit;
}

/* FORMS */

label {
  display: block;
  margin-block-end: 0.25em;
}

input[type="text"],
input[type="file"],
textarea {
  width: 100%;
}

input[type="file"] {
  padding: var(--space-l);
  outline: 1px dashed;
}

button,
a.button {
  --icon-height: 2em;
  --button-padding: var(--space-s);

  display: inline-flex;
  position: relative;
  align-items: center;
  height: calc(var(--icon-height) + 2 * var(--button-padding));
  padding: var(--button-padding);
  border: 1px solid var(--color-link);
  border-radius: var(--space-s);
  background-color: inherit;
  color: inherit;
  text-decoration: none;
}

:is(button, a.button) :is(img, svg) {
  width: auto;
  height: var(--icon-height);
}

:is(button, a.button):hover :is(img, svg) {
  transform: scale(1.2);
}

:is(button, a.button) :is(img, svg):not(:only-child) {
  margin-inline-end: 0.75em;
}

.field {
  margin-block: 1em;
}

/* LAYOUT */

body {
  --tabs-width: var(--space-l);
  --main-padding: var(--space-l);

  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main {
  flex-grow: 1;
}

#main-header,
main {
  gap: 2em 4em;
  padding-block: var(--space-l);
  padding-inline: calc(var(--tabs-width) + var(--main-padding)) var(--main-padding);
}

#main-tabs {
  position: fixed;
  z-index: 1;
  top: 25%;
  width: var(--tabs-width);
  height: 50%;
  padding: var(--space-m);
  transition: 0.3s;
}

#main-tabs:hover {
  width: fit-content;
}

/* MAIN HEADER */

#main-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color);
  color: var(--color-bg-light);
}

#main-header .heading {
  margin: 0;
  font-size: 1.5em;
}

#language-panel ul {
  display: inline-flex;
  gap: 0.5em;
  font-size: 90%;
}

#language-panel :is(button, a.button) {
  --icon-height: 1.5em;

  justify-content: center;
  aspect-ratio: 1;
}

/* MAIN TABS */

#main-tabs {
  background-color: black;
  color: white;
}

#main-tabs ul {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

#main-tabs a.button {
  visibility: hidden;
  border: none;
  font-size: 90%;
}

#main-tabs:hover a.button {
  visibility: visible;
}

/* COMMON */

main {
  display: grid;
}

h1 {
  font-size: 3em;
  font-style: italic;
}

section {
  padding: var(--space-m);
}

section > h2 {
  margin-block: 0 1em;
  color: var(--color);
  font-weight: normal;
}

section > h2 + * {
  margin-block-start: 0;
}

section > *:last-child {
  margin-block-end: 0;
}

.subsection:not(:first-of-type) {
  margin-block-start: 2em;
}

.htmx-indicator {
  position: absolute;
  z-index: 1;
  top: var(--button-padding);
  left: var(--button-padding);
  background-color: var(--color-bg);
}

.report:not(:empty) {
  max-height: 25dvh;
  margin-block: 1em;
  padding: var(--space-s) var(--space-m);
  overflow: auto;
}

.error {
  background-color: hsl(0, 92%, 25%);
  color: white;
}

.warning {
  background-color: hsl(0, 92%, 75%);
  color: black;
}

.warning ol {
  margin: 0;
  padding: 0 var(--space-m);
}

/* SPECIAL */

main.tekir_overview {
  grid-template-areas:
    "site-summary"
    "site-output";
  grid-template-rows: auto 1fr;
}

#site-summary {
  grid-area: site-summary;
}

#site-output {
  grid-area: site-output;
}

#page-count {
  font-size: 2.5em;
}

:where(#output-path, #output-time) p {
  width: fit-content;
  margin-block: 0.25em;
}

:where(#output-path, #output-time) .target {
  padding: var(--space-xs);
  background-color: hsl(0, 0%, 40%);
  color: white;
}

main.tekir_contents {
  grid-template-areas:
    "content-summary  content-summary"
    "content-subpages content-attachments";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
}

main.tekir_attachment {
  grid-template-areas:
    "content-summary    content-summary"
    "attachment-preview attachment-info";
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
}

#content-summary {
  grid-area: content-summary;
}

#content-subpages {
  grid-area: content-subpages;
}

#content-attachments {
  grid-area: content-attachments;
}

#attachment-preview {
  grid-area: attachment-preview;
}

#attachment-info {
  grid-area: attachment-info;
}

.breadcrumbs {
  width: 100%;
  margin-block-end: 1em;
  font-size: 85%;
}

.breadcrumbs p {
  margin-block-end: 0;
  color: var(--color);
  font-style: italic;
  text-transform: lowercase;
}

.breadcrumbs ul {
  display: inline-flex;
  gap: 0.5em;
}

.breadcrumbs li:not(:first-child)::before {
  content: "» ";
}

.content-listing {
  height: 15em;
  overflow-y: auto;
}

details :is(button, a.button) {
  height: 2rem;
  aspect-ratio: 1;
  padding: 0.25rem;
  border: none;
}

summary button:first-child {
  margin-inline-start: 4em;
}

details:first-of-type .up-block,
details:last-of-type .down-block {
  visibility: hidden;
}

.new-block {
  padding: 0.5rem 1rem;
  outline: 0.125rem dashed red;
}

.add-block {
  margin-block-start: 2em;
}

.add-button {
  margin-inline-end: 1em;
}

.error-report {
  padding: 1rem;
  overflow: auto;
}

/* MEDIA QUERIES */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: hsl(0, 0%, 15%);
    --color-text: hsl(0, 0%, 100%);
    --color-link: hsl(240, 100%, 85%);
  }

  dialog,
  input {
    color-scheme: dark;
  }

  select option {
    background-color: var(--color-bg);
  }
}
