﻿/* =============================================================================
   DBIM - index (home) page only.  Every rule is gated by body.dbim-home, and the
   stylesheet is only linked from landingpage/index.blade.php.
   Scale: H2 24/20, H3 20/16, body 16/14, secondary 14/12 (desktop/mobile).
   Meta text stays at 12px minimum for legibility.
   ============================================================================= */

/* ---- Section headings (one style for every section) ---- */
body.dbim-home .amb-announcement-title,
body.dbim-home .amb-announcement-title h3,
body.dbim-home .lgTitle h2,
body.dbim-home .section-title,
body.dbim-home .smart-tab {
    font-family: var(--dbim-font);
    font-size: var(--dbim-h2);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}
body.dbim-home .amb-announcement-title,
body.dbim-home .amb-announcement-title h3,
body.dbim-home .lgTitle h2,
body.dbim-home .section-title { color: var(--dbim-blue-1); }
body.dbim-home .smart-tab.active { color: var(--dbim-blue-1); }

/* heading + "View All" rows: title and link share one centre line */
body.dbim-home .lgHeader { align-items: center; gap: 16px; }
body.dbim-home .amb-announcement-header { align-items: center; }

/* ---- "View All" / follow links ---- */
body.dbim-home .amb-announcement-viewall,
body.dbim-home .lgViewAll,
body.dbim-home .view-all,
body.dbim-home .social-view {
    font-family: var(--dbim-font);
    font-size: var(--dbim-p2);
    font-weight: 600;
    line-height: 1.4;
    color: var(--dbim-blue-1);
}
body.dbim-home .amb-announcement-viewall:hover,
body.dbim-home .lgViewAll:hover,
body.dbim-home .view-all:hover,
body.dbim-home .social-view:hover { color: var(--dbim-blue-2); }
body.dbim-home .important-view-all { font-size: var(--dbim-p2); font-weight: 600; }

/* ---- Card / list item titles ---- */
body.dbim-home .amb-announcement-item-title,
body.dbim-home .lgContent h4 {
    font-family: var(--dbim-font);
    font-size: var(--dbim-p1);
    font-weight: 500;
    line-height: 1.4;
    color: var(--dbim-brown);
}
body.dbim-home .lgFeaturedContent h3,
body.dbim-home .service-card h3,
body.dbim-home .portal-content h3 {
    font-family: var(--dbim-font);
    font-size: var(--dbim-h3);
    font-weight: 600;
    line-height: 1.3;
}
body.dbim-home .service-card h3 { color: var(--dbim-blue-1); }
body.dbim-home .link-name,
body.dbim-home .quick-text {
    font-family: var(--dbim-font);
    font-size: var(--dbim-p2);
    font-weight: 500;
    line-height: 1.5;
    color: var(--dbim-brown);
}

/* ---- Descriptions and buttons inside cards ---- */
body.dbim-home .service-card p {
    font-size: var(--dbim-p2);
    line-height: 1.5;
    color: var(--dbim-grey-3);
}
body.dbim-home .service-btn {
    font-size: var(--dbim-p2);
    font-weight: 600;
    color: var(--dbim-blue-1);
}

/* ---- Meta text (dates, numbers, handles): 12px, AA contrast ---- */
body.dbim-home .amb-announcement-posted,
body.dbim-home .lgContent span,
body.dbim-home .link-number,
body.dbim-home .social-info span,
body.dbim-home .slider-date {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dbim-grey-3);
}
body.dbim-home .slider-date { color: rgba(255, 255, 255, .85); }
body.dbim-home .lgFeaturedContent span { color: rgba(255, 255, 255, .85); }

/* ---- Slider caption uses the H3 step ---- */
body.dbim-home .slider-content .slide-title { font-size: var(--dbim-h3); line-height: 1.4; }

/* ---- Ambassador card: consistent type ---- */
body.dbim-home .ambassador-card h3 { font-size: var(--dbim-h3); font-weight: 600; color: var(--dbim-blue-1); }
body.dbim-home .ambassador-card h5 { font-size: var(--dbim-p1); font-weight: 700; color: var(--dbim-brown); }

/* ---- Left alignment for body copy; headings stay as designed ---- */
body.dbim-home .service-card, body.dbim-home .lgContent, body.dbim-home .important-link-item,
body.dbim-home .quick-card { text-align: left; }

/* ---- Vertical rhythm between the major sections ---- */
body.dbim-home .lgHeader { margin-bottom: 24px; }
@media (max-width: 767.98px) {
    body.dbim-home .lgHeader { margin-bottom: 16px; }
    body.dbim-home .smart-tab { white-space: nowrap; }
    body.dbim-home .smart-tabs { gap: 20px; overflow-x: auto; scrollbar-width: thin; }
}

/* Service cards: readable text in the hover / focus state (dark blue background) */
body.dbim-home .service-card:hover h3,
body.dbim-home .service-card:focus-visible h3 { color: #fff; }
body.dbim-home .service-card:hover p,
body.dbim-home .service-card:focus-visible p { color: rgba(255, 255, 255, .88); }
body.dbim-home .service-card:hover .service-btn,
body.dbim-home .service-card:focus-visible .service-btn { color: #fff; }
body.dbim-home .service-card:hover .service-number,
body.dbim-home .service-card:hover [class*="number"],
body.dbim-home .service-card:focus-visible [class*="number"] { color: var(--dbim-blue-4); }
body.dbim-home .service-card:focus-visible { background: #163b7a; outline: 3px solid var(--dbim-info); outline-offset: 2px; }
