/*
Theme Name: Leroux Child
Theme URI: https://leroux.qodeinteractive.com
Description: A child theme of Leroux
Author: Elated Themes
Author URI: https://qodeinteractive.com
Version: 1.0
Text Domain: leroux
Template: leroux
*/

/* Sticky header appearance is owned by Qi:
   Header > Global Header Options > Scroll Appearance Settings.
   Only the separator line lives here, because the theme exposes no border
   option for the sticky header (it emits background-color and side padding
   only, see leroux-core .../scroll-appearance/sticky/helper.php). */
.qodef-header-sticky {
	border-bottom: 1px solid rgba(34, 48, 53, 0.15);
}

/* The Contact Us / footer separator that lived here is gone: the footer is now
   disabled on that page (qodef_enable_page_footer = no), so there is no join
   left to mark.

   With the footer off, the theme's content wrappers still leave their own space
   below the last section. Collapse it so the only gap under the form is the
   30px set on the section itself in Elementor. */
body.page-id-6873 #qodef-page-outer,
body.page-id-6873 #qodef-page-inner,
body.page-id-6873 #qodef-page-content,
body.page-id-6873 #qodef-page-content > .qodef-grid-inner {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Footer copy is deliberately light so it stays subordinate to page content.
   Scoped by the footer's id, which outranks the theme's element selectors, so
   no !important is needed. Everything else about the footer columns (sizes,
   spacing, alignment) now lives in the widget markup itself, and the top-area
   padding lives in Leroux Core Options > Footer. */
#qodef-page-footer,
#qodef-page-footer p,
#qodef-page-footer a,
#qodef-page-footer h4,
#qodef-page-footer h5,
#qodef-page-footer li,
#qodef-page-footer div,
#qodef-page-footer span {
	font-weight: 300;
}

/* ---------------------------------------------------------------------------
   Footer columns 3 and 4 are real widgets (blog list, nav menu). These rules
   bring them into line with the hand-set type in columns 1 and 2: 16px muted
   headings, 14px white body copy. Scoped by the footer id, which outranks the
   theme's class-only rules, so no !important is required. Nothing here is tied
   to a widget instance id, so rebuilding a widget will not break it.
   --------------------------------------------------------------------------- */

/* =========================================================================
   FOOTER COLUMN BALANCE

   The theme lays the footer out as four equal 254px cells with a 30px gap.
   Those cells are already evenly spaced; the imbalance is the content inside
   them. Column 1 fills its cell (249 of 254px) while column 4 uses a third
   (84 of 254px), stranding ~170px of dead air against the right edge and
   making the row read left-heavy.

   Per-column margin indents cannot fix this. The theme sets
   `#qodef-page-footer-top-area .widget:not(.widget_leroux_core_title_widget)
   { margin: 0 0 20px }` in leroux/assets/css/main.min.css, which scores
   (1,2,0) because :not() contributes its argument. Any rule of the form
   `#qodef-page-footer [data-area="..."]` scores (1,1,0) and silently loses.

   So size the tracks to their content instead and let the row distribute the
   slack: column 1 flush left, column 4 flush right, equal gutters between.
   Column 1 stays pinned at 250px so the tagline keeps its wrap; the others
   shrink to content, capped at the theme's 254px so nothing can grow. This
   re-balances on its own if the menu labels ever change.

   Desktop only -- the --1024--2 / --768--2 / --680--1 stacking is untouched.

   Scoping matters: .qodef-grid-inner is NOT unique to this row -- the
   blog-list widget in column 3 uses the same class for its own post list. A
   descendant selector reaches inside it and flexes the Toolbox posts into a
   horizontal row that overlaps the Menu. Match the direct child chain only,
   so these rules stop at the footer row and never enter a widget.
   ========================================================================= */
@media (min-width: 1025px) {
	#qodef-page-footer-top-area .qodef-content-full-width > .qodef-grid > .qodef-grid-inner {
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		column-gap: 30px;
	}

	/* Basis must be max-content, not auto: the theme gives .qodef-grid-item a
	   full-width `width`, so an `auto` basis resolves to the whole row and the
	   max-width below just clamps it straight back to 254px, leaving no slack
	   for space-between to distribute. */
	#qodef-page-footer-top-area .qodef-content-full-width > .qodef-grid > .qodef-grid-inner > .qodef-grid-item {
		flex: 0 1 max-content;
		max-width: 254px;
	}

	#qodef-page-footer-top-area .qodef-content-full-width > .qodef-grid > .qodef-grid-inner > .qodef-grid-item:first-child {
		flex: 0 0 250px;
	}

	/* -----------------------------------------------------------------------
	   VERTICAL FILL -- columns 2 and 3 run down to the bottom of column 1.

	   Column 1 (logo, tagline, Contact Us, phone) is the tallest, so it sets
	   the row height. The two middle columns stopped short, leaving the row
	   bottom-ragged. Rather than pad by a fixed amount, they stretch to the
	   row and let their own slack open up, so the alignment survives any edit
	   to the identity block above.

	   margin-bottom is zeroed because the theme's 20px on .widget would push
	   these past the stretched cell. Matching (1,2,0) beats the theme rule
	   `#qodef-page-footer-top-area .widget:not(.widget_leroux_core_title_widget)`.
	   ----------------------------------------------------------------------- */
	#qodef-page-footer-top-area .widget[data-area="qodef-footer-top-area-column-2"],
	#qodef-page-footer-top-area .widget[data-area="qodef-footer-top-area-column-3"] {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin-bottom: 0;
	}

	/* Column 2: the hours block takes the slack, so the gap opens between
	   "Sunday: Closed" and "Our address:". Growing this child rather than
	   pushing the address down avoids fighting the inline margin-top:28px on
	   the address wrapper, which no stylesheet rule could win without
	   !important. */
	#qodef-page-footer-top-area .widget[data-area="qodef-footer-top-area-column-2"] > .ohsec-footer-col {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	#qodef-page-footer-top-area .widget[data-area="qodef-footer-top-area-column-2"] > .ohsec-footer-col > div:nth-of-type(1) {
		flex: 1 0 auto;
	}

	/* Column 3: the post list fills the space below the "Toolbox talks" title
	   and spreads the three articles down it. flex-direction MUST stay column
	   -- this is the widget's own nested .qodef-grid-inner, and a row here is
	   what threw the posts sideways across the Menu. */
	#qodef-page-footer-top-area .widget[data-area="qodef-footer-top-area-column-3"] > .qodef-blog {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
	}

	#qodef-page-footer-top-area .widget[data-area="qodef-footer-top-area-column-3"] > .qodef-blog > .qodef-grid-inner {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1 1 auto;
	}
}

/* Widget titles ("Toolbox talks", "Menu") match the hand-set muted headings in
   columns 1 and 2. The selector must carry two classes: the theme sets
   `#qodef-page-footer-top-area .widget .qodef-widget-title { color:#fff }` at
   (1,2,0) in leroux/assets/css/main.min.css, so a `#qodef-page-footer
   .qodef-widget-title` rule at (1,1,0) loses and the titles stay white.
   Matching (1,2,0) here wins on load order, with no !important. */
#qodef-page-footer-top-area .widget .qodef-widget-title {
	font-size: 16px;
	line-height: 1.2;
	color: #85979b;
	margin: 0 0 10px;
}

/* Column 4: Main Menu */
#qodef-page-footer .widget_nav_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#qodef-page-footer .widget_nav_menu li {
	margin: 0 0 16px;
}

#qodef-page-footer .widget_nav_menu li:last-child {
	margin-bottom: 0;
}

#qodef-page-footer .widget_nav_menu a {
	font-size: 14px;
	line-height: 1.2;
	color: #fff;
}

/* Column 3: latest posts. The theme fixes the media column at 120px wide
   whatever the thumbnail size, leaving dead space beside a 60px image. Pin the
   container, the image and the content track together so the gap is the 14px
   stated here and nothing else. */
#qodef-page-footer .qodef-blog.qodef-item-layout--side-by-side article .qodef-e-media {
	flex: 0 0 60px;
	width: 60px;
	margin-right: 14px;
}

#qodef-page-footer .qodef-blog.qodef-item-layout--side-by-side article .qodef-e-media img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: cover;
}

#qodef-page-footer .qodef-blog.qodef-item-layout--side-by-side article .qodef-e-content {
	flex: 1 1 auto;
	min-width: 0;
}

#qodef-page-footer .qodef-item-layout--side-by-side article .qodef-e-bottom-holder {
	margin-top: 3px;
}

#qodef-page-footer .widget_leroux_core_blog_list .qodef-e-info,
#qodef-page-footer .widget_leroux_core_blog_list .qodef-e-info a {
	font-size: 12px;
	line-height: 1.2;
	color: #85979b;
}

#qodef-page-footer .widget_leroux_core_blog_list .qodef-e-title {
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
}

#qodef-page-footer .widget_leroux_core_blog_list .qodef-e-title a {
	color: #fff;
}

/* ---------------------------------------------------------------------------
   PAGE TOP SPACING

   The theme wraps every page in `#qodef-page-inner { padding: 130px 0 100px }`.
   That 130px stacks on top of the 155px set on each page's opening section in
   Elementor, so the real gap above every page title was 285px, not 155px.

   Zeroing it here means the number in Elementor is the number on screen: one
   standard, 155px, across every page. Scoped to `body.page` so posts, portfolio
   items and archives keep the theme's spacing -- their own rules follow below.
   (1,1,0) outranks the theme's (1,0,0), so no !important.
   --------------------------------------------------------------------------- */
body.page #qodef-page-inner {
	padding-top: 0;
}

/* Portfolio Project Info: the date part renders inside a <p>
   (leroux-core .../portfolio-project-info/templates/parts/date.php) while the
   category and tag parts render inside <div>s. The paragraph therefore picks up
   the theme's bottom margin and the Date row sits lower and taller than the
   rows beneath it. Zero it so all three rows share one baseline. */
.qodef-portfolio-project-info p.entry-date {
	margin: 0;
}

/* Toolbox blog grid (compact layout): match the Case Studies portfolio cards.
   1) category below the title (template order is category > title, so reorder)
   2) title at 18px to match portfolio's H5 (the widget renders it H4/22px)
   Measured live against /case-studies/: title 18px/lh27, gaps 14px & 2px.
   Scoped to compact so the footer's side-by-side list is untouched. */
.qodef-blog.qodef-item-layout--compact .qodef-blog-item .qodef-e-content {
	display: flex;
	flex-direction: column;
	margin-top: 14px;
}
.qodef-blog.qodef-item-layout--compact .qodef-blog-item .qodef-e-text {
	order: 1;
	margin-top: 0;
}
.qodef-blog.qodef-item-layout--compact .qodef-blog-item .qodef-e-top-holder {
	order: 2;
	margin-top: 2px;
}
.qodef-blog.qodef-item-layout--compact .qodef-blog-item .qodef-e-bottom-holder {
	order: 3;
}
.qodef-blog.qodef-item-layout--compact .qodef-blog-item .qodef-e-title,
.qodef-blog.qodef-item-layout--compact .qodef-blog-item .qodef-e-title a {
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
}

/* Centre titles and categories beneath Toolbox and Case Studies grid images. */
.qodef-blog.qodef-item-layout--compact .qodef-blog-item .qodef-e-content,
.qodef-portfolio-list.qodef-item-layout--info-below .qodef-e-content {
	width: 100%;
	text-align: center;
}

/* Frontpage Toolbox preview: the widget there uses the theme's "standard" blog
   layout, not the "compact" one the dedicated /toolbox/ page uses, so the rules
   above never reached it. Result: its cards were left-aligned and ran category
   above title -- the reverse of the Case Studies preview beside it (info-below)
   and of both dedicated pages. Match them here: centre the content and flip the
   order so title sits above category.

   The widget is a Qi Addons for Elementor "Blog List" (.qodef-addons-blog-list),
   a different element from the theme's own .qodef-blog shortcode on /toolbox/ --
   that mismatch is why the existing rules never reached it.

   Scoped to `.home` so this only affects the front page. The "standard" layout
   is the theme's default and is used elsewhere (e.g. any future blog roll), which
   must not be recentred -- keeping this to the front page avoids fixing one place
   and breaking another. Sizes/colours already match the Case Studies cards, so
   only order and alignment are set. */
.home .qodef-addons-blog-list.qodef-item-layout--standard .qodef-e-content {
	display: flex !important;
	flex-direction: column !important;
	text-align: center !important;
}
.home .qodef-addons-blog-list.qodef-item-layout--standard .qodef-e-content .qodef-e-text {
	order: 1 !important;
	margin: 0 !important;
}
.home .qodef-addons-blog-list.qodef-item-layout--standard .qodef-e-content .qodef-e-info {
	order: 2 !important;
	margin: 2px 0 0 !important;
	/* .qodef-e-info is a full-width flex row (Qi main.min.css); text-align can't
	   centre flex children, so centre the row itself. */
	justify-content: center !important;
}
/* Each info item carries margin-right:24px in Qi's CSS, which shoves a single
   centred category 24px off-centre. Remove it so the category sits true centre. */
.home .qodef-addons-blog-list.qodef-item-layout--standard .qodef-e-content .qodef-e-info .qodef-e-info-item {
	margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------
   TOOLBOX GRID WIDTH -- mirror Case Studies (1400px, not Elementor's 1140).

   Case Studies (/case-studies/) runs on the Full Width template with its
   Elementor section content width set to 1400px, so its 3-up grid measures
   1400px (three 420px columns). The Toolbox page (id 11664) sits on the
   default template and its section kept Elementor's default 1140px content
   width, so the identical 3-up grid came out 1140px (three 360px columns) --
   260px narrower and inset. That, not the compact-card rules above, is the
   "condensed" look: nothing in this stylesheet sets card width.

   The Toolbox page is already boxed to 1400px by the body's
   `qodef-content-grid-1400`, and that box lands at the exact left/right edges
   (253 -> 1653 at 1920px) as the Case Studies 1400px container. So capping
   this one section's container at 1400 instead of 1140 makes the two grids
   line up pixel-for-pixel. The page has a single top section (verified), so
   this cannot reach any other row. !important + page scope locks it, so an
   Elementor re-save that resets the section to 1140 cannot narrow it again.
   Gated to desktop; the <1140px fluid range is untouched.
   --------------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.page-id-11664 .elementor-top-section > .elementor-container {
		max-width: 1400px !important;
	}
}

/* Match blog-post entry spacing to the selected portfolio rhythm. */
body.single-post #qodef-page-inner {
	padding-top: 70px;
}

/* OHSEC case study: two-column meta, values aligned in a vertical column.
   Row spacing left to the theme default; only the column alignment is set here. */
.ohsec-case-study .qodef-portfolio-info > .qodef-e {
	display: grid;
	grid-template-columns: 90px 1fr;
	column-gap: 12px;
	align-items: baseline;
}

/* Case studies: replace Leroux's 130px page-top gap beneath the solid header. */
body.single-portfolio-item.qodef-layout--case-study #qodef-page-inner {
	padding-top: 60px;
}

@media (max-width: 1024px) {
	body.single-portfolio-item.qodef-layout--case-study #qodef-page-inner {
		padding-top: 48px;
	}
}

@media (max-width: 680px) {
	body.single-portfolio-item.qodef-layout--case-study #qodef-page-inner {
		padding-top: 36px;
	}
}

/* CS00 masonry display depth. Source attachments remain full size for lightbox. */
.postid-11544 .elementor-element-a1f0110 .qodef-image-wrapper,
.postid-11544 .elementor-element-a1f0110 .qodef-image-wrapper .qodef-e-inner,
.postid-11544 .elementor-element-a1f0110 .qodef-image-wrapper img {
	height: 205px !important;
}
.postid-11544 .elementor-element-a1f0110 .qodef-image-wrapper img {
	object-fit: cover !important;
}

/* 16px gap below the Tags line, separating the native items from ours */
.ohsec-case-study .qodef-portfolio-info > .qodef-info--tag {
	margin-bottom: 16px;
}

/* Share buttons on one line */
.ohsec-case-study .qodef-info--social-share .qodef-shortcode-list {
	display: flex;
	flex-wrap: nowrap;
}

/* 16px gap above the meta block (below the summary) */
.ohsec-case-study .qodef-portfolio-info {
	margin-top: 16px;
}

/* 16px gap below the last meta item, above Share */
.ohsec-case-study .qodef-portfolio-info > .qodef-info--info-items:last-of-type {
	margin-bottom: 0;
}
.ohsec-case-study .qodef-info--social-share .qodef-social-share {
	margin-top: 16px;
}

/* Case study odometer row: Qi counters styled as a centred stat row above the
   opening heading. Scoped to the case study article so no other counters change. */
.ohsec-case-study-article .wp-block-columns {
	align-items: flex-start;
	gap: clamp(16px, 4vw, 56px);
}
.ohsec-case-study-article .wp-block-columns .wp-block-column {
	text-align: center;
}
.ohsec-case-study-article .qi-block-counter {
	text-align: center;
}
.ohsec-case-study-article .qi-block-counter .qodef-m-digit-wrapper {
	justify-content: center;
}
.ohsec-case-study-article .qi-block-counter .qodef-m-digit {
	font-size: clamp(42px, 7vw, 72px);
	font-weight: 500;
	line-height: 1;
}
.ohsec-case-study-article .qi-block-counter .qodef-m-title {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Stack to two-up on small screens rather than shrinking to a thin column */
@media (max-width: 600px) {
	.ohsec-case-study-article .wp-block-columns {
		flex-wrap: wrap;
	}
	.ohsec-case-study-article .wp-block-columns .wp-block-column {
		flex-basis: 40% !important;
	}
}

/* CS00 Elementor clone: equal-width counter blocks with equal gaps. */
@media (min-width: 1025px) {
	.postid-11544 .ohsec-case-study-article .elementor-element-3d0538e {
		display: flex !important;
		flex-direction: row !important;
		justify-content: space-between !important;
		align-items: start !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.postid-11544 .ohsec-case-study-article .elementor-element-3d0538e > .e-con {
		position: static !important;
		flex: 0 0 160px !important;
		width: 160px !important;
		max-width: 160px !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.postid-11544 .ohsec-case-study-article .elementor-element-3d0538e .elementor-widget-qi_addons_for_elementor_counter,
	.postid-11544 .ohsec-case-study-article .elementor-element-3d0538e .qodef-m-title {
		width: 100% !important;
		text-align: center !important;
	}
	.postid-11544 .ohsec-case-study-article .elementor-element-3d0538e .qodef-m-digit-wrapper {
		width: 100% !important;
		justify-content: center !important;
	}
}


/* Profile timeline: widen the timeline by reducing its desktop left inset. */
@media (min-width: 1025px) {
	.page-id-7516 .elementor-element-0d7c8d4 > .elementor-widget-wrap {
		padding-left: 10% !important;
	}
}

/* Editable WordPress attachment captions appear in fsLightbox only. */
.fslightbox-container .ohsec-fslightbox-caption {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 4vh, 48px);
	z-index: 5;
	width: min(920px, calc(100vw - 120px));
	transform: translateX(-50%);
	padding: 14px 18px;
	border-radius: 2px;
	background: rgba(18, 31, 35, 0.88);
	color: #fff;
	font-size: clamp(14px, 1.2vw, 18px);
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	pointer-events: none;
}

@media (max-width: 680px) {
	.fslightbox-container .ohsec-fslightbox-caption {
		bottom: 16px;
		width: calc(100vw - 32px);
		padding: 11px 13px;
		font-size: 13px;
		line-height: 1.4;
	}
}

/* ---------------------------------------------------------------------------
   TOOLBOX SINGLE CONTROLLER

   These rules are category-driven through the `ohsec-toolbox-single` body
   class added in functions.php. They therefore apply to the seven existing
   articles and to every future post filed beneath the Toolbox category.
   --------------------------------------------------------------------------- */

/* A slightly narrower reading grid plus a deliberate content/sidebar gutter. */
@media (min-width: 1441px) {
	body.ohsec-toolbox-single #qodef-page-inner.qodef-content-grid {
		width: 1300px;
	}
}

@media (min-width: 1025px) {
	body.ohsec-toolbox-single #qodef-page-content.qodef-layout--template {
		--qode-columns-col-gap: 60px;
	}
}

@media (min-width: 1441px) {
	body.ohsec-toolbox-single #qodef-page-content.qodef-layout--template {
		--qode-columns-col-gap: 80px;
	}
}

/* Restore true hanging indents; Leroux's global list reset uses `inside`. */
body.ohsec-toolbox-single .ohsec-toolbox-article ul,
body.ohsec-toolbox-single .ohsec-toolbox-article ol {
	list-style-position: outside;
	margin: 18px 0 24px;
	padding-inline-start: 1.45rem;
}

body.ohsec-toolbox-single .ohsec-toolbox-article li {
	margin: 0 0 8px;
	padding-inline-start: 0.35rem;
}

body.ohsec-toolbox-single .ohsec-toolbox-article li:last-child {
	margin-bottom: 0;
}

body.ohsec-toolbox-single .ohsec-toolbox-article li::marker {
	color: #69797d;
}

body.ohsec-toolbox-single .ohsec-toolbox-article li > ul,
body.ohsec-toolbox-single .ohsec-toolbox-article li > ol {
	margin: 8px 0 0;
}

/* Long statutory sets remain lists, but no longer read as a numbered wall. */
@media (min-width: 1201px) {
	body.ohsec-toolbox-single .ohsec-toolbox-article .ohsec-list--statutory {
		columns: 2;
		column-gap: 34px;
	}

	body.ohsec-toolbox-single .ohsec-toolbox-article .ohsec-list--statutory > li {
		break-inside: avoid;
	}
}

/* Existing OHSEC Zebra template palette, with the site body font and a useful
   first-column measure. The wrapper supplies safe horizontal overflow. */
body.ohsec-toolbox-single .ohsec-table-wrap {
	width: 100%;
	margin: 18px 0 24px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body.ohsec-toolbox-single table.ohsec-table {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-family: "Heebo", sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

body.ohsec-toolbox-single table.ohsec-table tr {
	border: 0;
}

body.ohsec-toolbox-single table.ohsec-table th {
	padding: 13px 15px;
	border: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	background: #223035;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.35;
	text-align: left;
	text-transform: uppercase;
	vertical-align: bottom;
}

body.ohsec-toolbox-single table.ohsec-table td {
	padding: 12px 15px;
	border: 0;
	vertical-align: top;
}

body.ohsec-toolbox-single table.ohsec-table th:first-child,
body.ohsec-toolbox-single table.ohsec-table td:first-child {
	width: 38%;
	font-weight: 700;
}

body.ohsec-toolbox-single table.ohsec-table tbody tr:nth-child(odd) {
	background: #afc1c5;
	color: #223035;
}

body.ohsec-toolbox-single table.ohsec-table tbody tr:nth-child(odd) td {
	border-right: 1px solid rgba(34, 48, 53, 0.16);
}

body.ohsec-toolbox-single table.ohsec-table tbody tr:nth-child(even) {
	background: #69797d;
	color: #fff;
}

body.ohsec-toolbox-single table.ohsec-table tbody tr:nth-child(even) td {
	border-right: 1px solid rgba(255, 255, 255, 0.28);
}

body.ohsec-toolbox-single table.ohsec-table th:last-child,
body.ohsec-toolbox-single table.ohsec-table td:last-child {
	border-right: 0;
}

/* Compact the shared sidebar without changing its contents or back-to-top UI. */
body.ohsec-toolbox-single #qodef-page-sidebar .widget:not(.widget_leroux_core_title_widget) {
	margin-bottom: 12px;
}

body.ohsec-toolbox-single #qodef-page-sidebar .widget_leroux_core_separator {
	margin-bottom: 0;
}

body.ohsec-toolbox-single #qodef-page-sidebar .widget_leroux_core_separator .qodef-m-line {
	margin-bottom: 22px !important;
}

body.ohsec-toolbox-single #qodef-page-sidebar .widget_leroux_core_title_widget .qodef-widget-title {
	margin-bottom: 12px !important;
	font-size: 20px;
	line-height: 1.3;
}

body.ohsec-toolbox-single #qodef-page-sidebar .wp-block-categories-list li {
	margin-bottom: 5px !important;
	font-size: 15px;
	line-height: 1.5;
}

body.ohsec-toolbox-single #qodef-page-sidebar .qodef-search-form-field {
	font-family: "Heebo", sans-serif;
	font-size: 15px;
}

/* Five compact, high-density Latest Posts items. The PHP controller requests
   a 2x crop while these rules retain the intended on-screen dimensions. */
body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts > .qodef-grid-inner {
	row-gap: 16px;
}

body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts article .qodef-e-media {
	width: 112px !important;
	margin-right: 16px;
}

body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts article .qodef-e-media img {
	display: block;
	width: 112px;
	height: 98px;
	object-fit: cover;
}

body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts article .qodef-e-content {
	min-width: 0;
}

body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts article .qodef-e-info,
body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts article .entry-date {
	font-family: "Heebo", sans-serif;
	font-size: 13px;
	line-height: 1.4;
}

body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts article .qodef-e-title {
	font-size: 16px;
	line-height: 1.35;
}

body.ohsec-toolbox-single #qodef-page-sidebar .ohsec-toolbox-latest-posts article .qodef-e-bottom-holder {
	margin-top: 5px;
}

@media (max-width: 680px) {
	body.ohsec-toolbox-single table.ohsec-table {
		font-size: 14px;
	}

	body.ohsec-toolbox-single table.ohsec-table th,
	body.ohsec-toolbox-single table.ohsec-table td {
		padding: 10px 12px;
	}
}

/* Centre the "View all" buttons under the Case Studies (portfolio) and
   Toolbox (blog) sections. The button widget carries elementor-widget__width-auto,
   so it shrinks to content and pins left. Force it full width and centre the
   button inside. Scoped by the archive link targets so nothing else moves. */
.elementor-widget-leroux_core_button:has(a.qodef-button[href$="/case-studies/"]),
.elementor-widget-leroux_core_button:has(a.qodef-button[href$="/toolbox/"]) {
	width: 100%;
	max-width: 100%;
	text-align: center;
	padding-top: 40px;
}

.elementor-widget-leroux_core_button:has(a.qodef-button[href$="/case-studies/"]) > .elementor-widget-container > a.qodef-button,
.elementor-widget-leroux_core_button:has(a.qodef-button[href$="/toolbox/"]) > .elementor-widget-container > a.qodef-button {
	margin-left: auto;
	margin-right: auto;
}