/* THIS FILE IS UPDATED BY A REMOTE SCRIPT. */
/* ANY CHANGES MADE TO THIS FILE WILL BE LOST IN A FUTURE UPDATE. */

/*
  Responsive desktop layout.
  Only loaded when SYS_RESPONSIVE_DESKTOP is "Y" (see mobile_head.php), and only for desktop browsers.
  Everything is inside a media query, so a window of 1300px or wider looks exactly as before.

  Below 900px the phone version of the page is normally printed by the server (cookie rd_layout, see layout_switch.php) and swapped in by
  responsive_desktop.js. The rules marked PHONE-MODE PATCH are an older way of making the desktop markup look like the phone layout with
  css and script only. They are switched off (PHONE_PATCHES = false in responsive_desktop.js) and only kept for now.
*/

/* the hamburger menu is built by responsive_desktop.js and only shown when the window is narrow */
.responsive_menu.menu_button,
.responsive_menu.mobile_nav_bg,
.responsive_menu.mobile_nav_external {
	display: none;
}

/* The phone version that is printed to a desktop browser with a narrow window (cookie rd_layout, html[data-rd-layout="phone"]) has the footer
   link "View Full Site" (printed by html_output.php of the site, for real phones). Here it makes no sense: the full site is back as soon as
   the window is wider, so the whole block (with its padding) is hidden. */
html[data-rd-layout="phone"] .fullsite {
	display: none !important;
}

/* No scrolling of the page while a menu panel is open (the one the phone version prints, or the one responsive_desktop.js builds). Both set
   overflow: hidden on the body when they open, but the rules below 1300px that stop the sideways scrolling use !important and would win. */
html:has(.mobile_nav_external.show-nav),
html:has(.mobile_nav_external.show-nav) body {
	overflow: hidden !important;
}

/* After a swap between the desktop and the phone version nothing may fade or slide in: the new version is there at once (the class is set by
   responsive_desktop.js for about 1.5 seconds). */
/* while the page is rebuilt the screen shows what is behind it: the dark fill of the site instead of white */
html.rd-swapping {
	background-color: var(--dark-fill, #111111);
}
html.rd-swapping #PageBgImage,
html.rd-swapping #PageBgImage * {
	-webkit-transition: none !important;
	transition: none !important;
	animation-duration: 0.001s !important;
	animation-delay: 0s !important;
}

/* no sliding of the menu panel while the window is being resized (the class is set by responsive_desktop.js) */
.responsive-resizing .responsive_menu,
.responsive-resizing .responsive_menu * {
	-webkit-transition: none !important;
	transition: none !important;
}

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

	/* no more sideways scrolling, and no minimum page width */
	html,
	body {
		min-width: 0 !important;
		overflow-x: hidden !important;
	}
	#PageBgImage,
	[class*="PageWidthLimit"],
	[class*="content_container_external"],
	.header_container_external,
	.header_container_external_home {
		min-width: 0 !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.content_container_external .content_container_max {
		width: 100% !important;
		box-sizing: border-box;
	}
	.content_container_external:not(.slide_full) .content_container_max {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	.content_container_external .content_container,
	.content_container_external .content.content_full,
	.header,
	.header_home,
	.header_container,
	.header_container_home {
		width: 100% !important;
		max-width: 1200px;
		min-width: 0 !important;
		box-sizing: border-box;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.header_container,
	.header_container_home {
		max-width: 1300px;
	}
	.header_container_external_home .header,
	.header_container_external .header,
	.header_container_external_home .header_home,
	.header_container_external .header_home {
		max-width: 1300px;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	/* The width of the tile holders is not set here. The server prints calc(100% + 50px) on a holder whose tiles have a 50px gutter on the right
	   (the last tile then ends at the edge of the content) and 100% on a holder with a single full width tile. One width for all of them is wrong
	   either way: 100% leaves the last tile 50px short of the content edge, calc(100% + 50px) makes the single tiles 50px too wide. */

	/* the top bar is hidden: there is no room for it. It keeps its height (visibility, not display) so the logo and everything below stay where they are */
	.header_top_bar {
		width: 100% !important;
		max-width: 1200px;
	}

	/* a tile holder with a carousel or a conveyor (a row of logos that scrolls) in it is a table (shrink to fit), and the carousel or conveyor makes
	   it as wide as its own width (1200px): the carousel then keeps that width in a narrower window and cannot fit the number of slides to the
	   room, and the conveyor (which scales itself to the width of its holder) cannot see that it has to get smaller. As a block the holder is as
	   wide as the content area. */
	.tile_holder:has(.slick-gallery),
	.tile_holder:has(.uniteconveyor) {
		display: block !important;
	}

	/* the cards of a featured carousel have a pixel width for a 1200px wide carousel (575px for 2 slides, 366.66px for 3, ...): they follow the width of
	   their slide instead (the number of slides is fitted to the room by responsive_desktop.js) */
	.content_container_external .featured-carousel .slick-gallery .slick-list .slick-track .slick-slide > div > div > div {
		width: 100% !important;
	}

	/* a page with a sidebar (the members area, for example): .content is 850px wide and floats beside the 350px sidebar (300px + 50px of
	   padding), which together make the 1200px of the page. The sidebar keeps its width and the content takes what is left. */
	.content_container_external .content:has(~ .sidebar) {
		width: calc(100% - 350px) !important;
		min-width: 0 !important;
		box-sizing: border-box;
	}

	/* hamburger menu instead of the normal navigation */
	.header_container_external_home.nav-collapsed .header_top,
	.header_container_external.nav-collapsed .header_top {
		margin-right: 70px !important; /* room for the hamburger button (52px wide) at the right edge */
		display: block !important;
	}
	/* The normal navigation is moved out of sight, not removed with display: none, because the page measures its width once when it
	   loads (runMaxWidthNav in common_functions_v001.js): with display: none it would measure 0 and stay 0 wide after widening. */
	.main_nav,
	.top_nav {
		position: absolute !important;
		left: -9999px !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}
	.responsive_menu.menu_button {
		display: block;
	}
	.responsive_menu.mobile_nav_bg,
	.responsive_menu.mobile_nav_external {
		display: block;
	}
	/* the dropdown scripts set a pixel width on every ul.nav (measured on the wide desktop menu), including the copy in the hamburger
	   panel; a row wider than the panel pushes the + buttons out of sight */
	#mobile_nav.responsive_menu ul.nav {
		width: 100% !important;
	}

	/* the footer */
	[class*="footer_container_external"] {
		min-width: 0 !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.footer_copyright_inner {
		width: 100% !important;
		max-width: 1300px;
		padding-left: 30px;
		padding-right: 30px;
		box-sizing: border-box;
	}
	/* a block inside a tile with its own fixed width (for example a heading set to 550px) can't be wider than its tile */
	.tile_holder .tile > .tile_inner {
		max-width: 100% !important;
		box-sizing: border-box;
	}
	.footer_container,
	.footer {
		width: 100% !important;
		max-width: 1200px;
		min-width: 0 !important;
		box-sizing: border-box;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	html:not([data-rd-layout="phone"]) .footer_container {
		width: calc(100% - 60px) !important;
		margin-left: 30px !important;
		margin-right: 30px !important;
	}
	html:not([data-rd-layout="phone"]) .footer_special,
	html:not([data-rd-layout="phone"]) .footer_stay_connected .footer_stay_connected_internal {
		width: 100% !important;
		max-width: 1300px;
		min-width: 0 !important;
		box-sizing: border-box;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
	html:not([data-rd-layout="phone"]) .footer_special .footer_special_internal {
		width: 100% !important;
	}
	html:not([data-rd-layout="phone"]) .footer_stay_connected {
		width: 100% !important;
		max-width: 1300px;
		min-width: 0 !important;
	}
	html:not([data-rd-layout="phone"]) .footer_stay_connected h1,
	html:not([data-rd-layout="phone"]) .footer_stay_connected h2,
	html:not([data-rd-layout="phone"]) .footer_stay_connected h3,
	html:not([data-rd-layout="phone"]) .footer_stay_connected h4 {
		max-width: calc(100% - 350px) !important;
	}
}

/* the contact strip (header_top: phone, e-mail, hours) is hidden when its content does not fit on one row (measured by responsive_desktop.js,
   class on the html element, the same way as the top bar). Not in the phone version, which has its own header. */
html.rd-headertop-hidden:not([data-rd-layout="phone"]) .header_container_external_home .header_top,
html.rd-headertop-hidden:not([data-rd-layout="phone"]) .header_container_external .header_top {
	display: none !important;
}

/* the top bar is hidden when its content does not fit on one row (measured by responsive_desktop.js, class on the html element) */
html.rd-topbar-hidden:not([data-rd-layout="phone"]) .header_top_bar {
	visibility: hidden !important;
}

/* the top bar is hidden below 900px as well (desktop layout): it keeps its height so the logo and everything below stay where they are */
@media only screen and (max-width: 899px) {
	/* the top bar is hidden: there is no room for it. It keeps its height (visibility, not display) so the logo and everything below stay where they are */
	html:not([data-rd-layout="phone"]) .header_top_bar {
		visibility: hidden !important;
	}
	/* the contact strip as well, at once: until the phone version has arrived (the desktop version is still on the screen for a moment) it must not show */
	html:not([data-rd-layout="phone"]) .header_container_external_home .header_top,
	html:not([data-rd-layout="phone"]) .header_container_external .header_top {
		display: none !important;
	}
}

/* PHONE-MODE PATCH (switched on only when responsive_desktop.js has PHONE_PATCHES = true: the html element then has the class rd-phone-patches) */
/* tiles stack in one column on narrow windows */
@media only screen and (max-width: 899px) {
	html.rd-phone-patches body [class*="content_container_external"] .tile_holder {
		display: block !important;
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	/* the extra selectors are needed to win against the width rules of tiles with a background image */
	html.rd-phone-patches body [class*="content_container_external"] .tile_holder .tile.content[class*="tile_size_"] {
		display: block !important;
		float: none !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* no gutter on the right of a stacked tile, except for tiles with a background fill: the phone styles give those their own padding */
	html.rd-phone-patches body [class*="content_container_external"] .tile_holder .tile.content[class*="tile_size_"]:not(.white-fill):not(.dark-fill):not(.light-fill):not(.alt-fill):not(.other-fill):not(.darker-fill) {
		padding-right: 0 !important;
	}
	/* 30px between stacked tiles */
	html.rd-phone-patches body [class*="content_container_external"] .tile_holder .tile.content[class*="tile_size_"] ~ .tile.content[class*="tile_size_"] {
		margin-top: 30px !important;
	}
	/* a block inside a tile with its own fixed width (for example a picture or a heading set to 550px) */
	html.rd-phone-patches .tile_holder .tile > .tile_inner {
		float: none !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* the footer columns stack */
@media only screen and (max-width: 1199px) {
	.footer .panels,
	.footer .panels .panel {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box;
	}
	.footer .panels .panel {
		margin: 0px auto;
		padding: 30px 30px 0px 30px;
		text-align: center;
	}
	.footer .panels .panel_1 {
		padding: 0px 30px 0px 30px;
	}
	.footer .panels .links_table {
		margin: 0px auto;
	}
}

/* the text box on top of the banner image (desktop header): it is a fixed 1200px wide table cell with inline widths */
@media only screen and (max-width: 1299px) {
	.header_container_external_home .banner_overlay .text_outer,
	.header_container_external .banner_overlay .text_outer {
		width: 100% !important;
	}
	.header_container_external_home .banner_overlay .text_overlay,
	.header_container_external .banner_overlay .text_overlay {
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		padding-left: 30px !important;
		padding-right: 45% !important;
	}
	.header_container_external_home .banner_overlay .text_overlay.text_on_right,
	.header_container_external .banner_overlay .text_overlay.text_on_right {
		padding-left: 45% !important;
		padding-right: 30px !important;
	}
	.header_container_external_home .banner_overlay .text_overlay.text_full_width,
	.header_container_external .banner_overlay .text_overlay.text_full_width {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}
@media only screen and (max-width: 699px) {
	.header_container_external_home .banner_overlay .text_overlay,
	.header_container_external .banner_overlay .text_overlay,
	.header_container_external_home .banner_overlay .text_overlay.text_on_right,
	.header_container_external .banner_overlay .text_overlay.text_on_right {
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* PHONE-MODE PATCH (switched on only when responsive_desktop.js has PHONE_PATCHES = true: the html element then has the class rd-phone-patches) */
/* the phone header (below 900px): the picture is on top and the text under it, and the text is as wide as the banner.
   The text boxes keep the table display of the phone styles (not block): that is what makes the text panel of every slide as tall as the tallest one. */
html.rd-phone-patches .header_container_external_home_mobile .banner_overlay,
html.rd-phone-patches .header_container_external_mobile .banner_overlay {
	width: 100% !important;
	max-width: 100% !important;
}
html.rd-phone-patches .header_container_external_home_mobile .banner_overlay .text_outer,
html.rd-phone-patches .header_container_external_mobile .banner_overlay .text_outer {
	width: 100% !important;
	max-width: 100% !important;
}
html.rd-phone-patches .header_container_external_home_mobile .banner_overlay .text_overlay,
html.rd-phone-patches .header_container_external_mobile .banner_overlay .text_overlay,
html.rd-phone-patches .header_container_external_home_mobile .banner_overlay .text_overlay.text_on_right,
html.rd-phone-patches .header_container_external_mobile .banner_overlay .text_overlay.text_on_right,
html.rd-phone-patches .header_container_external_home_mobile .banner_overlay .text_overlay.text_full_width,
html.rd-phone-patches .header_container_external_mobile .banner_overlay .text_overlay.text_full_width {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0px !important;
	padding-left: 30px !important;
	padding-right: 30px !important;
	box-sizing: border-box;
}

/* PHONE-MODE PATCH (switched on only when responsive_desktop.js has PHONE_PATCHES = true: the html element then has the class rd-phone-patches) */
/* card tables (news, testimonials, events): one column, full width, and the wrapper must not keep a fixed 100% height */
@media only screen and (max-width: 899px) {
	html.rd-phone-patches .content table.news,
html.rd-phone-patches .content table.news tbody,
html.rd-phone-patches .content table.news tr,
html.rd-phone-patches .content table.news td,
html.rd-phone-patches .content table.testimonials,
html.rd-phone-patches .content table.testimonials tbody,
html.rd-phone-patches .content table.testimonials tr,
html.rd-phone-patches .content table.testimonials td {
		display: block;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	html.rd-phone-patches [class*="content_container_external"] .news_holder {
		height: auto !important;
	}
	/* The cells of the news, events and similar card lists: full width, no gutter on the right, and a 40px gap under each card like the
	   phone page has. (A tile with the "table-stack" option already gets its spacing from the phone styles.) */
	html.rd-phone-patches [class*="content_container_external"]:not(.table-stack) .content:not(.table-stack) table.news td {
		padding: 0px 0px 40px 0px !important;
	}
	html.rd-phone-patches [class*="content_container_external"]:not(.table-stack) .content:not(.table-stack) table.news tr:last-child td:last-child {
		padding-bottom: 0px !important;
	}
}

/* PHONE-MODE PATCH (switched on only when responsive_desktop.js has PHONE_PATCHES = true: the html element then has the class rd-phone-patches) */
/* The photo gallery table (portfolio): the phone page prints 2 pictures per row, the desktop page 3. Below 700px the cells wrap two per
   row, like on the phone page. */
@media only screen and (max-width: 699px) {
	html.rd-phone-patches .content table.portfolio,
html.rd-phone-patches .content table.portfolio tbody {
		display: block;
		width: 100% !important;
	}
	html.rd-phone-patches .content table.portfolio {
		width: calc(100% + 20px) !important; /* each cell has a 20px gutter on the right that sits outside the column */
	}
	html.rd-phone-patches .content table.portfolio tbody {
		display: flex;
		flex-wrap: wrap;
	}
	html.rd-phone-patches .content table.portfolio tr {
		display: contents;
	}
	html.rd-phone-patches .content table.portfolio td {
		display: block;
		flex: 0 0 50%;
		width: 50% !important;
		box-sizing: border-box;
	}
	html.rd-phone-patches .content table.portfolio td:not(:has(*)) {
		display: none;
	}
}