/* =========================================================================
   WSJ — WordPress integration layer on top of the compiled style.min.css
   Keep this small: style.min.css (Bootstrap 5 + design) does the work.
   ========================================================================= */

:root{ --nb-accent:#cd1719; }

/* Brand colour helpers */
.text-brand{ color:#cd1719 !important; }
.bg-brand{ background-color:#cd1719 !important; }

/* Top promo bar */
.topbar{ letter-spacing:.04em; font-size:.8rem; }

/* Carousel sizing + caption gradient (matches live look) */
#carouselHeader .img-display{ width:100%; height:clamp(320px,52vh,600px); object-fit:cover; display:block; }

/* style.min.css ships Bootstrap's fade rules with the `.carousel-fade` scope
   stripped, so the incoming slide is left at opacity:0 and the carousel goes
   blank after the first auto-advance. The markup now carries `carousel-fade`;
   these rules guarantee the active / incoming slide is actually visible. */
#carouselHeader.carousel-fade .carousel-item{ transition:opacity .6s ease-in-out; transform:none; }
#carouselHeader.carousel-fade .carousel-item.active,
#carouselHeader.carousel-fade .carousel-item-next.carousel-item-start,
#carouselHeader.carousel-fade .carousel-item-prev.carousel-item-end{ opacity:1; z-index:1; }
#carouselHeader.carousel-fade .active.carousel-item-start,
#carouselHeader.carousel-fade .active.carousel-item-end{ opacity:0; z-index:0; }
#carouselHeader .sliderbox{ height:auto; }
#carouselHeader .carousel-caption{
	left:0; right:0; bottom:0; text-align:left; padding:2.2rem 1.5rem 1.5rem;
	background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,0));
}
#carouselHeader .carousel-caption h2{ margin:0; font-weight:600; }
#carouselHeader .carousel-caption h2 a{ color:#fff; text-decoration:none; }
#carouselHeader .carousel-caption h2 a:hover{ color:#fff; opacity:.9; }
.carousel-indicators [data-bs-target]{ width:12px; height:12px; border-radius:50%; }

/* Article cards */
.home-cat-section .img-fluid,
.container.py-4 .wp-post-image{ width:100%; object-fit:cover; }
.container.py-4 h3,
.home-cat-section h3{ font-size:1.25rem; line-height:1.2; color:#040404; }
.container.py-4 a:hover h3,
.home-cat-section a:hover h3{ color:#cd1719; }
.container.py-4 a{ text-decoration:none; }
.container.py-4 p{ color:#444; font-size:.95rem; }
.more-link{ font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#cd1719; text-decoration:none; }

/* Section title */
.section-title{ font-size:1.6rem; }

/* Skip rendering work for the off-screen category blocks until they're scrolled
   near. The intrinsic-size estimate keeps the scrollbar stable (no CLS). */
.home-cat-section{ content-visibility:auto; contain-intrinsic-size:auto 600px; }

/* Sticky navbar tweak applied by custom.js on scroll */
.navigation.fix{ box-shadow:0 2px 12px rgba(0,0,0,.08); }
.navigation.fix .navbar-brand{ display:inline-block !important; }

/* Single post content width + readability */
.entry-content{ font-size:1.08rem; line-height:1.8; }
.entry-content img{ height:auto; }
.entry-content a{ color:#cd1719; }
.entry-content a:hover{ color:#040404; }
.post-meta a{ color:#cd1719; text-decoration:none; }

/* Footer link colours already from style.min.css (.footer-menu li a) */
.footer-menu h3{ font-family:"Cormorant",serif; }

/* Navbar right-side controls (search icon + hamburger) pinned to the right */
.wsj-nav-controls{ margin-left:auto; }

/* Search icon link / toggle button */
.search-link{ background:none; line-height:0; cursor:pointer; }
.search-link:focus{ box-shadow:none; outline:none; }
.search-link img{ filter:none; }

/* Search panel revealed under the navbar when .search-link is clicked.
   Align the form to the right on desktop so it sits under the search icon. */
.wsj-search-panel .search-form{ margin:0; }
@media (min-width:992px){
	.wsj-search-panel .search-form{ margin-left:auto; }
}

/* WordPress alignment helpers inside content */
.entry-content .alignwide{ max-width:1140px; margin-inline:auto; }
.entry-content .alignfull{ width:100%; }
.entry-content figure{ margin:1.5rem 0; }
.wp-block-image img{ max-width:100%; height:auto; }

/* Pagination */
.pagination{ gap:.25rem; }

/* Comments spacing */
.comment-list{ list-style:none; padding-left:0; }
.comment-list ol.children{ list-style:none; }

/* Skip link */
.skip-link{ position:absolute; left:-999px; z-index:2000; }
.skip-link:focus{ left:8px; top:8px; background:#fff; padding:8px 14px; }