/* ══ BACHPAN UTILITY CLASSES ═══════════════════════════════════════════════ */
/* Replaces repeated inline styles across Razor views.                       */
/* Naming convention: bp-{property-shorthand}                                */

/* ── Sidebar / Filter drawer header ─────────────────────────────────────── */
.bp-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}
.bp-sidebar-title {
    font-size: .85rem;
    font-weight: 700;
}
.bp-btn-close-plain {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--bp-text-2);
}

/* ── Section spacing ────────────────────────────────────────────────────── */
.bp-section-padding { padding-top: 32px; padding-bottom: 56px; }
.bp-mb-sm { margin-bottom: .75rem; }
.bp-mb-md { margin-bottom: .85rem; }
.bp-mb-1  { margin-bottom: 1rem; }
.bp-mb-lg { margin-bottom: 1.5rem; }
.bp-mt-sm { margin-top: .75rem; }
.bp-mt-lg { margin-top: 1.5rem; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
.bp-text-center { text-align: center; }
.bp-relative { position: relative; }
.bp-hidden { display: none; }

/* ── Content containers ─────────────────────────────────────────────────── */
.bp-container-sm { max-width: 500px; }
.bp-container-md { max-width: 560px; margin: 0 auto; }
.bp-container-lg { max-width: 640px; }
.bp-container-page { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem; }
.bp-container-form { max-width: 720px; margin: 0 auto; }
@media (max-width: 576px) {
    .bp-container-sm, .bp-container-md, .bp-container-lg,
    .bp-container-page, .bp-container-form { max-width: 100%; }
}

/* ── Typography ─────────────────────────────────────────────────────────── */
.bp-fw-600 { font-weight: 600; }
.bp-icon-20 { font-size: 20px; }
.bp-icon-22 { font-size: 22px; }
.bp-hero-number { font-size: 3rem; }
.bp-no-underline { text-decoration: none; }
.bp-flex-1 { flex: 1; }
.bp-chip-pad { padding: .4rem .45rem; }
.bp-chip-pad-sm { padding: .3rem .4rem; }
.bp-rashi-accent { color: var(--bp-rashi); font-weight: 600; }
.bp-mb-dot85 { margin-bottom: .85rem; }
.bp-pad-4-12 { padding: 4px 12px; }

/* ── Dynamic color via CSS custom properties ────────────────────────────── */
.bp-icon-badge {
    background: var(--icon-bg);
    color: var(--icon-color);
}

/* ── Error / validation ─────────────────────────────────────────────────── */
.bp-text-error { color: #C0392B; }
.bp-bg-error { background: #C0392B; }
.bp-bg-error-light { background: #FDF0EF; }

/* ── Empty state ────────────────────────────────────────────────────────── */
.bp-empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

/* ── Language detail page ──────────────────────────────────────────────── */
.bp-lang-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .6rem 1rem;
    background: #F0F4FF;
    border: 1px solid #D6E0F5;
    border-radius: 8px;
    font-size: .85rem;
    margin-bottom: 1rem;
}
.bp-lang-context-link {
    font-weight: 600;
    color: var(--bp-accent, #0077B6);
    text-decoration: none;
}
.bp-lang-context-link:hover { text-decoration: underline; }

.bp-hero-name-native {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .25rem;
}
.bp-hero-english-label {
    display: inline-block;
    font-size: .85rem;
    color: var(--bp-text-2, #666);
    background: var(--bp-bg-2, #F5F5F5);
    padding: .15rem .6rem;
    border-radius: 4px;
    margin-bottom: .75rem;
}
.bp-meaning-toggle-chip {
    display: inline-block;
    margin-top: .4rem;
    padding: .2rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--bp-accent, #0077B6);
    color: var(--bp-accent, #0077B6);
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
}
.bp-meaning-toggle-chip:hover { background: var(--bp-accent, #0077B6); color: #fff; }
.bp-meaning-fallback-tag {
    font-size: .75rem;
    color: var(--bp-text-2, #888);
    font-style: italic;
    margin-left: .4rem;
}
.bp-lang-card--current {
    border-color: var(--bp-accent, #0077B6);
    box-shadow: 0 0 0 2px rgba(0,119,182,.2);
}

/* ── Mobile icon size utility ─────────────────────────────────────────── */
.bp-icon-24 { font-size: 24px; }
.bp-icon-13 { font-size: 13px; }

/* ── Mobile nav section label ─────────────────────────────────────────── */
.bp-mobnav-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--bp-text-secondary);
}
.bp-mobnav-section { padding: 12px 16px; border-bottom: 1px solid var(--bp-border-light); }

/* ── Mobile responsive overrides ──────────────────────────────────────── */
@media (max-width: 480px) {
    .bp-hero-name-native { font-size: 2rem; }
    .bp-section-padding { padding-top: 20px; padding-bottom: 32px; }
}
@media (max-width: 360px) {
    .bp-nav-dropdown { min-width: auto !important; }
}

/* ── Internal Links Section ──────────────────────────────────────────── */
.bp-internal-links { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--bp-border-light, #e5e7eb); }
.bp-il-block { margin-bottom: 1.25rem; }
.bp-il-title { font-size: .9rem; font-weight: 600; margin-bottom: .6rem; display: flex; align-items: center; gap: .5rem; }
.bp-il-see-all { font-size: .78rem; font-weight: 400; color: var(--bp-nav, #0077b6); text-decoration: none; }
.bp-il-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bp-il-chip { display: inline-block; padding: .3rem .7rem; font-size: .78rem; border: 1px solid var(--bp-border-light, #e5e7eb); border-radius: 1rem; color: var(--bp-text, #333); text-decoration: none; transition: background .15s, border-color .15s; }
.bp-il-chip:hover { background: var(--bp-accent-lt, #e3f1fa); border-color: var(--bp-nav, #0077b6); color: var(--bp-nav, #0077b6); }
.bp-il-chip--tag { background: #f7f5ff; border-color: #e0d8f8; color: #534ab7; }
.bp-il-chip--tag:hover { background: #ece8ff; border-color: #534ab7; }
.bp-il-alpha { display: flex; flex-wrap: wrap; gap: .3rem; }
.bp-il-letter { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: .8rem; font-weight: 600; border: 1px solid var(--bp-border-light, #e5e7eb); border-radius: .35rem; color: var(--bp-text, #333); text-decoration: none; transition: background .15s; }
.bp-il-letter:hover { background: var(--bp-accent-lt, #e3f1fa); color: var(--bp-nav, #0077b6); }
.bp-il-name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.bp-il-name-link { display: block; padding: .45rem .65rem; border: 1px solid var(--bp-border-light, #e5e7eb); border-radius: .35rem; text-decoration: none; transition: border-color .15s, background .15s; }
.bp-il-name-link:hover { border-color: var(--bp-nav, #0077b6); background: var(--bp-accent-lt, #e3f1fa); }
.bp-il-name { display: block; font-size: .85rem; font-weight: 600; color: var(--bp-nav, #0077b6); }
.bp-il-meaning { display: block; font-size: .75rem; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Header logout form — styles the <button> inside .bp-nav-dropdown so it ── */
/* ── matches the adjacent <a> menu items. Logout must POST (antiforgery).  ── */
.bp-nav-dropdown .bp-logout-form { margin: 0; padding: 0; display: block; }
.bp-nav-dropdown .bp-logout-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .75rem;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.bp-nav-dropdown .bp-logout-btn:hover,
.bp-nav-dropdown .bp-logout-btn:focus {
    background: var(--bp-accent-lt, #e3f1fa);
    color: var(--bp-nav, #0077b6);
    outline: none;
}

/* ── .bp-nav-dropdown show/hide — the class is used all over _Header.cshtml ── */
/* ── (Browse Names, Name Generator, Account, etc.) but no base CSS existed. ── */
.bp-nav-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: .4rem 0;
    background: #fff;
    border: 1px solid var(--bp-border-light, #e5e7eb);
    border-radius: .5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    z-index: 600;
    display: none;
}
.bp-nav-item:hover > .bp-nav-dropdown,
.bp-nav-item:focus-within > .bp-nav-dropdown {
    display: block;
}
.bp-nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    color: var(--bp-text-primary, #1b1b1b);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
}
.bp-nav-dropdown > a:hover,
.bp-nav-dropdown > a:focus {
    background: var(--bp-accent-lt, #e3f1fa);
    color: var(--bp-nav, #0077b6);
    outline: none;
}

/* ── User-dropdown Sign Out — it's a <form><button> so default button styles ─ */
/* ── must be reset to look identical to the sibling .bp-user-dd-link anchors.  */
.bp-user-dd-logout-form { margin: 0; padding: 0; display: block; }
.bp-user-dd-logout-form button.bp-user-dd-link {
    width: 100%;
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* ── Cloudflare Turnstile widget spacing ─────────────────────────────────── */
/* Rendered by _Turnstile.cshtml partial; consistent vertical rhythm across forms. */
.turnstile-wrapper {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* ── Silktide cookie launcher icon — hidden globally ─────────────────────── */
/* The library renders a floating cookie button in the bottom-left corner.
   We hide it because the footer "Cookie Preferences" link is the single
   entry-point for re-opening the prefs modal. The element stays in the DOM
   so bachpan-ui.js can still trigger its click() handler. */
#silktide-cookie-icon { display: none !important; }

/* ── Mobile horizontal-scroll guard ──────────────────────────────────────── */
/* Wide rows / overflowing widgets occasionally push the viewport past 100vw
   on small screens. Clip horizontally on html+body so a stray overflow can
   never reveal the page-level scrollbar; legitimate horizontal scrolling is
   still possible inside containers that opt in via overflow-x:auto. */
html, body { overflow-x: hidden; max-width: 100vw; }

/* ── Additional utilities (added during inline-style cleanup) ─────────────
   These are the patterns that turned up in ≥3 views during the 2026-05-19
   audit. Naming follows the existing .bp-{property}-{value} convention. */
.bp-mt-1               { margin-top: 1rem; }
.bp-inline-flex-gap-sm { display: inline-flex; align-items: center; gap: .3rem; }
.bp-link-reset         { color: inherit; text-decoration: none; }