/* CSS för formatering av diskussioner i Kvikr Prat */

/* === Kvikr Prat – Trädstruktur ===

<div class="prat-thread">
│
├── <h3 class="prat-title">
│
├── <form class="prat-auth">
│     └── <fieldset class="prat-auth-fieldset">
│          └── <legend class="prat-auth-legend">
│          ├── <label class="prat-auth-label">
│          │     ├── Text + <small class="prat-auth-small">
│          │     └── <input class="prat-auth-input prat-auth-email">
│          ├── <label class="prat-auth-label">
│          │     ├── Text + <small class="prat-auth-small">
│          │     └── <input class="prat-auth-input prat-auth-name">
│          ├── <label class="prat-auth-label">
│          │     ├── Text + <small class="prat-auth-small">
│          │     └── <input class="prat-auth-input prat-auth-password">
│          └── <div class="prat-auth-buttons">
│               ├── <button class="prat-auth-button" name="login">
│               └── <button class="prat-auth-button" name="register">
│
├── <div class="prat-form-container">
│     └── <form class="prat-form">
│          ├── <textarea class="prat-form-textarea"></textarea>
│          └── <div class="prat-form-post-buttons">
│               ├── <button class="prat-form-submit-button">Publicera
│               └── <button type="button" class="prat-logout-button">Logga ut
│
├── <small class="prat-status"></small>
│
└── <div class="prat-posts">
      └── <div class="prat-post">
           ├── <div class="prat-post-header-row">
           │     ├── <div class="prat-num">
           │     ├── <div class="prat-user">
           │     └── <div class="prat-relative">
           └── <div class="prat-text">

==================================== */

/* Importera Ubuntu och Ubuntu Condensed från Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Condensed&display=swap');

/* Grundläggande layoutjusteringar */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  --font-family: 'Ubuntu', sans-serif;
  --font-family-headings: 'Ubuntu Condensed', sans-serif;
  --font-size: 16px;
  --link-color: #b60000;
  --text-color: #666;
  --background-color: #fff;
  --visited-link-color: #990000;
  --hover-link-color: #e00;
  --button-border-color: #ccc;
  --button-background-color: #fff;
  --alert-button-background-color: #b60000;
  --alert-button-text-color: #eee;
  --table-head-background-color: #f6f6f6;
  --quote-text-color: #000;
  --box-shadow: 5px 0 10px rgba(0, 0, 0, 0.1);
  --line-height: 1.5em;
  --line-height-headings: 1.2em;
}

.prat-thread {
  font-family: var(--font-family);
  margin: 0 auto 2em auto;
  padding: .5em;
  background: #fafafa;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.prat-thread h1, .prat-thread h2, .prat-thread h3, .prat-thread h4, .prat-thread h5, .prat-thread h6 {
  font-family: var(--font-family-headings);
  font-weight: 400;
  margin-top: 0;
}

.prat-auth, .prat-form {
  margin-bottom: .5em;
}

.prat-auth-fieldset {
  border: none;
  padding: 0;
  font-size: var(--font-size);
}

.prat-auth-legend {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.prat-auth-label {
  display: block;
  margin-bottom: 1em;
}

.prat-auth-label-row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
}

.prat-auth-small {
  display: block;
  font-size: 0.8em;
  color: #666;
}

.prat-auth-input {
  box-sizing: border-box;
  font-size: var(--font-size);
  width: 100%;
  padding: .5em;
  margin-top: 0.2em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.prat-auth-buttons {
  display: flex;
  gap: 1em;
}

.prat-auth-buttons button {
  flex: 1;
  width: 100%;
}

button.prat-auth-button,
button.prat-form-submit-button,
button.prat-logout-button {
  margin-top: 0.5em;
  padding: 0.5em 1em;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--button-background-color);
  border: 1px solid var(--button-border-color);
  color: var(--link-color);
  font-size: var(--font-size);
  width: 100%;
  box-shadow: var(--box-shadow);
}

.prat-form-textarea {
  width: 100%;
  height: 100px;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 1em;
  font-size: var(--font-size);
}

.prat-form-post-buttons {
  display: flex;
  gap: 1em;
}

.prat-form-post-buttons button {
  flex: 1;
  width: 100%;
}

.prat-posts {
  list-style: none;
  padding: 0;
  margin: 0;
}

.prat-post {
  padding-top: 1em;
  margin-top: 1em;
}

.prat-post-header-row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: .8em;
  margin-bottom: 5px;
}

.prat-post-meta {
  padding-bottom: 10px;
  color: #888;
}

ol .prat-post {
  margin-left: 0;
  padding-left: 0;
}

.prat-num, .prat-relative, .prat-user {
  font-size: 0.9em;
  color: #888;
}

.prat-user {
  font-weight: bold;
}

.prat-text {
  border: 1px solid var(--button-border-color);
  padding: .5em;
  border-radius: 5px;
  color: #333;
  margin-top: 5px;
}

.prat-status {
  color: var(--link-color);
}

.content ol {
  margin-left: 0;
  margin-top: 0;
}

a.prat-title-link {
  color: var(--link-color);
}