/**
 * Main Stylesheet
 * 
 * Additional styles for PEIBWA theme
 * All branding variables are defined in style.css at the theme root
 * 
 * @package PEIBWA
 */

/* ==========================================================================
   Layout
   ========================================================================== */

.site-header {
    top: 0;
    z-index: 1000;
    position: relative;
}

.top-bar {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    text-align: center;
}

.top-bar-right {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}

.top-bar-menu {
    display: flex;
    gap: 2rem;
}

.top-bar a {
    color: var(--color-white) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.top-bar a svg {
    width: 0.8rem;
    height: 0.8rem;
}

.top-bar a.top-bar-join {
    font-weight: 700;
    padding: 0.15rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.top-bar a.top-bar-join:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--color-white);
}

@media (max-width: 640px) {
    .top-bar-right {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem 1.25rem;
		padding: 0 2%;
    }

    .top-bar-menu {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.5rem 1.25rem;
    }
	.top-bar-menu a {
		display: none;
	}
	.top-bar a.top-bar-join {
		display: flex;
	}

}

/* Match the Lake sections' gutter (7% padding + centered max-width content)
   so header content lines up with page content at every viewport width. */
.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: none;
    padding: var(--spacing-xs) max(7%, calc((100% - var(--max-width)) / 2));
    gap: var(--spacing-md);
}

@media (max-width: 980px) {
	.site-header .container {
		padding: var(--spacing-xs) max(2%, calc((100% - var(--max-width)) / 2));
	}
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.site-logo img {
    max-height: 5rem;
    width: auto;
}

.site-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0;
}

.site-description {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin: 0;
}

 article.program {
    padding: var(--spacing-2xl) 0;
}

article.symposium {
    padding-top: var(--spacing-sm);
}

.home article {
    padding: 0;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.primary-navigation {
    display: none;
}

.primary-menu-wrapper {
    display: flex;
    gap: 1.7rem;
}

.primary-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--spacing-md);
    align-items: center;
}

.primary-menu a {
    color: var(--color-gray-700);
    font-weight: 400;
    padding: var(--spacing-xs) var(--spacing-xs);
    transition: color var(--transition-speed);
    text-transform: uppercase;
    font-size: 0.875rem;
}

.primary-menu a:hover,
.primary-menu .current-menu-item a {
    color: var(--color-primary);
}

/* Parent items get a caret indicator */
.primary-menu .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.primary-menu .menu-item-has-children > a::after {
    content: '';
    width: 0.42em;
    height: 0.42em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.12em);
    transition: transform var(--transition-speed);
    flex: 0 0 auto;
}

/* Sub-menu reset shared by mobile + desktop */
.primary-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.primary-menu .sub-menu a {
    text-transform: none;
}

/* Anchor the mobile slide-down panel to the main header row */
.site-header > .container {
    position: relative;
}

/* Mobile: slide-down nav panel when toggled open */
.primary-navigation.is-open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #F7F3EF;
    border-top: 1px solid var(--color-gray-100);
    box-shadow: 0 12px 28px rgba(9, 58, 128, 0.12);
    padding: var(--spacing-xs) 0;
    z-index: 1001;
}

.primary-navigation.is-open .primary-menu {
    flex-direction: column;
    align-items: stretch; /* base rule centers items, which mis-indents narrow ones */
    gap: 0;
    padding: 0 var(--spacing-md);
}

/* Parent items: caret sits at the right edge of the row */
.primary-navigation.is-open .primary-menu .menu-item-has-children > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.primary-navigation.is-open .primary-menu > li {
    border-bottom: 1px solid var(--color-gray-100);
}

.primary-navigation.is-open .primary-menu > li:last-child {
    border-bottom: 0;
}

.primary-navigation.is-open .primary-menu a {
    display: block;
    padding: var(--spacing-xs) 0;
}

.primary-navigation.is-open .sub-menu {
    padding-left: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.primary-navigation.is-open .sub-menu a {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

.mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
}

.menu-icon {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-gray-900);
    position: relative;
}

.menu-icon::before,
.menu-icon::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 2px;
    background-color: var(--color-gray-900);
    left: 0;
}

.menu-icon::before {
    top: -8px;
}

.menu-icon::after {
    bottom: -8px;
}

/* Inline nav only when there's room for logo + all items + Login;
   below this the branding gets crushed to zero width. */
@media (min-width: 1025px) {
    .mobile-menu-toggle {
        display: none;
    }

    .primary-navigation {
        display: block;
    }

    .primary-menu > .menu-item {
        position: relative;
    }

    .primary-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 230px;
        padding: var(--spacing-xs) 0;
        background: var(--color-white);
        border: 1px solid var(--color-gray-100);
        border-radius: var(--border-radius);
        box-shadow: 0 12px 28px rgba(9, 58, 128, 0.12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
        z-index: 1001;
    }

    .primary-menu .menu-item-has-children:hover > .sub-menu,
    .primary-menu .menu-item-has-children:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .primary-menu .sub-menu a {
        display: block;
        padding: var(--spacing-xs) var(--spacing-md);
        font-size: var(--font-size-sm);
        color: var(--color-gray-700);
        white-space: nowrap;
    }

    .primary-menu .sub-menu a:hover,
    .primary-menu .sub-menu .current-menu-item > a {
        background: var(--color-secondary-lighter);
        color: var(--color-primary);
    }

    /* Nested sub-menus fly out to the side */
    .primary-menu .sub-menu .sub-menu {
        top: -1px;
        left: 100%;
    }

    /* Flip the caret when the dropdown is open */
    .primary-menu .menu-item-has-children:hover > a::after,
    .primary-menu .menu-item-has-children:focus-within > a::after {
        transform: rotate(-135deg) translateY(0px) translateX(-3px);
    }
}

/* ==========================================================================
   Header Actions (Login/Join/Profile)
   ========================================================================== */

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* margin-left: auto; */
}

.header-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    border-radius: var(--border-radius);
    transition: all var(--transition-speed);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.header-actions .btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.header-actions .btn-outline {
    background: transparent;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-700);
}

.header-actions .btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.05);
}

.header-actions .btn-primary {
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-white);
}

.header-actions .btn-primary:hover {
    background: var(--color-primary-dark, #2563eb);
    border-color: var(--color-primary-dark, #2563eb);
}

/* Profile Menu Dropdown */
.header-profile-menu {
    position: relative;
}

.profile-menu-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    cursor: pointer;
    transition: all var(--transition-speed);
}

.profile-menu-toggle:hover {
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
}

.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-avatar .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--color-gray-400);
}

.profile-name {
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-700);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-arrow {
    color: var(--color-gray-500);
    transition: transform var(--transition-speed);
}

.profile-menu-toggle[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 260px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001;
}

.profile-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-100);
}

.dropdown-user-name {
    display: block;
    font-weight: 600;
    color: var(--color-gray-900);
    font-size: var(--font-size-base);
}

.dropdown-business-name {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    margin-top: 2px;
}

.dropdown-menu {
    list-style: none;
    margin: 0;
    padding: var(--spacing-xs) 0;
}

.dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    color: var(--color-gray-700);
    text-decoration: none;
    transition: background var(--transition-speed);
    font-size: var(--font-size-sm);
}

.dropdown-menu li a:hover {
    background: var(--color-gray-50);
    color: var(--color-primary);
}

.dropdown-menu li a svg,
.dropdown-menu li a .dashicons {
    flex-shrink: 0;
    color: var(--color-gray-400);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

.dropdown-menu li a:hover svg,
.dropdown-menu li a:hover .dashicons {
    color: var(--color-primary);
}

.dropdown-badge {
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: auto;
}

.dropdown-divider {
    height: 1px;
    background: var(--color-gray-100);
    margin: var(--spacing-xs) 0;
}

.dropdown-menu .logout-link {
    color: var(--color-gray-500);
}

.dropdown-menu .logout-link:hover {
    color: #dc2626;
    background: #fef2f2;
}

.dropdown-menu .logout-link:hover svg,
.dropdown-menu .logout-link:hover .dashicons {
    color: #dc2626;
}

/* ==========================================================================
   Notification Bell
   ========================================================================== */

.header-notification-bell {
    position: relative;
}

.notification-bell-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: 1px solid var(--color-gray-200);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all var(--transition-speed);
    color: var(--color-gray-600);
}

.notification-bell-toggle:hover {
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
    color: var(--color-gray-800);
}

.notification-bell-toggle.has-unread {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.bell-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-secondary);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    line-height: 14px;
    text-align: center;
    border-radius: 999px;
    padding: 0 4px;
    border: 2px solid var(--color-white);
    animation: notificationPop 0.3s ease;
}

@keyframes notificationPop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Notification Dropdown */
.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: -60px;
    width: 380px;
    max-height: 500px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
}

.notification-dropdown[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-gray-100);
    flex-shrink: 0;
}

.notification-dropdown-header h4 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-gray-900);
}

.notification-mark-all-read {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs, 12px);
    color: var(--color-primary);
    padding: 4px 8px;
    border-radius: var(--border-radius);
    transition: background var(--transition-speed);
}

.notification-mark-all-read:hover {
    background: var(--color-gray-50);
}

.notification-mark-all-read svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Notification List */
.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: 380px;
}

.notification-list::-webkit-scrollbar {
    width: 4px;
}

.notification-list::-webkit-scrollbar-track {
    background: transparent;
}

.notification-list::-webkit-scrollbar-thumb {
    background: var(--color-gray-200);
    border-radius: 4px;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-50);
    transition: background var(--transition-speed);
    position: relative;
}

.notification-item:hover {
    background: var(--color-gray-50);
    text-decoration: none;
    color: var(--color-gray-800);
}

.notification-item.is-unread {
    background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.04);
    border-left: 3px solid var(--color-primary);
}

.notification-item.is-unread .notification-item-title {
    font-weight: 600;
}

.notification-item-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.notification-item-icon .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--color-gray-500);
}

.notification-item-content {
    flex: 1;
    min-width: 0;
}

.notification-item-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-gray-800);
    line-height: 1.3;
    margin-bottom: 2px;
}

.notification-item-message {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-gray-500);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item-time {
    font-size: 11px;
    color: var(--color-gray-400);
    margin-top: 4px;
}

.notification-dismiss {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-gray-300);
    font-size: 16px;
    line-height: 1;
    border-radius: 50%;
    opacity: 0;
    transition: all var(--transition-speed);
}

.notification-item:hover .notification-dismiss {
    opacity: 1;
}

.notification-dismiss:hover {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}

/* Empty & Loading States */
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl, 40px) var(--spacing-md);
    color: var(--color-gray-400);
    text-align: center;
}

.notification-empty svg {
    margin-bottom: var(--spacing-sm);
    opacity: 0.4;
}

.notification-empty p {
    margin: 0;
    font-size: var(--font-size-sm);
}

.notification-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg) var(--spacing-md);
}

.notification-loading .spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Dropdown Footer */
.notification-dropdown-footer {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--color-gray-100);
    text-align: center;
    flex-shrink: 0;
}

.notification-dropdown-footer a {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.notification-dropdown-footer a:hover {
    text-decoration: underline;
}

/* Mobile / tablet adjustments (hamburger nav active below 1025px) */
@media (max-width: 1024px) {
    /* Keep the actions (Sign Out / Login / avatar) in normal flow next to the
       hamburger instead of absolutely positioned on top of it. */
    .primary-menu-wrapper {
        order: 2;
        margin-left: auto;
    }

    .mobile-menu-toggle {
        order: 3;
    }

    .notification-bell-toggle {
        width: 36px;
        height: 36px;
    }

    .notification-dropdown {
        position: fixed;
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: 80vh;
        border-radius: var(--border-radius-lg, 12px) var(--border-radius-lg, 12px) 0 0;
    }
    
    .profile-name {
        display: none;
    }
    
    .profile-menu-toggle {
        padding: 4px;
    }
    
    .dropdown-arrow {
        display: none;
    }
    
    .profile-dropdown {
        width: 240px;
        right: -40px;
    }
}

/* ==========================================================================
   Content
   ========================================================================== */

.entry-header {
    margin-bottom: var(--spacing-lg);
}

.entry-title {
    font-size: var(--font-size-4xl);
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--color-gray-900);
}

.entry-content {
    line-height: 1.8;
}

.entry-content > * + * {
    margin-top: var(--spacing-md);
}

.entry-content p strong {
    font-weight: 700;
}

.entry-featured-image {
    margin-bottom: var(--spacing-lg);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.wp-block-image img {
    border-radius: 20px;
}

.wp-block-list  {
    padding-left: 2rem;
}
.wp-block-list li {
    padding-left: 0.5rem;
    padding-bottom: 0.5rem;
}
.wp-block-list li:last-child {
    padding-bottom: 0;
}
/* Arrow / check list markers. Drawn with list-style-image rather than
   `::marker { content: url() }`, which Safari ignores (it falls back to a disc).
   The Lake arrow-list, text-panel and callout blocks get the same arrow here;
   their own ::marker rules only apply in Chromium/Firefox and draw the same SVG. */
:root {
    --peibwa-marker-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='18' viewBox='0 0 32 18' fill='none'%3E%3Cg clip-path='url(%23clip0_12577_24150)'%3E%3Cmask id='mask0_12577_24150' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='-1' y='0' width='29' height='16'%3E%3Cpath d='M27.6552 0H-0.078125V15.6H27.6552V0Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_12577_24150)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.9529 9.20515H0V8.23015H24.9529L21.5865 4.8374L22.2705 4.14795L26.8048 8.71771L22.2705 13.2874L21.5865 12.598L24.9529 9.20515Z' fill='%236A5AA7'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12577_24150'%3E%3Crect width='32' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    --peibwa-marker-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.6654 5L7.4987 14.1667L3.33203 10' stroke='%230F56A5' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
ul.wp-block-list > li,
.lake-root .b-arrow-list .al-body ul > li,
.lake-root .b-text-panel .panel-body ul > li,
.lake-root .b-text-panel .txt .s-body ul > li,
.lake-root .b-peibwa-callout .txt .s-body ul > li,
.lake-root .b-peibwa-callout .card-body ul > li {
    list-style-image: var(--peibwa-marker-arrow);
}
ol.wp-block-list > li {
    list-style-image: var(--peibwa-marker-check);
}

.wp-block-table thead {
    border: 0;
}

.wp-block-table thead th {
    background: var(--color-secondary);
    color: white;
    border: 0;
    text-align: left;
    padding-left: 1.5rem;
}

.wp-block-table tbody td {
    padding-left: 1.5rem;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, 0.35);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(even) {
    background-color: #fff;
}

.text-button {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-speed);
    text-transform: uppercase;
    margin-top: 3rem;
    color: var(--color-lavender);
}


/* Accordion / Details Block */

/* --- Details block (native <details>) --- */
.wp-block-details {
    background-color: var(--color-off-white) !important;
    border: none !important;
    border-left: 4px solid var(--color-accent) !important;
    border-radius: var(--radius-md) !important;
    padding: 0 !important;
    margin-bottom: 12px;
    box-shadow: none !important;
}

.wp-block-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    font-family: var(--font-family);
    font-size: var(--font-size-h5);
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: transparent !important;
}

.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::marker { display: none; content: ''; }

.wp-block-details summary::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-left: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230357D5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
}

.wp-block-details[open] > summary::after {
    transform: rotate(180deg);
}

.wp-block-details > *:not(summary) {
    padding: 0 24px 20px;
    color: var(--color-text-muted);
    font-size: var(--font-size-body);
    line-height: var(--line-height-relaxed);
}

.wp-block-details > *:not(summary) ul {
    padding-left: 1.5rem;
    list-style: disc;
    list-style-position: outside;
}

.wp-block-details > *:not(summary) ul li {
    margin-bottom: 4px;
}

/* --- Accordion block (JS-powered <button> structure) --- */
.wp-block-accordion-item {
    border-top: 1px solid rgba(6, 31, 64, 0.30);
    padding-top: 1rem;
}
.wp-block-accordion-item:first-child {
    border-top: none;
    padding-top: 0;
}

/* Strip default h3 margins inside accordion */
.wp-block-accordion-heading {
    margin: 0 !important;
    padding: 0 !important;
}

.wp-block-accordion-heading__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    text-align: left;
}

/* Hide the built-in +/- icon */
.wp-block-accordion-heading__toggle-icon {
    display: none !important;
}

/* Custom chevron via ::after on the button */
.wp-block-accordion-heading__toggle::after {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    min-width: 22px;
    margin-left: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230357D5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.2s ease;
    filter: brightness(0.5);
}

/* Rotate chevron when expanded */
.wp-block-accordion-heading__toggle[aria-expanded="true"]::after,
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle::after {
    transform: rotate(180deg);
    filter: brightness(1);
}

.wp-block-accordion-heading__toggle:hover::after {
    filter: brightness(1);
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle[aria-expanded="true"] .wp-block-accordion-heading__toggle-title {
    text-decoration: none;
}

/* Content panel */
.wp-block-accordion-panel {margin-top: 1rem;}

.wp-block-accordion-panel ul, .wp-block-accordion-panel ol {
    padding-left: 1.5rem;
    list-style: revert;
    list-style-position: outside;
}

.wp-block-accordion-panel ul li, .wp-block-accordion-panel ol li {
    margin-bottom: 4px;
}

.wp-block-accordion-panel ul ul, .wp-block-accordion-panel ul ol,
.wp-block-accordion-panel ol ul, .wp-block-accordion-panel ol ol {
    margin-top: 4px;
    margin-bottom: 0;
    list-style: circle;
}

.wp-block-accordion-panel p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Post Grid
   ========================================================================== */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.post-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-card .post-thumbnail img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.post-card .post-content {
    padding: var(--spacing-md);
}

.post-card .entry-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
}

.post-card .entry-title a {
    color: var(--color-gray-900);
    text-decoration: none;
}

.post-card .entry-title a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Post Meta
   ========================================================================== */

.post-meta {
    display: flex;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-sm);
}

.post-meta a {
    color: var(--color-gray-600);
}

.post-meta a:hover {
    color: var(--color-primary);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination-wrapper {
    margin: var(--spacing-xl) 0;
}

/* the_posts_pagination() markup: nav.pagination > .nav-links > ul.page-numbers.
   Styled to match the [peibwa_news] pagination. */
.pagination ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination ul.page-numbers li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination a.page-numbers,
.pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--color-secondary-light, #cabfe4);
    background: #fff;
    color: var(--color-secondary, #6f5eae);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-speed, 0.3s) ease, color var(--transition-speed, 0.3s) ease;
}

.pagination a.page-numbers:hover {
    background: var(--color-secondary-light, #cabfe4);
    color: var(--color-secondary-dark, #34285f);
}

.pagination .page-numbers.current {
    background: var(--color-secondary, #6f5eae);
    border-color: var(--color-secondary, #6f5eae);
    color: #fff;
}

.pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.breadcrumbs {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    background: var(--color-gray-300);
    padding: var(--spacing-xs) 0;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin-left: var(--spacing-xs);
    color: var(--color-gray-400);
}

.breadcrumb-item a {
    color: var(--color-gray-600);
}

.breadcrumb-item a:hover {
    color: var(--color-primary);
}

@media (max-width: 768px) {
	.breadcrumb-current, .breadcrumb-link { font-size: 0.6rem !important; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    background-color: var(--wp--preset--color--primary);
    color: var(--color-gray-300);
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    margin-top: 0;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    display: none; /* Disable footer widgets for now */
}

.footer-widget-area h2 {
    color: var(--color-white);
    font-size: 0.85rem !important;
    margin-bottom: var(--spacing-sm);
}

.footer-widget-area a {
    color: var(--color-gray-300);
}

.footer-widget-area a:hover {
    color: var(--color-white);
}

.footer-navigation {
    margin: var(--spacing-xl) 0;
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu a {
    color: var(--color-gray-300);
}

.footer-menu a:hover {
    color: var(--color-white);
}

.site-info {
    padding-top: 0;
    text-align: center;
    font-size: var(--font-size-sm);
}

.site-info a {
    color: var(--color-primary-light);
}

.site-footer__menu-heading {
    font-size: 0.85rem !important;
}
	
/* ==========================================================================
   Social Links
   ========================================================================== */

.social-links,
.footer-social-links {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1.25rem;
}

.social-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.social-link:hover {
    filter: brightness(0.8);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.button,
.read-more {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background-color: var(--color-primary);
    /* color: var(--color-white) !important; */
    border: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--transition-speed);
    cursor: pointer;
}

.wp-block-button__link:hover,
.button:hover,
.read-more:hover {
    background-color: var(--color-primary-dark);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

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

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mb-lg { margin-bottom: var(--spacing-lg); }

/* ==========================================================================
   Universal Breadcrumb
   ========================================================================== */

.peibwa-breadcrumb {
    background-color: #DCD5CC;
    padding: 0.75rem 0;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.breadcrumb-home {
    color: rgba(0, 0, 0, 0.70);
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
    margin-top: -2px;
}

.breadcrumb-home:hover {
    color: #000;
}

.breadcrumb-separator {
    color: rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

.breadcrumb-link {
    color: rgba(0, 0, 0, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: #000;
}

.breadcrumb-current {
    color: #000;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   Full-width block breakout
   Allows .alignfull blocks to escape the .container max-width constraint
   ========================================================================== */

.entry-content .alignfull,
.entry-content > .wp-block-cover.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

/* ==========================================================================
   Hero Block Pattern
   ========================================================================== */

/* Override the cover's flex alignment so the inner container can be centered
   with a max-width matching the site .container */
.peibwa-hero.wp-block-cover.is-position-center-left {
    align-items: stretch;
}

/* Constrain the inner content to the site container width and center it.
   Uses !important to override WP core's high-specificity rule on
   .wp-block-cover.has-custom-content-position ... { margin: 0; width: auto; } */
.peibwa-hero.wp-block-cover > .wp-block-cover__inner-container {
    width: 100% !important;
    max-width: var(--max-width, 1280px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--spacing-md, 2rem);
    padding-right: var(--spacing-md, 2rem);
    padding-top: 80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

/* Override WP's is-layout-constrained children rule which forces
   max-width: var(--wp--style--global--content-size) and auto margins.
   We want children to span the inner container and align left. */
.peibwa-hero.wp-block-cover > .wp-block-cover__inner-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 720px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Scale inner padding down on smaller screens */
@media (max-width: 768px) {
    .peibwa-hero.wp-block-cover > .wp-block-cover__inner-container {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* Ensure the Join Us button hover darkens the secondary color */
.peibwa-hero .wp-block-button__link.has-secondary-background-color:hover {
    background-color: var(--color-secondary-dark, #34285f) !important;
    border-color: var(--color-secondary-dark, #34285f) !important;
}

/* ==========================================================================
   Program Cards Pattern (peibwa/program-cards-2col)
   ========================================================================== */

.peibwa-program-cards.wp-block-columns {
    gap: 2rem;
}

.peibwa-program-card {
    display: flex;
    flex-direction: column;
}

.peibwa-program-card .peibwa-program-card__image {
    position: relative;
    margin: 0 0 10px 0; /* small overlap so card body tucks under image */
    border-radius: 12px;
    overflow: visible;
}

.peibwa-program-card .peibwa-program-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    aspect-ratio: 16 / 10;
}

/* Arrow-circle button overlay on top-right of card image */
.peibwa-program-card .peibwa-program-card__image::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #9DC0F4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='15' viewBox='0 0 17 15' fill='none'%3E%3Cg clip-path='url(%23clip0_12494_3707)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4048 0.14906C10.6502 -0.0705909 11.0193 -0.0422489 11.2308 0.215191L16.8577 7.10466C17.0468 7.33612 17.0468 7.67386 16.8577 7.90532L11.2511 14.7688C11.044 15.0215 10.6794 15.0853 10.4273 14.8822C10.1595 14.6649 10.1235 14.261 10.3395 13.9941L15.1359 8.12024H0.305652C-0.284047 7.57939 0.0738241 6.88973 0.584747 6.88973H15.1382L10.3418 1.01585C10.1302 0.758412 10.1595 0.371072 10.4048 0.14906Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12494_3707'%3E%3Crect width='17' height='15' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}
.peibwa-program-cards.no-link .peibwa-program-card__image::after {
    display: none;
}

.peibwa-program-card .peibwa-program-card__body {
    background-color: #E6E1F2; /* light lavender */
    border-radius: 0 0 12px 12px;
    position: relative;
}

.peibwa-program-card .peibwa-program-card__body h3,
.peibwa-program-card .peibwa-program-card__body .wp-block-heading {
    margin: 0 0 1rem 0;
    color: var(--color-secondary, #6F5EAE);
}

.peibwa-program-card .peibwa-program-card__body p {
    color: var(--color-gray-800, #1f2937);
    line-height: 1.55;
}

.peibwa-program-card__cta a {
    color: var(--color-secondary, #6F5EAE) !important;
    text-decoration: none;
}

.peibwa-program-card__cta a:hover {
    color: var(--color-secondary-dark, #34285f) !important;
}

@media (max-width: 781px) {
    .peibwa-program-cards.wp-block-columns {
        gap: 1.5rem;
    }
}

/* ==========================================================================
   Reusable Arrow Utility — drop class on any element to render the PEIBWA arrow
   ========================================================================== */

/*
   Usage:
     <a class="peibwa-arrow-link" href="...">Learn More</a>      → arrow appended after text
     <span class="peibwa-arrow" aria-hidden="true"></span>       → standalone inline arrow
   The arrow inherits the current text color via CSS mask, so it adapts to any link color.
*/

.peibwa-arrow,
.peibwa-arrow-link::after {
    content: "";
    display: inline-block;
    width: 1.8em;
    height: 1em;
    vertical-align: -0.1em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.9529 9.20515H0V8.23015H24.9529L21.5865 4.8374L22.2705 4.14795L26.8048 8.71771L22.2705 13.2874L21.5865 12.598L24.9529 9.20515Z' fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 18'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24.9529 9.20515H0V8.23015H24.9529L21.5865 4.8374L22.2705 4.14795L26.8048 8.71771L22.2705 13.2874L21.5865 12.598L24.9529 9.20515Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: transform 0.2s ease;
}

.peibwa-arrow-link::after {
    margin-left: 0.6em;
}

.peibwa-arrow-link:hover::after {
    transform: translateX(3px);
}

/* ==========================================================================
   Info Card Pattern (peibwa/info-card)
   White card with colored icon tile, title, body and optional outline button.
   Built from core blocks — editors can freely add/remove inner blocks.
   Insert multiple side-by-side via a Columns block.
   ========================================================================== */

.peibwa-info-card.wp-block-group {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(39, 47, 56, 0.06);
    height: 100%; /* match height of siblings when placed in a Columns block */
}

/* Icon tile — constrain to 56px square and pin to the left of the card */
.peibwa-info-card .peibwa-info-card__icon.wp-block-group {
    width: 56px !important;
    max-width: 56px !important;
    min-width: 56px;
    height: 56px;
    border-radius: 12px;
    padding: 12px;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 1.25rem;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

.peibwa-info-card__icon .wp-block-image,
.peibwa-info-card__icon figure {
    margin: 0;
    line-height: 0;
}

.peibwa-info-card__icon img {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Title + body */
.peibwa-info-card__title {
    color: var(--color-charcoal, #272F38);
    line-height: 1.25;
    font-size: 1.75rem;
    margin: 0 0 0.75rem;
}

.peibwa-info-card__body {
    color: var(--color-gray-700, #374151);
    line-height: 1.6;
    margin: 1rem 0;
}

/* Corporate Logos */
.corporate-logos img {
    background: white;
    object-fit: contain;
    padding: 1rem 2rem;
    height: 150px !important;
    width: auto !important;
    aspect-ratio: auto !important;
}

/* Buttons row inside the card */
.peibwa-info-card .peibwa-info-card__buttons {
    margin-top: auto;
}

.peibwa-info-card .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border-width: 1.5px;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Outline button hover — fill with the matched scheme color, text turns white */
.peibwa-info-card .wp-block-button .wp-block-button__link.has-secondary-color:hover {
    background-color: #6F5EAE;
    border-color: #6F5EAE;
    color: #fff !important;
}
.peibwa-info-card .wp-block-button .wp-block-button__link.has-primary-color:hover {
    background-color: #093A80;
    border-color: #093A80;
    color: #fff !important;
}
.peibwa-info-card .wp-block-button .wp-block-button__link.has-accent-color:hover {
    background-color: #115D6A;
    border-color: #115D6A;
    color: #fff !important;
}
.peibwa-info-card .wp-block-button .wp-block-button__link.has-primary-light-color:hover {
    background-color: #9bbef2;
    border-color: #9bbef2;
    color: #fff !important;
}


/* ==========================================================================
   "You Belong Here" Collage Shortcode (peibwa_belong_collage)
   Image grid background + two diagonal marquee banners that scroll in opposite
   directions, driven by user scroll velocity (JS in main.js).
   ========================================================================== */

.peibwa-belong-collage {
    position: relative;
    overflow: hidden;
    background-color: #093A80; /* fallback if has-*-background-color is missing */
    isolation: isolate;
}

/* Photo collage — Figma homepage geometry (1440px frame): tall | stacked
   pair | large | stacked pair | tall, 1694px wide so the outer photos run
   off both edges. --u is one Figma pixel, scaled to the viewport and
   capped so very wide screens don't blow the photos up. */
.peibwa-belong-collage {
    --u: min(calc(100vw / 1440), 1.15px);
    /* Mockup: ~100px from the cards above, ~106px to the footer logo. The
       sections either side already pad 72px / 80px, so add the difference. */
    padding-block: calc(28 * var(--u)) calc(26 * var(--u));
}

.peibwa-belong-collage__grid {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(20 * var(--u));
    width: calc(1694 * var(--u));
    left: 50%;
    transform: translateX(-50%);
}

.peibwa-belong-collage__col {
    display: flex;
    flex-direction: column;
    gap: calc(16 * var(--u));
    flex: none;
}

.peibwa-belong-collage__cell {
    overflow: hidden;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.04);
}

.peibwa-belong-collage__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Edge photos 288×432, pairs 260×260 / 260×346, centre 518×724 */
.peibwa-belong-collage__cell--1,
.peibwa-belong-collage__cell--7 { width: calc(288 * var(--u)); height: calc(432 * var(--u)); }
.peibwa-belong-collage__cell--2,
.peibwa-belong-collage__cell--6 { width: calc(260 * var(--u)); height: calc(260 * var(--u)); }
.peibwa-belong-collage__cell--3,
.peibwa-belong-collage__cell--5 { width: calc(260 * var(--u)); height: calc(346 * var(--u)); }
.peibwa-belong-collage__cell--4 { width: calc(518 * var(--u)); height: calc(724 * var(--u)); }

/* Diagonal marquee banners (overlay) */
.peibwa-belong-banner {
    position: absolute;
    left: -10%;
    right: -10%;
    z-index: 2;
    /* ~35px above and below the text on desktop, as in the mockup */
    padding: clamp(0.875rem, 2.4vw, 2.25rem) 0;
    overflow: hidden;
    pointer-events: none;
    /* Soft shadow to lift the banner off the photos */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Both banners are centred on the section, so their crossing point sits in
   the middle of the collage (they rotate about their own centres). */
.peibwa-belong-banner--top {
    top: 50%;
    transform: translateY(-50%) rotate(-6deg);
}

.peibwa-belong-banner--bottom {
    top: 50%;
    transform: translateY(-50%) rotate(6deg);
}

.peibwa-belong-banner__track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
    /* JS sets translate3d each frame */
}

.peibwa-belong-banner__item {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-secondary, Georgia, serif);
    font-size: clamp(1.5rem, 3.5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 0 1.25rem;
}

.peibwa-belong-banner__sep {
    display: inline-block;
    width: clamp(40px, 6vw, 90px);
    height: 2px;
    margin-left: 2rem;
    background-color: currentColor;
    opacity: 0.6;
    vertical-align: middle;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .peibwa-belong-banner__track {
        transform: none !important;
    }
}

@media (max-width: 781px) {
    /* Phones: enlarge so the centre and its pairs fill the width; the edge
       photos fall off-screen. */
    .peibwa-belong-collage {
        --u: calc(100vw / 900);
        padding-block: 3rem;
    }
    .peibwa-belong-collage__cell { border-radius: 8px; }
}

/* ==========================================================================
   Blue gradient bands
   Dark Lake sections and the belong collage use the Figma "Blue Gradient".
   Where they sit back to back (and run into the footer, as on the homepage)
   main.js stitches them into one continuous gradient, as in the mockup.
   ========================================================================== */

.lake-root section.s.dark,
section.peibwa-belong-collage {
    background-image: var(--gradient-blue);
    background-repeat: no-repeat;
}

.site-footer.is-gradient-stitched {
    background-image: var(--gradient-blue);
    background-repeat: no-repeat;
}

/* ==========================================================================
   Site Footer
   Dark navy background, 4-column layout (brand + 3 menu columns), social
   icons under the right column, bottom bar with copyright + legal links.
   ========================================================================== */

.site-footer {
    background-color: var(--color-primary, #093A80);
    color: #fff;
    padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}

.site-footer__inner {
    max-width: none;
    margin: 0 auto;
    /* Same gutter formula as the Lake sections / site header. */
    padding: 0 max(7%, calc((100% - var(--max-width)) / 2));
}

/* Top columns grid */
.site-footer__columns {
    display: grid;
    grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1fr));
    gap: clamp(2rem, 4vw, 2rem);
    align-items: start;
}

/* ----- Brand column ----- */
.site-footer__brand {
    min-width: 0;
}

.site-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    text-decoration: none;
    margin-bottom: 1.5rem;
}

.site-footer__logo img,
.site-footer__logo .custom-logo {
    /* Cap by viewport too — the fixed 34rem was wider than small screens and
       forced horizontal scrolling on the whole page. */
    max-width: min(34rem, 90vw);
    height: auto;
    display: block;
    margin: -22px 0 -22px -22px;
}

.site-footer__wordmark {
    font-family: var(--font-primary, inherit);
    font-weight: 700;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.1;
    color: #fff;
}

.site-footer__newsletter-heading {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    color: rgba(255, 255, 255, 0.92);
}

.site-footer__newsletter-form {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
    max-width: 500px;
    margin-bottom: 1rem;
}

.site-footer__newsletter-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.85rem 1rem;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.site-footer__newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.site-footer__newsletter-input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.12);
    border-color: var(--color-primary-light, #9BBEF2);
}

.site-footer__newsletter-button {
    flex: 0 0 auto;
    padding: 0.85rem 1.5rem;
    background-color: var(--color-primary-light, #9BBEF2);
    color: var(--color-primary, #093A80);
    border: none;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.site-footer__newsletter-button:hover,
.site-footer__newsletter-button:focus {
    background-color: #fff;
}

.site-footer__newsletter-button:active {
    transform: translateY(1px);
}

.site-footer__newsletter-consent {
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.65);
    max-width: 500px;
    margin-bottom: 2rem;
}

.site-footer__newsletter-consent p {
    margin: 0;
}

.site-footer__newsletter-consent a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

.site-footer__land-acknowledgment {
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 600px;
}

.site-footer__land-acknowledgment p {
    margin: 0 0 0.75rem;
}

.site-footer__land-acknowledgment p:last-child {
    margin-bottom: 0;
}

/* ----- Menu columns ----- */
.site-footer__menu-col {
    min-width: 0;
}

.site-footer__menu-heading {
    font-family: var(--font-primary, inherit);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 1.5rem;
}

.site-footer__menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.site-footer__menu-list a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s ease;
}

.site-footer__menu-list a:hover,
.site-footer__menu-list a:focus {
    color: #fff;
    text-decoration: underline;
}

/* Social icons (rendered under the last menu column) */
.site-footer__menu-col .social-links {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
}

.site-footer__menu-col .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

.site-footer__menu-col .social-link:hover,
.site-footer__menu-col .social-link:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

.site-footer__menu-col .social-link img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1); /* force white */
}

/* ----- Bottom bar ----- */
.site-footer__bottom {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
}

.site-footer__copyright p {
    margin: 0;
}

.site-footer__legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2rem;
}

.site-footer__legal-list a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
    font-size: 0.85rem;
    transition: color 0.15s ease;
}

.site-footer__legal-list a:hover,
.site-footer__legal-list a:focus {
    color: #fff;
}

.sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

.sponsor-logos img {
    max-height: 27px;
    object-fit: contain;
}

/* ----- Responsive ----- */
@media (max-width: 1024px) {
    .site-footer__columns {
        grid-template-columns: 1fr 1fr;
    }
    .site-footer__brand {
        grid-column: 1 / -1;
        margin-bottom: 1rem;
    }
}

@media (max-width: 600px) {
    .site-footer__columns {
        grid-template-columns: 1fr;
    }
    .site-footer__brand {
        grid-column: auto;
    }
    .site-footer__newsletter-form {
        flex-direction: column;
    }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   Inner Page Header (template-parts/page-header.php)
   Cream/off-white band shown above breadcrumbs on inner pages. Contains the
   page title, optional intro paragraph, and an optional purple CTA card
   anchored to the right. ACF-driven; title falls back to get_the_title().
   ========================================================================== */

.peibwa-page-header {
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    position: relative;
}

.peibwa-page-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
}

.peibwa-page-header--has-cta .peibwa-page-header__inner {
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
}

.peibwa-page-header__content {
    min-width: 0;
}

.peibwa-page-header__title {
    font-size: clamp(2rem, 5vw, 3.75rem);
    line-height: 1.05;
    color: var(--color-charcoal, #272F38);
    margin: 0 0 1.25rem;
    letter-spacing: -0.65px;
    max-width: 62rem;
}

.peibwa-page-header__intro {
    color: var(--color-charcoal, #272F38);
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    line-height: 1.65;
    margin-top: 1rem;
}

/* Explicit zero margins: the frontend gets these from style.css's global
   reset, which doesn't load on the Lake Builder canvas. */
.peibwa-page-header__intro p {
    margin: 0;
}

.peibwa-page-header__intro p {
    margin: 0 0 0.75rem;
}

.peibwa-page-header__intro p:last-child {
    margin-bottom: 0;
}

/* CTA card on the right — purple gradient, white text, click-through */
.peibwa-page-header__cta {
    position: absolute;
    width: 25rem;
    justify-self: flex-end;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 200px;
    padding: clamp(1.5rem, 3vw, 3.5rem);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(126deg, #6F5EAF 17.61%, #2E2749 105.06%);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(111, 94, 174, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    transform: translateY(2px);    
}

@media (max-width: 786px) {
    .peibwa-page-header__cta {
        min-height: 100px !important;
        position: relative;
        width: 100%;
        margin: 0 auto;
        display: block;
		border-radius: 16px !important;
    }
}



/* Closed-state CTA card: same purple card, non-interactive. */
.peibwa-page-header__cta--closed,
.peibwa-page-header__cta--closed:hover,
.peibwa-page-header__cta--closed:focus {
    cursor: default;
    transform: none;
    box-shadow: none;
}

.peibwa-page-header__cta:hover,
.peibwa-page-header__cta:focus {
    transform: translateY(0px);
    box-shadow: 0 12px 32px rgba(111, 94, 174, 0.35);
    color: #fff;
    text-decoration: none;
}

.peibwa-page-header__cta-text {
    font-family: var(--font-primary, inherit);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    display: block;
}

/* Arrow tucked in the corner (uses .peibwa-arrow utility from earlier).
   Hidden by default; appears on hover for a subtle affordance. */
.peibwa-page-header__cta .peibwa-arrow {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 20px;
    height: 20px;
    color: #fff;
    opacity: 0.5;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.peibwa-page-header__cta:hover .peibwa-arrow,
.peibwa-page-header__cta:focus .peibwa-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* Responsive: stack the card under the title on small screens */
@media (max-width: 781px) {
    .peibwa-page-header--has-cta .peibwa-page-header__inner {
        grid-template-columns: 1fr;
    }
    .peibwa-page-header__cta {
        min-height: 160px;
    }
}

/* ==========================================================================
Symposium Hero (single-symposium.php)
Full-bleed featured-image background with a dark overlay and white text,
an icon meta row (date / time / location) and a Register Now button.
========================================================================== */
.peibwa-symposium-hero {
    position: relative;
    background-color: var(--color-primary-dark, #062654);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.peibwa-symposium-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(6, 38, 84, 0.85) 0%,
        rgba(6, 38, 84, 0.65) 140%,
        rgba(39, 47, 56, 0.45) 100%
    );
}

.peibwa-symposium-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-width, 1280px);
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3rem);
    color: #fff;
}

.peibwa-symposium-hero__title {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: #fff;
    margin: 0 0 1.25rem;
}

.peibwa-symposium-hero__intro {
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.peibwa-symposium-hero__intro p {
    margin: 0 0 0.75rem;
}

.peibwa-symposium-hero__intro p:last-child {
    margin-bottom: 0;
}

/* Meta row: date / time / location */
.peibwa-symposium-hero__meta {
    list-style: none;
    margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.5rem, 4vw, 3.5rem);
}

.peibwa-symposium-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.peibwa-symposium-hero__meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary-light, #CABFE4);
    flex-shrink: 0;
}

.peibwa-symposium-hero__meta-body {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.peibwa-symposium-hero__meta-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.peibwa-symposium-hero__meta-value {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    font-weight: 600;
    color: #fff;
}

/* Register button */
.peibwa-symposium-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.peibwa-symposium-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 2.25rem;
    background: var(--color-secondary, #6F5EAE);
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem;
    text-decoration: none;
    border-radius: var(--border-radius, 0.375rem);
    transition: background-color var(--transition-speed, 0.3s) ease, transform var(--transition-speed, 0.3s) ease;
}

.peibwa-symposium-hero__btn:hover,
.peibwa-symposium-hero__btn:focus {
    background: var(--color-secondary-dark, #34285f);
    color: #fff !important;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 640px) {
    .peibwa-symposium-hero__meta {
        flex-direction: column;
        gap: 1rem;
    }
    .peibwa-symposium-hero__btn {
        width: 100%;
    }
}

    /* ==========================================================================
       Press Releases Shortcode ([peibwa_press_releases])
       Grouped by publication year with file links for EN / FR downloads.
       ========================================================================== */

    .peibwa-press-releases {
        display: grid;
        gap: clamp(2rem, 4vw, 3rem);
    }

    .peibwa-press-releases__year-group {
        display: grid;
        gap: 1.5rem;
    }

    .peibwa-press-releases__year {
        margin: 0;
        padding-bottom: 1.75rem;
        border-bottom: 1px solid rgba(39, 47, 56, 0.12);
        color: var(--color-gray-800, #272F38);
        font-size: clamp(2rem, 4vw, 1.3rem);
        line-height: 1;
    }

    .peibwa-press-releases__list {
        display: grid;
        gap: 1.25rem;
    }

    .peibwa-press-release-card {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 1.5rem;
        align-items: start;
        padding: clamp(1.5rem, 3vw, 2.25rem);
        background: #fff;
        border: 1px solid rgba(111, 94, 174, 0.18);
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(39, 47, 56, 0.04);
    }

    .peibwa-press-release-card__icon {
        width: 64px;
        height: 64px;
        border-radius: 12px;
        background: #d7caef;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .peibwa-press-release-card__icon svg {
        width: 30px;
        height: 30px;
    }

    .peibwa-press-release-card__content {
        min-width: 0;
    }

    .peibwa-press-release-card__title {
        margin: 0;
        color: #4b5a73;
        font-size: clamp(1.3rem, 2vw, 1.2rem);
        line-height: 1.2;
    }

    .peibwa-press-release-card__date {
        margin: 0rem 0 0;
        color: var(--color-secondary, #6F5EAE);
        font-size: 1rem;
        font-weight: 700;
    }

    .peibwa-press-release-card__actions {
        display: grid;
        gap: 0.75rem;
        justify-items: end;
    }

    .peibwa-press-release-card__file-row {
        display: inline-flex;
        align-items: center;
        gap: 0.75rem;
    }

    .peibwa-press-release-card__lang {
        min-width: 44px;
        padding: 0.45rem 0.8rem;
        border-radius: 8px;
        background: var(--color-secondary, #6F5EAE);
        color: #fff;
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        text-decoration: none;
    }

    .peibwa-press-release-card__lang:hover,
    .peibwa-press-release-card__lang:focus {
        background: var(--color-secondary-dark, #34285f);
        color: #fff !IMPORTANT;
    }

    .peibwa-press-release-card__download {
        color: var(--color-secondary, #6F5EAE);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .peibwa-press-release-card__download:hover,
    .peibwa-press-release-card__download:focus {
        color: var(--color-secondary-dark, #34285f);
    }

    .peibwa-press-release-card__download svg {
        width: 24px;
        height: 24px;
    }

    @media (max-width: 900px) {
        .peibwa-press-release-card {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .peibwa-press-release-card__actions {
            grid-column: 2;
            justify-items: start;
            align-self: start;
        }
    }

    @media (max-width: 600px) {
        .peibwa-press-release-card {
            grid-template-columns: 1fr;
            gap: 1rem;
        }

        .peibwa-press-release-card__actions {
            grid-column: auto;
        }

        .peibwa-press-release-card__icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
        }
    }

/* ==========================================================================
   Testimonial Pattern (peibwa/testimonial)
   Cover block with a background image and a white "speech bubble" quote
   anchored bottom-left, followed by an attribution line. The bubble's
   per-line rounded background is produced with box-decoration-break: clone.
   ========================================================================== */

.peibwa-testimonial.wp-block-cover {
    border-radius: 24px;
    overflow: hidden;
}

.peibwa-testimonial.wp-block-cover .wp-block-cover__inner-container {
    max-width: 1280px;
    margin: 0 auto !important;
}

/* Quote bubble — inline so the white background hugs each wrapped line */
.peibwa-testimonial .peibwa-testimonial__quote {
    display: inline;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    background-color: #fff;
    color: var(--color-primary, #093A80);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.8;
    padding: 0.4em 0.7em;
    border-radius: 25px;
}

/* Attribution line sits below the bubble */
.peibwa-testimonial .peibwa-testimonial__cite {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: #fff;
}

.peibwa-testimonial .peibwa-testimonial__cite strong {
    font-weight: 700;
}

@media (max-width: 600px) {
    .peibwa-testimonial.wp-block-cover {
        border-radius: 16px;
    }
    .peibwa-testimonial .peibwa-testimonial__quote {
        line-height: 1.8;
        font-size: 1rem;
}
}

/* ==========================================================================
   Photo Collage Pattern (peibwa/photo-collage)
   Outer flex row of "column" groups; each column holds one OR two stacked
   images. Heights are derived from a shared --collage-h var; alternate columns
   are offset vertically for the scattered look. Stagger cycles via :nth-child
   so adding/removing columns stays balanced.
   ========================================================================== */

.peibwa-photo-collage {
    --collage-h: clamp(220px, 30vw, 34rem);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1.4vw, 1.5rem);
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
    overflow: hidden;
}

/* A column: stacks its 1–2 images vertically */
.peibwa-photo-collage__col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.5rem, 1.2vw, 1.25rem);
    margin: 0;
    flex: 0 0 auto;
}

.peibwa-photo-collage__col .wp-block-image {
    margin: 0;
}

.peibwa-photo-collage__col .wp-block-image img {
    display: block;
    width: auto;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(39, 47, 56, 0.10);
}

/* Default single-image column: tall portrait */
.peibwa-photo-collage__col .wp-block-image img {
    height: calc(var(--collage-h) * 0.82);
    aspect-ratio: 3 / 4;
}

/* When a column has two stacked images, each takes roughly half the height
   with a landscape-ish ratio so the pair reads as one column. */
.peibwa-photo-collage__col .wp-block-image:not(:only-child) img {
    height: calc(var(--collage-h) * 0.46);
    aspect-ratio: 3 / 2;
}

/* ----- Designed 5-column arrangement (matches the reference layout) -----
   1: tall portrait  2: stacked pair  3: wide single, dropped low
   4: tallest "hero" portrait  5: small portrait                            */

/* Col 1 — tall portrait, sits slightly low */
.peibwa-photo-collage__col:nth-child(5n + 1) {
    transform: translateY(-10%);
}
.peibwa-photo-collage__col:nth-child(5n + 1) .wp-block-image:only-child img {
    height: calc(var(--collage-h) * 0.92);
    aspect-ratio: 4 / 6;
}

/* Col 2 — stacked pair, sits high */
.peibwa-photo-collage__col:nth-child(5n + 2) {
    transform: translateY(-10%);
}
.peibwa-photo-collage__col:nth-child(5n + 2) .wp-block-image:first-child:not(:only-child) img {
    height: calc(var(--collage-h) * 0.34);
    aspect-ratio: 3 / 2;
}
.peibwa-photo-collage__col:nth-child(5n + 2) .wp-block-image:last-child:not(:only-child) img {
    height: calc(var(--collage-h) * 0.62);
    aspect-ratio: 4 / 5;
}

/* Col 3 — wide single, dropped lower */
.peibwa-photo-collage__col:nth-child(5n + 3) {
    transform: translateY(-14%);
}
.peibwa-photo-collage__col:nth-child(5n + 3) .wp-block-image:only-child img {
    height: calc(var(--collage-h) * 0.6);
    aspect-ratio: 5 / 4;
}

/* Col 4 — tallest hero portrait, sits high */
.peibwa-photo-collage__col:nth-child(5n + 4) {
    transform: translateY(-8%);
}
.peibwa-photo-collage__col:nth-child(5n + 4) .wp-block-image:only-child img {
    height: calc(var(--collage-h) * 1);
    aspect-ratio: 1 / 2;
}

/* Col 5 — small portrait, middle-low */
.peibwa-photo-collage__col:nth-child(5n + 5) {
    transform: translateY(-13%);
}
.peibwa-photo-collage__col:nth-child(5n + 5) .wp-block-image:only-child img {
    height: calc(var(--collage-h) * 0.62);
    aspect-ratio: 3 / 4;
}

/* Tablet: allow wrapping into rows, drop the offsets */
@media (max-width: 1024px) {
    .peibwa-photo-collage {
        flex-wrap: wrap;
    }
    .peibwa-photo-collage__col {
        transform: none !important;
    }
}

/* Mobile: simple 2-up grid of equal rounded tiles */
@media (max-width: 600px) {
    .peibwa-photo-collage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    .peibwa-photo-collage__col {
        width: 100%;
    }
    .peibwa-photo-collage__col .wp-block-image img,
    .peibwa-photo-collage__col .wp-block-image:not(:only-child) img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4 !important;
    }
}

/* ==========================================================================
   Board of Directors ([peibwa_board])
   Card grid (photo + white info panel) where each card opens a bio modal.
   ========================================================================== */

.peibwa-board {
    max-width: var(--max-width, 1280px);
    margin-inline: auto;
}

.peibwa-board__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
}

.peibwa-board__card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0;
}

.peibwa-board__photo {
    margin: 0;
    line-height: 0;
}

.peibwa-board__img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.peibwa-board__body {
    background: #fff;
    border-radius: 10px;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.peibwa-board__name {
    margin: 0;
    color: var(--color-secondary) !important;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    font-weight: 700;
    line-height: 1.2;
}

.peibwa-board__role {
    margin: 0.5rem 0 0;
    color: var(--color-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.peibwa-board__more {
    margin-top: 1.5rem;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--color-charcoal, #272f38);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color var(--transition-speed, 0.3s) ease;
}

.peibwa-board__more .peibwa-board__arrow {
    transition: transform var(--transition-speed, 0.3s) ease;
}

.peibwa-board__more:hover {
    color: var(--color-secondary);
}

.peibwa-board__more:hover .peibwa-board__arrow {
    transform: translateX(4px);
}

/* ----- Bio modal ----- */
.peibwa-board-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 5vh, 4rem) 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* The dim backdrop lives on the scroll container itself so it always covers
       the screen; a fixed child inside a scrolling box drifts on iOS Safari. */
    background: rgba(6, 38, 84, 0.55);
    cursor: pointer;
}

.peibwa-board-modal.is-open {
    display: flex;
}

.peibwa-board-modal__overlay {
    position: fixed;
    inset: 0;
}

.peibwa-board-modal__dialog {
    cursor: auto;
}

.peibwa-board-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 640px;
    margin: auto;
    background: #fff;
    border-radius: 16px;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    box-shadow: 0 30px 70px rgba(6, 38, 84, 0.30);
}

.peibwa-board-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--color-off-white, #fcf9f7);
    color: var(--color-primary);
    cursor: pointer;
    transition: background var(--transition-speed, 0.3s) ease;
}

.peibwa-board-modal__close svg {
    width: 1.1rem;
    height: 1.1rem;
}

.peibwa-board-modal__close:hover {
    background: var(--color-secondary-light, #cabfe4);
}

.peibwa-board-modal__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    padding-right: 2.5rem;
}

.peibwa-board-modal__photo {
    flex: 0 0 auto;
    line-height: 0;
}

.peibwa-board-modal__img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.peibwa-board-modal__name {
    margin: 0;
    color: var(--color-secondary) !important;
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    line-height: 1.15;
}

.peibwa-board-modal__role {
    margin: 0.4rem 0 0;
    color: var(--color-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.peibwa-board-modal__bio {
    color: var(--color-charcoal, #272f38);
    line-height: 1.7;
}

.peibwa-board-modal__bio :first-child {
    margin-top: 0;
}

.peibwa-board-modal__bio :last-child {
    margin-bottom: 0;
}

body.peibwa-modal-open,
html:has(body.peibwa-modal-open) {
    overflow: hidden;
}

/* Tablet */
@media (max-width: 900px) {
    .peibwa-board__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 560px) {
    .peibwa-board__grid {
        grid-template-columns: 1fr;
    }
    .peibwa-board-modal__header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ==========================================================================
   Single Event (The Events Calendar override)
   Flyer + content on the left, sticky "The Details" box on the right, then a
   related-events grid.
   ========================================================================== */

#tribe-events-pg-template {
    margin: 0 auto;
    max-width: var(--max-width, 1280px);
    padding: 0;
}

.peibwa-event {
    max-width: 100%;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) 0;;
}

.peibwa-event__back {
    margin: 0 0 1.5rem;
    font-size: 0.85rem;
}

.peibwa-event__back a {
    color: var(--color-secondary);
    text-decoration: none;
}

.peibwa-event__back a:hover {
    text-decoration: underline;
}

.peibwa-event__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.peibwa-event__flyer {
    margin: 0 0 1.75rem;
    line-height: 0;
}

.peibwa-event__flyer-img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    display: block;
}

.peibwa-event__title {
    margin: 0 0 1.25rem;
    color: var(--color-charcoal, #272f38);
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
}

.peibwa-event__content {
    color: var(--color-charcoal, #272f38);
    line-height: 1.7;
}

/* ----- The Details box ----- */
.peibwa-event__aside {
    position: sticky;
    top: 2rem;
}

.peibwa-event__details {
    background: var(--color-off-white, #fcf9f7);
    border-radius: 14px;
    padding: clamp(1.5rem, 2vw, 2rem);
}

.peibwa-event__details-heading {
    margin: 0 0 1.25rem;
    color: var(--color-charcoal, #272f38);
    font-size: 1.1rem;
    font-weight: 700;
}

.peibwa-event__detail {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1.1rem;
}

.peibwa-event__detail-label {
    color: var(--color-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.peibwa-event__detail-value {
    color: var(--color-charcoal, #272f38);
    font-size: 0.9rem;
}

.peibwa-event__registration-link {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-speed, 0.3s) ease;
}

.peibwa-event__registration-link:hover {
    background: var(--color-secondary-dark, #34285f);
    color: #fff !important;
}

/* ----- Tickets ----- */
.event-tickets .tribe-tickets__tickets-form {
    background: var(--color-off-white, #fcf9f7);
    border-radius: 14px;
    max-width: 100%;
 }


/* ----- Related events ----- */
.peibwa-event__related {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.peibwa-event__related-heading {
    margin: 0 0 1.75rem;
    text-align: center;
    color: var(--color-secondary);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
}

.peibwa-event__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.peibwa-event-card {
    background: #fff;
    border-radius: 12px;
    padding: clamp(1.25rem, 2vw, 1.75rem);
    display: flex;
    flex-direction: column;
}

.peibwa-event-card__date {
    display: inline-block;
    color: var(--color-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.peibwa-event-card__title {
    margin: 0 0 0.65rem;
    color: var(--color-charcoal, #272f38);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.peibwa-event-card__excerpt {
    margin: 0 0 1.25rem;
    color: var(--color-gray-700, #4b5563);
    font-size: 0.9rem;
    line-height: 1.6;
}

.peibwa-event-card__more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-charcoal, #272f38);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--transition-speed, 0.3s) ease;
}

.peibwa-event-card__arrow {
    transition: transform var(--transition-speed, 0.3s) ease;
}

.peibwa-event-card__more:hover {
    color: var(--color-secondary);
}

.peibwa-event-card__more:hover .peibwa-event-card__arrow {
    transform: translateX(4px);
}

/* Tablet */
@media (max-width: 900px) {
    .peibwa-event__layout {
        grid-template-columns: 1fr;
    }
    .peibwa-event__aside {
        position: static;
        order: -1;
    }
    .peibwa-event__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 560px) {
    .peibwa-event__related-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   News / Blog Listing (home.php, category.php)
   Category filter sidebar + featured-first post grid.
   ========================================================================== */

/* .peibwa-news {
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
} */

/* Archive templates (category.php / home.php) have no section wrapper to
   provide vertical rhythm — the News page gets it from its Lake section. */
.container.peibwa-news {
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.peibwa-news__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

/* ----- Category filter sidebar ----- */
.peibwa-news-filters {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.peibwa-news-filters__item {
    display: block;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    color: var(--color-gray-700, #4b5563);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--transition-speed, 0.3s) ease, background var(--transition-speed, 0.3s) ease;
}

.peibwa-news-filters__item:hover {
    color: var(--color-secondary);
}

.peibwa-news-filters__item.is-active {
    background: var(--color-secondary);
    color: #fff;
}

/* ----- Post grid ----- */
.peibwa-news__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

.peibwa-news-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.peibwa-news-card--featured {
    grid-column: 1 / -1;
}

.peibwa-news-card__media {
    display: block;
    line-height: 0;
}

.peibwa-news-card__media > img {
    width: 100%;
    height: 24rem;
    object-fit: cover;
    display: block;
}

/* Image-less posts keep a fixed-height brand tile (not square). */
.peibwa-news-card__media--placeholder {
    width: 100%;
    height: 24rem;
}

.peibwa-news-card__media--placeholder {
    background: var(--color-secondary, #6f5eae);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Rotating brand-color tiles for image-less posts. Keep the number of variants
   in sync with PEIBWA_NEWS_PLACEHOLDER_COLORS in inc/template-functions.php. */
.peibwa-news-card__media--c0 { background: var(--color-primary, #093a80); }
.peibwa-news-card__media--c1 { background: var(--color-secondary, #6f5eae); }
.peibwa-news-card__media--c2 { background: var(--color-accent, #115d6a); }
.peibwa-news-card__media--c3 { background: var(--color-primary-dark, #062654); }
.peibwa-news-card__media--c4 { background: var(--color-secondary-dark, #34285f); }

/* Site logo shown on a white chip so it reads on any brand-color tile. */
.peibwa-news-card__placeholder-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 78%;
    padding: 1rem 1.4rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
    line-height: 0;
}

.peibwa-news-card__placeholder-logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 180px;
    max-height: 56px;
}

.peibwa-news-card__placeholder-text {
    color: var(--color-secondary-dark, #34285f);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: uppercase;
}

.peibwa-news-card--featured .peibwa-news-card__placeholder-logo {
    padding: 1.35rem 2rem;
}

.peibwa-news-card--featured .peibwa-news-card__placeholder-logo img {
    max-width: 240px;
    max-height: 80px;
}

.peibwa-news-card--featured .peibwa-news-card__media--placeholder {
    height: clamp(260px, 32vw, 420px);
}

/* Featured (full-width) card with a photo: square image beside the text on
   wider screens. Without a photo it stays stacked with the brand tile. */
@media (min-width: 641px) {
    .peibwa-news-card--featured.peibwa-news-card--has-image {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: center;
    }
}

.peibwa-news-card__body {
    padding: clamp(1.1rem, 2vw, 1.5rem);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.peibwa-news-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.peibwa-news-card__date {
    color: var(--color-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.peibwa-news-card__cat {
    background: var(--color-secondary-light, #cabfe4);
    color: var(--color-secondary-dark, #34285f);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    text-decoration: none;
    transition: background var(--transition-speed, 0.3s) ease, color var(--transition-speed, 0.3s) ease;
}

.peibwa-news-card__cat:hover {
    background: var(--color-secondary);
    color: #fff;
}

.peibwa-news-card__title {
    margin: 0 0 0.6rem;
    color: var(--color-charcoal, #272f38);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
}

.peibwa-news-card--featured .peibwa-news-card__title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.peibwa-news-card__title a {
    color: inherit;
    text-decoration: none;
}

.peibwa-news-card__title a:hover {
    color: var(--color-secondary);
}

.peibwa-news-card__excerpt {
    margin: 0.9rem 0 1.1rem;
    color: var(--color-gray-700, #4b5563);
    font-size: 0.9rem;
    line-height: 1.6;
}

.peibwa-news-card__more {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.peibwa-news-card__more span {
    transition: transform var(--transition-speed, 0.3s) ease;
}

.peibwa-news-card__more:hover span {
    transform: translateX(4px);
}

@media (max-width: 900px) {
    .peibwa-news__layout {
        grid-template-columns: 1fr;
    }
    .peibwa-news-filters {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .peibwa-news__grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Shortcode variant ([peibwa_news]) ----- */
.peibwa-news__layout--no-sidebar {
    grid-template-columns: minmax(0, 1fr);
}

.peibwa-news__pagination {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.peibwa-news__pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    justify-content: center;
}

.peibwa-news__pagination a,
.peibwa-news__pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--color-secondary-light, #cabfe4);
    background: #fff;
    color: var(--color-secondary, #6f5eae);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-speed, 0.3s) ease, color var(--transition-speed, 0.3s) ease;
}

.peibwa-news__pagination a:hover {
    background: var(--color-secondary-light, #cabfe4);
    color: var(--color-secondary-dark, #34285f);
}

.peibwa-news__pagination .current {
    background: var(--color-secondary, #6f5eae);
    border-color: var(--color-secondary, #6f5eae);
    color: #fff;
}

.peibwa-news__pagination .dots {
    border-color: transparent;
    background: transparent;
}

/* ==========================================================================
   Site search form (searchform.php) — pill input with icon + button
   ========================================================================== */

.peibwa-search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 560px;
    margin: 0;
}

.peibwa-search-form__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400, #929594);
    pointer-events: none;
}

.peibwa-search-form .search-field {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 1rem 0 2.75rem;
    font: inherit;
    font-size: 1rem;
    color: var(--color-charcoal, #272f38);
    background: #fff;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 999px;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--transition-speed, 0.3s), box-shadow var(--transition-speed, 0.3s);
}

.peibwa-search-form .search-field:focus {
    outline: none;
    border-color: var(--color-secondary, #6f5eae);
    box-shadow: 0 0 0 3px rgba(111, 94, 174, 0.18);
}

.peibwa-search-form .search-submit {
    flex-shrink: 0;
    height: 48px;
    padding: 0 1.5rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-secondary, #6f5eae);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--transition-speed, 0.3s);
}

.peibwa-search-form .search-submit:hover,
.peibwa-search-form .search-submit:focus-visible {
    background: var(--color-secondary-dark, #34285f);
}

/* ==========================================================================
   Empty state (template-parts/content-none.php)
   ========================================================================== */

.peibwa-empty {
    background: #fff;
    border-radius: 14px;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.peibwa-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--color-secondary-light, #cabfe4);
    color: var(--color-secondary-dark, #34285f);
}

.peibwa-empty__title {
    margin: 0 0 0.5rem;
    color: var(--color-charcoal, #272f38);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    line-height: 1.2;
}

.peibwa-empty__text {
    max-width: 46ch;
    margin: 0 auto 1.5rem;
    color: var(--color-gray-700, #4b5563);
    font-size: 0.95rem;
    line-height: 1.6;
}

.peibwa-empty__search {
    width: 100%;
    max-width: 480px;
}

.peibwa-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    background: var(--color-secondary, #6f5eae);
    color: #fff !important;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background var(--transition-speed, 0.3s);
}

.peibwa-empty__btn:hover {
    background: var(--color-secondary-dark, #34285f);
}

/* ==========================================================================
   Search results (search.php + template-parts/content-search.php)
   ========================================================================== */

.peibwa-search-header .peibwa-page-header__title {
    margin-bottom: 0.5rem;
}

.peibwa-search-header .peibwa-page-header__intro {
    margin: 0 0 1.5rem;
}

.peibwa-search-header__form {
    margin-top: 1.5rem;
}

.container.peibwa-search {
    max-width: 960px;
    padding-top: clamp(2rem, 5vw, 3.5rem);
    padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.peibwa-search__results {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.peibwa-result {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    background: #fff;
    border-radius: 14px;
}

.peibwa-result.has-post-thumbnail {
    grid-template-columns: 96px minmax(0, 1fr);
}

.peibwa-result__media {
    display: block;
    line-height: 0;
    border-radius: 10px;
    overflow: hidden;
}

.peibwa-result__media img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    display: block;
}

.peibwa-result__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
}

.peibwa-result__type {
    background: var(--color-secondary-light, #cabfe4);
    color: var(--color-secondary-dark, #34285f);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.peibwa-result__date {
    color: var(--color-secondary, #6f5eae);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.peibwa-result__title {
    margin: 0 0 0.4rem;
    color: var(--color-charcoal, #272f38);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}

.peibwa-result__title a {
    color: inherit;
    text-decoration: none;
}

.peibwa-result__title a:hover {
    color: var(--color-secondary, #6f5eae);
}

.peibwa-result__excerpt {
    margin: 0 0 0.75rem;
    color: var(--color-gray-700, #4b5563);
    font-size: 0.9rem;
    line-height: 1.6;
}

.peibwa-result__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-secondary, #6f5eae);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.peibwa-result__more span {
    transition: transform var(--transition-speed, 0.3s) ease;
}

.peibwa-result__more:hover span {
    transform: translateX(4px);
}

@media (max-width: 560px) {
    .peibwa-result.has-post-thumbnail {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0.9rem;
    }
    .peibwa-result__media img {
        width: 64px;
        height: 64px;
    }
    .peibwa-search-form .search-submit {
        padding: 0 1.1rem;
    }
}

/* ==========================================================================
   Single Post (single.php)
   Content + sticky sidebar (share / membership / events), then related grid.
   ========================================================================== */

.peibwa-post {
    padding-top: clamp(1.5rem, 4vw, 3rem);
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.peibwa-post__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.peibwa-post__featured {
    margin: 0 0 1.75rem;
    line-height: 0;
}

.peibwa-post__featured img {
    width: auto;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    display: block;
}

.peibwa-post__title {
    margin: 0 0 1.25rem;
    color: var(--color-charcoal, #272f38);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.2;
}

.peibwa-post__content {
    color: var(--color-charcoal, #272f38);
    line-height: 1.7;
}

.peibwa-post__content p {
    margin: 0 0 1.25rem;
}

.peibwa-post__tags {
    margin-top: 1.75rem;
    font-size: 0.85rem;
    color: var(--color-gray-700, #4b5563);
}

/* ----- Sidebar ----- */
.peibwa-post__aside {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.peibwa-share {
    background: var(--color-off-white, #fcf9f7);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}

.peibwa-share__title {
    margin: 0 0 0.9rem;
    color: var(--color-charcoal, #272f38);
    font-size: 0.95rem;
    font-weight: 700;
}

.peibwa-share__links {
    display: flex;
    gap: 0.6rem;
}

.peibwa-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--color-secondary);
    color: #fff;
    transition: background var(--transition-speed, 0.3s) ease, transform var(--transition-speed, 0.3s) ease;
}

.peibwa-share__link:hover {
    background: var(--color-secondary-dark, #34285f);
    color: #fff;
    transform: translateY(-2px);
}

.peibwa-share__link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* ----- CTA cards ----- */
.peibwa-cta-card {
    border-radius: 14px;
    padding: 1.5rem;
}

.peibwa-cta-card--member {
    background: var(--color-secondary-light, #cabfe4);
}

.peibwa-cta-card--events {
    background: #fff;
}

.peibwa-cta-card__icon {
    display: block;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.75rem;
    color: var(--color-secondary);
}

.peibwa-cta-card--member .peibwa-cta-card__icon {
    color: var(--color-secondary-dark, #34285f);
}

.peibwa-cta-card__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.peibwa-cta-card__title {
    margin: 0 0 0.5rem;
    color: var(--color-charcoal, #272f38);
    font-size: 1.15rem;
    font-weight: 700;
}

.peibwa-cta-card__text {
    margin: 0 0 1.1rem;
    color: var(--color-gray-700, #4b5563);
    font-size: 0.9rem;
    line-height: 1.6;
}

.peibwa-cta-card__button {
    display: inline-block;
    background: var(--color-secondary);
    color: #fff;
    border-radius: 8px;
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background var(--transition-speed, 0.3s) ease;
}

.peibwa-cta-card__button:hover {
    background: var(--color-secondary-dark, #34285f);
    color: #fff;
}

.peibwa-cta-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.peibwa-cta-card__link span {
    transition: transform var(--transition-speed, 0.3s) ease;
}

.peibwa-cta-card__link:hover span {
    transform: translateX(4px);
}

/* ----- Related news ----- */
.peibwa-post__related {
    margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

.peibwa-post__related-heading {
    margin: 0 0 1.75rem;
    text-align: center;
    color: var(--color-secondary);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
}

.peibwa-post__related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (max-width: 900px) {
    .peibwa-post__layout {
        grid-template-columns: 1fr;
    }
    .peibwa-post__aside {
        position: static;
    }
    .peibwa-post__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .peibwa-post__related-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   404 / Not Found Page
   ========================================================================== */

.error-404.not-found {
    padding: var(--spacing-2xl, 4rem) var(--spacing-md, 1.5rem) var(--spacing-2xl, 4rem);
}

.error-404__inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.error-404__code {
    font-family: var(--font-secondary, var(--font-primary));
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin: 0 0 0.25rem;
    background: linear-gradient(126deg, #6F5EAF 17.51%, #093A80 105.06%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary, #093A80);
}

.error-404 .page-header {
    margin-bottom: var(--spacing-sm, 1rem);
    border: 0;
    padding: 0;
}

.error-404 .page-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--color-primary-dark, #062654);
    margin: 0;
}

.error-404__lead {
    color: var(--color-gray-600, #4b5563);
    font-size: var(--font-size-lg, 1.125rem);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 auto var(--spacing-lg, 2rem);
}

/* Search form */
.error-404__search {
    max-width: 460px;
    margin: 0 auto var(--spacing-lg, 2rem);
}

.error-404__search form {
    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.error-404__search .search-form,
.error-404__search .wp-block-search__inside-wrapper {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    border: 0;
    padding: 0;
}

.error-404__search label {
    flex: 1;
    margin: 0;
}

.error-404__search input[type="search"],
.error-404__search .wp-block-search__input,
.error-404__search .search-field {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base, 1rem);
    color: var(--color-black, #272F38);
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: 999px;
    background: var(--color-gray-50, #FCF9F7);
    transition: border-color var(--transition-speed, 0.3s), box-shadow var(--transition-speed, 0.3s);
}

.error-404__search input[type="search"]:focus,
.error-404__search .wp-block-search__input:focus,
.error-404__search .search-field:focus {
    outline: none;
    border-color: var(--color-primary, #093A80);
    box-shadow: 0 0 0 3px rgba(9, 58, 128, 0.12);
}

.error-404__search button[type="submit"],
.error-404__search .wp-block-search__button,
.error-404__search .search-submit {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-white, #fff);
    background: var(--color-primary, #093A80);
    border: 1px solid var(--color-primary, #093A80);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color var(--transition-speed, 0.3s);
}

.error-404__search button[type="submit"]:hover,
.error-404__search .wp-block-search__button:hover,
.error-404__search .search-submit:hover {
    background: var(--color-primary-dark, #062654);
    border-color: var(--color-primary-dark, #062654);
}

/* Home button */
.error-404__actions {
    margin-bottom: var(--spacing-xl, 3rem);
}

.error-404__btn {
    display: inline-block;
    padding: 0.85rem 2rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-white, #fff) !important;
    background: var(--color-secondary, #6F5EAE);
    border-radius: 999px;
    transition: background-color var(--transition-speed, 0.3s), transform var(--transition-speed, 0.3s);
}

.error-404__btn:hover {
    background: var(--color-secondary-dark, #34285f);
    color: var(--color-white, #fff);
    transform: translateY(-1px);
}

/* Helpful links */
.error-404__links {
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    padding-top: var(--spacing-lg, 2rem);
}

.error-404__links h2 {
    font-size: var(--font-size-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-gray-500, #6b7280);
    margin: 0 0 var(--spacing-sm, 1rem);
}

.error-404__links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.75rem;
}

.error-404__links li {
    margin: 0;
}

.error-404__links a {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary, #093A80);
    background: var(--color-gray-100, #f3f4f6);
    border-radius: 999px;
    transition: background-color var(--transition-speed, 0.3s), color var(--transition-speed, 0.3s);
}

.error-404__links a:hover {
    background: var(--color-primary, #093A80);
    color: var(--color-white, #fff);
}

@media (max-width: 480px) {
    .error-404__search form,
    .error-404__search .search-form,
    .error-404__search .wp-block-search__inside-wrapper {
        flex-direction: column;
    }
}

/* ==========================================================================
   Lake Builder shared button (used by the theme's lake-blocks)
   --pbtn is the scheme color: secondary purple by default.
   ========================================================================== */

.peibwa-btn {
    --pbtn: var(--color-secondary, #6F5EAE);
    display: inline-block;
    background: var(--pbtn);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 1.25rem 2.5rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.peibwa-btn:hover,
.peibwa-btn:focus {
    background: var(--color-secondary-dark, #34285f);
    color: #fff;
    text-decoration: none;
}

.peibwa-btn--outline {
    background: transparent;
    color: var(--pbtn);
    border: 1.5px solid var(--pbtn);
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
}

.peibwa-btn--outline:hover,
.peibwa-btn--outline:focus {
    background: var(--pbtn);
    color: #fff;
}

.peibwa-btn--primary { --pbtn: var(--color-primary, #093A80); }
.peibwa-btn--primary:hover, .peibwa-btn--primary:focus { background: var(--color-primary-dark, #062654); }
.peibwa-btn--accent { --pbtn: var(--color-accent, #115D6A); }
.peibwa-btn--primary-light { --pbtn: var(--color-primary-light, #9BBEF2); }
.peibwa-btn--outline:hover, .peibwa-btn--outline:focus { background: var(--pbtn); }

/* Blush band background — the `tint` swatch available on Lake blocks'
   Style tab (also the table block's Lavender-band theme). */
.lake-root .s.tint,
.lake-root .b-dynamic.tint {
    background: #ebe4e6;
}

/* ==========================================================================
   Lake content heading typography
   Mirrors the frontend heading treatment (style.css h1–h6 + the theme.json
   global-styles sizes) scoped to .lake-root, so the Lake Builder canvas —
   where neither style.css nor global-styles-inline-css loads — renders
   headings exactly like the frontend instead of inheriting wp-admin's
   defaults (h2 1.3em etc.). On the frontend the preset vars resolve from
   theme.json; the literal fallbacks only apply on the canvas.
   ========================================================================== */

	h2 { font-size: clamp(2.2rem, 4vw, 3rem) !important; }	
.peibwa-news-card__title {
    font-size: clamp(1rem, 3vw, 2rem) !important;
}
	
:where(.lake-root) h1,
:where(.lake-root) h2,
:where(.lake-root) h3,
:where(.lake-root) h4,
:where(.lake-root) h5,
:where(.lake-root) h6 {
    font-family: var(--font-secondary);
    color: #414140;
    margin: 0 0 var(--spacing-sm);
    font-weight: 500;
    letter-spacing: -0.6px;
}


:where(.lake-root) h1 { font-size: var(--wp--preset--font-size--6-xl, 3.75rem); line-height: 1.2; }
:where(.lake-root) h2 { font-size: var(--wp--preset--font-size--5-xl, 3rem); line-height: 1.2; }
:where(.lake-root) h3 { font-size: var(--wp--preset--font-size--4-xl, 2.25rem); line-height: 1.3; }
:where(.lake-root) h4 { font-size: var(--wp--preset--font-size--3-xl, 1.875rem); line-height: 1.2; }
:where(.lake-root) h5 { font-size: var(--wp--preset--font-size--2-xl, 1.5rem); line-height: 1.2; }
:where(.lake-root) h6 { font-size: var(--wp--preset--font-size--xl, 1.25rem); line-height: 1.2; }
	
	
/* Newsletter signup response message (footer). */
.site-footer__newsletter-note {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0.5rem 0 1rem;
}