/*
Theme Name:     SageNet
Theme URI:      n/a
Template:       kadence
Author:         Cloverjet
Author URI:     https://cloverjet.com
Description:    A child theme built to use with the Kadence builder.
Version:        1.5
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ====================================================================
   GLOBAL
   ==================================================================== */
html {
	scroll-behavior: smooth;
}


/* ====================================================================
   1. MAIN NAVIGATION — dropdown menus
   ==================================================================== */
.main-navigation .sub-menu {
	left: 15px;
	margin-left: 0;
	margin-top: 10px;
}

.main-navigation .header-menu-container > ul > li > a::after {
	height: 5px !important;
}

.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.menu-item--toggled-on > a::after {
	transform: scale(1, 1) translate(50%, 0px) !important;
	background-color: var(--global-palette1) !important;
}

/* Each dropdown row */
/* !important on display only: Kadence's Header/Footer Builder addon
   ships its own compiled stylesheet (header.min.css) with a
   .header-navigation li.menu-item>a rule at the SAME specificity as
   this one, setting display:block — and it wins the tie despite
   loading (as far as WP's own enqueue order is concerned) before this
   child theme's style.css. Confirmed live via devtools: display:flex
   was struck through, overridden back to block, which silently killed
   justify-content below too (space-between does nothing outside a
   flex container) — that's what caused the chevron to sit next to the
   text instead of the row's right edge. !important forces our flex
   layout to actually win.
   NOTE: do NOT add width:100% here (tried it, reverted) — that Kadence
   rule also carries the row's actual width (200px/280px, set on this
   same <a>), and neither the <li> nor .sub-menu around it have any
   width of their own. Forcing width:100% here has nothing real to
   measure against and collapses the whole dropdown box down to its
   smallest content-driven size instead. display:flex alone is enough
   for justify-content to correctly distribute within whatever width
   Kadence's own rule already sets. */
.main-navigation .sub-menu > li > a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	color: #cccccc;
	border-bottom: 1px solid #cccccc;
	transition: color 0.2s ease-in-out,
	border-color 0.2s ease-in-out,
	border-width 0.2s ease-in-out;
}

/* Chevron icon, inactive state (gray) */
.main-navigation .sub-menu > li > a::after {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: auto !important;
	background-color: #878787;
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color 0.2s ease-in-out;
}

/* Chevron icon, hover/active state (orange) */
.main-navigation .sub-menu > li > a:hover::after,
.main-navigation .sub-menu > li > a:focus::after,
.main-navigation .sub-menu > li.current-menu-item > a::after {
	background-color: var(--global-palette2);
}

/* NOTE: likely dead rule — sets `color` on the same ::after above, but
   that pseudo-element is drawn via background-color + an SVG mask, not
   text/currentColor, so this has no visible effect. Left in as-is
   (not deleted) since it's not causing harm — remove if you confirm
   it's unused. */
.main-navigation .sub-menu > li > a:hover::after,
.main-navigation .sub-menu > li > a:focus::after,
.main-navigation .sub-menu > li.current-menu-item > a::after {
	color: var(--global-palette2);
}

/* Row hover/active state */
.main-navigation .sub-menu > li > a:hover,
.main-navigation .sub-menu > li > a:focus,
.main-navigation .sub-menu > li.current-menu-item > a {
	color: var(--global-palette2);
	border-bottom-width: 1px;
	border-bottom-color: var(--global-palette1);
}


/* ====================================================================
   2. SECONDARY / UTILITY NAV
   ==================================================================== */
#secondary-menu {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
}

#secondary-menu li {
	display: flex !important;
	align-items: center !important;
}

#secondary-menu li + li::before {
	content: '//';
	color: #F5920A;
	margin: 0 8px;
}


/* ====================================================================
   3. HEADER — search toggle
   ==================================================================== */
@media only screen and (min-width: 768px) {
	.search-toggle-open-container {
		border-left: solid 1px white;
	}
}


/* ====================================================================
   4. ACCENT UTILITIES — bullets, breadcrumbs, heading "//" accent
   ==================================================================== */
.list-orange-bullets li::marker {
	color: var(--global-palette1);
}

/* internal breadcrumb styles */
.wp-block-breadcrumbs {
	text-transform: capitalize !important;
}

.wp-block-breadcrumbs li:not(:last-child):after {
	color: var(--global-palette1);
}

/* orange "//" after a heading — reusable class, not page-specific */
.head-slashes::after {
	content: "//";
	color: var(--global-palette1);
	font-size: 14px;
	margin-left: 4px;
	font-weight: 600;
}


/* ====================================================================
   5. LOGO SCROLL / PARTNER MARQUEE
   ==================================================================== */
.logo-scroll-track img {
	height: 50px;
	width: auto;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.logo-scroll-track img:hover {
	opacity: 1;
}


/* ====================================================================
   6. BUTTONS — Learn More / Header CTA
   --------------------------------------------------------------------
   NOTE: two icon-circle implementations follow (.header-button-inner-wrap
   .header-button::after further down, and .header-button.button::after
   below it) that look like they may be two attempts at the same "circle
   + arrow after the header CTA" idea. Left both as-is since I can't
   confirm live which markup is actually in use — worth a quick check in
   devtools on the header button to see if one of these is now dead.
   ==================================================================== */

/* Shared padding */
.learn-more-btn,
.header-button-inner-wrap .header-button {
	padding: 5px 5px 5px 20px !important;
}

/* Shared flex layout */
.learn-more-btn .kb-button,
.header-button-inner-wrap .header-button {
	display: inline-flex;
	align-items: center;
}

/* Learn More icon circle (Kadence SVG) */
.learn-more-btn .kb-svg-icon-wrap {
	width: 34px;
	height: 34px;
	background: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 12px;
	flex-shrink: 0;
}

.learn-more-btn .kb-svg-icon-wrap svg {
	width: 16px;
	height: 16px;
	color: #f59a00;
}

/* Header button icon circle (CSS only) */
.header-button-inner-wrap .header-button::after {
	content: '';
	display: inline-block;
	width: 34px;
	height: 34px;
	margin-left: 12px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath fill='white' fill-rule='evenodd' d='M0 20A20 20 0 1 0 40 20A20 20 0 1 0 0 20Z M22 13.5L29 20L22 26.5Z M11 18.8L23 18.8L23 21.2L11 21.2Z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.header-button.button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.header-button.button::after {
	content: "";
	width: 32px;
	height: 32px;
	background: #fff;
	border-radius: 50%;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23F59E00' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}

.header-button.button:hover {
	background: #097AAF !important;
	border-color: #097AAF !important;
}

.header-button.button:hover::after {
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23097AAF' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E");
}


/* ====================================================================
   7. FOOTER
   ==================================================================== */
.site-footer p,
.site-footer a {
	white-space: nowrap;
}

.site-footer .kt-adv-heading0bd4e1-36 {
	white-space: normal !important;
	overflow-wrap: normal !important;
	word-break: normal !important;
	max-width: 360px !important;
	display: block !important;
}


/* ====================================================================
   8. GENERIC UTILITIES
   ==================================================================== */
.hover:hover {
	color: #f08900 !important;
	transition: color 0.3s ease;
	cursor: pointer;
}

@media only screen and (max-width: 768px) {
	.mobile-hide {
		display: none;
	}
}


/* ====================================================================
   9. HERO
   ==================================================================== */
/* !important: this rule used to live in the Customizer, which WordPress
   injects very late in <head> — later than normally-enqueued
   stylesheets — so it always won cascade ties by load order alone.
   Moved into style.css (a normally-enqueued file), it lost that
   built-in advantage. Kadence Blocks' own CSS/inline styles on this
   video block can now load after ours and win on a tie, even against
   an ID selector — same class of issue already documented in
   custom-functionality.css for Kadence's late-loading block CSS. */
#hero-button .kadence-video-poster, #hero-button .kadence-video-overlay {
	display: none !important;
}


/* ====================================================================
   10. SERVICE PAGES (Managed Digital, and cloned "What We Do" pages)
   ==================================================================== */
#expertise .kt-blocks-info-box-title {
	font-weight: 800;
}

#expertise .kt-blocks-info-box-text {
	color: var(--global-palette4);
	padding-right: 10px;
}

#process .kt-blocks-info-box-text {
	color: var(--global-palette4);
}

#markets .kt-inside-inner-col {
	padding: 10px 32px;
}


/* ====================================================================
   11. RESOURCES / BLOG
   ==================================================================== */
/* Category label ("In the News") — white text */
#resources .taxonomy-category.post-category a {
	color: #ffffff;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 1rem;
}

/* Orange "//" after the category, global palette 1 */
#resources .taxonomy-category.post-category::after {
	content: "//";
	color: var(--global-palette1);
	font-size: 14px;
	margin-left: 4px;
	font-weight: 600;
}

/* Orange arrow icon after "Read more" */
#resources .wp-block-read-more::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 14px;
	margin-left: 8px;
	vertical-align: middle;
	background-color: var(--global-palette1);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13 5 20 12 13 19'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Bottom-align title + Read More, category stays pinned to top */
#resources .post-card .kt-inside-inner-col {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#resources .post-card .kt-inside-inner-col .wp-block-kadence-advancedheading {
	margin-top: auto;
}


/* ====================================================================
   12. FORMS (Gravity Forms)
   ==================================================================== */
.gform_required_legend {
	display: none;
}


/* ====================================================================
   13. ACCORDION
   ==================================================================== */
.kt-blocks-accordion-title-wrap .kt-btn-side-left {
	color: var(--global-palette1);
}


/* ====================================================================
   14. STAT COUNTERS
   ==================================================================== */
.kb-count-up-60_149ca2-d4 .kb-count-up-number::after {
	content: "+";
	color: #F59A00;
}