/* DARE additions to the DBIM / MHA theme (loaded after mha-theme.css) */

/* Text pages from the CMS: tables and images that editors paste in */
.cmsContent img { max-width: 100%; height: auto; }
.cmsContent table,
.cmsTable { width: 100%; border-collapse: collapse; margin: 16px 0; }
.cmsContent table th,
.cmsContent table td,
.cmsTable th,
.cmsTable td { border: 1px solid #c8ccd2; padding: 10px 12px; vertical-align: top; text-align: left; }
.cmsContent table thead th,
.cmsTable thead th { background: var(--mha-blue, #1b3a6b); color: #fff; font-weight: 600; }
.cmsContent table tbody tr:nth-child(even),
.cmsTable tbody tr:nth-child(even) { background: #f6f8fb; }
.cmsTable th.whos-whotabl { background: #e3ebf7; color: #14305c; font-weight: 700; }
.cmsContent ul,
.cmsContent ol { padding-left: 1.5rem; }
.cmsContent a { text-decoration: underline; }
.cmsContent p { margin-bottom: 1rem; text-align: justify; }

.noData { padding: 24px 0; color: #555; }

/* Organisations under DARE (home) */
.dareOrgCard { border: 1px solid #d9dee6; border-radius: 12px; padding: 22px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.dareOrgCard h3 { font-size: 20px; line-height: 1.35; margin: 0; }
.dareOrgCard h3 a { color: var(--mha-blue, #1b3a6b); text-decoration: none; }
.dareOrgCard h3 a:hover { text-decoration: underline; }
.dareOrgCard p { margin: 0; color: #444; flex: 1; }

/* Sitemap */
.sitemapTree ul { list-style: none; padding-left: 1.25rem; }
.sitemapTree > ul { padding-left: 0; }
.sitemapTree li { margin: 6px 0; }
.sitemapTree > ul > li > a { font-weight: 700; }

/* Gallery cards */
a.photos-card { text-decoration: none; color: inherit; }
.photos-card video { background: #000; }

/* Bootstrap's .table paints cells itself: make the head row readable */
.table.cmsTable > thead > tr > th,
.cmsContent table > thead > tr > th {
    background-color: var(--mha-blue, #1b3a6b);
    color: #fff;
    --bs-table-bg: var(--mha-blue, #1b3a6b);
    --bs-table-color: #fff;
}
.table.cmsTable > tbody > tr > th.whos-whotabl { background-color: #e3ebf7; color: #14305c; }

/* Home: the four leaders next to "About the Department": two cards per row, white frame, blue bar under the photo, name and post centred */
.homeLeaders { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; }
.homeLeaders .leaderCard { border: 1px solid #d9dee6; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.homeLeaders .leaderCard img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: 50% 0%; border-bottom: 6px solid var(--mha-blue, #1b3a6b); background: #fff; padding: 0; }
.homeLeaders .leaderCaption { padding: 14px 8px 16px; }
.homeLeaders .leaderName { color: #111; font-size: 17px; font-weight: 700; line-height: 1.3; }
.homeLeaders .leaderPost { margin-top: 8px; font-size: 14px; text-transform: none; color: #222; }
@media (max-width: 575px) { .homeLeaders { gap: 12px; } .homeLeaders .leaderName { font-size: 15px; } .homeLeaders .leaderPost { font-size: 12px; } }
@media (max-width: 767px) { .homeLeaders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hero banner: DARE's banner pictures are 802 x 487 px, not the wide 1920 x 870 of the original theme.
   Show the whole picture (nothing cut off), centred on the dark band. */
.homebanner .bannerSlider img,
.homebanner .bannerSlider > div img { object-fit: contain !important; object-position: center; background: var(--mha-text, #1b2a41); max-height: none; }

/* Home: organisation cards - same height as the Key Offerings cards of BPR&D (two lines of title, two of text) */
.pasenger_serv .our_service ul li { min-height: 150px; padding: 18px 22px; gap: 6px; }
.pasenger_serv .our_service ul li a { font-size: 17px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.pasenger_serv .our_service ul li p { font-size: 15px; -webkit-line-clamp: 2; line-clamp: 2; }

/* Table head rows must stay readable whatever the theme says about <th> */
.table.cmsTable > thead > tr > th,
.cmsContent table > thead > tr > th,
.cmsContent table thead th {
    background-color: var(--mha-blue, #162f6a) !important;
    color: #fff !important;
}

/* Social media: a single YouTube video fills its card (BPR&D shows two videos, one above the other) */
.media_filed.mediaVideos iframe:only-of-type { display: block; width: 100%; height: 100%; min-height: 240px; aspect-ratio: auto; }

/* X, Facebook and Instagram embeds fill their card */
.media_filed iframe[src] { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; background: #fff; }

/* Facebook shows only the page header (name, followers, Follow button): a short frame, then our own link */
.media_filed iframe.embedShort[src] { height: 140px; min-height: 140px; }
.media_filed .embedMore { margin-top: 12px; }

/* "Skip to main content": not shown on the page, appears only when a keyboard user tabs to it (GIGW / WCAG 2.4.1).
   The skip icon in the header stays for mouse users. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 3000; padding: 10px 16px; background: #fff; color: var(--mha-blue, #162f6a); font-weight: 600; border: 2px solid var(--mha-blue, #162f6a); }
.skip-link:focus, .skip-link:focus-visible { left: 12px; top: 12px; }

/* Hero banner: the picture is shown whole; the empty sides are filled with a blurred, darkened copy of the same
   picture (instead of black bars), so any banner uploaded in the admin looks right whatever its shape. */
.homebanner .bannerSlider .heroSlide { position: relative; overflow: hidden; background: var(--mha-text, #1b2a41); }
.homebanner .bannerSlider .heroSlide::before { content: ""; position: absolute; inset: -40px; background: var(--hero-bg) center / cover no-repeat; filter: blur(26px) brightness(.8) saturate(1.1); }
.homebanner .bannerSlider .heroSlide img { position: relative; z-index: 1; background: transparent !important; }

/* Hero slider: dots and pause button sit together, centred at the bottom of the picture (not at the far right of the blurred backdrop) */
.sliderArea-01 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager { display: flex !important; justify-content: center; align-items: flex-end; gap: 10px; padding-bottom: 14px; pointer-events: none; }
.sliderArea-01 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { position: static !important; right: auto !important; bottom: auto !important; pointer-events: auto; }
.sliderArea-01 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { position: static !important; right: auto !important; bottom: auto !important; pointer-events: auto; }
.sliderArea-01 .bx-wrapper .bx-controls-direction { pointer-events: none; }
.sliderArea-01 .bx-wrapper .bx-controls-direction a { pointer-events: auto; }
/* Photo / video / gallery row: narrow cards, so the dots sit closer and the bar plus pause button always fit inside the card */
.infographic.sliderArea-01 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager { gap: 8px; padding-bottom: 10px; max-width: 100%; }
.infographic.sliderArea-01 .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { padding: 2px 6px; max-width: calc(100% - 60px); overflow: hidden; }
.infographic.sliderArea-01 .bx-wrapper .bx-pager.bx-default-pager a.bx-pager-link { margin: 0 !important; min-width: 20px !important; min-height: 24px !important; width: 20px !important; padding: 7px 5px !important; }
.infographic.sliderArea-01 .bx-wrapper .bx-controls .bx-controls-auto { width: 36px !important; height: 36px; flex: 0 0 36px; }