/* New Meghdoot – design system. Tokens first, then base, layout, components, admin. */
:root {
    --nm-radius: 14px;
    --nm-radius-sm: 8px;
    --nm-shadow: 0 6px 24px rgba(var(--color-shadow), .08);
    --nm-shadow-lg: 0 18px 44px rgba(var(--color-shadow), .16);
    --nm-font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --nm-font-gu: 'Noto Sans Gujarati', 'Shruti', 'Nirmala UI', sans-serif;
    --nm-font-display: 'Playfair Display', Georgia, serif;
    --bs-primary: var(--color-primary-500);
    --bs-primary-rgb: 0, 176, 240;
    --bs-body-color: var(--color-ink);
    --bs-border-color: var(--color-line);
    --bs-link-color: var(--color-primary-700);
    --bs-link-hover-color: var(--color-secondary-700);
}

/* ---------- Base ---------- */
html, body { font-family: var(--nm-font-en); color: var(--color-ink); background: var(--color-surface); }
body { line-height: 1.65; -webkit-font-smoothing: antialiased; }

/* Gujarati: dedicated font, taller line-height so vowel signs and conjuncts are never clipped. */
html:lang(gu) body, [lang="gu"] { font-family: var(--nm-font-gu); line-height: 1.8; }
html:lang(gu) h1, html:lang(gu) h2, html:lang(gu) h3, html:lang(gu) h4,
html:lang(gu) .hero-title, html:lang(gu) .section-title, html:lang(gu) .brand-name { font-family: var(--nm-font-gu); line-height: 1.5; }

h1, h2, h3, .hero-title, .section-title { font-family: var(--nm-font-display); color: var(--color-secondary-700); font-weight: 700; }
h1:focus, main:focus { outline: none; }
a { color: var(--color-primary-700); }
img { max-width: 100%; height: auto; }

.btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; }
.btn-primary { --bs-btn-color: var(--color-on-primary); --bs-btn-bg: var(--color-primary-500); --bs-btn-border-color: var(--color-primary-500); --bs-btn-hover-color: var(--color-on-primary); --bs-btn-hover-bg: var(--color-primary-600); --bs-btn-hover-border-color: var(--color-primary-600); --bs-btn-active-color: var(--color-on-primary); --bs-btn-active-bg: var(--color-primary-600); --bs-btn-active-border-color: var(--color-primary-600); --bs-btn-disabled-color: var(--color-on-primary); --bs-btn-disabled-bg: var(--color-primary-500); --bs-btn-disabled-border-color: var(--color-primary-500); }
.btn-accent { background: var(--color-secondary-700); border-color: var(--color-secondary-700); color: var(--color-on-dark); }
.btn-accent:hover { background: var(--color-secondary-800); border-color: var(--color-secondary-800); color: var(--color-on-dark); }
.btn-outline-primary { --bs-btn-color: var(--color-primary-700); --bs-btn-border-color: var(--color-primary-500); --bs-btn-hover-color: var(--color-on-primary); --bs-btn-hover-bg: var(--color-primary-500); --bs-btn-hover-border-color: var(--color-primary-500); --bs-btn-active-color: var(--color-on-primary); --bs-btn-active-bg: var(--color-primary-600); }

.btn:focus-visible, .nav-link:focus-visible, a:focus-visible, .form-control:focus, .form-select:focus, .dropdown-item:focus-visible {
    outline: 3px solid var(--color-primary-500);
    outline-offset: 2px;
    box-shadow: none;
}

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--color-secondary-700); color: var(--color-surface); padding: .5rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */
.site-header { background: rgba(var(--color-white-rgb), .97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-line); z-index: 1030; }
.site-header .navbar { padding: .55rem 0; }
.brand-logo { object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; color: var(--color-secondary-700); font-size: 1.02rem; }
.brand-motto { font-size: .72rem; color: var(--color-primary-700); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
html:lang(gu) .brand-motto { text-transform: none; letter-spacing: 0; }

.site-header .nav-link { color: var(--color-ink); font-weight: 500; white-space: nowrap; padding: .55rem .8rem; border-radius: var(--nm-radius-sm); }
.site-header .nav-link:hover { color: var(--color-secondary-700); background: var(--color-primary-50); }
.site-header .nav-link.active, .site-header .nav-link.show { color: var(--color-secondary-700); box-shadow: inset 0 -3px 0 var(--color-primary-500); border-radius: var(--nm-radius-sm) var(--nm-radius-sm) 0 0; }
.site-header .dropdown-menu { border: 1px solid var(--color-line); border-radius: var(--nm-radius); box-shadow: var(--nm-shadow-lg); padding: .5rem; min-width: 14rem; }
.site-header .dropdown-item { border-radius: var(--nm-radius-sm); padding: .5rem .85rem; font-weight: 500; }
.site-header .dropdown-item.active, .site-header .dropdown-item:active { background: var(--color-secondary-700); color: var(--color-surface); }
@media (min-width: 1200px) { .site-header .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; } }
@media (max-width: 1199.98px) { .site-header .navbar-collapse { padding: .75rem 0 1rem; } .site-header .dropdown-menu { box-shadow: none; border: 0; background: var(--color-primary-50); } }

/* One global language switch with a clear active state */
.lang-switch { display: inline-flex; border: 1px solid var(--color-line-strong); border-radius: 999px; padding: 3px; background: var(--color-primary-50); }
.lang-option { padding: .3rem .85rem; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--color-secondary-700); text-decoration: none; white-space: nowrap; }
.lang-option[lang="gu"] { font-family: var(--nm-font-gu); }
.lang-option[lang="en"] { font-family: var(--nm-font-en); }
.lang-option.active { background: var(--color-secondary-700); color: var(--color-surface); }
.lang-option:not(.active):hover { background: var(--color-surface); }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section-alt { background: var(--color-primary-50); }
.narrow { max-width: 860px; }
.eyebrow { color: var(--color-primary-700); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
html:lang(gu) .eyebrow { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.section-title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: .75rem; }
.section-lead { color: var(--color-muted); font-size: 1.08rem; max-width: 46rem; }
.section-head { margin-bottom: 2.25rem; }
.lead-text { font-size: 1.1rem; color: var(--color-muted); }
.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

.page-header { background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600)); color: var(--color-on-primary); padding: 3.25rem 0; border-bottom: 4px solid var(--color-secondary-700); }
.page-header h1 { color: var(--color-on-primary); margin: 0 0 .35rem; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-header p { color: var(--color-on-primary); margin: 0; max-width: 46rem; }

/* ---------- Hero ---------- */
.hero { background: radial-gradient(1200px 500px at 85% -10%, var(--color-primary-100) 0, transparent 60%), linear-gradient(180deg, var(--color-primary-50), var(--color-surface)); padding: 4.5rem 0 4rem; }
.hero-title { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.15; margin-bottom: 1rem; }
.hero-text { font-size: 1.15rem; color: var(--color-muted); margin-bottom: 1.75rem; max-width: 34rem; }
.hero-media { position: relative; }
.hero-image { width: 100%; height: auto; border-radius: var(--nm-radius); box-shadow: var(--nm-shadow-lg); }
.hero-badge { position: absolute; left: 12px; bottom: -16px; background: var(--color-surface); border-left: 5px solid var(--color-primary-500); border-radius: var(--nm-radius-sm); box-shadow: var(--nm-shadow); padding: .6rem 1rem; font-weight: 700; color: var(--color-secondary-700); }
.hero-badge small { display: block; color: var(--color-muted); font-weight: 500; }

/* ---------- Cards ---------- */
.nm-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--nm-radius); box-shadow: var(--nm-shadow); height: 100%; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
a.nm-card { text-decoration: none; color: inherit; display: block; }
a.nm-card:hover, .nm-card.hoverable:hover { transform: translateY(-4px); box-shadow: var(--nm-shadow-lg); }
.nm-card-body { padding: 1.25rem 1.35rem 1.4rem; }
.nm-card-title { font-size: 1.1rem; font-weight: 700; color: var(--color-secondary-700); margin-bottom: .25rem; }
.nm-card-meta { color: var(--color-muted); font-size: .92rem; margin: 0; }
.nm-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--color-primary-50); }
.avatar { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--color-primary-50); }
.nm-card .photo-pending { display: block; }

.chip { display: inline-block; padding: .3rem .85rem; border-radius: 999px; background: var(--color-surface); border: 1px solid var(--color-secondary-100); color: var(--color-secondary-700); font-weight: 600; font-size: .92rem; text-decoration: none; }
a.chip:hover { background: var(--color-secondary-700); color: var(--color-surface); }
.badge-soft { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--color-primary-100); color: var(--color-warning); font-size: .78rem; font-weight: 700; }

.fallback-notice { background: var(--color-primary-100); border-left: 4px solid var(--color-primary-500); padding: .5rem .9rem; font-size: .9rem; border-radius: 6px; }

/* ---------- Filters, pager ---------- */
.filter-bar { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--nm-radius); box-shadow: var(--nm-shadow); padding: 1.1rem 1.25rem; margin-bottom: 2rem; }
.filter-bar label { font-weight: 600; font-size: .85rem; color: var(--color-secondary-700); margin-bottom: .25rem; }
.form-control, .form-select { border-radius: var(--nm-radius-sm); border-color: var(--color-line-strong); }
.pagination .page-link { color: var(--color-secondary-700); }
.pagination .active > .page-link { background: var(--color-secondary-700); border-color: var(--color-secondary-700); color: var(--color-surface); }

/* ---------- Management (static) pages ---------- */
.profile-photo { width: 100%; max-width: 320px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--nm-radius); box-shadow: var(--nm-shadow-lg); background: var(--color-primary-50); }
.photo-pending { position: relative; display: inline-block; }
.photo-pending-note { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(var(--color-shadow), .85); color: var(--color-surface); font-size: .8rem; text-align: center; padding: .35rem; border-radius: 0 0 var(--nm-radius) var(--nm-radius); }
.placeholder-note { background: var(--color-primary-100); border-left: 4px solid var(--color-primary-500); padding: .6rem 1rem; border-radius: 6px; font-size: .92rem; }
.quote { border-left: 4px solid var(--color-primary-500); padding: .25rem 0 .25rem 1.25rem; font-family: var(--nm-font-display); font-size: 1.3rem; color: var(--color-secondary-700); margin: 1.5rem 0; }
html:lang(gu) .quote { font-family: var(--nm-font-gu); }
.quote footer { font-family: var(--nm-font-en); font-size: .9rem; color: var(--color-muted); margin-top: .35rem; }

.about-section { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--color-line); }
.about-section:last-child { border-bottom: 0; }
.about-image { width: 100%; height: auto; border-radius: var(--nm-radius); margin-bottom: 1rem; }

.map-frame { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: var(--nm-radius); box-shadow: var(--nm-shadow); }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: .45rem 0; display: flex; gap: .75rem; }
.contact-list strong { min-width: 5.5rem; color: var(--color-secondary-700); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-secondary-900); color: var(--color-on-dark-muted); padding: 3.5rem 0 1.5rem; margin-top: 0; }
.site-footer a { color: var(--color-surface); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-name { color: var(--color-surface); font-weight: 700; font-size: 1.15rem; margin-bottom: .25rem; }
.footer-heading { color: var(--color-primary-500); font-weight: 700; margin-bottom: .6rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: .15rem 0; }
.footer-copy { border-top: 1px solid rgba(var(--color-white-rgb), .15); margin: 2rem 0 0; padding-top: 1rem; font-size: .85rem; }

/* ---------- Scroll reveal (subtle; off for reduced motion) ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } a.nm-card:hover { transform: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Admin ---------- */
.admin-shell { display: flex; min-height: 100vh; background: var(--color-surface-admin); }
.admin-sidebar { width: 260px; flex: 0 0 260px; background: var(--color-secondary-900); color: var(--color-on-dark-muted); padding: 1.25rem .85rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-brand { color: var(--color-surface); font-weight: 700; padding: .25rem .6rem 1rem; display: block; text-decoration: none; }
.admin-brand small { display: block; color: var(--color-primary-500); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.admin-nav { list-style: none; padding: 0; margin: 0; }
.admin-nav a { display: block; color: var(--color-on-dark-muted); text-decoration: none; padding: .55rem .75rem; border-radius: var(--nm-radius-sm); font-size: .95rem; }
.admin-nav a:hover { background: rgba(var(--color-white-rgb), .08); color: var(--color-surface); }
.admin-nav a.active { background: var(--color-primary-500); color: var(--color-on-primary); font-weight: 700; }
.admin-nav .nav-group { color: var(--color-on-dark-subtle); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; padding: 1rem .75rem .35rem; }
.admin-main { flex: 1; min-width: 0; }
.admin-topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-line); padding: .7rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-content { padding: 1.75rem 1.5rem 3rem; }
.admin-content h1 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.admin-panel { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--nm-radius); box-shadow: var(--nm-shadow); padding: 1.25rem 1.5rem; }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--nm-radius); padding: 1.1rem 1.25rem; box-shadow: var(--nm-shadow); height: 100%; text-decoration: none; color: inherit; display: block; }
a.stat-card:hover { box-shadow: var(--nm-shadow-lg); }
.stat-number { font-size: 2rem; font-weight: 700; color: var(--color-secondary-700); line-height: 1.1; }
.stat-label { color: var(--color-muted); font-size: .9rem; }
.admin-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); white-space: nowrap; }
.admin-table td { vertical-align: middle; }
.thumb { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--color-primary-50); }
.lang-tabs .nav-link { color: var(--color-secondary-700); font-weight: 600; }
.lang-tabs .nav-link.active { border-bottom-color: var(--color-primary-500); }
.lang-ok { color: var(--color-success); }
.lang-missing { color: var(--color-danger); }
@media (max-width: 991.98px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; flex: none; height: auto; position: static; }
}

/* ---------- Blazor ---------- */
#blazor-error-ui { background: var(--color-note-ui); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, .2); display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 2000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-danger); }
.validation-message { color: var(--color-danger); }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-error-ui);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--color-muted);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

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