/* 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 .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_external_home .header,
	.header_container_external .header,
	.header_container_external_home .header_home,
	.header_container_external .header_home {
		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;
	}

	/* hamburger menu instead of the normal navigation */
	.header_container_external_home.nav-collapsed .header_top,
	.header_container_external.nav-collapsed .header_top {
		margin-right: 0 !important;
		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: 1200px;
		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;
	}
}

/* the contact strip (header_top: phone, e-mail, hours) is hidden from 1049px down: it does not fit next to the hamburger menu any more.
   Not in the phone version, which has its own header. */
@media only screen and (max-width: 1049px) {
	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;
	}
}

/* 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;
	}
}

/* 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;
	}
}