/*
 * Mobile and tablet layout for the Morgan Legal theme.
 * Loaded after style.css. Desktop (wider than 980px) is unchanged.
 */

.menu-toggle {
	display: none;
}

#left img,
#right img,
#footer img {
	max-width: 100%;
	height: auto;
}

/* ---------- Tablet and below: fluid widths ---------- */
@media (max-width: 980px) {
	#header,
	#wrapper,
	#footer {
		width: auto;
		padding-left: 16px;
		padding-right: 16px;
	}

	#headerwrap {
		height: auto;
		background-size: auto 100%;
	}

	#left,
	#right {
		width: auto;
		float: none;
	}

	#right {
		margin-top: 30px;
	}

	#rightcolumn {
		max-width: 420px;
	}

	/* Page banner image */
	#banner {
		width: auto;
		height: auto;
		aspect-ratio: 648 / 174;
		background-size: cover;
		background-position: center;
	}

	/* Fee tables and embedded media */
	#left table {
		width: 100% !important;
		height: auto !important;
	}

	#left iframe {
		max-width: 100%;
	}

	/* Home page service boxes: two per row */
	#thecause .widget_text {
		box-sizing: border-box;
		width: calc(50% - 10px);
		height: auto;
		min-height: 137px;
		margin-right: 0;
		background-size: 100% 100%;
	}

	#thecause #text-17,
	#thecause #text-19 {
		margin-right: 20px;
	}

	.causecontent {
		width: auto;
		float: none;
		overflow: hidden;
		padding-left: 10px;
	}

	/* Forms */
	.inputbox,
	.textarea,
	.selectbox,
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 select,
	.wpcf7 textarea {
		box-sizing: border-box;
		width: 100%;
		max-width: 420px;
	}

	/* Footer */
	#menu-footer-menu,
	#text-9,
	#text-10 {
		width: auto;
		float: none;
	}

	#menu-footer-menu {
		overflow: hidden;
		margin-bottom: 10px;
	}
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
	/* Header: logo then phone number, centred */
	#logo,
	#contactinfo {
		float: none;
	}

	#logo {
		text-align: center;
		margin-bottom: 0;
	}

	#contactinfo {
		width: auto;
		max-width: 220px;
		margin: 10px auto;
		height: auto;
		min-height: 48px;
		padding-left: 56px;
	}

	/* Arrow links ("Contact us now...") wrap neatly beside the arrow */
	.quotelinks {
		text-indent: 0;
		padding-left: 24px;
		background-position: left 3px;
	}

	#contactinfo .textwidget {
		text-align: left;
	}

	/* Collapsible menu */
	.menu-toggle {
		display: block;
		width: 100%;
		margin: 5px 0;
		padding: 12px 16px;
		border: 0;
		border-top: #f06900 5px solid;
		background: #f4f4f4;
		color: #333;
		font: 16px/1 inherit;
		font-family: inherit;
		text-align: left;
		cursor: pointer;
	}

	.menu-toggle::after {
		content: "\2630";
		float: right;
		font-size: 18px;
		line-height: 16px;
	}

	#menu.is-open .menu-toggle::after {
		content: "\2715";
	}

	#menu ul {
		display: none;
	}

	#menu.is-open ul {
		display: block;
	}

	#menu li {
		float: none;
		margin: 0 0 3px 0;
	}

	#menu a {
		line-height: 44px;
	}

	/* Content */
	#banner h3 {
		font-size: 18px;
		padding: 6px 10px;
	}

	#left table td {
		padding: 4px 6px 4px 0;
		vertical-align: top;
		font-size: 13px;
	}

	/* Home page service boxes: one per row */
	#thecause .widget_text,
	#thecause #text-17,
	#thecause #text-19 {
		width: 100%;
		float: none;
		margin-right: 0;
		margin-bottom: 15px;
	}

	#rightcolumn {
		max-width: none;
	}

	#menu-footer-menu li {
		margin-right: 12px;
	}
}

/* ---------- Client Feedback (home page) ---------- */
#subcontent h4 {
	margin: 10px 0 15px;
	font-size: 18px;
	color: #1faddb;
}

.testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	margin-bottom: 20px;
}

.testimonial {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 40px 16px 16px;
	background: #f7f7f7;
	border-top: 4px solid #f06900;
	border-radius: 0 0 4px 4px;
}

.testimonial::before {
	content: "\201C";
	position: absolute;
	top: 6px;
	left: 14px;
	font: bold 48px/1 Georgia, "Times New Roman", serif;
	color: #1faddb;
}

.testimonial p {
	flex: 1;
	margin: 0 0 12px;
	font-size: 13px;
	font-style: italic;
	line-height: 1.55;
	color: #444;
}

.testimonial cite {
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	color: #c41d22;
}

.testimonial cite::before {
	content: "\2014\00a0";
}

@media (max-width: 760px) {
	.testimonials {
		grid-template-columns: 1fr;
	}
}