/* === ActionableReporting.com Custom CSS === */
/* Theme: Syntax | Target width: 1200px (default was 829px content-area, 1008px header) */

/* ===================== */
/* 1. WIDEN LAYOUT       */
/* ===================== */

/* Main content area — THIS is the key constraint in Syntax (default 829px) */
.content-area {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
    padding-top: 0 !important;
    float: none !important;
    width: 100% !important;
}

.site-content {
    max-width: 1200px !important;
    width: 100% !important;
    float: none !important;
}

/* Reduce top whitespace — Syntax default is 59.4px */
.site-main {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 10px !important;
}

.entry-content {
    max-width: 1200px !important;
}

/* Hide empty sidebar — Syntax has a two-column sidebar layout */
#secondary.widget-area {
    display: none !important;
}

/* Header wrapper — Syntax default is 1008px */
.site-header-wrapper {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Footer */
#colophon, .site-footer {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===================== */
/* 2. HERO MEDIA+TEXT    */
/* ===================== */

/* Fix hero block overlap: ensure proper grid layout */
.wp-block-media-text {
    max-width: 100% !important;
    display: grid !important;
    gap: 0 !important;
}

/* Explicitly assign grid positions — prevents overlap */
.wp-block-media-text .wp-block-media-text__media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    overflow: hidden !important;
}

.wp-block-media-text .wp-block-media-text__media img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Text goes in column 2, not overlapping column 1 */
.wp-block-media-text .wp-block-media-text__content {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding: 0 8% !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    align-self: center !important;
}

/* Fix hero text lines overlapping each other */
.wp-block-media-text .wp-block-media-text__content p,
.wp-block-media-text .wp-block-media-text__content h1,
.wp-block-media-text .wp-block-media-text__content h2,
.wp-block-media-text .wp-block-media-text__content h3 {
    line-height: 1.5 !important;
    margin-top: 0.3em !important;
    margin-bottom: 0.3em !important;
}

/* On smaller screens, stack vertically instead of overlapping */
@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile {
        grid-template-columns: 100% !important;
    }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media,
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        grid-column: 1 !important;
    }
}

/* ===================== */
/* 3. NEWSPACK ARTICLES  */
/* ===================== */

.wpnbha .entry-title {
    font-size: 1.2em !important;
    margin: 0.3em 0 !important;
}

.wpnbha .entry-meta {
    font-size: 0.8em !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-top: 0.3em !important;
    gap: 0.8em !important;
}

.wpnbha .entry-wrapper p {
    font-size: 0.9em !important;
    margin: 0.2em 0 0.3em 0 !important;
}

.wpnbha article {
    margin-bottom: 0.5em !important;
    padding-bottom: 0.5em !important;
    border-bottom: 1px solid #eee !important;
}

/* ===================== */
/* 4. POWER BI EMBED     */
/* ===================== */

.pbi-embed-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.pbi-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========================= */
/* 5. FONT SIZE LINE-HEIGHT  */
/* ========================= */

/* Fix overlapping lines on large-font-size headings (e.g. Fabric article) */
.has-large-font-size {
    line-height: 1.4 !important;
}

/* ========================= */
/* 6. CONTACT SECTION        */
/* ========================= */

/* Contact section styling — no font overrides needed, theme defaults apply */
/* Only keep structural styling if needed */