/*
Theme Name:     Jens Welsch Fotograf
Theme URI:      https://www.jens-welsch.de/
Template:       kadence
Author:         Jens Welsch
Author URI:     https://www.jens-welsch.de/
Description:    Kadence Child-Theme für jens-welsch.de. Leica/Bauhaus-Design: warme Neutraltöne, Kirschrot-Akzent, serifenlose Typografie.
Version:        1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: Proprietary
Text Domain: jens-welsch-fotograf
*/

/* ============================================================
   DESIGN-TOKENS
   ============================================================ */
:root {
  --jw-ink:    #111111;
  --jw-gray:   #333333;
  --jw-muted:  #66635F;
  --jw-line:   #D8D6D0;
  --jw-bg:     #F5F3EE;
  --jw-white:  #FFFDFA;
  --jw-red:    #C41E1E;
  --jw-dark:   #0A0A0A;
}

/* ============================================================
   BASIS-TYPOGRAFIE
   ============================================================ */
body {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--jw-ink);
  background-color: var(--jw-bg);
}
h1, h2, h3, h4, h5, h6 {
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jw-ink);
  line-height: 1.05;
}
p { color: var(--jw-gray); font-size: 15px; line-height: 1.7; }
a { color: var(--jw-ink); text-decoration: none; }
a:hover { color: var(--jw-red); }

/* ============================================================
   HEADER (Kadence Theme)
   ============================================================ */
.site-header,
.site-header.kadence-sticky-header {
  background-color: rgba(245,243,238,0.95) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--jw-line) !important;
}
/* Logo-Text */
.site-branding .site-title a,
.kadence-brand .site-title a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--jw-ink) !important;
}
.site-branding .site-description,
.kadence-brand .site-description {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--jw-ink) !important;
}
/* Navigation */
.primary-navigation a,
.secondary-navigation a,
#primary-navigation a,
#secondary-navigation a {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  color: var(--jw-ink) !important;
}
.primary-navigation a:hover,
.secondary-navigation a:hover { color: var(--jw-red) !important; }

/* ============================================================
   BUTTONS (Kadence + Gutenberg)
   ============================================================ */
.wp-block-button__link,
.kb-btn,
.kadence-button,
.wp-element-button {
  background-color: var(--jw-red) !important;
  color: #ffffff !important;
  border-color: var(--jw-red) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  transition: opacity 0.2s !important;
}
.wp-block-button__link:hover,
.kb-btn:hover,
.kadence-button:hover { opacity: 0.82 !important; }

/* Outline-Button */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
  background-color: transparent !important;
  color: var(--jw-red) !important;
  border: 1px solid var(--jw-red) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--jw-red) !important;
  color: #fff !important;
}

/* ============================================================
   HILFSELEMENTE
   ============================================================ */
/* Rote Trennlinie (wp:separator) */
.wp-block-separator.is-style-wide,
.wp-block-separator {
  border-color: var(--jw-red) !important;
  border-top-width: 2px !important;
  max-width: 56px;
  margin-left: 0 !important;
  margin-right: auto !important;
}
/* Zentrierte Trennlinie */
.jw-center .wp-block-separator { margin: 0 auto !important; }

/* Rote Nummer / Kicker */
.jw-red { color: var(--jw-red) !important; }
.jw-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--jw-red) !important;
}
.jw-number {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--jw-red) !important;
  display: block;
}

/* ============================================================
   LAYOUT-HELFER für Gutenberg-Columns
   ============================================================ */

/* Bild füllt Spalte vollständig aus */
.jw-img-fill .wp-block-image,
.jw-img-fill .wp-block-image img,
.jw-img-fill figure,
.jw-img-fill figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}
/* Spalte ohne Padding (für Bilder) */
.jw-col-img {
  padding: 0 !important;
  align-self: stretch !important;
}
/* Spalte mit Text-Padding */
.jw-col-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 52px 48px !important;
}
/* Karten-Text-Spalte: Text unten */
.jw-col-card-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 32px 24px 36px !important;
}

/* Trennlinie zwischen Sektionen */
.jw-border-top {
  border-top: 1px solid var(--jw-line) !important;
}
.jw-bg-white { background-color: var(--jw-white) !important; }
.jw-bg-cream  { background-color: var(--jw-bg) !important; }
.jw-bg-dark   { background-color: var(--jw-dark) !important; color: #fff !important; }

/* ============================================================
   GUTENBERG COLUMNS – Abstände entfernen
   ============================================================ */
.wp-block-columns {
  gap: 0 !important;
  margin-bottom: 0 !important;
}
.wp-block-column {
  margin: 0 !important;
}
/* Volle Breite ohne seitliche Einschränkung */
.alignfull { max-width: 100% !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--jw-bg) !important;
  border-top: 1px solid var(--jw-line) !important;
  color: var(--jw-muted) !important;
}
.site-footer a { color: var(--jw-muted) !important; }
.site-footer a:hover { color: var(--jw-red) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 781px) {
  .jw-col-text { padding: 40px 24px !important; }
  .jw-col-card-text { padding: 28px 20px 32px !important; }
  .wp-block-columns.jw-no-stack { flex-wrap: nowrap !important; }
}
@media (max-width: 600px) {
  .jw-col-text { padding: 36px 20px !important; }
}

/* ============================================================
   LOGO – Größe begrenzen
   ============================================================ */
.site-logo img,
.custom-logo,
.kadence-logo img,
.header-logo img,
.site-branding img,
img.custom-logo {
  max-width: 50px !important;
  width: 50px !important;
  height: auto !important;
}
@media (max-width: 600px) {
  .site-logo img,
  .custom-logo,
  .kadence-logo img,
  .header-logo img,
  .site-branding img,
  img.custom-logo {
    max-width: 36px !important;
    width: 36px !important;
  }
}