/* ============================================================
   Adib — unified typography + modern responsive layouts
   Loaded on all public pages (after site.css / cms-items.css)
   ============================================================ */

:root {
    /* Type scale — readable, not oversized */
    --fs-xs: 0.75rem;      /* 12 */
    --fs-sm: 0.875rem;     /* 14 */
    --fs-base: 1rem;       /* 16 */
    --fs-md: 1.0625rem;    /* 17 */
    --fs-lg: 1.125rem;     /* 18 */
    --fs-xl: 1.25rem;      /* 20 */
    --fs-2xl: 1.5rem;      /* 24 */
    --fs-3xl: 1.75rem;     /* 28 */
    --fs-4xl: 2rem;        /* 32 */

    --lh-tight: 1.45;
    --lh-snug: 1.6;
    --lh-body: 1.8;
    --lh-loose: 1.95;

    --content-max: 72rem;
    --prose-max: 46rem;
    --stack-gap: clamp(1.25rem, 2.5vw, 1.75rem);
    --section-pad-y: clamp(1.75rem, 4vw, 3.5rem);
}

/* ---------- Global type ---------- */

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.cms-item__title,
.cms-fancy-box-title,
.doc-hero__title,
.story-hero__title,
.section-heading h2 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: -0.015em;
    color: var(--navy, #16324a);
    text-wrap: balance;
}

/* Header brand title must stay white on dark/photo header */
.site-header .header-title__main,
.header-title__main {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: #ffffff !important;
}

h1 { font-size: clamp(var(--fs-2xl), 3.2vw, var(--fs-4xl)); }
h2 { font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-3xl)); }
h3 { font-size: clamp(var(--fs-lg), 1.8vw, var(--fs-xl)); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

p {
    margin: 0 0 0.9em;
    line-height: var(--lh-body);
}

small, .text-muted, .text-sm {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

/* ---------- Page shell ---------- */

.site-main {
    min-height: 40vh;
}

.container--page {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.page-content-section--items {
    padding: var(--section-pad-y) 0 calc(var(--section-pad-y) + 1rem);
}

/* Inner page title bar */
.page-inner-hero {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
    border-bottom: 1px solid var(--border, #dbeaf5);
}

.page-inner-hero__title {
    margin: 0;
    font-size: clamp(var(--fs-xl), 2.6vw, var(--fs-3xl));
    color: var(--navy, #16324a);
}

.page-inner-hero__line {
    display: block;
    width: 2.75rem;
    height: 3px;
    margin-top: 0.75rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary, #4fa3d9), transparent);
}

/* ---------- CMS stack layout ---------- */

.cms-page-items,
.cms-plugin-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    max-width: 100%;
}

.cms-page-items > *,
.cms-plugin-stack > * {
    min-width: 0;
}

/* Desktop: editorial text + image pairs (see cms-items.css) */
@media (min-width: 880px) {
    .cms-page-items,
    .cms-plugin-stack {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        column-gap: clamp(1.25rem, 2.8vw, 2rem);
        row-gap: var(--stack-gap);
        align-items: stretch;
    }

    .cms-page-items > *,
    .cms-plugin-stack > * {
        grid-column: 1 / -1;
    }

    .cms-page-items > .cms-media-block:has(+ .cms-item--content),
    .cms-page-items > .cms-media-block:has(+ .cms-prose-block),
    .cms-plugin-stack > .cms-media-block:has(+ .cms-item--content),
    .cms-plugin-stack > .cms-media-block:has(+ .cms-prose-block) {
        grid-column: 2;
        max-width: none;
        margin-inline: 0;
        height: 100%;
    }

    .cms-page-items > .cms-media-block + .cms-item--content,
    .cms-page-items > .cms-media-block + .cms-prose-block,
    .cms-plugin-stack > .cms-media-block + .cms-item--content,
    .cms-plugin-stack > .cms-media-block + .cms-prose-block {
        grid-column: 1;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .cms-page-items > .cms-item--content:has(+ .cms-media-block),
    .cms-page-items > .cms-prose-block:has(+ .cms-media-block),
    .cms-plugin-stack > .cms-item--content:has(+ .cms-media-block),
    .cms-plugin-stack > .cms-prose-block:has(+ .cms-media-block) {
        grid-column: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .cms-page-items > .cms-item--content + .cms-media-block,
    .cms-page-items > .cms-prose-block + .cms-media-block,
    .cms-plugin-stack > .cms-item--content + .cms-media-block,
    .cms-plugin-stack > .cms-prose-block + .cms-media-block {
        grid-column: 2;
        max-width: none;
        margin-inline: 0;
        height: 100%;
    }
}

/* Full-bleed media looks intentional */
.cms-plugin-stack > .cms-media-block,
.cms-plugin-stack > figure,
.cms-plugin-stack > .frontend-image,
.cms-plugin-stack img.img-fluid {
    border-radius: var(--radius-md, 16px);
    overflow: hidden;
}

/* ---------- Prose / content boxes ---------- */

.cms-prose-block,
.cms-fancy-box-text,
.content-box,
.djangocms-text-plugin,
.cms-plugin-stack .text-plugin,
.cms-plugin-stack .cms-plugin > .text {
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text, #202124);
}

.cms-prose-block {
    padding: clamp(1.15rem, 2.5vw, 1.65rem);
    border-radius: var(--radius-md, 16px);
    background: #fff;
    border: 1px solid var(--border, #dbeaf5);
    box-shadow: 0 6px 20px rgba(17, 24, 39, 0.05);
}

.cms-prose-block--compact {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.cms-prose-block h1,
.cms-prose-block h2,
.cms-prose-block h3,
.cms-prose-block h4,
.cms-fancy-box-text h1,
.cms-fancy-box-text h2,
.cms-fancy-box-text h3,
.cms-fancy-box-text h4 {
    margin: 1.15em 0 0.45em;
    color: var(--navy, #16324a);
    font-weight: 700;
    line-height: var(--lh-snug);
}

.cms-prose-block h1 { font-size: clamp(var(--fs-xl), 2.2vw, var(--fs-2xl)); }
.cms-prose-block h2 { font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl)); }
.cms-prose-block h3 { font-size: var(--fs-md); }

.cms-prose-block p,
.cms-fancy-box-text p {
    margin: 0 0 0.85em;
    color: #3f4654;
    line-height: var(--lh-body);
    font-size: var(--fs-base);
}

.cms-prose-block ul,
.cms-prose-block ol,
.cms-fancy-box-text ul,
.cms-fancy-box-text ol {
    margin: 0 0 1em;
    padding-right: 1.25em;
}

.cms-prose-block li,
.cms-fancy-box-text li {
    margin-bottom: 0.4em;
    line-height: var(--lh-snug);
}

.cms-item__title,
.cms-fancy-box-title {
    font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl)) !important;
    font-weight: 700 !important;
    line-height: var(--lh-snug) !important;
    letter-spacing: -0.01em !important;
}

.cms-item__kicker {
    font-size: var(--fs-xs) !important;
    font-weight: 700;
}

.cms-item__body,
.cms-fancy-box__body {
    padding: clamp(1.15rem, 2.8vw, 1.75rem) !important;
}

.cms-fancy-box,
.cms-item__inner {
    border-radius: var(--radius-md, 16px) !important;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06) !important;
}

/* ---------- Tables ---------- */

.cms-table thead th,
.cms-prose-block th {
    font-size: var(--fs-sm) !important;
    font-weight: 700;
}

.cms-table tbody td,
.cms-prose-block td {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

/* ---------- User cards / quick access ---------- */

.user-card__name,
.cms-user-card__name {
    font-size: var(--fs-md) !important;
    font-weight: 700;
    line-height: var(--lh-snug);
}

.user-card__field,
.cms-user-card__field {
    font-size: var(--fs-sm) !important;
    line-height: var(--lh-snug);
}

.quick-access-item__title,
.qa-card__title {
    font-size: var(--fs-sm) !important;
    font-weight: 700;
    line-height: var(--lh-snug);
}

/* ---------- Frontend (Bootstrap) plugins inside CMS ---------- */

.cms-plugin-stack .alert {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    border-radius: 12px;
    padding: 0.85rem 1rem;
}

.cms-plugin-stack .card {
    border-radius: 14px;
    border-color: var(--border, #dbeaf5);
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.05);
    overflow: hidden;
}

.cms-plugin-stack .card-header,
.cms-plugin-stack .card-body,
.cms-plugin-stack .card-footer {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.cms-plugin-stack .card-header {
    font-weight: 700;
    color: var(--navy, #16324a);
}

.cms-plugin-stack .accordion-button {
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--navy, #16324a);
}

.cms-plugin-stack .accordion-body {
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
    color: #3f4654;
}

.cms-plugin-stack .nav-tabs .nav-link {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.cms-plugin-stack .list-group-item {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

.cms-plugin-stack .btn {
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: 999px;
    padding: 0.55rem 1.15rem;
}

.cms-plugin-stack .badge {
    font-size: 0.7rem;
    font-weight: 700;
}

.cms-plugin-stack .blockquote {
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    color: var(--navy, #16324a);
}

.cms-plugin-stack .jumbotron,
.cms-plugin-stack .bg-light.p-4,
.cms-plugin-stack [class*="jumbotron"] {
    border-radius: 16px;
}

.cms-plugin-stack figure {
    margin: 0;
}

.cms-plugin-stack figcaption {
    font-size: var(--fs-sm);
    color: var(--muted, #6f7480);
    text-align: center;
    margin-top: 0.5rem;
}

.cms-plugin-stack img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Media + text grid when row/columns used */
.cms-plugin-stack .row {
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
    align-items: stretch;
}

.cms-plugin-stack .row > [class*="col"] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ---------- Doc / story / eservice heroes ---------- */

.doc-hero__title,
.story-hero__title {
    font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl)) !important;
    font-weight: 800 !important;
    line-height: var(--lh-tight) !important;
}

.doc-hero__kicker,
.story-hero__kicker {
    font-size: var(--fs-xs) !important;
    font-weight: 700;
}

.page-about-story .cms-fancy-box-text,
.page-eservice .cms-fancy-box-text,
.page-minimal-doc .cms-fancy-box-text {
    font-size: var(--fs-base) !important;
    line-height: var(--lh-body) !important;
}

.page-about-story .cms-fancy-box-text p:first-child {
    font-size: var(--fs-md) !important;
    font-weight: 600;
    line-height: var(--lh-snug) !important;
}

@media (min-width: 880px) {
    .about-story-stack {
        max-width: 56rem;
        margin-inline: auto;
    }

    .about-story-stack > .cms-item--table,
    .about-story-stack > .cms-item--cards {
        grid-column: 1 / -1;
        max-width: 100%;
    }
}

/* ---------- Header / nav readability ---------- */

.header-title__main {
    font-size: clamp(1.35rem, 2.8vw, 1.85rem) !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
}

.header-subtitle {
    font-size: var(--fs-sm) !important;
}

.navbar .nav-link,
.main-nav a {
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* ---------- Home sections (keep consistent) ---------- */

.home-section__title,
.section-heading h2 {
    font-size: clamp(var(--fs-xl), 2.4vw, var(--fs-2xl)) !important;
}

.home-section__subtitle,
.home-about__body,
.announcement-card__excerpt {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

/* ---------- Footer ---------- */

.site-footer,
.site-footer p,
.site-footer a,
.site-footer li {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
}

/* ---------- Responsive ---------- */

@media (max-width: 767.98px) {
    body {
        font-size: 0.9375rem; /* 15px on small phones */
    }

    .cms-item__body,
    .cms-fancy-box__body {
        padding: 1rem !important;
    }

    .cms-plugin-stack .btn {
        width: 100%;
        justify-content: center;
    }

    .cms-table thead th,
    .cms-table tbody td {
        padding: 10px 12px;
        font-size: 0.8125rem !important;
    }
}

@media (min-width: 1200px) {
    .container--page {
        padding-inline: 0;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}