/* =============================================================================
   DBIM site-wide layer (footer, landmarks, contrast and responsive fixes).
   Loaded last, after dbim.css and dbim-header.css.
   ============================================================================= */

.dbim-main {
    display: block;
}

.dbim-main:focus {
    outline: none;
}

/* ---------- Footer (DBIM footer pattern, Blue group) ---------- */
.dbim-footer {
    float: none;
    /* legacy 'footer { float:left }' must not apply */
    clear: both;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    margin: 0;
    background: var(--dbim-blue-1);
    color: #fff;
    font-family: var(--dbim-font);
    font-size: var(--dbim-p2);
    line-height: 1.6;
}

.dbim-footer a {
    color: #fff;
    text-decoration: none;
}

.dbim-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.dbim-footer :focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.dbim-footer .dbim-container {
    padding-top: 32px;
    padding-bottom: 24px;
}

.dbim-footer__top {
    display: grid;
    grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
    gap: 24px 48px;
    align-items: start;
    padding-bottom: 24px;
}

.dbim-footer__brand {
    display: flex;
    align-items: flex-end;
    gap: 7px;
}

.dbim-footer__emblem {
    height: 56px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* State Emblem: white on dark (DBIM) */
.dbim-footer__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.dbim-footer__title {
    font-size: var(--dbim-h3);
    font-weight: 700;
}

.dbim-footer__location {
    font-size: var(--dbim-p2);
    color: var(--dbim-blue-5);
}

.dbim-footer__info {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 32px;
}

.dbim-footer__info>div {
    margin: 0;
}

.dbim-footer__info dt {
    font-weight: 600;
    color: var(--dbim-blue-5);
    font-size: var(--dbim-p2);
}

.dbim-footer__info dd {
    margin: 0;
    color: #fff;
}

.dbim-footer__info>div:first-child {
    grid-column: 1 / -1;
}

.dbim-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 0;
    margin: 0;
    padding: 20px 0 8px;
    border-top: 1px solid rgba(255, 255, 255, .35);
    list-style: none;
}

.dbim-footer__links li {
    display: flex;
    align-items: center;
}

.dbim-footer__links li+li::before {
    content: '';
    width: 1px;
    height: 16px;
    margin: 0 16px;
    background: rgba(255, 255, 255, .5);
}

.dbim-footer__links a {
    font-size: var(--dbim-p1);
    font-weight: 500;
    padding: 4px 0;
}

.dbim-footer__social {
    display: flex;
    justify-content: center;
    padding: 12px 0 8px;
}

.dbim-footer .dbim-social {
    gap: 12px;
}

.dbim-footer .dbim-social a {
    width: 44px;
    height: 44px;
    background: #fff;
    color: var(--dbim-blue-1);
}

.dbim-footer .dbim-social a:hover {
    background: var(--dbim-blue-5);
    text-decoration: none;
}

.dbim-footer .dbim-social .dbim-ico {
    width: 22px;
    height: 22px;
}

.dbim-footer__rule {
    height: 1px;
    margin: 16px 0;
    background: rgba(255, 255, 255, .35);
}

.dbim-footer__meta {
    text-align: center;
}

.dbim-footer__meta p {
    margin: 0 0 4px;
}

.dbim-footer__sep {
    margin: 0 10px;
    opacity: .7;
}

.dbim-footer__credit {
    margin: 0;
    text-align: center;
}

.dbim-footer__credit a {
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .dbim-footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .dbim-footer__info {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .dbim-footer__links {
        justify-content: flex-start;
    }

    .dbim-footer__links li+li::before {
        margin: 0 12px;
    }

    .dbim-footer__links a {
        font-size: var(--dbim-p2);
    }

    .dbim-footer__social {
        justify-content: flex-start;
    }

    .dbim-footer__meta,
    .dbim-footer__credit {
        text-align: left;
    }

    .dbim-footer__sep {
        display: none;
    }

    .dbim-footer__meta span {
        display: block;
    }
}

/* ---------- Contrast fixes (WCAG 2.1 AA / GIGW) ---------- */
.amb-announcement-posted {
    color: var(--dbim-grey-3) !important;
}

.pgCrumbs__current {
    color: var(--dbim-grey-3) !important;
}

input[type="reset"] {
    color: #fff !important;
}

.dbim-footer strong,
.dbim-footer b {
    color: inherit !important;
}

.social-card-header .social-info span,
.link-number,
.meta-chip,
.amb-article-meta,
.posted-on,
.notice-posted {
    color: var(--dbim-grey-3) !important;
}

/* Home page: inactive tab labels (was #c4c4c4 on #e8efff = 1.5:1) */
.smart-tabs .smart-tab:not(.active),
.eip-contact-tabs .eip-contact-tab:not(.active) {
    color: var(--dbim-grey-3) !important;
}

.smart-tabs .smart-tab:not(.active):hover,
.eip-contact-tabs .eip-contact-tab:not(.active):hover {
    color: var(--dbim-blue-1) !important;
}

/* Slider dots: keep the 12px look, give a 24px touch/click target (WCAG 2.2 target size) */
.hero-slider-section .slider-dots {
    gap: 0;
    right: 14px;
    bottom: 14px;
}

.hero-slider-section .slider-dots .dot {
    box-sizing: content-box;
    padding: 6px;
    background-clip: content-box;
    border: 0;
}

/* ---------- Service cards (Consular / Passport / Emergency) - uniform DBIM style ---------- */
.consularservice {
    height: auto !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 12px;
}

.consularservice a.portal-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 96px;
    margin: 0 !important;
    padding: 16px 20px;
    border: 1px solid transparent;
    border-radius: var(--dbim-radius);
    background: var(--dbim-blue-1);
    color: #fff;
    box-shadow: none;
    text-decoration: none;
    transition: background-color .2s, transform .2s, box-shadow .2s;
}

.consularservice a.portal-card.portal-orange {
    background: var(--dbim-blue-1);
}

.consularservice a.portal-card.portal-blue {
    background: var(--dbim-blue-2);
}

.consularservice a.portal-card.portal-emergency {
    background: var(--dbim-error) !important;
}

.consularservice a.portal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(21, 2, 2, .2);
    text-decoration: none;
}

.consularservice a.portal-card.portal-orange:hover {
    background: #0F2250;
}

.consularservice a.portal-card.portal-blue:hover {
    background: var(--dbim-blue-1);
}

.consularservice a.portal-card.portal-emergency:hover {
    background: #B02A37 !important;
}

.consularservice a.portal-card:focus-visible {
    outline: 3px solid var(--dbim-info);
    outline-offset: 3px;
}

.consularservice a.portal-card::before {
    content: none !important;
}

/* legacy sheen / ring decorations */

.consularservice .portal-content {
    flex: 1 1 auto;
    min-width: 0;
    position: static;
}

.consularservice .portal-content h3 {
    margin: 0 0 4px;
    color: #fff;
    font-family: var(--dbim-font);
    font-size: var(--dbim-h3);
    font-weight: 600;
    line-height: 1.3;
}

.consularservice .portal-content p,
.consularservice .portal-content .portal-contents {
    margin: 0;
    color: #fff !important;
    font-family: var(--dbim-font);
    font-size: var(--dbim-p2);
    font-weight: 500;
    line-height: 1.5;
}

.consularservice .portal-content p i {
    margin-left: 8px;
    transition: transform .2s;
}

.consularservice a.portal-card:hover .portal-content p i {
    margin-left: 8px;
    transform: translateX(4px);
}

.consularservice .emergency-text span,
.consularservice .emergency-text b {
    color: #fff !important;
    font-size: inherit;
    font-weight: inherit;
}

.consularservice .emergency-text b {
    display: inline-block;
    margin-top: 2px;
    font-size: var(--dbim-p1);
    font-weight: 700;
}

.consularservice .portal-icon {
    position: static;
    transform: none !important;
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    font-size: 26px;
    line-height: 1;
}

.consularservice .portal-icon i {
    margin: 0 !important;
    font-size: inherit;
}

@media (max-width: 575.98px) {
    .consularservice a.portal-card {
        min-height: 88px;
        padding: 14px 16px;
        gap: 12px;
    }

    .consularservice .portal-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
}

/* equal-height cards; Hindi line sits on its own row */
.consularservice {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
}

.consularservice .emergency-text span {
    display: block;
}

.consularservice .emergency-text br {
    display: none;
}

/* ---------- Home: notices (left) and desk + services (right) share one height ---------- */
@media (min-width: 1200px) {
    .appointment-section .row.equal-height {
        align-items: stretch;
    }

    .appointment-section .row.equal-height>.col-xl-4 {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .appointment-section .row.equal-height>.col-xl-4>br,
    .appointment-section .row.equal-height>.col-xl-4> :empty {
        display: none;
    }

    .appointment-section .row.equal-height>.col-xl-4>.ambassador-card {
        flex: 0 0 auto;
        margin: 0;
    }

    .appointment-section .row.equal-height>.col-xl-4>.consularservice {
        flex: 1 1 0;
        min-height: 0;
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }

    /* cards split the remaining height evenly (never smaller than their content) */
    .appointment-section .consularservice a.portal-card {
        flex: 1 1 0;
        min-height: 84px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .appointment-section .consularservice .portal-content h3 {
        margin-bottom: 2px;
    }

    .appointment-section .consularservice .emergency-text {
        line-height: 1.4;
    }
}

@media (min-width: 1200px) {
    .appointment-section .row.equal-height>.col-xl-4>.ambassador-card {
        height: auto !important;
        flex: 0 0 auto !important;
    }
}

/* Tablet: three service cards in one row; phones keep a single column */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .consularservice {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px;
        margin-top: 16px;
    }

    .consularservice a.portal-card {
        flex-direction: column-reverse;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 12px;
        padding: 16px;
    }

    .consularservice .portal-icon {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
        font-size: 22px;
    }
}

@media (min-width: 1200px) {

    /* left card fills its column: remove the nested row's gutter offsets */
    .appointment-section .row.equal-height>.col-xl-8 {
        display: flex;
        flex-direction: column;
    }

    .appointment-section .row.equal-height>.col-xl-8>.row {
        flex: 1 1 auto;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        align-items: stretch;
    }

    .appointment-section .row.equal-height>.col-xl-8>.row>* {
        margin-top: 0 !important;
        height: auto;
    }
}

@media (min-width: 1200px) {

    /* compact ambassador card so the service cards keep their padding inside the shared height */
    .appointment-section .ambassador-card .row {
        margin-bottom: 0 !important;
    }

    .appointment-section .ambassador-card .logo-img {
        height: 158px;
        width: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .appointment-section .ambassador-card .ambassador-border {
        max-height: 80px;
    }
}

@media (min-width: 1200px) {
    .appointment-section .row.equal-height>.col-xl-4>.ambassador-card {
        min-height: 0 !important;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    /* auto min-height = never smaller than the card's own content */
    .appointment-section .consularservice a.portal-card {
        min-height: auto !important;
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

@media (min-width: 1200px) {
    .appointment-section .row.equal-height>.col-xl-4>.ambassador-card {
        padding-top: 22px;
        padding-bottom: 18px;
    }
}

/* ---------- Container width: 1440px (DBIM layout grid) ---------- */
:root {
    --dbim-container: 1440px;
}

.dbim-container {
    max-width: var(--dbim-container);
}

@media (min-width: 1400px) {

    .container,
    .container-xxl {
        max-width: var(--dbim-container);
    }
}

/* ---------- Marquee play / pause control (WCAG 2.2.2) - default state: playing ---------- */
.announcement-bar {
    position: relative;
}

.dbim-marquee-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--dbim-blue-1);
    border-radius: 6px;
    background: #fff;
    color: var(--dbim-blue-1);
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.dbim-marquee-toggle .dbim-ico {
    width: 24px;
    height: 24px;
}

.dbim-marquee-toggle:hover {
    background: var(--dbim-blue-1);
    color: #fff;
}

.dbim-marquee-toggle:focus-visible {
    outline: 3px solid var(--dbim-info);
    outline-offset: 2px;
}

.announcement-bar .dbim-marquee-toggle {
    margin: 0 12px;
    align-self: center;
    z-index: 6;
}

.announcement-bar.is-paused .announcement-track {
    animation-play-state: paused !important;
}

.dbim-marquee-ctl {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

/* Authored (CMS) cells/headings that had white text on pale grey: DBIM blue background */
.dbim-fixc {
    background-color: var(--dbim-blue-1) !important;
    color: #fff !important;
}

.dbim-fixc *,
.dbim-fixc a {
    color: #fff !important;
}

.dbim-table-wrap:focus-visible {
    outline: 3px solid var(--dbim-info);
    outline-offset: 2px;
}

/* Scroll hint for wide tables on small screens */
.dbim-table-wrap {
    background:
        linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
        linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(21, 2, 2, .22), rgba(21, 2, 2, 0)) left center / 12px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(21, 2, 2, .22), rgba(21, 2, 2, 0)) right center / 12px 100% no-repeat scroll;
}

/* Gallery album tiles: title uses the DBIM body step (was inheriting 20px) */
.albumCard--tile .albumCard__title {
    font-family: var(--dbim-font);
    font-size: var(--dbim-p1);
    font-weight: 500;
    line-height: 1.5;
}

.albumCard--tile .albumCard__more {
    font-size: 12px;
}

/* Service cards: smaller secondary text (link lines and emergency details) */
.consularservice .portal-content p,
.consularservice .portal-content .portal-contents {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

.consularservice .portal-content p i {
    font-size: 12px;
}

.consularservice .emergency-text b {
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 575.98px) {

    .consularservice .portal-content p,
    .consularservice .portal-content .portal-contents {
        font-size: 12px;
    }

    .consularservice .emergency-text b {
        font-size: 13px;
    }
}