/*
 * Mobile and tablet layout for gvp_generic.
 *
 * The desktop design is a fixed 1060px column. Everything that changes the
 * layout lives inside the media queries below, so screens wider than 1060px
 * render exactly as before.
 *
 *   <= 1060px  fluid page, single main column, tap menu (#mobile-nav)
 *   <=  700px  phones: sidebars full width, larger body text
 */

/* Mobile-only elements stay hidden on desktop. */
.mobile-nav-toggle,
#mobile-nav {
	display: none;
}

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

	/* ---- Page frame ---- */
	#content {
		width: auto;
		overflow: visible;
	}
	/* Decorative maroon images either side of the 1060px column. */
	.sidebar-column {
		display: none;
	}

	/* ---- Header: logo left, menu button right, search underneath ---- */
	#top {
		height: auto;
		padding: 8px 12px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		box-sizing: border-box;
	}
	/* Logo (linked to the home page): the two images side by side. */
	#top .site-logo {
		display: flex;
		align-items: center;
	}
	#top .site-logo img {
		height: 56px;
		width: auto;
	}
	.mobile-nav-toggle {
		display: inline-block;
		margin-left: auto;
		padding: 9px 14px;
		background: transparent;
		border: 1px solid #916E49;
		border-radius: 4px;
		color: #C5945A;
		font: bold 14px Tahoma, Arial, Helvetica, sans-serif;
		cursor: pointer;
	}
	.mobile-nav-toggle .bars {
		display: inline-block;
		width: 18px;
		height: 2px;
		margin: 0 9px 0 0;
		vertical-align: middle;
		background: currentColor;
		box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
	}
	.mobile-nav-toggle[aria-expanded="true"] {
		background: #916E49;
		color: #FFFFFF;
	}
	/* Tablets: search sits between the logo and the menu button. */
	#top .block-search {
		order: 2;
		flex: 0 1 360px;
		margin: 0 0 0 auto;
	}
	#top .mobile-nav-toggle {
		order: 3;
		margin-left: 12px;
	}
	#top .block-search .container-inline {
		display: flex;
	}
	#top .block-search .form-item {
		flex: 1 1 auto;
		margin: 0 6px 0 0;
	}
	#top .block-search label {
		position: absolute;
		left: -9999px;
	}
	#top .block-search input.form-text {
		width: 100%;
		padding: 6px;
		box-sizing: border-box;
		font-size: 16px; /* 16px stops iOS zooming in on focus */
	}
	/* The hover mega-dropdown is replaced by #mobile-nav. */
	#top ul.megamenu {
		display: none !important;
	}

	/* ---- Tap menu ---- */
	#mobile-nav.is-open {
		display: block;
		background: #4D0302;
		border-top: 1px solid #916E49;
	}
	#mobile-nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	#mobile-nav li {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid #6E2A1A;
	}
	#mobile-nav a.mn-link,
	#mobile-nav .mn-section {
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 14px 16px;
		background: none;
		border: 0;
		color: #C5945A;
		font: bold 15px Georgia, "Times New Roman", serif;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		text-align: left;
		text-decoration: none;
		cursor: pointer;
	}
	#mobile-nav .mn-section:after {
		content: "+";
		float: right;
		font-family: Tahoma, Arial, sans-serif;
	}
	#mobile-nav li.is-expanded .mn-section:after {
		content: "\2212"; /* minus sign */
	}
	#mobile-nav .mn-sub {
		display: none;
		padding: 2px 16px 12px 28px;
		background: #5C1207;
	}
	#mobile-nav li.is-expanded .mn-sub {
		display: block;
	}
	#mobile-nav .mn-heading {
		margin: 12px 0 2px;
		color: #E3CBA5;
		font: 14px Tahoma, Arial, Helvetica, sans-serif;
	}
	#mobile-nav .mn-sub a {
		display: block;
		padding: 8px 0;
		color: #C5945A;
		font-size: 14px;
	}
	#mobile-nav .mn-sub a.is-current,
	#mobile-nav a.mn-link.is-current {
		color: #FFFFFF;
	}

	/* ---- Banner image / home slideshow ---- */
	#main-image {
		height: auto;
	}
	canvas#main-image,
	#main-image img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* ---- Home page tiles ---- */
	#select-bar,
	#block-block-1,
	#block-block-1 div.content,
	#block-block-1 ul,
	#block-block-1 li {
		height: auto;
	}
	#block-block-1 ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0 0 12px;
	}
	#block-block-1 li {
		float: none;
	}
	.menu-block {
		float: none;
		margin: 15px 7px 0;
	}

	/* ---- Columns: main content first, then the sidebars ---- */
	#content-wrapper {
		display: flex;
		flex-wrap: wrap;
	}
	#main-content,
	#main-content-front {
		order: -1;
		float: none;
		flex: 1 1 100%;
		width: auto !important; /* overrides the inline px width from gvp_generic_get_center_width() */
		min-width: 0;
		margin: 12px 10px 0;
		box-sizing: border-box;
		overflow-wrap: break-word;
		word-wrap: break-word;
	}
	#left,
	#right {
		float: none;
		flex: 1 1 50%;
		width: auto;
		min-width: 0;
		box-sizing: border-box;
	}

	/* ---- Keep page content inside the screen ---- */
	#main-content img,
	#main-content-front img {
		max-width: 100%;
		height: auto;
	}
	#main-content div,
	#main-content-front div,
	#main-content p,
	#main-content-front p,
	#main-content iframe,
	#main-content-front iframe,
	#main-content embed,
	#main-content-front embed,
	#main-content object,
	#main-content-front object,
	#main-content video,
	#main-content-front video,
	#main-content input,
	#main-content select,
	#main-content textarea {
		max-width: 100%;
	}
	/* Registration forms: fieldsets grow to fit their widest input by default
	   (min-width: min-content), which pushed inputs off the screen. */
	#main-content fieldset {
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
	}
	#main-content legend {
		max-width: 100%;
		white-space: normal;
	}
	#main-content input.form-text,
	#main-content textarea,
	#main-content select {
		box-sizing: border-box;
	}

	/* Wide tables scroll sideways instead of widening the page. */
	#main-content table,
	#main-content-front table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	/* ---- Social links: a bar of icons fixed to the bottom of the screen ---- */
	.sticky-container {
		position: fixed;
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		margin: 0;
		padding: 6px 4px;
		padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); /* iPhone home bar */
		background: #4D0302;
		border-top: 1px solid #916E49;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25);
	}
	.sticky {
		display: flex;
		justify-content: space-around;
		max-width: 480px;
		margin: 0 auto;
		padding: 0;
	}
	.sticky li,
	.sticky li:hover {
		position: relative;
		height: auto;
		margin: 0;
		padding: 0;
		background: none;
	}
	.sticky li img {
		display: block;
		float: none;
		width: 34px;
		height: 34px;
		margin: 0;
	}
	/* The link is the text in the <p>: stretch it over the icon so the icon is
	   the tap target, and hide the words visually (screen readers still read them). */
	.sticky li p {
		margin: 0;
		padding: 0;
	}
	#main-content-front .sticky li p a { /* id beats the "#main-content-front a" text rules */
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: hidden;
		color: transparent;
		font-size: 0;
	}
	/* Keep the bottom of the page (footer) clear of the bar. */
	body:has(.sticky-container) #footer {
		padding-bottom: 56px;
	}
}

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

	#left,
	#right {
		flex-basis: 100%;
	}

	/* Larger, easier-to-read body text on phones. */
	#main-content,
	#main-content-front {
		margin: 10px 8px 0;
		font-size: 15px;
		line-height: 1.5;
	}
	#main-content {
		padding: 0 12px 15px;
	}
	#main-content a,
	#main-content-front a {
		font-size: inherit;
	}

	#top .site-logo img {
		height: 48px;
	}
	/* Phones: menu button next to the logo, search on its own row below. */
	#top .mobile-nav-toggle {
		order: 2;
		margin-left: auto;
	}
	#top .block-search {
		order: 3;
		flex: 1 1 100%;
		margin: 8px 0 0;
	}

	/* Home tiles: two per row, scaled down. */
	#block-block-1 li {
		width: calc(50% - 8px);
	}
	.menu-block {
		width: auto;
		height: auto;
		margin: 10px 4px 0;
		padding-bottom: 4px;
		/* The desktop frame image (box.png) doesn't scale cleanly; use a plain card. */
		background: #FFFFFF;
		border: 1px solid #D4C7B5;
		border-radius: 6px;
	}
	.menu-block-title {
		width: auto;
		margin-left: 8px;
	}
	.menu-content {
		margin-top: 0;
	}
	.menu-content img {
		width: calc(100% - 16px);
		height: auto;
		margin: 2px 8px 10px;
	}
}