/* ==========================================================================
   DBIM v3.0 conformance overrides
   Loaded LAST from partials/header_test1.blade.php (after combined.min.css and
   slider.css). It does not restyle the site; it only closes the measured gaps
   from the DBIM audit (see DBIM_AUDIT.md):
     1. spacing tokens + one section rhythm (24px)         DBIM 2/spacing
     2. type-scale tokens applied to the off-scale text     DBIM 4.3
     3. two off-palette blues -> DBIM key colour #162F6A    DBIM 2.1
     4. status/functional colours + accessible grey text    DBIM 2.2 / 4.4
     5. focus visibility, target size, reduced motion       WCAG 2.2 AA
   Dark theme ([data-theme="dark"]) is left untouched.
   ========================================================================== */

:root {
    /* spacing scale (4 / 8 / 12 / 16 / 24 / 32 / 40 / 48) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --section-gap: var(--space-5);

    /* DBIM type scale, desktop */
    --dbim-h1: 36px;
    --dbim-h2: 24px;
    --dbim-h3: 20px;
    --dbim-p1: 16px;
    --dbim-p2: 14px;
    --dbim-small: 12px;

    /* palette fallbacks (the same tokens already exist in combined.min.css) */
    --brand-key: #162F6A;
    --brand-v1: #214AAB;
    --color-danger: #DC3545;
    --color-grey-03: #606060;

    --focus-ring: 3px solid #214AAB;
}

/* DBIM type scale, mobile */
@media (max-width: 767.98px) {
    :root {
        --dbim-h1: 24px;
        --dbim-h2: 20px;
        --dbim-h3: 16px;
        --dbim-p1: 14px;
        --dbim-p2: 12px;
        --dbim-small: 10px;
    }
}

/* ---------- 1. spacing: one rhythm between the home page blocks ---------- */
.ahci-tabs {
    margin-bottom: var(--section-gap);          /* was 28px (off the spacing scale) */
}

.ahci-tab-content li {
    line-height: 1.5;                           /* DBIM: 1.2 - 1.5 (was ~1.55) */
}

/* ---------- 2. type scale ---------- */
.ahci-slider .indexBanner .contentWidthSlider .sliderText .title { font-size: var(--dbim-h3); }   /* was fluid clamp(), 20.8px */
.ahci-slider .indexBanner .contentWidthSlider .sliderText .date  { font-size: var(--dbim-p2); }   /* was fluid clamp(), 14.4px */
.sb-links-list li                  { font-size: var(--dbim-p2); }      /* was 12.5px */
.ahci-news-list .date              { font-size: var(--dbim-small); }   /* was 11.5px */
.ahci-tab-actions a                { font-size: var(--dbim-small); }   /* was 12.5px */
.ahci-marquee-label                { font-size: var(--dbim-small); }   /* was 11.5px */
.sb-card .sb-name                  { font-size: var(--dbim-p1); }      /* was 15px  */
.sb-card .sb-profile               { font-size: var(--dbim-p2); }      /* was 12.5px */
.sb-card .sb-links-heading         { font-size: var(--dbim-h3); }      /* was 15px; now a real heading */
.ahci-skip-btn                     { font-size: var(--dbim-p2); }      /* was 13px  */

/* ---------- 3 + 4. colour (light theme only; dark theme keeps its own rules) ---------- */
:root:not([data-theme="dark"]) #mainNav.mainNavigation {
    background-color: var(--brand-key);         /* was #19366F, not in the DBIM blue group */
}

:root:not([data-theme="dark"]) #footer.footer {
    background-color: var(--brand-key);         /* was #0B2850, not in the DBIM blue group */
}

:root:not([data-theme="dark"]) .ahci-news-list .date {
    color: var(--color-grey-03);                /* was #888 = 3.5:1 on white; #606060 = 6.4:1 */
}

.ahci-skip-btn {
    background-color: var(--color-danger);      /* was #B22222; DBIM Coral Red */
    color: #FFFFFF;
}

.ahci-skip-btn:hover {
    background-color: #B02A37;                  /* 6.5:1 with white text */
}

/* ---------- 5a. keyboard focus ---------- */
.search-box input:focus-visible,
#searchBox:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

iframe:focus-visible,
.ahci-tab-nav a:focus-visible,
.ahci-tab-actions a:focus-visible,
.sb-profile:focus-visible,
.ahci-skip-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* The sub-menu toggle buttons only exist for the mobile menu. On desktop they
   have no size but stayed in the Tab order (3 invisible focus stops). */
@media (min-width: 992px) {
    #nav .submenu-toggle {
        display: none !important;
    }
}

/* Esc dismisses an open desktop sub-menu (WCAG 1.4.13); toggled by Javascript/dbim-a11y.js */
@media (min-width: 992px) {
    #nav.dbim-dismissed li > ul {
        display: none !important;
    }
}

/* ---------- 5b. target size (WCAG 2.5.8 >= 24px; DBIM/coarse pointers 44px) ---------- */
.ahci-tab-actions a,
.ahci-bottom-banner a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.ahci-tab-actions a {
    padding-inline: var(--space-2);
}

@media (pointer: coarse) {
    .ahci-tab-actions a,
    .ahci-bottom-banner a,
    .sb-card .sb-profile,
    #footer.footer a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ---------- 5c. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
    }

    .animated,
    [class*="wow"] {
        animation: none !important;
    }
}

/* Visually hidden, still announced (used for section headings that have no visible title) */
.dbim-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* ---------- inner pages: remaining off-scale sizes found by the page audit ---------- */
.inFocusCnt a                      { font-size: var(--dbim-p1); }      /* press / UNSC lists: was 15px */
body p.size11                     { font-size: var(--dbim-p2); }      /* was 13.5px */
body .ag-card__meta > .ag-card__title                    { font-size: var(--dbim-p1); }      /* gallery cards: was 15px */
body .ag-card__meta > .ag-card__desc                     { font-size: var(--dbim-small); }   /* was 12.5px */
body .ag-card__meta > .ag-card__count                    { font-size: var(--dbim-small); color: var(--brand-v1); }  /* was 11.5px, 4.5:1 */
body .ag-card__meta > .ag-card__year                     { font-size: var(--dbim-small); color: var(--color-grey-03); } /* was 11px, 3.5:1 */
.fieldName label.fLabel,
.fieldName span.fLabel             { font-size: var(--dbim-p1); }      /* feedback form: was 15px */
.watch-overlay                     { font-size: var(--dbim-p1); }      /* video gallery: was 15px */

/* WCAG 2.5.8: radio/checkbox targets of 13px are below the 24px minimum */
.fieldValues input[type="radio"],
.fieldValues input[type="checkbox"] {
    width: 24px;
    height: 24px;
    margin: 0 var(--space-2) 0 0;
    vertical-align: middle;
}

/* ==========================================================================
   UI POLISH - visual states and finish only.
   No margin / padding / width / height / position is changed here, so the page
   layout is identical (verified by comparing element rectangles before/after).
   Light-theme colours are scoped with :root:not([data-theme="dark"]).
   ========================================================================== */

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a,
button {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

/* ----- navigation: clear hover / keyboard-open indicator ----- */
#nav > li > a.menuFirstNode {
    transition-property: background-color, box-shadow;
}

#nav > li:hover > a.menuFirstNode,
#nav > li:focus-within > a.menuFirstNode {
    box-shadow: inset 0 -3px 0 var(--brand-v3, #A3BBF3);
}

:root:not([data-theme="dark"]) #header #nav ul.menuSubUl li > a:hover,
:root:not([data-theme="dark"]) #header #nav ul.menuSubUl li > a:focus-visible {
    background-color: var(--brand-v4, #D2DFFF);
    color: var(--brand-key);
}

/* ----- home page: tabs, lists, actions ----- */
.ahci-tab-nav a:hover {
    color: var(--brand-v1);
}

:root:not([data-theme="dark"]) .ahci-news-list li:hover {
    background-color: #F4F7FF;
}

.ahci-news-list a:hover,
.sb-links-list a:hover,
.ahci-bottom-banner > a:hover {
    color: var(--brand-v1);
}

.ahci-bottom-banner > a {
    color: var(--brand-v1);                     /* was the default browser blue */
}

.ahci-tab-actions a {
    color: var(--brand-key);
    font-weight: 500;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--brand-v3, #A3BBF3);
}

:root:not([data-theme="dark"]) .ahci-tab-actions a:hover {
    background-color: var(--brand-v4, #D2DFFF);
}

.ahci-skip-btn {
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(21, 2, 2, 0.2);
}

/* ----- sidebar cards ----- */
.sb-card {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(21, 2, 2, 0.08);
}

.sb-card:hover {
    box-shadow: 0 6px 18px rgba(22, 47, 106, 0.14);
}

.sb-card .sb-profile:hover,
.sb-card .sb-profile:focus-visible {
    background-color: var(--brand-key);
    border-color: var(--brand-key);
    color: #FFFFFF;
}

.ahci-bottom-banner img {
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(21, 2, 2, 0.15);
}

/* ----- footer ----- */
#footer a:hover {
    color: var(--brand-v4, #D2DFFF);
}

.socialIconBox a:hover,
.socialIconBox a:focus-visible {
    background-color: rgba(255, 255, 255, 0.16);
}

/* ----- inner pages: links, form fields, buttons ----- */
#innerContent a:not(.btn):hover {
    color: var(--brand-v1);
}

#innerContent input[type="text"],
#innerContent input[type="email"],
#innerContent input[type="tel"],
#innerContent input[type="password"],
#innerContent input[type="number"],
#innerContent textarea,
#innerContent select {
    border: 1px solid var(--color-grey-02, #8E8E8E);
    border-radius: 6px;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s;
}

#innerContent input[type="text"]:hover,
#innerContent input[type="email"]:hover,
#innerContent input[type="tel"]:hover,
#innerContent input[type="password"]:hover,
#innerContent input[type="number"]:hover,
#innerContent textarea:hover,
#innerContent select:hover {
    border-color: var(--brand-v1);
}

#innerContent input[type="text"]:focus,
#innerContent input[type="email"]:focus,
#innerContent input[type="tel"]:focus,
#innerContent input[type="password"]:focus,
#innerContent input[type="number"]:focus,
#innerContent textarea:focus,
#innerContent select:focus {
    border-color: var(--brand-v1);
    box-shadow: 0 0 0 3px rgba(33, 74, 171, 0.2);
}

#innerContent .btn.btn-primary,
#innerContent input[type="submit"] {
    background-color: var(--brand-key);
    border-color: var(--brand-key);
    border-radius: 6px;
    color: #FFFFFF;
    font-weight: 600;
    cursor: pointer;
}

#innerContent .btn.btn-primary:hover,
#innerContent input[type="submit"]:hover {
    background-color: var(--brand-v1);
    border-color: var(--brand-v1);
}

#innerContent .btn.btn-primary:focus-visible,
#innerContent input[type="submit"]:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}

/* ==========================================================================
   Desktop main menu fixes
   1. Items were given equal slots (flex: 1 1 0; min-width: 0) while labels are
      white-space: nowrap, so long labels ("India and United Nations",
      "Resource/Citizen's Corner") overflowed into their neighbours and the
      hover highlight overlapped the next item. Items now start from their own
      content width and share the remaining space; where all labels cannot fit
      on one line (992 - 1279px) they wrap instead of overflowing.
   2. The sub-menu indicator was a small bitmap-looking blue square
      (.rightArrowImg background image). Replaced by a CSS chevron.
   ========================================================================== */
@media (min-width: 992px) {
    #mainNav #nav > li {
        flex: 1 1 auto;
    }

    #mainNav #nav > li > a {
        text-align: center;
    }

    #nav li li > em.rightArrowImg {
        position: absolute;
        top: 50%;
        right: var(--space-4);
        width: 7px;
        height: 7px;
        margin: -4px 0 0;
        padding: 0;
        background: none !important;
        border-right: 2px solid var(--brand-key);
        border-bottom: 2px solid var(--brand-key);
        transform: rotate(-45deg);
        pointer-events: none;
    }

    html[data-theme="dark"] #nav li li > em.rightArrowImg {
        border-color: #FFFFFF;
    }
}

@media (min-width: 992px) and (max-width: 1279.98px) {
    #mainNav #nav > li > a {
        white-space: normal;
        line-height: 1.25;
        padding-block: var(--space-2);
    }
}

/* ==========================================================================
   Home page: bordered content sections + paired rows (same height)
   Left sections are now boxed like the sidebar cards. In two-column mode
   (>= 992px) the page grid is laid out in rows so that

       row 1   [ What's New / Press Releases / MEA ]  |  [ Ambassador Harish card ]   same height
       row 2+  [ everything else on the left        ]  |  [ Ambassador Yojna card, Important links ]

   and both columns end on the same line (the cards share the extra height).
   Below 992px the page is one column and the markup flows exactly as before.
   ========================================================================== */

/* ----- bordered left sections (all widths) ----- */
.ahci-tabs {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) var(--space-4);
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(21, 2, 2, 0.08);
}

html[data-theme="dark"] .ahci-tabs {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.ahci-tabs > .ahci-tab-content.active {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.ahci-tabs .ahci-tab-content.active .ahci-tab-actions {
    margin-top: auto;                           /* View All / Pause stay at the bottom of the box */
}

@media (max-width: 600px) {
    .ahci-tabs {
        padding: var(--space-4) var(--space-3);
    }
}

/* ----- paired rows, two-column mode only ----- */
@media (min-width: 992px) {
    .ahci-grid,
    .ahci-main .ahci-grid {                     /* the 2nd selector out-ranks the existing .ahci-main .ahci-grid rule */
        align-items: stretch;
        row-gap: var(--section-gap);
    }

    /* the two column wrappers stop being boxes, their children become grid items */
    .ahci-col-main,
    .ahci-sidebar {
        display: contents;
    }

    .ahci-tabs--lead {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;                       /* spacing now comes from row-gap */
    }

    .sb-card--lead {
        grid-column: 2;
        grid-row: 1;
    }

    .ahci-tabs--second {
        grid-column: 1;
        grid-row: 2;                            /* pairs with the second profile card */
        margin-bottom: 0;
    }

    .ahci-col-main > .ahci-skip-btn {
        grid-column: 1;
        grid-row: 3;                            /* own row: left column only */
        justify-self: start;
        margin: 0;
    }

    .ahci-tabs--social {
        grid-column: 1;
        grid-row: 4;                            /* pairs with the Important links card */
        margin-bottom: 0;
    }

    .ahci-rest {
        grid-column: 1 / -1;                    /* banners: full-width row at the bottom */
        grid-row: 5;
        min-width: 0;
    }

    .ahci-rest > :last-child {
        margin-bottom: 0;                       /* column ends flush with the sidebar */
    }

    .sb-card--second {
        grid-column: 2;
        grid-row: 2;
    }

    .ahci-sidebar > .sb-links-card {
        grid-column: 2;
        grid-row: 4;
    }

    /* cards fill their grid row; the content is centred in any extra height */
    .ahci-sidebar > .sb-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .ahci-sidebar > .sb-card > *:not(.sb-profile) {
        width: 100%;
    }

    .ahci-sidebar > .sb-links-card {
        justify-content: flex-start;            /* heading stays at the top */
        align-items: stretch;
    }

    .ahci-sidebar > .sb-links-card .sb-links-list {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}

/* ==========================================================================
   Small DBIM / design fixes
   ========================================================================== */

/* 1. Duplicate hamburger: general-new.js still injects an old "Menu" link
      (a#trigger) in front of #nav, so phones showed two stacked menu bars and
      one extra focusable link to "#". The real trigger is button#triggers. */
a.menu-triggers {
    display: none !important;
}

/* 2. Mobile menu button: #144C84 is not in the DBIM blue group; use the
      variant (#214AAB, 8.6:1 with white text) on the key-colour bar. */
:root:not([data-theme="dark"]) #mainNav button#triggers.menu-trigger {
    background-color: var(--brand-v1) !important;   /* an older rule forces #144C84 */
}

:root:not([data-theme="dark"]) #mainNav button#triggers.menu-trigger:hover {
    background-color: #2B58C4 !important;
}

/* 3. Inner-page content column was wider than the screen on tablets
      (1043px box on a 1024px viewport). Keep it inside its container. */
.leftPartInner11,
.leftPartInner {
    max-width: 100%;
    box-sizing: border-box;
}

/* 4. Long words / URLs in CMS text never push a column wider than the page */
#innerContent,
.leftPartInner11 {
    overflow-wrap: break-word;
}

#innerContent img,
.leftPartInner11 img {
    max-width: 100%;
    height: auto;
}

#innerContent table {
    max-width: 100%;
}

/* ==========================================================================
   Main menu: dropdowns never leave the screen (class set by dbim-a11y.js)
   ========================================================================== */
@media (min-width: 992px) {
    /* first level opens right-aligned under its item */
    #mainNav #nav > li.dbim-flip > ul.menuSubUl {
        left: auto;
        right: 0;
    }

    /* deeper levels open towards the left of their parent */
    #mainNav #nav ul.menuSubUl li.dbim-flip > ul.menuSubUl {
        left: auto;
        right: 100%;
        border-left: 1px solid #ddd;
        border-right: 3px solid #294fa5;
    }

    #mainNav #nav ul.menuSubUl {
        max-width: calc(100vw - 16px);
    }
}

/* ==========================================================================
   INDEX PAGE - uniform links, hovers, radius and spacing (DBIM v3.0)
   Tokens (change here to restyle the whole index page):
     link        #214AAB  key-colour variant, 8.6:1 on white, 7.9:1 on the grey card
     link hover  #162F6A  DBIM key colour, underlined
     radius-lg   8px      cards, content boxes, banners
     radius-md   6px      buttons, inputs, search box, images/embeds inside boxes
   ========================================================================== */
:root {
    --dbim-link: #214AAB;
    --dbim-link-hover: #162F6A;
    --dbim-radius-lg: 8px;
    --dbim-radius-md: 6px;
}

/* ----- 1. links: one colour, one hover (content area) ----- */
.ahci-main .ahci-news-list a,
.ahci-main .sb-links-list a,
.ahci-main .ahci-bottom-banner > a,
.breadcrumb a {
    color: var(--dbim-link);
}

.ahci-main .ahci-news-list a:hover,
.ahci-main .ahci-news-list a:focus-visible,
.ahci-main .sb-links-list a:hover,
.ahci-main .sb-links-list a:focus-visible,
.ahci-main .ahci-bottom-banner > a:hover,
.ahci-main .ahci-bottom-banner > a:focus-visible,
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
    color: var(--dbim-link-hover);
}

/* tab labels are controls: dark text, link colour on hover, key colour when active */
.ahci-main .ahci-tab-nav a:hover {
    color: var(--dbim-link);
}

/* the sidebar list marker follows the link colour */
.sb-links-list li::before {
    color: var(--dbim-link);
}

/* footer (dark background): white links, one hover colour */
#footer .footerLinks a,
#footer .footerCont a,
#footer a[href] {
    text-decoration: none;
}

#footer .socialIconBox a,
#footer .footerLogosSlider a {
    text-decoration: none;
}

#footer a:hover,
#footer a:focus-visible {
    color: var(--brand-v4, #D2DFFF);
}

/* ----- 2. outline buttons: same look and hover everywhere ----- */
.ahci-main .ahci-tab-actions a,
.ahci-main .sb-card .sb-profile {
    color: var(--brand-key);
    background-color: #FFFFFF;
    border: 1px solid var(--brand-key);
    box-shadow: none;
    border-radius: var(--dbim-radius-md);
    font-weight: 600;
    text-decoration: none;
}

:root:not([data-theme="dark"]) .ahci-main .ahci-tab-actions a:hover,
:root:not([data-theme="dark"]) .ahci-main .ahci-tab-actions a:focus-visible,
:root:not([data-theme="dark"]) .ahci-main .sb-card .sb-profile:hover,
:root:not([data-theme="dark"]) .ahci-main .sb-card .sb-profile:focus-visible,
.ahci-main .ahci-tab-actions a:hover,
.ahci-main .sb-card .sb-profile:hover {
    color: #FFFFFF;
    background-color: var(--brand-key);
    border-color: var(--brand-key);
    text-decoration: none;
}

/* ----- 3. border radius: 8px containers, 6px controls and inner media ----- */
.ahci-tabs,
.sb-card,
.ahci-bottom-banner img {
    border-radius: var(--dbim-radius-lg);
}

.ahci-skip-btn,
.ahci-marquee-label,
.search-box,
.sb-portrait,
.ahci-social-grid iframe,
#mainNav .menuSubUl {
    border-radius: var(--dbim-radius-md);
}

#mainNav .menuSubUl {
    border-top-left-radius: 0;
    border-top-right-radius: 0;                 /* no overflow:hidden here - nested flyouts must stay visible */
}

#mainNav .menuSubUl > li:last-child > a {
    border-bottom-left-radius: var(--dbim-radius-md);
    border-bottom-right-radius: var(--dbim-radius-md);
}

/* ----- 4. equal spacing: every block on the page is separated by 24px ----- */
@media (min-width: 992px) {
    .ahci-main .ahci-container > .ahci-grid {
        margin-top: var(--section-gap) !important;      /* was 0: first row touched the Announcements strip */
        margin-bottom: var(--section-gap) !important;   /* was 0: banners touched the footer */
    }

    /* banners: the grid row gap already provides the space above */
    .ahci-rest > .ahci-bottom-banner {
        margin: 0 0 var(--section-gap);
    }

    .ahci-rest > .ahci-bottom-banner:last-of-type {
        margin-bottom: 0;
    }
}

@media (max-width: 991.98px) {
    .ahci-main .ahci-container > .ahci-grid {
        margin-top: var(--section-gap) !important;
        margin-bottom: var(--section-gap) !important;
        row-gap: var(--section-gap);
    }

    .ahci-rest > .ahci-bottom-banner {
        margin: 0 0 var(--section-gap);
    }

    .ahci-rest > .ahci-bottom-banner:last-of-type {
        margin-bottom: 0;
    }

    .ahci-col-main > .ahci-skip-btn {
        margin: 0 0 var(--section-gap);
    }
}

/* search box + its button: 6px like every other control */
#header .gov-search .search-box,
#header .gov-search .search-box button {
    border-radius: var(--dbim-radius-md) !important;
}

/* stacked layouts: sidebar cards use the same 24px as every other block */
@media (max-width: 991.98px) {
    .ahci-main .ahci-sidebar {
        gap: var(--section-gap) !important;
    }
}

/* ==========================================================================
   Content sections - UI refinement (visual only: no box moves)
   ========================================================================== */

/* tabs: clear hierarchy - active is key-colour + underline, others are calmer */
.ahci-main .ahci-tab-nav li a {
    font-weight: 500;
    letter-spacing: 0.005em;
}

.ahci-main .ahci-tab-nav li a.active {
    color: var(--brand-key);
    font-weight: 600;
}

.ahci-main .ahci-tab-nav {
    border-bottom-color: #E3E7F0;
}

.ahci-main .ahci-tab-nav li a {
    border-bottom-width: 3px;
    border-radius: 2px 2px 0 0;
}

/* headline lists: lighter weight for long titles, solid hairline dividers */
.ahci-main .ahci-news-list li a {
    font-weight: 500;
    line-height: 1.55;
}

.ahci-main .ahci-news-list li {
    border-bottom: 1px solid #E8ECF4;
    border-radius: var(--dbim-radius-md);
    transition: background-color 0.15s ease;
}

.ahci-main .ahci-news-list li:last-child {
    border-bottom: 0;
}

/* hover tint reaches slightly beyond the text so it reads as a row, not a clip */
:root:not([data-theme="dark"]) .ahci-main .ahci-news-list li:hover {
    background-color: #F1F5FF;
    box-shadow: -8px 0 0 #F1F5FF, 8px 0 0 #F1F5FF;
}

.ahci-main .ahci-news-list li:last-child:hover {
    border-radius: var(--dbim-radius-md);
}

.ahci-main .ahci-news-list img {
    opacity: 0.8;                               /* PDF / external icons recede behind the title */
}

.ahci-main .ahci-news-list a:hover img {
    opacity: 1;
}

.ahci-main .ahci-news-list .sub {
    color: var(--color-grey-03);
    line-height: 1.5;
}

/* View All / Pause: comfortable, evenly sized buttons */
.ahci-main .ahci-tab-actions {
    gap: var(--space-3);
    padding-top: var(--space-3);
}

.ahci-main .ahci-tab-actions a {
    min-height: 32px;
    padding-inline: var(--space-4);
    font-size: var(--dbim-small);
    letter-spacing: 0.01em;
}

/* profile cards: balanced name wrapping, calmer role line */
.ahci-main .sb-card .sb-name {
    text-wrap: balance;
    line-height: 1.35;
}

.ahci-main .sb-card .sb-role {
    color: var(--color-grey-03);
    line-height: 1.4;
}

.ahci-main .sb-card .sb-profile {
    min-height: 40px;
    padding-inline: var(--space-5);
}

.ahci-main .sb-portrait {
    box-shadow: 0 1px 2px rgba(21, 2, 2, 0.12);
}

/* the section heading of the links card gets a key-colour accent under it */
.ahci-main .sb-links-heading {
    color: var(--brand-key);
    letter-spacing: 0.005em;
}

@media (max-width: 600px) {
    .ahci-main .ahci-tab-nav li a {
        padding-inline-end: var(--space-3);
    }

    .ahci-main .ahci-tab-nav li:not(:first-child) a {
        padding-left: var(--space-3);
    }
}

/* ==========================================================================
   DBIM ICONOGRAPHY  (official DBIM Toolkit icon library, Line style)
   https://dbimtoolkit.digifootprint.gov.in/visual-library?slug=iconography
   Files: images/dbim-icons/*.svg. Icons are single-colour shapes, used as CSS
   masks so they inherit currentColor (links, hover, dark theme, focus).
   Header, accessibility panel and footer icons are inline SVG in the Blade
   partials (same DBIM paths); the rules below cover the CSS-driven icons.
   ========================================================================== */
:root {
    --ic-chevron-right: url("../images/dbim-icons/chevron-right-line.svg");
    --ic-chevron-left: url("../images/dbim-icons/chevron-left-line.svg");
    --ic-play: url("../images/dbim-icons/play-line.svg");
    --ic-pause: url("../images/dbim-icons/pause-line.svg");
    --ic-menu: url("../images/dbim-icons/menu-line.svg");
    --ic-menu-close: url("../images/dbim-icons/menu-close-line.svg");
}

/* the DBIM glyphs sit inside a 64px box with ~12% padding; this class draws one at a given size */
.sb-links-list li::before,
#mainNav .menu-trigger::before,
#nav li li > em.rightArrowImg,
#mainNav #nav > li:has(> ul) > a::after,
#header #nav > li.has-sub > a::after,
.sliderControls a.spriteHomeIcon::before {
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* 1. sidebar link list marker: DBIM chevron instead of the "»" character */
.sb-links-list li::before {
    content: "";
    width: 16px;
    height: 16px;
    top: 8px;
    background-color: var(--dbim-link);
    font-size: 0;
    -webkit-mask-image: var(--ic-chevron-right);
    mask-image: var(--ic-chevron-right);
}

/* 2. PDF / external-link icons that sit after headlines (brand-blue DBIM files) */
.ahci-news-list img[src*="dbim-icons"],
.ahci-marquee img[src*="dbim-icons"],
#mainNav .menuSubUl img[src*="dbim-icons"] {
    height: 14px;
    width: 14px;
    vertical-align: middle;
    margin-left: 4px;
    opacity: 1;
}

/* 3. hamburger: DBIM Menu / Menu Close icon (button#triggers, mobile only) */
#mainNav .menu-trigger .menu-trigger-icon,
#mainNav .menu-trigger .menu-trigger-icon * {
    display: none !important;                   /* legacy animated bars: the DBIM icon below replaces them */
}

#mainNav .menu-trigger::before {
    content: "";
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask-image: var(--ic-menu);
    mask-image: var(--ic-menu);
}

#mainNav .menu-trigger[aria-expanded="true"]::before {
    -webkit-mask-image: var(--ic-menu-close);
    mask-image: var(--ic-menu-close);
}

/* 4. main-menu chevrons: DBIM Chevron Right rotated to point down (up while open) */
#mainNav #nav > li:has(> ul) > a::after,
#header #nav > li.has-sub > a::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0 0 0 2px;
    border: 0;
    background-color: currentColor;
    -webkit-mask-image: var(--ic-chevron-right);
    mask-image: var(--ic-chevron-right);
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

#mainNav #nav > li:hover > a::after,
#mainNav #nav > li:focus-within > a::after,
#header #nav > li.has-sub:hover > a::after {
    transform: rotate(-90deg);
    margin-top: 0;
}

/* 5. dropdown "has sub-menu" indicator */
@media (min-width: 992px) {
    #nav li li > em.rightArrowImg {
        width: 18px;
        height: 18px;
        margin: -9px 0 0;
        right: var(--space-3);
        border: 0;
        transform: none;
        background: var(--brand-key) !important;
        -webkit-mask-image: var(--ic-chevron-right);
        mask-image: var(--ic-chevron-right);
    }

    html[data-theme="dark"] #nav li li > em.rightArrowImg {
        background: #FFFFFF !important;
    }
}

/* 6. hero slider controls: white ring + DBIM Chevron / Play / Pause */
.sliderControls a.spriteHomeIcon {
    position: relative;
    background-image: none !important;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35) !important;
    box-sizing: border-box;
    color: #FFFFFF;                             /* hidden label text keeps a compliant colour */
}

.sliderControls a.spriteHomeIcon::before {
    content: "";
    position: absolute;
    inset: 2px;
    background-color: #FFFFFF;
}

.sliderControls a.spriteHomeIcon:hover {
    background-color: rgba(22, 47, 106, 0.85) !important;
}

.sliderControls a.prevIcon::before {
    -webkit-mask-image: var(--ic-chevron-left);
    mask-image: var(--ic-chevron-left);
}

.sliderControls a.nextIcon::before {
    -webkit-mask-image: var(--ic-chevron-right);
    mask-image: var(--ic-chevron-right);
}

.sliderControls a.sliderPause::before {
    -webkit-mask-image: var(--ic-pause);
    mask-image: var(--ic-pause);
}

.sliderControls a.sliderPlay::before {
    -webkit-mask-image: var(--ic-play);
    mask-image: var(--ic-play);
}

/* footer social icons: DBIM glyphs have built-in padding, so draw them a little larger (Flickr keeps its size) */
#footer.footer-redesign .socialIconBox a:not(.flickr) > svg {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    fill: currentColor;
}
/* 7. phone menu: sub-menu toggle buttons were empty grey squares (their arrow
      was commented out in Javascript/header-ui.js); show the DBIM chevron */
#nav .submenu-toggle > span {
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--ic-chevron-right) center / contain no-repeat;
    mask: var(--ic-chevron-right) center / contain no-repeat;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}

#nav .submenu-toggle[aria-expanded="true"] > span {
    transform: rotate(-90deg);
}

/* phone menu: the sub-menu toggle button is the indicator; hide the legacy bitmap arrow */
@media (max-width: 991.98px) {
    #nav li li > em.rightArrowImg {
        display: none !important;
    }
}

/* header tool icons carried a hard-coded #162F6A fill (near-invisible on the dark header);
   they now follow the button text colour like every other icon */
#header .gov-tools .tool > svg path {
    fill: currentColor;
}


/* ==========================================================================
   TYPOGRAPHY (DBIM v3: H1 36/24, H2 24/20, H3 20/16, P1 16/14, P2 14/12, Small 12/10)
   ========================================================================== */

/* page title banner: the title is now a real <h1> (was a <span>); it keeps exactly
   the geometry the span had, the size/weight/colour come from the existing
   ".innerBanner h1" rule (36 px, 24 px on phones). */
.innerBanner .container > h1 {
    display: block;
    float: left;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 37px 0;
}

@media only screen and (max-width: 640px) {
    .innerBanner .container > h1 {
        width: 80%;
        padding: 26px 0 26px 15px;
    }
}

/* inner pages: stray sizes (15, 13.5, 18, 19 px ...) snapped onto the DBIM scale.
   Source rules sit in view-level <style> blocks and in CMS content, hence the
   body prefix / !important. List links and body text = P1, dates and meta = P2. */
body .leftContOuter .commonListing li a,
body .leftContOuter .albumCaption a,
body .leftContOuter a.twitter-timeline,
body .leftContOuter a.pFlickrIcon {
    font-size: var(--dbim-p1) !important;
}

body .leftContOuter p.size11,
body .leftContOuter .commonListing .PLdate,
body .leftContOuter .albumCaption b,
body .leftContOuter a.pFlickrIcon b,
body .leftContOuter .tableData th,
body nav[aria-label*="agination"] a,
body nav[aria-label*="agination"] span,
body .pagination-wrapper nav a,
body .pagination-wrapper nav span {
    font-size: var(--dbim-p2) !important;
}

/* emphasis never changes the size of the text around it */
body .leftContOuter b,
body .leftContOuter strong,
body .leftContOuter u,
body .leftContOuter i,
body .leftContOuter em {
    font-size: inherit;
}

body .leftContOuter ul li,
body .leftContOuter ol li {
    font-size: var(--dbim-p1);
}

body .leftContOuter .tableData caption {
    font-size: var(--dbim-p1);
    font-weight: 600;
}

/* sizes pasted into CMS content with inline styles (19, 18, 15, 11 px) */
body .leftContOuter [style*="font-size: 19px"], body .leftContOuter [style*="font-size:19px"],
body .leftContOuter [style*="font-size: 18px"], body .leftContOuter [style*="font-size:18px"],
body .leftContOuter [style*="font-size: 15px"], body .leftContOuter [style*="font-size:15px"] {
    font-size: var(--dbim-p1) !important;
}

body .leftContOuter [style*="font-size: 11px"], body .leftContOuter [style*="font-size:11px"] {
    font-size: var(--dbim-small) !important;
}

/* one typeface (Noto Sans) in press / statement lists; they forced Roboto */
body .mcontent span,
body .mcontent div {
    font-family: inherit !important;
}

/* CMS body container: views forced Roboto at 15 px; it is Noto Sans at P1 like the rest of the site */
body .mcontent {
    font-family: inherit !important;
    font-size: var(--dbim-p1) !important;
}

/* accordion header bars ("About the Architect" ...) were 18 px */
body div[class*="flip"] {
    font-size: var(--dbim-p1);
}

/* image-slider frames and captions on content pages */
body [id^="sliderFrame"],
body [id^="slider"],
body .mc-caption {
    font-size: var(--dbim-p1) !important;
}

/* phone: home tab labels were 12.5 / 13 px; one step on the DBIM scale (P2) */
@media (max-width: 767.98px) {
    html body .ahci-tabs .ahci-tab-nav li a,
    html body .ahci-tabs .ahci-tab-nav li:not(:first-child) a {
        font-size: var(--dbim-p2);
    }
}

/* mobile menu button label */
body #mainNav .menu-trigger-label {
    font-size: var(--dbim-p1);
}

/* superscripts / subscripts: browsers shrink them to 75 % (10.5 px); use the Small step */
body .leftContOuter sup,
body .leftContOuter sup *,
body .leftContOuter sub,
body .leftContOuter sub * {
    font-size: var(--dbim-small);
}

/* ==========================================================================
   LINKS: no underline anywhere; one colour (#214AAB) and one hover (#162F6A)
   for text links on light backgrounds. Dark areas (menu bar, footer, slider,
   buttons) keep their own light-on-dark colours: #214AAB is 1.5:1 on #162F6A.
   The "Highlight Links" accessibility mode still underlines (it is a user setting).
   ========================================================================== */
a,
a:hover,
a:focus,
a:focus-visible,
a:active,
a:visited {
    text-decoration: none !important;
}

html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) :is(.leftContOuter, .ahci-main, .breadcrumb, .containWrap) a:where(:not(
    .ahci-tab-actions a, .ahci-tab-nav a, .sb-profile, .ahci-skip-btn, .sb-card a.sb-profile,
    [class*="btn"], [class*="button"], [role="tab"], [role="button"], .r-tabs-anchor,
    .swiper-button-prev, .swiper-button-next, .innerBanner a, .ahci-slider a, .contentWidthSlider a)) {
    color: var(--dbim-link);
}

html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) :is(.leftContOuter, .ahci-main, .breadcrumb, .containWrap) a:where(:not(
    .ahci-tab-actions a, .ahci-tab-nav a, .sb-profile, .ahci-skip-btn, .sb-card a.sb-profile,
    [class*="btn"], [class*="button"], [role="tab"], [role="button"], .r-tabs-anchor,
    .swiper-button-prev, .swiper-button-next, .innerBanner a, .ahci-slider a, .contentWidthSlider a)):is(:hover, :focus-visible) {
    color: var(--dbim-link-hover);
}

/* ==========================================================================
   TEXT SIZE control (Accessibility panel): page zoom in five steps,
   set by Javascript/header-ui.js
   ========================================================================== */
html.a11y-zoomed body {
    zoom: var(--a11y-zoom, 1);
}

.a11y-tile[aria-disabled="true"] {
    opacity: 0.55;
}

/* ==========================================================================
   HEADER LOGO TEXT: one DBIM step smaller (24 > 20 px desktop, 20 > 16 px tablet;
   phones were already 14 px, the smallest body step, so they stay)
   ========================================================================== */
@media (min-width: 992px) {
    html body #header .logo .logo-text {
        font-size: 20px;
        line-height: 1.25;
    }

    html body #header .logo .logo-subtext {
        font-size: 14px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    html body #header .logo .logo-text {
        font-size: 16px;
        line-height: 1.25;
    }
}

/* ==========================================================================
   INDEX PAGE TYPE (DBIM v3: P1 16/14, P2 14/12): headline links and list links were 12 px,
   supporting lines 12/10 px. Section labels are real <h2> tags now (were role="heading" spans);
   the global h2 margin / line-height are cancelled so the boxes stay as they were.
   ========================================================================== */
html body h2.ahci-marquee-label {
    margin: 0;
    line-height: inherit;
    font-size: 12px;
}

html body h2.sb-links-heading {
    line-height: 1.3;
}

html body .ahci-main .ahci-news-list li > a,
html body .ahci-main .sb-links-list li a {
    font-size: var(--dbim-p1);
    line-height: 1.4;
}

html body .ahci-main .ahci-news-list .sub,
html body .ahci-main .ahci-news-list .date,
html body .ahci-main .sb-card .sb-role,
html body .ahci-main .ahci-tab-actions a {
    font-size: var(--dbim-p2);
}

/* inner pages: 5_test1.css forces "#innerContent a { color: #162F6A !important }" and the footer forces
   an underline with !important; same specificity + !important here, loaded later, so these win */
html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) #innerContent a:where(:not(
    .ahci-tab-actions a, .ahci-tab-nav a, .sb-profile, .ahci-skip-btn,
    [class*="btn"], [class*="button"], [role="tab"], [role="button"], .r-tabs-anchor,
    .swiper-button-prev, .swiper-button-next, .innerBanner a)) {
    color: var(--dbim-link) !important;
}

html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) #innerContent a:where(:not(
    .ahci-tab-actions a, .ahci-tab-nav a, .sb-profile, .ahci-skip-btn,
    [class*="btn"], [class*="button"], [role="tab"], [role="button"], .r-tabs-anchor,
    .swiper-button-prev, .swiper-button-next, .innerBanner a)):is(:hover, :focus-visible) {
    color: var(--dbim-link-hover) !important;
}

#footer.footer-redesign .footerLinks a,
#footer.footer-redesign .footerLinks a:hover,
#footer.footer-redesign .footerLinks a:focus-visible {
    text-decoration: none !important;
}

/* tab labels and outline buttons on the home page follow the same two link colours */
html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) .ahci-main .ahci-tab-nav li a:not(.active) {
    color: var(--dbim-link);
}

html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) .ahci-main .ahci-tab-nav li a:not(.active):is(:hover, :focus-visible),
html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) .ahci-main .ahci-tab-nav li a.active {
    color: var(--dbim-link-hover);
}

html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) .ahci-main .ahci-tab-actions a,
html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) .ahci-main .sb-card .sb-profile {
    color: var(--dbim-link);
    border-color: var(--dbim-link);
}

html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) .ahci-main .ahci-tab-actions a:is(:hover, :focus-visible),
html:not([data-theme="dark"]):not(.a11y-contrast) body:not(.wob) .ahci-main .sb-card .sb-profile:is(:hover, :focus-visible) {
    color: #FFFFFF;
    background-color: var(--dbim-link-hover);
    border-color: var(--dbim-link-hover);
}

/* ==========================================================================
   HIGH CONTRAST mode (Accessibility panel > Dark Contrast): html.a11y-contrast,
   set by Javascript/header-ui.js. Black background, white text, yellow links,
   white borders; images, video and icon glyphs are left alone.
   ========================================================================== */
html.a11y-contrast,
html.a11y-contrast body {
    background: #000 !important;
    color: #fff !important;
}

html.a11y-contrast body *:not(img):not(video):not(iframe):not(canvas):not(svg):not(svg *):not([aria-hidden="true"]) {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html.a11y-contrast a,
html.a11y-contrast a *:not(img):not(svg):not(svg *) {
    color: #FFFF00 !important;
}

html.a11y-contrast a:hover,
html.a11y-contrast a:focus-visible,
html.a11y-contrast a:hover *:not(img):not(svg):not(svg *) {
    color: #fff !important;
}

html.a11y-contrast svg,
html.a11y-contrast svg path {
    fill: currentColor !important;
}

html.a11y-contrast :focus-visible {
    outline: 3px solid #FFFF00 !important;
    outline-offset: 2px;
}

html.a11y-contrast .logo-img {
    background: #fff !important;
    border-radius: 50%;
}

html.a11y-contrast .a11y-tile[aria-pressed="true"] {
    outline: 2px solid #FFFF00;
}
/* 5_test1.css forces "#innerContent a { color: ... !important }"; id-level selectors keep high contrast on top */
html.a11y-contrast #innerContent a,
html.a11y-contrast #innerContent a *:not(img):not(svg):not(svg *) {
    color: #FFFF00 !important;
}

html.a11y-contrast #innerContent a:hover,
html.a11y-contrast #innerContent a:focus-visible {
    color: #fff !important;
}

/* ==========================================================================
   HERO SLIDER: caption never runs under the Prev / Pause / Next buttons.
   The controls (130 px + 25 px margin) are visible from 1024 px; the caption keeps
   equal space on both sides so it stays centred.
   ========================================================================== */
@media (min-width: 1024px) {
    html body .ahci-slider .indexBanner .contentWidthSlider .sliderText {
        padding-left: 180px;
        padding-right: 180px;
    }
}

/* ==========================================================================
   PDF / EXTERNAL-LINK ICONS: one DBIM icon, one size (14 px) everywhere.
   Inner pages and CMS content still reference the old 16 px PDF-icon.gif and 10 px
   ext-link-icon.gif; the bitmap is hidden (zero-width content box) and the DBIM icon
   is drawn as its background.
   ========================================================================== */
img[src$="PDF-icon.gif"],
img[src$="ext-link-icon.gif"] {
    box-sizing: border-box;
    width: 14px !important;
    height: 14px !important;
    padding-left: 14px;
    margin-left: 4px;
    vertical-align: -2px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    overflow: hidden;
}

img[src$="PDF-icon.gif"] {
    background-image: url("../images/dbim-icons/pdf-brand.svg");
}

img[src$="ext-link-icon.gif"] {
    background-image: url("../images/dbim-icons/external-link-brand.svg");
}

/* ==========================================================================
   FOOTER PARTNER-LOGO SLIDER: one tile per logo (same size, white card, soft border),
   faded edges, hover/focus state. The slider script still scrolls and pauses on hover.
   ========================================================================== */
#footer .footerLogosSlider,
.footerLogosSlider {
    height: auto;
    padding: 20px 24px;
    background: #F4F7FF;
    border-top: 1px solid #D2DFFF;
    border-bottom: 1px solid #D2DFFF;
}

.footerLogosSlider .mfoot {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}

.footerLogosSlider .str_wrap,
.footerLogosSlider .str_move {
    height: 88px !important;
}

.footerLogosSlider .str_move a,
.footerLogosSlider .str_wrap > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 200px;
    height: 80px;
    margin: 4px 8px;
    padding: 10px 16px;
    vertical-align: top;
    background: #FFFFFF;
    border: 1px solid #D2DFFF;
    border-radius: var(--dbim-radius-lg, 8px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.footerLogosSlider .str_move a img,
.footerLogosSlider .str_wrap > a img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.footerLogosSlider .str_move a:hover,
.footerLogosSlider .str_move a:focus-visible {
    border-color: #214AAB;
    box-shadow: 0 4px 12px rgba(22, 47, 106, 0.18);
    transform: translateY(-2px);
}

html[data-theme="dark"] .footerLogosSlider {
    background: #150202;
    border-color: #3A3A3A;
}

@media (max-width: 767.98px) {
    .footerLogosSlider {
        padding: 14px 8px;
    }

    .footerLogosSlider .str_wrap,
    .footerLogosSlider .str_move {
        height: 68px !important;
    }

    .footerLogosSlider .str_move a,
    .footerLogosSlider .str_wrap > a {
        width: 150px;
        height: 60px;
        margin: 4px 6px;
        padding: 8px 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footerLogosSlider .str_move a {
        transition: none;
    }
}

/* ==========================================================================
   DARK THEME (html[data-theme="dark"]) for the content area of every page.
   Tokens follow DBIM dark: surface #150202, lines #606060, text #FFFFFF / #C6C6C6,
   links #A3BBF3 (hover #D2DFFF). Legacy rules force dark text and "#innerContent a
   { color: ... !important }", hence the !important on links and the id selectors.
   ========================================================================== */
html[data-theme="dark"] {
    --dk-bg: #150202;
    --dk-text: #FFFFFF;
    --dk-muted: #C6C6C6;
    --dk-line: #606060;
    --dk-link: #A3BBF3;
    --dk-link-hover: #D2DFFF;
    --dk-tint: rgba(163, 187, 243, 0.10);
}

html[data-theme="dark"] body,
html[data-theme="dark"] body #container,
html[data-theme="dark"] body main,
html[data-theme="dark"] .ahci-main,
html[data-theme="dark"] .ahci-marquee-wrap,
html[data-theme="dark"] .containWrap,
html[data-theme="dark"] .contentPart {
    background-color: var(--dk-bg);
    color: var(--dk-text);
}

html[data-theme="dark"] .rightPartShadow,
html[data-theme="dark"] .leftPartInner {
    box-shadow: none;
}

html[data-theme="dark"] .ahci-marquee-wrap {
    border-color: var(--dk-line);
}

/* ----- text ----- */
html[data-theme="dark"] #innerContent,
html[data-theme="dark"] .leftContOuter,
html[data-theme="dark"] .mcontent,
html[data-theme="dark"] .ahci-main {
    color: var(--dk-text);
}

html[data-theme="dark"] #innerContent :is(h1, h2, h3, h4, h5, h6, p, li, td, th, caption, label, strong, b, u, i, em, small, font, dt, dd, legend),
html[data-theme="dark"] .leftContOuter :is(h2, h3, h4, h5, h6, caption, legend),
html[data-theme="dark"] .ahci-main :is(h2, h3, strong, b),
html[data-theme="dark"] .ahci-main .ahci-tab-nav li a.active,
html[data-theme="dark"] .breadcrumb li:last-child {
    color: var(--dk-text);
}

html[data-theme="dark"] #innerContent :is(.date, .PLdate, p.size11, .sub, small),
html[data-theme="dark"] .ahci-main :is(.ahci-news-list .date, .ahci-news-list .sub, .sb-role, .sb-card .sb-role) {
    color: var(--dk-muted);
}

html[data-theme="dark"] #innerContent .red,
html[data-theme="dark"] #innerContent span.red {
    color: #FF8A94;                             /* #DC3545 is 3.2:1 on #150202 */
}

/* ----- links ----- */
html[data-theme="dark"] body #innerContent a:where(:not([class*="btn"], [class*="button"], [role="button"], .innerBanner a)),
html[data-theme="dark"] body .leftContOuter a:where(:not([class*="btn"], [class*="button"], [role="button"], .innerBanner a)),
html[data-theme="dark"] body .breadcrumb a,
html[data-theme="dark"] body .ahci-main .ahci-news-list a,
html[data-theme="dark"] body .ahci-main .sb-links-list a,
html[data-theme="dark"] body .ahci-main .ahci-bottom-banner > a,
html[data-theme="dark"] body .ahci-main .ahci-tab-nav li a:not(.active) {
    color: var(--dk-link) !important;
}

html[data-theme="dark"] body #innerContent a:where(:not([class*="btn"], [class*="button"], [role="button"], .innerBanner a)):is(:hover, :focus-visible),
html[data-theme="dark"] body .leftContOuter a:where(:not([class*="btn"], [class*="button"], [role="button"], .innerBanner a)):is(:hover, :focus-visible),
html[data-theme="dark"] body .breadcrumb a:is(:hover, :focus-visible),
html[data-theme="dark"] body .ahci-main .ahci-news-list a:is(:hover, :focus-visible),
html[data-theme="dark"] body .ahci-main .sb-links-list a:is(:hover, :focus-visible),
html[data-theme="dark"] body .ahci-main .ahci-tab-nav li a:not(.active):is(:hover, :focus-visible) {
    color: var(--dk-link-hover) !important;
}

html[data-theme="dark"] .sb-links-list li::before {
    color: var(--dk-link);
}

/* ----- home cards, tabs, buttons ----- */
html[data-theme="dark"] .ahci-tabs,
html[data-theme="dark"] .sb-card,
html[data-theme="dark"] .sb-links-card {
    background-color: var(--dk-bg);
    border: 1px solid var(--dk-line);
    box-shadow: none;
    color: var(--dk-text);
}

html[data-theme="dark"] .sb-card .sb-name,
html[data-theme="dark"] .sb-links-heading {
    color: var(--dk-link-hover);
}

html[data-theme="dark"] .ahci-tab-nav,
html[data-theme="dark"] .ahci-news-list li,
html[data-theme="dark"] .sb-links-heading {
    border-color: var(--dk-line);
}

html[data-theme="dark"] .ahci-main .ahci-tab-nav li a.active {
    border-bottom-color: var(--dk-link);
}

html[data-theme="dark"] .ahci-news-list li:hover {
    background-color: var(--dk-tint);
}

html[data-theme="dark"] body .ahci-main .ahci-tab-actions a,
html[data-theme="dark"] body .ahci-main .sb-card .sb-profile {
    background-color: transparent;
    color: var(--dk-link);
    border: 1px solid var(--dk-link);
}

html[data-theme="dark"] body .ahci-main .ahci-tab-actions a:is(:hover, :focus-visible),
html[data-theme="dark"] body .ahci-main .sb-card .sb-profile:is(:hover, :focus-visible) {
    background-color: var(--dk-link-hover);
    border-color: var(--dk-link-hover);
    color: #162F6A;
}

html[data-theme="dark"] .ahci-news-list img[src*="dbim-icons"],
html[data-theme="dark"] img[src$="PDF-icon.gif"],
html[data-theme="dark"] img[src$="ext-link-icon.gif"] {
    filter: brightness(0) invert(1) sepia(0.25) saturate(4) hue-rotate(185deg) brightness(1.05);
}

/* portrait frames and other light panels */
html[data-theme="dark"] .sb-card .sb-photo,
html[data-theme="dark"] .sb-card figure,
html[data-theme="dark"] .contentRightBlock,
html[data-theme="dark"] [class^="contentRightBlock"] {
    background-color: #1F0A0A;
    border-color: var(--dk-line);
}

/* ----- tables, forms, boxes on inner pages ----- */
html[data-theme="dark"] #innerContent :is(table, table.box, .tableData, .tableOut),
html[data-theme="dark"] #innerContent :is(td, tr, tbody) {
    background-color: transparent;
    border-color: var(--dk-line);
    color: var(--dk-text);
}

html[data-theme="dark"] #innerContent :is(th, thead td, tr.evenRow th) {
    background-color: #162F6A;
    color: #FFFFFF;
    border-color: var(--dk-line);
}

html[data-theme="dark"] #innerContent tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] :is(input, select, textarea):not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]) {
    background-color: var(--dk-bg);
    color: var(--dk-text);
    border-color: #8E8E8E;
}

html[data-theme="dark"] ::placeholder {
    color: var(--dk-muted);
}

html[data-theme="dark"] #innerContent ul.commonListing li,
html[data-theme="dark"] #innerContent .commonListing li {
    border-color: var(--dk-line);
    background-color: transparent;
}

html[data-theme="dark"] #innerContent hr {
    border-color: var(--dk-line);
}

/* footer logo band (specificity matches the light rule) */
html[data-theme="dark"] #footer .footerLogosSlider,
html[data-theme="dark"] .footerLogosSlider {
    background: var(--dk-bg);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .footerLogosSlider .str_wrap,
html[data-theme="dark"] .footerLogosSlider .str_move {
    background: transparent;
}

/* inline colours / light backgrounds that come from CMS content are corrected by
   Javascript/dbim-a11y.js (classes dk-fix-bg / dk-fix-text) */
html[data-theme="dark"] .dk-fix-bg {
    background-color: transparent !important;
    background-image: none !important;
}

html[data-theme="dark"] .dk-fix-text {
    color: var(--dk-text) !important;
}

/* dark: the legacy right-column shadow strip and the light mat behind the home portraits */
html[data-theme="dark"] .rightPartShadow::after {
    background: none;
    display: none;
}

html[data-theme="dark"] .sb-card .sb-portrait {
    background-color: #1F0A0A;
}

/* dark: remaining legacy blocks (side menu title, right-column boxes, boxed tables) */
html[data-theme="dark"] .rightPart .menuTitle,
html[data-theme="dark"] .rightPart h2 {
    color: var(--dk-text);
    border-bottom-color: var(--dk-link);
}

html[data-theme="dark"] :is(table.box, .homeLastRowOut, [class*="contentRightBlock"]) {
    background-color: #1F0A0A;
    border-color: var(--dk-line);
    color: var(--dk-text);
}

html[data-theme="dark"] body :is(.rightPart, .homeLastRowOut, [class*="contentRightBlock"]) a:where(:not([class*="btn"], [class*="button"])) {
    color: var(--dk-link) !important;
}

html[data-theme="dark"] body #innerContent a.btn,
html[data-theme="dark"] body #innerContent a[class*="btn"] {
    color: #FFFFFF !important;
}
/* dark: links inside the page body wrapper (e.g. "Archives") and outline-style buttons */
html[data-theme="dark"] body .leftPartInner a:where(:not([class*="btn"], [class*="button"])) {
    color: var(--dk-link) !important;
}

html[data-theme="dark"] body .leftContOuter a.btn.btn-default {
    color: var(--dk-link) !important;
    background-color: transparent;
    border: 1px solid var(--dk-link);
}

html[data-theme="dark"] body .leftContOuter a.btn.btn-default:is(:hover, :focus-visible) {
    color: #162F6A !important;
    background-color: var(--dk-link-hover);
}
/* dark: primary form buttons stay visible on the dark surface */
html[data-theme="dark"] input[type="submit"],
html[data-theme="dark"] button[type="submit"]:not(.a11y-tile) {
    background-color: var(--dk-link);
    color: #162F6A;
    border-color: var(--dk-link);
}

html[data-theme="dark"] input[type="submit"]:is(:hover, :focus-visible) {
    background-color: var(--dk-link-hover);
}

/* ==========================================================================
   LOGO IN DARK MODE: the State Emblem is black artwork on a transparent background; on the
   dark header it disappeared. It is drawn white in dark mode (high-contrast mode keeps its
   white disc, invert mode keeps its own filter).
   <picture> wrappers around slide and portrait images must not change the layout.
   ========================================================================== */
html[data-theme="dark"]:not(.a11y-contrast):not(.a11y-invert) #header .logo .logo-img {
    filter: brightness(0) invert(1);
}

.sliderImg picture,
.sb-card picture {
    display: contents;
}

/* ==========================================================================
   FOOTER (DBIM): key-colour surface, two zones + a bottom bar.
     top:    "Connect with us" (icons)  |  "Quick links" (tidy column grid, no separator bars)
     bottom: copyright + Safe to Host  |  visitors / last updated  |  Back to top
   Links are white, no underline, hover #D2DFFF (#214AAB is 1.5:1 on #162F6A).
   ========================================================================== */
html body #footer.footer.container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

html body #footer.footer-redesign .footerCont {
    background: #162F6A;
    padding: 40px clamp(16px, 4vw, 48px) 24px;
}

.pmi-footer {
    max-width: 1280px;
    margin: 0 auto;
    color: #FFFFFF;
}

.pmi-footer__top {
    display: grid;
    grid-template-columns: minmax(250px, 330px) minmax(0, 1fr);
    gap: 32px clamp(32px, 6vw, 80px);
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(210, 223, 255, 0.28);
}

.pmi-footer__heading {
    margin: 0 0 16px;
    color: #D2DFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

/* social icons: 44 px circles, even gaps; the legacy "Connect with us" pseudo-label is replaced by the heading */
html body #footer.footer-redesign .pmi-footer .socialIconBox {
    margin: 0;
    gap: 12px;
}

html body #footer.footer-redesign .pmi-footer .socialIconBox::before {
    content: none;
}

html body #footer.footer-redesign .pmi-footer .socialIconBox a {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
}

/* quick links: column grid, chevron marker, no bars */
html body #footer.footer-redesign .pmi-footer .footerLinks {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 2px 28px !important;
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

html body #footer.footer-redesign .pmi-footer .footerLinks li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

html body #footer.footer-redesign .pmi-footer .footerLinks li::before,
html body #footer.footer-redesign .pmi-footer .footerLinks li::after,
html body #footer.footer-redesign .pmi-footer .footerLinks li + li::before {
    content: none !important;
    display: none !important;
}

html body #footer.footer-redesign .pmi-footer .footerLinks a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 4px 0;
    color: #FFFFFF !important;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none !important;
}

html body #footer.footer-redesign .pmi-footer .footerLinks a::before {
    content: "";
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    background-color: #A3BBF3;
    -webkit-mask: var(--ic-chevron-right) center / contain no-repeat;
    mask: var(--ic-chevron-right) center / contain no-repeat;
}

html body #footer.footer-redesign .pmi-footer .footerLinks a:is(:hover, :focus-visible) {
    color: #D2DFFF !important;
}

/* bottom bar */
.pmi-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 32px;
    padding-top: 20px;
}

.pmi-footer__legal,
.pmi-footer__meta {
    min-width: 0;
}

.pmi-footer__bottom p {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 1.5;
}

.pmi-footer__meta {
    margin-left: auto;
}

.pmi-footer__meta p {
    color: #D2DFFF;
    text-align: right;
}

html body #footer.footer-redesign .pmi-footer .host {
    color: #FFFFFF !important;
    text-decoration: none !important;
}

html body #footer.footer-redesign .pmi-footer .host:is(:hover, :focus-visible) {
    color: #D2DFFF !important;
}

html body #footer.footer-redesign .pmi-footer__totop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 6px 16px;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--dbim-radius-md, 6px);
}

html body #footer.footer-redesign .pmi-footer__totop::before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: currentColor;
    transform: rotate(-90deg);
    -webkit-mask: var(--ic-chevron-right) center / contain no-repeat;
    mask: var(--ic-chevron-right) center / contain no-repeat;
}

html body #footer.footer-redesign .pmi-footer__totop:is(:hover, :focus-visible) {
    color: #162F6A !important;
    background-color: #D2DFFF;
    border-color: #D2DFFF;
}

@media (max-width: 991.98px) {
    .pmi-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    html body #footer.footer-redesign .footerCont {
        padding: 28px 16px 20px;
    }

    .pmi-footer__top {
        gap: 24px;
        padding-bottom: 24px;
    }

    html body #footer.footer-redesign .pmi-footer .footerLinks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px !important;
    }

    .pmi-footer__bottom {
        flex-direction: column;
        gap: 12px;
    }

    .pmi-footer__meta {
        margin-left: 0;
    }

    .pmi-footer__meta p {
        text-align: left;
    }

    html body #footer.footer-redesign .pmi-footer__totop {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* ==========================================================================
   PHONES / TABLETS (single-column home, < 992 px): shorter page, easier use.
   - ambassador cards: small portrait beside name, role and Profile (were 520 px tall)
   - Facebook / X / YouTube feeds: one swipeable row instead of two 380 px boxes stacked
   ========================================================================== */
@media (max-width: 991.98px) {
    html body .ahci-sidebar .sb-card--lead,
    html body .ahci-sidebar .sb-card--second {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        align-content: center;
        align-items: center;
        column-gap: 16px;
        row-gap: 2px;
        padding: 16px;
        text-align: left;
    }

    html body .ahci-sidebar .sb-card--lead .sb-portrait,
    html body .ahci-sidebar .sb-card--second .sb-portrait {
        grid-column: 1;
        grid-row: 1 / span 3;
        width: 104px;
        height: 104px;
        max-width: none;
        margin: 0;
        padding: 0;
        object-fit: cover;
        object-position: top center;
        border-radius: var(--dbim-radius-lg, 8px);
        border: 1px solid #D2DFFF;
        box-shadow: none;
    }

    html body .ahci-sidebar :is(.sb-card--lead, .sb-card--second) .sb-name {
        grid-column: 2;
        margin: 0;
        text-align: left;
    }

    html body .ahci-sidebar :is(.sb-card--lead, .sb-card--second) .sb-role {
        grid-column: 2;
        margin: 0 0 8px;
        text-align: left;
    }

    html body .ahci-sidebar :is(.sb-card--lead, .sb-card--second) .sb-profile {
        grid-column: 2;
        justify-self: start;
        width: auto;
        min-width: 96px;
        margin: 0;
    }

    /* swipeable feeds */
    html body .ahci-tabs--social .ahci-social-grid {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    html body .ahci-tabs--social .ahci-social-grid > * {
        flex: 0 0 86%;
        min-width: 0;
        scroll-snap-align: start;
    }
}

@media (max-width: 991.98px) and (min-width: 560px) {
    html body .ahci-tabs--social .ahci-social-grid > * {
        flex-basis: 48%;
    }
}
/* footer fixes: legacy clearfix pseudo-elements must not become grid items; chevron marker; edge-to-edge logo band */
html body #footer.footer-redesign .pmi-footer .footerLinks::before,
html body #footer.footer-redesign .pmi-footer .footerLinks::after {
    content: none !important;
    display: none !important;
}

html body #footer.footer-redesign .pmi-footer .footerLinks a::before {
    content: "" !important;
    display: block !important;
}

html body #footer .footerLogos > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
html body #footer.footer-redesign .pmi-footer .footerLinks a {
    display: inline-flex !important;
    align-items: center;
}
/* the third-party chat bubble floats over the bottom-right corner on small screens:
   keep footer content clear of it when scrolled to the end */
@media (max-width: 991.98px) {
    .pmi-footer__bottom {
        padding-bottom: 72px;
    }
}
/* phones: list links are whole-row tap targets (they were 19 px tall inline text) */
@media (max-width: 767.98px) {
    html body .ahci-main .ahci-news-list li > a,
    html body .ahci-main .sb-links-list li a {
        display: block;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    html body #footer.footer-redesign .pmi-footer .host {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }
}
html body #footer.footer-redesign .pmi-footer .pmi-footer__heading {
    color: #D2DFFF !important;
}

/* ==========================================================================
   SOCIAL SECTION: Facebook page cards + latest YouTube videos (home page)
   ========================================================================== */
.ahci-social-grid--cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.social-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 4px 16px;
    align-items: center;
    padding: 20px;
    color: inherit;
    background: #F4F7FF;
    border: 1px solid #D2DFFF;
    border-radius: var(--dbim-radius-lg, 8px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.social-card:is(:hover, :focus-visible) {
    border-color: #214AAB;
    box-shadow: 0 4px 12px rgba(22, 47, 106, 0.14);
}

.social-card__icon {
    position: relative;
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #214AAB;
}

.social-card__icon::before {
    content: "";
    position: absolute;
    inset: 11px;
    background-color: #FFFFFF;
    -webkit-mask: url("../images/dbim-icons/facebook-fill.svg") center / contain no-repeat;
    mask: url("../images/dbim-icons/facebook-fill.svg") center / contain no-repeat;
}

.social-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.social-card__name {
    color: #162F6A;
    font-size: var(--dbim-p1);
    font-weight: 600;
    line-height: 1.3;
}

.social-card__text {
    color: #606060;
    font-size: var(--dbim-p2);
    line-height: 1.4;
}

.social-card__cta,
.ahci-btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    color: var(--dbim-link, #214AAB);
    font-size: var(--dbim-p2);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--dbim-link, #214AAB);
    border-radius: var(--dbim-radius-md, 6px);
}

.social-card__cta {
    grid-column: 2;
    justify-self: start;
    margin-top: 10px;
}

.social-card:is(:hover, :focus-visible) .social-card__cta,
.ahci-btn-link:is(:hover, :focus-visible) {
    color: #FFFFFF;
    background-color: var(--dbim-link-hover, #162F6A);
    border-color: var(--dbim-link-hover, #162F6A);
}

/* YouTube: latest uploads */
.yt-feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px 16px;
    margin-top: 16px;
}

.yt-card {
    min-width: 0;
}

.yt-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;
    border-radius: var(--dbim-radius-md, 6px);
}

.yt-card__thumb {
    display: block;
    width: 100%;
    height: 100%;
}

.yt-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.yt-card__thumb:is(:hover, :focus-visible) img {
    transform: scale(1.04);
}

.yt-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    background: rgba(22, 47, 106, 0.92);
    border: 2px solid #FFFFFF;
    border-radius: 50%;
}

.yt-card__play::before {
    content: "";
    position: absolute;
    inset: 10px 8px 10px 12px;
    background-color: #FFFFFF;
    -webkit-mask: url("../images/dbim-icons/play-fill.svg") center / contain no-repeat;
    mask: url("../images/dbim-icons/play-fill.svg") center / contain no-repeat;
}

.yt-card__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.yt-card__title {
    margin: 10px 0 2px;
    font-size: var(--dbim-p2);
    font-weight: 500;
    line-height: 1.4;
}

.yt-card__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.yt-card__when {
    margin: 0;
    color: #606060;
    font-size: var(--dbim-small);
}

.yt-feed__more {
    margin: 20px 0 0;
    text-align: right;
}

.yt-feed__empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #606060;
}

/* phones / tablets: a swipeable row (the shared rule above already does this for .ahci-social-grid) */
@media (max-width: 767.98px) {
    html body .ahci-tabs--social .yt-feed {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    html body .ahci-tabs--social .yt-feed > .yt-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
    }

    html body .ahci-tabs--social .ahci-social-grid--cards > .social-card {
        flex-basis: 88%;
    }

    .yt-feed__more {
        text-align: center;
    }
}

/* dark theme */
html[data-theme="dark"] .social-card {
    background: var(--dk-bg);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .social-card:is(:hover, :focus-visible) {
    border-color: var(--dk-link);
}

html[data-theme="dark"] .social-card__icon {
    background: var(--dk-link);
}

html[data-theme="dark"] .social-card__icon::before {
    background-color: #162F6A;
}

html[data-theme="dark"] .social-card__name {
    color: var(--dk-link-hover);
}

html[data-theme="dark"] .social-card__text,
html[data-theme="dark"] .yt-card__when,
html[data-theme="dark"] .yt-feed__empty {
    color: var(--dk-muted);
}

html[data-theme="dark"] .social-card__cta,
html[data-theme="dark"] .ahci-btn-link {
    color: var(--dk-link);
    border-color: var(--dk-link);
}

html[data-theme="dark"] .social-card:is(:hover, :focus-visible) .social-card__cta,
html[data-theme="dark"] .ahci-btn-link:is(:hover, :focus-visible) {
    color: #162F6A;
    background-color: var(--dk-link-hover);
    border-color: var(--dk-link-hover);
}

html[data-theme="dark"] body .yt-card__title a {
    color: var(--dk-link) !important;
}

html[data-theme="dark"] body .yt-card__title a:is(:hover, :focus-visible) {
    color: var(--dk-link-hover) !important;
}
/* the legacy ".ahci-social-grid > a { display:block }" (for the X timeline links) must not flatten the cards */
html body .ahci-social-grid > a.social-card {
    display: grid !important;
    width: auto !important;
}

/* six videos: 3 x 2 on desktop, 2 x 3 on tablets */
.yt-feed {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .yt-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================================
   SOCIAL BOX: constant height. All panels share one grid cell, so the box is always as tall
   as the tallest panel and switching tabs no longer changes the page height. Hidden panels
   stay in the layout but are invisible and not focusable (visibility: hidden).
   ========================================================================== */
html body .ahci-tabs--social {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
}

html body .ahci-tabs--social > .ahci-tab-nav {
    grid-row: 1;
    grid-column: 1;
}

html body .ahci-tabs--social > .ahci-tab-content {
    grid-row: 2;
    grid-column: 1;
    display: block;
    visibility: hidden;
}

html body .ahci-tabs--social > .ahci-tab-content.active {
    visibility: visible;
}

/* Facebook posts (Graph API mode) */
.fb-feed {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 16px;
    margin-top: 16px;
}

.fb-post {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    background: #F4F7FF;
    border: 1px solid #D2DFFF;
    border-radius: var(--dbim-radius-lg, 8px);
}

.fb-post__media {
    display: block;
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: var(--dbim-radius-md, 6px);
    background: #D2DFFF;
}

.fb-post__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fb-post__text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    margin: 0 0 8px;
    overflow: hidden;
    color: #150202;
    font-size: var(--dbim-p2);
    line-height: 1.5;
}

.fb-post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: center;
    justify-content: space-between;
    margin: auto 0 0;
    color: #606060;
    font-size: var(--dbim-small);
}

@media (max-width: 991.98px) and (min-width: 768px) {
    .fb-feed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    html body .ahci-tabs--social .fb-feed {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }

    html body .ahci-tabs--social .fb-feed > .fb-post {
        flex: 0 0 82%;
        scroll-snap-align: start;
    }
}

html[data-theme="dark"] .fb-post {
    background: var(--dk-bg);
    border-color: var(--dk-line);
}

html[data-theme="dark"] .fb-post__text {
    color: var(--dk-text);
}

html[data-theme="dark"] .fb-post__meta {
    color: var(--dk-muted);
}
/* wide box: 4 x 2 (8 items, smaller thumbnails); narrower: 3 x 2 (first 6). Keeps the box compact and its height equal on every tab. */
html body .ahci-tabs--social {
    container-type: inline-size;
}

html body .ahci-tabs--social :is(.yt-feed, .fb-feed) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .ahci-tabs--social :is(.yt-card, .fb-post):nth-child(n + 7) {
    display: none;
}

@container (min-width: 860px) {
    html body .ahci-tabs--social :is(.yt-feed, .fb-feed) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    html body .ahci-tabs--social :is(.yt-card, .fb-post):nth-child(n + 7) {
        display: block;
    }

    html body .ahci-tabs--social .fb-post:nth-child(n + 7) {
        display: flex;
    }
}

@media (max-width: 767.98px) {
    html body .ahci-tabs--social :is(.yt-card, .fb-post):nth-child(n + 7) {
        display: none;
    }
}

/* Facebook Page Plugin (FACEBOOK_EMBED=true): same size as the reference embed, 445 px tall, white card look kept in both themes */
.fb-embed-grid {
    align-items: start;
}

.ahci-social-grid.fb-embed-grid iframe {
    height: 445px !important;
    min-height: 445px;
    border: 0;
    border-radius: var(--dbim-radius-lg, 8px);
    background: #FFFFFF;
}

/* Facebook page cards (shown while Facebook serves no timeline): fill the panel instead of leaving a blank block.
   Larger centred cards; the panel keeps the same height as the YouTube panel. */
html body .ahci-tabs--social > .ahci-tab-content:has(> .ahci-social-grid--cards) {
    display: flex;
    flex-direction: column;
}

html body .ahci-tabs--social .ahci-social-grid--cards {
    flex: 1 1 auto;
    align-items: stretch;
    margin-bottom: 0;
}

html body .ahci-social-grid > a.social-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 6px;
    padding: 32px 24px;
    text-align: center;
}

html body .ahci-social-grid > a.social-card .social-card__icon {
    grid-row: auto;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
}

html body .ahci-social-grid > a.social-card .social-card__icon::before {
    inset: 15px;
}

html body .ahci-social-grid > a.social-card .social-card__body {
    align-items: center;
    text-align: center;
}

html body .ahci-social-grid > a.social-card .social-card__name {
    font-size: var(--dbim-h3);
}

html body .ahci-social-grid > a.social-card .social-card__cta {
    grid-column: auto;
    justify-self: center;
    margin-top: 14px;
}