/*
 * Base stylesheet for PB Boilerplate theme
 * Loaded everywhere (frontend + admin)
 * Contains safe styles that won't break WordPress admin UI
 * The Publishing Bureau
 */
:root {
    --font-weight--thin: 100;
    --font-weight--extra-light: 200;
    --font-weight--light: 300;
    --font-weight--regular: 400;
    --font-weight--medium: 500;
    --font-weight--semi-bold: 600;
    --font-weight--bold: 700;
    --font-weight--black: 900;

    /* Spacing variables */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 0.75rem;  /* 12px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */
}

/* ========================================
   WORDPRESS CORE STYLES
======================================== */
.is-layout-constrained {
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}
.is-layout-constrained .is-layout-constrained {
    padding: initial;
}

/* WordPress color classes */
.has-dark-background-color {
    color: var(--wp--preset--color--white);
}
.has-light-background-color {
    color: var(--background-colour--black);
}

/* WordPress block fixes */
.wp-block-quote,
.wp-block-quote *,
.has-dark-background-color table tbody,
.has-dark-background-color table tbody * {
    color: var(--colour--body--background) !important;
}
.has-dark-background-color .wp-block-quote {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white) !important;
}

/* Responsive video embeds */
.video-wrapper > .wp-block-embed__wrapper {
    position: relative;
    margin-top: 45px;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-wrapper > .wp-block-embed__wrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================
   HELPER STYLES
======================================== */
.full-height {
    height: 100%;
}
.full-width {
    width: 100%;
}

.has-dark-background-color .wp-block-quote {
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white) !important;
}

/* Responsive video embeds */
.video-wrapper > .wp-block-embed__wrapper {
    position: relative;
    margin-top: 45px;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-wrapper > .wp-block-embed__wrapper > iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .is-layout-constrained {
        max-width: 720px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .is-layout-constrained {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .is-layout-constrained {
        max-width: 1140px;
    }
}

/* Extra xl large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {

}

/* Publishing Bureau xxl large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {

}

/* ========================================
   UTILITY CLASSES
======================================== */

/* Margin utilities */
.margin-0 { margin: 0 !important; }
.margin-top-0 { margin-top: 0 !important; }
.margin-right-0 { margin-right: 0 !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.margin-left-0 { margin-left: 0 !important; }

.margin-xs { margin: var(--spacing-xs) !important; }
.margin-top-xs { margin-top: var(--spacing-xs) !important; }
.margin-right-xs { margin-right: var(--spacing-xs) !important; }
.margin-bottom-xs { margin-bottom: var(--spacing-xs) !important; }
.margin-left-xs { margin-left: var(--spacing-xs) !important; }

.margin-sm { margin: var(--spacing-sm) !important; }
.margin-top-sm { margin-top: var(--spacing-sm) !important; }
.margin-right-sm { margin-right: var(--spacing-sm) !important; }
.margin-bottom-sm { margin-bottom: var(--spacing-sm) !important; }
.margin-left-sm { margin-left: var(--spacing-sm) !important; }

.margin-md { margin: var(--spacing-md) !important; }
.margin-top-md { margin-top: var(--spacing-md) !important; }
.margin-right-md { margin-right: var(--spacing-md) !important; }
.margin-bottom-md { margin-bottom: var(--spacing-md) !important; }
.margin-left-md { margin-left: var(--spacing-md) !important; }

.margin-lg { margin: var(--spacing-lg) !important; }
.margin-top-lg { margin-top: var(--spacing-lg) !important; }
.margin-right-lg { margin-right: var(--spacing-lg) !important; }
.margin-bottom-lg { margin-bottom: var(--spacing-lg) !important; }
.margin-left-lg { margin-left: var(--spacing-lg) !important; }

.margin-xl { margin: var(--spacing-xl) !important; }
.margin-top-xl { margin-top: var(--spacing-xl) !important; }
.margin-right-xl { margin-right: var(--spacing-xl) !important; }
.margin-bottom-xl { margin-bottom: var(--spacing-xl) !important; }
.margin-left-xl { margin-left: var(--spacing-xl) !important; }

.margin-xxl { margin: var(--spacing-xxl) !important; }
.margin-top-xxl { margin-top: var(--spacing-xxl) !important; }
.margin-right-xxl { margin-right: var(--spacing-xxl) !important; }
.margin-bottom-xxl { margin-bottom: var(--spacing-xxl) !important; }
.margin-left-xxl { margin-left: var(--spacing-xxl) !important; }

/* Padding utilities */
.padding-0 { padding: 0 !important; }
.padding-top-0 { padding-top: 0 !important; }
.padding-right-0 { padding-right: 0 !important; }
.padding-bottom-0 { padding-bottom: 0 !important; }
.padding-left-0 { padding-left: 0 !important; }

.padding-xs { padding: var(--spacing-xs) !important; }
.padding-top-xs { padding-top: var(--spacing-xs) !important; }
.padding-right-xs { padding-right: var(--spacing-xs) !important; }
.padding-bottom-xs { padding-bottom: var(--spacing-xs) !important; }
.padding-left-xs { padding-left: var(--spacing-xs) !important; }

.padding-sm { padding: var(--spacing-sm) !important; }
.padding-top-sm { padding-top: var(--spacing-sm) !important; }
.padding-right-sm { padding-right: var(--spacing-sm) !important; }
.padding-bottom-sm { padding-bottom: var(--spacing-sm) !important; }
.padding-left-sm { padding-left: var(--spacing-sm) !important; }

.padding-md { padding: var(--spacing-md) !important; }
.padding-top-md { padding-top: var(--spacing-md) !important; }
.padding-right-md { padding-right: var(--spacing-md) !important; }
.padding-bottom-md { padding-bottom: var(--spacing-md) !important; }
.padding-left-md { padding-left: var(--spacing-md) !important; }

.padding-lg { padding: var(--spacing-lg) !important; }
.padding-top-lg { padding-top: var(--spacing-lg) !important; }
.padding-right-lg { padding-right: var(--spacing-lg) !important; }
.padding-bottom-lg { padding-bottom: var(--spacing-lg) !important; }
.padding-left-lg { padding-left: var(--spacing-lg) !important; }

.padding-xl { padding: var(--spacing-xl) !important; }
.padding-top-xl { padding-top: var(--spacing-xl) !important; }
.padding-right-xl { padding-right: var(--spacing-xl) !important; }
.padding-bottom-xl { padding-bottom: var(--spacing-xl) !important; }
.padding-left-xl { padding-left: var(--spacing-xl) !important; }

.padding-xxl { padding: var(--spacing-xxl) !important; }
.padding-top-xxl { padding-top: var(--spacing-xxl) !important; }
.padding-right-xxl { padding-right: var(--spacing-xxl) !important; }
.padding-bottom-xxl { padding-bottom: var(--spacing-xxl) !important; }
.padding-left-xxl { padding-left: var(--spacing-xxl) !important; }

/* Grid utilities - row system */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: stretch; /* Default alignment */
}

.row > * {
    flex: 1; /* Equal width distribution */
    min-width: 0; /* Allow flex items to shrink */
}

/* Row-cols for specific column counts */
.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
.row-cols-2 > * { flex: 0 0 calc(50% - var(--spacing-md) / 2); max-width: calc(50% - var(--spacing-md) / 2); }
.row-cols-3 > * { flex: 0 0 calc(33.333333% - var(--spacing-md) * 2 / 3); max-width: calc(33.333333% - var(--spacing-md) * 2 / 3); }
.row-cols-4 > * { flex: 0 0 calc(25% - var(--spacing-md) * 3 / 4); max-width: calc(25% - var(--spacing-md) * 3 / 4); }
.row-cols-5 > * { flex: 0 0 calc(20% - var(--spacing-md) * 4 / 5); max-width: calc(20% - var(--spacing-md) * 4 / 5); }
.row-cols-6 > * { flex: 0 0 calc(16.666667% - var(--spacing-md) * 5 / 6); max-width: calc(16.666667% - var(--spacing-md) * 5 / 6); }

/* Responsive row-cols utilities */
@media (min-width: 576px) {
    .row-cols-sm-1 > * { flex: 0 0 100%; max-width: 100%; }
    .row-cols-sm-2 > * { flex: 0 0 calc(50% - var(--spacing-md) / 2); max-width: calc(50% - var(--spacing-md) / 2); }
    .row-cols-sm-3 > * { flex: 0 0 calc(33.333333% - var(--spacing-md) * 2 / 3); max-width: calc(33.333333% - var(--spacing-md) * 2 / 3); }
    .row-cols-sm-4 > * { flex: 0 0 calc(25% - var(--spacing-md) * 3 / 4); max-width: calc(25% - var(--spacing-md) * 3 / 4); }
    .row-cols-sm-5 > * { flex: 0 0 calc(20% - var(--spacing-md) * 4 / 5); max-width: calc(20% - var(--spacing-md) * 4 / 5); }
    .row-cols-sm-6 > * { flex: 0 0 calc(16.666667% - var(--spacing-md) * 5 / 6); max-width: calc(16.666667% - var(--spacing-md) * 5 / 6); }
}

@media (min-width: 768px) {
    .row-cols-md-1 > * { flex: 0 0 100%; max-width: 100%; }
    .row-cols-md-2 > * { flex: 0 0 calc(50% - var(--spacing-md) / 2); max-width: calc(50% - var(--spacing-md) / 2); }
    .row-cols-md-3 > * { flex: 0 0 calc(33.333333% - var(--spacing-md) * 2 / 3); max-width: calc(33.333333% - var(--spacing-md) * 2 / 3); }
    .row-cols-md-4 > * { flex: 0 0 calc(25% - var(--spacing-md) * 3 / 4); max-width: calc(25% - var(--spacing-md) * 3 / 4); }
    .row-cols-md-5 > * { flex: 0 0 calc(20% - var(--spacing-md) * 4 / 5); max-width: calc(20% - var(--spacing-md) * 4 / 5); }
    .row-cols-md-6 > * { flex: 0 0 calc(16.666667% - var(--spacing-md) * 5 / 6); max-width: calc(16.666667% - var(--spacing-md) * 5 / 6); }
}

@media (min-width: 992px) {
    .row-cols-lg-1 > * { flex: 0 0 100%; max-width: 100%; }
    .row-cols-lg-2 > * { flex: 0 0 calc(50% - var(--spacing-md) / 2); max-width: calc(50% - var(--spacing-md) / 2); }
    .row-cols-lg-3 > * { flex: 0 0 calc(33.333333% - var(--spacing-md) * 2 / 3); max-width: calc(33.333333% - var(--spacing-md) * 2 / 3); }
    .row-cols-lg-4 > * { flex: 0 0 calc(25% - var(--spacing-md) * 3 / 4); max-width: calc(25% - var(--spacing-md) * 3 / 4); }
    .row-cols-lg-5 > * { flex: 0 0 calc(20% - var(--spacing-md) * 4 / 5); max-width: calc(20% - var(--spacing-md) * 4 / 5); }
    .row-cols-lg-6 > * { flex: 0 0 calc(16.666667% - var(--spacing-md) * 5 / 6); max-width: calc(16.666667% - var(--spacing-md) * 5 / 6); }
}

@media (min-width: 1200px) {
    .row-cols-xl-1 > * { flex: 0 0 100%; max-width: 100%; }
    .row-cols-xl-2 > * { flex: 0 0 calc(50% - var(--spacing-md) / 2); max-width: calc(50% - var(--spacing-md) / 2); }
    .row-cols-xl-3 > * { flex: 0 0 calc(33.333333% - var(--spacing-md) * 2 / 3); max-width: calc(33.333333% - var(--spacing-md) * 2 / 3); }
    .row-cols-xl-4 > * { flex: 0 0 calc(25% - var(--spacing-md) * 3 / 4); max-width: calc(25% - var(--spacing-md) * 3 / 4); }
    .row-cols-xl-5 > * { flex: 0 0 calc(20% - var(--spacing-md) * 4 / 5); max-width: calc(20% - var(--spacing-md) * 4 / 5); }
    .row-cols-xl-6 > * { flex: 0 0 calc(16.666667% - var(--spacing-md) * 5 / 6); max-width: calc(16.666667% - var(--spacing-md) * 5 / 6); }
}

/* Display utilities */
.display-none { display: none !important; }
.display-block { display: block !important; }
.display-inline { display: inline !important; }
.display-inline-block { display: inline-block !important; }
.display-flex { display: flex !important; }
.display-inline-flex { display: inline-flex !important; }

/* Responsive display utilities - Small devices (576px and up) */
@media (min-width: 576px) {
    .display-none-sm { display: none !important; }
    .display-block-sm { display: block !important; }
    .display-inline-sm { display: inline !important; }
    .display-inline-block-sm { display: inline-block !important; }
    .display-flex-sm { display: flex !important; }
    .display-inline-flex-sm { display: inline-flex !important; }
}

/* Responsive display utilities - Medium devices (768px and up) */
@media (min-width: 768px) {
    .display-none-md { display: none !important; }
    .display-block-md { display: block !important; }
    .display-inline-md { display: inline !important; }
    .display-inline-block-md { display: inline-block !important; }
    .display-flex-md { display: flex !important; }
    .display-inline-flex-md { display: inline-flex !important; }
}

/* Responsive display utilities - Large devices (992px and up) */
@media (min-width: 992px) {
    .display-none-lg { display: none !important; }
    .display-block-lg { display: block !important; }
    .display-inline-lg { display: inline !important; }
    .display-inline-block-lg { display: inline-block !important; }
    .display-flex-lg { display: flex !important; }
    .display-inline-flex-lg { display: inline-flex !important; }
}

/* Responsive display utilities - Extra large devices (1200px and up) */
@media (min-width: 1200px) {
    .display-none-xl { display: none !important; }
    .display-block-xl { display: block !important; }
    .display-inline-xl { display: inline !important; }
    .display-inline-block-xl { display: inline-block !important; }
    .display-flex-xl { display: flex !important; }
    .display-inline-flex-xl { display: inline-flex !important; }
}

/* Responsive display utilities - Extra xl large devices (1400px and up) */
@media (min-width: 1400px) {
    .display-none-xxl { display: none !important; }
    .display-block-xxl { display: block !important; }
    .display-inline-xxl { display: inline !important; }
    .display-inline-block-xxl { display: inline-block !important; }
    .display-flex-xxl { display: flex !important; }
    .display-inline-flex-xxl { display: inline-flex !important; }
}

/* Flex utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }

/* Text utilities */
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* Width utilities */
.width-25 { width: 25% !important; }
.width-50 { width: 50% !important; }
.width-75 { width: 75% !important; }
.width-100 { width: 100% !important; }
.width-auto { width: auto !important; }