/**
 * Ohio CAPS reflow helpers (DEV child theme).
 * WCAG 1.4.10 — usable layout near 320px without horizontal scroll.
 * Header: logo + hamburger on row 1; search (field + button) below logo
 * with side padding from tablet widths through 320px.
 */

/* ------------------------------------------------------------------ */
/* Global: kill Eduma primary-button chrome on our menu disclosures    */
/* (Learners was navy-on-navy on desktop because this only lived in a   */
/* max-width:767px block before).                                      */
/* ------------------------------------------------------------------ */
button.ohio-caps-submenu-toggle,
button.ohio-caps-submenu-toggle:hover,
button.ohio-caps-submenu-toggle:focus,
button.ohio-caps-submenu-toggle:active,
button.ohio-caps-submenu-toggle:not(.owl-page) {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	text-shadow: none !important;
	color: inherit !important;
	min-height: 0 !important;
}

nav.width-navigation button.ohio-caps-submenu-toggle.ohio-caps-menu-link,
nav.width-navigation button.ohio-caps-submenu-toggle.ohio-caps-menu-link:hover,
nav.width-navigation button.ohio-caps-submenu-toggle.ohio-caps-menu-link:focus {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.35rem !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
	font: inherit !important;
	font-weight: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	text-transform: inherit !important;
	letter-spacing: inherit !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* Close / hamburger: real <button> inherits Eduma button:not(.owl-page)
   primary fill — keep chrome clear so only the icon bars show. */
button.menu-mobile-effect.navbar-toggle,
button.menu-mobile-effect.navbar-toggle:hover,
button.menu-mobile-effect.navbar-toggle:focus,
button.menu-mobile-effect.navbar-toggle:focus-visible,
button.menu-mobile-effect.navbar-toggle:active,
button.menu-mobile-effect.navbar-toggle:not(.owl-page) {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	text-shadow: none !important;
	min-height: 0 !important;
	padding: 0 !important;
}

/* Close (X) sits on the white drawer — dark bars, not white-on-light. */
body.mobile-menu-open .menu-mobile-effect.navbar-toggle .icon-bar,
.menu-mobile-effect.navbar-toggle.close-icon .icon-bar {
	background-color: #285885 !important;
}

body.mobile-menu-open .menu-mobile-effect.navbar-toggle,
.menu-mobile-effect.navbar-toggle.close-icon {
	color: #285885 !important;
	background: transparent !important;
	background-color: transparent !important;
}

@media (max-width: 767px) {
	.elementor-widget-heading .elementor-heading-title,
	.elementor-widget-heading h1.elementor-heading-title,
	h1.elementor-heading-title,
	.elementor-element .elementor-heading-title,
	.page-title h1,
	.top_site_main .page-title-wrapper .page-title h1 {
		font-size: clamp(1.625rem, 7vw, 2.25rem) !important;
		line-height: 1.2 !important;
		overflow-wrap: anywhere;
		word-break: break-word;
		max-width: 100% !important;
		white-space: normal !important;
	}

	.site-header,
	.thim-nav-wrapper,
	.thim-nav-wrapper.container,
	.header_main_menu_wrapper,
	.wrapper-logo-menu,
	.navigation.col-sm-12,
	.row {
		max-width: 100% !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	.tm-table {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) 2.75rem !important;
		grid-template-areas:
			"logo toggle"
			"search search" !important;
		align-items: center !important;
		column-gap: 0.75rem !important;
		row-gap: 0.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-left: 0.75rem !important;
		padding-right: 0.75rem !important;
		box-sizing: border-box !important;
		table-layout: auto !important;
		float: none !important;
	}

	.tm-table > .width-logo {
		grid-area: logo !important;
		display: block !important;
		float: none !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding-right: 0 !important;
	}

	.tm-table > .width-logo .thim-logo,
	.tm-table > .width-logo a {
		display: inline-block !important;
		max-width: 100% !important;
	}

	.tm-table > .width-logo img {
		display: block !important;
		max-width: 100% !important;
		width: auto !important;
		height: auto !important;
		max-height: 52px !important;
	}

	.tm-table > .menu-mobile-effect.navbar-toggle,
	.tm-table > button.menu-mobile-effect.navbar-toggle {
		grid-area: toggle !important;
		justify-self: end !important;
		align-self: center !important;
		position: relative !important;
		float: none !important;
		margin: 0 !important;
		min-width: 2.5rem !important;
		min-height: 2.5rem !important;
		z-index: 5 !important;
	}

	.tm-table > .width-navigation {
		grid-area: search !important;
		display: block !important;
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.tm-table > .width-navigation > .navbar-nav > li.menu-item:not(.menu-right) {
		display: none !important;
	}

	.tm-table > .width-navigation > .navbar-nav,
	.tm-table > .width-navigation > .navbar-nav > li.menu-right,
	.tm-table > .width-navigation > .navbar-nav > li.menu-right > ul {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.tm-table > .width-navigation > .navbar-nav > li.menu-right > ul > li {
		display: block !important;
		width: 100% !important;
		float: none !important;
	}

	.navigation .menu-right ul li .search-form.a11y-compliant-search,
	.tm-table .search-form.a11y-compliant-search,
	#search-2 .search-form.a11y-compliant-search {
		display: flex !important;
		flex-wrap: nowrap !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 0.5rem !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		padding: 0.15rem 0 0.35rem !important;
		box-sizing: border-box !important;
	}

	.navigation .menu-right ul li .search-form.a11y-compliant-search label,
	.tm-table .search-form.a11y-compliant-search label {
		display: block !important;
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
	}

	.navigation .menu-right ul li .search-form.a11y-compliant-search .search-field,
	.tm-table .search-form.a11y-compliant-search .search-field,
	#search-2 .search-form.a11y-compliant-search .search-field {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.navigation .menu-right ul li .search-form.a11y-compliant-search .search-submit,
	.tm-table .search-form.a11y-compliant-search .search-submit,
	#search-2 .search-form.a11y-compliant-search .search-submit {
		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 6rem !important;
	}

	.wrapper-container,
	.content-pusher,
	#main-content,
	.site-content {
		max-width: 100% !important;
		overflow-x: clip;
	}

	body {
		overflow-x: hidden;
	}

	/* ---- Mobile drawer: accordion layout ---- */
	.mobile-menu-wrapper .navbar-nav li.menu-item-has-children,
	.mobile-menu-container li.menu-item-has-children,
	nav.mobile-menu-container li.menu-item-has-children {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: center !important;
		position: relative !important;
		padding-right: 0 !important;
	}

	.mobile-menu-wrapper .navbar-nav li.menu-item-has-children > a,
	.mobile-menu-container li.menu-item-has-children > a,
	nav.mobile-menu-container li.menu-item-has-children > a {
		flex: 1 1 auto !important;
		min-width: 0 !important;
	}

	.mobile-menu-wrapper .navbar-nav li.menu-item > button.ohio-caps-submenu-toggle.ohio-caps-menu-link,
	.mobile-menu-container li.menu-item > button.ohio-caps-submenu-toggle.ohio-caps-menu-link,
	nav.mobile-menu-container li.menu-item > button.ohio-caps-submenu-toggle.ohio-caps-menu-link {
		flex: 1 1 auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 0.5rem !important;
		width: 100% !important;
		max-width: 100% !important;
		position: static !important;
		float: none !important;
		height: auto !important;
		min-height: 0 !important;
		text-align: left !important;
		padding: 8px 0 !important;
		margin: 0 !important;
		box-sizing: border-box !important;
		color: #285885 !important;
		font-size: 18px !important;
		font-weight: 600 !important;
		line-height: 20px !important;
		text-transform: none !important;
		letter-spacing: normal !important;
		background: transparent !important;
		background-color: transparent !important;
	}

	.mobile-menu-wrapper .navbar-nav li.menu-item > button.ohio-caps-submenu-toggle.icon-toggle,
	.mobile-menu-container li.menu-item > button.ohio-caps-submenu-toggle.icon-toggle,
	nav.mobile-menu-container li.menu-item > button.ohio-caps-submenu-toggle.icon-toggle {
		position: static !important;
		flex: 0 0 40px !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 40px !important;
		height: 40px !important;
		min-width: 40px !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		background-color: transparent !important;
		color: #285885 !important;
		font-size: 14px !important;
		line-height: 1 !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
	}

	/* Closed: beat Eduma fixed+translate(-100%) panel so no empty gaps. */
	.mobile-menu-wrapper .navbar-nav li.menu-item:not(.ohio-caps-open) > .sub-menu,
	.mobile-menu-wrapper .navbar-nav li.menu-item:not(.ohio-caps-open) > .thim-ekits-menu__content,
	.mobile-menu-container li.menu-item:not(.ohio-caps-open) > .sub-menu,
	nav.mobile-menu-container li.menu-item:not(.ohio-caps-open) > .sub-menu {
		display: none !important;
		height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
		position: static !important;
		transform: translate(0, 0) !important;
		-webkit-transform: translate(0, 0) !important;
		left: auto !important;
		top: auto !important;
		width: auto !important;
		max-width: none !important;
	}

	/* Open: accordion in-flow. Eduma defaults to translate(-100%); identity
	   translate(0,0) keeps links on-screen (transform:none alone does not). */
	.mobile-menu-wrapper .navbar-nav li.ohio-caps-open > .sub-menu,
	.mobile-menu-wrapper .navbar-nav li.ohio-caps-open > .thim-ekits-menu__content,
	.mobile-menu-container li.ohio-caps-open > .sub-menu,
	nav.mobile-menu-container li.ohio-caps-open > .sub-menu {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		display: block !important;
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 0.25rem 0 0.5rem 1rem !important;
		margin: 0 !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		bottom: auto !important;
		float: none !important;
		transform: translate(0, 0) !important;
		-webkit-transform: translate(0, 0) !important;
		z-index: auto !important;
		background: transparent !important;
	}

	/* Nested flyouts stay closed until their own toggle opens. */
	.mobile-menu-wrapper .navbar-nav li.ohio-caps-open .sub-menu li:not(.ohio-caps-open) > .sub-menu,
	.mobile-menu-container li.ohio-caps-open .sub-menu li:not(.ohio-caps-open) > .sub-menu {
		display: none !important;
		height: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transform: translate(0, 0) !important;
	}

	.mobile-menu-wrapper .navbar-nav li.ohio-caps-open > .sub-menu > li > a,
	.mobile-menu-container li.ohio-caps-open > .sub-menu > li > a,
	nav.mobile-menu-container li.ohio-caps-open > .sub-menu > li > a {
		display: block !important;
		position: static !important;
		color: #285885 !important;
		padding: 8px 0 !important;
		transform: none !important;
	}
}

/*
 * Drawer chevrons: keep one down-glyph and rotate it so it visibly turns.
 * Closed → point right (-90deg). Open → point down (0).
 * (Eduma remaps .icon-toggle to a right glyph with no open-state turn.)
 */
.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle .edu-angle-down,
.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle i {
	display: inline-block;
	transform: rotate(-90deg);
	transition: transform 0.2s ease;
}

.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle[aria-expanded="true"] .edu-angle-down,
.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle[aria-expanded="true"] i,
.mobile-menu-wrapper ul li.ohio-caps-open > button.ohio-caps-submenu-toggle .edu-angle-down,
.mobile-menu-wrapper ul li.ohio-caps-open > button.ohio-caps-submenu-toggle i {
	transform: rotate(0deg);
}

/* icon-toggle: Eduma forces a right-pointing glyph — rotate that to down when open. */
.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle.icon-toggle i,
.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle.icon-toggle .edu-angle-down {
	transform: rotate(0deg);
}

.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle.icon-toggle[aria-expanded="true"] i,
.mobile-menu-wrapper ul li > button.ohio-caps-submenu-toggle.icon-toggle[aria-expanded="true"] .edu-angle-down,
.mobile-menu-wrapper ul li.ohio-caps-open > button.ohio-caps-submenu-toggle.icon-toggle i,
.mobile-menu-wrapper ul li.ohio-caps-open > button.ohio-caps-submenu-toggle.icon-toggle .edu-angle-down {
	transform: rotate(90deg);
}

@media (max-width: 480px) {
	.elementor-widget-heading h1.elementor-heading-title,
	h1.elementor-heading-title {
		font-size: 1.625rem !important;
	}

	.tm-table > .width-logo img {
		max-height: 44px !important;
	}
}

@media (max-width: 360px) {
	.tm-table > .width-logo img {
		max-height: 40px !important;
	}
}