/* SETUP */

.WIDGET {
	container-type: inline-size;
	container-name: widget;
}

@media screen and (min-width: 961px) {
	.WIDGET .alt-hidden-desktop { display: none; }
}

@media screen and (max-width: 961px) {
	.WIDGET .alt-hidden-mobile { display: none; }
}

.WIDGET :is(h1, h2, h3, h4, h5, h6, p, a, span, ul, ol):first-child { margin-top: 0; }
.WIDGET :is(h1, h2, h3, h4, h5, h6, p, a, span, ul, ol):last-child { margin-bottom: 0; }

.WIDGET :is(ul, ol).alt-spaced { 
	padding-inline-start: 30px; 
	list-style-type: square;
}

.WIDGET :is(ul, ol).alt-spaced > li:not(:last-child) {
	margin-bottom: 1.5rem;
	line-height: 1.5;
}





/* ICON  */

.icon {
	width: 45px;
	height: 45px;
	flex: 0 0 auto;
}

.icon.alt-large {
	width: 60px;
	height: 60px;
}

.icon svg { 
	width: 100%;
	height: 100%;
}

.icon[data-icon="phishing"] {
	width: 120px;
	height: 115px;	
}

@media screen and (max-width: 960px) {
	.icon {
		width: 35px;
		height: 35px;
	}
}





/* BUTTON */

:is(.WIDGET, .BANNER) .b-button {
	appearance: none;
	border: none;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	padding: 1.5rem 2rem;
	text-decoration: none;
	border-radius: 0;
	box-sizing: border-box;
	background-color: transparent;
	color: var(--dc-green);
	box-shadow: inset 0 0 0 2px var(--dc-green);
	background: var(--dc-green);
	color: var(--dc-purple);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	gap: 0.5rem;
	vertical-align: middle;
}

:is(.WIDGET, .BANNER) .b-button:hover {
	background-color: transparent;
	color: var(--dc-green);
}

:is(.WIDGET, .BANNER) .b-button .icon { width: 24px; height: 24px; }
:is(.WIDGET, .BANNER) .b-button .icon svg { transition: all 0.3s; }
:is(.WIDGET, .BANNER) .b-button .icon path { fill: var(--dc-purple); }
:is(.WIDGET, .BANNER) .b-button:hover .icon path { fill: var(--dc-green);  }



/* button: dark */

:is(.WIDGET, .BANNER) .b-button.alt-dark {
	color: var(--dc-green);
	background-color: var(--dc-purple);
	box-shadow: inset 0 0 0 2px var(--dc-purple);
}

:is(.WIDGET, .BANNER) .b-button.alt-dark:hover {
	color: var(--dc-purple);
	background-color: var(--dc-green);
	box-shadow: inset 0 0 0 2px var(--dc-green);
}


/* button: outline */
:is(.WIDGET, .BANNER) .b-button.alt-outline {
	color: var(--dc-green);
	background-color: transparent;
}

:is(.WIDGET, .BANNER) .b-button.alt-outline:hover {
	color: var(--dc-purple);
	background-color: var(--dc-green);
}

:is(.WIDGET, .BANNER) .b-button.alt-outline .icon { width: 24px; height: 24px; }
:is(.WIDGET, .BANNER) .b-button.alt-outline .icon path { fill: var(--dc-green); }
:is(.WIDGET, .BANNER) .b-button.alt-outline:hover .icon path { fill: var(--dc-purple); }


/* button: dark outline */
:is(.WIDGET, .BANNER) .b-button.alt-dark.alt-outline {
	color: var(--dc-purple);
	box-shadow: inset 0 0 0 2px var(--dc-purple);
}


/* button: link */
:is(.WIDGET, .BANNER) .b-button.alt-link {
	gap: 10px;
	border: none;
	box-shadow: none;
	font-weight: 400;
	padding: 0.75rem 0;
	background: transparent;
	color: var(--dc-purple);
}

:is(.WIDGET, .BANNER) .b-button.alt-link:hover {
	color: var(--dc-purple);
	text-decoration: underline;
}

:is(.WIDGET, .BANNER) .b-button.alt-link:hover .icon path { fill: var(--dc-purple); }

:is(.WIDGET, .BANNER) .b-button.alt-link .icon { 
	width: 1rem; 
	height: 1rem; 
	flex: 0 0 1rem;
	margin: -5px 0 0;
}

:is(.WIDGET, .BANNER) .b-button.alt-link.alt-white { color: var(--dc-white); transition: 0.25s ease; }
:is(.WIDGET, .BANNER) .b-button.alt-link.alt-white:hover { color: var(--dc-green); text-decoration: none; }
:is(.WIDGET, .BANNER) .b-button.alt-link.alt-white .icon { margin-bottom: -2px; }
:is(.WIDGET, .BANNER) .b-button.alt-link.alt-white .icon path { fill: var(--dc-white); transition: 0.25s ease; }
:is(.WIDGET, .BANNER) .b-button.alt-link.alt-white:hover .icon path { fill: var(--dc-green); }



/* button: icon button */
:is(.WIDGET, .BANNER) .b-button.alt-icon {
	background: transparent;
	padding: 0;
	box-shadow: none;
	width: 2rem;
	height: 2rem;
}

:is(.WIDGET, .BANNER) .b-button.alt-icon .icon { 
	width: 100%;
	height: 100%;
}


.b-button.alt-full { width: 100%; }



/* BUTTON GROUP */

:is(.WIDGET, .BANNER) .btn-group {
  gap: 1.5rem;
  display: flex;
  flex-wrap: wrap;
}

:is(.WIDGET, .BANNER) .btn-group[data-reverse]:not([data-reverse="mobile"]) { flex-direction: row-reverse; }

@container widget (max-width: 960px) {
	:is(.WIDGET, .BANNER) .btn-group .b-button:not(.alt-link) { flex-grow: 1; }
	/* :is(.WIDGET, .BANNER) .btn-group[data-reverse]:not([data-reverse="desktop"]) { flex-direction: column-reverse; } */
}

@media screen and (max-width: 960px) {
	:is(.WIDGET, .BANNER) .btn-group { gap: 0.75rem; }
	:is(.WIDGET, .BANNER) .btn-group[data-reverse]:not([data-reverse="desktop"]) { flex-direction: column-reverse; }
}





/* COLUMNS */

/* :is(.WIDGET, .BANNER) .b-columns {
	--col-gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	gap: var(--col-gap);
	width: 100%;
} */



:is(.WIDGET, .BANNER) .b-columns {
	--col-gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	margin: calc(var(--col-gap) * -1);
}

:is(.WIDGET, .BANNER) .b-column {
	padding: var(--col-gap);
	box-sizing: border-box;
	flex: 0 0 auto;
	max-width: 100%;
}

:is(.WIDGET, .BANNER) .b-columns[data-gap="lg"] { --col-gap: 4rem; }
:is(.WIDGET, .BANNER) .b-columns[data-gap="none"] { --col-gap: 0rem; }

:is(.WIDGET, .BANNER) .b-column[data-width="1"] {width: 8.333333%;}
:is(.WIDGET, .BANNER) .b-column[data-width="2"] {width: 16.666666%;}
:is(.WIDGET, .BANNER) .b-column[data-width="3"] {width: 25%;}
:is(.WIDGET, .BANNER) .b-column[data-width="4"] {width: 33.333333%;}
:is(.WIDGET, .BANNER) .b-column[data-width="5"] {width: 41.666666%;}
:is(.WIDGET, .BANNER) .b-column[data-width="6"] {width: 50%;}
:is(.WIDGET, .BANNER) .b-column[data-width="7"] {width: 58.333333%;}
:is(.WIDGET, .BANNER) .b-column[data-width="8"] {width: 66.666666%;}
:is(.WIDGET, .BANNER) .b-column[data-width="9"] {width: 75%;}
:is(.WIDGET, .BANNER) .b-column[data-width="10"] {width: 83.333333%;}
:is(.WIDGET, .BANNER) .b-column[data-width="11"] {width: 91.666666%;}
:is(.WIDGET, .BANNER) .b-column[data-width="12"] {width: 100%;}

:is(.WIDGET, .BANNER) .b-column[data-width="1/1"] {width: 100%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/2"] {width: 50%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/3"] {width: 33.333333%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/4"] {width: 25%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/5"] {width: 20%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/6"] {width: 16.666666%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/7"] {width: 14.285714%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/8"] {width: 12.5%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/9"] {width: 11.111111%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/10"] {width: 10.000%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/11"] {width: 9.090909%;}
:is(.WIDGET, .BANNER) .b-column[data-width="1/12"] {width: 8.333333%;}


:is(.WIDGET, .BANNER) .b-columns.alt-center {justify-content: center;}
:is(.WIDGET, .BANNER) .b-columns.alt-middle {align-items: center;}


@container widget (max-width: 960px) {
	:is(.WIDGET, .BANNER) :is(.b-columns, .b-columns[data-gap]) {--col-gap: 1rem; }
	:is(.WIDGET, .BANNER) .b-columns[data-gap="none"] { --col-gap: 0rem; }
	:is(.WIDGET, .BANNER) .b-column[data-width] { flex: 1 1 100%; }
}