/**
 * bstg-content.css
 *
 * Theme-level presentation fixes for content that the theme itself does not style:
 * wide tables in post_content, the FAQ accordion rendered by inc/schema/faq.php,
 * and anchor targets landing under the fixed header.
 *
 * Enqueued from functions.php as handle "bstg-content", dependent on "bp-style"
 * so it always cascades after the main stylesheet.
 *
 * Specificity note: inc/schema/faq.php prints its "bstg-faq-css" style block at
 * wp_head priority 20, i.e. AFTER this file's <link>. Every FAQ override below
 * therefore carries an extra class (.entry-content .bstg-faq ...) so it wins on
 * specificity rather than on source order. Do not "simplify" those selectors.
 *
 * @since 2026-08-29
 */

/* ---------------------------------------------------------------------------
 * 1. Wide tables in content.
 *
 * Pattern copied from figure.wp-block-table (core block library), which already
 * scrolls a 570px table inside a 390px viewport on /best-it-companies-in-los-angeles/.
 * js/bstg-table-scroll.js wraps every unwrapped .entry-content table in
 * div.bstg-table-scroll; the media query below is the no-JS fallback.
 * ------------------------------------------------------------------------- */

.bstg-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 24px;
}

.bstg-table-scroll > table {
	margin-bottom: 0;
}

/* Core's own wrapper, in case the block CSS is ever dequeued. */
.entry-content figure.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 960px) {

	/* No-JS fallback: make the table itself the scroll container. Overridden
	   immediately below once the wrapper exists, so the two never stack. */
	.entry-content table,
	.comment-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.bstg-table-scroll > table,
	.wp-block-table > table {
		display: table;
		width: 100%;
		overflow-x: visible;
	}
}

/* ---------------------------------------------------------------------------
 * 1b. Replaced-element overflow guard.
 *
 * Some pages carry inline <div style="display:flex"> author-bio rows holding two
 * 400x400 headshots (e.g. /managed-it-services-cost/). Flex items default to
 * min-width:auto, i.e. their min-content size, so max-width:100% never gets a
 * chance and the pair forces the layout viewport open. min-width:0 is inert for
 * block and inline images and only takes effect inside a flex or grid container.
 * The markup itself lives in post_content and is not ours to edit.
 * ------------------------------------------------------------------------- */

.entry-content img,
.entry-content iframe,
.entry-content video,
.entry-content svg {
	min-width: 0;
}

.entry-content img {
	max-width: 100%;
	height: auto;
}

/* style.css:1484 gives the award badges margin:12px on top of max-width:100%,
   so a full-width badge is 24px wider than its column and pushes the layout
   viewport out by ~9px at 390. Subtract the margin from the cap. */
#areas-awards .entry-content img {
	max-width: calc(100% - 24px);
}

/* ---------------------------------------------------------------------------
 * 2. FAQ accordion affordance.
 *
 * inc/schema/faq.php hides the native disclosure marker and sets the question
 * heading to display:inline (which discards its margin). Markup is
 * details.bstg-faq__item > summary.bstg-faq__q > hN, then div.bstg-faq__a.
 * Items ship with the open attribute and stay open: answers remain visible to
 * readers and crawlers. Answer typography is deliberately untouched.
 * ------------------------------------------------------------------------- */

.entry-content .bstg-faq .bstg-faq__item {
	margin: 0 0 12px;
	border: 1px solid #ededed;
	border-radius: 4px;
	background-color: #fff;
}

.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q {
	position: relative;
	display: block;
	cursor: pointer;
	list-style: none;
	padding: 16px 52px 16px 18px;
	background-color: #fafafa;
	border-radius: 4px;
	transition: background-color .15s ease-in-out;
}

.entry-content .bstg-faq .bstg-faq__item[open] > .bstg-faq__q {
	background-color: #f4f5f9;
	border-bottom: 1px solid #ededed;
	border-radius: 4px 4px 0 0;
}

.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q:hover,
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q:focus {
	background-color: #edeff6;
}

.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q:focus-visible {
	outline: 2px solid #4a60b0;
	outline-offset: 2px;
}

.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q::-webkit-details-marker {
	display: none;
}

/* Restore block flow to the question heading; the summary's padding now
   supplies the spacing that display:inline was throwing away. */
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h2,
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h3,
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h4,
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h5,
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h6 {
	display: block;
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: bold;
	font-size: 24px;
	line-height: 1.4;
	color: #1f1f1f;
}

/* Chevron. Pure CSS, rotates from "pointing down" to "pointing up" on [open]. */
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 9px;
	height: 9px;
	margin-top: -7px;
	border-right: 2px solid #4a60b0;
	border-bottom: 2px solid #4a60b0;
	transform: rotate(45deg);
	transform-origin: 50% 50%;
	transition: transform .2s ease-in-out, margin-top .2s ease-in-out;
}

.entry-content .bstg-faq .bstg-faq__item[open] > .bstg-faq__q::after {
	transform: rotate(-135deg);
	margin-top: -2px;
}

/* Answer: layout only. Font size, weight, line-height and colour stay with the
   .saswp_faq_tiny_content rule in inc/schema/faq.php. */
.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__a {
	padding: 16px 18px 0;
	margin-bottom: 16px;
}

@media screen and (max-width: 600px) {

	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q {
		padding: 14px 42px 14px 14px;
	}

	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h2,
	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h3,
	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h4,
	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h5,
	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q > h6 {
		font-size: 24px;
	}

	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__q::after {
		right: 16px;
	}

	.entry-content .bstg-faq .bstg-faq__item > .bstg-faq__a {
		padding: 14px 14px 0;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Anchor targets vs the fixed header.
 *
 * #headerinsidewrap is position:fixed. Measured height on the local mirror
 * 2026-08-29: 174px at 1366 wide, 90px at 390 wide once #topbar is hidden by
 * the 960px breakpoint. scroll-padding-top on the scrollport covers both native
 * fragment navigation and scrollIntoView() (ez-TOC, FAQ deep links), so there is
 * deliberately no matching scroll-margin-top: the two stack and double the gap.
 * ------------------------------------------------------------------------- */

html {
	scroll-padding-top: 186px;
}

@media screen and (max-width: 960px) {

	html {
		scroll-padding-top: 102px;
	}
}