/**
 * Description: This is the Style Sheet for My Site Heading Plugin
 * Author:      Jörg-Detlef Schröder
 * Version:     1.1
 * Date:		2025-08-02
 */

/* Site-Heading */
.site-heading {
	color:#fff;
	text-shadow:2px 2px 2px #333;
	height:calc(100vh - 4.9em);
	display:flex;
	flex-direction:column;			/* Untereinander anordnen */
	align-items:center;    			/* Elemente horizontal zentrieren */
	justify-content:center;			/* Content vertikal mittig */
}
/* Site Heading Box */
.site-heading-box {
	display:flex;
	flex-direction:column;			/* Untereinander anordnen */
	align-items:center;				/* Elemente horizontal zentrieren */
	text-align:center;				/* Text horizontal mittig */
	margin-bottom: 3em;				/* Abstand zum Ghost Button */
}
.site-heading .site-title,
.site-heading .sf-page-title {
	font-family:Julee;
	font-size:3.5rem;
	padding-top:0;
	margin-bottom:0;
}
.site-heading .site-description,
.site-heading .entry-subtitle {
	color:#fff;
	font-size:1.5rem;
	text-shadow:2px 2px 2px #333;
	min-height:1.5em;
}
/* Ghost Button */
.ghost-button {
	margin-top:.625em;
}
.ghost-button a {
	color:#fff;
	padding:.625em 1.875em;
	border:2px solid #555;
	border-radius:3px;
	background-color:rgba(0,0,0,.3);
	transition:.2s ease-in-out;
}
.ghost-button a:hover {
	color:#aaa;
	background-color:rgba(0,0,0,.5);
	transition:.4s ease-in-out;
}
.ghost-button a::after {			/* Roten Unterstrich bei hover unterdrücken */
	display:none;
}

@media (max-width: 767px) {								/* Mobil Hoch und Quer */
	.site-heading h1.site-title {font-size:1.75rem;}
	.site-heading .site-description {font-size:1rem;}
}
@media (max-width: 768px) and (orientation: portrait) {	/* Mobil Hoch, Tablet Hoch */
	.site-heading {
		height:calc(56.25vw - 2.2em)!important;
	}
	.ghost-button {
		display:none;
	}
}
@media (min-width: 769px) and (max-width: 1024px) {		/* Tablet Quer */
	.site-heading {
		height: calc(100vh - 2.7em);
	}
}