/*
Theme Name: Cona
Theme URI:
Author: Galli Web
Author URI:
Description: FSE Theme für cona-yoga.ch
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cona
Tags:
*/

/* =========================================================
   1. Reset & Accessibility
   ========================================================= */

footer,
main {
	margin-top: 0;
}

html,
body {
	overflow-x: clip;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 72px;
	touch-action: manipulation;
}

*:focus:not(:focus-visible) {
	outline: none;
}

*:focus-visible {
	outline: 2px dashed var(--wp--preset--color--text);
	outline-offset: 2px;
}

.skip-link.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus-visible {
	background-color: var(--wp--preset--color--bg-dark);
	clip-path: none;
	color: var(--wp--preset--color--text-light);
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* =========================================================
   2. Layout
   ========================================================= */

.wp-site-blocks {
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main {
	flex: 1;
}

/* =========================================================
   3. Header (sticky + shrink on scroll)
   ========================================================= */

a.wp-block-button__link.wp-element-button,
a.wp-block-button__link.wp-element-button::before,
header.wp-block-template-part .wp-block-site-logo img,
header.wp-block-template-part > .wp-block-group {
	transition: 0.2s ease-in-out;
}

header.wp-block-template-part.is-stuck > .wp-block-group {
	padding-top: var(--wp--preset--spacing--x-small) !important;
	padding-bottom: var(--wp--preset--spacing--x-small) !important;
}

header.wp-block-template-part.is-stuck .wp-block-site-logo img {
	width: 120px;
}

.header-cta-icon,
.wp-block-site-logo {
	position: relative;
	z-index: 100001;
}

/* =========================================================
   4. Buttons & Links
   ========================================================= */

.wp-block-site-logo a,
a,
button {
	border-radius: 4px;
}

a.wp-block-button__link.wp-element-button:hover::before {
	transform: translateX(3px);
}

/* =========================================================
   5. Navigation
   ========================================================= */

/* Off-canvas Wrapper */
.wp-block-navigation__responsive-container {
	background: var(--wp--preset--color--bg) !important;
	font-weight: 300 !important;
}

.wp-block-navigation__responsive-container-close {
	right: 16px;
	top: 16px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 7rem;
}

.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
	padding-top: 7rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	text-transform: uppercase;
}

/* Active / Hover Underline */
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__label,
.wp-block-navigation-item .wp-block-navigation-item__label:hover,
.wp-block-navigation-item .wp-block-navigation-item__label:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

/* =========================================================
   6. Accordion
   ========================================================= */

.wp-block-accordion > .wp-block-accordion-item {
	margin-bottom: 8px !important;
}

.wp-block-accordion-item,
.wp-block-accordion-panel {
	margin-top: 0 !important;
}

.is-open .wp-block-accordion-panel {
	margin-bottom: 15px !important;
}

.wp-block-accordion-heading__toggle {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-radius: 4px;
}

.is-open .wp-block-accordion-heading__toggle {
	margin-bottom: 6px !important;
}

.wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--rot) !important;
	outline-offset: 4px !important;
}

/* Accordion Icons */
.accordion-icon {
	transition:
		opacity 0.3s,
		transform 0.3s;
}

.accordion-icon--open,
.header-cta-icon,
[aria-expanded='true'] .accordion-icon--closed {
	display: none;
}

[aria-expanded='true'] .accordion-icon--open {
	display: inline-block;
}

[aria-expanded='true'] .accordion-icon--open svg {
	animation: 0.3s forwards rotate-in;
}

@keyframes rotate-in {
	from {
		transform: rotate(-90deg);
		opacity: 0;
	}

	to {
		transform: rotate(0);
		opacity: 1;
	}
}

/* =========================================================
   7. Lists & Query/Posts
   ========================================================= */

ul.wp-block-list li::marker {
	color: var(--wp--preset--color--rot) !important;
}

.wp-block-query .columns-3.wp-block-post-template {
	grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)) !important;
	gap: clamp(1rem, 3vw, 3rem) !important;
}

/* =========================================================
   8. Footer & Newsletter (WS Form)
   ========================================================= */

.footer-nav {
	font-size: 1rem !important;
}

.footer-image {
	max-width: 120px;
}

form.newsletter-wrapper {
	max-width: 300px;
}

.newsletter-wrapper input#wsf-1-field-7 {
	padding: 8px 24px !important;
}

.newsletter-wrapper div#wsf-1-field-wrapper-7 {
	margin-bottom: 10px !important;
}

.newsletter-wrapper div#wsf-1-field-wrapper-8 {
	margin-bottom: 6px !important;
}

/* Submit Button */
.newsletter-wrapper button {
	background: var(--wp--preset--color--bg) !important;
	color: var(--wp--preset--text) !important;
	/* FIXME: ungültige Variable – sollte --wp--preset--color--text sein */
	font-weight: 700 !important;
	text-transform: uppercase !important;
	border-color: var(--wp--preset--color--bg) !important;
	padding: 8px 24px !important;
}

.newsletter-wrapper button:hover,
.newsletter-wrapper button:focus-visible {
	background: transparent !important;
	color: var(--wp--preset--color--bg) !important;
}

/* Checkbox / Consent */
.subscribe-check {
	margin-bottom: 6px !important;
}

.subscribe-check input[type='checkbox'] {
	width: 18px !important;
	height: 18px !important;
	min-height: 0 !important;
}

.newsletter-wrapper .subscribe-check label,
.newsletter-wrapper .subscribe-check label a {
	color: var(--wp--preset--color--text-light) !important;
}

.newsletter-wrapper .subscribe-check label#wsf-1-label-8-row-1 {
	margin-left: 24px !important;
}

.newsletter-wrapper input[type='checkbox'].wsf-field:checked::after {
	top: -2px !important;
	left: -2px !important;
}

.newsletter-feld-wrapper input[type='checkbox'].wsf-field:checked {
	background-color: var(--wp--preset--color--bg) !important;
}

.newsletter-feld-wrapper input[type='checkbox'].wsf-field:checked::after {
	border-color: var(--wp--preset--color--text) !important;
	background-color: var(--wp--preset--color--bg) !important;
}

.newsletter-feld-wrapper input[type='checkbox'].wsf-field:focus {
	border-color: var(--wp--preset--color--bg) !important;
}

.wsf-form input[type='checkbox'].wsf-field:focus {
	box-shadow: none !important;
}

/* Validation Feedback */
.wsf-form.wsf-validated .wsf-field:invalid ~ .wsf-invalid-feedback {
	color: #ffffff !important;
	font-weight: bold !important;
}

/* =========================================================
   9. Kontaktformular (WS Form)
   ========================================================= */

.kontaktformular-feld-wrapper button {
	background: var(--wp--preset--color--bg-dark) !important;
	border: 2px solid var(--wp--preset--color--bg-dark) !important;
	font-family: var(--wp--preset--font-family--texta) !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
	padding: 8px 24px !important;
}

.kontaktformular-feld-wrapper button:hover,
.kontaktformular-feld-wrapper button:focus-visible {
	background: var(--wp--preset--color--bg) !important;
	color: var(--wp--preset--color--bg-dark) !important;
}

.kontaktformular-feld-wrapper[data-type='textarea'] {
	margin-bottom: 6px !important;
}

.kontaktformular-feld-wrapper[data-type='html'] {
	font-size: 1.125rem !important;
	line-height: 1.1 !important;
	margin-bottom: 12px !important;
}

.kontaktformular-feld-wrapper[data-type='html'] a {
	color: var(--wp--preset--color--text) !important;
}

/* =========================================================
   10. Animationen
   ========================================================= */

/* Fade in on scroll */
.fade-in-up {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 0.8s ease-out,
		transform 2.2s ease-out;
}

.fade-in-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Rotating Image */
.wp-block-image.img-rotate {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}

.wp-block-image.img-rotate img {
	animation: slow-rotate 24s linear infinite;
	transform-origin: center center;
}

@keyframes slow-rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* =========================================================
   11. Transparent Header (Startseite)
   ========================================================= */

.wp-site-blocks:has(> .header-transparent) > main,
body:has(.header-transparent) main {
	margin-top: 0;
}

.header-transparent {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
}

.header-transparent + * {
	margin-top: 0;
}

/* =========================================================
   12. Responsive
   ========================================================= */

@media all and (max-width: 768px) {
	.wp-block-site-logo img {
		width: 100px !important;
	}

	.header-cta-icon {
		display: flex;
	}

	header.wp-block-template-part.is-stuck > .wp-block-group {
		padding-top: var(--wp--preset--spacing--small) !important;
		padding-bottom: var(--wp--preset--spacing--small) !important;
	}
}

@media all and (max-width: 700px) {
	.footer-top {
		display: flex !important;
		flex-direction: column !important;
		gap: 32px !important;
	}

	form.newsletter-wrapper {
		max-width: 100% !important;
	}
}

/* =========================================================
   Optional / deaktiviert: Cona Headings
   Bei Bedarf wieder aktivieren.
   ---------------------------------------------------------
   h2.wp-block-heading em,
   h2 em {
       font-family: var(--wp--preset--font-family--utopia);
       font-style: italic;
       font-weight: 600;
   }

   p strong,
   h2 strong,
   h3 strong,
   h4 strong {
       font-family: var(--wp--preset--font-family--texta);
       font-weight: 700;
   }
   ========================================================= */
/* Sticky Button */
a.sticky-contact {
	position: fixed;
	top: 20%;
	right: 0;
	transform: translateY(-20%);
	z-index: 99;
	writing-mode: vertical-lr;
	transform: rotate(180deg);
	padding: 1.5rem 0.75rem;
	background: var(--wp--preset--color--bg-dark);
	font-weight: 700;
	border-radius: 0;
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

@media all and (max-width: 768px) {
	a.sticky-contact {
		top: 10%;
		right: 0;
		transform: translateY(-10%);
		writing-mode: vertical-lr;
		transform: rotate(180deg);
		padding: 1.5rem 0.75rem;
	}
}