/*
 * India theme for Bootstrap 5.3.8.
 * Palette and layout feel follow the Passport Seva portal: navy and royal blue, a navy-to-maroon band,
 * cream and beige panels and a plain Arial type stack. No emblems, flags or logos are used anywhere.
 * site.css only uses the --brand-* variables below, so another country site can swap this file.
 */

:root {
    /* Brand palette */
    --brand-primary: #2F3BB7;        /* royal blue (white text on it: 8.6:1) */
    --brand-primary-dark: #1926A8;
    --brand-primary-darker: #0C1364;
    --brand-primary-soft: #ECEEFB;
    --brand-link: #005B9C;           /* link blue (7.0:1 on white) */
    --brand-gold: #F5DC98;           /* beige, for panels and buttons on dark backgrounds */
    --brand-gold-dark: #E9C86A;
    --brand-cream: #FFF2CF;          /* top notice bar and notice sections */
    --brand-dark: #0C1364;           /* navy headings and dark panels */
    --brand-dark-2: #071064;
    --brand-navy: #000C80;
    --brand-maroon: #821D16;         /* decorative end of the hero gradient */
    --brand-accent: #8A1F17;         /* deep maroon kicker text (9.2:1 on white) */
    --brand-accent-dark: #6E1812;
    --brand-accent-soft: #FFF6DE;
    --brand-green: #1E7B34;          /* "correct" samples and do-lists (5.4:1) */
    --brand-green-soft: #E7F3EA;
    --brand-danger: #C0262D;         /* "incorrect" samples, don't-lists, warnings (5.6:1) */
    --brand-danger-dark: #971D22;
    --brand-danger-soft: #FCEAEA;
    --brand-sand: #F6F4EE;
    --brand-ink: #191919;
    --brand-official-soft: #EEF1FA;

    /* Navy to maroon band used by the hero, inner page header and footer */
    --brand-hero-gradient: linear-gradient(82deg, #071A49 4.8%, #821D16 106.5%);
    --brand-page-hero-gradient: linear-gradient(82deg, #071A49 4.8%, #821D16 106.5%);
    --brand-button-gradient: linear-gradient(135deg, #006BB3, #2F3BB7);

    /* Bootstrap overrides */
    --bs-font-sans-serif: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", "Noto Sans", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-color: #191919;
    --bs-body-color-rgb: 25, 25, 25;
    --bs-emphasis-color: #0C1364;
    --bs-secondary-color: rgba(25, 25, 25, .74);
    --bs-primary: #2F3BB7;
    --bs-primary-rgb: 47, 59, 183;
    --bs-primary-text-emphasis: #0C1364;
    --bs-primary-bg-subtle: #ECEEFB;
    --bs-primary-border-subtle: #B9BFEA;
    --bs-success: #1E7B34;
    --bs-success-rgb: 30, 123, 52;
    --bs-danger: #C0262D;
    --bs-danger-rgb: 192, 38, 45;
    --bs-dark: #0C1364;
    --bs-dark-rgb: 12, 19, 100;
    --bs-link-color: #005B9C;
    --bs-link-color-rgb: 0, 91, 156;
    --bs-link-hover-color: #0C1364;
    --bs-link-hover-color-rgb: 12, 19, 100;
    --bs-border-radius: .375rem;
    --bs-border-radius-lg: .625rem;
    --bs-border-radius-xl: .875rem;
    --bs-focus-ring-color: rgba(47, 59, 183, .35);
}

/* Blue gradient button, like the portal's Register button */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-darker);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: var(--brand-primary);
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 47, 59, 183;
    background-image: var(--brand-button-gradient);
}

.btn-primary:hover,
.btn-primary:active {
    background-image: none;
}

/* Outline button, like the portal's Login button */
.btn-outline-primary {
    --bs-btn-color: var(--brand-dark);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-focus-shadow-rgb: 47, 59, 183;
}

.btn-outline-light {
    --bs-btn-hover-color: var(--brand-dark);
}

/* Beige button for dark backgrounds (hero, CTA card) */
.btn-gold {
    --bs-btn-color: #0C1364;
    --bs-btn-bg: var(--brand-gold);
    --bs-btn-border-color: var(--brand-gold);
    --bs-btn-hover-color: #0C1364;
    --bs-btn-hover-bg: #FAE9BC;
    --bs-btn-hover-border-color: #FAE9BC;
    --bs-btn-active-color: #0C1364;
    --bs-btn-active-bg: var(--brand-gold-dark);
    --bs-btn-active-border-color: var(--brand-gold-dark);
    --bs-btn-focus-shadow-rgb: 245, 220, 152;
}

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

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

.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);
}

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

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.accordion-button:focus-visible,
summary:focus-visible {
    outline: 3px solid #2F3BB7;
    outline-offset: 2px;
    box-shadow: none;
}

.hero-home a:focus-visible,
.page-hero a:focus-visible,
.site-footer a:focus-visible,
.cta-card a:focus-visible {
    outline-color: #F5DC98;
}