/* ==== Site-wide Bootstrap theme tokens ==== */
:root[data-bs-theme="light"]  {
  --bs-body-bg: #ffffff;
  --bs-body-color: #1f2328;
  --bs-border-color: #e5e7eb;
  --bs-primary: #0d6efd;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: #e5e7eb;

  /* prose (if you use them) */
  --prose-code-bg:#f6f8fa;
  --prose-quote:#6c757d;
}

:root[data-bs-theme="dark"]   {
  --bs-body-bg: #0f1115;
  --bs-body-color: #e6e6e6;
  --bs-border-color: #2b2f36;
  --bs-primary: #7aa2f7;
  --bs-card-bg: #161a20;
  --bs-card-border-color: #2b2f36;

  --prose-code-bg:#1f2328;
  --prose-quote:#adb5bd;
}
/* ==== Interops neutrals (work in both themes) ==== */
:root {
  /* general surfaces / boxes */
  --io-surface:        #f5f5f7;
  --io-surface-soft:   #f0f2f5;
  --io-border-subtle:  #d0d7de;

  /* input-specific */
  --io-input-bg:       #f8f9fb;
  --io-input-border:   #c4ccd6;
}

/* Light theme overrides (optional but explicit) */
:root[data-bs-theme="light"] {
  --io-surface:        #f5f5f7;
  --io-surface-soft:   #f0f2f5;
  --io-border-subtle:  #d0d7de;
  --io-input-bg:       #f8f9fb;
  --io-input-border:   #c4ccd6;
}

/* Dark theme versions so the same classes still look good */
:root[data-bs-theme="dark"] {
  --io-surface:        #181a1f;
  --io-surface-soft:   #20232a;
  --io-border-subtle:  #3a4453;
  --io-input-bg:       #1f2228;
  --io-input-border:   #3f4958;
}


/* ==== Compact dark sidebar/offcanvas that respects your themes ==== */
:root {
  /* menu defaults (used if no theme override) */
  --menu-bg: #0b0c0f;           /* near-black */
  --menu-fg: #d1d5db;           /* light gray */
  --menu-fg-dim: #9aa0a6;       /* dimmer text */
  --menu-active-bg: #1f2937;    /* active pill bg */
  --menu-border: #20242b;       /* dividers */
  --menu-hover: #e5e7eb;        /* hover text */
}

/* Light theme: keep true black sidebar but slightly brighter text */
:root[data-bs-theme="light"] {
  --menu-bg: #0b0c0f;
  --menu-fg: #dfe3e7;
  --menu-fg-dim: #aab2ba;
  --menu-active-bg: #1f2937;
  --menu-border: #20242b;
  --menu-hover: #ffffff;
}

/* Dark theme: align with dark body but keep the sidebar a notch darker */
:root[data-bs-theme="dark"] {
  --menu-bg: #0b0c0f;
  --menu-fg: #d1d5db;
  --menu-fg-dim: #9aa0a6;
  --menu-active-bg: #1f2937;
  --menu-border: #20242b;
  --menu-hover: #e5e7eb;
}
/* Soft, neutral input style that works in both themes */
.form-control.io-soft,
.form-select.io-soft {
  background-color: var(--io-input-bg);
  border-color:     var(--io-input-border);
  color:            var(--bs-body-color);
}

.form-control.io-soft::placeholder,
.form-select.io-soft::placeholder {
  color: var(--bs-secondary-color);
}

/* Focus state */
.form-control.io-soft:focus,
.form-select.io-soft:focus {
  background-color: var(--io-input-bg);
  border-color:     var(--io-border-subtle);
  box-shadow: 0 0 0 0.15rem rgba(88, 133, 204, 0.35); /* tweak if you want */
}

.bg-surface-soft {
  background-color: var(--io-surface-soft) !important;
}

.bg-surface {
  background-color: var(--io-surface) !important;
}

.border-subtle {
  border-color: var(--io-border-subtle) !important;
}

/* sidebar */
/* ---------- Sidebar Info Boxes (icons + accent, tighter type) ---------- */
.info-box.accent.accent-blue  { --sidebar-accent-soft: var(--sidebar-accent-blue-soft);  --sidebar-accent: rgb(var(--sidebar-accent-blue-rgb)); }
.info-box.accent.accent-green { --sidebar-accent-soft: var(--sidebar-accent-green-soft); --sidebar-accent: rgb(var(--sidebar-accent-green-rgb)); }
.info-box.accent.accent-amber { --sidebar-accent-soft: var(--sidebar-accent-amber-soft); --sidebar-accent: rgb(var(--sidebar-accent-amber-rgb)); }
.info-box.accent.accent-red   { --sidebar-accent-soft: var(--sidebar-accent-red-soft);   --sidebar-accent: rgb(var(--sidebar-accent-red-rgb)); }
/* Base tokens (light default) */
:root {
  --sidebar-box-bg: var(--bs-body-bg);
  --sidebar-box-border: var(--bs-border-color);
  --sidebar-box-shadow: 0 1px 3px rgba(0,0,0,.06);
  --sidebar-box-heading: var(--bs-emphasis-color);
  --sidebar-box-text: var(--bs-body-color);
  --sidebar-box-dim: var(--bs-secondary-color);

  /* Accent defaults */
  --sidebar-accent: var(--bs-primary);
  --sidebar-accent-soft: color-mix(in srgb, var(--bs-primary) 12%, transparent);
  /* pull from BS rgb tokens so they auto-switch per theme */
  
  --sidebar-accent-blue-rgb:   var(--bs-primary-rgb);
  --sidebar-accent-green-rgb:  var(--bs-success-rgb);
  --sidebar-accent-amber-rgb:  var(--bs-warning-rgb);
  --sidebar-accent-red-rgb:    var(--bs-danger-rgb);

  /* default soft tint (light) */
  --sidebar-accent-blue-soft:  rgba(var(--sidebar-accent-blue-rgb),  .12);
  --sidebar-accent-green-soft: rgba(var(--sidebar-accent-green-rgb), .12);
  --sidebar-accent-amber-soft: rgba(var(--sidebar-accent-amber-rgb), .14);
  --sidebar-accent-red-soft:   rgba(var(--sidebar-accent-red-rgb),   .12);
}



/* Dark theme */
:root[data-bs-theme="dark"] {
  --sidebar-box-bg: #111418;
  --sidebar-box-border: #222830;
  --sidebar-box-shadow: 0 1px 3px rgba(0,0,0,.35);
  --sidebar-box-heading: #eef2f7;
  --sidebar-box-text: #d6dde6;
  --sidebar-box-dim: #9aa3ad;

  --sidebar-accent-soft: color-mix(in srgb, var(--bs-primary) 18%, transparent);

  --sidebar-accent-blue-soft:  rgba(var(--sidebar-accent-blue-rgb),  .20);
  --sidebar-accent-green-soft: rgba(var(--sidebar-accent-green-rgb), .20);
  --sidebar-accent-amber-soft: rgba(var(--sidebar-accent-amber-rgb), .22);
  --sidebar-accent-red-soft:   rgba(var(--sidebar-accent-red-rgb),   .20);
}


/* ====== Chrome tokens (header/nav/footer) ====== */
:root {
  --chrome-bg: var(--bs-body-bg);
  --chrome-border: var(--bs-border-color);
  --chrome-text: var(--bs-emphasis-color);
  --chrome-dim: var(--bs-secondary-color);

  /* Nav tabs */
  --tabs-bg: var(--bs-body-bg);
  --tabs-border: var(--bs-border-color);
  --tabs-link: var(--bs-body-color);
  --tabs-link-active-bg: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg));
  --tabs-link-active: var(--bs-emphasis-color);
}

:root[data-bs-theme="dark"] {
  --chrome-bg: #111418;
  --chrome-border: #222830;
  --chrome-text: #eef2f7;
  --chrome-dim: #9aa3ad;

  --tabs-bg: #0f1216;
  --tabs-border: #222830;
  --tabs-link: #c9d1db;
  --tabs-link-active-bg: #161a1f;
  --tabs-link-active: #eef2f7;
}

html {
  /* keeps iOS/Android from “helpfully” resizing text */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ====== Header ====== */
header.bg-body,
header { 
  background: var(--chrome-bg) !important;
  border-bottom: 1px solid var(--chrome-border) !important;
  color: var(--chrome-text);
}

header .navbar-brand,
header h1, header h2, header h3, header h4, header h5, header h6 { color: var(--chrome-text); }
header h1 {font-size: 1.75rem}
header small, header .text-muted { color: var(--chrome-dim) !important; }
header .btn.btn-outline-secondary { 
  border-color: var(--chrome-border); 
  color: var(--chrome-text);
}
header .dropdown-menu { background: var(--chrome-bg); border-color: var(--chrome-border); }
header .dropdown-item { color: var(--chrome-text); }
header .dropdown-item:hover { background: color-mix(in srgb, var(--bs-primary) 8%, transparent); }

/* ====== Navigation (Bootstrap nav-tabs) ====== */
.nav.nav-tabs {
  --bs-nav-tabs-border-color: var(--tabs-border);
  --bs-nav-tabs-link-hover-border-color: var(--tabs-border);
  --bs-nav-tabs-link-active-border-color: var(--tabs-border);
  --bs-nav-tabs-link-active-bg: var(--tabs-link-active-bg);
  border-color: var(--tabs-border);
  background: var(--tabs-bg);
  padding: 1px 1px 1px 1px;
  border-radius: .5rem;
  font-size:10px;
}
.nav-tabs .nav-link {
  color: var(--tabs-link);
  border-color: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--tabs-link-active);
  background: color-mix(in srgb, var(--tabs-link-active-bg) 50%, transparent);
  border-color: var(--tabs-border);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:active {
  color: var(--tabs-link-active);
  background: var(--tabs-link-active-bg);
  border-color: var(--tabs-border);
  font-weight: 600;
}
.nav-tabs .nav-link.disabled {
  opacity: .55;
}

/* Tighter, right-sidebar-friendly tabs on small screens */
@media (max-width: 576px) {
  .nav.nav-tabs { padding: .15rem .35rem; }
  .nav-tabs .nav-link { padding: .35rem .5rem; font-size: 10px; }
}

/* ====== Footer ====== */
footer {
  background: var(--chrome-bg);
  border-top: 1px solid var(--chrome-border);
  color: var(--chrome-dim);
}
footer small { color: var(--chrome-dim); }

/* Core box */
.info-box {
  background: var(--sidebar-box-bg);
  border: 1px solid var(--sidebar-box-border);
  border-radius: .7rem;
  padding: .6rem .8rem;                 /* tighter */
  margin-bottom: .75rem;                /* tighter stack */
  box-shadow: var(--sidebar-box-shadow);
  font-size: .84rem;                    /* smaller font */
  line-height: 1.4;                     /* tighter leading */
}
.info-box .theme[data-bs-theme="dark"]  {
  background: blue;
  font-color: green;
}

/* Headings */
.info-box h3 {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;                     /* smaller heading */
  font-weight: 600;
  margin: 0 0 .25rem 0;                 /* tighter */
  color: var(--sidebar-box-heading);
}

/* Optional icon next to h3 */
.info-box h3 .icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  line-height: 0;
  opacity: .9;
}

/* Paragraphs */
.info-box p {
  margin: .2rem 0 0 0;                  /* tighter between sentences/lines */
  color: var(--sidebar-box-text);
}
.info-box p + p { margin-top: .18rem; } /* micro-tight stack */
.info-box p.dim { color: var(--sidebar-box-dim); }

/* Accent-bar variant */
.info-box.accent {
  position: relative;
  border-left: 4px solid var(--sidebar-accent);
  background: linear-gradient(90deg, var(--sidebar-accent-soft), transparent 24%);
  padding-left: .65rem;                 /* reclaim space after accent */
}

/* Quick accent color modifiers */
.info-box.accent.accent-blue   { --sidebar-accent: #3b82f6; }
.info-box.accent.accent-green  { --sidebar-accent: #10b981; }
.info-box.accent.accent-amber  { --sidebar-accent: #f59e0b; }
.info-box.accent.accent-red    { --sidebar-accent: #ef4444; }


.rightbar {
  background: transparent !important;
  color: inherit !important;
  padding: .2rem .2rem;
  font-size: .82rem;
  height: 200dvh;  
}
.rightbar h3 { font-size: .88rem; }

/* Ultra-tight variant for very narrow columns */
.sidebar-tight .info-box {
  padding: .5rem .65rem;
  font-size: .82rem;
}
.sidebar-tight h3 { font-size: .88rem; }

/* Focus ring */
.info-box:focus-within {
  outline: 2px solid color-mix(in srgb, var(--sidebar-box-heading) 28%, transparent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { .info-box { transition: none; } }


/* Containers */
.sidebar-sticky,
.mobile-drawer,
.side-surface {
  background: var(--menu-bg);
  color: var(--menu-fg);
}
/* Make the clickable area full width so the bg is visible */
.sidebar-sticky .nav-link,
.mobile-drawer .nav-link,
.side-surface .nav-link {
  display: block;
}

/* Unified hover/focus/active highlight */
.sidebar-sticky .nav-link:hover,
.sidebar-sticky .nav-link:focus-visible,
.sidebar-sticky .nav-link:active,
.mobile-drawer .nav-link:hover,
.mobile-drawer .nav-link:focus-visible,
.mobile-drawer .nav-link:active,
.side-surface .nav-link:hover,
.side-surface .nav-link:focus-visible,
.side-surface .nav-link:active {
  background-color: rgba(255, 255, 255, .30) !important; /* clear highlight on dark menu */
  color: var(--menu-hover) !important;
  text-decoration: none;
}

/* Links (match desktop) */
.side-surface .nav-link,
.sidebar-sticky .nav-link,
.mobile-drawer .nav-link {
  color: var(--menu-fg-dim);
  font-size: 1.05rem;        /* same as desktop */
  line-height: 1;
  padding: .1rem .1rem;
  border-radius: .35rem;
}

/* Indented submenu items */
.side-surface .collapse .nav-link,
.sidebar-sticky .collapse .nav-link,
.mobile-drawer .collapse .nav-link {
  padding-left: .875rem;
}
/* Hover/active/focus */
.side-surface .nav-link:hover,
.sidebar-sticky .nav-link:hover,
.mobile-drawer .nav-link:hover {
  color: var(--menu-hover);
  background: rgb(255,255,255,.05);
}

.section-row { margin: 0 !important; padding: 0 !important;}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--menu-active-bg) !important;
  background: black;
  color: #FFF;
}

/* Dividers */
.side-surface hr,
.sidebar-sticky hr,
.mobile-drawer hr {
  border-color: var(--menu-border);
  opacity: 1;
  margin: .5rem 0;
}

.section-row .chev { display:inline-block; transition: transform .15s ease; }
.section-row[data-open="true"] .chev { transform: rotate(90deg); }
.chev-wrap { pointer-events: none; } /* purely visual */


.side-surface .chev,
.sidebar-sticky .chev,
.mobile-drawer .chev {
  display: inline-block;
  transition: transform .15s ease;
  font-size: .95rem;
  opacity: .85;
  margin-left: .25rem;
}
/* Drawer width & padding (narrower, stable) */
.mobile-drawer {
  width: min(220px, 84dvw);     /* was wide + white; now compact + themed */
  padding: .75rem;              /* similar to desktop p-2/p-3 */
  /* remove any inherited white backgrounds */
  background: var(--menu-bg) !important;
  color: var(--menu-fg) !important;
}

/* Disabled links */
.nav-link.disabled {
  color: var(--menu-fg-dim) !important;
  opacity: .5 !important;
  cursor: not-allowed;
  pointer-events: none;
}



/* Carousel                          */
.carousel { margin-bottom: 20px; }             /* make room under it */
/* 2) Push indicators below the image panel */
.carousel .carousel-indicators{
  bottom: -28px !important;   /* move them outside the panel */
}
/* Brighter, always-visible dashes */
.carousel .carousel-indicators [data-bs-target]{
  width: 26px; height: 6px; border-radius: 999px;
  background-color: rgba(255,255,255,.35);  /* brighter for inactive */
  border: 1px solid rgba(000,000,000,.9);   /* outline = visibility */
  opacity: 1;                               /* Bootstrap sets .5 */
}
.carousel .carousel-indicators .active{
  background-color: #000;
  border-color: #000;
}

.carousel { background:#000; max-width: 100%;}
.carousel .slide-bg{
/*  height: 50vh; */              /* tweak height */
  min-height: 330px;          /* floor for laptops */
  background-size: cover;
  background-position: 50% 38%;   /* lift focal point if faces are low */
  filter: brightness(1.06) contrast(1.02) saturate(1.05);
}
.carousel-caption{
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
  bottom: -10px !important;  
}
@media (prefers-reduced-motion: reduce){
  .carousel { animation: none; }
}


/* --- Blog Prose Defaults --- */
/* Base text sizing helpers */
html {
  /* keeps iOS/Android from “helpfully” resizing text */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Your prose block, converted to rem */
.prose { max-width: 100%; line-height: 1.25; /* 20px/16px */ color: var(--bs-body-color); }

.prose :where(h1){ line-height:1; margin-top:.2rem; margin-bottom:.5rem; font-weight:600; font-size:1.75rem; } /* 28px */
.prose :where(p,ul,ol,pre,blockquote,table,figure){ margin-top:.5rem; margin-bottom:.5rem; font-size:1rem; } /* 16px */

/* (Optional) keep your other headings consistent too */
.prose :where(h2){ line-height:1; margin-top:1rem; margin-bottom:1rem; font-weight:600; font-size:1.5rem; }   /* 24px */
.prose :where(h3){ line-height:1; margin-top:1rem; margin-bottom:1rem; font-weight:600; font-size:1.25rem; }  /* 20px */
.prose :where(h4){ margin-top:.5rem; margin-bottom:.5rem; font-weight:600; font-size:1.125rem; }              /* 18px */
.prose :where(h5){ margin-top:.5rem; margin-bottom:.5rem; font-weight:600; font-size:1.0625rem; }             /* 17px */
.prose :where(h6){ margin-top:.5rem; margin-bottom:.5rem; font-weight:600; font-size:1rem; }                  /* 16px */

/* (Optional) your fs-* helpers in rem, for consistency */
.prose :where(fs-1){ font-size:1.75rem !important; }  /* 28px */
.prose :where(fs-2){ font-size:1.5rem !important; }   /* 24px */
.prose :where(fs-3){ font-size:1.25rem !important; }  /* 20px */
.prose :where(fs-4){ font-size:1.125rem !important; } /* 18px */
.prose :where(fs-5){ font-size:1.0625rem !important; }/* 17px */
.prose :where(fs-6){ font-size:1rem !important; }     /* 16px */
.prose :where(fs-7){ font-size:.875rem !important; }  /* 14px */
.prose :where(fs-8){ font-size:.75rem !important; }   /* 12px */
.prose :where(fs-9){ font-size:.625rem !important; }  /* 10px */

.prose :where(strong) {font-weight:700;}
.prose :where(a){ color: var(--bs-link-color); text-decoration: underline; text-underline-offset: .15em; }
.prose :where(a:hover){ color: var(--bs-link-hover-color); }

.prose :where(ul,ol){ padding-left: 2rem;display:flow-root;}

.prose :where(blockquote){
  padding-left: .9rem; border-left: .25rem solid var(--bs-border-color);
  color: var(--prose-quote);
  margin-left: 0; margin-right: 0;
}

.prose :where(code){
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em; background: var(--prose-code-bg); padding: .15rem .35rem; border-radius: .35rem;
}
.prose :where(pre){ background: var(--prose-code-bg); border: 1px solid var(--bs-border-color);
  padding: .85rem 1rem; border-radius: .5rem; overflow:auto; }
.prose pre code{ background: transparent; padding:0; border-radius:0; font-size: .95em; }

.prose :where(hr){ border: 0; border-top: 4px solid var(--bs-border-color); margin: 2rem 0; }

.prose :where(img,video){ max-width:100%; height:auto; border-radius: .5rem; }
.prose :where(figure){ text-align:center; }
.prose :where(figcaption){ color: var(--bs-secondary-color); font-size: .9rem; margin-top:.5rem; }

.prose :where(table){ width:100%; border-collapse: collapse; }
.prose :where(th,td){ padding:.5rem .75rem; border-top:1px solid var(--bs-border-color); }
.prose :where(thead th){ border-bottom:2px solid var(--bs-border-color); font-weight:750; }

.prose :where(section){ margin-block: 1rem; scroll-margin-top: 5rem; } /* nicer anchored headings */
.prose :where(article>header .meta){ color: var(--bs-secondary-color); font-size:.9rem; margin-top:.25rem; }
.prose :where(article>footer){ margin-top:2rem; color: var(--bs-secondary-color); font-size:.9rem; }
article.prose section + section { margin-top: 2rem; }


/* optional: tag chips for blog footers */
.prose :where(.tag){ display:inline-block; padding:.2rem .55rem; border-radius:999px;
  background: var(--bs-secondary-bg); color: var(--bs-secondary-color); margin-right:.4rem; }


@media (max-width: 576px){
  .prose :where(h1){ font-size:1.5rem; }  /* 24px */
  .prose :where(p){ font-size:.95rem; }   /* ~15px */
  .prose :where(p,ul,ol,pre,blockquote,table,figure){ font-size:.95rem; } /* 15px */
  .prose :where(code,pre,figcaption){ font-size:.75rem;}
}

/* override prose for breadcrumb only */
nav[aria-label="breadcrumb"] .breadcrumb-item { display: inline-flex; align-items: center; }
nav[aria-label="breadcrumb"] .breadcrumb { white-space: nowrap; }


.list-block { display: flow-root; }  /* modern, no layout hacks */

figure.img-left  { float:left;  margin:0 1rem 1rem 0; }
figure.img-right { float:right; margin:0 0 1rem 1rem; }
figure.img-center { margin-left:auto; margin-right:auto; text-align:center; }
figure img { max-width:100%; height:auto; display:block; }
figcaption { font-size:.9rem; opacity:.8; margin-top:.25rem; }

/***********************************/
/* Callout base */
.callout{
  --cbg: var(--bs-body-bg, #fff);
  --cbd: var(--bs-border-color, #e2e8f0);
  --ctxt: var(--bs-body-color, #0f172a);
  --cpill: rgba(0,0,0,.04);
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.75rem .9rem; border:1px solid var(--cbd);
  border-radius:.75rem; background:var(--cbg); color:var(--ctxt);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.callout .callout-icon{
  display:inline-flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:2rem; height:2rem; border-radius:999px;
  background:var(--cpill); color:inherit;
}
.callout .callout-title{ font-weight:600; }
.callout .callout-body{ min-width:0; }

/* Sizes */
.callout-sm{ padding:.6rem .75rem; }
.callout-sm .callout-icon{ width:1.6rem; height:1.6rem; }
.callout-lg{ padding:1rem 1.1rem; }
.callout-lg .callout-icon{ width:2.2rem; height:2.2rem; }

/* Themes (you can mix with inline CSS vars) */
.callout-info{
  --cbg: #eef6ff; --cbd:#cfe8ff; --ctxt:#0b3b71; --cpill: rgba(11,59,113,.1);
}
.callout-success{
  --cbg: #eefcf3; --cbd:#c9f0d8; --ctxt:#0b5a33; --cpill: rgba(11,90,51,.1);
}
.callout-warning{
  --cbg: #fff7e6; --cbd:#ffe3b5; --ctxt:#7a4c00; --cpill: rgba(122,76,0,.12);
}
.callout-danger{
  --cbg: #fff1f1; --cbd:#ffd4d4; --ctxt:#7a1020; --cpill: rgba(122,16,32,.1);
}

/* Responsive float helpers (Bootstrap already has .float-start/.float-end) */
@media (max-width: 576px){
  .callout.float-end, .callout.float-start{ float:none !important; margin-left:0; margin-right:0; }
}

/***********************************/

/* robust, independent of DOM depth */
.help-note { border-top-color: var(--bs-border-color) !important; }
.help-note a { color: var(--bs-secondary-color); }
.help-note a:hover { color: var(--bs-link-hover-color); }


/* Helpers */
.w-33{width:33%}
.w-40{width:40%}
.w-45{width:45%}
.w-160{width:160px;}
.w-240{width:240px;} .w-280{width:280px;} .w-320{width:320px;}
.w-360{width:360px;} .w-420{width:420px;} .w-560{width:560px;}
.w-640{width:640px;} .w-720{width:720px;}

/* responsive “from breakpoint up” helpers */
@media (min-width: 768px){  /* md */
  .w-md-320{width:320px;} .w-md-420{width:420px;}
  .w-md-560{width:560px;}
}
@media (min-width: 992px){  /* lg */
  .w-lg-560{width:560px;} .w-lg-640{width:640px;} .w-lg-720{width:720px;}
}
/* responsive max-width helpers */
.mw-360{ max-width:360px; }
.mw-480{ max-width:480px; }
.mw-560{ max-width:560px; }
.mw-640{ max-width:640px; }
.mw-720{ max-width:720px; }
.mw-992{ max-width:992px; }

/* responsive variants */
@media (min-width: 576px){ /* sm */
  .mw-sm-560{ max-width:560px; }
}
@media (min-width: 768px){ /* md */
  .mw-md-640{ max-width:640px; }
}
@media (min-width: 992px){ /* lg */
  .mw-lg-720{ max-width:720px; }
}

/* mobile 75%, desktop 50% (md+) */
.responsive-width { width: 75%; }
@media (min-width: 768px) {
  .responsive-width { width: 50%; }
}


/* main html/body */
html {
  background-color: var(--bs-body-bg);
  display: flex;
  place-items: center;
  margin: auto;
}
body {
  background-color: var(--bs-body-bg);
}

html, body { min-height: 100%; height: auto; overflow-y: auto; }
html, body, #root { overflow-x: hidden; } 			/* prevent accidental horizontal scroll on small screens */
body {max-width:100%;}
main { min-width: 0;  } 												/* main column: allow children to shrink */
.sidebar-sticky { position: sticky; top: 0; }
.sidebar-sticky .collapse .nav .nav-link,
  .side-surface .collapse .nav-link { font-size: .95rem; }
.nav-link.disabled { opacity: .6; cursor: not-allowed; }


/* Desktop-only sidebar behavior */
@media (min-width: 992px) {
  /* Stick to viewport and actually own a height */
  .sidebar-sticky {
    position: sticky;
    top: 0;
    height: 200dvh;           /* not h-100; this is the real viewport height */
  }

  /* Two rows: toolbar (auto) + menu (1fr). Keeps your existing .side-surface look */
  .sidebar-sticky .side-surface {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    min-height: 0;            /* critical so the 1fr row can shrink and scroll */
  }

  /* Only the nav area scrolls */
  .sidebar-sticky .side-surface > .side-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;            /* critical */
    overflow-anchor: none;   /* don't snap up/top on expand */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;      /* ⟵ stop multi-column wrap */
    align-items: stretch;   /* ⟵ each child takes full width */	
    scroll-behavior: smooth; /* nice auto-scroll */	
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges; /* prevents width jump on expand */
    /* While testing, show a normal scrollbar: */
    scrollbar-width: auto;
    -ms-overflow-style: auto;
  }
  /* Each section container fills the width and can shrink */
  .sidebar-sticky .side-surface > .side-scroll > .menu-item{
    width: 100%;
    min-width: 0;           /* ⟵ allow content to shrink instead of overflow right */
  }

  /* Make sure the header row & its content are full width inside the item */
  .sidebar-sticky .side-surface > .side-scroll > .menu-item > .section-row{ width:100%; }
  .sidebar-sticky .side-surface > .side-scroll > .menu-item > .ps-3{ width:100%; }
  
  /* If you previously hid scrollbars, make sure it’s disabled while testing: */
  .sidebar-sticky .side-surface > .side-scroll::-webkit-scrollbar { display: none; }
  .sidebar-sticky .side-surface > .side-scroll { scrollbar-width: none; -ms-overflow-style: none; }
  
  /* Defensive: long labels wrap, avoid horizontal scroll */
  .sidebar-sticky .nav-link { word-break: break-word; }
}


/* Base */
.topnav-item { position: relative; }

/* Mobile: label shows on hover/focus below the icon */
.topnav-item .topnav-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + .2rem);
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  white-space: nowrap;
  font-size: 10px;
}
.topnav-item:hover .topnav-label,
.topnav-item:focus-within .topnav-label { opacity: 1; }

/* Desktop: label is always under the icon */
@media (min-width: 480px) {
  .topnav-item .topnav-label {
    position: static;
    transform: none;
    top: auto;
    opacity: 1;
    display: block;
	font-size:8px;
  }
}
/* Desktop: label is always under the icon */
@media (min-width: 520px) {
  .topnav-item .topnav-label {
    position: static;
    transform: none;
    top: auto;
    opacity: 1;
    display: block;
	font-size:10px;
  }
}

@media (min-width: 768px) {
  .topnav-item .topnav-label {
    position: static;
    transform: none;
    top: auto;
    opacity: 1;
    display: block;
	font-size:14px;
  }
}

.hero-img {
  width: 100%;
  max-width: clamp(60px, 20vw, 120px); /* min, preferred, max */
}


/* --- Smart Apps grid (keeps tiles the same size) --- */
.feature-grid .card { height: 100%; }
.feature-grid .card-body { display: flex; flex-direction: column; }
.feature-grid .card figure { margin: 0; }
.feature-grid .icon {
    width: 100%;
    max-height: 160px;
    object-fit: contain;
}
.feature-grid .card { border-color: var(--it-border, #e2e8f0); background: var(--bs-body-bg); }
.feature-grid .card-header { background: gray;color:lightgray;}
/* Tighten bullet spacing a bit */
.feature-grid ul { margin-bottom: 0; }
.feature-grid li { margin-bottom: .25rem; }
  
 
 
 /* Tooltip term hint */
.tt { text-decoration: underline dotted; text-underline-offset: 2px; cursor: help; }
.tt:focus { outline: none; text-decoration-style: solid; }

/* Base look for our tooltips */
.tooltip.tt-tip .tooltip-inner {
  text-align: left;         /* left justify */
  white-space: normal;      /* allow wrapping */
  line-height: 1.45;        /* comfortable default */
  max-width: 28rem;         /* wider than Bootstrap’s 200px */
  font-size: 0.95rem;       /* optional, tweak to taste */
}

/* Optional line-height variants */
.tooltip.tt-tip.lh-130 .tooltip-inner { line-height: 1.30; }
.tooltip.tt-tip.lh-140 .tooltip-inner { line-height: 1.40; }
.tooltip.tt-tip.lh-160 .tooltip-inner { line-height: 1.60; }

/* Optional width variants */
.tooltip.tt-tip.w-24rem .tooltip-inner { max-width: 24rem; }
.tooltip.tt-tip.w-32rem .tooltip-inner { max-width: 32rem; }


.button-3d {
  transition: all 0.2s ease-in-out;
  border-width: 2px;
  background-color: #f8f9fa;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  text-decoration:none;
}

.button-3d:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 18px rgba(0, 0, 0, 0.15);
  color: #343a40;
  background-color: #ffffff;
}

.button-3d:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.legal-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1050;
}

.legal-modal-dialog {
  max-width: 960px;
  width: 100%;
  max-height: 90vh;
}

.legal-doc {
  max-width: 900px;
  width: 100%;
  max-height: 82vh;
  background-color: #ffffff;
  color: #212529;
  border-radius: 0.5rem;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}

.legal-doc-body {
  overflow-y: auto;
  padding-right: 0.25rem;
}

.legal-section-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #212529;
}
.pop-heading.text-secondary {
  font-family: 'Poppins', sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  transition: transform 0.3s ease, text-shadow 0.3s ease;

  /* Use theme secondary color as base */
  color: var(--bs-secondary);

  /* Glow effect based on secondary color */
  text-shadow: 0 0 8px rgba(108, 117, 125, 0.5), /* Bootstrap secondary default */
               0 0 16px rgba(108, 117, 125, 0.7);
}

.pop-heading.text-secondary:hover {
  transform: scale(1.15) rotate(-2deg);
  text-shadow: 0 0 16px rgba(108, 117, 125, 0.7),
               0 0 32px rgba(108, 117, 125, 0.9);
}