/* dbim.css: the DBIM v3.0 colour and type layer over Bootstrap 5.2.3. Identical in all four apps.
   Linked on every page straight after fonts.css. base-layout.css, sfc-layout.css and home.css use only these variables.

   TO CHANGE THE COLOUR GROUP: replace the eight values in block 1 with another group's row from the table below it,
   copy this file to the other three apps, and bump dbim.css?version= on every page. No other file holds a group colour. */

:root {
    /* 1. Primary colour group (DBIM 2.1). Selected: Blue. Shade 1 is the key colour. */
    --dbim-c1: #162F6A;
    --dbim-c2: #214AAB;
    --dbim-c3: #5279D7;
    --dbim-c4: #A3BBF3;
    --dbim-c5: #D2DFFF;
    --dbim-c1-rgb: 22, 47, 106;
    --dbim-c2-rgb: 33, 74, 171;
    /* The lighter fill behind white text (button hover, card corners): shade 2 where white on it is at least 4.5:1 */
    --dbim-hover: var(--dbim-c2);
    /* The six groups: shades 1-5, shade 1 and shade 2 as r, g, b, then the hover fill (white on it: contrast)
       Burgundy       #6C1340 #A32966 #DB70A6 #EBADCC #FAEBF2   108, 19, 64    163, 41, 102   var(--dbim-c2)
       Purple         #29136C #4729A3 #8B70DB #BDADEB #EEEBFA   41, 19, 108    71, 41, 163    var(--dbim-c2)
       Blue           #162F6A #214AAB #5279D7 #A3BBF3 #D2DFFF   22, 47, 106    33, 74, 171    var(--dbim-c2)
       Green          #0F5757 #2D8686 #75BDBD #A6D9D9 #D9F2F2   15, 87, 87     45, 134, 134   var(--dbim-c1)
       Chrome Yellow  #5D3E00 #916100 #DDA73A #F4D390 #FFEECC   93, 62, 0      145, 97, 0     var(--dbim-c2)
       Cinnamon Red   #771D1D #A72626 #D75151 #FAAAAA #FCDADA   119, 29, 29    167, 38, 38    var(--dbim-c2)
       White on shade 2: Burgundy 6.9, Purple 9.9, Blue 8.0, Green 4.3 (too low, hence shade 1), Chrome Yellow 5.4, Cinnamon Red 7.1.
       Use: white text only on shade 1 or the hover fill; shade 2 for borders and accents; shades 4-5 for backgrounds
       under dark text; never text on shade 3 (DBIM Figure 17). */

    /* 2. Functional palette (DBIM 2.2) */
    --dbim-linen: #EBEAEA;
    --dbim-white: #FFFFFF;
    --dbim-text: #150202;
    --dbim-black: #000000;
    --dbim-success: #198754;
    --dbim-warning: #FFC107;
    --dbim-error: #DC3545;
    --dbim-info: #0D6EFD;
    --dbim-grey1: #C6C6C6;
    --dbim-grey2: #8E8E8E;
    --dbim-grey3: #606060;

    /* 3. Type scale (DBIM 4.3.1 desktop), in rem of the 16px root so the A-/A/A+ buttons scale all of it */
    --dbim-fs-h1: 2.25rem;
    --dbim-fs-h2: 1.5rem;
    --dbim-fs-h3: 1.25rem;
    --dbim-fs-p1: 1rem;
    --dbim-fs-p2: 0.875rem;
    --dbim-fs-small: 0.75rem;

    /* 4. Bootstrap 5.2.3 reads these */
    --bs-body-font-size: var(--dbim-fs-p1);
    --bs-body-color: var(--dbim-text);
    --bs-body-color-rgb: 21, 2, 2;
    --bs-primary: var(--dbim-c1);
    --bs-primary-rgb: var(--dbim-c1-rgb);
    --bs-link-color: var(--dbim-info);
    --bs-link-hover-color: var(--dbim-c1);
}

/* DBIM 4.3.2 mobile type scale */
@media (max-width: 767.98px) {
    :root {
        --dbim-fs-h1: 1.5rem;
        --dbim-fs-h2: 1.25rem;
        --dbim-fs-h3: 1rem;
        --dbim-fs-p1: 0.875rem;
        --dbim-fs-p2: 0.75rem;
        --dbim-fs-small: 0.625rem;
    }
}

/* The root stays at the browser's 16px; the A-/A/A+ buttons (setTextSize in index.js / home.js) step it */
html { font-size: 100%; }
html.dbim-text-sm { font-size: 87.5%; }
html.dbim-text-lg { font-size: 112.5%; }

/* Headings on the scale. DBIM has no H4-H6: h4 takes H3, and h5/h6 (used as field captions) take P1 */
h1, .h1 { font-size: var(--dbim-fs-h1); }
h2, .h2 { font-size: var(--dbim-fs-h2); }
h3, .h3, h4, .h4 { font-size: var(--dbim-fs-h3); }
h5, .h5, h6, .h6 { font-size: var(--dbim-fs-p1); }

/* Primary actions in the key colour, with distinct hover/active/focus states (DBIM 4.5 i) */
.btn-primary {
    --bs-btn-color: var(--dbim-white);
    --bs-btn-bg: var(--dbim-c1);
    --bs-btn-border-color: var(--dbim-c1);
    --bs-btn-hover-color: var(--dbim-white);
    --bs-btn-hover-bg: var(--dbim-hover);
    --bs-btn-hover-border-color: var(--dbim-hover);
    --bs-btn-focus-shadow-rgb: var(--dbim-c2-rgb);
    --bs-btn-active-color: var(--dbim-white);
    --bs-btn-active-bg: var(--dbim-hover);
    --bs-btn-active-border-color: var(--dbim-c1);
    --bs-btn-disabled-color: var(--dbim-white);
    --bs-btn-disabled-bg: var(--dbim-c1);
    --bs-btn-disabled-border-color: var(--dbim-c1);
}
.btn-outline-primary {
    --bs-btn-color: var(--dbim-c1);
    --bs-btn-border-color: var(--dbim-c1);
    --bs-btn-hover-color: var(--dbim-white);
    --bs-btn-hover-bg: var(--dbim-c1);
    --bs-btn-hover-border-color: var(--dbim-c1);
    --bs-btn-focus-shadow-rgb: var(--dbim-c2-rgb);
    --bs-btn-active-color: var(--dbim-white);
    --bs-btn-active-bg: var(--dbim-c1);
    --bs-btn-active-border-color: var(--dbim-c1);
    --bs-btn-disabled-color: var(--dbim-c1);
    --bs-btn-disabled-border-color: var(--dbim-c1);
}

/* Bootstrap parts that draw its own blue directly rather than through --bs-primary */
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--dbim-c3);
    box-shadow: 0 0 0 0.25rem rgba(var(--dbim-c2-rgb), 0.25);
}
.form-check-input:checked {
    background-color: var(--dbim-c1);
    border-color: var(--dbim-c1);
}
.pagination {
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--dbim-c2-rgb), 0.25);
    --bs-pagination-active-bg: var(--dbim-c1);
    --bs-pagination-active-border-color: var(--dbim-c1);
}
.accordion {
    --bs-accordion-btn-focus-border-color: var(--dbim-c3);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--dbim-c2-rgb), 0.25);
    --bs-accordion-active-color: var(--dbim-c1);
    --bs-accordion-active-bg: var(--dbim-c5);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--dbim-c1); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--dbim-c1); }
.btn-close:focus { box-shadow: 0 0 0 0.25rem rgba(var(--dbim-c2-rgb), 0.25); }

/* The 16px root gives the form cards more padding: keep the CAPTCHA image inside its bordered box on narrow phones */
#captcha-image-div img { max-width: 100%; height: auto; }

/* 5. Header (DBIM 5.4.1, Header 1; markup in Home/header.jsp). High-contrast colours for it are in base-layout-high-contrast.css */

/* First thing a keyboard reaches: off-screen until it has focus */
.dbim-skip-link {
    position: absolute;
    left: 0.5rem;
    top: -5rem;
    z-index: 1100;
    padding: 0.5rem 1rem;
    background: var(--dbim-c1);
    color: var(--dbim-white);
    border-radius: 0 0 0.375rem 0.375rem;
}
.dbim-skip-link:focus {
    top: 0;
    color: var(--dbim-white);
}
/* Both skip links land here; the margin keeps the sticky menu off what follows */
#main-content { scroll-margin-top: 4rem; }
#main-content:focus { outline: 0; }

.dbim-header { background: var(--dbim-white); }
.dbim-header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Lockup 2 (DBIM 5.2.2): the emblem keeps its own proportions, so only its height is set */
.dbim-lockup {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    color: var(--dbim-text);
    text-decoration: none;
}
.dbim-lockup:hover { color: var(--dbim-c1); }
.dbim-emblem {
    flex: none;
    height: 3.5rem;
    width: auto;
}
.dbim-lockup-text {
    display: flex;
    flex-direction: column;
    font-size: var(--dbim-fs-p2);
    line-height: 1.3;
}
.dbim-lockup-text strong {
    font-size: var(--dbim-fs-p1);
    font-weight: 700;
}

.dbim-search {
    display: flex;
    flex: 1 1 14rem;
    max-width: 24rem;
}
/* line-height is set here because one page's own stylesheet (ric.css) stretches every .form-control */
.dbim-search .form-control {
    border-color: var(--dbim-grey3);
    border-right: 0;
    border-radius: 0.375rem 0 0 0.375rem;
    line-height: 1.5;
}
.dbim-search .btn {
    display: flex;
    align-items: center;
    border-radius: 0 0.375rem 0.375rem 0;
}
/* Line icons drawn in the markup; they take the colour of their control */
.dbim-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dbim-cobrand { flex: none; }
.dbim-cobrand img {
    display: block;
    height: 3.5rem;
    width: auto;
}

/* User controls (DBIM Figure 42): skip, language, accessibility. Bhashini's own button is sized to match */
.dbim-user-controls {
    display: flex;
    flex: none;
    align-items: center;
}
.dbim-user-controls > * + * { border-left: 1px solid var(--dbim-c1); }
.dbim-control,
.dbim-user-controls .bhashini-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--dbim-c1);
}
.dbim-control:hover,
.dbim-user-controls .bhashini-dropdown-btn:hover {
    background: var(--dbim-c5);
    color: var(--dbim-c1);
}
.dbim-control:focus-visible,
.dbim-user-controls .bhashini-dropdown-btn:focus-visible {
    background: var(--dbim-c5);
    outline: 2px solid var(--dbim-c1);
    outline-offset: -2px;
}
.dbim-user-controls .bhashini-dropdown-btn svg {
    width: 1.75rem;
    height: 1.75rem;
}
/* Bhashini's icon carries its own colour on its paths: draw it in the key colour like the other two */
.dbim-user-controls .bhashini-dropdown-btn svg path { fill: var(--dbim-c1); }
/* The controls sit at the right edge, so Bhashini's language list opens leftwards from its button and stays on the screen.
   The plugin positions the list with an inline style (and gets it wrong on phones), which only !important can override.
   It always opens downwards: on a short screen (400% zoom) the plugin would flip it upwards, where there is no room */
.dbim-user-controls .bhashini-dropdown-content {
    top: 100% !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
}
.dbim-a11y-menu .dropdown-item { font-size: var(--dbim-fs-p2); }

/* Menu row: flat and white; it stays in view while scrolling (DBIM 9). The resets undo the old raised-button look */
#nav-bar.dbim-nav {
    padding-top: 0;
    padding-bottom: 0;
    background: var(--dbim-white);
    border-top: 1px solid var(--dbim-grey1);
    border-bottom: 1px solid var(--dbim-grey1);
    font-size: var(--dbim-fs-p1);
}
#nav-bar.dbim-nav .nav-item { margin: 0; }
#nav-bar.dbim-nav .nav-link {
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--dbim-text);
    font-size: var(--dbim-fs-p1);
    font-weight: 500;
}
#nav-bar.dbim-nav .nav-link:hover {
    background: var(--dbim-c5);
    color: var(--dbim-c1);
}
/* kept apart from :hover: a browser that does not know :focus-visible drops the whole rule it appears in */
#nav-bar.dbim-nav .nav-link:focus-visible {
    background: var(--dbim-c5);
    color: var(--dbim-c1);
}
#nav-bar.dbim-nav .nav-link.active {
    border-bottom-color: var(--dbim-c1);
    color: var(--dbim-c1);
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    #nav-bar.dbim-nav .nav-link { padding-left: 0.25rem; }
}
/* Once the menu is laid out in a row its items sit closer, so the longest menu (the feedback app's eight items) stays on one
   line: at 1280px, and from 1400px up, where Bootstrap caps the container at 1320px and the row has less room than at 1399px */
@media (min-width: 1200px) {
    #nav-bar.dbim-nav .nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Tablets: the search box drops to its own line under the name */
@media (max-width: 991.98px) {
    .dbim-lockup { flex: 1 1 0; }
    .dbim-search {
        order: 4;
        flex-basis: 100%;
        max-width: none;
    }
}

/* Phones: name and logo on the first line, search and the three controls on the second */
@media (max-width: 767.98px) {
    .dbim-header-bar {
        gap: 0.5rem 0.75rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    /* the name takes the first line up to the logo, so the search box cannot fit there and wraps */
    .dbim-lockup {
        flex: 1 1 calc(100% - 6rem);
        gap: 0.5rem;
    }
    .dbim-emblem,
    .dbim-cobrand img { height: 2.75rem; }
    .dbim-search {
        order: 3;
        flex: 1 1 0;
        min-width: 8rem;
    }
    .dbim-user-controls { order: 4; }
    .dbim-control,
    .dbim-user-controls .bhashini-dropdown-btn { width: 2.5rem; }
}