/*****************
Custom CSS
*****************/
:root {
  --primary: #ccc5b9;
  --secondary: #0000ff;
  --success: #5cc72a;
  --info: #00e5ff;
  --warning: #f6c343;
  --danger: #ff1744;
  --light: #f8f9fa;
  --dark: #000000;
  --white: #ffffff;
  --gray-100: #f8f9fa;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;
  --black: #000000;
  --font-weight-bold: 700;
  --font-family-body: 'Google Sans Code', monospace;
  --font-family-headings: 'Fredericka the Great', cursive;
  --text-color: #252422;
  --heading-color: #403d39;
}

::selection {
  background-color: var(--primary);
  color: var(--black);
}

a:not(.heading-brand) {
  font-weight: 500;
}

.font-weight-medium {
  font-weight: 500;
}

.heading-brand {
  font-weight: 800;
  font-size: 1.75rem;
  font-family: 'Fredericka the Great', cursive !important;
  color: #eb5e28;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Explicit Workbench font application with maximum specificity */
body .heading-brand {
  font-family: 'Fredericka the Great', cursive !important;
}

section .heading-brand {
  font-family: 'Fredericka the Great', cursive !important;
  color: #eb5e28;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

div .heading-brand {
  font-family: 'Fredericka the Great', cursive !important;
  color: #eb5e28;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Apply fonts to all body text and headings */
body {
  font-family: 'Google Sans Code', monospace;
  color: var(--text-color);
}

/* Bigger heading sizes */
h1,
.h1 {
  font-size: 5.5rem;
  color: var(--heading-color);
}

h2,
.h2 {
  font-size: 3.5rem;
  color: var(--heading-color);
}

h3,
.h3 {
  font-size: 2rem;
  color: var(--heading-color);
}

h4,
.h4 {
  font-size: 1.75rem;
  color: var(--heading-color);
}

h5,
.h5 {
  font-size: 1.5rem;
  color: var(--heading-color);
}

h6,
.h6 {
  font-size: 1.25rem;
  color: var(--heading-color);
}

/* Explicit Workbench font application with maximum specificity */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6,
.col-md-8 h1,
.col-md-8 h2,
.col-md-8 h3,
.col-md-8 h4,
.col-md-8 h5,
.col-md-8 h6,
.text-center h1,
.text-center h2,
.text-center h3,
.text-center h4,
.text-center h5,
.text-center h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Fredericka the Great', cursive !important;
}

/* Center all content except logo and download button */
section .container {
  text-align: center;
}

section .container .row:not(.d-flex) {
  justify-content: center;
}

/* Keep logo and download button left-aligned */
section .container .row:first-child .d-flex {
  justify-content: space-between !important;
}

/* Center content in feature grid */
.feature-grid .media {
  flex-direction: column;
  text-align: center;
}

/* Adjust icon box for centered layout */
.feature-grid .media .icon-box {
  margin-right: 0;
  margin-bottom: 1rem;
}

/* Lucide icon styling */
.lucide-icon {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

/* Icon styling */
.svg-icon {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

/* Buttons */
.btn {
  box-shadow:
    0 4px 6px rgba(255, 255, 0, 0.11),
    0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn:active,
.btn:focus {
  box-shadow: none !important;
}

/*Forms*/
.form-control {
  font-weight: var(--font-weight-bold);
}

/*Feature Grid*/
.feature-grid {
  margin-top: 3rem;
  justify-content: center;
}

.feature-grid .media {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 2.5rem;
}

.feature-grid .media .media-body {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  text-align: center;
}

/*Press Icons*/
.press-icons img:not(:last-child) {
  margin-right: 4rem;
  margin-bottom: 1rem;
}

/*footer*/
footer ul > li:not(:last-child) {
  margin-right: 1.5rem !important;
}

footer a {
  color: var(--black);
  font-weight: var(--font-weight-bold);
}

/* Icon Boxes */
.icon-box {
  position: relative;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--white);
  margin-right: 1rem;
  color: #ccc5b9;
}

.icon-box .icon-box-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 1rem;
}

/*Gradients*/
.bg-gradient {
  background: linear-gradient(var(--primary), #fffcf2);
}

/*Code Window*/
.code-window {
  border-radius: 0.45rem;
  background-color: var(--white);
  padding: 1.52rem;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.1);
}

.code-window .dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.code-window .dots div {
  margin-right: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background-color: var(--gray-200);
}

.code-window .dots div.red {
  background-color: var(--danger);
}

.code-window .dots div.orange {
  background-color: var(--warning);
}

.code-window .dots div.green {
  background-color: var(--success);
}

/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*='language-'],
pre[class*='language-'] {
  color: var(--black);
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  tab-size: 4;
  hyphens: none;
}

/* Code blocks */
pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

:not(pre) > code[class*='language-'],
pre[class*='language-'] {
  background: var(--white);
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: var(--gray-500);
}

.namespace {
  opacity: 0.7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: var(--success);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: var(--danger);
}

.token.keyword {
  color: var(--purple);
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* CSS-only tooltip styling */
.tooltip-btn {
  position: relative;
}

/* Default tooltip (top) */
.tooltip-btn .tooltip {
  visibility: hidden;
  width: auto;
  max-width: 200px;
  background-color: #403d39;
  color: #fff;
  font-weight: 400;
  font-size: 0.825rem;
  text-align: center;
  border-radius: 0.25rem;
  padding: 0.25rem 0.5rem;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.875rem;
  font-family: var(--font-family-body);
  white-space: nowrap;
}

/* Tooltip arrow pointing down (for top position) */
.tooltip-btn .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #403d39 transparent transparent transparent;
}

/* Bottom positioned tooltip */
.tooltip-btn.tooltip-bottom .tooltip {
  bottom: auto;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
}

/* Tooltip arrow pointing up (for bottom position) */
.tooltip-btn.tooltip-bottom .tooltip::after {
  top: auto;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #403d39 transparent;
}

/* Left positioned tooltip */
.tooltip-btn.tooltip-left .tooltip {
  bottom: 50%;
  right: 125%;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
}

/* Tooltip arrow pointing right (for left position) */
.tooltip-btn.tooltip-left .tooltip::after {
  top: 50%;
  bottom: auto;
  left: auto;
  right: 100%;
  margin-top: -5px;
  margin-left: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #403d39;
}

.tooltip-btn:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

pre[class*='language-'].line-numbers {
  position: relative;
  padding-left: 2.5em;
  counter-reset: linenumber;
}

pre[class*='language-'].line-numbers > code {
  position: relative;
  white-space: inherit;
}

.line-numbers .line-numbers-rows {
  position: absolute;
  pointer-events: none;
  top: 0;
  font-size: 100%;
  left: -3.8em;
  width: 3em; /* works for line-numbers below 1000 lines */
  letter-spacing: -1px;
  user-select: none;
}

.line-numbers-rows > span {
  pointer-events: none;
  display: block;
  counter-increment: linenumber;
}

.line-numbers-rows > span:before {
  content: counter(linenumber);
  color: var(--gray-400);
  display: block;
  padding-right: 0.8em;
  text-align: right;
}