/* ==========================================================================
   DIWALI THEME 2026  (1 Nov - 30 Nov)
   Pure overlay: loaded after style.css by includes/head.php (see the
   "DIWALI THEME" block there). No other file is changed.
   Remove: delete the block in includes/head.php (or just this file).
   ========================================================================== */

:root,
[data-bs-theme] {
  --dw-maroon: #4a0d1c;
  --dw-gold:   #f5b301;
  --dw-saffron:#ff7a00;
  --bs-primary: #e8710a;
  --bs-primary-rgb: 232,113,10;
  --bs-link-color: #c25e00;
  --bs-link-hover-color: #8a3f00;
}

/* ---- primary colour: saffron instead of blue ---- */
.btn-primary {
  --bs-btn-bg: #e8710a; --bs-btn-border-color: #e8710a;
  --bs-btn-hover-bg: #c25e00; --bs-btn-hover-border-color: #c25e00;
  --bs-btn-active-bg: #a84f00; --bs-btn-active-border-color: #a84f00;
  --bs-btn-disabled-bg: #e8710a; --bs-btn-disabled-border-color: #e8710a;
  --bs-btn-focus-shadow-rgb: 232,113,10;
}
.btn-outline-primary {
  --bs-btn-color: #e8710a; --bs-btn-border-color: #e8710a;
  --bs-btn-hover-bg: #e8710a; --bs-btn-hover-border-color: #e8710a;
  --bs-btn-active-bg: #c25e00; --bs-btn-active-border-color: #c25e00;
}
.text-primary { color: #e8710a !important; }
.bg-primary   { background-color: #e8710a !important; }
.border-primary { border-color: #e8710a !important; }
.bg-soft-primary { background-color: rgba(232,113,10,.12) !important; }
.list-checked-primary .list-checked-item::before { color: #e8710a; }

/* ---- dark sections (page headers, footer): deep maroon instead of navy ---- */
.bg-dark,
.navbar-dark.bg-dark,
footer.bg-dark {
  background-color: var(--dw-maroon) !important;
}
footer.bg-dark { border-top: 3px solid var(--dw-gold); }

/* ---- string lights along the top edge of the maroon bands (page header band + footer) ----
   Same effect as the renew page: red/gold bulbs, glowing, blinking. */
.navbar-dark.bg-dark,
footer.bg-dark,
.position-relative.bg-dark.overflow-hidden { position: relative; overflow: hidden; }
.navbar-dark.bg-dark,
footer.bg-dark { padding-top: 26px; background-image: radial-gradient(900px 260px at 50% -40px, #7a1730 0%, transparent 70%) !important; }
footer.bg-dark::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 26px; pointer-events: none; z-index: 1;
  background:
    radial-gradient(circle at 10px 8px, #ff4d4d 4px, transparent 5px) 0 0 / 40px 26px repeat-x,
    radial-gradient(circle at 30px 8px, var(--dw-gold) 4px, transparent 5px) 0 0 / 40px 26px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255,200,0,.8));
  animation: dwBlink 1.8s steps(2) infinite;
}
@keyframes dwBlink { 50% { opacity: .55; } }

/* ---- small floating greeting, bottom-left ---- */
body::after {
  content: "\1FA94  Happy Diwali";
  position: fixed; left: 14px; bottom: 14px; z-index: 1900; pointer-events: none;
  background: linear-gradient(90deg, var(--dw-maroon), #7a1730);
  color: var(--dw-gold); font: 600 13px/1 Inter, Arial, sans-serif;
  padding: 9px 14px; border-radius: 20px;
  border: 1px solid var(--dw-gold);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
@media (max-width: 575.98px) { body::after { font-size: 11px; padding: 7px 10px; left: 8px; bottom: 8px; } }

@media (prefers-reduced-motion: reduce) { .navbar-dark.bg-dark::before, footer.bg-dark::before, .position-relative.bg-dark.overflow-hidden::before { animation: none; } }

/* ---- ::after of the maroon bands = string lights + hanging brass diyas ----
   One vector brass lamp (flame, lotus-petal dish, hanging chains), all the same size,
   hung at three depths: 1st = long chain, 2nd = medium, 3rd = short. Mirrored on the
   right so the longest chains sit on the outer edges. A negative background-y shortens
   each chain. Hero (home page) full size, header bands compact. Lamps are hidden below
   1400px so they never sit on top of page content; the lights stay at every width. */
.navbar-dark.bg-dark::after,
.position-relative.bg-dark.overflow-hidden::after {
  --dw-hang: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2060%20250%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27br%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%238a5a0a%27%2F%3E%3Cstop%20offset%3D%27.35%27%20stop-color%3D%27%23ffd76a%27%2F%3E%3Cstop%20offset%3D%27.6%27%20stop-color%3D%27%23e0a41c%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%237a4c06%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27bd%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23f6c649%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23a86c0a%27%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%27fl%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23fff3b0%27%2F%3E%3Cstop%20offset%3D%27.5%27%20stop-color%3D%27%23ffb21f%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff6a00%27%2F%3E%3C%2FlinearGradient%3E%3CradialGradient%20id%3D%27gl%27%20cx%3D%2750%25%27%20cy%3D%2750%25%27%20r%3D%2750%25%27%3E%3Cstop%20offset%3D%270%27%20stop-color%3D%27%23ffd23f%27%20stop-opacity%3D%27.75%27%2F%3E%3Cstop%20offset%3D%271%27%20stop-color%3D%27%23ff7a00%27%20stop-opacity%3D%270%27%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cline%20x1%3D%2730%27%20y1%3D%270%27%20x2%3D%2730%27%20y2%3D%27152%27%20stroke%3D%27%238a5a0a%27%20stroke-width%3D%273.4%27%20stroke-dasharray%3D%275%202.4%27%2F%3E%3Cline%20x1%3D%2730%27%20y1%3D%270%27%20x2%3D%2730%27%20y2%3D%27152%27%20stroke%3D%27%23ffd76a%27%20stroke-width%3D%271.3%27%20stroke-dasharray%3D%275%202.4%27%20stroke-dashoffset%3D%27.5%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%27156%27%20r%3D%274.2%27%20fill%3D%27none%27%20stroke%3D%27url(%23br)%27%20stroke-width%3D%272.2%27%2F%3E%3Cpath%20d%3D%27M30%20160%208%20212M30%20160%2052%20212%27%20stroke%3D%27%23d9a21c%27%20stroke-width%3D%271.3%27%20stroke-dasharray%3D%273%201.8%27%20fill%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%27198%27%20r%3D%2722%27%20fill%3D%27url(%23gl)%27%2F%3E%3Cpath%20d%3D%27M30%20176c6%209%209%2015%200%2024-9-9-6-15%200-24z%27%20fill%3D%27url(%23fl)%27%2F%3E%3Cpath%20d%3D%27M30%20187c2.6%203.6%203.4%206%200%209.5-3.4-3.5-2.6-5.9%200-9.5z%27%20fill%3D%27%23fffbe0%27%2F%3E%3Crect%20x%3D%2728.6%27%20y%3D%27198%27%20width%3D%272.8%27%20height%3D%276%27%20rx%3D%271%27%20fill%3D%27%235a3604%27%2F%3E%3Cg%20fill%3D%27url(%23br)%27%20stroke%3D%27%237a4c06%27%20stroke-width%3D%27.6%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%27211%27%20r%3D%273.4%27%2F%3E%3Ccircle%20cx%3D%2719.5%27%20cy%3D%27208.8%27%20r%3D%273.6%27%2F%3E%3Ccircle%20cx%3D%2730%27%20cy%3D%27208%27%20r%3D%273.8%27%2F%3E%3Ccircle%20cx%3D%2740.5%27%20cy%3D%27208.8%27%20r%3D%273.6%27%2F%3E%3Ccircle%20cx%3D%2749%27%20cy%3D%27211%27%20r%3D%273.4%27%2F%3E%3C%2Fg%3E%3Cellipse%20cx%3D%2730%27%20cy%3D%27212%27%20rx%3D%2723%27%20ry%3D%275.2%27%20fill%3D%27url(%23br)%27%20stroke%3D%27%237a4c06%27%20stroke-width%3D%27.7%27%2F%3E%3Cellipse%20cx%3D%2730%27%20cy%3D%27211%27%20rx%3D%2715%27%20ry%3D%273%27%20fill%3D%27%236b4107%27%20opacity%3D%27.85%27%2F%3E%3Cellipse%20cx%3D%2730%27%20cy%3D%27210.6%27%20rx%3D%278%27%20ry%3D%271.6%27%20fill%3D%27%23ffcf5a%27%20opacity%3D%27.55%27%2F%3E%3Cpath%20d%3D%27M8%20213Q11%20233%2030%20236Q49%20233%2052%20213Q30%20220%208%20213z%27%20fill%3D%27url(%23bd)%27%20stroke%3D%27%237a4c06%27%20stroke-width%3D%27.7%27%2F%3E%3Cpath%20d%3D%27M18%20235h24l3%207H15z%27%20fill%3D%27url(%23br)%27%20stroke%3D%27%237a4c06%27%20stroke-width%3D%27.7%27%2F%3E%3Crect%20x%3D%2714%27%20y%3D%27241.6%27%20width%3D%2732%27%20height%3D%272.6%27%20rx%3D%271.2%27%20fill%3D%27%238a5a0a%27%2F%3E%3C%2Fsvg%3E");
  --dw-bulb1: radial-gradient(circle at 10px 8px, #ff4d4d 4px, transparent 5px);
  --dw-bulb2: radial-gradient(circle at 30px 8px, #f5b301 4px, transparent 5px);
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: var(--dw-bulb1), var(--dw-bulb2), var(--dw-hang), var(--dw-hang), var(--dw-hang), var(--dw-hang), var(--dw-hang), var(--dw-hang);
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 40px 26px, 40px 26px, 36px auto, 36px auto, 36px auto, 36px auto, 36px auto, 36px auto;
  background-position: 0 0, 0 0, 3% -53px, 7% -67px, 11% -79px, 89% -79px, 93% -67px, 97% -53px;
  animation: dwHang 2.2s ease-in-out infinite;
}
.position-relative.bg-dark.overflow-hidden::after {
  background-size: 40px 26px, 40px 26px, 70px auto, 70px auto, 70px auto, 70px auto, 70px auto, 70px auto;
  background-position: 0 0, 0 0, 3% -47px, 7% -92px, 11% -132px, 89% -132px, 93% -92px, 97% -47px;
}
@keyframes dwHang {
  0%,100% { filter: drop-shadow(0 0 4px rgba(255,190,0,.45)); }
  50%     { filter: drop-shadow(0 0 12px rgba(255,200,40,.95)); }
}
@media (max-width: 1399.98px) {
  .navbar-dark.bg-dark::after,
  .position-relative.bg-dark.overflow-hidden::after { background-image: var(--dw-bulb1), var(--dw-bulb2); }
}

/* ---- firework rockets across the WHOLE page background ----
   Three independent rockets (html::before, html::after, body::before) in a fixed,
   click-through layer. Each is a 3px dot that shoots up from the bottom, bursts into
   coloured sparks (one box-shadow in em units, so animating font-size grows it) and
   fades. Different spots, colours and cycle lengths so they never line up. */
html::before, html::after, body::before {
  --dw-fw: 16px;
  content: ""; position: fixed; left: 20%; top: 100%; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; pointer-events: none; z-index: 1800; font-size: 0; opacity: 0;
  box-shadow:
    6.00em 0.00em 0 1px #ffd23f,
    5.64em 2.05em 0 1px #ff4d4d,
    4.60em 3.86em 0 1px #ff9a1f,
    3.00em 5.20em 0 1px #ffffff,
    1.04em 5.91em 0 1px #3ddc84,
    -1.04em 5.91em 0 1px #ff6bd6,
    -3.00em 5.20em 0 1px #ffd23f,
    -4.60em 3.86em 0 1px #ff4d4d,
    -5.64em 2.05em 0 1px #ff9a1f,
    -6.00em 0.00em 0 1px #ffffff,
    -5.64em -2.05em 0 1px #3ddc84,
    -4.60em -3.86em 0 1px #ff6bd6,
    -3.00em -5.20em 0 1px #ffd23f,
    -1.04em -5.91em 0 1px #ff4d4d,
    1.04em -5.91em 0 1px #ff9a1f,
    3.00em -5.20em 0 1px #ffffff,
    4.60em -3.86em 0 1px #3ddc84,
    5.64em -2.05em 0 1px #ff6bd6,
    3.23em 1.05em 0 1px #ff9a1f,
    2.00em 2.75em 0 1px #ffffff,
    0.00em 3.40em 0 1px #3ddc84,
    -2.00em 2.75em 0 1px #ff6bd6,
    -3.23em 1.05em 0 1px #ffd23f,
    -3.23em -1.05em 0 1px #ff4d4d,
    -2.00em -2.75em 0 1px #ff9a1f,
    -0.00em -3.40em 0 1px #ffffff,
    2.00em -2.75em 0 1px #3ddc84,
    3.23em -1.05em 0 1px #ff6bd6,
    8.53em 1.88em 0 1px #ff4d4d,
    5.84em 7.11em 0 1px #ff9a1f,
    0.42em 9.39em 0 1px #ffffff,
    -5.20em 7.65em 0 1px #3ddc84,
    -8.39em 2.71em 0 1px #ff6bd6,
    -7.65em -3.13em 0 1px #ffd23f,
    -3.33em -7.13em 0 1px #ff4d4d,
    2.54em -7.42em 0 1px #ff9a1f,
    7.23em -3.86em 0 1px #ffffff;
}
html::before { animation: dwRocketA 7s linear infinite; }
html::after  { animation: dwRocketB 9s linear 2.5s infinite; }
body::before { animation: dwRocketC 11s linear 5s infinite; }
@media (max-width: 767.98px) { html::before, html::after, body::before { --dw-fw: 9px; } }
@keyframes dwRocketA {
  0%   { left:16%; top:100%; font-size:0; opacity:1; filter:hue-rotate(0deg); }
  22%  { left:16%; top:32%; font-size:0; opacity:1; }
  42%  { left:16%; top:32%; font-size:calc(var(--dw-fw) * .7); opacity:1; }
  62%  { left:16%; top:32%; font-size:var(--dw-fw); opacity:1; }
  72%  { left:16%; top:32%; font-size:calc(var(--dw-fw) * 1.1); opacity:0; }
  100% { left:16%; top:32%; font-size:0; opacity:0; }
}
@keyframes dwRocketB {
  0%   { left:84%; top:100%; font-size:0; opacity:1; filter:hue-rotate(120deg); }
  22%  { left:84%; top:40%; font-size:0; opacity:1; }
  42%  { left:84%; top:40%; font-size:calc(var(--dw-fw) * .7); opacity:1; }
  62%  { left:84%; top:40%; font-size:var(--dw-fw); opacity:1; }
  72%  { left:84%; top:40%; font-size:calc(var(--dw-fw) * 1.1); opacity:0; }
  100% { left:84%; top:40%; font-size:0; opacity:0; }
}
@keyframes dwRocketC {
  0%   { left:50%; top:100%; font-size:0; opacity:1; filter:hue-rotate(240deg); }
  22%  { left:50%; top:24%; font-size:0; opacity:1; }
  42%  { left:50%; top:24%; font-size:calc(var(--dw-fw) * .7); opacity:1; }
  62%  { left:50%; top:24%; font-size:var(--dw-fw); opacity:1; }
  72%  { left:50%; top:24%; font-size:calc(var(--dw-fw) * 1.1); opacity:0; }
  100% { left:50%; top:24%; font-size:0; opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  html::before, html::after, body::before { display: none; }
  .navbar-dark.bg-dark::after, .position-relative.bg-dark.overflow-hidden::after { animation: none; }
}

/* ---- gold festive edge under the maroon bands ---- */
.navbar-dark.bg-dark,
.position-relative.bg-dark.overflow-hidden {
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--dw-maroon), var(--dw-gold) 25%, var(--dw-saffron) 50%, var(--dw-gold) 75%, var(--dw-maroon)) 1;
}