/*
Theme Name: pietsch
Theme URI: 
Author: Simone Mech
Author URI: 
Description: Ein eigenes Blocktheme für Betriebliche Suchthilfe Pietsch
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pietsch
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ---------------------------------------------------- */
/* Accessibility */
/* ---------------------------------------------------- */

:where(.wp-site-blocks *:focus){
	outline-width:2px;
	outline-style:solid;
}


/* ---------------------------------------------------- */
/* Schrift */
/* ---------------------------------------------------- */
/* autom. Silbentrennung */
/* body {
 hyphens: auto;
} */

strong {
	font-weight:600;
}

.entry-content h1 {
	margin-bottom: 3rem;
}

/* Textlinks im Content & Footer */
.entry-content p a,
footer p a {
    color: var(--wp--preset--color--contrast); /* Text schwarz */
    font-weight: 600;         /* Normalzustand */
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;    /* Abstand zw. Text > Linie */
    text-decoration-color: var(--wp--preset--color--accent); /* Unterstrich pink */
}
/* Hover: Unterstrich schwarz */
.entry-content p a:hover,
footer p a:hover {
	color: var(--wp--preset--color--accent); /* Text pink */
    text-decoration-color: var(--wp--preset--color--contrast); /* Unterstrich schwarz */
}

/* ---------------------------------------------------- */
/* Hauptmenü */
/* ---------------------------------------------------- */

/* nur Desktop */
@media (min-width: 782px) {
	
  /* Submenü: Dropdown etwas tiefer, ABER ohne Hover-Spalt */
  .wp-block-navigation .wp-block-navigation__submenu-container {
    top: 100% !important;     /* kein Luftspalt mehr */
    margin-top: 0 !important;

    padding-top: 0.5rem;      /* „Abstand“ nach oben innen */
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem;
  }

  /* 1) Innenabstand des Dropdown-Kastens */
  .wp-block-navigation .wp-block-navigation__submenu-container {
    padding: 0.75rem;           /* innen */
    min-width: 16rem;           /* optional: Dropdown breiter */
  }

  /* 2) Abstand zwischen den einzelnen Punkten */
  .wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-navigation-item {
    margin: 0.25rem 0;          /* vertikaler Abstand */
  }

  /* 3) Klickfläche/Innenabstand pro Link */
  .wp-block-navigation .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
    padding: 0.5rem 0.75rem;    /* Link-Padding */
    display: block;             /* damit Padding wirklich greift */
  }	
	
/* Navigation: kein Unterstrich im Normalzustand */
  .wp-block-navigation .wp-block-navigation-item__content {
    text-decoration: none;
  }
	
  /* Hover: Unterstrich für alle Menüebenen */
  .wp-block-navigation .wp-block-navigation-item__content:hover {
    text-decoration: underline;
    text-underline-offset: 0.5em;
	text-decoration-thickness: 4px;
    text-decoration-color: #ffffff;
  }
	
  /* Aktive Seite + Parent-Seite */
  .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
  .wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
    text-decoration: underline;
    text-underline-offset: 0.5em;
	  text-decoration-thickness: 4px;
  }
	
  /* Submenü: schwarzer Unterstrich bei Hover */
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content:hover {
    text-decoration-color: var(--wp--preset--color--accent); /* pink */
	  text-decoration-thickness: 2px;
	  text-underline-offset: 0.35em;
  }

  /* Submenü: schwarzer Unterstrich bei aktiver Seite */
  .wp-block-navigation__submenu-container
  .current-menu-item > .wp-block-navigation-item__content {
    text-decoration-color: var(--wp--preset--color--accent); /* pink */
	  text-decoration-thickness: 2px;
	  text-underline-offset: 0.35em;
  }
		
}


/* ---------------------------------------------------- */
/* Gutenberg */
/* ---------------------------------------------------- */

/* ----- Liste ----- */
/* Grundliste */
.entry-content ul {
  list-style: none;
  padding-left: 0;
}
/* ----- Standardliste mit pinken, großen Punkten ----- */
/* Listeneintrag als Flex */
.entry-content ul li {
  display: flex;
  align-items: center;   /* Punkt exakt mittig zum Text */
  gap: 0.75em;
	align-items: flex-start; /* für mehrzeiligen Text */
}
/* Eigener Punkt */
.entry-content ul li::before {
  content: "";
  width: 0.6em;
  height: 0.6em;
  background-color: var(--wp--preset--color--accent); /* pink */
  border-radius: 50%;
  flex-shrink: 0;
	margin-top: 0.4em; /* für mehrzeiligen Text */
}

/* ----- Custom-Liste mit blauen Checkmarks ----- */
/* Klasse: list-check-blue */
.entry-content ul.list-check-blue li {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
}
/* Standard-Punkt explizit entfernen */
.entry-content ul.list-check-blue li::before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--wp--preset--color--accent-2); /* blau */
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.3em;
}

/* ----- Trenner ----- */
.wp-block-separator {
  border: none;
  height: 1px;                 /* Linienhöhe */
background-color: #cfcfcf;
  margin: 4rem auto;           /* Abstand oben & unten */
  max-width: 100%;
}
@media (max-width: 768px) {
  .wp-block-separator {
    margin: 2rem auto;
  }
}

/* Markierter Text */
mark.has-inline-color {}
.underline mark {
  box-shadow: inset 0 -.34em 0 0 var(--wp--preset--color--accent-2); /* blau */
}

/* ----- Zitat ----- */
blockquote.wp-block-quote {
  background: var(--wp--preset--color--base); /* hellblau */
  border-radius: 0;
padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
	font-size: 1.6rem;
}
/* Optional: Citation etwas dezenter */
.entry-content .wp-block-quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  opacity: 0.8;
}

/* ----- Buttons ----- */
.wp-block-buttons .wp-block-button__link {
  /* margin-top: 1.5rem; */
	/* margin-bottom: 1.5rem; */
	padding: 10px 20px !important;
	border-radius: 0px !important;
}
@media (max-width: 767px) {
  .wp-block-buttons.is-vertical {
    gap: 0.5rem; /* Abstand der Buttons zueinander */
  }
}


/* ----- Sekundärer Button Outline Pink ----- */
/* Klasse: btn-outline-pink (für Spalte/Gruppe) */
.btn-outline-pink .wp-block-button__link { 
  background-color: transparent;
  color: var(--wp--preset--color--accent); /* pink */
  border: 2px solid var(--wp--preset--color--accent); /* pink */
  padding: 0.75em 1.5em;
  box-shadow: none;
}
/* Hover / Fokus */
.btn-outline-pink .wp-block-button__link:hover,
.btn-outline-pink .wp-block-button__link:focus-visible {
  background-color: var(--wp--preset--color--contrast-2) !important; /* schwarz */ 
	  border: 2px solid #585858 !important;
  color: #ffffff !important;
}

/* Zahl im Kreis, zB für Module */
/* Klasse: circle-number */
.circle-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: 2rem; */
  /* height: 2rem; */
	width: 3rem;
	height: 3rem;
  border-radius: 50%;
  border: 4px solid #5396C6; /* blau */
  color: #5396C6; /* blau */

  font-weight: 600;
  font-size: 3rem;
  line-height: 3;
}

/* ----- Badge: Text in blauer Umrandung, zB für Steps ----- */
/* Klasse: badge-outline-blau */
.badge-outline-blau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.4rem;
  background-color: var(--wp--preset--color--accent-2); /* blau */
  /* border-radius: 999px; */  /* „Pill“-Form */
  /* border: 4px solid var(--wp--preset--color--accent-2); */ /* blau */
  color: #ffffff;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
  margin-inline: auto;   /* zentriert das Element */
}


/* ----- Badge: Text in pinker Umrandung ----- */
/* Klasse: badge-outline-pink */
.badge-outline-pink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.4rem;
  background-color: #ffffff;
  border-radius: 999px;  /* „Pill“-Form */
  border: 4px solid var(--wp--preset--color--accent); /* pink */
  color: var(--wp--preset--color--accent);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
  margin-inline: auto;   /* zentriert das Element */
}


/* ----- Bildunterschrift ----- */
.wp-block-image figcaption {
	color: #636363 !important;
}


/* ----- Textlink freistehend mit Pfeil rechts daneben ----- */
/* Klasse: link-arrow */
.link-arrow {
	margin: 1.5em 0 !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 700;
	font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}
/* Pfeil */
/* .link-arrow::after {
	  content: "»"; 
	font-size: 1.4em;
  transition: transform 0.2s ease;
	color: var(--wp--preset--color--accent);
} */
/* Hover */
.link-arrow:hover::after {
  transform: translateX(4px);
}


/* ***** Block Details ***** */

/* Details Summary – stabiler Textfluss (kein Flex/Grid) */
.wp-block-details summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  border-top: 1px solid #d3d3d3;
  padding-top: 1.5rem;       /* Abstand zur Linie */
  padding-left: 2.2rem;      /* Platz für den Pfeil */
  /* margin-bottom: 0rem; */
  font-size: 1.6rem;
  font-weight: 500;
}
/* Standard-Marker sicher entfernen */
.wp-block-details summary::marker {
  content: "";
}
/* Pfeil links – zeigt sauber auf Text (auch mehrzeilig & mit <strong>) */
.wp-block-details summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: calc(1.5rem + 0.75em);   /* padding-top + halbe Zeilenhöhe */
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--wp--preset--color--accent-2); /* blau */
  transition: transform 0.2s ease, color 0.2s ease;
}
/* Pfeil drehen bei geöffnetem Zustand */
.wp-block-details[open] summary::before {
  transform: translateY(-50%) rotate(90deg);
}
/* Hover + Tastatur-Fokus */
.wp-block-details summary:hover::before,
.wp-block-details summary:focus-visible::before {
  color: #222222;
}
/* Sicherheitsnetz: inline zeigen, falls Editor Tags anders rendert */
.wp-block-details summary * {
  display: inline;
}
/* Mobile Feinjustierung */
@media (max-width: 480px) {
  .wp-block-details summary {
    font-size: 1.35rem;     /* minimal kleiner */
  }
  .wp-block-details summary::before {
    font-size: 1.45rem;     /* Pfeil proportional mitziehen */
  }
}

/* ---------------------------------------------------- */
/*  Suchergebnisse  */
/* ---------------------------------------------------- */

/* Datum/Autor ausblenden */
.search .wp-block-query .wp-block-template-part {
  display: none;
}

/* ---------------------------------------------------- */
/*  Contact Form 7 im TT4-Theme  */
/* ---------------------------------------------------- */


/**********************/
/* Plugin Contact Form 7 */
/**********************/
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    width: 100%;
    height:40px;
    border: 1px solid var(--wp--preset--color--contrast-3); /* grau */
    font-size:1rem;
    color: #666;
    padding-left:15px;
}
textarea {
    height:150px;
    padding-top:15px;
    padding-bottom: 15px;
}
select {
    background-color: #ffffff;
    font-size:1rem;
    color: #666;
    padding-left:15px;
}
input[type="submit"] {
    padding: 12px 30px;
    font-family: inherit;
    color: #fff;
    letter-spacing: 0.02em;
    font-size: 1.125rem;
    border:none;
    margin: 0 25px 0 0;
    background-color: var(--wp--preset--color--accent); /* pink */
}
input[type="submit"]:hover {
    background-color: var(--wp--preset--color--contrast-2); /* schwarz */
}