/* ==========================================================================
   Steel & Co Financial — custom overrides
   Auto-loaded by Helix Ultimate (templates/.../index.php: $theme->add_css('custom.css'))
   ========================================================================== */

/* Amanda feedback (website notes, 30 Jun 2026):
   "a bit more space between option menu along the top and the [page heading]
    – it feels a bit bunched up- same with the other pages."
   #sp-main-body is reset to padding:0 in template.css, so content butts up
   under the sticky header. Add responsive top breathing room site-wide. */
#sp-main-body {
	padding-top: 48px;
}
@media (max-width: 991px) {
	#sp-main-body { padding-top: 32px; }
}
@media (max-width: 767px) {
	#sp-main-body { padding-top: 20px; }
}

/* Amanda feedback: elements bunch up on smaller screens. SP Page Builder
   addon wrappers (#sppb-addon-wrapper-{id}) mostly carry margin:0, which is
   fine on desktop (columns sit side-by-side) but makes stacked addons butt
   together once columns collapse on tablet/mobile — e.g. the "Open the
   calculator" button flush against its card. Give every addon wrapper a
   consistent bottom margin once columns start stacking (<=lg Bootstrap/Helix
   breakpoint). Selector specificity (id + attribute = 110) beats the per-addon
   #sppb-addon-wrapper-{id} margin (100) so it reliably applies site-wide. */
@media (max-width: 991.98px) {
	#sp-page-builder [id^="sppb-addon-wrapper-"] { margin-bottom: 22px; }
}
@media (max-width: 575.98px) {
	#sp-page-builder [id^="sppb-addon-wrapper-"] { margin-bottom: 18px; }
}

/* A heading-type main-menu parent (e.g. Insights) renders as a non-link
   <span class="sp-menu-heading">, which Helix styles muted grey and unreadable
   on the dark header. Force it to match the white nav links. */
.sp-megamenu-parent > li > .sp-menu-heading {
	color: #ffffff;
	opacity: 1;
}
.sp-megamenu-parent > li > .sp-menu-heading:hover {
	color: #ffffff;
}

/* The Guides hub is a native com_content category-blog, which — unlike the SPPB
   pages — has no .sppb-row-container, so it runs edge-to-edge. Constrain it to
   the same content column as every other page (Helix container = 1320px, 15px
   gutter, centred). */
.com-content-category-blog {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}