/*
 * Canadian Business College landing pages: program pages + homepage.
 *
 * The handoff styles every element inline; the templates keep those inline
 * styles verbatim. What the delivered pages computed at runtime -- renderVals()
 * in each page's logic, a value per window width -- is here instead, as CSS
 * variables per breakpoint, read by the inline styles as var(--name). The
 * values are copied from renderVals(), which is identical on all 19 form pages.
 *
 * Breakpoints are the page logic's own: w < 600, < 900 ("narrow"), < 1000,
 * < 1100 ("stackOnline"), < 1180. w was window.innerWidth, which is what a
 * max-width media query measures too.
 */

/* ---- The delivered <helmet> styles, verbatim ------------------------------ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fbf6ee;color:#172033;font-family:'Figtree',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#172033}
a:hover{color:#670000}
button,input,textarea{font-family:inherit}
textarea::placeholder,input::placeholder{color:#5b6472}
@keyframes cbcFloat{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-8px)}}
@keyframes cbcGlint{0%{background-position:-150% 0}60%,100%{background-position:250% 0}}
@keyframes cbcPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1)}}
@keyframes cbcRipple{0%{box-shadow:0 0 0 0 rgba(103,0,0,.45);transform:scale(1)}20%{transform:scale(1.08)}40%{transform:scale(1)}70%,100%{box-shadow:0 0 0 16px rgba(103,0,0,0)}}
@keyframes cbcFade{from{opacity:0}to{opacity:1}}
@keyframes cbcRise{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
@keyframes cbcHeadPop{0%,84%,100%{transform:scale(1) translateY(0)}88%{transform:scale(1.14) translateY(-3px)}92%{transform:scale(.97) translateY(0)}96%{transform:scale(1.04)}}
@media (prefers-reduced-motion: reduce){*{animation-duration:0s!important;animation-iteration-count:1!important}}
@keyframes cbcShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/*
 * Everything toggled by the hidden attribute stays hidden. Every element here
 * is styled inline, and an inline display:flex beats the attribute's UA
 * display:none -- on Computek that opened the pop-up and all its steps at once
 * on page load. Keep this blanket rather than per selector.
 */
[hidden]{display:none!important}

/* <sc-if> blocks became wrappers that take no box of their own. */
[data-lp-if]{display:contents}

/* A heading's desktop-only line break: <br style="display:{{ brD }}"> as delivered. */
.lp-brd{display:var(--brD)}

.lp-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- renderVals(): wide desktop (w >= 1180) ------------------------------- */
:root{
	--heroMinH:clamp(620px,48vw,720px);
	--heroCopyFlex:0 1 40%;
	--heroFormFlex:0 0 clamp(360px,32%,470px);
	--heroFormMargin:32px 0;
	--heroSize:cover;
	--heroPos:70% 30%;
	--heroFade:linear-gradient(90deg,rgba(251,246,238,.97) 0,rgba(251,246,238,.9) 30%,rgba(251,246,238,0) 45%);
	--heroDir:row;
	--heroAlign:center;
	--heroPad:0 clamp(16px,3vw,40px);
	--copyDisplay:block;
	--glowDisplay:block;
	--eyebrowMb:18px;
	--brD:inline;
	--heroPMt:20px;
	--eyebrowFs:clamp(13px,1.1vw,16px);
	--factsOrder:0;
	--formOrder:0;
	--factsMt:28px;
	--factCols:repeat(2,minmax(0,1fr));
	--smallFactDisplay:flex;
	--top-taH:104px;

	--skillsCopyH:clamp(260px,26vw,380px);
	--skillsCols:repeat(4,1fr);
	--skillPad:26px 24px 28px;
	--courseCols:minmax(0,.8fr) minmax(0,2fr);
	--courseMaxH:none;
	--extraP:block;

	--careerCols:minmax(0,.9fr) minmax(0,1.3fr);
	--tabsDisplay:flex;
	--tabDir:column;
	--tabScroll:visible;
	--tabPb:0;
	--tabW:100%;
	--sloganFs:clamp(26px,2.5vw,38px);
	--sloganStep:18px;

	--recogImgH:clamp(320px,36vw,540px);
	--launchDisplay:block;

	--onlineCols:38% 1fr 30%;
	--onlineMinH:520px;
	--onlineImgH:520px;
	--onlineImgMax:none;
	--onlineImgRadius:0;

	--whyCols:repeat(auto-fit,minmax(150px,1fr));
	--whyGap:24px;
	--whyMt:34px;
	--whyRule:1px solid #d9c9b3;

	--bottomTopicCols:repeat(3,1fr);
	--bfBg:rgba(80,0,0,.55);
	--bfBorder:rgba(255,255,255,.35);
	--bfShadow:0 20px 44px rgba(20,0,0,.35);
	--bfGap:12px;
	--bfBtnH:60px;
	--bfBtnFs:15px;
	--bfJustify:center;

	--m-pad:4vh 4vw;
	--m-radius:20px;
	--m-h:auto;
	--m-cols:minmax(0,1fr) minmax(0,1fr);
	--m-pitchPad:clamp(28px,4vw,56px);
	--m-formPad:clamp(28px,4vw,56px);
	--m-pitchGap:12px;
	--m-pitchTop:24px;
	--m-bar2:#e3d3bb;

	--privacyPad:5vh 4vw;
	--privacyRadius:18px;
	--privacyH:auto;
}

/* w < 1180 */
@media (max-width:1179.98px){
	:root{ --skillsCols:repeat(2,1fr); }
}

/* w < 1100: "stackOnline" */
@media (max-width:1099.98px){
	:root{
		--onlineCols:1fr;
		--onlineMinH:0;
		--onlineImgH:clamp(260px,60vw,420px);
		--onlineImgMax:520px;
		--onlineImgRadius:12px;
	}
	.lp-if-onlineSide{display:none}
}

/* w < 1000 */
@media (max-width:999.98px){
	:root{
		--courseCols:1fr;
		--whyRule:0;
	}
}

/* w < 900: "narrow" */
@media (max-width:899.98px){
	:root{
		--heroMinH:0;
		--heroCopyFlex:1 1 100%;
		--heroFormFlex:0 0 auto;
		--heroFormMargin:18px 0 0;
		--heroDir:column;
		--heroAlign:stretch;
		--heroPad:16px 16px 36px;
		--copyDisplay:contents;
		--glowDisplay:none;
		--eyebrowMb:10px;
		--brD:none;
		--heroPMt:12px;
		--eyebrowFs:15px;
		--factsOrder:2;
		--formOrder:1;
		--factsMt:18px;
		--smallFactDisplay:none;

		--skillsCopyH:0;
		--courseMaxH:232px;
		--extraP:none;

		--careerCols:1fr;
		--tabsDisplay:none;
		--tabDir:row;
		--tabScroll:auto;
		--tabPb:4px;
		--tabW:auto;

		--launchDisplay:none;

		--bottomTopicCols:repeat(auto-fill,minmax(max(130px,calc((100% - 10px) / 2)),1fr));
		--bfBg:linear-gradient(180deg,#7a0303,#670000 45%,#560000);
		--bfBorder:rgba(255,255,255,.14);
		--bfShadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 0 #4a0000,0 8px 0 #3a0000,0 10px 0 #a8771f,0 30px 50px rgba(20,0,0,.45);
		--bfGap:10px;
		--bfBtnH:58px;
		--bfBtnFs:14px;
		--bfJustify:flex-start;

		--m-pad:0;
		--m-radius:0;
		--m-h:100%;
		--m-cols:1fr;
		--m-pitchPad:26px 20px 22px;
		--m-formPad:24px 20px 32px;
		--m-pitchGap:8px;
		--m-pitchTop:14px;

		--privacyPad:0;
		--privacyRadius:0;
		--privacyH:100%;
	}
	.lp-if-wide,
	.lp-if-m-full{display:none}
	/* The pop-up checklist shows its first three on phones. */
	[data-lp-pitch] > :nth-child(n+4){display:none}
	/* "Show all N courses" opened. */
	[data-lp-courses].is-open{--courseMaxH:none}
}
@media (min-width:900px){
	.lp-if-narrow,
	.lp-if-courseToggle,
	.lp-if-showSticky{display:none}
}

/* w < 600 */
@media (max-width:599.98px){
	:root{
		--factCols:1fr;
		--skillsCols:repeat(2,minmax(0,1fr));
		--skillPad:20px 16px 22px;
		--onlineImgH:230px;
		--recogImgH:260px;
		--whyCols:repeat(2,minmax(0,1fr));
		--whyGap:18px 14px;
		--whyMt:24px;
		--sloganFs:clamp(20px,6vw,30px);
		--sloganStep:8px;
	}
}

/* ---- style-hover / style-focus ---------------------------------------------
 * The delivered attributes, as attribute selectors. !important because the
 * element's own inline style would otherwise win over any stylesheet rule.
 */
[data-lp-hover="glow"]:hover{filter:brightness(1.06)!important}
[data-lp-hover="lift3"]:hover{transform:translateY(-3px)!important}
[data-lp-hover="lift2s"]:hover{transform:translateY(-2px)!important;box-shadow:0 14px 28px rgba(60,30,10,.16)!important}
[data-lp-hover="lift1"]:hover{transform:translateY(-1px)!important}
[data-lp-hover="dark"]:hover{background:#520000!important}
[data-lp-hover="fill"]:hover{background:#670000!important;color:#fff!important}
[data-lp-hover="lift2"]:hover{transform:translateY(-2px)!important}
[data-lp-hover="nudge"]:hover{transform:translateX(4px)!important}
[data-lp-hover="edge"]:hover{border-color:#670000!important}
[data-lp-hover="lift3s"]:hover{transform:translateY(-3px)!important;box-shadow:0 16px 34px rgba(60,30,10,.16)!important}
[data-lp-hover="link"]:hover{transform:translateY(-3px)!important;box-shadow:0 14px 28px rgba(60,30,10,.12)!important;border-color:#670000!important;color:#172033!important}
[data-lp-focus="red"]:focus{border-color:#670000!important}
[data-lp-focus="gold1"]:focus{outline:3px solid rgba(240,200,110,.7)!important;outline-offset:1px!important}
[data-lp-focus="gold"]:focus{border-color:#f0c86e!important}
[data-lp-focus="gold2"]:focus{outline:3px solid rgba(240,200,110,.8)!important;outline-offset:2px!important}
[data-lp-focus="goldnone"]:focus{border-color:#f0c86e!important;outline:none!important}

/* ---- Small additions the delivered pages did not need ----------------------
 * Field errors from the lead endpoint (the delivered pages never posted
 * anywhere, so they had no way to be told a value was refused).
 */
[data-lp-modal-form] input[aria-invalid="true"]{border-color:#b00020!important}
[data-lp-error]{font-size:14px;line-height:1.45;font-weight:700;color:#b00020}