/* Athreya Restore — mobile refinements.
   arthreya is a mobile-first Twenty Fourteen fork whose horizontal padding only begins at
   min-width:673px, so below that every element sits flush against both screen edges.
   Everything here is scoped to <=782px and cannot affect the desktop layout. */

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

	/* ---- 1. horizontal breathing room ------------------------------------ */
	.toptitle,
	#content.site-content,
	#content-sidebar,
	.site-info {
		box-sizing: border-box;
		padding-left: 20px;
		padding-right: 20px;
	}
	#footer-sidebar .widget {
		box-sizing: border-box;
		padding-left: 20px;
		padding-right: 20px;
	}
	/* banners stay edge-to-edge on purpose */
	.home_banner { padding-left: 0; padding-right: 0; }

	/* ---- 2. top utility bar: was clipping "BLOG" off the right edge ------- */
	.topheader { overflow: visible; }
	.topheader .menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2px 14px;
		padding: 4px 12px;
		margin: 0;
	}
	.topheader .menu li { float: none; margin: 0; }
	.topheader .menu li a {
		display: block;
		padding: 6px 2px;      /* taller tap target */
		font-size: 12px;
		letter-spacing: .02em;
	}

	/* ---- 3. header: logo + menu button ----------------------------------- */
	.header-main { position: relative; padding: 0 16px; box-sizing: border-box; }
	.site-title { margin: 0; padding: 10px 0; }
	.site-title img { max-width: 190px; height: auto; }
	.menu-toggle {
		display: block;
		position: absolute;
		top: 50%;
		right: 12px;
		transform: translateY(-50%);
		min-width: 46px;
		min-height: 46px;
		border-radius: 4px;
		background: #41a62a;
		color: #fff;
		border: 0;
	}
	.menu-toggle:focus-visible { outline: 3px solid #24890d; outline-offset: 2px; }

	/* ---- 4. hero: 3:1 is a ~130px strip on a phone ----------------------- */
	.athreya-hero .swiper-slide img { aspect-ratio: 16 / 9; }
	.athreya-hero .swiper-pagination-bullet { width: 13px; height: 13px; }

	/* ---- 5. page title + breadcrumb -------------------------------------- */
	.toptitle h2 { font-size: 28px; line-height: 1.2; margin: 0 0 4px; word-wrap: break-word; }
	.breadcrumbs { font-size: 13px; }

	/* ---- 6. forms: full-width, real tap targets -------------------------- */
	#content input[type="text"],
	#content input[type="email"],
	#content input[type="tel"],
	#content input[type="search"],
	#content select,
	#content textarea {
		box-sizing: border-box;
		width: 100%;
		min-height: 46px;
		padding: 10px 12px;
		font-size: 16px;          /* <16px makes iOS Safari zoom on focus */
	}
	#content textarea { min-height: 130px; }
	#content input[type="file"] { width: 100%; box-sizing: border-box; padding: 10px 0; }
	#content .wpcf7-form-control-wrap { display: block; width: 100%; }
	#content p.fullname .wpcf7-form-control-wrap { margin-bottom: 10px; }
	/* The theme paints the CF7 submit with background:url(images/send.jpg) and font-size:0
	   to hide the value text. Leave that alone -- 202x56 is already a fine tap target --
	   and only centre it. Overriding font-size here made "SEND" render twice. */
	#content .wpcf7 .wpcf7-form-control.wpcf7-submit {
		display: block;
		margin: 4px auto 0;
		float: none;
	}
	#content .wpcf7-form > p { float: none; width: auto; }
	#content input[type="submit"]:not(.wpcf7-submit) {
		width: 100%;
		min-height: 50px;
		font-size: 16px;
	}
	#content .wpcf7-form p { margin: 0 0 14px; }

	/* ---- 7. services accordion ------------------------------------------- */
	#horizontalTab > ul { margin: 0; padding: 0; }
	#horizontalTab > ul li { list-style: none; margin: 0; }
	#horizontalTab > ul li a { display: block; padding: 14px 4px; }
	#horizontalTab .r-tabs-accordion-title a { padding: 14px 4px; }

	/* ---- 8. footer spacing ----------------------------------------------- */
	#footer-sidebar .widget { margin-bottom: 22px; }
	#footer-sidebar .widget-title { margin-bottom: 8px; }
	#footer-sidebar .menu li a { display: block; padding: 7px 0; }
	.site-info { padding-top: 12px; padding-bottom: 12px; font-size: 12px; }

	/* ---- 9. never let anything cause a sideways scroll -------------------- */
	body { overflow-x: hidden; }
	#content img, #content iframe, #content table { max-width: 100%; height: auto; }
	#content table { display: block; overflow-x: auto; }
}

/* Narrow phones */
@media screen and (max-width: 400px) {
	.toptitle h2 { font-size: 24px; }
	.site-title img { max-width: 165px; }
	.topheader .menu li a { font-size: 11px; }
}