/*
 * China theme for Bootstrap 5.3.8.
 * Palette and feel follow the public pages of China Consular Services (cs.mfa.gov.cn): consular blue,
 * pale sky-blue banners, grey accordion rows and an orange accent for the active item.
 * site.css only uses the --brand-* variables below, so another country site can swap this file.
 * Fonts: system stacks only. Chinese text falls back to the platform CJK fonts (PingFang SC, Microsoft YaHei, Noto Sans SC).
 */

:root {
    /* Brand palette */
    --brand-primary: #1D69B7;        /* consular blue (white text on it: 5.6:1; on white: 5.6:1) */
    --brand-primary-dark: #0059B1;   /* 6.9:1 on white */
    --brand-primary-darker: #0B4A8B;
    --brand-primary-soft: #E8F4FD;
    --brand-primary-softer: #F2F8FE;
    --brand-sky: #D6EBFB;            /* banner sky */
    --brand-sky-deep: #9FCBF2;
    --brand-border: #B8D8F5;
    --brand-border-soft: #DCE8F5;
    --brand-orange: #F59703;         /* active-item accent, decorative only (never text on white) */
    --brand-orange-text: #A65400;    /* orange for text (5.4:1 on white) */
    --brand-orange-soft: #FFF4E0;
    --brand-dark: #0B3B6E;           /* headings and footer base */
    --brand-ink: #333333;
    --brand-muted: #5E6672;          /* secondary text (5.9:1 on white) */
    --brand-page: #F5F7FA;           /* page background */
    --brand-grey-row: #F1F1F1;       /* accordion rows */
    --brand-green: #2E7D32;          /* "correct" samples and do-lists (5.1:1) */
    --brand-green-soft: #E6F2E7;
    --brand-danger: #C62F2B;         /* "incorrect" samples, don't-lists, warnings (5.5:1) */
    --brand-danger-dark: #9B2420;
    --brand-danger-soft: #FBE9E8;
    --brand-official-soft: #ECF5FD;

    /* Banner sky: pale consular blue, as on the official banner */
    --brand-hero-gradient: linear-gradient(180deg, #EAF5FE 0%, #D6EBFB 38%, #B9DBF7 72%, #A4CFF4 100%);
    --brand-page-hero-gradient: linear-gradient(180deg, #EEF7FE 0%, #D9ECFB 55%, #C3E0F8 100%);

    /* Bootstrap overrides */
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: #333333;
    --bs-body-color-rgb: 51, 51, 51;
    --bs-body-bg: #F5F7FA;
    --bs-emphasis-color: #0B3B6E;
    --bs-secondary-color: #5E6672;
    --bs-primary: #1D69B7;
    --bs-primary-rgb: 29, 105, 183;
    --bs-primary-text-emphasis: #0B4A8B;
    --bs-primary-bg-subtle: #E8F4FD;
    --bs-primary-border-subtle: #B8D8F5;
    --bs-success: #2E7D32;
    --bs-success-rgb: 46, 125, 50;
    --bs-danger: #C62F2B;
    --bs-danger-rgb: 198, 47, 43;
    --bs-dark: #0B3B6E;
    --bs-dark-rgb: 11, 59, 110;
    --bs-link-color: #0059B1;
    --bs-link-color-rgb: 0, 89, 177;
    --bs-link-hover-color: #0B4A8B;
    --bs-link-hover-color-rgb: 11, 74, 139;
    --bs-border-color: #DCE3EC;
    --bs-border-radius: .375rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-xl: .75rem;
    --bs-focus-ring-color: rgba(29, 105, 183, .35);
}

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-darker);
    --bs-btn-active-border-color: var(--brand-primary-darker);
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: var(--brand-primary);
    --bs-btn-focus-shadow-rgb: 29, 105, 183;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary-dark);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: 29, 105, 183;
}

/* White pill button for blue panels (CTA cards, tiles) */
.btn-on-blue {
    --bs-btn-color: var(--brand-primary-dark);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--brand-primary-darker);
    --bs-btn-hover-bg: var(--brand-primary-soft);
    --bs-btn-hover-border-color: var(--brand-primary-soft);
    --bs-btn-active-color: var(--brand-primary-darker);
    --bs-btn-active-bg: #D2E7FA;
    --bs-btn-active-border-color: #D2E7FA;
    --bs-btn-focus-shadow-rgb: 255, 255, 255;
}

.text-primary { color: var(--brand-primary) !important; }
.bg-brand-dark { background-color: var(--brand-dark) !important; }
.text-accent { color: var(--brand-orange-text) !important; }

.badge-accent {
    background-color: var(--brand-orange-soft);
    color: var(--brand-orange-text);
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: var(--brand-primary);
    --bs-dropdown-link-hover-bg: var(--brand-primary-soft);
    --bs-dropdown-link-hover-color: var(--brand-primary-darker);
    --bs-dropdown-border-color: var(--brand-border-soft);
    --bs-dropdown-font-size: .95rem;
}

.form-control:focus,
.btn:focus-visible {
    border-color: var(--bs-primary-border-subtle);
}

/* Keep keyboard focus clearly visible everywhere: dark blue on light areas, white on blue panels */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--brand-primary-darker);
    outline-offset: 2px;
    box-shadow: none;
}

.cta-card :focus-visible,
.site-footer :focus-visible,
.tile:focus-visible {
    outline-color: #fff;
}