/* =========================================================================
   Ad slots (2026-07-27)
   Universal placeholder / house / AdSense slot component.

   Deliberately standalone rather than part of blog-redesign.css: that sheet
   only loads on is_home() || is_archive() || is_singular('post'), so it is
   absent on salon detail pages and page templates, which is where most of
   these slots live.

   Values below replicate the rendered blog rail placeholders
   (.sb-ad--block / .sb-ad--info) as they actually compute on the live site,
   not as the raw source reads: later cascade rules in blog-redesign.css win.
   ========================================================================= */

.sid-adslot {
	display: flex;
	justify-content: center;
	margin: 32px 0;
}

.sid-adslot__box {
	/* width + min-height are set per slot by an inline <style> in the template
	   part, so each slot reserves exactly its ad size and nothing shifts when
	   the mode changes. */
	max-width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 0;
	text-align: center;
	overflow: hidden;
}

/* Rectangle and tall slots: white card with copy, matching .sb-ad--info. */
.sid-adslot__box--info {
	background: #fff;
	padding: 24px 20px;
}

/* Short leaderboard slots: grey block with the CTA only, matching .sb-ad--block. */
.sid-adslot__box--block {
	padding: 12px 16px;
}

.sid-adslot__title {
	margin: 0;
	font-family: var(--sid-font-display, Georgia, "Times New Roman", serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: #1d1d1f;
}

.sid-adslot__body {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #5f6368;
	max-width: 42ch;
}

.sid-adslot__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	height: 54px;
	padding: 0 20px;
	background: #fff;
	color: #5f6368;
	border: 1px solid #dadce0;
	border-radius: 4px;
	font-family: var(--sid-font-body, "Mulish", Arial, sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sid-adslot__btn:hover,
.sid-adslot__btn:focus {
	background: #f5f5f5;
	border-color: #c9ccd1;
	color: #1d1d1f;
	text-decoration: none;
}

.sid-adslot__btn:focus-visible {
	outline: 2px solid var(--sid-color-primary, #af4955);
	outline-offset: 2px;
}

/* An advertiser creative or a live AdSense unit fills the reserved box edge to
   edge, with none of the placeholder chrome. Driven by a class on the wrapper
   rather than :has(), so support is universal.

   Creatives are shown WHOLE: no border-radius and no overflow clipping anywhere
   in the chain. An advertiser supplies artwork at an exact size and it must
   render exactly, corners included. Any rounding you still see is drawn into
   the creative file itself, not applied here. */
.sid-adslot--filled .sid-adslot__box {
	background: transparent;
	border: 0;
	padding: 0;
	gap: 0;
	border-radius: 0;
	overflow: visible;
}

.sid-adslot--filled .sid-adslot__house,
.sid-adslot--filled .sid-adslot__house img,
.sid-adslot--filled picture,
.sid-adslot--filled img,
.sid-adslot--filled .sid-adslot__ins {
	border-radius: 0;
	overflow: visible;
	clip-path: none;
	-webkit-mask-image: none;
	mask-image: none;
}

.sid-adslot__house {
	display: block;
	line-height: 0;
}

.sid-adslot__house img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   Blog article rails: scroll through, then pin at the bottom (2026-07-28)

   blog-redesign.css:885 sets `.sb-single__rail { position: sticky; top: 96px }`.
   Pinning at the TOP freezes the rail as soon as you scroll, so anything below
   the fold inside it is permanently unreachable: the Table of Contents on the
   left (it sits under the ad block) and the second ad block on the right.

   `top: auto; bottom: X` inverts it. The rail now scrolls up with the page,
   revealing its lower content, and pins only once its BOTTOM edge reaches the
   viewport bottom.

   This override lives here rather than in blog-redesign.css because the site
   serves the MINIFIED blog-redesign.min.css; editing the source alone is a
   silent no-op. This file is enqueued at priority 20, so it loads after the
   blog sheet and wins at equal specificity.

   REVISED 2026-07-28 (second attempt). `bottom: 24px` on the whole rail read as
   "not sticky at all", because a rail taller than the viewport pins only once
   its bottom edge arrives, which is most of the way down the article.

   Correct pattern: do not stick the RAIL, stick the BLOCK that must stay in
   view. The rail becomes a full-height track (align-self: stretch, so the
   sticky child has room to travel the length of the article), the top ad
   scrolls away as normal, and the Table of Contents (left) plus the lower ad
   (right) pin under the header and stay there.

   REVISED AGAIN 2026-07-28 (third attempt, and the reason the second failed).
   Making `.sb-toc` and `.sb-ad--info` sticky did nothing, because a sticky
   element can only travel inside its CONTAINING BLOCK, and theirs is
   `.sb-single__rail-inner`, which is auto-height. Stretching the outer <aside>
   did not stretch that inner div, so both children had ~0px of travel and
   simply scrolled away with it. Both rails ended up empty.

   Approach that cannot lose content: pin the rail BODY itself, and cap it to
   the viewport with its own scroll. Whatever the rail contains, it stays on
   screen; if it is taller than the viewport, it scrolls internally instead of
   disappearing. No dependency on the height of any inner wrapper.
   ========================================================================= */
@media (min-width: 1200px) {
	/* Rails widen 286px -> 300px so the two standard sizes with the deepest
	   advertiser demand (300x600 and 300x250) fit exactly. At 286px both would
	   overflow their reserved box by 14px. */
	.sb-single__container {
		grid-template-columns: 300px minmax(0, 1fr) 300px;
	}

	/* The <aside> becomes a full-height track so the sticky body can travel. */
	.sb-single__rail {
		position: static;
		align-self: stretch;
	}

	/* The rail body pins under the header and stays for the whole article.
	   max-height + overflow keep a tall rail reachable rather than clipped. */
	/* FOURTH approach, and the first that is not pure CSS. `top` is computed and
	   written inline by assets/js/rail-sticky.js:
	     rail fits the screen  -> top: 96px, pins under the header
	     rail taller           -> top: viewportHeight - railHeight - 24, so it
	                              scrolls up and pins with its BOTTOM edge on
	                              screen, which is the requested behaviour.
	   No max-height and no overflow here on purpose: the height cap is what put
	   a scrollbar inside the rail and clipped its lower content. The 96px below
	   is only a fallback for the moment before JS runs, and for no-JS. */
	.sb-single__rail-inner {
		position: sticky;
		top: 96px;
	}

	/* Neutralise the second attempt: these are now inside a scrolling container
	   and must not add a second layer of sticky. */
	.sb-single__rail--left .sb-toc,
	.sb-single__rail--right .sb-ad--info {
		position: static;
		max-height: none;
		overflow: visible;
	}
}

/* In-feed banners injected into the salon grid span the whole row, whatever the
   column count is at that breakpoint (1 / 2 / 3 / 4 across the breakpoints). */
.salon_archive_container > .sid-infeed {
	grid-column: 1 / -1;
	margin: 8px 0;
}

/* Admin "View" preview: outlines and labels one slot so it is findable on a long
   page. Only ever rendered for logged-in administrators. */
.sid-adslot--highlight {
	position: relative;
	scroll-margin-top: 120px;
}

.sid-adslot--highlight .sid-adslot__box {
	outline: 3px solid #af4955;
	outline-offset: 4px;
}

.sid-adslot__tag {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	background: #af4955;
	color: #fff;
	font-family: var(--sid-font-body, "Mulish", Arial, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 4px 10px;
	border-radius: 3px;
}

/* Slots with no mobile size defined (e.g. the 300x600 rail unit) drop out
   entirely below the lg breakpoint rather than squeezing. */
@media (max-width: 991px) {
	.sid-adslot--desktop-only {
		display: none;
	}
}

/* The inverse: slots that exist only on small screens, e.g. the compact unit
   above the collapsible mobile Table of Contents. */
@media (min-width: 992px) {
	.sid-adslot--mobile-only {
		display: none;
	}
}

@media (max-width: 767px) {
	.sid-adslot {
		margin: 24px 0;
	}

	.sid-adslot__box--info {
		padding: 20px 16px;
	}

	.sid-adslot__title {
		font-size: 16px;
	}
}

/* The 320x50 mobile unit above the Table of Contents is the smallest slot on the
   site and sits directly above a navigation aid, so it must not exceed its
   reserved height. The default 54px button plus block padding pushed the box to
   80px; compact both so the placeholder fits the 50px box it reserves. */
.sid-adslot--b5 .sid-adslot__box--block {
	padding: 0 8px;
}

.sid-adslot--b5 .sid-adslot__btn {
	height: 40px;
	font-size: 12px;
	padding: 0 14px;
}