/*
 * responsive.css — Responsive layer for the augenarzt-wegberg theme
 * Loaded LAST (after styleless.css + style.css) so it only adds mobile/tablet
 * overrides. The original desktop layout (fixed 96em float grid) is untouched
 * above the 960px breakpoint.
 *
 * Strategy:
 *  - Remove the hard `min-width: 96em` that forces 960px on every viewport.
 *  - Make the fixed-em containers (94/96em) fluid.
 *  - Convert the float-based `.grid` columns to flex-wrap, which makes the
 *    nth-child float-clearing math irrelevant and lets columns reflow.
 *  - Rework header (decorative eye), the over-indented nav, the job badge.
 */

/* ============================================================
   TABLET AND BELOW  (<= 960px)
   ============================================================ */
@media all and (max-width: 960px) {

	/* Kill the 960px floor that breaks every small viewport */
	html,
	body {
		min-width: 0 !important;
		width: 100% !important;
	}
	body {
		overflow-x: hidden;
	}

	/* Fixed-width containers -> fluid */
	.paddingInnerWidth,
	.directInnerWidth,
	header #title > div,
	header #theEye #whiteSpotWrapper,
	header #nav-primary div ul li span {
		width: 100% !important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	.paddingInnerWidth {
		padding-left: 1em;
		padding-right: 1em;
	}

	/* Float grid -> flexible, wrapping rows.
	   flex makes the desktop float/clear/nth-child rules harmless. */
	.paddingInnerWidth .grid,
	.directInnerWidth .grid,
	.directInnerWidth .noBorderGrid,
	header #title > div .grid {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 1.5em;
		overflow: visible;
	}

	/* Columns: grow from a sensible min-width, drop fixed em widths,
	   neutralise float/clear/margins inherited from desktop. */
	.paddingInnerWidth .grid > div,
	.directInnerWidth .grid > div,
	.directInnerWidth .noBorderGrid > div,
	header #title > div .grid > div {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 280px;
		flex: 1 1 280px;
		width: auto !important;
		min-width: 0;
		float: none !important;
		clear: none !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	/* Content images and embeds never overflow */
	#content img,
	.post-content img,
	.content img {
		max-width: 100%;
		height: auto;
	}
	#content table {
		max-width: 100%;
	}

	/* ---- Header: title bar ---- */
	header #title {
		height: auto !important;
	}
	header #title > div .titlebox {
		padding: 1.4em 1em !important;
		text-align: center;
	}
	header #title > div .titlebox #logo {
		font-size: 2.2em;
	}
	header #title > div .titlebox #tagline {
		font-size: 1.3em;
	}

	/* The decorative animated "eye" + liner are absolutely positioned for the
	   960px layout and look broken on fluid widths -> hide on small screens. */
	header #theEye,
	header #eyeLiner {
		display: none !important;
	}

	/* ---- Header: primary navigation ----
	   Each item becomes a full-width, centred, tappable bar. */
	header #nav-primary {
		padding: 0 !important;
	}
	header #nav-primary div ul li {
		padding: 0 !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	}
	header #nav-primary div ul li span {
		padding: 0 !important;
	}
	header #nav-primary div ul li span span,
	header #nav-primary div ul li span span.animate,
	header #nav-primary div ul li span span:hover {
		margin-left: 0 !important;
	}
	header #nav-primary div ul li span span a {
		text-align: center;
		display: block;
		padding: 0.9em 0.5em !important;
		font-size: 1.6em;
	}

	/* ---- Tab area ---- */
	.content .tabBox > div {
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.reiterh3 {
		padding: 0.7em 1em !important;
	}
}

/* ============================================================
   PHONE  (<= 600px)
   ============================================================ */
@media all and (max-width: 600px) {

	/* Bump the em base so body copy reads at ~16px on phones (the whole theme
	   is sized in em off an inline font-size:10px on <body>, which gives only
	   14px copy). !important is needed to beat that inline style; the legacy
	   font-size cookie has no UI on the site, so nothing is lost. Mobile only —
	   the desktop em grid still relies on the 10px base. */
	body {
		font-size: 11.5px !important;
	}

	/* One column for every grid */
	.paddingInnerWidth .grid > div,
	.directInnerWidth .grid > div,
	.directInnerWidth .noBorderGrid > div,
	header #title > div .grid > div {
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
	}

	/* Job-offer badge: pin ~40% down the left edge (overriding the inline
	   absolute top/left from header.php), and slide it out of frame on scroll
	   (JS toggles .is-scrolled-away — see mobile-ui.js). */
	#stellenlink {
		position: fixed !important;
		top: 40% !important;
		left: 0 !important;
		z-index: 999;
		display: block !important;
		margin: 0 !important;
		-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
		transition: transform 0.5s ease, opacity 0.5s ease;
		will-change: transform;
	}
	#stellenlink img {
		width: 110px !important;
		height: 110px !important;
	}
	#stellenlink.is-scrolled-away {
		-webkit-transform: translateX(-130%);
		transform: translateX(-130%);
		opacity: 0;
		pointer-events: none;
	}

	.paddingInnerWidth {
		padding-left: 1.1em;
		padding-right: 1.1em;
	}
	header #title > div .titlebox #logo {
		font-size: 1.9em;
	}

	/* Bottom bar is visible -> keep last content clear of it */
	body {
		padding-bottom: 64px;
	}
}

/* ============================================================
   UNIFORM IMAGE CAPTIONS  (all widths)
   The .wp-caption boxes use `width:auto`, so each shrink-wraps to its
   *caption text* and ends up a different size (see the AMD page table).
   Pin them to one width so the image areas line up; text just wraps.
   ============================================================ */
.wp-caption.alignnone {
	width: 18em !important;
	max-width: 100%;
	vertical-align: top;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.wp-caption.alignnone img {
	width: 100%;
	height: auto;
}
.wp-caption.alignnone .wp-caption-text {
	min-height: 3em; /* equalise 1- vs 2-line captions */
}

/* ============================================================
   REZEPT (Contact Form 7) — nicer inner flow on small screens
   Was: labels centred at width:80% (looked inset). Make them full-width,
   left-aligned so the field flow reads top-to-bottom cleanly.
   ============================================================ */
@media all and (max-width: 960px) {
	.wpcf7-form label {
		width: 100% !important;
		margin: 0 0 0.2em 0 !important;
		text-align: left;
	}
	.wpcf7-form-control-wrap {
		text-align: left;
	}
	.wpcf7-form p {
		text-align: left;
	}
}

/* ============================================================
   MOBILE QUICK-ACCESS BAR + MODALS
   Markup is in footer.php; behaviour in mobile-ui.js.
   Hidden on desktop, shown <=600px.
   ============================================================ */
.m-actionbar {
	display: none;
}

@media all and (max-width: 600px) {
	.m-actionbar {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		background: #007ecd;
		-webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
	}
	.m-actionbar__btn {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 0;
		flex: 1 1 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		gap: 0.25em;
		padding: 0.7em 0.3em;
		background: none;
		border: none;
		border-right: 1px solid rgba(255, 255, 255, 0.18);
		color: #fff;
		font-family: "Lucida Sans", "Lucida Grande", sans-serif;
		font-size: 1.05em;
		line-height: 1.1;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
	}
	.m-actionbar__btn:last-child {
		border-right: none;
	}
	.m-actionbar__btn:active {
		background: #006eb3;
	}
	.m-actionbar__btn svg {
		width: 24px;
		height: 24px;
		fill: none;
		stroke: #fff;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}
	/* Notdienst icon is a filled cross -> render as solid */
	.m-actionbar__btn:nth-child(2) svg {
		fill: #fff;
		stroke: none;
	}
}

/* Modal (works wherever opened; only the mobile bar opens it) */
.m-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1100;
	opacity: 0;
	-webkit-transition: opacity 0.25s ease;
	transition: opacity 0.25s ease;
}
.m-modal:not([hidden]) {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.m-modal.is-open {
	opacity: 1;
}
.m-modal__backdrop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
}
.m-modal__panel {
	position: relative;
	background: #fff;
	width: 90%;
	max-width: 26em;
	max-height: 80vh;
	overflow: auto;
	padding: 1.6em 1.4em;
	border-radius: 8px;
	-webkit-transform: translateY(18px);
	transform: translateY(18px);
	-webkit-transition: -webkit-transform 0.25s ease;
	transition: transform 0.25s ease;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.m-modal.is-open .m-modal__panel {
	-webkit-transform: none;
	transform: none;
}
.m-modal__panel h3 {
	margin-top: 0;
	color: #007ecd;
}
.m-modal__panel .oeffnungzeiten {
	width: 100%;
}
.m-modal__close {
	position: absolute;
	top: 0.1em;
	right: 0.35em;
	background: none;
	border: none;
	font-size: 2.6em;
	line-height: 1;
	color: #007ecd;
	cursor: pointer;
}
body.m-modal-open {
	overflow: hidden;
}

/* Stack image-caption galleries on phones (tagged by mobile-ui.js so the
   Sprechzeiten data table is left untouched). */
@media all and (max-width: 600px) {
	.caption-gallery,
	.caption-gallery tbody,
	.caption-gallery tr,
	.caption-gallery td {
		display: block;
		width: 100% !important;
	}
	.caption-gallery td {
		padding: 0 !important;
	}
	.caption-gallery .wp-caption.alignnone {
		width: 100% !important;
		margin-left: auto;
		margin-right: auto;
	}
}