/*
Theme Name: HeimkinoRadar
Theme URI: https://heimkinoradar.de
Author: HeimkinoRadar
Author URI: https://heimkinoradar.de
Description: Schlankes, schnelles Block-Theme für HeimkinoRadar.de — Heimkino-Ratgeber, Kaufberatungen und Vergleiche. Optimiert für Lesbarkeit, mobile Darstellung und das Markup der hkr-kaufberatung-Skill (responsive Tabellen, CTA-Buttons, Hinweis-Boxen).
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heimkinoradar
*/

/* =========================================================
   HeimkinoRadar – Custom-CSS (ergänzt theme.json)
   Nur Dinge, die theme.json nicht abdeckt.
   ========================================================= */

/* ---- Grundlagen ---- */
body {
	-webkit-font-smoothing: antialiased;
}
.entry-content,
.wp-block-post-content {
	overflow-wrap: break-word;
}
.entry-content > * + *,
.wp-block-post-content > * + * {
	margin-top: 1.4rem;
}

/* ---- Kopf- und Fußbereich ---- */
.site-header {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.site-footer {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	margin-top: 3rem;
}
.site-footer a {
	color: #ffffff;
}
.hkr-footer-note {
	color: #cfcdc8;
}

/* ---- Beitrags-Meta (Datum · Kategorie) ---- */
.hkr-post-meta {
	gap: 0.4rem 0.6rem;
	margin-top: 0.4rem;
	margin-bottom: 1.5rem;
}

/* ---- Überschriften-Akzent ---- */
.entry-content h2,
.wp-block-post-content h2 {
	padding-bottom: 0.3em;
	border-bottom: 2px solid var(--wp--preset--color--border);
}

/* =========================================================
   Vergleichstabelle (HTML aus dem Skill + wp:table)
   ========================================================= */
.hkr-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.5rem 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}
/* Gemeinsame Tabellen-Optik: Scroll-Vergleichstabelle UND native wp:table im Beitrag */
.hkr-table-scroll table,
.wp-block-post-content .wp-block-table table,
.entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.98rem;
	background: var(--wp--preset--color--surface);
}
/* Nur die Scroll-Variante erzwingt eine Mindestbreite (breite Vergleiche) */
.hkr-table-scroll table {
	min-width: 520px;
}
.hkr-table-scroll th,
.wp-block-post-content .wp-block-table th,
.entry-content .wp-block-table th {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
	text-align: left;
	padding: 0.7em 0.85em;
	font-weight: 600;
}
.hkr-table-scroll th {
	white-space: nowrap;
}
.hkr-table-scroll td,
.wp-block-post-content .wp-block-table td,
.entry-content .wp-block-table td {
	padding: 0.65em 0.85em;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top;
}
.hkr-table-scroll tr:nth-child(even) td,
.wp-block-post-content .wp-block-table tr:nth-child(even) td,
.entry-content .wp-block-table tr:nth-child(even) td {
	background: #faf9f6;
}
/* Desktop: Tabelle aus der 720px-Textspalte mittig auf bis zu wideSize (1100px)
   ausbrechen lassen, damit am Desktop kein horizontales Scrollen nötig ist.
   Nie breiter als der Viewport (kein seitenweiter Overflow); mobil unverändert. */
@media (min-width: 1024px) {
	.hkr-table-scroll {
		max-width: none;
		width: min(1100px, calc(100vw - 3rem));
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* =========================================================
   CTA-Affiliate-Button (orange, Fallback falls theme.json
   nicht greift)
   ========================================================= */
.hkr-cta .wp-block-button__link,
.wp-block-button.hkr-cta .wp-element-button {
	background-color: var(--wp--preset--color--cta);
	color: #ffffff;
	font-weight: 700;
	border-radius: 6px;
}
.hkr-cta .wp-block-button__link:hover,
.wp-block-button.hkr-cta .wp-element-button:hover {
	background-color: #c76a12;
}

/* =========================================================
   Hinweis-/Werbekennzeichnungs-Box
   ========================================================= */
.hkr-hinweis {
	background: #fffaf0;
	border-left: 4px solid var(--wp--preset--color--cta);
	padding: 0.9em 1.1em;
	border-radius: 4px;
	font-size: 0.95rem;
	color: #4a4a4a;
}
.hkr-hinweis p {
	margin: 0;
}

/* =========================================================
   "Auf einen Blick"-Box
   ========================================================= */
.hkr-box {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1.2em 1.4em;
}
.hkr-box > :first-child {
	margin-top: 0;
}

/* =========================================================
   Pro / Contra
   ========================================================= */
.hkr-pro-contra {
	gap: 1rem;
}
.hkr-pro-contra .hkr-pro {
	background: #f3fbf5;
	border: 1px solid #cfe9d6;
	border-radius: 8px;
	padding: 1em 1.2em;
}
.hkr-pro-contra .hkr-contra {
	background: #fdf4f3;
	border: 1px solid #f1d3cf;
	border-radius: 8px;
	padding: 1em 1.2em;
}
.hkr-pro-contra h4 {
	margin-top: 0;
}

/* =========================================================
   Startseiten-Hero
   ========================================================= */
.hkr-hero {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.hkr-hero h1,
.hkr-hero h2 {
	color: var(--wp--preset--color--base);
}

/* =========================================================
   Startseite – Kategorie-Grid (Karten)
   ========================================================= */
.hkr-cat-grid {
	gap: 1rem;
	margin-top: 1.2rem;
}
.hkr-cat-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 1.1rem 1.25rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hkr-cat-card:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 2px 10px rgba(15, 110, 120, 0.08);
}
.hkr-cat-card h3 {
	margin: 0 0 0.3rem;
}
.hkr-cat-card h3 a {
	text-decoration: none;
}
.hkr-cat-card h3 a:hover {
	text-decoration: underline;
}
.hkr-cat-card .hkr-cat-desc {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* ---- Footer-Kategorienzeile ---- */
.hkr-footer-cats {
	margin-bottom: 0.4rem;
}
.hkr-footer-cats a {
	color: #ffffff;
	text-decoration: none;
}
.hkr-footer-cats a:hover {
	text-decoration: underline;
}

/* =========================================================
   Mobile-Feinschliff
   ========================================================= */
@media (max-width: 600px) {
	.hkr-post-meta {
		font-size: 0.85rem;
	}
}