/**
 * fh-i18n.css v1.0.0  —  Devanagari typography + language toggle pill
 * ===========================================================================
 * Everything here is scoped to the plugin's own roots, so the Hindi font never
 * leaks into the surrounding WordPress theme:
 *
 *   .gp-fh-content        the in-page app area
 *   .gp-fh-modal-overlay  modals — note v12.2 relocates these to <body> on
 *                         phones, which is why the overlay is listed as a root
 *                         in its own right rather than nested under .content
 *   .gp-fh-langtoggle     the pill itself, which may sit in the site header
 *
 * Rules fire only under <html data-fh-lang="hi">, set by fh-i18n.js before
 * first paint.
 */

/* --------------------------------------------------------------- the font */
/* Noto Sans Devanagari is enqueued separately as 'gp-fh-devanagari' in
   register_assets() so it downloads in parallel with this file. An @import
   here would serialise the two requests. */

:root {
    --gp-fh-font-hi: 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', sans-serif;
}

[data-fh-lang='hi'] .gp-fh-content,
[data-fh-lang='hi'] .gp-fh-modal-overlay,
[data-fh-lang='hi'] .gp-fh-langtoggle {
    font-family: var(--gp-fh-font-hi);
    /* Devanagari carries matras above and below the baseline; the Latin
       default of ~1.4 clips them in dense tables. */
    line-height: 1.65;
}

/* Form controls do not inherit font-family in any browser — name it. */
[data-fh-lang='hi'] .gp-fh-content input,
[data-fh-lang='hi'] .gp-fh-content select,
[data-fh-lang='hi'] .gp-fh-content textarea,
[data-fh-lang='hi'] .gp-fh-content button,
[data-fh-lang='hi'] .gp-fh-modal-overlay input,
[data-fh-lang='hi'] .gp-fh-modal-overlay select,
[data-fh-lang='hi'] .gp-fh-modal-overlay textarea,
[data-fh-lang='hi'] .gp-fh-modal-overlay button {
    font-family: var(--gp-fh-font-hi);
}

/* Amounts, dates and IDs stay in Western digits and Latin metrics — Devanagari
   numerals next to ₹ read badly, and the tabular alignment is worth keeping. */
[data-fh-lang='hi'] .gp-bgt-row-amt,
[data-fh-lang='hi'] .gp-bgt-sc-value,
[data-fh-lang='hi'] .gp-fh-amount,
[data-fh-lang='hi'] .gp-bgt-amt,
[data-fh-lang='hi'] [data-fh-numeric] {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
}

/* Hindi labels run 20–40% longer than English. Let headers wrap instead of
   forcing horizontal scroll on the report and summary tables. */
[data-fh-lang='hi'] .gp-bgt-rtab,
[data-fh-lang='hi'] .gp-fh-modal-tabs button {
    white-space: normal;
    line-height: 1.4;
}

[data-fh-lang='hi'] table th {
    white-space: normal;
    word-break: break-word;
}

/* Buttons with a fixed width in the English layout need room to breathe. */
[data-fh-lang='hi'] .gp-btn-sm {
    padding-inline: 10px;
    white-space: nowrap;
}

/* ------------------------------------------------------- the toggle pill */

.gp-fh-langtoggle {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--gp-border, #e2e8f0);
    border-radius: 999px;
    overflow: hidden;
    background: var(--gp-surface, #fff);
    vertical-align: middle;
    line-height: 1;
    flex: 0 0 auto;
}

.gp-fh-langtoggle .gp-fh-lang-btn {
    appearance: none;
    border: 0;
    margin: 0;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gp-text-muted, #475569);
    background: transparent;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.gp-fh-langtoggle .gp-fh-lang-btn + .gp-fh-lang-btn {
    border-left: 1px solid var(--gp-border, #e2e8f0);
}

.gp-fh-langtoggle .gp-fh-lang-btn:hover {
    background: var(--gp-hover, #f1f5f9);
}

.gp-fh-langtoggle .gp-fh-lang-btn.active {
    background: var(--gp-primary, #2563eb);
    color: #fff;
}

.gp-fh-langtoggle .gp-fh-lang-btn:focus-visible {
    outline: 2px solid var(--gp-primary, #2563eb);
    outline-offset: -2px;
}

/* The Hindi label needs the Devanagari face even while the UI is in English,
   so "हिन्दी" is legible as the thing you are switching TO. */
.gp-fh-langtoggle .gp-fh-lang-btn[lang='hi'] {
    font-family: var(--gp-fh-font-hi);
}

@media (max-width: 480px) {
    .gp-fh-langtoggle .gp-fh-lang-btn {
        padding: 4px 9px;
        font-size: 11px;
    }
}

@media (prefers-color-scheme: dark) {
    .gp-fh-langtoggle {
        background: var(--gp-surface, #1e293b);
        border-color: var(--gp-border, #334155);
    }
    .gp-fh-langtoggle .gp-fh-lang-btn {
        color: var(--gp-text-muted, #cbd5e1);
    }
    .gp-fh-langtoggle .gp-fh-lang-btn:hover {
        background: var(--gp-hover, #334155);
    }
}