/*
Theme Name:     Tove Fab50s
Template:       tove
Version:        1.0
*/

/* alle Links bei Hover in unserem Rot und ohne Unterstrich*/
a:hover {
  color: #cf2e2e !important;
  text-decoration: none;
}

/*Button einheitlich stylen*/
button,
.wp-block-button__link,
.wp-block-button a {
  border: none !important;
  box-shadow: none !important;
  border-radius: 15px !important;
}

/*Styling Suchseite */

/* Suchformular-Button in einheitlicher Buttonfarbe */
input[type="submit"].search-submit,
button.search-submit,
.wp-block-search__button {
    background-color: #d9cbbe !important;
    color: #48433f !important;              /* gut lesbarer Kontrast, ggf. anpassen */
    border: none !important;
    border-radius: 3px !important;       /* ggf. anpassen für deine Buttons */
    padding: 0.6em 1.3em !important;     /* angenehm großer Button */
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: none;
    display: inline-flex;                /* für Icon-Button Kombination */
    align-items: center;
    gap: 0.5em;                         /* Platz zwischen Text und Icon */
}

/* Hover- und Fokus-Effekt für den Button (z. B. Schrift dunkelrot) */
input[type="submit"].search-submit:hover,
button.search-submit:hover,
.wp-block-search__button:hover,
input[type="submit"].search-submit:focus,
button.search-submit:focus,
.wp-block-search__button:focus {
    background-color: #d9cbbe !important; /* Hintergrund bleibt gleich */
    color: #cf2e2e !important;            /* Schriftfarbe wird rot */
    outline: none;
}

/* Lupe im Suchbutton: Standardzustand in Schriftfarbe, bei Hover rot */
.wp-block-search__button svg {
    fill: #48433f !important;                /* Standard: Icon in normaler Schriftfarbe */
    stroke: #48433f !important;
    transition: fill 0.2s, stroke 0.2s;
}
.wp-block-search__button:hover svg,
.wp-block-search__button:focus svg {
    fill: #cf2e2e !important;             /* Hover: Icon in Rot */
    stroke: #cf2e2e !important;
}


/*Kategorie Buttons auf der Suchseite sauber stylen */

/* 
  Container für die Badges:
  Sorgt für mittige, flexible Anordnung mit schönem Abstand.
  Die Klasse "search-badges-container" muss im FSE um alle Badges herum stehen!
*/
/* Container für die Badges */
.search-badges-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8em;
    margin: 1.5em 0;
}

/* Badges – gleich breit, zartes Design */
.search-badges-container .cat-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 2.7em;
    padding: 0 1em;
    border-radius: 999px;
    background: #d9cbbe;                /* Hauptfarbe */
    color: #48433f !important;          /* Standardschrift */
    font-size: 1.05em;
    font-family: inherit;
    border: none;                       /* Kein Rahmen */
    text-decoration: none;
    transition: color 0.18s;            /* Nur Schriftfarbe animieren */
    box-shadow: none;
    cursor: pointer;
    margin: 0.4em 0.3em;
    box-sizing: border-box;
    text-align: center;
    font-weight: 500;
}

/* Nur Schriftfarbe beim Hover/Fokus ändern */
.search-badges-container .cat-link:hover,
.search-badges-container .cat-link:focus {
    background: #d9cbbe;                /* Hintergrund bleibt */
    color: #cf2e2e !important;          /* Schrift wird Rot */
    border: none;                       /* Kein Rahmen */
}

/* Responsive: Mobil-Optimierung */
/* ... Desktop- und Tablet-Styling wie gehabt ... */

@media (max-width: 600px) {
    .search-badges-container,
    .search-badges-container .wp-block-group {
        display: block !important;
        gap: 0 !important;
    }
    .search-badges-container .cat-link {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0.3em 0;
        font-size: 1em;
        box-sizing: border-box;
        padding: 0.8em 1em;   /* mehr Luft oben/unten */
    }
}




/*Styling loopfab50s über css-Klasse beitragskarte */
.beitragskarte h2 {
  width: 100%;
	min-width: 100%;
  box-sizing: border-box;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 4.5em; /* z. B. 3 Zeilen à 1.5em */
  padding: 1em;
  background-color: #fff;
  border-radius: 6px;
}

/* Entfernt das leere "Weiterlesen"-Link-Element aus dem Excerpt */
.wp-block-post-excerpt__more-link {
  display: none !important;
}

.beitragskarte .wp-block-post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  height: calc(1.5em * 8);
  line-height: 1.5;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  min-width: 100%;
}

/* Dieser Teil ist ganz wichtig: Er entfernt das störende <p> */
.beitragskarte .wp-block-post-excerpt > p {
  all: unset;
  display: inline;
}

/* Container um alle Karten */
.wp-block-query {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Jede Karte gleich breit + gleich hoch */
.beitragskarte {
  flex: 1 1 calc(50% - 24px); /* für zwei Spalten mit Lücke */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* nötig für Firefox */
  box-sizing: border-box;
}

/* Entfernt automatisches Padding von Gruppen mit has-global-padding */
.weiterlesen-wrapper.has-global-padding {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}

/*Links bei Kategorieanzeigen im Beitrag ausschalten */
.taxonomy-category a {
  pointer-events: none;
  text-decoration: none;
  color: inherit;
  cursor: default;
}
/*Ende Styling loopfab50s*/


/*Rahmen für "Kommentar abgeben Box" entfernen, da fest im Theme verdrahtet*/
/* 1. Group ohne Schatten*/
.no-shadow.wp-block-group {
  -webkit-box-shadow: none !important;
  -moz-box-shadow:    none !important;
  box-shadow:         none !important;
  border:             none !important;
  filter:             none !important;
  background:         transparent !important;
}

/* 2. Inneres Comment‑Form (falls es trotzdem noch Schatten mitbringt) */
.no-shadow.wp-block-group .comment-respond,
.no-shadow.wp-block-group .wp-block-post-comments-form {
  -webkit-box-shadow: none !important;
  -moz-box-shadow:    none !important;
  box-shadow:         none !important;
  border:             none !important;
  filter:             none !important;
}

/* 3. Pseudo‑Elemente ausschalten */
.no-shadow.wp-block-group::before,
.no-shadow.wp-block-group::after {
  -webkit-box-shadow: none !important;
  -moz-box-shadow:    none !important;
  box-shadow:         none !important;
  border:             none !important;
}
/*Ende Kommentarbox*/


/*Styling Merkliste*/
@media (max-width: 600px) {
  .fab50s-merkliste-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6em !important;
  }
  .fab50s-merkliste-image {
    margin: 0 0 0.7em 0 !important;
    width: 100% !important;
    max-width: 150px !important; /* Bildbreite nach Wunsch */
  }
  .fab50s-merkliste-image a,
  .fab50s-merkliste-image img {
    display: block;
    width: 100% !important;
    max-width: 150px !important;
    margin: 0 !important;
  }
  .fab50s-merkliste-content {
    width: 100% !important;
  }
}

.fab50s-merkliste-separator {
  border: none;
  border-top: 2px solid #48433F;  /* Deine Wunschfarbe */
  opacity: 1;
  margin-top: 2rem;
  margin-bottom: 0;
  width: 100%;
  max-width: 900px;    /* gleiche Breite wie Loop, ggf. anpassen */
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .fab50s-merkliste-separator {
    max-width: 100%;
  }
}
/*Ende Styling Merkliste */

/* Suchfeld: Dunkelgrauer Rand beim Fokus */
.wp-block-search__input:focus {
    outline: 2px solid #48433f;  /* dein dunkelgrau, ggf. anpassen */
    outline-offset: 0;
    box-shadow: none !important; /* entfernt evtl. weitere Effekte */
    border-color: #48433f; /* für Themes, die border verwenden */
}

/*Text to speech Button schöner  */

/* Hover: nur Schrift + Icon in Rot; Hintergrund bleibt #d9cbbe */
#tts__listent_content_1.tts__listent_content:hover {
  color: #e30008 !important;
  background-color: #d9cbbe !important; /* nicht abdunkeln */
}

/* Icon mitfärben */
#tts__listent_content_1.tts__listent_content:hover svg polygon,
#tts__listent_content_1.tts__listent_content:hover svg path {
  fill: #e30008 !important;
}

/* Falls das Plugin dem <span> eine eigene Farbe gibt: erbt jetzt die Button-Farbe */
#tts__listent_content_1.tts__listent_content > span,
#tts__listent_content_1.tts__listent_content > span * {
  color: inherit !important;
}

/* MemberPress Login-Button */
.mepr-share-button.button-primary {
  background-color: #D9CBBE;    /* Button-Hintergrund */
  color: #48433F;               /* Textfarbe normal */
  border-radius: 15px;          /* Rundung */
  padding: 0.75em 1.5em;        /* Innenabstand */
  border: none;                 /* kein Rahmen */
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

/* Hover-Effekt */
.mepr-share-button.button-primary:hover {
  background-color: #D9CBBE;    /* Hintergrund bleibt */
  color: #cf2e2e;               /* Text wird rot */
}

/* ============================
   MEMBERPRESS ACCOUNT TABS (FAB50s)
   ============================ */

/* Tabs zu Buttons machen */

#mepr-account-nav {
  text-align: center;
  margin: 30px auto 40px;
  padding: 0;
}

#mepr-account-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}

#mepr-account-nav li {
  margin: 0;
}

#mepr-account-nav a {
  display: inline-block;
  padding: 10px 22px;
  background-color: #d9cbbe;        /* sanftes Beige */
  color: #48433f;                   /* dunkles Grau für Text */
  border-radius: 15px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}

#mepr-account-nav a:hover {
  background-color: #d9cbbe;   /* gleiche Buttonfarbe wie normal */
  color: #cf2e2e;              /* Markenrot für Text beim Hover */
}


#mepr-account-nav li.mepr-active-nav-tab a {
  background-color: #cf2e2e;   /* Fab50s-Rot für aktiven Button */
  color: #48433f;              /* deine Standard-Schriftfarbe */
  border-color: #cf2e2e;
  cursor: default;
}


#mepr-account-nav a:focus {
  outline: 2px solid #cf2e2e;
  outline-offset: 3px;
}

/* Optional: mobile Anpassung */
@media (max-width: 600px) {
  #mepr-account-nav ul {
    flex-direction: column;
    gap: 8px;
  }

  #mepr-account-nav a {
    width: 100%;
  }
}

/* Bundesland-Feld im Account-Formular ausblenden */
.mepr_mepr-address-state {
  display: none !important;
}

/* Widerrufs-Checkbox im Account-Formular ausblenden */
.mepr_mepr_ich_stimme_ausdruecklich_zu_dass_mein_abo_sofort_nach_dem_kauf_beginnt_mir_ist_bewusst_dass_ich_dadurch_mein_gesetzliches_widerrufsrecht_verliere {
  display: none !important;
}

/* ============================
   MEMBERPRESS ACCOUNT BUTTON
   ============================ */

#mepr_account_form input.mepr-submit.mepr-share-button {
  display: inline-block;
  background-color: #d9cbbe;     /* Fab50s-Beige */
  color: #48433f;                /* dunkles Grau für Text */
  border: none;
  border-radius: 15px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Hover-Effekt: ruhig, aber klarer Akzent */
#mepr_account_form input.mepr-submit.mepr-share-button:hover {
  background-color: #d9cbbe;     /* gleiches Beige */
  color: #cf2e2e;                /* Fab50s-Rot für Text */
}

/* Fokus-Zustand für Tastatur-Nutzer */
#mepr_account_form input.mepr-submit.mepr-share-button:focus {
  outline: 2px solid #cf2e2e;
  outline-offset: 3px;
}

/* ============================
   "PASSWORT ÄNDERN" LINK ALS BUTTON (FAB50s-STYLE)
   ============================ */

#mepr_account_form a[href*="action=newpassword"] {
  display: inline-block;
  background-color: #d9cbbe;   /* Fab50s-Beige */
  color: #48433f;              /* dunkles Grau für Text */
  border-radius: 15px;
  padding: 12px 28px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  margin-top: 15px;            /* leichter Abstand über dem Button */
  transition: all 0.25s ease;
}

/* Hover-Effekt: Schrift in Fab50s-Rot */
#mepr_account_form a[href*="action=newpassword"]:hover {
  background-color: #d9cbbe;
  color: #cf2e2e;
}

/* Fokus-Zustand */
#mepr_account_form a[href*="action=newpassword"]:focus {
  outline: 2px solid #cf2e2e;
  outline-offset: 3px;
}