/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap');

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}


/********************** TPI CUSTOM *************************/


@media screen and (min-width: 600px) {
	.desk-image {
		display: block;
	}	
	.mobile-image {
		display: none;
	}	
	.enroll {
		position: sticky;
		top: 120px;
	}
	.handle, .buffer {
		display: none;
	}
}
@media screen and (max-width: 600px) {

	header img {
		max-width: 220px !important;
	}
	.desk-image {
		display: none;
	}	
	.mobile-image {
		display: block;
	}	
	.enroll {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 5;
		transition: transform 0.3s ease;
  		transform: translateY(82%); /* show preview */
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
		padding: 0 !important;
		border-radius: 20px 20px 0 0;
		padding-bottom: 1rem !important;
	}	
	.enroll .wp-block-button {
		text-align: center;
		max-width: 260px !important;
	}
	.enroll .wp-block-button__link {
		font-size: 24px !important;
		padding: .5em;
		width: 75% !important;
	}
	.enroll.expanded {
		transform: translateY(0);

		.handle > span:after {
			transform: rotate(135deg);
			top: -2px;
		}
	}
	.enroll p {
		margin-left: 1rem !important;
		margin-right: 1rem !important;
	}
	.handle {
		width: 100%;
		height: 68px;
		margin: 0 0 2rem 0!important;
		position: relative;
		z-index: 1;
		background: #114C8F;
        color: #ffffff;
        padding: 0 1.5rem;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 1.5rem;
		font-family: 'Carlito', sans-serif;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			font-size: .75rem;
			&:after {
				content: "";
				display: inline-block;
				width: 5px;
				height: 5px;
				border-top: 2px solid #fff;
				border-right: 2px solid #fff;
				transform: rotate(-45deg);
				margin-left: 10px;
				position: relative;
				z-index: 10;
			}
		}
	}
}

header {
	position: sticky;
	z-index: 100;
	top: 0;
}

.wp-block-navigation__container li {
	width: 100%;
}

.wp-block-navigation__container li a {
	width: 100%;
	padding: 0 10px !important;
}

.wp-block-navigation-item a:active, .wp-block-navigation-item a:focus {
	outline: none;
	border: none;
}

.current-menu-item a {
	background: #D7E6F5 !important;
}

.flag {
	position: relative;
	display: inline-block;
	height: 23px;
	color: #ffffff;
	background: #FFC203;
	padding: 0 0 0 30px;
	left: -30px;
	width: auto;
	text-transform: uppercase;
	font-size: 16px;
}

.flag span {
	display: inline-block;
	padding: 0 15px;
	height: 23px;
}

.flag span.right {
	position: relative;
	background: #114C8F;
	padding: 0 15px 0 10px;
}

.flag span.right::before {
	content: "";
	position: absolute;
	left: -15px;
	border-bottom: 23px solid #114C8F;
	border-left: 11px solid transparent;
	height: 0;
	width: 15px;
}

.wp-block-button__link:hover {
	background: #008FCD;
	transition: all .25s ease-in-out;
}

.note strong {
	background: #FFC203;
}

.video-box {
	border: 1px solid #000000;
}

/*************** BOTTOM NAV *********************/

.prev-link {
	a {
		position: relative;
		background: #114C8F;
		padding: 6px 18px 6px 35px;
		color: #ffffff;
		text-decoration:none;
		display: inline-block;

		&::after {
			content: "";
			position: absolute;
			top: 50%; /* Adjust as needed for vertical positioning */
			left: 0; /* Adjust for horizontal positioning relative to the parent */
			transform: translateY(-50%); /* Centers vertically */
			width: 0;
			height: 0;
			border-top: 8px solid transparent; /* Adjust size as needed */
			border-bottom: 8px solid transparent; /* Adjust size as needed */
			border-right: 14px solid #ffffff; /* The visible side, adjust color and size */
			border-left: 8px solid transparent; /* Adjust size as needed */
		}

		&:hover {
			opacity: .75;
		}
	}

	&.disabled {
		a {
			background: #D9D9D9;

			&:hover {
				opacity: 1;
			}
		}
	}
}

.next-link {
	a {
		position: relative;
		background: #114C8F;
		padding: 6px 35px 6px 18px;
		color: #ffffff;
		text-decoration:none;
		display: inline-block;

		&::after {
			content: "";
			position: absolute;
			top: 50%; /* Adjust as needed for vertical positioning */
			right: 0; /* Adjust for horizontal positioning relative to the parent */
			transform: translateY(-50%); /* Centers vertically */
			width: 0;
			height: 0;
			border-top: 8px solid transparent; /* Adjust size as needed */
			border-bottom: 8px solid transparent; /* Adjust size as needed */
			border-left: 14px solid #ffffff; /* The visible side, adjust color and size */
			border-right: 8px solid transparent; /* Adjust size as needed */
		}

		&:hover {
			opacity: .75;
		}
	}

	&.disabled {
		a {
			background: #D9D9D9;

			&:hover {
				opacity: 1;
			}
		}
	}
}


/*************** COMPARE TABLE *********************/

div.table-container {
	overflow: auto;
	max-width: calc(100vw - 16px);
	max-height: calc(100vh - 40px);
}

@media screen and (max-width: 600px) {

	div.table-container {
		max-height: calc(100vh - 250px);
	}

}

.compare-table {
	border-collapse: collapse;
	min-width: 600px;
}

.compare-table thead {
	background-color: #ccc;
}

.compare-table th,
.compare-table td {
	border: 1px solid #ccc;
	padding: 8px;
	background: #fff;
	min-width: 80px;
}

.compare-table thead {
	position: relative;
	z-index: 10;
}

.compare-table .sticky-header {
	position: sticky;
	top: 0;
	background: #114c8f;
	color: #fff;
	z-index: 2;
}

.compare-table thead tr:nth-child(1) .sticky-header {
	height: 73px;
	box-sizing: border-box;
}

.compare-table thead tr:nth-child(2) .sticky-header {
	top: 74px;
	background: #008fcd;
}

.compare-table tbody .sticky-col {
	position: sticky;
	left: 0;
	background: #f8f8f8;
	z-index: 3;
	max-width: 35vw;
	min-width: 80px;
	font-weight: normal;
	text-align: left;
}

.sticky-corner {
	position: sticky;
	left: 0;
	top: 0;
	z-index: 20 !important;
}

.compare-table tbody tr td {
	text-align: center;
}

.compare-table tbody tr td:nth-child(2),
.compare-table tbody tr td:nth-child(3)  {
	background: #D7E6F5;
}

.compare-table .row-group-start th {
	font-weight: bold;
}

.compare-table tbody:not(:last-of-type) {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		background-color: #4d4d4f;
	}

}

.compare-table tbody:not(:last-of-type) tr:last-of-type th,
.compare-table tbody:not(:last-of-type) tr:last-of-type td {
	/* border-bottom: 1px solid black; */
}

.compare-table tbody tr:not(:only-of-type):first-of-type th {
	font-weight: bold;
}