/*
 * header-brand.css - the banner at the top of every page: Shree Nakoda Bhairav Ji (left) and
 * Shree Parshvanath Bhagwan (right) with the tirth's name as real text in the middle, so it stays
 * sharp at every screen size (it replaces the old nakoda-logo.jpg picture).
 * The band behind it is "alive": slowly turning light rays, a soft shimmer passing across,
 * golden sparks rising, and a turning mandala behind each idol. All motion stops for visitors
 * who ask their device for reduced motion.
 */

.nk-brand {
    display: inline-flex !important; align-items: center; justify-content: center; gap: clamp(16px, 2.6vw, 44px);
    text-decoration: none !important; color: inherit; max-width: 100%;
}

/* ---------- the two idols ---------- */
.nk-brand-idol { position: relative; flex-shrink: 0; display: block; }
.nk-brand-idol picture { position: relative; z-index: 2; display: block; height: 100%; }
.nk-brand-idol img {
    display: block; width: auto; height: 100%;
    /* a short, crisp shadow (a big blurry one makes the figure look soft) and a little extra colour */
    filter: drop-shadow(0 2px 2px rgba(70, 25, 0, .35)) drop-shadow(0 8px 10px rgba(150, 70, 0, .18)) saturate(1.08) contrast(1.05);
    transition: transform .5s cubic-bezier(.2, .65, .3, 1);
}
/* golden halo */
.nk-brand-idol::before {
    content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 165%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 96, .7) 0%, rgba(255, 210, 120, .32) 38%, rgba(255, 220, 150, 0) 68%);
    animation: nkBrandGlow 4.5s ease-in-out infinite alternate;
}
/* slowly turning mandala behind the halo */
.nk-brand-idol::after {
    content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 175%; aspect-ratio: 1; margin: -87.5% 0 0 -87.5%;
    background: url('../images/lotus-mandala.svg') center / contain no-repeat; opacity: .32;
    animation: nkSpin 70s linear infinite;
}
.nk-brand-idol-right::before { animation-delay: -2.2s; }
.nk-brand-idol-right::after { animation-direction: reverse; }
@keyframes nkBrandGlow { from { opacity: .7; transform: translate(-50%, -50%) scale(.93); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes nkSpin { to { transform: rotate(360deg); } }

/* ---------- the text ---------- */
.nk-brand-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.nk-brand-title {
    display: block; font-family: "Eczar", "Noto Sans Devanagari", serif; font-weight: 700;
    line-height: 1.15; letter-spacing: 0; white-space: nowrap; color: #a3001a;
    /* crisp white edge + thin gold edge: readable on the cream band, no blur */
    text-shadow: 0 1px 0 #fff, 0 2px 0 rgba(217, 164, 65, .45);
    padding-top: .05em; /* room for the matras above the letters */
}
html[lang="en"] .nk-brand-title { letter-spacing: .005em; }
.nk-brand-rule { display: flex; align-items: center; gap: 10px; width: 80%; color: #c58a1c; }
.nk-brand-rule > span { flex: 1; height: 2px; border-radius: 2px; }
.nk-brand-rule > span:first-child { background: linear-gradient(90deg, rgba(217, 164, 65, 0), #d9a441); }
.nk-brand-rule > span:last-child { background: linear-gradient(90deg, #d9a441, rgba(217, 164, 65, 0)); }
.nk-brand-rule .nk-icon { flex-shrink: 0; }
.nk-brand-place {
    display: block; color: #3d2410; font-family: "Noto Sans Devanagari", Poppins, sans-serif; font-weight: 600; letter-spacing: .015em; white-space: nowrap;
}

/* ---------- the living background (desktop band) ---------- */
.rd-navbar-static .rd-navbar-aside-outer {
    overflow: hidden;
    background:
        radial-gradient(ellipse 680px 150px at 50% 56%, rgba(255, 224, 164, .65), rgba(255, 224, 164, 0) 72%),
        linear-gradient(180deg, #fffdf7 0%, #fff1d8 100%);
}
.rd-navbar-static .header-topbar, .rd-navbar-static .rd-navbar-aside { position: relative; z-index: 1; }
.rd-navbar-static .lang-switch { z-index: 3; }
.nk-band-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rd-navbar-fixed .nk-band-fx { display: none; }
/* soft rays turning around the middle */
.nk-band-rays {
    position: absolute; left: 50%; top: 60%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
    background: repeating-conic-gradient(from 0deg, rgba(255, 196, 92, .16) 0deg 5deg, rgba(255, 196, 92, 0) 5deg 15deg);
    -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%);
    mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 30%, transparent 62%);
    animation: nkSpin 120s linear infinite;
}
/* a band of light passing across every few seconds */
.nk-band-shimmer {
    position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 246, 220, .75) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-120%) skewX(-12deg);
    animation: nkShimmer 9s ease-in-out infinite;
}
@keyframes nkShimmer { 0%, 35% { transform: translateX(-120%) skewX(-12deg); } 75%, 100% { transform: translateX(320%) skewX(-12deg); } }
/* golden sparks drifting upward */
.nk-spark {
    position: absolute; bottom: -8px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
    background: radial-gradient(circle, #fff6d6 0%, #f7c25a 45%, rgba(247, 194, 90, 0) 72%);
    box-shadow: 0 0 6px rgba(247, 186, 70, .8);
    opacity: 0; animation: nkSpark var(--d) linear var(--t) infinite;
}
@keyframes nkSpark {
    0% { transform: translate(0, 0) scale(.6); opacity: 0; }
    12% { opacity: .9; }
    50% { transform: translate(14px, -110px) scale(1); opacity: .75; }
    100% { transform: translate(-8px, -230px) scale(.5); opacity: 0; }
}
.rd-navbar-static .rd-navbar-aside-outer::after { z-index: 2; }

/* ---------- desktop sizes ---------- */
.rd-navbar-static .nk-brand { padding: 6px 0 4px; }
.rd-navbar-static .nk-brand-idol { height: clamp(132px, 12vw, 178px); }
.rd-navbar-static .nk-brand-title { font-size: clamp(30px, 3.2vw, 48px); }
.rd-navbar-static .nk-brand-rule { margin: 4px 0 6px; font-size: 22px; }
.rd-navbar-static .nk-brand-place { font-size: clamp(15px, 1.2vw, 19px); }
.rd-navbar-static .logo-link.nk-brand:hover { transform: none; }
.rd-navbar-static .nk-brand:hover .nk-brand-idol img { transform: translateY(-3px) scale(1.02); }
html[lang="en"] .rd-navbar-static .nk-brand-title { font-size: clamp(24px, 2.3vw, 36px); }
html[lang="en"] .rd-navbar-static .nk-brand-place { font-size: clamp(13px, 1vw, 16px); }

/* ---------- phones and tablets (fixed navbar) ---------- */
/* The banner fills exactly the space between the menu button (left) and the language button (right),
   and the text sizes itself to the width that is left (container units), in Hindi and in English. */
.rd-navbar-fixed .rd-navbar-panel { overflow: hidden; }
.rd-navbar-fixed .rd-navbar-panel::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 246, 220, .7) 50%, rgba(255, 255, 255, 0) 100%);
    animation: nkShimmer 9s ease-in-out infinite;
}
.rd-navbar-fixed .logo-link.nk-brand {
    position: relative; z-index: 1;
    width: calc(100vw - 198px); max-width: 680px; margin-left: 56px; justify-content: space-between;
    gap: 6px; height: 100%; padding: 3px 0;
}
.rd-navbar-fixed .nk-brand-idol { height: 50px; }
.rd-navbar-fixed .nk-brand-idol::before { width: 140%; }
.rd-navbar-fixed .nk-brand-idol::after { display: none; }
.rd-navbar-fixed .nk-brand-text { flex: 1; container-type: inline-size; }
.rd-navbar-fixed .nk-brand-title { font-size: min(22px, calc(100cqi / 15.6)); text-shadow: 0 1px 0 #fff; }
.rd-navbar-fixed .nk-brand-rule { display: none; }
.rd-navbar-fixed .nk-brand-place { font-size: min(12px, calc(100cqi / 17)); margin-top: 1px; font-weight: 600; }
html[lang="en"] .rd-navbar-fixed .nk-brand-title { font-size: min(20px, calc(100cqi / 25.8)); }
html[lang="en"] .rd-navbar-fixed .nk-brand-place { font-size: min(11px, calc(100cqi / 27)); }
@media (max-width: 479px) {
    .rd-navbar-fixed .logo-link.nk-brand { width: calc(100vw - 108px); gap: 4px; }
    .rd-navbar-fixed .nk-brand-idol { height: 42px; }
    /* phones: the name on two balanced lines at a readable size, the address small underneath */
    .rd-navbar-fixed .nk-brand-title { white-space: normal; text-wrap: balance; font-size: min(15px, calc(100cqi / 8.6)); line-height: 1.1; }
    .rd-navbar-fixed .nk-brand-place { font-size: min(9.5px, calc(100cqi / 17)); }
    /* the English name is longer still */
    html[lang="en"] .rd-navbar-fixed .nk-brand-title { white-space: normal; font-size: min(13.5px, calc(100cqi / 11.5)); line-height: 1.12; }
    html[lang="en"] .rd-navbar-fixed .nk-brand-place { display: none; }
}
@media (max-width: 359px) {
    .rd-navbar-fixed .nk-brand-place { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nk-brand-idol::before, .nk-brand-idol::after, .nk-band-rays, .nk-band-shimmer, .nk-spark,
    .rd-navbar-fixed .rd-navbar-panel::after { animation: none; }
    .nk-band-shimmer, .nk-spark, .rd-navbar-fixed .rd-navbar-panel::after { display: none; }
    .nk-brand-idol img { transition: none; }
}

/* phones/tablets: the language button sits in the top-right corner (the old three-dot button opened nothing) */
.rd-navbar-fixed .lang-switch { right: 12px; }
@media (max-width: 479px) { .rd-navbar-fixed .lang-switch { right: 10px; } }