/**
 * Kastorfer SV – Frontend-Komponenten
 *
 * Alle Selektoren sind auf #page bzw. body:not(.wp-admin) beschränkt,
 * um Backend und Plugins nicht zu beeinflussen.
 */

/* -------------------------------------------------------------------------
   Grundflächen – Gold/Pfirsich-Wirkung entfernen
   ------------------------------------------------------------------------- */

body:not(.wp-admin) {
	background-color: var(--ksv-white);
	color: var(--ksv-text);
}

#page .site-content,
#page .ast-separate-container .comment-respond,
#page .ast-separate-container .comments-title {
	background-color: var(--ksv-white);
}

#page .has-ast-global-color-4-background-color,
#page .has-ast-global-color-6-background-color {
	background-color: var(--ksv-gray-light) !important;
}

/* -------------------------------------------------------------------------
   Typografie – Figtree beibehalten, Überschriften modernisieren
   ------------------------------------------------------------------------- */

#page .site-content :where(h1, h2, h3, h4, h5, h6),
#page .site-content .entry-title,
#page .site-content .widget-title,
#page .site-content .uagb-heading-text,
#page .site-footer .widget-title,
#page .site-footer .uagb-heading-text {
	color: var(--ksv-black);
	font-family: "Figtree", sans-serif;
	font-weight: 700;
	line-height: 1.25;
}

#page .site-content h1 {
	font-size: clamp(1.875rem, 4vw, 3.5rem);
}

#page .site-content h2 {
	font-size: clamp(1.625rem, 3vw, 2.625rem);
}

#page .site-content h3 {
	font-size: clamp(1.375rem, 2.5vw, 2.1875rem);
}

#page .site-content h4 {
	font-size: clamp(1.25rem, 2vw, 1.5625rem);
}

#page .site-content :where(h5, h6) {
	font-size: clamp(1rem, 1.5vw, 1.25rem);
	font-weight: 600;
}

#page .site-content :where(p, li) {
	color: var(--ksv-text);
}

/* Header-Slogan: eigenständig und unabhängig von Inhaltsüberschriften */
#page [class*="ast-header-html-"] .ast-builder-html-element {
	font-family: "Figtree", sans-serif;
	font-size: clamp(1rem, 1.6vw, 1.375rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--ksv-red) !important;
}

#page [class*="ast-header-html-"] .ast-builder-html-element :where(h1, h2, p, span) {
	font: inherit;
	color: inherit !important;
}

/* -------------------------------------------------------------------------
   Links – Rot gezielt als Akzent
   ------------------------------------------------------------------------- */

#page .entry-content a:not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.ast-button):not(.button),
#page .ast-article-inner a:not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.entry-title a):not(.entry-meta a),
#page .widget a:not(.wp-block-button__link):not(.uagb-buttons-repeater),
#page .ast-footer-copyright a {
	color: var(--ksv-red);
	text-decoration: underline;
	text-decoration-color: rgba(221, 24, 59, 0.35);
	text-underline-offset: 0.15em;
	transition: color var(--ksv-transition), text-decoration-color var(--ksv-transition);
}

#page .entry-content a:not(.wp-block-button__link):not(.uagb-buttons-repeater):hover,
#page .entry-content a:not(.wp-block-button__link):not(.uagb-buttons-repeater):focus-visible,
#page .ast-article-inner a:not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.entry-meta a):hover,
#page .ast-article-inner a:not(.wp-block-button__link):not(.uagb-buttons-repeater):not(.entry-meta a):focus-visible,
#page .widget a:not(.wp-block-button__link):not(.uagb-buttons-repeater):hover,
#page .widget a:not(.wp-block-button__link):not(.uagb-buttons-repeater):focus-visible {
	color: var(--ksv-red-dark);
	text-decoration-color: var(--ksv-red-dark);
}

#page .entry-meta {
	color: var(--ksv-text);
}

#page .entry-meta a:not(.ast-button) {
	color: var(--ksv-text);
	text-decoration: none;
}

#page .entry-meta a:not(.ast-button):is(:hover, :focus-visible) {
	color: var(--ksv-red);
}

#page .main-header-menu .menu-link,
#page .main-header-menu .menu-link:hover,
#page .main-header-menu .current-menu-item > .menu-link,
#page .main-header-menu .current_page_item > .menu-link {
	text-decoration: none;
}

#page .site-header .main-header-menu > .menu-item > .menu-link {
	background-color: transparent !important;
	color: var(--ksv-white) !important;
	transition:
		background-color var(--ksv-transition),
		color var(--ksv-transition);
}

#page .site-header .main-header-menu > .menu-item:hover > .menu-link,
#page .site-header .main-header-menu > .menu-item.focus > .menu-link,
#page .site-header .main-header-menu > .current-menu-item > .menu-link,
#page .site-header .main-header-menu > .current_page_item > .menu-link,
#page .site-header .main-header-menu > .current-menu-ancestor > .menu-link {
	background-color: var(--ksv-red-dark) !important;
	color: var(--ksv-white) !important;
}

#page .main-header-menu .sub-menu {
	background-color: var(--ksv-white);
}

#page .main-header-menu .sub-menu .menu-link {
	background-color: var(--ksv-white);
	color: var(--ksv-black);
}

#page .main-header-menu .sub-menu .menu-item:hover > .menu-link,
#page .main-header-menu .sub-menu .menu-item.focus > .menu-link,
#page .main-header-menu .sub-menu .current-menu-item > .menu-link,
#page .main-header-menu .sub-menu .current_page_item > .menu-link,
#page .main-header-menu .sub-menu .current-menu-ancestor > .menu-link {
	background-color: var(--ksv-red-dark);
	color: var(--ksv-white);
}

/* -------------------------------------------------------------------------
   Buttons – Gold (#FFC300) durch KSV-Rot ersetzen
   ------------------------------------------------------------------------- */

#page :where(
	.ast-button,
	.ast-custom-button,
	.button,
	#comments input#submit,
	.search-submit,
	.wp-block-button:not(.is-style-outline) .wp-block-button__link,
	.wp-block-search .wp-block-search__button,
	.wp-block-file .wp-block-file__button,
	.uagb-buttons-repeater.wp-block-button__link,
	.uagb-forms-main-submit-button
) {
	background-color: var(--ksv-red) !important;
	border-color: var(--ksv-red) !important;
	color: var(--ksv-white) !important;
	border-radius: var(--ksv-radius-sm);
	border-width: 0;
	border-style: solid;
	font-family: "Figtree", sans-serif;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	box-shadow: var(--ksv-shadow-sm);
	transition:
		background-color var(--ksv-transition),
		border-color var(--ksv-transition),
		color var(--ksv-transition),
		box-shadow var(--ksv-transition),
		transform var(--ksv-transition);
}

#page :where(
	.ast-button,
	.ast-custom-button,
	.button,
	#comments input#submit,
	.search-submit,
	.wp-block-button:not(.is-style-outline) .wp-block-button__link,
	.wp-block-search .wp-block-search__button,
	.wp-block-file .wp-block-file__button,
	.uagb-buttons-repeater.wp-block-button__link,
	.uagb-forms-main-submit-button
):hover,
#page :where(
	.ast-button,
	.ast-custom-button,
	.button,
	#comments input#submit,
	.search-submit,
	.wp-block-button:not(.is-style-outline) .wp-block-button__link,
	.wp-block-search .wp-block-search__button,
	.wp-block-file .wp-block-file__button,
	.uagb-buttons-repeater.wp-block-button__link,
	.uagb-forms-main-submit-button
):focus-visible {
	background-color: var(--ksv-red-dark) !important;
	border-color: var(--ksv-red-dark) !important;
	color: var(--ksv-white) !important;
	box-shadow: var(--ksv-shadow-md);
}

#page :where(
	.ast-button,
	.ast-custom-button,
	.button,
	#comments input#submit,
	.search-submit,
	.wp-block-button:not(.is-style-outline) .wp-block-button__link,
	.wp-block-search .wp-block-search__button,
	.wp-block-file .wp-block-file__button,
	.uagb-buttons-repeater.wp-block-button__link
):active {
	transform: translateY(1px);
	box-shadow: var(--ksv-shadow-sm);
}

/* Outline-Buttons */
#page .wp-block-button.is-style-outline .wp-block-button__link,
#page .ast-outline-button,
#page .uagb-buttons-repeater.ast-outline-button {
	background-color: transparent !important;
	border: 1px solid var(--ksv-black) !important;
	color: var(--ksv-black) !important;
	box-shadow: none;
}

#page .wp-block-button.is-style-outline .wp-block-button__link:hover,
#page .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
#page .ast-outline-button:hover,
#page .ast-outline-button:focus-visible,
#page .uagb-buttons-repeater.ast-outline-button:hover,
#page .uagb-buttons-repeater.ast-outline-button:focus-visible {
	background-color: var(--ksv-red) !important;
	border-color: var(--ksv-red) !important;
	color: var(--ksv-white) !important;
}

/* Mobile-Menü-Toggle – Gold entfernen */
#page .menu-toggle.ast-mobile-menu-trigger-minimal,
#page .menu-toggle.ast-mobile-menu-trigger-outline {
	background-color: transparent !important;
	border-color: var(--ksv-black) !important;
	color: var(--ksv-black) !important;
	box-shadow: none;
}

#page .menu-toggle.ast-mobile-menu-trigger-fill {
	background-color: var(--ksv-red) !important;
	border-color: var(--ksv-red) !important;
	color: var(--ksv-white) !important;
	box-shadow: none;
}

#page .menu-toggle.ast-mobile-menu-trigger-minimal:is(:hover, :focus-visible),
#page .menu-toggle.ast-mobile-menu-trigger-outline:is(:hover, :focus-visible) {
	color: var(--ksv-red) !important;
}

#page .menu-toggle.ast-mobile-menu-trigger-fill:is(:hover, :focus-visible) {
	background-color: var(--ksv-red-dark) !important;
	border-color: var(--ksv-red-dark) !important;
	color: var(--ksv-white) !important;
}

/* -------------------------------------------------------------------------
   Karten & Inhaltsflächen
   ------------------------------------------------------------------------- */

body.ast-separate-container #page .ast-article-post .ast-article-inner,
body.ast-separate-container #page .ast-article-single,
#page .ast-separate-container .comment-respond,
#page .ast-separate-container .ast-comment-list li.depth-1,
#page #secondary .widget,
#page .site-footer .widget,
#page .wp-block-uagb-container:not(.alignfull) {
	background-color: var(--ksv-white);
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: var(--ksv-radius-md);
	box-shadow: var(--ksv-shadow-sm);
}

body.ast-separate-container #page .ast-article-post .ast-article-inner:hover,
body.ast-separate-container #page .ast-article-single:hover {
	box-shadow: var(--ksv-shadow-md);
	transition: box-shadow var(--ksv-transition);
}

body.ast-separate-container #page .ast-article-post {
	background: transparent;
	border: 0;
	box-shadow: none;
}

#page .ast-article-inner {
	border-radius: var(--ksv-radius-md);
	overflow: visible;
}

#page .entry-title a {
	color: var(--ksv-black);
	text-decoration: none;
	transition: color var(--ksv-transition);
}

#page .entry-title a:hover,
#page .entry-title a:focus-visible {
	color: var(--ksv-red);
}

/* -------------------------------------------------------------------------
   Rahmen, Formulare, Meta
   ------------------------------------------------------------------------- */

#page :where(
	.search-form input[type="search"],
	.wp-block-search input.wp-block-search__input,
	.uagb-forms__outer-wrap input.uagb-forms-input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
	.uagb-forms__outer-wrap select.uagb-forms-input,
	.uagb-forms__outer-wrap textarea.uagb-forms-input
) {
	border: 1px solid rgba(15, 23, 42, 0.15);
	border-radius: var(--ksv-radius-sm);
	color: var(--ksv-text);
	transition: border-color var(--ksv-transition), box-shadow var(--ksv-transition);
}

#page :where(
	.search-form input[type="search"],
	.wp-block-search input.wp-block-search__input,
	.uagb-forms__outer-wrap input.uagb-forms-input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
	.uagb-forms__outer-wrap select.uagb-forms-input,
	.uagb-forms__outer-wrap textarea.uagb-forms-input
):focus-visible {
	border-color: var(--ksv-red);
	box-shadow: 0 0 0 3px rgba(221, 24, 59, 0.15);
	outline: none;
}

#page .main-header-menu .sub-menu {
	border-color: rgba(15, 23, 42, 0.1);
	border-radius: var(--ksv-radius-sm);
	box-shadow: var(--ksv-shadow-md);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

#page .site-footer,
#page #colophon {
	background-color: var(--ksv-black);
	color: var(--ksv-white);
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

#page .site-footer .widget {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.16);
	color: var(--ksv-white);
	box-shadow: none;
}

#page .site-footer :where(
	p,
	li,
	address
) {
	color: var(--ksv-white);
}

#page .site-footer .widget-title,
#page .site-footer .wp-block-heading,
#page .site-footer .uagb-heading-text {
	color: var(--ksv-white);
}

#page .site-footer .widget a:not(.wp-block-button__link):not(.uagb-buttons-repeater),
#page .site-footer .ast-footer-copyright a,
#page .site-footer .ast-builder-html-element a {
	color: var(--ksv-white);
	text-decoration-color: rgba(255, 255, 255, 0.55);
}

#page .site-footer .widget a:not(.wp-block-button__link):not(.uagb-buttons-repeater):is(:hover, :focus-visible),
#page .site-footer .ast-footer-copyright a:is(:hover, :focus-visible),
#page .site-footer .ast-builder-html-element a:is(:hover, :focus-visible) {
	color: var(--ksv-gray-light);
	text-decoration-color: var(--ksv-gray-light);
}

/* -------------------------------------------------------------------------
   Fokuszustände (Tastaturbedienung)
   ------------------------------------------------------------------------- */

#page :where(
	.entry-content a,
	.entry-title a,
	.entry-meta a,
	#secondary .widget a,
	.site-footer a,
	.search-form input[type="search"],
	.wp-block-search input.wp-block-search__input,
	.uagb-forms__outer-wrap input.uagb-forms-input:not([type="hidden"]),
	.uagb-forms__outer-wrap select.uagb-forms-input,
	.uagb-forms__outer-wrap textarea.uagb-forms-input
):focus-visible {
	outline: var(--ksv-focus-ring);
	outline-offset: var(--ksv-focus-offset);
}

/* Navigation und Header-Steuerelemente: dezenter, klarer Tastaturfokus */
#page .site-header .custom-logo-link:focus-visible,
#page .site-header .ast-builder-social-element:focus-visible {
	outline: 2px solid var(--ksv-red);
	outline-offset: 3px;
	border-radius: 2px;
}

#page .site-header .main-header-menu .menu-link:focus-visible,
#page .site-header .ast-menu-toggle:focus-visible,
#page .site-header .ast-header-navigation-arrow:focus-visible,
#page .site-header .menu-toggle:focus-visible,
#page .ast-mobile-popup-drawer .menu-toggle-close:focus-visible {
	outline: 2px solid var(--ksv-white);
	outline-offset: 3px;
	border-radius: 2px;
}

#page :where(
	.ast-button,
	.ast-custom-button,
	.button,
	#comments input#submit,
	.search-submit,
	.wp-block-button__link,
	.wp-block-search .wp-block-search__button,
	.wp-block-file .wp-block-file__button,
	.uagb-buttons-repeater.wp-block-button__link,
	.uagb-forms-main-submit-button
):focus-visible {
	outline: 2px solid var(--ksv-white);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--ksv-red);
}

/* -------------------------------------------------------------------------
   Responsive Anpassungen
   ------------------------------------------------------------------------- */

@media (max-width: 921px) {
	#page .main-header-bar-navigation .main-header-menu,
	#page .main-header-bar-navigation .main-header-menu .sub-menu {
		background-color: var(--ksv-red);
	}

	#page .main-header-bar-navigation .main-header-menu .menu-link {
		background-color: transparent;
		color: var(--ksv-white);
	}

	#page .main-header-bar-navigation .main-header-menu .menu-item:hover > .menu-link,
	#page .main-header-bar-navigation .main-header-menu .menu-item.focus > .menu-link,
	#page .main-header-bar-navigation .main-header-menu .current-menu-item > .menu-link,
	#page .main-header-bar-navigation .main-header-menu .current_page_item > .menu-link,
	#page .main-header-bar-navigation .main-header-menu .current-menu-ancestor > .menu-link {
		background-color: var(--ksv-red-dark);
		color: var(--ksv-white);
	}

	#page .main-header-bar-navigation .ast-menu-toggle {
		background-color: transparent;
		color: var(--ksv-white);
	}

	body.ast-separate-container #page .ast-article-post .ast-article-inner,
	body.ast-separate-container #page .ast-article-single,
	#page #secondary .widget {
		border-radius: var(--ksv-radius-sm);
	}

	#page [class*="ast-header-html-"] .ast-builder-html-element {
		font-size: 1rem;
	}

	#page :where(
		.ast-button,
		.ast-custom-button,
		.button,
		#comments input#submit,
		.search-submit,
		.wp-block-button .wp-block-button__link,
		.wp-block-search .wp-block-search__button,
		.wp-block-file .wp-block-file__button,
		.uagb-forms-main-submit-button,
		.uagb-buttons-repeater.wp-block-button__link
	) {
		padding-top: 0.875rem;
		padding-bottom: 0.875rem;
	}
}

@media (max-width: 544px) {
	body.ast-separate-container #page .ast-article-post .ast-article-inner,
	body.ast-separate-container #page .ast-article-single {
		box-shadow: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}

	#page .site-content h1 {
		font-size: 1.875rem;
	}

	#page .site-content h2 {
		font-size: 1.625rem;
	}

	#page [class*="ast-header-html-"] .ast-builder-html-element {
		font-size: 0.9375rem;
		line-height: 1.3;
	}
}
