/* TopWorkBoot Sidebar. Colors match the TopWorkBoot Site Builder theme layer. */
.twbs {
	--twbs-ink: #1b1a17;
	--twbs-ink-2: #2a2825;
	--twbs-text: #3a3833;
	--twbs-muted: #6b665c;
	--twbs-paper: #f4efe6;
	--twbs-paper-2: #e8e0d1;
	--twbs-line: #d6ccb9;
	--twbs-orange: #d9531e;
	--twbs-orange-dk: #b4421a;
	--twbs-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--twbs-body: 'Barlow', 'Helvetica Neue', sans-serif;
	display: flex;
	flex-direction: column;
	gap: 28px;
	font-family: var(--twbs-body);
	color: var(--twbs-text);
	height: 100%;
}
.twbs *, .twbs-picks--inline * { box-sizing: border-box; }

/* Reset Astra widget chrome around our widget */
#secondary .widget_twbs_widget, .ast-separate-container #secondary .widget_twbs_widget { background: transparent; padding: 0; margin: 0; border: 0; box-shadow: none; height: 100%; }
.twbs-on #secondary { align-self: stretch; }
.twbs-on #secondary .sidebar-main { height: 100%; background: transparent; padding: 0; }
.ast-separate-container.twbs-on #secondary .sidebar-main { padding: 0; }

/* Block shell */
.twbs-block { background: #fff; border: 1px solid var(--twbs-line); border-top: 4px solid var(--twbs-ink); padding: 20px 20px 22px; margin: 0; }
.twbs-head { margin: 0 0 14px; }
.twbs .twbs-eyebrow, .twbs-picks--inline .twbs-eyebrow { font-family: var(--twbs-head); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: 13px; line-height: 1.2; color: var(--twbs-orange-dk); margin: 0 0 4px; }
.twbs .twbs-title, .twbs-picks--inline .twbs-title { font-family: var(--twbs-head); font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1; letter-spacing: .01em; color: var(--twbs-ink); margin: 0; padding: 0; border: 0; }
.twbs ul, .twbs ol, .twbs-picks--inline ul { list-style: none; margin: 0; padding: 0; }
.twbs li, .twbs-picks--inline li { margin: 0; padding: 0; }
.twbs li::marker, .twbs-picks--inline li::marker { content: none; }
.twbs a, .twbs-picks--inline a { text-decoration: none; }

/* Placeholder until a featured image is added */
.twbs-ph { display: flex; width: 100%; height: 100%; align-items: flex-end; justify-content: flex-end; padding: 8px 10px; background: repeating-linear-gradient(-45deg, #24221f 0 10px, var(--twbs-ink) 10px 20px); }
.twbs-ph span { font-family: var(--twbs-head); font-weight: 800; font-size: 30px; line-height: 1; color: var(--twbs-orange); }

/* Top picks */
.twbs-picklist { display: flex; flex-direction: column; gap: 0; }
.twbs-pick a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--twbs-line); color: var(--twbs-ink); }
.twbs-pick:first-child a { border-top: 0; padding-top: 0; }
.twbs-pick__img { display: block; width: 76px; height: 76px; overflow: hidden; background: var(--twbs-ink); }
.twbs-pick__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.twbs-pick__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.twbs-pick__meta { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--twbs-muted); display: flex; align-items: center; gap: 8px; }
.twbs-pick__num { font-family: var(--twbs-head); font-weight: 800; font-size: 13px; color: #fff; background: var(--twbs-orange); padding: 2px 6px; letter-spacing: .06em; }
.twbs-pick__title { font-family: var(--twbs-head); font-weight: 700; font-size: 19px; line-height: 1.1; color: var(--twbs-ink); text-wrap: balance; transition: color .15s; }
.twbs-pick__cta { font-family: var(--twbs-head); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; color: var(--twbs-orange-dk); }
.twbs-pick a:hover .twbs-pick__title, .twbs-pick a:focus-visible .twbs-pick__title { color: var(--twbs-orange-dk); }
.twbs-pick a:hover img { transform: scale(1.05); }
.twbs-pick a:focus-visible { outline: 3px solid var(--twbs-orange); outline-offset: 2px; }

/* Lead pick: full-width image card */
.twbs-pick--lead a { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 0 14px; }
.twbs-pick--lead .twbs-pick__img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.twbs-pick--lead .twbs-pick__body { background: var(--twbs-ink); padding: 14px 16px 16px; gap: 6px; }
.twbs-pick--lead .twbs-pick__meta { color: #c9c1b2; }
.twbs-pick--lead .twbs-pick__title { color: #fff; font-size: 23px; }
.twbs-pick--lead .twbs-pick__cta { color: var(--twbs-orange); }
.twbs-pick--lead a:hover .twbs-pick__title { color: var(--twbs-orange); }
.twbs-pick--lead .twbs-ph span { font-size: 56px; }

/* Topics */
.twbs-topiclist { display: flex; flex-direction: column; }
.twbs-topiclist a { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--twbs-line); color: var(--twbs-ink); }
.twbs-topiclist li:first-child a { border-top: 0; }
.twbs-topic__num { font-family: var(--twbs-head); font-weight: 800; font-size: 14px; color: var(--twbs-orange-dk); letter-spacing: .06em; }
.twbs-topic__name { font-family: var(--twbs-head); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 17px; }
.twbs-topic__count { font-size: 13px; font-weight: 600; color: var(--twbs-muted); background: var(--twbs-paper); min-width: 28px; text-align: center; padding: 2px 6px; }
.twbs-topiclist a:hover .twbs-topic__name, .twbs-topiclist a[aria-current] .twbs-topic__name { color: var(--twbs-orange-dk); }
.twbs-topiclist a[aria-current] { box-shadow: inset 3px 0 0 var(--twbs-orange); padding-left: 10px; }
.twbs-topiclist a:focus-visible { outline: 3px solid var(--twbs-orange); outline-offset: 2px; }

/* Popular */
.twbs-poplist { counter-reset: twbs; display: flex; flex-direction: column; }
.twbs-poplist li { counter-increment: twbs; }
.twbs-poplist a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--twbs-line); color: var(--twbs-ink); font-size: 16px; font-weight: 500; line-height: 1.35; }
.twbs-poplist li:first-child a { border-top: 0; padding-top: 0; }
.twbs-poplist a::before { content: counter(twbs, decimal-leading-zero); font-family: var(--twbs-head); font-weight: 800; font-size: 24px; line-height: 1; color: var(--twbs-orange); }
.twbs-poplist a:hover { color: var(--twbs-orange-dk); }
.twbs-poplist a:focus-visible { outline: 3px solid var(--twbs-orange); outline-offset: 2px; }

/* Boot Finder card (sticky on desktop) */
.twbs-sticky { flex: 1; min-height: 0; }
.twbs-finder { background: var(--twbs-ink); border: 0; color: #d4ccbd; position: relative; overflow: hidden; padding-top: 30px; }
.twbs-finder::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, var(--twbs-orange) 0 12px, var(--twbs-ink) 12px 24px); }
.twbs .twbs-finder .twbs-eyebrow { color: var(--twbs-orange); }
.twbs .twbs-finder .twbs-title { color: #fff; font-size: 30px; }
.twbs-finder__text { font-size: 16px; line-height: 1.5; margin: 10px 0 14px; color: #d4ccbd; }
.twbs .twbs-finder__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0 0 16px; counter-reset: twbsf; }
.twbs-finder__steps li { counter-increment: twbsf; font-family: var(--twbs-head); font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: #a79f90; text-align: center; border-top: 3px solid #3a3833; padding-top: 6px; }
.twbs-finder__steps li::before { content: counter(twbsf); display: block; font-size: 16px; color: #fff; }
.twbs .twbs-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; background: var(--twbs-orange); color: #fff; font-family: var(--twbs-head); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .06em; transition: background .15s; }
.twbs .twbs-btn:hover { background: #fff; color: var(--twbs-ink); }
.twbs .twbs-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (min-width: 922px) {
	.twbs-sticky .twbs-finder { position: sticky; top: 24px; }
	.admin-bar .twbs-sticky .twbs-finder { top: 56px; }
	.ast-sticky-active .twbs-sticky .twbs-finder, .ast-header-sticked .twbs-sticky .twbs-finder { top: 100px; }
	/* In-article carousel is mobile/tablet only */
	.twbs-picks--inline { display: none; }
}

/* Tablet and mobile: Astra stacks the sidebar below the article */
@media (max-width: 921px) {
	.twbs-on #secondary { margin-top: 40px; padding-top: 32px; border-top: 3px solid var(--twbs-ink, #1b1a17); }
	.twbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; height: auto; }
	.twbs > .twbs-picks, .twbs > .twbs-sticky { grid-column: 1 / -1; }
	.twbs-sticky { flex: none; }
	/* Picks become a 2-up image grid */
	.twbs-picks--side .twbs-picklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.twbs-picks--side .twbs-pick a, .twbs-picks--side .twbs-pick--lead a { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; border: 0; }
	.twbs-picks--side .twbs-pick__img, .twbs-picks--side .twbs-pick--lead .twbs-pick__img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
	.twbs-picks--side .twbs-pick--lead .twbs-pick__body { background: none; padding: 0; }
	.twbs-picks--side .twbs-pick--lead .twbs-pick__title { color: var(--twbs-ink); font-size: 19px; }
	.twbs-picks--side .twbs-pick--lead .twbs-pick__meta { color: var(--twbs-muted); }
	.twbs-picks--side .twbs-pick--lead .twbs-pick__cta { display: none; }
	.twbs-picks--side .twbs-ph span, .twbs-picks--side .twbs-pick--lead .twbs-ph span { font-size: 40px; }
}
@media (max-width: 600px) {
	.twbs { grid-template-columns: minmax(0, 1fr); }
	.twbs-block { padding: 18px 16px 20px; }
	.twbs .twbs-title { font-size: 24px; }
	.twbs-pick__title { font-size: 17px; }
}

/* In-article "Top picks" swipe row (phones and tablets) */
.twbs-picks--inline { background: var(--twbs-paper-2, #e8e0d1); border: 0; border-top: 4px solid var(--twbs-ink, #1b1a17); padding: 18px 0 18px 18px; margin: 28px 0; font-family: 'Barlow', sans-serif; --twbs-ink: #1b1a17; --twbs-muted: #6b665c; --twbs-orange: #d9531e; --twbs-orange-dk: #b4421a; --twbs-line: #d6ccb9; --twbs-head: 'Barlow Condensed', 'Arial Narrow', sans-serif; }
.twbs-picks--inline .twbs-head { padding-right: 18px; }
.twbs-picks--inline .twbs-picklist { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 18px 8px 0; scrollbar-width: thin; }
.twbs-picks--inline .twbs-pick { flex: 0 0 72%; max-width: 280px; scroll-snap-align: start; }
.twbs-picks--inline .twbs-pick a { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border: 0; background: #fff; height: 100%; align-items: stretch; }
.twbs-picks--inline .twbs-pick__img { width: 100%; height: auto; aspect-ratio: 16 / 10; }
.twbs-picks--inline .twbs-pick__body { padding: 12px 14px 14px; }
.twbs-picks--inline .twbs-pick__title { font-size: 19px; }
.twbs-picks--inline .twbs-ph span { font-size: 44px; }