/* ==========================================================
   LAYOUT WIDTHS
   ========================================================== */
@media (min-width: 576px) { .container-sm, .container { max-width: 96% !important; } }
@media (min-width: 768px) { .container-md, .container-sm, .container { max-width: 96% !important; } }
@media (min-width: 992px) { .container-lg, .container-md, .container-sm, .container { max-width: 96% !important; } }
@media (min-width: 1200px) { .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 96% !important; } }
@media (min-width: 1400px) { .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container { max-width: 96% !important; } }

@media (min-width: 768px) { .col-md-10 { width: 100% !important; flex: 0 0 auto !important; } }
@media (min-width: 992px) { .col-lg-8 { width: 100% !important; flex: 0 0 auto !important; } }
@media (min-width: 1200px) { .col-xl-7 { width: 100% !important; flex: 0 0 auto !important; } }

/* ==========================================================
   MASTHEAD
   ========================================================== */
header.masthead {
  padding-top: 6rem;
  padding-bottom: 6rem;
  background-color: #212529; /* fallback */
  position: relative; /* needed for ::after overlay */
}
header.masthead::before { display: none; }

@media (min-width: 992px) {
  header.masthead { padding-top: 7rem; padding-bottom: 7rem; }
}

/* Dark overlay for readability */
header.masthead::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15));
  z-index: 1;
}
header.masthead .page-heading,
header.masthead .post-heading {
  position: relative;
  z-index: 2;
}
header.masthead .post-heading h1,header.masthead .post-heading .subheading,header.masthead .post-heading .meta,header.masthead .container .site-heading h1{
  color:#fff !important;
  text-shadow: 0 4px 8px rgba(0,0,0,1);
/* spacing between brand and first item */
}

/* ==========================================================
   NAVBAR
   ========================================================== */
#mainNav {
  transition: background 0.3s ease, color 0.3s ease;
}
#mainNav.is-fixed {
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
#navbarResponsive{
	margin-left:1rem;
}
/* Base nav appearance */
#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-item .nav-link {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  padding: 1rem 0 !important;
  color: #d9d9d9 !important;  /* soft neutral tone */
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}



/* ==========================================================
   NAVBAR REFINEMENT — SPACING + SOFTER HOVER
   ========================================================== */

/* Slightly more breathing room between menu items */
@media (min-width: 992px) {
  #navbarResponsive .navbar-nav {
    align-items: center;
    gap: 2rem; /* was 0.25rem */
  }
}

/* Hover: faint, clean highlight — no glow burst */
#mainNav .navbar-nav .nav-item .nav-link:hover,
#mainNav .navbar-brand:hover {
  color: #ffffff !important;
  text-shadow: 0 0 4px rgba(255,255,255,1); /* subtle light trace only */
}

/* ==========================================================
   NAVBAR FIX — SCROLL (WHITE STATE)
   ========================================================== */

/* background on scroll */
#mainNav.is-fixed {
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* text color change when fixed */
#mainNav.is-fixed .navbar-brand,
#mainNav.is-fixed .navbar-nav .nav-item .nav-link {
  color: #333 !important;            /* dark grey for readability */
  text-shadow: none !important;      /* remove dark blur */
}

/* hover while fixed (use Bordeaux accent) */
#mainNav.is-fixed .navbar-brand:hover,
#mainNav.is-fixed .navbar-nav .nav-item .nav-link:hover {
  color: #8e2221 !important;         /* subtle accent */
  text-shadow: none !important;
}

/* smooth transition between banner and fixed state */
#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-item .nav-link {
  transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
}


/* ==========================================================
   GLOBAL LINKS (CONTENT)
   ========================================================== */
a, a:visited {
  color: #8e2221;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
a:hover, a:focus {
  color: #c1443b;
  text-decoration: none !important;
}

.post-preview > a,
.post-preview > a:visited,
.post-content a,
.article-content a {
  color: #8e2221;
  text-decoration: none !important;
}
.post-preview > a:hover,
.post-content a:hover,
.article-content a:hover {
  color: #c1443b;
  text-decoration: none !important;
}

/* ==========================================================
   NOTICES (converted from Grav ! / !! / !!! syntax)
   ========================================================== */
.notice {
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-left: 4px solid;
  border-radius: 4px;
}
.notice p { margin-bottom: 0.5rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-info { border-color: #f0ad4e; background: #fcf8e3; }
.notice-warning { border-color: #d9534f; background: #f2dede; }
.notice-note { border-color: #5cb85c; background: #dff0d8; }

/* ==========================================================
   VIDEO EMBEDS
   ========================================================== */
.video-container {
  text-align: center;
  margin: 1.5rem 0;
}
.video-container video {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ==========================================================
   MERMAID DIAGRAMS
   ========================================================== */
.mermaid {
  text-align: center;
  margin: 2rem 0;
}