/*
  This software is free software. You can do whatever you want with it.
  Developed by Franck LEFEVRE for K1 (https://k1info.com), with help from his team of kind and funny robots.
  Please use the power of this software to do good for things and people, always ensuring it harms nothing and no one.
*/
/* Palette and typography */
:root {
  --color-primary: #b3d4fc;
  --color-secondary: #000000;
  --color-background-light: #ffffff;
  --color-background: #ffffff;
  --color-highlight: #b3d4fc;
}

html {
  font-size: 20px;
}
/* Subscription box for newsletter */
#subscribe {
  border: 1px solid var(--color-secondary);
  padding: 1em;
  margin: 2em 0;
  background-color: var(--color-background);
}
#subscribe h2, #subscribe h3 {
  margin-top: 0;
}
#subscribe input[type="email"] {
  max-width: 300px;
  margin-right: 0.5em;
}
.subscribe-status {
  margin-top: 1em;
  font-size: 0.9em;
  color: var(--color-secondary);
}

body {
  margin: 0 auto;
  word-spacing: 0.5em;
  max-width: 90vw;
  padding: 0;
  font-family: 'Courier New', Courier, monospace;
  background-color: var(--color-background-light);
  color: var(--color-secondary);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-secondary);
  margin: 1em 0 0.5em;
}

h1 { font-size: 2em; }
 h2 { font-size: 1.75em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.25em; }

p {
  margin: 0 0 1em;
}

ul {
  margin: 0 0 1em 1.5em;
  padding: 0;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Buttons */
.button, .btn, button {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: var(--color-background);
  color: var(--color-secondary);
  text-decoration: none;
  border: 1px solid var(--color-secondary);
  border-radius: 3px;
  cursor: pointer;
  font-size: 1em;
}

.button:hover, .btn:hover, button:hover {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

/* Forms */
input[type="text"], input[type="email"], textarea, select {
  background-color: var(--color-background);
  color: var(--color-secondary);
  width: 100%;
  max-width: 100%;
  padding: 0.5em;
  margin-bottom: 1em;
  border: 1px solid var(--color-secondary);
  border-radius: 3px;
  box-sizing: border-box;
}

input[type="submit"], button[type="submit"] {
  padding: 0.75em 1.5em;
  background-color: var(--color-background);
  color: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  border-radius: 3px;
  cursor: pointer;
}
input[type="submit"]:hover, button[type="submit"]:hover {
  background-color: var(--color-primary);
  color: var(--color-secondary);
}

/* Header */
header {
  background-color: var(--color-background);
  padding: 20px 40px;
  border-bottom: 1px solid var(--color-secondary);
}
/* Header container: center logo and nav above two-columns layout */
.header-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;
  max-width: 1200px;
  margin: 0 auto;
}
/* Logo container: title and logo then tagline below */
.logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Inline heading: title and logo */
.logo-heading {
  display: flex;
  align-items: center;
}
.logo-heading h1 {
  margin: 0;
  font-size: 2.5em;
  color: var(--color-secondary);
}
.logo-heading .site-logo {
  height: 50px;
  width: auto;
  margin-left: 0.5em;
}
.logo h1 {
  margin: 0;
  font-size: 2.5em;
  color: var(--color-secondary);
}
.logo .tagline {
  margin: 0;
  font-size: 1em;
  color: var(--color-secondary);
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.main-nav li {
  margin-left: 1.5em;
}
.main-nav a {
  color: var(--color-secondary);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9em;
  text-decoration: none;
}
.main-nav a:hover {
  background-color: var(--color-highlight);
  color: var(--color-secondary);
}
mark, .highlight {
  background-color: var(--color-highlight);
  color: var(--color-secondary);
}

/* Footer */
footer {
  background-color: var(--color-background);
  color: var(--color-secondary);
  text-align: center;
  padding: 1em 0;
  margin-top: 2em;
}
footer a {
  color: var(--color-secondary);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
/* Two-column layout for vision and actions */
.two-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  margin-bottom: 2em;
  position: relative;
}
/* Vertical divider between two columns */
.two-columns::before {
  content: '';
  position: absolute;
  top: 1em;
  bottom: 1em;
  left: 50%;
  width: 1px;
  background-color: var(--color-secondary);
  transform: translateX(-50%);
}
/* Elegant divider between the two columns */
.two-columns > section:first-child {
  /* spacing from vertical divider */
  padding-right: 1.5em;
}
.two-columns > section:last-child {
  padding-left: 1.5em;
}
/* Blog */
#blog {
  margin: 2em 0;
}
#blog-posts article {
  margin-bottom: 2em;
}
/* Blog previews grid */
#blog-previews {
  display: grid;
  /* max 4 columns per row */
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
}
.post-preview {
  border: 1px solid var(--color-secondary);
  padding: 1em;
  background: var(--color-background);
  box-sizing: border-box;
}
.post-preview img {
  display: block;
}
.post-preview h3 {
  margin: 0.5em 0 0.5em;
}
/* Post detail container: slightly wider to accommodate two-column layout */
/* Post detail container: more width and slight left offset */
.post-detail {
  max-width: 1080px;
  margin: 2em auto;
  padding: 1em;
  position: relative;
  left: -5%;
}
.post-detail img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}
#blog-posts img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1em 0;
}
/* Portrait thumbnails: float left and wrap text */
.post-preview.portrait img {
  float: left;
  width: 500px;
  height: auto;
  margin: 20px;
}
/* Landscape thumbnails: fixed height, center horizontally */
.post-preview:not(.portrait) img {
  height: 500px;
  width: auto;
  margin: 20px auto;
}
/* Preview metadata: themes, author, summary */
.post-preview .post-themes {
  margin: 0.5em 0;
}
.post-preview .post-themes .theme {
  display: inline-block;
  background-color: var(--color-highlight);
  color: var(--color-secondary);
  padding: 0.2em 0.5em;
  border-radius: 3px;
  margin-right: 0.3em;
  font-size: 0.85em;
}
.post-preview .post-meta {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 0.5em;
}
.post-preview .post-summary {
  margin-bottom: 1em;
}

/* Detail page metadata and content styling */
.post-detail h1 {
  margin-top: 0;
}
.post-detail .post-header-image {
  max-width: 100%;
  margin: 1em 0;
}
.post-detail .post-themes {
  margin: 0.5em 0;
}
.post-detail .post-themes .theme {
  display: inline-block;
  background-color: var(--color-highlight);
  color: var(--color-secondary);
  padding: 0.2em 0.5em;
  border-radius: 3px;
  margin-right: 0.3em;
  font-size: 0.85em;
}
.post-detail .post-meta {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 1em;
}
/* Detail page content: default single column, two-column only with .two-col */
.post-detail .post-content {
  margin-top: 1em;
}
/* Two-column layout for post content with custom divider */
.post-detail.two-col .post-content {
  /* Layout post content in two columns when class two-col is present */
  column-count: 2;
  column-gap: 2em;
  position: relative;
}
/* Elegant vertical divider between post content columns */
.post-detail.two-col .post-content::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 2em;
  bottom: 2em;
  width: 1px;
  background-color: var(--color-secondary);
  transform: translateX(-50%);
}
/* Highlight hyperlinks in post content: white text on black background */
.post-detail .post-content a {
  background-color: var(--color-secondary);
  color: var(--color-background-light);
  padding: 0.1em 0.2em;
  border-radius: 2px;
  text-decoration: none;
}
.post-detail .post-content a:hover {
  opacity: 0.8;
}
/* Subscription box for newsletter */
#subscribe {
  border: 1px solid var(--color-secondary);
  padding: 1em;
  margin: 2em 0;
  background-color: var(--color-background);
}
#subscribe h2, #subscribe h3 {
  margin-top: 0;
}
#subscribe input[type="email"] {
  max-width: 300px;
  margin-right: 0.5em;
}
.subscribe-status {
  margin-top: 1em;
  font-size: 0.9em;
  color: var(--color-secondary);
}
/* Disable two-column layout on small screens for post content */
@media (max-width: 600px) {
  .post-detail.two-col .post-content {
    column-count: 1;
    column-gap: normal;
  }
  .post-detail.two-col .post-content::before {
    display: none;
  }
}

/* K1 tables */
.k1-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.k1-table td, .k1-table th {
  border: 1px solid var(--color-secondary);
  padding: 0.5em 0.6em;
  vertical-align: top;
}
.k1-table td[style*="text-align:center"], .k1-table th[style*="text-align:center"] { text-align: center; }
.k1-table td[style*="text-align:right"], .k1-table th[style*="text-align:right"] { text-align: right; }
.k1-table .muted { color: #666; }