/*
Theme Name: Crafted Child – STARKiNTERIM
Theme URI: https://stark-interim.com
Description: Child-Theme von Crafted für stark-interim.com. Enthält alle projektspezifischen Anpassungen (Duotone-System, Line-Art, Newsletter-Styles), damit das Parent-Theme updatefähig bleibt.
Author: ip2C – Ehm Mediendesign
Author URI: https://ip2c.de
Template: crafted
Requires at least: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: crafted-child
Version: 1.3.2
*/

/* =====================================================
   Inhalt

   1 · Grundlagen: Variablen, Links, Buttons
   2 · Typografie
   3 · Header
   4 · Mobiles Menü
   5 · Hero & Line-Art
   6 · Formular (CoBlocks)
   7 · Inhaltsbereiche
   8 · Career Timeline (.si-cv)
   9 · Footer 
  10 · Sehr schmale Viewports

   Breakpoints: 767/768 px (mobil), 781 px (Editor-Breakpoint
   der Career Timeline), 268 px (Notabschaltung).
   ===================================================== */


/* =====================================================
   1 · Grundlagen: Variablen, Links, Buttons
   ===================================================== */

html,
body {
	scroll-behavior: smooth;
	opacity: 1;
	transition: opacity .5s ease-in-out;
}

/* Projektfarben. --color2 zieht die Primärfarbe aus theme.json;
   #403528 ist der ursprüngliche Hex-Wert als Referenz. */
:root {
	--color1: #D0FE73;
	--color2: var(--wp--preset--color--primary); /* vormals #403528 */
	--color3: #ffffff;
	--color4: #000000;
}

a {
	text-decoration-thickness: .0225em !important;
	text-underline-offset: .1em;
}

/* Pfeil-Icon (extern/weiterführend) als Inline-SVG. */
.icon {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2220.687%22%20height=%2219.928%22%20viewBox=%220%200%2020.687%2019.928%22%3E%0A%20%20%3Cg%20id=%22Gruppe_18%22%20data-name=%22Gruppe%2018%22%20transform=%22translate(-7.19)%22%3E%0A%20%20%20%20%3Cpath%20id=%22Linie_89%22%20data-name=%22Linie%2089%22%20d=%22M7.787%2C19.229c-.616-.642-.862-1.388-.219-2L25.151.448A1.611%2C1.611%2C0%2C0%2C1%2C27.38%2C2.774L9.8%2C19.552C9.314%2C20.136%2C8.553%2C20.048%2C7.787%2C19.229Z%22%20transform=%22translate(0%200)%22%20fill=%22currentColor%22/%3E%0A%20%20%20%20%3Cpath%20id=%22Pfad_89%22%20data-name=%22Pfad%2089%22%20d=%22M15.606%2C16.387c-.808%2C0-1.535-.257-1.535-1.065V2.925H1.535C.727%2C2.925%2C0%2C2.668%2C0%2C1.86S.727.8%2C1.535.8H15.606a1.043%2C1.043%2C0%2C0%2C1.051%2C1.06V15.322A1.043%2C1.043%2C0%2C0%2C1%2C15.606%2C16.387Z%22%20transform=%22translate(11.226%203.541)%22%20fill=%22currentColor%22/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
}

/* Buttons global: Größe und Gewicht unabhängig vom Parent. */
:root :where(.wp-element-button, .wp-block-button__link) {
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4em !important;
	padding-top: 13px;
}

/* Outline-Button im Hover. Kann entfallen, sobald Block-Styles
   über theme.json konfigurierbar sind:
   https://github.com/WordPress/gutenberg/issues/42794 */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--secondary);
}

/* Rahmen mobil abschalten – die Gruppen-Rahmen aus dem Editor
   wirken auf kleinen Viewports zu unruhig. */
@media screen and (max-width: 767px) {
	.wp-block-group {
		border: none !important;
	}
}
.fullheight,
main#wp--skip-link--target  .wp-block-group {
	max-height: 748px !important;
	height: 80dvh;
}
main#wp--skip-link--target > .wp-block-group > .alignwide {
    display: flex !important;
    align-items: center !important;
}



/* =====================================================
   2 · Typografie
   ===================================================== */

h1 {
	font-weight: 200;
	line-height: 1.1em !important;
}

h2.has-contrast-color,
p.has-large-font-size {
	font-weight: 200;
}

p.has-large-font-size {
	letter-spacing: -.02em !important;
}

h2.has-large-font-size {
	padding-bottom: 15px !important;
}

/* Kurze Linie über der Überschrift – Klasse .haslineabove
   wird im Editor auf der Überschrift gesetzt. */
.haslineabove:before {
	content: "";
	position: absolute;
	height: 3px;
	width: 5%;
	border-top: 3px solid var(--color1);
	padding-top: calc(5px + 2vw);
	margin-top: -20px;
}

h2.haslineabove:before {
	width: 6%;
	border-top: 4px solid var(--color2);
}


/* =====================================================
   3 · Header
   ===================================================== */

header div div.is-content-justification-space-between {
	padding: calc(13px + 1.1vw) calc(3px + 1.1vw) !important;
}
/* Logo hängt absolut über der Header-Zeile und skaliert
   zwischen 128 px und 217 px mit dem Viewport. */
.custom-logo-link {
	position: absolute;
	top: 0;
	padding-top: calc(23px + .62vw);
	width: calc(78px + 11.1vw);
	min-width: calc(128px + .1vw);
	max-width: calc(217px + .1vw);
}
.custom-logo-link:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
}
header .headlink {
	position: relative;
	right: calc(-22% - 3vw);
}
header .headlink a {
	text-decoration: none !important;
}
@media screen and (max-width: 767px) {
	header .headlink {
		position: relative;
		right: calc(-14% - 4vw);
		text-decoration: none !important;
	}
}
.wp-block-navigation__responsive-container-open {
	padding: calc(3px + .1vw) !important;
}


/* =====================================================
   4 · Mobiles Menü (Overlay #modal-1)
   ===================================================== */

#modal-1 {
	background: transparent !important;
	opacity: .99 !important;
}
/*
#modal-1::before{
	content: "";
	position: absolute;
	height: 100%;
	width:100%;
	min-width: 600px;
	max-width: 900px !important;
	right: 5%;
	top: 0;
	background-image: url('/wp-content/uploads/linegrafic-2.webp') !important;
	background-size: calc(286px + 79%);
	opacity: 0.86;
	background-position: center !important;
	background-repeat: no-repeat;
	background: transparent !important;
	z-index: 1;
}
*/

#modal-1 .wp-block-navigation__container {
	display: flex;
	background: var(--color2) !important;
	justify-content: space-between;
}

.wp-block-navigation__overlay-container {
	justify-content: end !important;
}

/* Zweite Menüebene im Overlay ausblenden. */
#modal-1-content > ul {
	display: none !important;
}

.wp-block-navigation-item__label,
li.wp-block-navigation-item * {
	padding: 0 !important;
	line-height: 1.2em !important;
}

li.wp-block-navigation-item * {
	font-weight: 200 !important;
}

@media screen and (max-width: 767px) {
	#modal-1 > div > div {
		width: 101vw !important;
		padding: 0 !important;
		overflow: hidden;
	}
}


/* =====================================================
   5 · Hero & Line-Art
   Die Line-Art liegt als ::before (rechts) und ::after
   (links, gespiegelt) hinter dem Inhalt – z-index 0.
   ===================================================== */

main#wp--skip-link--target {
	position: relative;
	z-index: -1;
	background-size: 60%;
	background-position: 90% 120% !important;
}
main#wp--skip-link--target::before {
	content: "";
	position: absolute;
	bottom: 0%;
	height: 103%;
	width: calc(86% + 9vw);
	min-width: 600px;
	/*! max-width: 1129px !important; */ 
	background: url('/wp-content/uploads/linegrafic-hero1.webp');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 100% 100% !important;
	opacity: .89;
	z-index: 0;
	overflow: hidden !important;;
}

@media screen and (max-width: 767px) {
	main#wp--skip-link--target::before {
		min-width: 600px;
		background: url('/wp-content/uploads/linegrafic-hero1.webp') no-repeat;
		background-size: 100% 100%;
		background-position: 100% 100% !important;
		opacity: .79;
	}
}

/* Gespiegelte zweite Grafik nur ab Tablet – mobil zu unruhig. */
@media screen and (min-width: 768px) {
 
}

/* Line-Art auch im braunen Inhaltsblock. */
.alignwide.contentbrown {
	background-image: url('/wp-content/uploads/linegrafic-automaticstapler.webp') !important;
	background-size: calc(386px + 39%);
	background-position: 70% 38% !important;
	background-repeat: no-repeat;
}


/* =====================================================
   6 · Formular (CoBlocks)
   Labels werden nicht hier, sondern per JS in der
   functions.php ausgeblendet (dort auch die Placeholder).
   ===================================================== */

.wp-block-coblocks-form input[type="text"],
.wp-block-coblocks-form input[type="email"],
.wp-block-coblocks-form textarea {
	height: 44px;
	min-height: 44px;
	padding: 10px 14px;
	box-sizing: border-box;
	width: 100%;
	font-size: 16px; /* < 16px löst auf iOS den Auto-Zoom aus */
	font-family: inherit;
}

.wp-block-coblocks-form textarea {
	height: 180px;
	resize: vertical;
}


/* =====================================================
   7 · Inhaltsbereiche
   ===================================================== */

/* Parent-Abstände um den Post-Content zurücksetzen. */
:root :where(.wp-block-post-content),
:where(.wp-site-blocks) > :last-child {
	padding: 0 !important;
	margin: 0 !important;
}
section.flexrow {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
/* Drei-Spalten-Teaser */
.three_columns a {
	text-decoration: none !important;
}
/* Hinweis: Selektor ohne "s" – greift derzeit nicht auf die
   .three_columns-Teaser. Vor dem Korrigieren gegenprüfen,
   ob die Klasse irgendwo im Editor so gesetzt ist. */
.three_column a:hover {
	opacity: .8 !important;
}
.three_columns p.has-medium-font-size {
	max-width: 400px;
	font-size: calc(14px + .15vw) !important;
}
/* Quadratisches Badge, z. B. für Zahlen/Kürzel. */
.iconlike {
	padding: 5% !important;
	width: calc(50px + 1.81vw) !important;
	height: calc(50px + 1.81vw) !important;
	display: flex;
	justify-content: center;
	align-items: center;
}
.iconlike p {
	line-height: 0;
	white-space: nowrap;
}
/* Absatz-Blockstil "Info" */
.wp-block-paragraph:not(.has-text-color).is-style-info,
p:not(.has-text-color).is-style-info {
	background: var(--color1);
	color: var(--color2);
	border: 3px solid var(--color1);
}
/* Brauner Vollbreiten-Block: Line-Art darf nicht scrollen. */
.contentbrown {
	max-width: 100vw;
	overflow: hidden;
}
section.has-primary-background-color.has-background.mb-0.mt-0.has-global-padding.is-layout-constrained {
	opacity: .699;
}

/* Mobil: Spalten untereinander, Rahmen und Trenner raus. */
@media screen and (max-width: 767px) {
	.alignwide.contentbrown section.is-layout-flex {
		display: block !important;
	}
	.alignwide.contentbrown section *,
	.alignwide.contentbrown section *::before {
		border: none !important;
		padding-bottom: 7% !important;
	}
}/* =====================================================
   6 · Career Timeline: Badge rechts, Logo am Cursor
   ===================================================== */
.si-cv .si-cv-row {
	border-bottom: 1px solid var(--wp--preset--color--quaternary);
}
.si-cv .si-cv-row:last-child,
.si-cv-current .si-cv-row:last-child { border-bottom: 0; }
.si-cv-current .si-cv-head { border-bottom: 0; padding-bottom: 0; }
.si-cv-current .si-cv-head h2 { margin: 0; }

/* Logo-Spalte komplett raus – Bilder bleiben als Quelle fürs JS im DOM */
.si-cv .si-cv-logo,
.si-cv .si-cv-logo-placeholder { display: none; }

/* Kategorie-Badge rechts in Color-1 */
.si-cv .si-cv-cat {
	margin: 0;
	align-self: flex-start;
	white-space: nowrap;
	background: var(--color1);
	color: var(--color2);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}
/* Schwebendes Logo am Cursor */
.si-cv-float {
	position: fixed;
	top: 0; left: 0;
	pointer-events: none;
	z-index: 99;
	opacity: 0;
	transition: opacity .18s ease;
	will-change: transform;
}
.si-cv-float.is-visible { opacity: 1; }
.si-cv-float img {
	display: block;
	max-width: 160px;
	max-height: 80px;
	width: auto; height: auto;
	background: var(--color-2, #F4EFE9);
	padding: 10px 14px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,.15);
}

@media (max-width: 781px) {
	.si-cv .si-cv-row { flex-wrap: wrap; }
	.si-cv .si-cv-cat { order: -1; }
}

/* Badge invertiert innerhalb der Primary-Klammer */
.si-cv-current .si-cv-cat {
	background: var(--color-2, #F4EFE9);
	color: var(--color-1, #233028);
}






/* =====================================================
   9 · Footer
   ===================================================== */

footer a {
	color: var(--wp--preset--color--primary);
	position: relative;
}
footer a:hover {
	color: #000 !important;
}
footer .wp-block-media-text__media img {
	min-width: 190px;
	max-width: 243px;
}
/* Weiterführende Links bekommen einen Pfeil, der sich im
   Hover aus der Diagonalen in die Waagerechte dreht. */
footer .has-medium-font-size a {
	text-decoration: underline;
}
footer .has-medium-font-size a::after {
	content: "➜";
	position: absolute;
	bottom: 2px;
	margin-left: .25em;
	font-weight: normal;
	font-size: .8em;
	line-height: 1;
	transform: rotate(-45deg);
	transition: all .2s ease-in-out;
}
footer a:hover::after {
	transform: rotate(0deg);
}


/* =====================================================
  10 · Sehr schmale Viewports
   Unter 268 px ist das Layout nicht mehr sinnvoll
   darstellbar – Seite wird ausgeblendet.
   ===================================================== */

@media screen and (max-width: 268px) {
	body {
		opacity: 0 !important;
	}
}