/* Small additions on top of the vendored Responsive theme CSS.
   style.css and responsive.css are the original theme files, unmodified. */

/* The theme's desktop rule for the mobile toggle assumed the button sat inside
   .menu; here it is a sibling, so hide it explicitly. The `.js .main-nav a#…`
   rule in responsive.css is more specific and still wins below 650px. */
#responsive_menu_button {
	display: none;
}

.main-nav {
	display: block;
}

@media screen and (max-width: 650px) {
	/* Replaces the theme's jQuery slideToggle. */
	.js .main-nav .menu.responsive-menu-open {
		display: block;
	}
}

/* The theme expects WordPress' image alignment classes. */
.post-entry img {
	height: auto;
	max-width: 100%;
}

.post-entry .alignright {
	display: inline;
	float: right;
	margin: 0 0 20px 20px;
}

.post-entry .alignleft {
	display: inline;
	float: left;
	margin: 0 20px 20px 0;
}

.post-entry .aligncenter {
	clear: both;
	display: block;
	margin: 0 auto 20px auto;
}

@media screen and (max-width: 650px) {
	.post-entry .alignright,
	.post-entry .alignleft {
		display: block;
		float: none;
		margin: 0 auto 20px auto;
	}
}

/* Keep the scroll-top arrow out of the copyright line on narrow screens. */
#footer .scroll-top {
	text-align: right;
}

@media screen and (max-width: 980px) {
	#footer .scroll-top {
		text-align: left;
	}
}

/* =Mobile refinements
--------------------------------------------------------------
   The 2013 theme predates small phones: it keeps a 25px gutter on #container
   plus 20px on #wrapper at every width, which leaves only 228px of text on a
   320px screen. Everything below narrows the chrome and scales the oversized
   header down; the desktop rendering is untouched. */

@media screen and (max-width: 650px) {
	#container {
		padding-left: 15px;
		padding-right: 15px;
	}

	#wrapper {
		padding-left: 15px;
		padding-right: 15px;
	}

	#footer-wrapper {
		padding-left: 15px;
		padding-right: 15px;
	}

	/* 33px bold wraps the practice name onto four lines on a phone. */
	.site-name {
		font-size: 1.5em; /* = 24px */
		line-height: 1.2;
		padding-top: 15px;
	}

	.site-description {
		font-size: 0.875em;
	}

	#content {
		margin-top: 20px;
	}

	.post-title,
	.entry-title {
		font-size: 1.75em; /* = 28px, from 40px */
		line-height: 1.2;
	}

	/* A floated 200px image next to text leaves unreadable column widths, so
	   images go full width and centred (see the alignment block above). */
	.post-entry img {
		max-width: 100%;
	}
}

/* Only genuinely small screens (iPhone SE 1st gen and similar) — 360/375px
   phones keep the sizes above. */
@media screen and (max-width: 340px) {
	#container,
	#wrapper,
	#footer-wrapper {
		padding-left: 10px;
		padding-right: 10px;
	}

	.site-name {
		font-size: 1.3em; /* = 21px */
	}
}

/* Long unbroken URLs in the Impressum must not force a horizontal scrollbar.
   The theme sets overflow-wrap on <p>; cover links and headings too. */
.post-entry a,
.post-entry h1,
.post-entry h2,
.post-entry h3 {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Comfortable tap targets for the inline links in body copy. */
@media (hover: none) and (pointer: coarse) {
	.post-entry a {
		padding: 2px 0;
	}
}