html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Override Bootstrap's focus ring to use brand primary */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(48, 113, 242, 0.45);
}

/* Accent button — replaces btn-primary across the public site */
.btn-accent {
    --bs-btn-color:              var(--brand-dark);
    --bs-btn-bg:                 var(--brand-accent);
    --bs-btn-border-color:       var(--brand-accent);
    --bs-btn-hover-color:        var(--brand-dark);
    --bs-btn-hover-bg:           #b5e8b4;
    --bs-btn-hover-border-color: #b5e8b4;
    --bs-btn-active-color:       var(--brand-dark);
    --bs-btn-active-bg:          #b5e8b4;
    --bs-btn-active-border-color:#b5e8b4;
    --bs-btn-disabled-color:     var(--brand-dark);
    --bs-btn-disabled-bg:        var(--brand-accent);
    --bs-btn-disabled-border-color: var(--brand-accent);
    --bs-btn-focus-shadow-rgb:   202, 242, 201;
}

html {
  position: relative;
  min-height: 100%;
  /* White background + grain live here so body::before/after
     (z-index:-1) render above this and are visible through
     body's transparent background                            */
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  background-repeat: repeat;
}


/* Override Bootstrap placeholder color */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: rgba(20, 50, 89, 0.4);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}


/* ═══════════════════════════════════════════════════════════════
   Atmospheric background — grain + ambient blobs
   .site-ambient is a real DOM element (first child of body) so
   z-index layering works reliably across all browsers.
   ═══════════════════════════════════════════════════════════════ */

body { background: transparent; }

/* Fixed full-viewport layer, sits below all content */
.site-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;          /* behind all in-flow body content   */
    pointer-events: none;
    overflow: hidden;
}

/* Blob 1 — brand primary blue, upper-left */
.site-ambient::before {
    content: '';
    position: absolute;
    top: -15%;
    left: -10%;
    width: 65%;
    height: 65%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(48, 113, 242, 0.13) 0%,
        rgba(48, 113, 242, 0.04) 50%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(64px);
    will-change: transform;
    animation: site-blob-1 34s ease-in-out infinite alternate;
}

/* Blob 2 — brand light blue, lower-right */
.site-ambient::after {
    content: '';
    position: absolute;
    bottom: -15%;
    right: -10%;
    width: 55%;
    height: 55%;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(137, 194, 217, 0.11) 0%,
        rgba(48,  113, 242, 0.03) 50%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
    animation: site-blob-2 42s ease-in-out infinite alternate;
}

/* Transform-only keyframes — GPU composited, zero layout repaints */
@keyframes site-blob-1 {
    0%   { transform: translate(0,    0)   scale(1);    }
    30%  { transform: translate(3vw,  5vh) scale(1.05); }
    60%  { transform: translate(1vw,  8vh) scale(0.97); }
    100% { transform: translate(5vw,  3vh) scale(1.04); }
}

@keyframes site-blob-2 {
    0%   { transform: translate(0,     0)    scale(1);    }
    30%  { transform: translate(-3vw, -4vh)  scale(1.04); }
    60%  { transform: translate(-1vw, -7vh)  scale(0.96); }
    100% { transform: translate(-4vw, -2vh)  scale(1.03); }
}

/* Honour OS reduce-motion preference */
@media (prefers-reduced-motion: reduce) {
    .site-ambient::before,
    .site-ambient::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Dark Mode — toggled via html.dark-mode (navbar icon + localStorage)
   ═══════════════════════════════════════════════════════════════ */
html { transition: background-color .5s ease; }

html.dark-mode {
    background-color: #060000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
html.dark-mode body { color: #d0d0d0; }

html.dark-mode .site-ambient::before {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(139,0,0,.22) 0%, rgba(100,0,0,.06) 50%, transparent 70%);
}
html.dark-mode .site-ambient::after {
    background: radial-gradient(ellipse at 50% 50%,
        rgba(80,0,0,.14) 0%, rgba(50,0,0,.04) 50%, transparent 70%);
}

/* General text */
html.dark-mode h1 { color: #eee !important; }
html.dark-mode h2 { color: #eee !important; }
html.dark-mode h3 { color: #ddd !important; }
html.dark-mode p  { color: #aaa; }
html.dark-mode a  { color: #cc3333; }
html.dark-mode a:hover { color: #ff4444; }
html.dark-mode .text-muted { color: #777 !important; }

/* Dark mode toggle button */
.btn-dm-toggle {
    background: none;
    border: none;
    color: rgba(255,255,255,.7);
    cursor: pointer;
    padding: 0 .4rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .18s ease, background .18s ease;
    min-height: 44px;
    min-width: 36px;
}
.btn-dm-toggle:hover { color: #fff; background: rgba(255,255,255,.08); }
/* Headshot overlay in dark mode */
.js-headshot-wrap {
    position: relative;
    display: block;
    line-height: 0;
    overflow: hidden;
}
.js-headshot-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    transition: background .5s ease;
}
html.dark-mode .js-headshot-wrap::after {
    background: rgba(60, 0, 0, 0.45);
}
html.dark-mode .js-headshot {
    content: url('/images/sithgabriel.png');
}

html.dark-mode .btn-dm-toggle { color: rgba(255,80,80,.9); }
html.dark-mode .btn-dm-toggle:hover { color: #ff4444; background: rgba(139,0,0,.22); }
html.dark-mode .btn-dm-toggle #dm-sun {
    filter: drop-shadow(0 0 4px rgba(255,100,100,.7));
    animation: dm-sun-pulse 2.4s ease-in-out infinite;
}
@keyframes dm-sun-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255,80,80,.5)); }
    50%       { filter: drop-shadow(0 0 7px rgba(255,60,60,.9)); }
}

/* ── Navbar ── */
html.dark-mode .site-navbar {
    background-color: #0a0000 !important;
    border-bottom: 1px solid #4a0000;
}
html.dark-mode .site-navbar a.nav-link::before { background: #cc0000 !important; }
html.dark-mode .btn-nav-primary { background-color: #8b0000 !important; color: #fff !important; }
html.dark-mode .btn-nav-primary:hover { background-color: #6b0000 !important; color: #fff !important; }

/* ── Footer ── */
html.dark-mode .site-footer { background-color: #0a0000 !important; }
html.dark-mode .site-footer::before {
    background: linear-gradient(90deg,
        transparent 0%, rgba(139,0,0,.55) 30%,
        rgba(200,0,0,.65) 50%, rgba(139,0,0,.55) 70%,
        transparent 100%) !important;
}
html.dark-mode .footer-col-heading { color: #cc0000 !important; }
html.dark-mode .footer-tagline { color: rgba(255,255,255,.5) !important; }
html.dark-mode .footer-status {
    background: rgba(139,0,0,.12) !important;
    border-color: rgba(139,0,0,.35) !important;
    color: #cc3333 !important;
}
html.dark-mode .footer-status-dot { background: #cc0000 !important; }
html.dark-mode .footer-cta {
    background: rgba(139,0,0,.08) !important;
    border-color: rgba(139,0,0,.25) !important;
}
html.dark-mode .footer-cta-btn { background: #8b0000 !important; color: #fff !important; }
html.dark-mode .footer-divider { border-color: rgba(255,255,255,.06) !important; }
html.dark-mode .footer-social a:hover {
    background: rgba(139,0,0,.25) !important;
    border-color: rgba(180,0,0,.5) !important;
}

/* ── Bootstrap form elements ── */
html.dark-mode .form-control,
html.dark-mode .form-select {
    background-color: #150000;
    border-color: #4a0000;
    color: #d0d0d0;
}
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus {
    background-color: #1a0000;
    border-color: #8b0000;
    box-shadow: 0 0 0 3px rgba(139,0,0,.2);
    color: #d0d0d0;
}
html.dark-mode .form-control::placeholder { color: #664444; }
html.dark-mode .form-label { color: #999 !important; }
html.dark-mode .btn-outline-secondary { color: #999; border-color: #4a0000; }
html.dark-mode .btn-outline-secondary:hover { background-color: #1a0000; color: #ccc; }

/* ── Section chrome ── */
html.dark-mode .section-eyebrow { color: #cc0000 !important; }
html.dark-mode .section-title   { color: #fff !important; }
html.dark-mode .section-divider { background: #330000 !important; }

/* ── Hero (Index) ── */
html.dark-mode .hero-full { background-color: #1a0000 !important; }
html.dark-mode .hero-full .btn:not(.btn-outline-light) { background: #8b0000 !important; color: #fff !important; border-color: #8b0000 !important; }

/* ── Index: featured + grid article cards ── */
html.dark-mode .featured-card,
html.dark-mode .grid-card { background: #0d0000 !important; border-color: #4a0000 !important; }
html.dark-mode .featured-card:hover,
html.dark-mode .grid-card:hover { box-shadow: 0 8px 32px rgba(139,0,0,.3) !important; }
html.dark-mode .featured-title,
html.dark-mode .grid-title { color: #cc0000 !important; }
html.dark-mode .featured-title:hover,
html.dark-mode .grid-title:hover { color: #ff4444 !important; }
html.dark-mode .featured-summary,
html.dark-mode .grid-summary { color: #888 !important; }
html.dark-mode .category-pill {
    background: rgba(180,0,0,.15) !important;
    color: #cc3333 !important;
    border-color: rgba(180,0,0,.2) !important;
}
html.dark-mode .featured-label { background: #8b0000 !important; color: #fff !important; }
html.dark-mode .date-tag  { color: #664444 !important; }
html.dark-mode .read-cta  { color: #cc0000 !important; }
html.dark-mode .read-cta:hover { color: #ff4444 !important; }

/* ── Index: author card ── */
html.dark-mode .author-card  { background: #0a0000 !important; border-color: #8b0000 !important; }
html.dark-mode .author-name  { color: #cc0000 !important; }
html.dark-mode .author-role  { color: #ff4444 !important; }
html.dark-mode .author-bio   { color: #999 !important; }
html.dark-mode .author-right { border-color: #8b0000 !important; }
html.dark-mode .topic-pill {
    background: rgba(180,0,0,.15) !important;
    color: #cc3333 !important;
    border-color: rgba(180,0,0,.3) !important;
}
html.dark-mode .author-cta { background: #8b0000 !important; color: #fff !important; }
html.dark-mode .author-social-link {
    background: rgba(139,0,0,.15) !important;
    border-color: rgba(139,0,0,.4) !important;
    color: #cc3333 !important;
}

/* ── Index: service cards ── */
html.dark-mode .svc-card { background: #0d0000 !important; border-color: #4a0000 !important; }
html.dark-mode .svc-card::before { background: #8b0000 !important; }
html.dark-mode .svc-card:hover { box-shadow: 0 8px 32px rgba(139,0,0,.3) !important; border-color: #6b0000 !important; }
html.dark-mode .svc-name { color: #fff !important; }
html.dark-mode .svc-desc { color: #888 !important; }
html.dark-mode .svc-cta  { color: #cc0000 !important; }
html.dark-mode .svc-card:hover .svc-cta { color: #ff4444 !important; }
html.dark-mode .svc-icon-wrap { background: rgba(139,0,0,.2) !important; color: #cc3333 !important; }

/* ── Articles list page ── */
html.dark-mode .article-card { background: #0d0000 !important; border-color: #4a0000 !important; }
html.dark-mode .article-card:hover { box-shadow: 0 8px 28px rgba(139,0,0,.25) !important; }
html.dark-mode .article-card-body { border-left-color: #8b0000 !important; }
html.dark-mode .article-card-thumb-placeholder { background: #1a0000 !important; }
html.dark-mode .article-title { color: #cc0000 !important; }
html.dark-mode .article-title:hover { color: #ff4444 !important; }
html.dark-mode .article-summary { color: #888 !important; }
html.dark-mode .article-date   { color: #664444 !important; }
html.dark-mode .filter-section { border-color: #330000 !important; }
html.dark-mode .filter-label   { color: #664444 !important; }
html.dark-mode .filter-control {
    background: #150000 !important;
    border-color: #4a0000 !important;
    color: #d0d0d0 !important;
}
html.dark-mode .filter-control:focus {
    border-color: #8b0000 !important;
    box-shadow: 0 0 0 3px rgba(139,0,0,.2) !important;
}
html.dark-mode .filter-reset { color: #664444 !important; }
html.dark-mode .filter-reset:hover { color: #cc3333 !important; }
html.dark-mode .btn-accent {
    --bs-btn-bg:                 #8b0000;
    --bs-btn-border-color:       #8b0000;
    --bs-btn-hover-bg:           #6b0000;
    --bs-btn-hover-border-color: #6b0000;
    --bs-btn-active-bg:          #6b0000;
    --bs-btn-active-border-color:#6b0000;
    --bs-btn-color:              #fff;
    --bs-btn-hover-color:        #fff;
    --bs-btn-active-color:       #fff;
}
@media (max-width: 575.98px) {
    html.dark-mode .article-card-body { border-top-color: #8b0000 !important; }
}

/* ── Article detail page ── */
html.dark-mode .article-dateline { color: #664444 !important; }
html.dark-mode .article-content h2,
html.dark-mode .article-content h3 { color: #cc3333 !important; }
html.dark-mode .article-content p,
html.dark-mode .article-content ul,
html.dark-mode .article-content ol  { color: #aaa !important; }
html.dark-mode .article-content pre  { background: #150000 !important; }
html.dark-mode .article-content code { color: #ff6666 !important; }
html.dark-mode .sidebar-heading { color: #664444 !important; border-color: #330000 !important; }
html.dark-mode .recent-item  { border-color: #250000 !important; }
html.dark-mode .recent-thumb-placeholder,
html.dark-mode .recent-card-thumb-placeholder { background: #1a0000 !important; }
html.dark-mode .recent-link  { color: #cc0000 !important; }
html.dark-mode .recent-link:hover { color: #ff4444 !important; }
html.dark-mode .recent-cat   {
    background: rgba(180,0,0,.15) !important;
    color: #cc3333 !important;
    border-color: rgba(180,0,0,.2) !important;
}
html.dark-mode .recent-date  { color: #664444 !important; }
html.dark-mode .recent-card-mobile { background: #0d0000 !important; border-color: #4a0000 !important; }
html.dark-mode .recent-card-body   { border-left-color: #8b0000 !important; }
html.dark-mode .author-card-name   { color: #cc0000 !important; }
html.dark-mode .author-card-bio    { color: #888 !important; }
html.dark-mode .author-card-avatar-initials { background: #1a0000 !important; }
html.dark-mode .comment-form-card  { background: #0d0000 !important; border-color: #4a0000 !important; }
html.dark-mode .comment-form-title { color: #664444 !important; }
html.dark-mode .comment-item  { border-color: #250000 !important; }
html.dark-mode .comment-reply { background: #120000 !important; }
html.dark-mode .comment-author  { color: #cc3333 !important; }
html.dark-mode .comment-content { color: #aaa !important; }
html.dark-mode .comment-date    { color: #664444 !important; }
html.dark-mode .comments-section { border-color: #330000 !important; }
html.dark-mode .comments-heading { color: #cc0000 !important; }
html.dark-mode .summary-panel   { background: #0d0000 !important; }
html.dark-mode .summary-panel-header { border-color: #330000 !important; }
html.dark-mode .summary-panel-title  { color: #cc0000 !important; }
html.dark-mode .summary-overlay { background: rgba(60,0,0,.85) !important; }
html.dark-mode .summary-text    { color: #aaa !important; }

/* ── Contact page ── */
html.dark-mode .social-card { background: #0d0000 !important; border-color: #4a0000 !important; }
html.dark-mode .social-card:hover { box-shadow: 0 6px 20px rgba(139,0,0,.2) !important; }
html.dark-mode .social-card-icon { background: rgba(139,0,0,.2) !important; }
html.dark-mode .social-card-icon svg { fill: #cc3333 !important; }
html.dark-mode .social-card-label { color: #cc3333 !important; }
html.dark-mode .social-card-handle { color: #aaa !important; }
html.dark-mode #contact-form .btn { background: #8b0000 !important; color: #fff !important; border-color: #8b0000 !important; }

/* ── About page ── */
html.dark-mode .about-logo     { filter: brightness(0) invert(1) !important; }
html.dark-mode .tech-badge     { background-color: #1a0000 !important; color: #cc3333 !important; border-color: #4a0000 !important; }
html.dark-mode .highlight-item { border-left-color: #8b0000 !important; }

/* ── Services page ── */
html.dark-mode .services-hero,
html.dark-mode .cta-band {
    background: linear-gradient(135deg, #1a0000 0%, #2d0000 100%) !important;
}
html.dark-mode .hero-badge {
    background: rgba(139,0,0,.2) !important;
    border-color: rgba(180,0,0,.4) !important;
    color: #cc3333 !important;
}
html.dark-mode .services-hero a.btn,
html.dark-mode .cta-band a.btn { background: #8b0000 !important; color: #fff !important; }

html.dark-mode .service-card {
    background: #0d0000 !important;
    border-color: #4a0000 !important;
    border-top-color: #8b0000 !important;
}
html.dark-mode .service-card:hover { box-shadow: 0 8px 24px rgba(139,0,0,.28) !important; }
html.dark-mode .service-icon-wrap  { background: rgba(139,0,0,.18) !important; }
html.dark-mode .service-label      { color: #cc3333 !important; }
html.dark-mode .service-benefit    { color: #888 !important; border-left-color: #8b0000 !important; }
html.dark-mode .service-bullets li { color: #999 !important; }
html.dark-mode .service-bullets li::before { color: #cc0000 !important; }
html.dark-mode .service-stat       { background: #1a0000 !important; color: #cc3333 !important; }
html.dark-mode .service-card a.btn { background: #8b0000 !important; color: #fff !important; }
html.dark-mode .how-step-num       { background: #8b0000 !important; }

/* ── Chat widget ── */
html.dark-mode #chat-toggle { background: #8b0000 !important; }
html.dark-mode #chat-toggle:hover { background: #6b0000 !important; }
html.dark-mode #chat-panel { background: #0a0000 !important; }
html.dark-mode #chat-header { background: #1a0000 !important; }
html.dark-mode #chat-messages { background: #0a0000; }
html.dark-mode .chat-msg--assistant { background: #1a0000 !important; color: #d0d0d0 !important; }
html.dark-mode .chat-msg--user { background: #8b0000 !important; color: #fff !important; }
html.dark-mode #chat-form { border-top-color: #330000 !important; background: #0a0000; }
html.dark-mode #chat-input {
    background: #150000 !important;
    border-color: #4a0000 !important;
    color: #d0d0d0 !important;
}
html.dark-mode #chat-input:focus { border-color: #8b0000 !important; box-shadow: none; }
html.dark-mode .chat-chip {
    background: #150000 !important;
    border-color: #8b0000 !important;
    color: #cc3333 !important;
}
html.dark-mode .chat-chip:hover { background: #8b0000 !important; color: #fff !important; }
html.dark-mode #chat-form button[type=submit] { background: #8b0000 !important; }
html.dark-mode #chat-form button[type=submit]:hover { background: #6b0000 !important; }

/* ── TTS player ── */
html.dark-mode .tts-container {
    --tts-bg:         #150000;
    --tts-border:     #4a0000;
    --tts-text:       #d0d0d0;
    --tts-muted:      #664444;
    --tts-accent:     #8b0000;
    --tts-accent-fg:  #fff;
    --tts-accent-hv:  #6b0000;
    --tts-blue:       #cc3333;
    --tts-bar-color:  #cc0000;
}
html.dark-mode .tts-speed { background: #150000 !important; color: #d0d0d0 !important; }
html.dark-mode .tts-listen-btn:hover { box-shadow: 0 4px 14px rgba(139,0,0,.4); }

/* ── Article detail: action buttons ── */
html.dark-mode .summary-btn {
    background: #8b0000 !important;
    border-color: #8b0000 !important;
    color: #fff !important;
}
html.dark-mode .summary-btn:hover {
    background: #6b0000 !important;
    border-color: #6b0000 !important;
    box-shadow: 0 4px 14px rgba(139,0,0,.4) !important;
}
html.dark-mode .summary-close-btn { background: #8b0000 !important; color: #fff !important; }
html.dark-mode .summary-close-btn:hover { background: #6b0000 !important; }

html.dark-mode .share-btn-linkedin,
html.dark-mode .share-btn-whatsapp,
html.dark-mode .share-btn-facebook,
html.dark-mode .share-btn-x,
html.dark-mode .share-btn-instagram { background: #8b0000 !important; color: #fff !important; }

html.dark-mode .comment-form-card .btn { background: #8b0000 !important; color: #fff !important; }
html.dark-mode .btn-reply { color: #cc3333 !important; }