/**
 * ToolBeltData branding overrides for square-blocks plugin
 * These override the squaretakeoff defaults with toolbeltdata colors/fonts.
 * The plugin's structural/layout styles remain untouched.
 */

/* Fix list bullets — override theme section styles that add disc markers to li
 * inside dark bg sections (.has-tech-blue-background-color li, etc.) */
.wp-block-square-blocks-post-picker .square-posts,
.wp-block-square-blocks-post-picker .square-posts li,
.has-tech-blue-background-color .wp-block-square-blocks-post-picker .square-posts li,
.has-power-blue-background-color .wp-block-square-blocks-post-picker .square-posts li,
.section-blue .wp-block-square-blocks-post-picker .square-posts li {
	list-style: none !important;
	list-style-type: none !important;
	padding-left: 0;
	margin-left: 0 !important;
}

/* Fix white text in hero section — card titles/descriptions must be dark */
.wp-block-square-blocks-post-picker .square-card-title,
.wp-block-square-blocks-post-picker .square-card-description,
.wp-block-square-blocks-post-picker .wp-block-post-title,
.wp-block-square-blocks-post-picker .wp-block-post-title a,
.wp-block-square-blocks-post-picker .wp-block-post-excerpt p {
	color: #202227 !important;
}

/* ============================================================================
 * CSS Custom Properties for ToolBeltData branding
 * ============================================================================ */
:root {
	--square-accent-light-green: #002A43;       /* Pill bg: Buildertrend blue */
	--square-primary-dark-blue: #202227;         /* Title color */
	--square-text-color-black: #202227;
	--square-primary-gray: #4E555F;              /* Meta text color */
	--square-accent-truce-blue: #FF4A24;         /* Arrow/CTA color: orange instead of blue */
	--square-accent-ruby: #FF4A24;               /* Meta accent: orange */
}

/* ============================================================================
 * Category Pill — Buildertrend blue bg, white text, Inter Bold
 * ============================================================================ */
.wp-block-square-blocks-post-picker .square-card-pill {
	background: #002A43;
	color: #FFFFFF;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	padding: 4px 16px;
	height: auto;
	letter-spacing: normal;
	text-transform: none;
}

/* ============================================================================
 * Card Titles — unified 22px / 400 weight per Figma
 * ============================================================================ */
.wp-block-square-blocks-post-picker .square-card-title {
	font-weight: 400;
	font-size: 22px;
	line-height: 30px;
	color: #202227;
}

.wp-block-square-blocks-post-picker h4.square-card-title {
	font-weight: 400;
}

/* ============================================================================
 * Card Meta — lighter weight, updated color
 * ============================================================================ */
.wp-block-square-blocks-post-picker .square-card-meta {
	color: #4E555F;
	font-weight: 400;
}

/* ============================================================================
 * Standard Card — "Read now" in orange, Inter font
 * ============================================================================ */
.square-card-standard .square-card-arrow {
	color: #FF4A24;
}

.square-card-standard .square-card-arrow::before {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #FF4A24;
}

.square-card-standard .square-card-arrow svg {
	color: #FF4A24;
}

/* Standard card meta — Inter, dark text */
.square-card-standard .square-card-meta .square-card-post-type,
.square-card-standard .square-card-meta .square-card-read-time {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	letter-spacing: normal;
	color: #202227;
}

/* Standard card title — 16px per Figma */
.square-card-standard h2.square-card-title {
	font-size: 16px;
	line-height: 25px;
}

/* ============================================================================
 * Post meta row (legacy) — match updated colors
 * ============================================================================ */
.wp-block-square-blocks-post-picker .post-meta .post-type,
.wp-block-square-blocks-post-picker .post-meta .read-time {
	color: #FF4A24;
}

/* Remove gap between header and first full-width block with background.
 * The theme's .entry-content { margin: 1.5em 0 0 } adds spacing that's
 * correct for normal pages but wrong when a hero section is first. */
.entry-content > .alignfull:first-child,
.wp-block-post-content > .alignfull:first-child {
	margin-top: -1.5em;
}

/* Post-picker should fill its parent width naturally */
div.wp-block-square-blocks-post-picker {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Responsive pill adjustment for mid-size screens */
@media (max-width: 1400px) and (min-width: 1025px) {
	.wp-block-square-blocks-post-picker .square-card-pill {
		font-size: 13px;
		padding: 3px 12px;
	}
}

/* ============================================================================
 * Header — square-header structure (mirrors squaretakeoff pattern)
 * ============================================================================ */

/* Nav link colors — dark text */
header.wp-block-template-part .square-nav-menu a.menu-top-level {
	color: #202227;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	text-transform: uppercase;
}

header.wp-block-template-part .square-nav-menu a.menu-top-level:hover {
	color: #2B5D7F;
}

/* Logo sizing for toolbeltdata (PNG instead of SVG) */
header.wp-block-template-part .site-logo a {
	display: flex;
	align-items: center;
}

header.wp-block-template-part .site-logo img {
	width: 200px;
	height: auto;
}

/* Ensure desktop header content + logo are visible */
@media screen and (min-width: 900px) {
	header.wp-block-template-part .square-main-logo.site-logo {
		display: block !important;
	}
}

/* ============================================================================
 * Mobile Carousel Dots — power-blue inactive, cta-orange active
 * ============================================================================ */

/* Give the post-picker enough padding so absolutely-positioned dots aren't clipped */
.wp-block-square-blocks-post-picker {
	padding-bottom: 35px;
}

.wp-block-square-blocks-post-picker > .slick-dots li button {
	background: #2c354f !important;     /* --brand-color-power-blue (inactive) */
}

.wp-block-square-blocks-post-picker > .slick-dots li.slick-active button {
	background: #ee5a38 !important;     /* --brand-color-cta-orange (active) */
}

/* ============================================================================
 * Single Post Layout — per Figma TB5120 Blog Optimizations (node 123:675)
 * ============================================================================ */

/* --- Breadcrumbs --- */
.sq-breadcrumbs {
	font-family: "GT Walsheim", sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 30px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin-bottom: 0.5em;
}

.sq-breadcrumbs a {
	color: #2B5D7F;
	text-decoration: none;
}

.sq-breadcrumbs a:hover {
	text-decoration: underline;
}

.sq-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.25em;
}

.sq-breadcrumbs__item {
	color: #2B5D7F;
}

.sq-breadcrumbs__sep {
	margin: 0 0.15em;
}

/* --- Post Title --- */
.sq-single-post__title.wp-block-post-title {
	font-family: "GT Walsheim", sans-serif;
	font-weight: 500;
	font-size: 42px;
	line-height: 50px;
	color: #001A43;
	margin-top: 0.25em;
	margin-bottom: 0.5em;
}

@media (max-width: 781px) {
	.sq-single-post__title.wp-block-post-title {
		font-size: 32px;
		line-height: 40px;
	}
}

/* --- Read Time + Social Share row --- */
.sq-read-time {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: #202227;
	display: inline-block;
	margin-bottom: 1.5em;
}

.sq-social-share {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: 16px;
	vertical-align: middle;
}

.sq-social-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	overflow: hidden;
	transition: opacity 0.2s;
}

.sq-social-share__link:hover {
	opacity: 0.7;
}

.sq-social-share__link img,
.sq-social-share__link svg {
	width: 24px;
	height: 24px;
}

/* --- Featured Image (sidebar) --- */
.sq-single-post__sidebar .wp-block-post-featured-image img {
	border-radius: 4px;
}

/* --- Author Info --- */
.sq-author-info {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
}

.sq-author-info__avatar-wrap {
	flex-shrink: 0;
}

.sq-author-info__avatar {
	border-radius: 50%;
	width: 64px;
	height: 64px;
	object-fit: cover;
}

.sq-author-info__details {
	display: flex;
	flex-direction: column;
}

.sq-author-info__name {
	font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 25px;
	color: #2B5D7F;
	margin: 0 0 4px;
}

.sq-author-info__name a {
	color: #2B5D7F;
	text-decoration: none;
}

.sq-author-info__name a:hover {
	text-decoration: underline;
}

.sq-author-info__date {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: #202227;
	margin: 0;
}

/* Divider below author info */
.sq-single-post__sidebar .sq-author-info {
	border-bottom: 1px solid #D3DBE2;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
}

/* --- Post Content Typography (single post scope) --- */
.sq-single-post__content h2 {
	font-family: "GT Walsheim", sans-serif;
	font-weight: 500;
	font-size: 42px;
	line-height: 50px;
	color: #001A43;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

.sq-single-post__content h3 {
	font-family: "GT Walsheim", sans-serif;
	font-weight: 500;
	font-size: 30px;
	line-height: 36px;
	color: #001A43;
	margin-top: 1.25em;
	margin-bottom: 0.5em;
}

.sq-single-post__content p {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: #202227;
}

.sq-single-post__content a {
	color: #2B5D7F;
}

.sq-single-post__content a:hover {
	color: #001A43;
	text-decoration: underline;
}

/* Lists */
.sq-single-post__content ul,
.sq-single-post__content ol {
	color: #202227;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	line-height: 25px;
	padding-left: 1.5em;
}

.sq-single-post__content li {
	margin-bottom: 0.5em;
}

/* Blockquote / Callout — left accent + border box */
.sq-single-post__content blockquote {
	border-left: 8px solid #2B5D7F;
	border-top: 2px solid #2B5D7F;
	border-right: 2px solid #2B5D7F;
	border-bottom: 2px solid #2B5D7F;
	border-radius: 4px;
	background: #FFFFFF;
	padding: 1.25em 1.5em;
	margin: 1.5em 0;
}

.sq-single-post__content blockquote p {
	margin: 0 0 0.5em;
}

.sq-single-post__content blockquote p:last-child {
	margin-bottom: 0;
}

/* --- Sidebar: TOC sticky handled by square-toc-sidebar.css --- */
@media (min-width: 782px) {
	.sq-single-post__sidebar {
		align-self: flex-start;
	}
}

/* --- Mobile: reorder + padding --- */
@media (max-width: 781px) {
	/* Horizontal padding on the single post wrapper */
	.sq-single-post {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}

	/* Flatten columns so all blocks become direct flex children */
	.sq-single-post__layout {
		display: flex !important;
		flex-direction: column !important;
		gap: 0 !important;
	}

	.sq-single-post__main,
	.sq-single-post__sidebar {
		display: contents !important;
	}

	/* Reorder: breadcrumbs → title → meta → featured image → author → TOC → content */
	.sq-single-post__layout .sq-breadcrumbs { order: 1; }
	.sq-single-post__layout .wp-block-post-title { order: 2; }
	.sq-single-post__layout .sq-single-post__meta-row { order: 3; }
	.sq-single-post__layout .wp-block-post-featured-image { order: 4; margin-bottom: 1em; }
	.sq-single-post__layout .sq-author-info { order: 5; margin-bottom: 1.5em; border-bottom: 1px solid #D3DBE2; padding-bottom: 1.5em; }
	.sq-single-post__layout .wp-block-uagb-table-of-contents { order: 6; margin-bottom: 1.5em; }
	.sq-single-post__layout .wp-block-post-content { order: 7; }

	/* Full width for all items */
	.sq-single-post__layout > *,
	.sq-single-post__layout .sq-breadcrumbs,
	.sq-single-post__layout .wp-block-post-title,
	.sq-single-post__layout .sq-single-post__meta-row,
	.sq-single-post__layout .wp-block-post-featured-image,
	.sq-single-post__layout .sq-author-info,
	.sq-single-post__layout .wp-block-uagb-table-of-contents,
	.sq-single-post__layout .wp-block-post-content {
		width: 100%;
	}

	/* Featured image full width rounded */
	.sq-single-post__layout .wp-block-post-featured-image img {
		width: 100%;
		border-radius: 4px;
	}

	/* Responsive heading sizes */
	.sq-single-post__content h2 {
		font-size: 32px;
		line-height: 42px;
	}

	.sq-single-post__content h3 {
		font-size: 24px;
		line-height: 32px;
	}
}