/*
Theme Name: Coping Child
Theme URI: https://www.coping-app.de
Description: Child-Theme für Kadence mit dem Coping-Designsystem (Petrol/Teal/Gold). Setzt Farben, Buttons, Bild- und Blogkarten-Rundung global.
Author: Coping
Template: kadence
Version: 1.7.0
Text Domain: coping-child
*/

/* =========================================================
   COPING BUTTON-DESIGN (global)
   ========================================================= */
.wp-block-kadence-advancedbtn .kb-button,
.wp-block-kadence-advancedbtn .kt-button,
.kb-buttons-wrap .kb-button,
.wp-block-button__link,
.button,
button.button,
input[type="submit"] {
	background-color: #16443F !important;
	color: #ffffff !important;
	font-size: 17px !important;
	font-weight: 600 !important;
	letter-spacing: -0.1px !important;
	padding: 16px 30px !important;
	border: none !important;
	border-radius: 12px !important;
	box-shadow: 0 6px 20px rgba(22,68,63,0.18) !important;
	transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease !important;
	text-decoration: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	cursor: pointer !important;
}

.wp-block-kadence-advancedbtn .kb-button:hover,
.kb-buttons-wrap .kb-button:hover,
.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
	background-color: #15302C !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 26px rgba(22,68,63,0.24) !important;
}

/* =========================================================
   BILD-RUNDUNG (normale Inhaltsbilder)
   ========================================================= */
.wp-block-image img,
.wp-block-kadence-image img,
.kb-image-figure img {
	border-radius: 16px;
}

/* =========================================================
   BLOG: Beitragskarten mit sauber abgerundeten Ecken
   Loest das Problem: Bild ragt ueber die runde Kartenecke
   hinaus (oben eckig, unten rund).
   Trick: die KARTE bekommt die Rundung + overflow:hidden,
   das Bild darin bleibt eckig und wird sauber beschnitten.
   ========================================================= */
.wp-block-kadence-posts .entry,
.wp-block-kadence-posts article,
.wp-block-kadence-advancedquery article,
.wp-block-kadence-advancedquery .kb-query-item,
.kb-posts .entry,
.loop-entry,
.entry.content-bg,
.grid-item .entry,
.post-archive .entry {
	border-radius: 18px !important;
	overflow: hidden !important;
}

/* Beitragsbild fuellt die Kartenbreite, Rundung uebernimmt die Karte */
.loop-entry .post-thumbnail,
.entry .post-thumbnail,
.wp-block-kadence-posts .post-thumbnail,
.kadence-post-image,
.post-thumbnail img,
.loop-entry .post-thumbnail img,
.kb-post-image img,
.wp-block-kadence-advancedquery img.wp-post-image {
	border-radius: 0 !important;
	display: block;
	width: 100%;
}

/* =========================================================
   BLOG-FILTER: aktiver Button
   Vergib deinen Filter-Buttons die Klassen
   coping-filter-alle / coping-filter-finanzen / usw.
   ========================================================= */
.coping-filter-active,
a.coping-filter-active .kb-button,
.coping-filter-active.kb-button {
	background-color: #16443F !important;
	color: #ffffff !important;
	border-color: #16443F !important;
}

/* =========================================================
   BLOG-FILTER: Zustand der Kategorie-Buttons
   Der aktive Button wird per JS mit .coping-filter-active
   markiert. Petrol-Hintergrund, weisse Schrift.
   ========================================================= */
.coping-filter-active,
.coping-filter-active .kb-button,
a.coping-filter-active {
	background-color: #16443F !important;
	color: #FFFFFF !important;
	border-color: #16443F !important;
}

/* Nicht-aktive Filter-Buttons: hell mit feinem Rahmen */
.coping-filter:not(.coping-filter-active),
.coping-filter:not(.coping-filter-active) .kb-button {
	background-color: #FFFFFF !important;
	color: #3C4544 !important;
	border: 1px solid #E3DED3 !important;
	box-shadow: none !important;
}

.coping-filter:not(.coping-filter-active):hover,
.coping-filter:not(.coping-filter-active):hover .kb-button {
	border-color: #2E8074 !important;
	color: #16443F !important;
}

/* =========================================================
   BEITRAG: volle Breite fuer selbst gebaute Blocklayouts
   Loest das Problem, dass Sektions-Hintergruende nicht bis
   zum Rand laufen. Ursache: drei verschachtelte Container
   (content-container / entry.content-bg / entry-content-wrap)
   mit Breitenbegrenzung, Kartenrahmen und 2rem Padding.
   Die Blocklayouts sollen davon nicht eingeschnuert werden.
   ========================================================= */
.single-entry.content-bg,
.single .entry.content-bg {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

.single .content-container.site-container {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.single .content-area {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Das 2rem-Padding des inneren Wrappers aufheben,
   damit Sektionen bis an den Rand laufen. */
.single .entry-content-wrap {
	padding: 0 !important;
}

/* Der Beitragsinhalt selbst darf volle Breite nutzen.
   Die Lesebreite steuerst du jetzt pro Zeilenlayout-Block
   ueber dessen eigene Content-Breite (schmal = 720px). */
.single .entry-content {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}