/* Port of the Drupal "lackof" theme (sites/all/themes/lackof/css/style.css) to Bootstrap 5.3. */

@font-face {
  font-family: 'Bowlby One SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../lib/fonts/bowlby-one-sc-latin.woff2') format('woff2');
}

/*
 * Colours. Light is the old site's palette. Dark keeps its warmth: the beige page becomes a dark
 * brown-grey and the white content panel a slightly darker one, with the same glow on the logo.
 * theme.js sets data-bs-theme on <html>; ":root[data-bs-theme]" outranks Bootstrap's own theme rules.
 */
:root,
:root[data-bs-theme=light] {
  --lackof-background: #e7e1d4;
  --lackof-surface: #fff;
  --lackof-border: #cfc3a9;
  --lackof-glow: #b5a88b;
  --lackof-brand: #fff;
  --lackof-halo: #fff;
  --lackof-text: #444;
  --lackof-strong: #333;
  --lackof-snippet: #555;
  --lackof-muted: #777;
  --lackof-submitted: #a0a0a0;
  --lackof-faint: #aaa;
  --lackof-rule: #eee;
  --lackof-rule-strong: #ddd;
  --lackof-rule-heavy: #f1f1f1;
  --lackof-tag-bg: #f1eee7;
  --lackof-crumb-bg: #f9f8f6;
  --lackof-action: #7ab5da;
  --lackof-mark: #fff3b0;
  --lackof-new: #700;
  --lackof-new-hover: #911;
  --lackof-link: #027ac6;
  --lackof-link-hover: #005e9a;
  --lackof-brand-font: 'Bowlby One SC', cursive;

  --bs-body-bg: var(--lackof-background);
  --bs-body-color: var(--lackof-text);
  --bs-body-font-family: verdana, sans-serif;
  --bs-body-line-height: 1.42857;
  --bs-link-color-rgb: 2, 122, 198;
  --bs-link-hover-color-rgb: 0, 94, 154;
  --bs-link-decoration: none;
}

:root[data-bs-theme=dark] {
  --lackof-background: #2b2622;
  --lackof-surface: #1e1b18;
  --lackof-border: #4d4439;
  --lackof-glow: #b5a88b;
  --lackof-brand: #f4efe6;
  --lackof-halo: rgba(0, 0, 0, 0.7);
  --lackof-text: #d8d1c4;
  --lackof-strong: #eee8dd;
  --lackof-snippet: #bdb5a7;
  --lackof-muted: #a0978a;
  --lackof-submitted: #8c8478;
  --lackof-faint: #7d7569;
  --lackof-rule: #353029;
  --lackof-rule-strong: #403930;
  --lackof-rule-heavy: #2e2a24;
  --lackof-tag-bg: #36302a;
  --lackof-crumb-bg: #28241f;
  --lackof-action: #7fa9c6;
  --lackof-mark: #6b5718;
  --lackof-new: #d0675c;
  --lackof-new-hover: #e88a80;
  --lackof-link: #6cb4ea;
  --lackof-link-hover: #9acdf3;

  --bs-body-bg: var(--lackof-background);
  --bs-body-color: var(--lackof-text);
  --bs-emphasis-color: var(--lackof-strong);
  --bs-secondary-color: var(--lackof-muted);
  --bs-border-color: var(--lackof-border);
  --bs-tertiary-bg: var(--lackof-tag-bg);
  --bs-link-color-rgb: 108, 180, 234;
  --bs-link-hover-color-rgb: 154, 205, 243;
  color-scheme: dark;
}

/* The search highlight's text has to stay readable on the dark yellow. */
[data-bs-theme=dark] .search-snippet mark {
  color: var(--lackof-strong);
}

/* Buttons in the old site's green. */
.btn-success {
  --bs-btn-bg: rgb(71, 164, 71);
  --bs-btn-border-color: rgb(61, 140, 61);
  --bs-btn-hover-bg: rgb(61, 140, 61);
  --bs-btn-hover-border-color: rgb(53, 122, 53);
  --bs-btn-active-bg: rgb(53, 122, 53);
  --bs-btn-active-border-color: rgb(46, 106, 46);
  --bs-btn-disabled-bg: rgb(71, 164, 71);
  --bs-btn-disabled-border-color: rgb(71, 164, 71);
}

/* Under the post: no rule of its own, as the comments' bar follows. */
.post .submitted.post-actions {
  margin-top: 6px;
  border-bottom: 0;
}

.post-actions .edit-link {
  margin-left: 0;
}

/* Form controls and dropdowns sit on the content panel's colour, not the page's. */
.form-control,
.form-select,
.dropdown-menu {
  --bs-body-bg: var(--lackof-surface);
  --bs-dropdown-bg: var(--lackof-surface);
  background-color: var(--lackof-surface);
}

/* The missing-image placeholder is drawn for a light page. */
[data-bs-theme=dark] img[src$="missing-image.svg"] {
  filter: invert(0.88) hue-rotate(180deg);
}

a {
  text-decoration: none;
}

/* The old site's type scale (Bootstrap 3): 14px text, and headings in pixels. */
html {
  font-size: 14px;
}

h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 18px; margin-top: 10px; margin-bottom: 10px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

@media (max-width: 575.98px) {
  h1, .h1 { font-size: 28px; }
  h2, .h2 { font-size: 21px; }
}

/* The same space above a page heading as below it. */
h1.page-header {
  margin: 0 0 15px;
  padding: 0;
}

nav[aria-label=breadcrumb] + .post h1.page-header {
  margin-top: 15px;
}

/* Icons sit on the text line, at the text's size, unless sized otherwise. */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/** Header and navbar **/

#navbar .container {
  background-color: var(--lackof-background);
}

#navbar .navbar-brand {
  font-family: var(--lackof-brand-font);
  font-size: 40px;
  text-shadow: 0 0 5px var(--lackof-glow);
  margin: 0;
  color: var(--lackof-brand);
}

/* No space above or below the navbar. */
#navbar {
  padding-top: 0;
  padding-bottom: 0;
}

#navbar .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}

/* The old site's navbar colours: grey, darker on hover. */
#navbar .nav-link {
  font-family: var(--lackof-brand-font);
  font-size: 20px;
  text-shadow: 0 0 5px var(--lackof-halo);
  padding-left: 5px;
  padding-right: 5px;
  color: var(--lackof-muted);
}

#navbar .nav-link:hover,
#navbar .nav-link:focus-visible {
  color: var(--lackof-strong);
}

#navbar form button.nav-link {
  border: 0;
  background: none;
}

/* Theme toggle and account menu: always top right, beside the menu button on small screens. */
#navbar .navbar-account {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

@media (min-width: 768px) {
  #navbar .navbar-account {
    margin-left: 10px;
  }
}

#navbar .navbar-icon,
#navbar .account-button {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--lackof-muted);
}

#navbar .navbar-icon .icon {
  width: 20px;
  height: 20px;
}

#navbar .navbar-icon:hover,
#navbar .navbar-icon:focus-visible {
  color: var(--lackof-strong);
}

#navbar .account-button:focus-visible .avatar,
#navbar .account-button[aria-expanded=true] .avatar {
  box-shadow: 0 0 0 3px var(--lackof-glow);
}

[data-bs-theme=light] .theme-icon-light,
[data-bs-theme=dark] .theme-icon-dark {
  display: none;
}

/* Without JavaScript the toggle can't do anything. */
:root:not([data-bs-theme]) #navbar .theme-toggle {
  display: none;
}

.avatar-32 { width: 32px; height: 32px; font-size: 18px; line-height: 32px; }

/** Main content **/

.main-container {
  background-color: var(--lackof-surface);
  border: 1px solid var(--lackof-border);
  border-radius: 13px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.submitted {
  font-size: 80%;
  color: var(--lackof-submitted);
}

.post-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--lackof-tag-bg);
  font-size: 85%;
}

/** Post lists (front page, blogs, tags) **/

.post-list {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}

/* As the old front page: kind icon floated left, the author's picture floated right. */
.post-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 50px;
  padding: 5px 0;
  border-bottom: 1px solid var(--lackof-rule-strong);
}

.post-list li:first-child {
  padding-top: 10px;
}

/* The same gap between the panel's edge and the first post as between posts. */
.main-list-first {
  padding-top: 0;
}

.main-list-first .post-list li:first-child {
  padding-top: 5px;
}

.post-list-main {
  flex: 1;
  min-width: 0;
}

.post-list-avatar {
  order: 3;
  flex-shrink: 0;
}

.post-list-title {
  font-size: 1.05em;
}

.post-list-meta {
  font-size: 0.8em;
  color: var(--lackof-muted);
}

.post-list-meta > span {
  margin-right: 6px;
}

.post-kind {
  flex-shrink: 0;
  width: 28px;
  margin-top: 4px;
  color: var(--lackof-faint);
}

.post-kind .icon {
  width: 26px;
  height: 26px;
}

/* Search results label each hit in words. */
.result-kind {
  display: inline-block;
  min-width: 64px;
  margin-right: 6px;
  font-size: 75%;
  color: var(--lackof-faint);
  text-transform: uppercase;
}

/** Post page **/

.post header,
.post .submitted {
  border-bottom: 1px solid var(--lackof-rule);
  padding-bottom: 4px;
}

.post-link {
  margin-top: 15px;
  font-size: 1.1em;
  overflow-wrap: anywhere;
}

.post-body,
.comment-body {
  margin-top: 4px;
  overflow-wrap: break-word;
}

.post-body img,
.comment-body img,
.post-body iframe,
.comment-body iframe,
.post-body video,
.comment-body video {
  max-width: 100%;
}

/* Kept within the post's width, like the rules between comments. */
#comments {
  border-top: 4px solid var(--lackof-rule-heavy);
  padding-top: 7px;
  margin-top: 7px;
}

.comment {
  border-bottom: 1px solid var(--lackof-rule);
  padding-bottom: 7px;
  margin-bottom: 7px;
}

.comment:target {
  border-left: 7px solid var(--lackof-glow);
  padding-left: 7px;
  margin-left: -14px;
}

/** Footer **/

footer.footer {
  margin: 7px auto;
  padding: 0;
  text-align: center;
  font-size: 80%;
}

footer.footer a {
  font-family: var(--lackof-brand-font);
  font-size: 20px;
  text-shadow: 0 0 5px var(--lackof-halo);
  color: var(--lackof-muted);
}

footer.footer a:hover,
footer.footer a:active {
  color: var(--lackof-strong);
}

footer.footer .build {
  color: var(--lackof-faint);
  font-size: 11px;
}

/*
 * Collapsing logo: lack-of.org → lack-of → lackof → l-o, then back to lack-of.org once the
 * navbar collapses (< 768px, navbar-expand-md), then lack-of → lackof on very small screens.
 * Rule order matters: later (narrower) queries override earlier ones.
 */
@media (max-width: 1024px) {
  #branddotorg {
    display: none;
  }
}

@media (max-width: 889px) {
  #brandhyphen {
    display: none;
  }
}

@media (max-width: 858px) {
  #brandack,
  #brandf {
    display: none;
  }

  #brandhyphen {
    display: inline;
  }
}

@media (max-width: 767.98px) {
  #brandhyphen,
  #branddotorg,
  #brandack,
  #brandf {
    display: inline;
  }

  .main-container {
    border-radius: 0;
  }
}

@media (max-width: 380px) {
  #branddotorg {
    display: none;
  }
}

@media (max-width: 280px) {
  #brandhyphen {
    display: none;
  }
}

/** Writing **/

/* Edit links are quiet, as the old site's were: small and pale blue. */
.edit-link {
  margin-left: 6px;
  font-size: 80%;
  color: var(--lackof-action);
}

/* In a post's "Blog post by" line, the same size as the line. */
.submitted .edit-link {
  font-size: inherit;
}


.comment-form {
  margin-top: 20px;
}

.body-editor-text {
  font-family: var(--bs-font-monospace);
  font-size: 0.9em;
}

.body-editor-text.drop-target {
  border-color: var(--lackof-link);
  box-shadow: 0 0 0 3px rgba(2, 122, 198, 0.25);
}

.preview {
  padding: 10px 15px;
  border: 1px dashed var(--lackof-border);
  border-radius: 6px;
}

.preview-label {
  font-size: 75%;
  color: var(--lackof-faint);
  text-transform: uppercase;
}

.post-body img,
.comment-body img,
.upload-preview {
  max-width: 100%;
  height: auto;
}

/** Search **/

#navbar .navbar-search {
  margin-left: 8px;
}

#navbar .navbar-search input {
  width: 140px;
}

@media (max-width: 767.98px) {
  #navbar .navbar-search {
    margin: 4px 0 8px;
  }

  #navbar .navbar-search input {
    width: 100%;
  }
}

.search-snippet {
  font-size: 0.9em;
  color: var(--lackof-snippet);
  overflow-wrap: anywhere;
}

.search-snippet mark {
  padding: 0 1px;
  background-color: var(--lackof-mark);
}

.search-order {
  font-size: 0.9em;
}

/** New activity **/

.post-list li.unread .post-list-title {
  font-weight: bold;
}

/* The old site's marker: dark red, in the logo font, on the right. */
.new-marker {
  float: right;
  margin: 0 0 0 8px;
  font-family: var(--lackof-brand-font);
  font-size: 16px;
  color: var(--lackof-new);
}

a.new-marker:hover {
  color: var(--lackof-new-hover);
}

.new-comments-link {
  font-size: 0.9em;
}

.comment-new {
  border-left: 7px solid var(--lackof-new);
  padding-left: 7px;
}

/** Avatars and home pages **/

.avatar {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.avatar-initial {
  background-color: var(--lackof-border);
  color: #fff;
  font-family: var(--lackof-brand-font);
  text-align: center;
}

.avatar-16 { width: 16px; height: 16px; font-size: 10px; line-height: 16px; }
.avatar-20 { width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
.avatar-24 { width: 24px; height: 24px; font-size: 14px; line-height: 24px; }
.avatar-48 { width: 48px; height: 48px; font-size: 26px; line-height: 48px; }
.avatar-96 { width: 96px; height: 96px; font-size: 52px; line-height: 96px; }

.profile {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.profile h1.page-header {
  padding-bottom: 4px;
}

.profile-bio {
  margin-bottom: 20px;
}

.settings-section {
  margin-bottom: 25px;
}

/* Tables sit on the content panel, in both themes. */
.table {
  --bs-table-bg: var(--lackof-surface);
  --bs-table-color: var(--lackof-text);
  --bs-table-border-color: var(--lackof-rule-strong);
}

/*
 * Phones: the full logo, theme toggle, picture and menu button share one row, so the logo and
 * menu button are a little smaller. The logo still collapses as above.
 */
@media (max-width: 575.98px) {
  #navbar .navbar-brand {
    font-size: 30px;
  }

  #navbar .navbar-account {
    gap: 6px;
  }

  #navbar .navbar-toggler {
    padding: 2px 6px;
  }
}

/** Old site details **/

.breadcrumb {
  --bs-breadcrumb-bg: var(--lackof-crumb-bg);
  --bs-breadcrumb-padding-x: 15px;
  --bs-breadcrumb-padding-y: 6px;
  --bs-breadcrumb-margin-bottom: 0;
  --bs-breadcrumb-border-radius: 0 0 6px 6px;
  margin-top: -15px;
}

/* The menu button, as on the old site: white with the border colour. */
#navbar .navbar-toggler {
  border-color: var(--lackof-border);
  background-color: var(--lackof-surface);
}

/*
 * Images in old posts floated with inline styles, which the content security policy blocks; the
 * sanitiser turns them into these classes.
 */
.img-float-left {
  float: left;
  margin: 4px 12px 8px 0;
}

.img-float-right {
  float: right;
  margin: 4px 0 8px 12px;
}

.post-body::after,
.comment-body::after {
  content: "";
  display: table;
  clear: both;
}

/* Wide tables and code in posts scroll sideways instead of widening the page. */
.post-body table,
.comment-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.post-body pre,
.comment-body pre {
  overflow-x: auto;
}

/* Very small screens, as the old site: the panel runs edge to edge and the pictures go. */
@media (max-width: 380px) {
  .main-container {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .post-list-avatar,
  .post-list-last {
    display: none;
  }

  .post-kind {
    width: 18px;
  }

  .post-kind .icon {
    width: 16px;
    height: 16px;
  }
}

/* Each piece of a list item's details wraps as a whole. */
.post-list-meta > span {
  white-space: nowrap;
}

.post-body th,
.post-body td,
.comment-body th,
.comment-body td {
  padding: 2px 8px 2px 0;
}

.form-check-input:not(:checked) {
  background-color: var(--lackof-surface);
}