/* ==========================================================================
   Dolmetscherpool Marburg-Biedenkopf — Globale Stile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header / Site Navigation
   -------------------------------------------------------------------------- */

.wp-block-template-part[data-area="header"],
header.wp-block-template-part {
    background-color: var(--wp--preset--color--dark);
}

/* Header-Logos: Größe begrenzen */
.dolma-header-logo img {
    max-height: 60px;
    width: auto;
    display: block;
}

/* Site-Header: Hintergrund dunkel, Text weiß */
.wp-site-blocks > header,
.site-header {
    background-color: var(--wp--preset--color--dark);
    color: #ffffff;
}

/* Navigation Links */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
    color: #ffffff !important;
    text-decoration: none;
}

.wp-block-navigation a:hover {
    color: var(--wp--preset--color--primary) !important;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.wp-element-button {
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-weight: 700;
    transition: background-color 0.2s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--wp--preset--color--primary-dark);
    color: #ffffff;
}

/* Sekundärer Button (Outline-Stil) */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Hero / Cover-Block
   -------------------------------------------------------------------------- */

.wp-block-cover.is-style-hero-dark {
    min-height: 420px;
    background-color: var(--wp--preset--color--dark);
}

.wp-block-cover.is-style-hero-dark .wp-block-cover__inner-container {
    padding: 3rem 1.5rem;
}

/* --------------------------------------------------------------------------
   Karten / Cards (Group-Blöcke als Karten)
   -------------------------------------------------------------------------- */

.dolma-card {
    background-color: var(--wp--preset--color--background-light);
    border-left: 4px solid var(--wp--preset--color--primary);
    border-radius: 4px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Info-Box für Dolmetscher-Seite
   -------------------------------------------------------------------------- */

.dolma-info-box {
    background-color: var(--wp--preset--color--dark);
    color: #ffffff;
    border-radius: 4px;
    padding: 2rem;
}

.dolma-info-box h2,
.dolma-info-box h3 {
    color: #ffffff;
}

.dolma-info-box a {
    color: #ffffff;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Prozess-Schritte (für Startseite)
   -------------------------------------------------------------------------- */

.dolma-step {
    text-align: center;
    padding: 1.5rem 1rem;
}

.dolma-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background-color: var(--wp--preset--color--primary);
    color: #ffffff;
    font-weight: 700;
    font-size: 1.25rem;
    border-radius: 50%;
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.wp-block-template-part[data-area="footer"],
footer.wp-block-template-part {
    background-color: var(--wp--preset--color--dark-secondary);
    color: #ffffff;
}

footer .wp-block-site-title a,
footer .wp-block-site-title {
    color: #ffffff !important;
}

footer a,
.site-footer a {
    color: #ffffff;
    text-decoration: underline;
}

footer a:hover,
.site-footer a:hover {
    color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------------------------
   Abstände: Full-Width-Blöcke nahtlos aneinanderreihen
   -------------------------------------------------------------------------- */

/* Kein Abstand zwischen aufeinanderfolgenden Full-Width-Sektionen */
.wp-block-post-content > .wp-block-cover.alignfull,
.wp-block-post-content > .wp-block-group.alignfull {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   Kontrast-Fix: Dunkel-Hintergrund
   -------------------------------------------------------------------------- */

/* Site-Titel + Tagline im Header weiß */
.wp-block-template-part[data-area="header"] .wp-block-site-title a,
header.wp-block-template-part .wp-block-site-title a,
.wp-block-template-part[data-area="header"] .wp-block-site-tagline {
    color: #ffffff !important;
}

/* Cover-Blöcke mit dunklem Overlay: Text immer weiß
   (.is-dark = korrekte Klasse; .is-light Fallback falls WP falsch rendert) */
.wp-block-cover.is-dark .wp-block-cover__inner-container h1,
.wp-block-cover.is-dark .wp-block-cover__inner-container h2,
.wp-block-cover.is-dark .wp-block-cover__inner-container h3,
.wp-block-cover.is-dark .wp-block-cover__inner-container p,
.wp-block-cover.is-dark .wp-block-cover__inner-container li,
.wp-block-cover.has-dark-background-color .wp-block-cover__inner-container h1,
.wp-block-cover.has-dark-background-color .wp-block-cover__inner-container h2,
.wp-block-cover.has-dark-background-color .wp-block-cover__inner-container h3,
.wp-block-cover.has-dark-background-color .wp-block-cover__inner-container p {
    color: #ffffff !important;
}

/* Buttons: immer weiße Schrift auf rotem Hintergrund */
.wp-block-button__link,
.wp-block-button__link.has-primary-background-color,
.wp-element-button {
    color: #ffffff !important;
}

.wp-block-button__link:hover,
.wp-block-button__link.has-primary-background-color:hover,
.wp-element-button:hover {
    color: #ffffff !important;
}

/* dolma-info-box: alle Kindelemente weiß */
.dolma-info-box,
.dolma-info-box p,
.dolma-info-box li,
.dolma-info-box strong {
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   Allgemein
   -------------------------------------------------------------------------- */

/* Fokus-Styles für Barrierefreiheit */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
}

/* Abschnitt mit hellem Hintergrund */
.dolma-section-light {
    background-color: var(--wp--preset--color--background-light);
    padding: 3rem 0;
}

/* --------------------------------------------------------------------------
   FAQ / Akkordeon
   -------------------------------------------------------------------------- */

/* FAQ-Überschrift mit Hintergrundfarbe: Innenabstand damit Text nicht am Rand klebt */
.wp-block-heading.has-custom-color-1-background-color {
    padding: 1rem clamp(1rem, 5vw, calc((100% - 800px) / 2 + 1rem));
}

/* Akkordeon: auf Inhaltsbreite begrenzen und zentrieren */
.wp-block-accordion {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem 1rem 3rem;
    box-sizing: border-box;
    width: 100%;
}

/* Trennlinie in Primärfarbe */
hr.dolma-divider {
    border: none;
    border-top: 3px solid var(--wp--preset--color--primary);
    margin: 2rem 0;
    width: 60px;
}