:root {
  /* Accordion Colors */
  --ghb-body-color: #000000; /* bs-accordion-color bs-accordion-btn-color */
  --ghb-body-bg: rgb(255, 255, 255); /* --bs-accordion-bg */
  --ghb-border-color: rgb(226, 226, 226); /* bs-accordion-border-color */
  --ghb-accordion-btn-focus-border-color: #87cefa; /* originally #86b7fe */
  --ghb-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* 0 0 0 0.25rem rgba(13, 110, 253, 0.25) */
  --ghb-accordion-active-color: #0a58ca; /* originally --bs-primary-text #0a58ca */
  --ghb-accordion-active-bg: #cfe2ff; /* Original #cfe2ff light transparent blue --bs-primary-bg-subtle  */

  /* Accordion Icon Replacements */
  --ghb-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'><path fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/></svg>");
  --ghb-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230a58ca'><path fill-rule='evenodd' d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/></svg>");
  /* Accordion Icon Width */
  --ghb-accordion-btn-icon-width: 1.875rem; /* bs-accordion-btn-icon-width */

  /* Test */
  --ghb-dark-color: #1b1b1b;
  --ghb-light-color: #dedede;
  --ghb-light-grey: #7a7a7a;

  /* Test HSV */
  --ghb-orange-color-rgb: rgb(255, 153, 59);
  --ghb-orange-color-hs1: hsl(29, 100%, 62%);
  --ghb-orange-color-hs1-darker: hsl(29, 100%, 52%);
  --ghb-orange-color-hs1-darkest: hsl(29, 100%, 42%);
}

.accordion-ghb {
  --bs-accordion-color: var(--ghb-body-color);
  --bs-accordion-bg: var(--ghb-body-bg);
  --bs-accordion-transition: color 0.15s ease-in-out,
    background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--ghb-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(
    var(--bs-border-radius) - (var(--bs-border-width))
  );
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--ghb-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: var(--ghb-accordion-btn-icon);
  --bs-accordion-btn-icon-width: var(--ghb-accordion-btn-icon-width);
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: var(--ghb-accordion-btn-active-icon);
  --bs-accordion-btn-focus-border-color: var(
    --ghb-accordion-btn-focus-border-color
  );
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

body::before {
  display: block;
  content: "";
  height: 60px;
}

#map {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

#illustration {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}
/*#skills {
  align-items: center;
}*/

@media (min-width: 768px) {
  .news-input {
    width: 50%;
  }
}
/* === Scoped styles for dev.html === */
.dev-section .card-title {
  font-weight: 600;
  color: #000;
}

.dev-section .card-text {
  color: #000;
}

.dev-section .card img {
  max-width: 60px;
  height: auto;
}

.dev-section a.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* ===== Blog Article (Graticules & Grids) =====
   Add this block at the bottom of assets/css/styles.css
   Everything is scoped to .blog-article to avoid bleed.
================================================== */

.blog-article {
  color: #111;
}

.blog-article .lead {
  max-width: 70ch;
  margin-inline: auto;
}

.blog-article h1,
.blog-article h2,
.blog-article h3,
.blog-article h4,
.blog-article h5,
.blog-article h6 {
  color: #0b1220;
  scroll-margin-top: 6rem; /* fixed navbar offset for in-page anchors */
}

.blog-article p {
  line-height: 1.75;
  margin-bottom: 1rem;
}

.blog-article a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-article a:hover {
  text-decoration-thickness: 2px;
}

/* Hero / header image */
.blog-article .article-hero img,
.blog-article .article-img,
.blog-article figure img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Figures & captions */
.blog-article figure {
  margin: 1.25rem 0 1.75rem;
}

.blog-article figcaption {
  color: #6c757d;
  font-size: 0.925rem;
  margin-top: 0.5rem;
  text-align: center;
}

/* Inline code & code blocks (light theme friendly) */
.blog-article :not(pre) > code {
  background: #f6f8fa;
  border: 1px solid #e9ecef;
  padding: 0.15rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.925em;
}

.blog-article pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
}

/* Lists spacing */
.blog-article ul,
.blog-article ol {
  padding-left: 1.25rem;
  margin-bottom: 1rem;
}

.blog-article li + li {
  margin-top: 0.35rem;
}

/* Callouts / notes (use .callout + a variant) */
.blog-article .callout {
  border-left: 0.3rem solid var(--bs-primary);
  background: #f8f9fa;
  padding: 1rem 1rem 1rem 1rem;
  border-radius: 0.375rem;
  margin: 1rem 0 1.25rem;
}

.blog-article .callout.callout-info {
  border-left-color: var(--bs-info);
  background: rgba(13, 202, 240, 0.06);
}

.blog-article .callout.callout-warning {
  border-left-color: var(--bs-warning);
  background: rgba(255, 193, 7, 0.08);
}

.blog-article .callout.callout-success {
  border-left-color: var(--bs-success);
  background: rgba(25, 135, 84, 0.08);
}

/* Small “tag” badges row (use .tag-list with .badge) */
.blog-article .tag-list .badge {
  margin-right: 0.35rem;
  margin-bottom: 0.35rem;
}

/* Simple table polish (inherits Bootstrap table styles) */
.blog-article table {
  margin: 1rem 0 1.5rem;
}

.blog-article table th {
  background: #f8f9fa;
}

/* Optional: sticky TOC (if you add a sidebar TOC) */
@media (min-width: 992px) {
  .blog-article .toc-sticky {
    position: sticky;
    top: 6.5rem; /* below fixed navbar */
  }
}

/* Add a smooth zoom effect on hover for blog images */
.blog-img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.blog-img:hover {
  transform: scale(1.05); /* Slight zoom */
  filter: brightness(1.1); /* Brighten a bit */
  cursor: pointer;
}