.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
}


/* Kitenge Fest theme */
:root{
  --kitenge-bg: url("/assets/images/kitenge-bg.jpg");
  --kitenge-overlay: rgba(8, 10, 18, .78); /* dark overlay for readability */
  --kitenge-card: rgba(255,255,255,.92);
}

/* Full page kitenge background */
.kitenge-page{
  position: relative;
  background-image:
    linear-gradient(var(--kitenge-overlay), var(--kitenge-overlay)),
    var(--kitenge-bg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Optional: make the pattern more "texture-like" and less loud */
.kitenge-page::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--kitenge-bg);
  background-size: 520px;         /* makes it look like a repeating pattern */
  background-repeat: repeat;
  opacity: .12;                   /* controls subtlety */
  mix-blend-mode: overlay;        /* nice richness on dark overlay */
  pointer-events:none;
}

/* Keep content above overlays */
.kitenge-page > *{
  position: relative;
  z-index: 1;
}

/* Softer cards on top of patterned bg */
.kitenge-page .card{
  background: var(--kitenge-card);
  backdrop-filter: blur(6px);
}

/* Header can also use kitenge */
.page-header.kitenge-header{
  background-image:
    linear-gradient(rgba(0,0,0,.65), rgba(0,0,0,.65)),
    var(--kitenge-bg);
  background-size: cover;
  background-position: center;
}


/* ========================
   NAV + FOOTER (Festival colors)
======================== */

/* Top navbar + footer share same treatment */
.navbar.kitenge-nav,
footer.kitenge-footer{
    position: relative;
    background: var(--festival-gradient) !important;
    color: #fff;
    border-color: rgba(255,255,255,0.18) !important;
    overflow: hidden;
}

/* Soft glow / texture */
.navbar.kitenge-nav::before,
footer.kitenge-footer::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 45%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.14), transparent 45%),
        radial-gradient(circle at 70% 80%, rgba(255,255,255,0.10), transparent 45%);
    opacity: .9;
    pointer-events:none;
}

/* Keep content above overlay */
.navbar.kitenge-nav > *,
footer.kitenge-footer > *{
    position: relative;
    z-index: 1;
}

/* Navbar links on gradient */
.navbar.kitenge-nav .nav-link{
    color: rgba(255,255,255,.92) !important;
    opacity: 1;
}

.navbar.kitenge-nav .nav-link:hover,
.navbar.kitenge-nav .nav-link.active{
    color: #fff !important;
}

/* Underline becomes orange for pop */
.navbar.kitenge-nav .nav-link::after{
    background: var(--secondary) !important;
    opacity: 1;
}

/* Brand/logo text */
.navbar.kitenge-nav .navbar-brand,
.navbar.kitenge-nav .navbar-brand span{
    color: #fff !important;
}

/* Dropdown on gradient */
.navbar.kitenge-nav .dropdown-menu{
    background: rgba(15, 17, 21, .92);
    border: 1px solid rgba(255,255,255,0.10);
}

.navbar.kitenge-nav .dropdown-item{
    color: rgba(255,255,255,.90);
}

.navbar.kitenge-nav .dropdown-item:hover{
    background: rgba(255, 154, 1, 0.18); /* orange tint */
    color: #fff;
}

/* Toggler visibility */
.navbar.kitenge-nav .navbar-toggler{
    border-color: rgba(255,255,255,0.30);
}
.navbar.kitenge-nav .navbar-toggler:focus{
    box-shadow: 0 0 0 .2rem rgba(255,154,1,.25);
}
.navbar.kitenge-nav .navbar-toggler-icon{
    filter: invert(1);
}

/* Footer links */
footer.kitenge-footer a{
    color: rgba(255,255,255,.92);
}
footer.kitenge-footer a:hover{
    color: #fff;
    text-decoration: underline;
}

/* Footer small text */
footer.kitenge-footer,
footer.kitenge-footer .text-muted{
    color: rgba(255,255,255,.82) !important;
}

/* Dark mode tweak: keep same festival but slightly deeper */
body.dark-mode .navbar.kitenge-nav,
body.dark-mode footer.kitenge-footer{
    background: linear-gradient(135deg, #0f8f81, #c77800, #7a144c) !important;
}


/* Keep btn-kitenge background visible on click/focus */
.btn-kitenge,
.btn-kitenge:focus,
.btn-kitenge:active,
.btn-kitenge:focus-visible {
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #111 !important;
}

/* Optional: pressed effect without losing bg */
.btn-kitenge:active {
    filter: brightness(0.92);
    transform: translateY(1px);
}

/* Remove Bootstrap's default focus shadow (optional, keep if you like it) */
.btn-kitenge:focus,
.btn-kitenge:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 1, 0.25) !important;
}

/* Make sure outline-secondary stays visible too */
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:focus-visible {
    background-color: transparent !important; /* keep outline style */
    box-shadow: 0 0 0 0.2rem rgba(255, 154, 1, 0.15) !important;
}