/*
 * St. Mark-friendly front-end styling.
 * Deliberately inherits the active WordPress theme's typography and most colors
 * so the bulletin page feels like a native part of stmrk.org.
 */
.pb-wrap,
.pb-latest-card{
    --pb-accent:var(--global-palette1,var(--ast-global-color-0,#222));
    --pb-text:var(--global-palette4,var(--ast-global-color-3,#252525));
    --pb-muted:var(--global-palette6,var(--ast-global-color-2,#6b6b6b));
    --pb-border:rgba(0,0,0,.13);
    color:var(--pb-text);
    font-family:inherit;
}

.pb-wrap{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(250px, 31%);
    align-items:start;
    gap:clamp(34px,5vw,72px);
    width:100%;
    max-width:100%;
    margin:0;
    padding:8px 0 18px;
}


/* Customizable parish banner. Defaults retain the compact St. Mark look. */
.pb-banner{
    grid-column:1 / -1;
    position:relative;
    display:flex;
    align-items:center;
    box-sizing:border-box;
    width:100%;
    height:var(--pb-banner-height,104px);
    min-height:60px;
    margin:0 0 4px;
    padding:18px 0;
    overflow:visible;
    background:transparent;
    color:var(--pb-banner-text,#fff);
    isolation:isolate;
}

/* Full-bleed background only. The banner's text remains aligned with the
   normal page content, while the color/image reaches both viewport edges. */
.pb-banner:before{
    content:'';
    position:absolute;
    z-index:-2;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    width:100dvw;
    transform:translateX(-50%);
    background-color:var(--pb-banner-bg,var(--pb-accent));
    background-image:var(--pb-banner-image,none);
    background-position:var(--pb-banner-position,center center);
    background-repeat:no-repeat;
    background-size:var(--pb-banner-size,cover);
    pointer-events:none;
}

.pb-banner.has-background-image:after{
    content:'';
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    width:100dvw;
    transform:translateX(-50%);
    background:var(--pb-banner-overlay,#000);
    opacity:var(--pb-banner-overlay-opacity,.2);
    pointer-events:none;
}

.pb-banner-inner{
    position:relative;
    z-index:1;
    width:100%;
}

.pb-banner.pb-align-center .pb-banner-inner{text-align:center}
.pb-banner.pb-align-right .pb-banner-inner{text-align:right}
.pb-banner.pb-align-left .pb-banner-inner{text-align:left}

.pb-banner-kicker{
    margin:0 0 4px;
    color:var(--pb-banner-text,#fff);
    opacity:.78;
    font-size:.72rem;
    font-weight:600;
    line-height:1.3;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.pb-banner h1{
    margin:0!important;
    padding:0!important;
    color:var(--pb-banner-text,#fff)!important;
    font-family:inherit;
    font-size:clamp(1.65rem,3vw,2.25rem);
    font-weight:inherit;
    line-height:1.08;
}

.pb-wrap h2,
.pb-wrap h3,
.pb-wrap h4,
.pb-latest-card strong{
    font-family:inherit;
    color:inherit;
}

.pb-current{
    min-width:0;
    margin:0;
}

.pb-kicker{
    margin:0 0 9px;
    color:var(--pb-muted);
    font-size:.76rem;
    font-weight:600;
    line-height:1.4;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.pb-current h2{
    margin:0 0 10px;
    padding:0;
    font-size:clamp(1.75rem,3vw,2.5rem);
    line-height:1.15;
    font-weight:inherit;
}

.pb-current>p{
    max-width:720px;
    margin:0 0 22px;
    color:var(--pb-muted);
    font-size:inherit;
    line-height:1.7;
}

.pb-actions,
.pb-latest-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.pb-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:11px 20px;
    border:1px solid var(--pb-accent);
    border-radius:0;
    background:transparent;
    color:var(--pb-accent)!important;
    font-family:inherit;
    font-size:.92rem;
    font-weight:600;
    line-height:1.2;
    text-decoration:none!important;
    transition:opacity .18s ease,background-color .18s ease,color .18s ease;
}

.pb-button:hover,
.pb-button:focus{
    opacity:.82;
    text-decoration:none!important;
}

.pb-button-primary{
    background:var(--pb-accent);
    color:#fff!important;
}

.pb-first-page-preview{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:30px 0 0;
    padding:0;
    overflow:hidden;
}

.pb-first-page-preview a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:100%;
    text-decoration:none!important;
}

.pb-first-page-preview img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:min(82vh,1050px);
    margin:0 auto;
    object-fit:contain;
    border:1px solid var(--pb-border);
    background:#fff;
    box-shadow:0 2px 14px rgba(0,0,0,.08);
}

.pb-preview-unavailable{
    margin:30px 0 0;
    padding:20px 0;
    border-top:1px solid var(--pb-border);
    border-bottom:1px solid var(--pb-border);
    color:var(--pb-muted);
}

.pb-preview-unavailable p{
    margin:0;
}

/* Archive intentionally resembles St. Mark's existing post/category lists:
   open layout, simple separators, headings and dates, no floating card. */
.pb-archive{
    position:sticky;
    top:28px;
    min-width:0;
    max-height:calc(100vh - 56px);
    margin:0;
    padding:0 0 8px;
    overflow:auto;
    border:0;
    border-top:1px solid var(--pb-border);
    border-radius:0;
}

.pb-archive-head{
    margin:0;
    padding:34px 0 18px;
    border:0;
    background:transparent;
}

.pb-archive-head h3{
    margin:0;
    padding:0;
    font-size:clamp(1.5rem,2.5vw,2rem);
    line-height:1.2;
    font-weight:inherit;
}

.pb-year{
    margin:0;
    border:0;
    border-top:1px solid var(--pb-border);
}

.pb-year:last-child{
    border-bottom:1px solid var(--pb-border);
}

.pb-year summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px 0;
    cursor:pointer;
    list-style:none;
    color:inherit;
    font-family:inherit;
    font-size:1.06rem;
    font-weight:600;
    line-height:1.35;
}

.pb-year summary::-webkit-details-marker{
    display:none;
}

.pb-year summary:after{
    content:'+';
    margin-left:auto;
    color:var(--pb-muted);
    font-size:1.2rem;
    font-weight:400;
}

.pb-year[open] summary:after{
    content:'−';
}

.pb-year summary span{
    order:2;
    margin-left:4px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:var(--pb-muted);
    font-size:.78rem;
    font-weight:400;
}

.pb-year-list{
    margin:0;
    padding:0 0 10px;
    border:0;
}

.pb-year-list a{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:18px;
    padding:12px 0;
    border:0;
    color:inherit!important;
    font-family:inherit;
    font-size:1rem;
    line-height:1.45;
    text-decoration:none!important;
}

.pb-year-list a:hover,
.pb-year-list a:focus{
    color:var(--pb-accent)!important;
    text-decoration:underline!important;
    text-underline-offset:3px;
}

.pb-year-list a.is-current{
    font-weight:600;
}

.pb-year-list small{
    flex:0 0 auto;
    color:var(--pb-muted);
    font-size:.67rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.pb-latest-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin:0;
    padding:22px 0;
    border:0;
    border-top:1px solid var(--pb-border);
    border-bottom:1px solid var(--pb-border);
    border-radius:0;
    background:transparent;
}

.pb-latest-card strong{
    display:block;
    margin:2px 0 0;
    font-size:1.15rem;
    line-height:1.35;
}

.pb-text-link{
    color:var(--pb-accent)!important;
    font-family:inherit;
    font-weight:600;
    text-decoration:none!important;
}

.pb-text-link:hover,
.pb-text-link:focus{
    text-decoration:underline!important;
    text-underline-offset:3px;
}

.pb-empty{
    margin:0;
    padding:26px 0;
    border:0;
    border-top:1px solid var(--pb-border);
    border-bottom:1px solid var(--pb-border);
    border-radius:0;
    background:transparent;
    color:var(--pb-muted);
    font-family:inherit;
    text-align:left;
}

@media(max-width:900px){
    .pb-wrap{display:block}
    .pb-banner{height:var(--pb-banner-mobile-height,76px);min-height:54px;margin-bottom:28px;padding:15px 0}
    .pb-first-page-preview{margin-top:24px}
    .pb-first-page-preview img{max-height:78vh}
    .pb-archive{position:static;max-height:none;margin-top:42px;overflow:visible}
    .pb-latest-card{align-items:flex-start;flex-direction:column;gap:16px}
}

@media(max-width:520px){
    .pb-wrap{padding-top:0}
    .pb-banner{height:var(--pb-banner-mobile-height,76px);min-height:54px;margin-bottom:22px;padding:13px 0}
    .pb-banner h1{font-size:1.6rem}
    .pb-banner-kicker{font-size:.66rem}
    .pb-current h2{font-size:1.75rem}
    .pb-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
    .pb-button{width:100%;min-height:43px;padding:10px 12px;font-size:.85rem}
    .pb-first-page-preview img{width:100%;max-height:74vh}
    .pb-archive-head{padding-top:28px}
    .pb-year summary{padding:16px 0}
    .pb-year-list a{padding:11px 0}
    .pb-latest-actions{width:100%}
    .pb-latest-actions .pb-button{width:auto}
}
