/* Muslim Diaspora Portal — accent colour and content typography.
   Header, banner, carousel and footer styling come from
   /_content/Sesric.Portals.UI/css/portal-base.css */

:root {
    --portal-accent:       #1B5E5A;
    --portal-accent-dark:  #12403D;
    --portal-accent-light: #E4F0EE;

    /* Second accent, used only on the dark bands (hero, countdown, venue) where the
       green has nothing left to contrast against. */
    --portal-gold:         #F0B95B;

    /* The shared library mixes its own near-black green for the footer and derives the
       strip above the header from it. Both sit against dark bands of this portal - the
       strip a few pixels above the hero, the footer directly under the venue - so both
       take the colour those bands are built on. The venue and the footer are then told
       apart by the hairline between them rather than by a change of tone. */
    --portal-footer-bg:    var(--portal-accent-dark);
    --portal-banner-bg:    var(--portal-footer-bg);
}

/* ---------- Typeface ---------- */

/* Three families, loaded by the layout from PortalFontsHref: Cormorant Garamond carries
   the headings, Source Serif 4 the reading text, and Archivo the chrome — navigation,
   buttons and the small capitalised labels. Neither serif ships Arabic glyphs, so the
   Arabic pages fall through to the faces named after them. */
:root {
    --font-display: 'Cormorant Garamond', 'Noto Naskh Arabic', 'Amiri', Georgia, serif;
    --font-body:    'Source Serif 4', 'Noto Naskh Arabic', 'Amiri', Georgia, serif;
    --font-ui:      Archivo, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
}

/* Cormorant is a light, high-contrast face; it needs weight and a little negative
   tracking to hold together at heading sizes. */
.portal-page-title,
.portal-section-title,
.portal-prose h2,
.portal-prose h3,
.dp-section h2,
.dp-band h2,
.dp-venue h2,
.dp-hero h1,
.dp-event h3,
.dp-agenda-day-title,
.dp-tile h3,
.portal-card-title {
    font-family: var(--font-display);
    letter-spacing: -.01em;
    /* Cormorant defaults to old-style figures, which drop the 1 of "1st Muslim Diaspora
       Forum" to x-height and leave it looking like a dotless i. */
    font-variant-numeric: lining-nums;
}

.portal-page-title,
.dp-hero h1 {
    font-weight: 700;
}

.portal-section-title,
.portal-prose h2,
.dp-section h2,
.dp-band h2,
.dp-venue h2,
.dp-event h3,
.dp-agenda-day-title {
    font-weight: 600;
}

/* The small headings sit near body size, where the serif thins out, so they keep the
   heavier cut. Cormorant also sets small for its point size, so each takes a step up to
   hold its rank against the body text. */
.portal-prose h3,
.dp-tile h3,
.portal-card-title {
    font-weight: 700;
    letter-spacing: 0;
}

/* Chrome and every label that is set in capitals or tracked out: the serif does neither
   well. */
.portal-banner,
.portal-brand-name,
.portal-brand-tagline,
.portal-nav-link,
.portal-breadcrumb-bar,
.portal-footer-heading,
.portal-footer-link,
.portal-footer-about-label,
.dp-btn,
.dp-arrow-link,
.dp-section-eyebrow,
.dp-hero-motto,
.dp-hero-date,
.dp-hero-place,
.dp-event-tag,
.dp-stat-value,
.dp-stat-label,
.dp-slot-time,
.dp-person-name,
.dp-person-country,
.dp-venue-facts dt,
.cd-label,
.cd-num,
.cd-lab,
.cd-complete {
    font-family: var(--font-ui);
}

/* ---------- Content width ---------- */

/* Bootstrap holds the container at a fixed 1320px however wide the screen is, so a
   1920px page ran its text down the middle and left the sides empty. The page follows
   the screen instead: the margins stay proportional and the content uses the width
   that is actually there. The 960px floor is Bootstrap's own width at this breakpoint,
   kept so the page never comes out narrower than it was. Below 992px the default
   container is already close to the full width, so it is left alone. */
@media (min-width: 992px) {
    .container {
        max-width: max(92vw, 960px);
    }
}

/* ---------- Page headings ---------- */

.portal-page-title {
    font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--portal-accent-dark);
    margin-bottom: .75rem;
}

.portal-page-lead {
    font-size: 1.125rem;
    line-height: 1.65;
    color: #40514f;
}

.portal-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--portal-accent-dark);
    margin-bottom: 1rem;
}

/* Subheading for a named group within a section — e.g. the country/institution
   blocks the Participants list is broken into. One step down from
   .portal-section-title, same display face. */
.dp-group-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--portal-accent-dark);
    margin: 2.5rem 0 1rem;
}

/* Short accent rule under a heading */
.portal-rule::after {
    content: "";
    display: block;
    width: 3.5rem;
    height: 3px;
    margin-top: .75rem;
    background: var(--portal-accent);
}

/* ---------- Prose ---------- */

/* No measure of its own: the column above is the measure, so the text runs the width
   of the page rather than stopping a third of the way across it. */
.portal-prose p {
    line-height: 1.75;
    color: #333f3e;
}

.portal-prose h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--portal-accent-dark);
    margin-top: 2.25rem;
    margin-bottom: .85rem;
}

.portal-prose h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--portal-accent-dark);
    margin-top: 1.75rem;
    margin-bottom: .6rem;
}

.portal-prose ul,
.portal-prose ol {
    line-height: 1.75;
    color: #333f3e;
}

.portal-prose blockquote {
    border-inline-start: 3px solid var(--portal-accent);
    padding-inline-start: 1.25rem;
    margin: 1.5rem 0;
    color: var(--portal-accent-dark);
    font-size: 1.05rem;
}

/* ---------- Cards ---------- */

/* Card and tile grids appear on every section of the site, so the grid and the
   link affordances live here rather than in a page-specific stylesheet. */
.dp-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.dp-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--portal-accent);
    text-decoration: none;
}

.dp-arrow-link:hover {
    color: var(--portal-accent-dark);
    text-decoration: underline;
}

.dp-arrow-link::after {
    content: "\2192";
}

[dir="rtl"] .dp-arrow-link::after {
    content: "\2190";
}

.dp-btn {
    display: inline-block;
    padding: .7rem 1.5rem;
    border-radius: 2rem;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.dp-btn-solid {
    background: #fff;
    color: var(--portal-accent-dark);
}

.dp-btn-solid:hover {
    background: #d9ece9;
    color: var(--portal-accent-dark);
}

.dp-btn-ghost {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
}

.dp-btn-ghost:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

/* The two above are for the dark bands; these two are their counterparts on a
   white section. */
.dp-btn-accent {
    background: var(--portal-accent);
    color: #fff;
}

.dp-btn-accent:hover {
    background: var(--portal-accent-dark);
    color: #fff;
}

.dp-btn-outline {
    border: 1px solid var(--portal-accent);
    color: var(--portal-accent);
}

.dp-btn-outline:hover {
    background: var(--portal-accent-light);
    color: var(--portal-accent-dark);
}

/* Row of buttons inside a left-aligned section. */
.dp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
}

.dp-tile {
    background: #fff;
    border: 1px solid #dfe8e7;
    border-radius: .5rem;
    padding: 1.6rem;
    border-top: 3px solid var(--portal-accent);
}

/* Icon badge above the tile heading — sets the subject at a glance. */
.dp-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .5rem;
    background: var(--portal-accent-light);
    color: var(--portal-accent);
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 1rem;
}

.dp-tile h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--portal-accent-dark);
    margin-bottom: .55rem;
}

.dp-tile p {
    font-size: .94rem;
    line-height: 1.65;
    color: #4a5a58;
    margin-bottom: 0;
}

.portal-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #e2e8e7;
    border-radius: .5rem;
    padding: 1.5rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.portal-card:hover {
    box-shadow: 0 .5rem 1.5rem rgba(27, 94, 90, .12);
    transform: translateY(-2px);
}

.portal-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--portal-accent-dark);
    margin-bottom: .5rem;
}

.portal-card-text {
    font-size: .95rem;
    line-height: 1.6;
    color: #4a5a58;
    margin-bottom: 0;
}

/* ---------- People ---------- */

/* Participants of the Forum. Records arrive one at a time, so a card carries a
   neutral portrait and "to be announced" until the name is confirmed. */
.dp-people {
    display: grid;
    gap: 2.25rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    margin-top: 2rem;
}

.dp-person {
    text-align: center;
}

.dp-person-photo {
    display: block;
    width: min(100%, 11rem);
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--portal-accent-light);
}

/* A card still waiting for its portrait shows the silhouette, which is drawn to fill
   its own box and would be cropped by the cover rule above. */
.dp-person-photo-pending {
    box-sizing: border-box;
    padding: 1.35rem;
    object-fit: contain;
}

.dp-person-name {
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--portal-accent-dark);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.dp-person-pending .dp-person-name {
    color: #6b7a78;
    font-weight: 600;
    font-style: italic;
    text-transform: none;
}

.dp-person-role {
    margin-top: .4rem;
    font-size: .86rem;
    line-height: 1.55;
    color: #4a5a58;
}

.dp-person-country {
    margin-top: .35rem;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--portal-accent);
}

/* Shown in place of the grid while no record at all has been entered. */
.dp-people-empty {
    margin-top: 2rem;
    padding: 2.5rem 1.5rem;
    border: 1px dashed #cdd9d8;
    border-radius: .5rem;
    text-align: center;
    color: #5b6a68;
}

/* ---------- Event card ---------- */

.dp-event {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    background: #12403D;
    color: #fff;
    border-radius: .6rem;
    padding: clamp(1.75rem, 1rem + 2.5vw, 2.75rem);
}

@media (min-width: 62em) {
    .dp-event {
        grid-template-columns: 13rem minmax(0, 1fr);
        align-items: center;
    }
}

.dp-event-date {
    border-inline-end: 1px solid rgba(255, 255, 255, .22);
    padding-inline-end: 1.5rem;
}

@media (max-width: 61.99em) {
    .dp-event-date {
        border-inline-end: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .22);
        padding-inline-end: 0;
        padding-bottom: 1.25rem;
    }
}

.dp-event-day {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.05;
}

.dp-event-month {
    font-size: 1rem;
    color: rgba(255, 255, 255, .78);
    margin-top: .25rem;
}

.dp-event-place {
    font-size: .9rem;
    color: rgba(255, 255, 255, .7);
    margin-top: .75rem;
}

.dp-event-tag {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
    margin-bottom: .6rem;
}

.dp-event h3 {
    font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
    font-weight: 700;
    margin-bottom: .6rem;
}

.dp-event p {
    color: rgba(255, 255, 255, .85);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* ---------- Event programme timetable ---------- */

.dp-agenda-day {
    margin-top: 2.5rem;
}

.dp-agenda-day-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--portal-accent-dark);
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--portal-accent);
    margin-bottom: 0;
}

.dp-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .35rem 1.5rem;
    padding: 1.15rem 0;
    border-bottom: 1px solid #e5ebea;
}

@media (min-width: 48em) {
    .dp-slot {
        grid-template-columns: 8.5rem minmax(0, 1fr);
    }
}

.dp-slot-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--portal-accent);
    white-space: nowrap;
}

.dp-slot-title {
    font-weight: 700;
    color: #22302f;
}

.dp-slot-body {
    margin-top: .5rem;
    font-size: .95rem;
    line-height: 1.7;
    color: #4a5a58;
}

.dp-slot-body p {
    margin-bottom: .6rem;
}

/* The opening session lists who speaks, so the body needs a list and a label above it. */
.dp-slot-subhead {
    margin-top: .9rem;
    margin-bottom: .35rem !important;
    font-family: var(--font-ui);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--portal-accent);
}

.dp-slot-body ul {
    margin: 0 0 .4rem;
    padding-inline-start: 1.1rem;
}

    .dp-slot-body ul li {
        margin-bottom: .3rem;
    }

.dp-slot-speakers {
    margin-top: .5rem;
    font-size: .88rem;
    color: #6b7a78;
}

/* Plain-item slots (breaks, photos, dinners) stay visually quieter */
.dp-slot-plain .dp-slot-title {
    font-weight: 500;
    color: #5b6a68;
}

/* ---------- Definition lists (practical information) ---------- */

.dp-facts {
    margin: 0;
}

.dp-facts dt {
    font-weight: 700;
    color: var(--portal-accent-dark);
    margin-top: 1.35rem;
}

.dp-facts dd {
    margin: .35rem 0 0;
    line-height: 1.7;
    color: #3f4f4d;
}

/* ---------- Utilities ---------- */

.portal-band {
    background: var(--portal-accent-light);
    padding: 2.5rem 0;
}

.portal-link {
    color: var(--portal-accent);
    font-weight: 600;
    text-decoration: none;
}

.portal-link:hover {
    color: var(--portal-accent-dark);
    text-decoration: underline;
}