/*
 * Solutions mega menu panel - desktop.
 *
 * Kept in its own file so it never collides with the design work going on in
 * style.css. Enqueued from inc/custom-header.php (handle: uks-solutions-panel),
 * loaded after style.css and style2.css.
 *
 * Markup comes from uks_header_render_columns_panel() in inc/custom-header.php:
 *
 *   .uks-panel--columns
 *     .uks-panel__inner--columns
 *       .uks-columns
 *         .uks-column
 *           a.uks-column__title       the heading, links to the child
 *           ul.uks-column__list       li.uks-column__item > a
 *           a.uks-column__view-all    "View All ..."
 *       .uks-promo
 *         .uks-promo__image           featured image of the linked page
 *         .uks-promo__body
 *           p.uks-promo__text         the menu item's Description
 *           a.uks-promo__cta          "Explore All ..."
 *
 * Any top level menu item with the CSS class uks-panel-columns uses this, so it
 * is not tied to Solutions alone.
 *
 * Mobile is handled by the full screen drawer rules in style.css, so everything
 * here is behind the desktop breakpoint.
 */


@media (min-width: 992px) {

	.uks-panel--columns {
		--uks-sp-navy: #142E71;
		--uks-sp-text: #1F2A44;
		--uks-sp-line: #D9DEE9;
		--uks-sp-red: #C8102E;
		--uks-sp-red-hover: #A60D26;

		--uks-sp-promo-width: 300px;
		/* --uks-sp-column-gap: 0px; */
		/* --uks-sp-pad: 24px; */
	}

	/* ---------------------------------------------------------- layout -- */
	.solution-view-all{
	    padding-top: 6px;
        border-top: 1px solid var(--uks-sp-line);
		margin-top: auto;
	}
	.uks-panel--columns .uks-panel__inner--columns {
		display: flex;
		align-items: stretch;
		min-height: 440px;
		padding: 20px;
		gap: 30px;
	}

	/* One equal column per child, however many there are. */
	.uks-panel--columns .uks-columns {
		flex: 1 1 auto;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
		gap: var(--uks-sp-column-gap);
		min-width: 0;
	}

	/* ---------------------------------------------------------- column -- */

	.uks-panel--columns .uks-column {
		display: flex;
		flex-direction: column;
		min-width: 0;
		padding: 0 24px;
		border-right: 1px solid var(--uks-sp-line);
	}

	.uks-panel--columns .uks-column:first-child {
		padding-left: 0;
	}

	.uks-panel--columns .uks-column:last-child {
		border-right: 0;
		padding-right: 0;
	}

	/* The wrapper exists for the mobile screens. On desktop it must not break
	   the column's flex flow, or "View All" stops sitting at the foot. */
	.uks-panel--columns .uks-column__panel {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
	}

	/* heading ------------------------------------------------------------ */

	.uks-panel--columns .uks-column__title {
		display: block;
        padding-bottom: 14px;
        margin-bottom: 18px;
        border-bottom: 1px solid var(--uks-sp-navy);
        color: var(--uks-sp-navy);
        font-size: 16px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none;
	}

	.uks-panel--columns .uks-column__title:hover,
	.uks-panel--columns .uks-column__title:focus-visible {
		text-decoration: underline;
	}

	/* links -------------------------------------------------------------- */

	.uks-panel--columns .uks-column__list {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin: 0 0 24px;
		padding: 0;
		list-style: none;
	}

	.uks-panel--columns .uks-column__item {
		margin: 0;
	}

	.uks-panel--columns .uks-column__item a {
		display: inline-block;
        color: #000 !important;
        font-size: 16px;
        line-height: 24px;
        text-decoration: none;
        font-weight: 400;
		border-bottom: 1px solid transparent;
	}

	.uks-panel--columns .uks-column__item a:hover,
	.uks-panel--columns .uks-column__item a:focus-visible {
		color: var(--uks-sp-navy)!important;
		border-bottom: 1px solid var(--uks-sp-navy);
	}

	/* view all ----------------------------------------------------------- */

	/* margin-top:auto pins it to the foot of the column, so the links line up
	   across columns of different lengths. */
	.uks-panel--columns .uks-column__view-all {
        color: #8F1115;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        border-bottom: 1px solid #8F1115;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
		display: block;
	}

	/* .uks-panel--columns .uks-column__view-all:hover,
	.uks-panel--columns .uks-column__view-all:focus-visible {
		color: var(--uks-sp-red);
	} */

	/* ----------------------------------------------------------- promo -- */

	.uks-panel--columns .uks-promo {
		position: relative;
		flex: 0 0 var(--uks-sp-promo-width);
		align-self: stretch;
		overflow: hidden;
		border-radius: 4px;
		background-color: var(--uks-sp-navy);
	}

	.uks-panel--columns .uks-promo__image {
		position: absolute;
		inset: 0;
	}

	.uks-panel--columns .uks-promo__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		border-radius: 4px;
	}

	/* The white card sits over the foot of the image. */
	.uks-panel--columns .uks-promo__body {
		position: absolute;
        right: 11px;
        bottom: 15px;
        left: 11px;
        padding: 12px;
        background-color: #FFFFFF;
        border-radius: 6px;
	}

	.uks-panel--columns .uks-promo__text {
		margin: 0 0 12px;
		color: var(--uks-sp-navy);
		font-size: 20px;
		font-weight: 400;
		line-height: 32px;
	}

	.uks-panel--columns .uks-promo__cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 14px 20px;
		border-radius: 4px;
		background-color: #BF161C;
		color: #FFFFFF;
		font-size: 20px;
        font-weight: 400;
        line-height: 32px;
		text-decoration: none;
	}

	.uks-panel--columns .uks-promo__cta:hover,
	.uks-panel--columns .uks-promo__cta:focus-visible {
		background-color: #142E71;
		color: #FFFFFF;
	}
	.uks-panel--columns .uks-promo__cta:hover .uks-promo__arrow{
		transform: translateX(3px);
		transition: 0.3s ease-in-out;
	}

	/* Arrow drawn with borders, so there is no icon file to keep in sync. */
	.uks-panel--columns .uks-promo__arrow {
		position: relative;
		flex: 0 0 auto;
		width: 18px;
		height: 2px;
		background-color: currentColor;
	}

	.uks-panel--columns .uks-promo__arrow::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 7px;
		height: 7px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: translateY(-50%) rotate(45deg);
	}

	/* No image set on the linked page - drop the white card onto the navy. */
	.uks-panel--columns .uks-promo:not(:has(.uks-promo__image)) .uks-promo__body {
		position: static;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		border-radius: 6px;
	}

	/* Desktop shows the column and its heading together, so none of the mobile
	   screen chrome is needed. */
	.uks-panel--columns .uks-column__chevron {
		display: none;
	}
}


/* ==========================================================================
   MOBILE
   ==========================================================================
   The panel becomes a stack of screens:

     screen 1   the list of columns, with the promo card underneath
     screen 2   one column's links, opened by tapping its heading

   js/custom-header.js puts .is-open on .uks-column__panel for screen 2, and the
   back button takes it off again.
   ========================================================================== */

@media (max-width: 991px) {

	.uks-panel--columns {
		--uks-sp-navy: #142E71;
		--uks-sp-text: #1F2A44;
		--uks-sp-line: #E3E7EF;
		--uks-sp-red: #C8102E;
	}

	.uks-panel--columns .uks-panel__inner--columns {
		display: flex;
		flex-direction: column;
		min-height: 100%;
	}

	.uks-panel--columns .uks-columns {
		display: block;
		flex: 1 1 auto;
	}

	.uks-panel--columns .uks-column {
		display: block;
		padding: 0;
		border: 0;
	}

	/* ---- screen 1: a row per column ---- */

	.uks-panel--columns .uks-column__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0;
		padding: 15px 12px 13px 0px;
		border-bottom: 1px solid var(--uks-sp-line);
		color: #000;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.3;
		text-decoration: none;
	}

	.uks-panel--columns .uks-column__chevron {
		flex: 0 0 auto;
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(-45deg);
		opacity: 0.55;
	}

	/* ---- screen 2: one column's links ---- */

	.uks-panel--columns .uks-column__panel {
		position: fixed;
		inset: 0;
		z-index: 1002;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		overflow-y: auto;

		/* Off to the right until opened, so it slides in from the same side the
		   chevron points to. */
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.25s ease, visibility 0.25s;
	}

	.uks-panel--columns .uks-column__panel.is-open {
		transform: none;
		visibility: visible;
	}

	.uks-panel--columns .uks-column__list {
		flex: 0 0 auto;
		margin: 0;
		padding: 8px 0;
		list-style: none;
		display: flex;
		flex-direction: column;
		gap: 27px;
	}

	.uks-panel--columns .uks-column__item a {
		display: inline-block;
        padding: 0px;
        color: #000000;
        font-size: 16px;
        line-height: 1.4;
        font-weight: 400;
        border-bottom: 1px solid #000;
	}

	.uks-panel--columns .uks-column__item a:hover{
		color: #142E71;
		border-bottom: 1px solid #142E71;
	}

	.uks-panel--columns .uks-column__view-all {
		display: block;
        margin-top: auto;
        color: #8F1115;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
        text-decoration: underline;
        width: fit-content;
        margin: 0 auto;
        border-bottom: 1px solid #8F1115;
	}

	/* ---- the promo, under the list on screen 1 ---- */

	.uks-panel--columns .uks-promo {
		position: relative;
		flex: 0 0 auto;
		margin: 16px;
		overflow: hidden;
		border-radius: 6px;
		background-color: var(--uks-sp-navy);
		height: 400px;
	}

	.uks-panel--columns .uks-promo__image {
		position: absolute;
		inset: 0;
	}

	.uks-panel--columns .uks-promo__image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		object-position: top;
	}

	.header-solution-menu .uks-columns {
    	padding: 0px 20px;
	}

	.header-solution-menu .uks-column__list {
    	padding: 30px 20px 0px;
	}

	.uks-panel--columns .uks-promo__body {
		position: absolute;
		right: 10px;
		bottom: 10px;
		left: 10px;
		padding: 14px;
		background-color: #FFFFFF;
		border-radius: 4px;
	}

	.uks-panel--columns .uks-promo__text {
		margin: 0 0 12px;
		color: var(--uks-sp-navy);
		font-size: 20px;
        font-weight: 400;
        line-height: 32px;
	}

	.uks-panel--columns .uks-promo__cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 14px;
		border-radius: 4px;
		background-color: var(--uks-sp-red);
		color: #FFFFFF;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}

	.uks-panel--columns .uks-promo__arrow {
		position: relative;
		flex: 0 0 auto;
		width: 18px;
		height: 2px;
		background-color: currentColor;
	}

	.uks-panel--columns .uks-promo__arrow::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		width: 7px;
		height: 7px;
		border-top: 2px solid currentColor;
		border-right: 2px solid currentColor;
		transform: translateY(-50%) rotate(45deg);
	}

	.solution-view-all {
    	margin-top: auto;	
		padding-bottom: 40px;
	}

	@media (prefers-reduced-motion: reduce) {
		.uks-panel--columns .uks-column__panel {
			transition: none;
		}
	}
}