/*
Theme Name: Covr
Theme URI: https://wordpress.com/themes/covr/
Description: Covr – angepasst für jimmy-gut.at. Basierend auf Covr von Automattic, mit lokal eingebundener Schrift Manrope, festen Kopf-/Fußbereichen und eigener Mobilansicht.
Version: 1.2.0
Requires at least: 6.4
Requires PHP: 7.4
Author: Automattic (Anpassungen: Zwischenzeilen PR & Multimedia)
Author URI: https://automattic.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: covr
Update URI: false
*/

:root {
	--jg-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--jg-accent: #bbcee8;
	--jg-line: #e3e8ef;
}

/* Outline-Buttons: Hover (theme.json kann das noch nicht) */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--background);
	border-color: var(--wp--preset--color--secondary);
}

/* Links */
a {
	text-decoration-thickness: .0625em !important;
	text-underline-offset: .15em;
}
a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Responsive YouTube-Einbettungen (vormals „Zusätzliches CSS“) */
.responsive-video {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Lange URLs im Inhalt umbrechen statt seitlich überlaufen */
.wp-block-post-content a {
	overflow-wrap: anywhere;
}

/* Platzhalter für YouTube / Google Maps (Zwei-Klick-Lösung) */
.jg-consent {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--tertiary, #f5f6f7);
	border: 1px solid var(--jg-line);
	border-radius: 6px;
	text-align: center;
	font-size: .9375rem;
	line-height: 1.45;
}
.responsive-video > .jg-consent,
[style*="padding-bottom"] > .jg-consent {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}
.jg-consent__inner {
	max-width: 30rem;
	padding: 1rem 1.25rem;
}
.jg-consent__title {
	margin: 0 0 .35rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.jg-consent__text {
	margin: 0 0 .9rem;
}
.jg-consent__btn {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	padding: .6rem 1.25rem;
	min-height: 44px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background);
}
.jg-consent__btn:hover {
	background: var(--wp--preset--color--foreground);
}
@media (max-width: 480px) {
	.jg-consent__text { font-size: .8125rem; margin-bottom: .6rem; }
	.jg-consent__inner { padding: .5rem .9rem; }
}

/* Seitentitel: lange deutsche Wörter sauber umbrechen */
.jg-page-title {
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Startbild */
.jg-hero {
	margin: 0;
}
.wp-block-image.jg-hero img {
	display: block;
	width: 100%;
	height: auto;
}

/* Fußzeile */
.jg-footer__row p {
	margin: 0;
}

/* Hauptnavigation: Untermenüs am Desktop */
.jg-nav .wp-block-navigation__submenu-container {
	border: 1px solid var(--jg-line) !important;
	border-radius: 6px;
	padding: .35rem 0 !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}
.jg-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .45rem 1rem !important;
}

/* =========================================================
   Mobil & Tablet (bis 959 px): Burger-Menü, fixierter Kopf
   ========================================================= */
@media (min-width: 600px) and (max-width: 959px) {
	.jg-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.jg-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

@media (max-width: 959px) {
	header.wp-block-template-part {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 30;
	}
	.jg-header {
		box-shadow: 0 1px 0 var(--jg-line);
	}
	.jg-header .wp-block-site-logo img {
		width: 104px;
		height: auto;
	}

	/* Burger-Knopf: großzügige Tippfläche */
	.jg-nav .wp-block-navigation__responsive-container-open,
	.jg-nav .wp-block-navigation__responsive-container-close {
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		color: var(--wp--preset--color--primary);
	}
	.jg-nav .wp-block-navigation__responsive-container-open svg,
	.jg-nav .wp-block-navigation__responsive-container-close svg {
		width: 30px;
		height: 30px;
	}
	.jg-nav .wp-block-navigation__responsive-container-close {
		top: 1rem;
		right: calc(var(--jg-gutter) - 10px);
	}

	/* Vollbild-Menü */
	.jg-nav .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justification-setting: flex-start;
		--navigation-layout-justify: flex-start;
		--navigation-layout-align: flex-start;
		padding: 1rem var(--jg-gutter) 2.5rem;
		animation: jg-fade .18s ease-out;
	}
	.jg-nav .is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 3.5rem !important;
		align-items: stretch !important;
	}
	.jg-nav .is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.jg-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		width: 100%;
		flex-direction: column;
		align-items: flex-start !important;
		border-bottom: 1px solid var(--jg-line);
		padding: .7rem 0;
	}
	.jg-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: 1.375rem;
		font-weight: 600;
		line-height: 1.3;
		padding: .15rem 0;
	}
	.jg-nav .is-menu-open .wp-block-navigation__submenu-container {
		border: 0 !important;
		border-left: 2px solid var(--jg-accent) !important;
		border-radius: 0;
		box-shadow: none;
		margin: .5rem 0 .2rem .1rem !important;
		padding: 0 0 0 1rem !important;
		gap: 0 !important;
		align-items: flex-start !important;
		width: 100%;
	}
	.jg-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 1.0625rem;
		font-weight: 400;
		color: var(--wp--preset--color--foreground);
		padding: .4rem 0 !important;
	}
	.jg-nav .is-menu-open .wp-block-navigation-item__content:hover,
	.jg-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		text-decoration: underline;
	}
}

@keyframes jg-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* =========================================================
   Smartphone (bis 781 px)
   ========================================================= */
@media (max-width: 781px) {
	/* Startbild hochformatiger, Person bleibt im Bild */
	.wp-block-image.jg-hero img {
		height: 68vh;
		height: min(68svh, 600px);
		object-fit: cover;
		object-position: 42% 55%;
	}

	.jg-page-title {
		font-size: 2.125rem !important;
		line-height: 1.15 !important;
	}

	/* Fußzeile untereinander, gut antippbar */
	.jg-footer__row {
		flex-direction: column;
		align-items: center !important;
		gap: .15rem !important;
		text-align: center;
	}
	.jg-footer__row .wp-block-site-title {
		margin-bottom: .35rem;
	}
	.jg-footer__row a {
		display: inline-block;
		padding: .3rem .5rem;
	}

	/* Bilder & Einbettungen im Inhalt nie breiter als der Bildschirm */
	.wp-block-post-content img,
	.wp-block-post-content iframe {
		max-width: 100%;
		height: auto;
	}
	.wp-block-post-content .responsive-video iframe {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jg-nav .wp-block-navigation__responsive-container.is-menu-open {
		animation: none;
	}
}
