/* ==========================================================================
   Teilen-Knopf an Stellenanzeigen und Einrichtungen (Marc, 03.10.2026)
   Gestaltung zu Inklusio_Teilen (plugin/inklusio-core/includes/
   class-inklusio-teilen.php) und assets/teilen.js.

   Eingebunden in functions.php nach components.css und vor mobil.css.
   Handy-Regeln stehen hier in @media (max-width: 47.99em).

   Farbe bewusst neutral (Graphit), nicht das Rot des gemerkten Herzens:
   Teilen ist kein Zustand, sondern eine Handlung. Beim Zeigen und Fokus
   Mint wie die übrigen Verweise.

   Kontraste (WCAG-Formel, gerechnet am 03.10.2026):
     Symbol  graphite-500 #545C6B auf Weiss      6,73:1  (Grafik ≥ 3:1)
     Zeigen  mint-700 #286C53 auf mint-50 #F0F8F4 5,78:1
     Fokus   mint-600 #348A6A auf Weiss           4,21:1  (mint-500 käme nur auf 2,93:1)
     Status  Weiss auf graphite-800 #21262E      15,2:1
   ========================================================================== */

.ink-teilen {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
}

/* Knopf und mailto-Verweis sehen gleich aus; welches von beiden steht, entscheidet das Skript. */
.ink-teilen__knopf {
	display: inline-flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0 .5rem;
	border: 0;
	border-radius: var(--ink-radius-sm);
	background: transparent;
	color: var(--ink-graphite-500);
	font-family: inherit;
	font-size: var(--ink-text-sm);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		color var(--ink-dur-fast) var(--ink-ease-soft),
		background-color var(--ink-dur-fast) var(--ink-ease-soft);
}

/* display:inline-flex schlüge das hidden-Attribut – der Knopf ist bis zum Skript unsichtbar. */
.ink-teilen__knopf[hidden] {
	display: none;
}

.ink-teilen__knopf > .hp-icon {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1;
}

.ink-teilen__knopf:hover,
.ink-teilen__knopf:focus-visible {
	background: var(--ink-mint-50);
	color: var(--ink-mint-700);
	text-decoration: none;
}

.ink-teilen__knopf:focus-visible {
	outline: 2px solid var(--ink-mint-600);
	outline-offset: 2px;
}

.ink-teilen__knopf:active {
	color: var(--ink-mint-800);
}

/* Statusregion („Link kopiert"): eine kleine Sprechblase über dem Knopf,
   sichtbar nur, solange sie Text trägt. role="status" liest sie vor. */
.ink-teilen__status {
	position: absolute;
	right: 0;
	bottom: calc(100% + .35rem);
	z-index: 2;
	padding: .35rem .65rem;
	border-radius: var(--ink-radius-pill);
	background: var(--ink-graphite-800);
	color: #fff;
	font-size: var(--ink-text-xs);
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--ink-dur-fast) var(--ink-ease-soft);
}

.ink-teilen__status:not(:empty) {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Ergebniskarte: im Fuss, rechts. Stehen Nachricht und Herz
   (hp-listing__actions--primary) daneben, rücken alle Symbole zusammen
   nach rechts; fehlen sie (Gäste, Stellenkarten), steht der Knopf allein
   rechts.
   -------------------------------------------------------------------------- */

.hp-listing--view-block .hp-listing__footer > .ink-teilen--karte {
	margin-left: auto;
}

.hp-listing--view-block .hp-listing__footer > .hp-listing__actions--primary:has(+ .ink-teilen--karte) {
	margin-left: auto;
}

.hp-listing--view-block .hp-listing__footer > .hp-listing__actions--primary + .ink-teilen--karte {
	margin-left: .25rem;
}

.ink-teilen--karte .ink-teilen__knopf {
	width: 44px;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Detailseite: im Ortsblock unter dem Herz (Inklusio_Favoriten::
   herz_zur_adresse setzt den Block auf eine Spalte). Das Symbol fluchtet
   mit Nadel und Herz: das linke Polster des Knopfes wird zurückgenommen.
   -------------------------------------------------------------------------- */

.hp-listing--view-page .hp-listing__attributes--secondary > .ink-teilen--seite {
	margin: 0;
}

.ink-teilen--seite .ink-teilen__knopf {
	margin-left: -.5rem;
}

.ink-teilen--seite .ink-teilen__status {
	right: auto;
	left: 0;
}

/* --------------------------------------------------------------------------
   Handy: dieselbe Symbolspalte wie Nadel und Herz (mobil.css 7.4:
   1,5 rem breit, Abstand .6 rem).
   -------------------------------------------------------------------------- */

@media (max-width: 47.99em) {
	.ink-teilen--seite .ink-teilen__knopf {
		gap: .6rem;
		margin-left: 0;
		padding-left: 0;
	}

	.ink-teilen--seite .ink-teilen__knopf > .hp-icon {
		flex: 0 0 1.5rem;
		width: 1.5rem;
		text-align: center;
	}
}