/*
Theme Name: TT5 Child (Dolibarr Services)
Theme URI: https://my-dolibarr.eu
Description: Child theme of Twenty Twenty-Five. Holds the templates for the
             "modul" and "referenz" post types plus the site-specific styling
             carried over from the previous Divi design.
Author: GL
Template: twentytwentyfive
Version: 1.3.0
*/

/* Demo screencasts are embedded as <video> in custom HTML blocks. */
.modul-demo video,
.wp-block-html video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

/* Compact meta line for module compatibility / reference industry. */
.entry-meta-line {
	font-size: 0.9rem;
	opacity: 0.75;
}

/* ------------------------------------------------------------------
   Flip cards

   Replaces the two Divi flip-card plugins that were active before the
   relaunch. Colours are the ones from the old design: #2ea3f2 front,
   #3e6580 back.
   ------------------------------------------------------------------ */

.flip-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1.25rem;
	margin: 1.5rem 0;
}

.flip-card {
	perspective: 1200px;
	height: 215px;
}

.flip-card__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

/* focus-within keeps the back reachable by keyboard, not just by mouse. */
.flip-card:hover .flip-card__inner,
.flip-card:focus-within .flip-card__inner {
	transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
	position: absolute;
	inset: 0;
	/* The inner group is a flow layout, so WordPress gives every child but the
	   first a margin-block-start of one block gap (1.2rem in TT5). On an
	   absolutely positioned box with top and bottom both 0 that margin is
	   subtracted from the resolved height: the back came out 19.2px shorter than
	   the front and shifted down by the same amount - visible as a card that
	   shrinks the moment it flips. */
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1.5rem;
	border-radius: 8px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.flip-card__front {
	background: #2ea3f2;
	color: #fff;
	align-items: center;
	text-align: center;
}

.flip-card__front h3 {
	color: #fff;
	margin: 0;
	font-size: 1.4rem;
}

.flip-card__back {
	background: #3e6580;
	color: #fff;
	transform: rotateY(180deg);
	font-size: 0.95rem;
	line-height: 1.45;
	overflow-y: auto;
}

.flip-card__back p { margin: 0 0 0.75rem; }
.flip-card__back a { color: #fff; text-decoration: underline; font-weight: 600; }

/* Touch devices have no hover state. Rather than trapping the text behind a
   flip nobody can trigger, both sides are stacked. */
@media (hover: none) {
	.flip-card { perspective: none; height: auto; }
	.flip-card__inner { transform: none !important; }
	.flip-card__front,
	.flip-card__back {
		position: static;
		transform: none;
		backface-visibility: visible;
	}
	.flip-card__front { border-radius: 8px 8px 0 0; padding-block: 1rem; }
	.flip-card__back  { border-radius: 0 0 8px 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.flip-card__inner { transition: none; }
}

/* ------------------------------------------------------------------
   Hero

   Background image plus overlay in CSS instead of a core/cover block: the
   cover block has to be hand-written here and its markup kept failing the
   editor's block validation. A plain group with a class is robust.
   ------------------------------------------------------------------ */

.site-hero {
	/* The background image is attached in functions.php instead. It must not
	   live in this file: add_editor_style() inlines the stylesheet into the
	   editor without a base URL, where any CSS image reference makes
	   wp.blockEditor.transformStyles throw - and that silently discards the
	   entire stylesheet inside the editor. */
	background-color: #142635;
	background-size: cover;
	background-position: center;
	padding: 4.5rem 2rem;
	border-radius: 8px;
	margin-bottom: 1rem;
}

.site-hero h1,
.site-hero p {
	color: #fff;
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 2px 14px rgba(0, 0, 0, 0.65);
}

.site-hero h1 {
	margin-top: 0;
	font-weight: 700;
}

@media (max-width: 600px) {
	.site-hero { padding: 2.5rem 1.25rem; }
}

.partner-badge img {
	max-width: 230px;
	height: auto;
}

/* TT5's default content column is narrow; screencasts need room to stay legible. */
.wp-block-html video { max-width: 100%; }

.alignwide .wp-block-html video,
.wp-block-group.alignwide video {
	width: 100%;
}

/* Icons are inline SVG (no icon font, no external request), drawn in the same
   outline style at 24x24 and coloured via currentColor. */
.flip-card__front svg {
	width: 44px;
	height: 44px;
	margin-bottom: 0.75rem;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The module icons in the archive come from the mu-plugin and are Font Awesome
   solid glyphs - filled shapes, not outlines. They need the opposite treatment
   of the rule above, so they carry their own class. */
.flip-card__front svg.flip-card__icon {
	/* Normalised on height, not on a square box: money-bill has a 640x512
	   viewBox and would otherwise be letterboxed to 46x36.8 inside it, next to
	   two square glyphs at full 46x46. */
	width: auto;
	height: 46px;
	margin-bottom: 0.85rem;
	fill: currentColor;
	stroke: none;
}

/* Section with a soft tint, used sparingly to break up long pages.
   Geometry lives further down, where the full-bleed band is defined. */
.section-soft {
	background: var(--wp--preset--color--soft, #eef4f8);
}

/* Feature lists get a check mark instead of a plain bullet. */
.list-check { list-style: none; padding-left: 0; }
.list-check li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.4rem;
}
.list-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.7rem;
	height: 0.38rem;
	border-left: 2px solid var(--wp--preset--color--accent, #2ea3f2);
	border-bottom: 2px solid var(--wp--preset--color--accent, #2ea3f2);
	transform: rotate(-45deg);
}

/* Safety net: no image or embedded media may push the page wider than the
   viewport. Checked on a 390px viewport after the relaunch. */
.wp-block-image img,
.wp-block-html video,
figure img {
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------
   Vertical rhythm

   Sections were sitting right on top of each other. The coloured rule above
   each H2 now carries the separation on its own - the grey <hr> that used to
   sit next to it was redundant and has been removed from the content.
   ------------------------------------------------------------------ */

.wp-block-heading.has-rule {
	margin-top: 6.5rem;
	margin-bottom: 1.25rem;
}

.entry-content > .wp-block-heading:first-child,
.wp-site-blocks .wp-block-heading.has-rule:first-child {
	margin-top: 1.5rem;
}

.flip-grid { margin: 2.5rem 0 2rem; }

/* ------------------------------------------------------------------
   Getonter Abschnitt als randloses Farbband

   The tint used to be a rounded box with 2.5rem of side padding, which
   pushed its text out of the alignment shared by the rest of the page.
   Now the tint bleeds to the window edge while the content keeps exactly
   the width of the surrounding text column, so the left edge lines up.

   Done in CSS rather than with align:full on the template: main is
   constrained to contentSize, so making the block full would have meant
   changing main and post-content too - and that widens the text column of
   the whole page by twice the root padding. This stays local.

   The percentages resolve against the containing block (the text column),
   not against the element itself: margin -(50vw - 50%) per side widens the
   element to the viewport, the matching padding brings the content back to
   the column. margin-inline needs !important because the constrained
   layout sets margin-left/right: auto !important on its children.
   ------------------------------------------------------------------ */

.wp-block-group.section-soft {
	margin-block: 5rem 3rem;
	margin-inline: calc(50% - 50vw) !important;
	max-width: none;
	padding-block: 4rem;
	padding-inline: calc(50vw - 50%);
	border-radius: 0;
}

/* Inside the band the padding already provides the space; the generic
   6.5rem above an H2 would stack on top of it. */
.wp-block-group.section-soft > .wp-block-heading.has-rule:first-child {
	margin-top: 0;
}

/* 100vw includes a classic scrollbar, which would otherwise add a few
   pixels of horizontal overflow. clip (not hidden) does that without
   creating a scroll container, so position: sticky keeps working. */
.wp-site-blocks {
	overflow-x: clip;
}


/* Give buttons and lists a little air as well. */
.wp-block-buttons { margin-top: 1.5rem; }
.list-check li { margin-bottom: 0.55rem; }

/* ------------------------------------------------------------------
   Flip cards inside a query loop (module archive)

   post-template renders a <ul> with one <li> per post, so the grid has to
   live on that list and the cards need to fill their list item.
   ------------------------------------------------------------------ */

ul.wp-block-post-template.flip-grid {
	list-style: none;
	padding-left: 0;
}

.flip-grid > li {
	margin: 0;
}

.flip-grid > li > .flip-card {
	height: 100%;
	min-height: 215px;
}

/* Query-loop cards carry more text than the ones on the front page. */
.flip-card__back .wp-block-post-excerpt__excerpt { margin: 0 0 0.6rem; }
.flip-card__back .wp-block-post-excerpt__more-link,
.flip-card__back .wp-block-read-more {
	color: #fff;
	text-decoration: underline;
	font-weight: 600;
	display: inline-block;
	margin-top: 0.3rem;
}
.flip-card__back .card-meta {
	font-size: 0.82rem;
	opacity: 0.85;
	margin: 0 0 0.4rem;
}
.flip-card__front .wp-block-post-title {
	color: #fff;
	margin: 0;
	font-size: 1.35rem;
	text-align: center;
}
.flip-card__front .wp-block-post-title a { color: #fff; text-decoration: none; }

/* In the archive the cards would stretch to a third of the page each while
   only three modules exist. Cap their width so the grid still looks right at
   three and fills up naturally as more modules are added. */
.wp-block-query .flip-grid {
	grid-template-columns: repeat(auto-fit, minmax(240px, 360px));
	justify-content: start;
	/* More air than the generic .flip-grid rule: in the archive the grid is the
	   whole page, so it needs distance from the intro above and the footer
	   below rather than sitting flush against both. */
	margin-block: 3.5rem 3rem;
}

/* Cover text needs to hold up against a photo background. A soft shadow gives
   contrast without dimming the image further. */
.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover p {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 2px 14px rgba(0, 0, 0, 0.65);
}

.wp-block-cover h1 { font-weight: 700; }

/* ------------------------------------------------------------------
   Aufklappbare Liste ("Was ist Dolibarr?")

   Built from plain <details> inside a core/html block, not from
   core/details: the summary line carries an inline SVG, and core/details
   stores its summary as a rich-text attribute, which drops unknown inline
   elements on re-save and then fails block validation.

   Collapsed each row already carries a title plus a one-line teaser, so
   the list is readable without opening anything. The icons mirror the
   picto of the matching Dolibarr module (see aenderungen.md for the
   module -> picto -> Font Awesome mapping) and are redrawn in the same
   outline style as the flip-card icons.
   ------------------------------------------------------------------ */

.detail-list {
	margin: 2rem 0 2.5rem;
	border-top: 1px solid rgba(28, 43, 54, 0.12);
}

.detail-list details {
	border-bottom: 1px solid rgba(28, 43, 54, 0.12);
}

.detail-list summary {
	display: flex;
	align-items: flex-start;
	gap: 0.95rem;
	padding: 1.05rem 0.5rem;
	cursor: pointer;
	list-style: none;
	transition: background-color 0.15s;
}

/* Hide the native disclosure triangle; .dl-chevron replaces it. */
.detail-list summary::-webkit-details-marker { display: none; }
.detail-list summary::marker { content: ""; }

.detail-list summary:hover {
	background: rgba(46, 163, 242, 0.06);
}

.detail-list summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #2ea3f2);
	outline-offset: -2px;
}

.detail-list summary svg {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin-top: 0.15rem;
	stroke: var(--wp--preset--color--accent, #2ea3f2);
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.detail-list .dl-text {
	flex: 1 1 auto;
	min-width: 0;
}

.detail-list .dl-title {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #3e6580);
	transition: color 0.15s;
}

.detail-list summary:hover .dl-title {
	color: var(--wp--preset--color--accent, #2ea3f2);
}

.detail-list .dl-teaser {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.92rem;
	line-height: 1.4;
	opacity: 0.72;
}

/* Chevron on the right, pointing down when closed and up when open. */
.detail-list .dl-chevron {
	flex: 0 0 auto;
	width: 0.55rem;
	height: 0.55rem;
	margin: 0.55rem 0.35rem 0 0;
	border-right: 2px solid var(--wp--preset--color--accent, #2ea3f2);
	border-bottom: 2px solid var(--wp--preset--color--accent, #2ea3f2);
	transform: rotate(45deg);
	transition: transform 0.2s;
}

.detail-list details[open] .dl-chevron {
	transform: rotate(-135deg);
}

/* Indent the body so it lines up with the title, not with the icon. */
.detail-list .dl-body {
	padding: 0 0.5rem 1.2rem calc(28px + 0.95rem + 0.5rem);
}

/* TT5 sets the global font size to "large" (1.38rem). That is too heavy for
   the longer explanations in here, so the body text steps down a level. */
.detail-list .dl-body p {
	margin: 0 0 0.85rem;
	font-size: 1.05rem;
	line-height: 1.62;
	opacity: 0.9;
}

.detail-list .dl-body p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
	.detail-list .dl-body { padding-left: 0.5rem; }
	.detail-list .dl-teaser { font-size: 0.88rem; }
}

@media (prefers-reduced-motion: reduce) {
	.detail-list .dl-chevron,
	.detail-list summary,
	.detail-list .dl-title { transition: none; }
}

/* ------------------------------------------------------------------
   Reference project cards (referenz archive)

   Static cards rather than the flip cards of the module archive: a project
   title runs over two or three lines and the excerpt is a full sentence, so
   hiding either behind a hover would cost more than the effect gains. The
   grid lives on the post-template list, same as .flip-grid, because
   post-template renders a <ul> with one <li> per post.
   ------------------------------------------------------------------ */

ul.wp-block-post-template.ref-grid {
	list-style: none;
	padding-left: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 1.25rem;
	margin: 2rem 0 2.5rem;
}

.ref-grid > li { margin: 0; }

.ref-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border-radius: 8px;
	background: var(--wp--preset--color--soft, #eef4f8);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ref-card .branch-badge { margin: 0 0 0.75rem; }

/* Inside the tinted band on the front page the cards would otherwise share the
   band's own colour and dissolve into it.

   White does not fix that either: against #eef4f8 it reaches a luminance
   contrast of just 1.11, so the edge stays mushy. Every light tone does - the
   range simply has no room left above the band. The separation therefore comes
   from hue instead: a warm off-white card inside a cool band reads as a
   distinct surface at a brightness that is still quiet. It also gives the
   #3e6580 badge a warmer ground to sit on, where it looks stronger than on
   plain white. */
.section-soft .ref-card {
	background: #fbf9f5;
	box-shadow: 0 3px 10px rgba(30, 60, 90, 0.10);
}

.ref-card .wp-block-post-title {
	margin: 0 0 0.75rem;
	font-size: 1.2rem;
	line-height: 1.3;
}

.ref-card .wp-block-post-excerpt {
	font-size: 0.95rem;
	line-height: 1.5;
}

.ref-card .wp-block-post-excerpt__excerpt { margin: 0; }

/* Pushes the link onto the bottom edge so it lines up across cards whose
   text differs in length. */
.ref-card .wp-block-read-more {
	margin-top: auto;
	padding-top: 1rem;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Breadcrumb (Rank Math)

   Ausgegeben über [rank_math_breadcrumb] in den Single-Templates. Steht als
   Orientierungszeile über dem Titel und soll ihm keine Aufmerksamkeit
   nehmen - daher klein, gedaempft und ohne eigene Farbe.
   ------------------------------------------------------------------ */

.rank-math-breadcrumb p {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
	opacity: 0.7;
}

.rank-math-breadcrumb .separator {
	margin: 0 0.4rem;
	opacity: 0.65;
}

/* ------------------------------------------------------------------
   Branche als Badge

   Used on the reference cards and on the single view. post-terms renders the
   term as a link, so the pill has to sit on the <a>, not on the container.

   #3e6580 rather than the lighter accent blue: white on #2ea3f2 comes out at
   2.75:1, below the 4.5:1 that small text needs. This pair reaches 6.2:1.
   ------------------------------------------------------------------ */

.branch-badge a {
	display: inline-block;
	padding: 0.24rem 0.75rem;
	border-radius: 999px;
	background: #3e6580;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-decoration: none;
	line-height: 1.4;
}

.branch-badge a:hover,
.branch-badge a:focus {
	background: #2ea3f2;
	color: #fff;
	text-decoration: none;
}

/* On the single view the badge sits in the title row, pushed to the right by
   the flex layout's space-between. When the window gets too narrow for both,
   the badge wraps onto its own line - space-between then places the single
   item at the start of that line, so no extra rule is needed for small
   screens. The top margin lines it up with the first line of the title. */
.entry-head { align-items: flex-start; }

.entry-head .wp-block-post-title {
	flex: 1 1 20rem;
	margin: 0;
}

.entry-head .wp-block-post-terms.branch-badge { margin: 0.9rem 0 0; }

/* ------------------------------------------------------------------
   Screenshots im Fließtext

   contentSize here is min(1500px, 94vw), so an image left to itself would
   render 1500px wide - for the MCP+ example that means 1500x1652, which
   swallows the page. The cap keeps the screenshot at a size where its own
   text stays readable without dominating everything around it.

   The hairline border is not decoration: the screenshot's own background is
   near-white, so without it the image has no visible edge against the page.
   ------------------------------------------------------------------ */

.wp-block-image.screenshot {
	max-width: 900px;
	margin-inline: auto;
}

.wp-block-image.screenshot img {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 6px;
}

.wp-block-image.screenshot figcaption {
	font-size: 0.9rem;
	opacity: 0.75;
	text-align: center;
	margin-top: 0.75rem;
}