/*
Theme Name: Das Umzugsunternehmen Darmstadt
Theme URI: https://dasumzugsunternehmendarmstadt.de/
Description: Child theme of Blocksy for Das Umzugsunternehmen Darmstadt. Built from the Offenbach sibling: the components and rules are shared, every local fact is researched fresh. All customization lives here so Blocksy can update safely.
Author: Das Umzugsunternehmen Darmstadt
Template: blocksy
Version: 2.0
Requires at least: 6.0
Tested up to: 7.0
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: blocksy-child
*/

/* ==========================================================================
   DESIGN NOTES — read before changing anything

   Shared with the Offenbach sibling site. The three reference sites below were picked
   by Karim during the Offenbach build; the design decisions carry over, the CONTENT
   does not — every fact on this site is researched for Darmstadt.

   - hansen-umzuege.de gave us the editorial hero: left-aligned, serif display
     headline with one accent word, a credential pill above it, trust chips
     below. The most premium of the three by a distance.
   - fedres-umzuege.de gave us the eyebrow line above the headline and the
     floating contact bar.
   - wichtel-umzuege.de gave us the twin call to action — phone AND form —
     because our own research says most enquiries in this trade arrive by
     phone while a minority want a form. Serve both.

   Where we diverge on purpose:

   1. SERIF HEADLINES. Not one competitor in the Offenbach recon uses a serif;
      every one is bold sans on blue. This alone makes us look unlike the field
      before a single word is read.
   2. NO GOOGLE FONTS. System stacks only. Loading fonts from Google would send
      visitor IP addresses to a third party and make our own privacy policy —
      which states no third-party services — factually false. A typeface is not
      worth a lie.
   3. NO COUNTERS. All three examples lean on big numbers (20.000+, 15.000+,
      "100% Kundenzufriedenheit"). We have none of those and will not invent
      them. .dauo-facts borrows the typographic treatment and fills it with
      numbers that are true and checkable: the Offenbach Haltverbot rules.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Ink — the base. Deep, slightly blue, not flat black. */
	--dauo-ink: #14191f;
	--dauo-ink-soft: #2b333d;
	--dauo-ink-muted: #5d6874;

	/* Amber — the action colour. Reserved for things you can click. */
	--dauo-amber: #d98324;
	--dauo-amber-dark: #b8681a;

	/* Surfaces */
	--dauo-paper: #ffffff;
	--dauo-sand: #f6f3ee;
	--dauo-line: #e3ded6;

	/* Type. System stacks — nothing loaded from a third party. */
	--dauo-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
	--dauo-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Rhythm */
	--dauo-radius: 10px;
	--dauo-radius-pill: 999px;
	--dauo-gap: clamp(1rem, 3vw, 2rem);
	--dauo-section: clamp(3rem, 8vw, 6rem);
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

body {
	font-family: var(--dauo-sans);
	color: var(--dauo-ink-soft);
	font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem);
	line-height: 1.7;
}

h1, h2, h3, h4,
.entry-title,
.page-title {
	font-family: var(--dauo-serif);
	color: var(--dauo-ink);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

h1, .entry-title, .page-title {
	font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem);
	margin-bottom: 0.6em;
}

h2 {
	font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.2rem);
	margin-top: 1.9em;
	margin-bottom: 0.5em;
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	margin-top: 1.6em;
}

/* The most important paragraph on any page: the liftable opener. Larger and
   darker, because it has to survive being quoted on its own. */
.entry-content > p:first-of-type {
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.38rem);
	line-height: 1.6;
	color: var(--dauo-ink);
	max-width: 62ch;
}

.entry-content p,
.entry-content li {
	max-width: 72ch;
}

.entry-content a {
	color: var(--dauo-amber-dark);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

.entry-content a:hover {
	color: var(--dauo-ink);
}

/* ==========================================================================
   3. Lists — the workhorse of these pages
   ========================================================================== */

.entry-content ul {
	list-style: none;
	padding-left: 0;
}

.entry-content ul li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: 0.7rem;
}

.entry-content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	background: var(--dauo-amber);
	transform: rotate(45deg);
}

/* ==========================================================================
   4. Phone links and buttons
   ========================================================================== */

.dauo-phone {
	font-weight: 700;
	color: var(--dauo-ink);
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 2px solid var(--dauo-amber);
}

.dauo-phone:hover {
	color: var(--dauo-amber-dark);
}

.dauo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.95rem 1.7rem;
	border-radius: var(--dauo-radius);
	font-family: var(--dauo-sans);
	font-weight: 700;
	font-size: 1.02rem;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform 0.12s ease, background-color 0.12s ease;
}

.dauo-btn--primary {
	background: var(--dauo-amber);
	color: var(--dauo-ink);
}

.dauo-btn--primary:hover {
	background: var(--dauo-amber-dark);
	color: #fff;
	transform: translateY(-1px);
}

.dauo-btn--ghost {
	background: transparent;
	color: var(--dauo-ink);
	border-color: var(--dauo-line);
}

.dauo-btn--ghost:hover {
	border-color: var(--dauo-ink);
	transform: translateY(-1px);
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

/* Full-bleed, self-adjusting.
   Blocksy serves this page from a .ct-container-full wrapper, so .entry-content is
   ALREADY the full viewport width. The usual margin-left:50% + translateX(-50%)
   trick assumes a narrow centred column and dragged the hero half a screen to the
   left — measured in the browser, not guessed.
   calc(50% - 50vw) resolves to 0 when the container already spans the viewport and
   to a correct negative bleed when it does not, so this holds either way. */
.dauo-hero,
.dauo-facts {
	width: auto;
	margin-inline: calc(50% - 50vw);
}

.dauo-hero {
	background: var(--dauo-ink);
	color: #fff;
	padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem);
}

.dauo-hero__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 var(--dauo-gap);
}

/* Credential pill, after Hansen's "AMÖ-Fachbetrieb · seit 2008".
   Ours holds only things that are true. */
.dauo-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.42rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--dauo-radius-pill);
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
}

.dauo-hero h1 {
	color: #fff;
	margin: 1.4rem 0 0.8rem;
	max-width: 19ch;
}

/* One accent word, as on Hansen. Used once per page, never more. */
.dauo-hero h1 .accent {
	color: var(--dauo-amber);
}

.dauo-hero__lead {
	font-size: clamp(1.08rem, 1rem + 0.5vw, 1.3rem);
	color: rgba(255, 255, 255, 0.85);
	max-width: 56ch;
	margin-bottom: 2rem;
}

.dauo-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-bottom: 2.2rem;
}

.dauo-hero .dauo-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.35);
}

.dauo-hero .dauo-btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

/* Trust chips. Wichtel and Hansen use these for review counts.
   Ours carry promises we can actually keep. */
.dauo-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.dauo-chips li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.95rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--dauo-radius-pill);
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.92);
}

.dauo-chips li::before {
	content: "✓";
	color: var(--dauo-amber);
	font-weight: 700;
}

/* ==========================================================================
   6. Fact band — the honest answer to competitor counters
   ========================================================================== */

.dauo-facts {
	background: var(--dauo-sand);
	border-top: 1px solid var(--dauo-line);
	border-bottom: 1px solid var(--dauo-line);
	padding: clamp(2.2rem, 5vw, 3.4rem) 0;
	margin-block: var(--dauo-section);
}

.dauo-facts__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 var(--dauo-gap);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

.dauo-fact__value {
	font-family: var(--dauo-serif);
	font-size: clamp(2.2rem, 1.6rem + 2.2vw, 3rem);
	line-height: 1;
	color: var(--dauo-ink);
	font-weight: 600;
}

.dauo-fact__value span {
	color: var(--dauo-amber);
}

.dauo-fact__label {
	margin-top: 0.6rem;
	font-size: 0.95rem;
	color: var(--dauo-ink-muted);
	line-height: 1.45;
}

.dauo-facts__source {
	grid-column: 1 / -1;
	font-size: 0.82rem;
	color: var(--dauo-ink-muted);
	border-top: 1px solid var(--dauo-line);
	padding-top: 1rem;
	margin: 0;
}

/* ==========================================================================
   7. NAP block
   ========================================================================== */

.dauo-nap {
	background: var(--dauo-sand);
	border-left: 4px solid var(--dauo-amber);
	border-radius: 0 var(--dauo-radius) var(--dauo-radius) 0;
	padding: 1.4rem 1.6rem;
	line-height: 1.75;
}

/* ==========================================================================
   8. Sticky action bar
   All three reference sites have one. On mobile it is the most valuable
   element on the page, because this trade converts by telephone.
   ========================================================================== */

.dauo-actionbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 1px;
	background: var(--dauo-line);
	box-shadow: 0 -6px 22px rgba(20, 25, 31, 0.14);
}

.dauo-actionbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.95rem 0.6rem;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	background: var(--dauo-paper);
	color: var(--dauo-ink);
}

.dauo-actionbar a.is-primary {
	background: var(--dauo-amber);
	color: var(--dauo-ink);
}

.dauo-actionbar a:hover {
	background: var(--dauo-ink);
	color: #fff;
}

.dauo-actionbar svg {
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
}

/* Keep the bar off the last line of content. */
body.has-dauo-actionbar {
	padding-bottom: 3.7rem;
}

/* Desktop has room in the header, so the bar is a mobile device. */
@media (min-width: 1000px) {
	.dauo-actionbar {
		display: none;
	}
	body.has-dauo-actionbar {
		padding-bottom: 0;
	}
}

/* ==========================================================================
   9. Accessibility and motion
   ========================================================================== */

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--dauo-amber);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   10. Footer strip
   Rendered by the theme rather than by Blocksy's footer builder, so the
   Impressum is reachable from every page without depending on a Customizer
   setting. See inc/components.php.
   ========================================================================== */

.dauo-footer {
	background: var(--dauo-ink);
	color: rgba(255, 255, 255, 0.82);
	padding: clamp(2rem, 5vw, 3rem) 0;
	font-size: 0.95rem;
	line-height: 1.7;
}

.dauo-footer__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 var(--dauo-gap);
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
	justify-content: space-between;
}

.dauo-footer strong {
	color: #fff;
}

.dauo-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.dauo-footer a:hover {
	color: #fff;
	border-bottom-color: var(--dauo-amber);
}

.dauo-footer__nap a {
	font-weight: 700;
	color: #fff;
	border-bottom-color: var(--dauo-amber);
}

.dauo-footer__links {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

@media (min-width: 700px) {
	.dauo-footer__links {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 0.55rem 2.5rem;
	}
}

/* ==========================================================================
   11. Specificity fixes — measured, not guessed

   The hero and the NAP block are shortcodes, so they render INSIDE
   .entry-content. That makes `.entry-content a` (0,1,1) beat `.dauo-btn`
   and `.dauo-phone` (0,1,0), and every button and phone link inherited the
   amber link colour instead of its own.

   Measured on the live page: the primary call button rendered #b8681a text on
   #d98324 background — a contrast ratio of 1.43:1, where WCAG AA asks for 4.5:1.
   It was effectively invisible, which is how Karim spotted it.

   These rules restate the component colours at a specificity that wins, and
   they are marked so nobody "simplifies" them away later.
   ========================================================================== */

.entry-content .dauo-btn,
.dauo-hero .dauo-btn,
a.dauo-btn {
	text-decoration: none;
	white-space: nowrap;      /* a phone number must never break across lines */
}

.entry-content a.dauo-btn--primary,
.dauo-hero a.dauo-btn--primary,
a.dauo-btn--primary {
	background: var(--dauo-amber);
	color: var(--dauo-ink);   /* contrast 6.9:1 on the amber */
}

.entry-content a.dauo-btn--primary:hover,
.dauo-hero a.dauo-btn--primary:hover,
a.dauo-btn--primary:hover {
	background: var(--dauo-ink);
	color: #fff;
	border-color: var(--dauo-amber);
}

.entry-content a.dauo-btn--ghost,
.dauo-hero a.dauo-btn--ghost,
a.dauo-btn--ghost {
	color: #fff;
	border-color: rgba(255, 255, 255, 0.45);
}

/* The icon had a size rule only inside .dauo-actionbar. Everywhere else the SVG had no
   intrinsic size and expanded to fill the button — measured at 135x135px in the hero,
   which is what made the call button 172px tall and the icon cartoonishly large. */
.dauo-btn svg,
.dauo-actionbar svg,
.dauo-footer svg {
	width: 1.2em;
	height: 1.2em;
	flex: 0 0 auto;
}

/* Inline phone links inside body copy had the same problem. */
.entry-content a.dauo-phone,
a.dauo-phone {
	color: var(--dauo-ink);
	text-decoration: none;
	border-bottom: 2px solid var(--dauo-amber);
	white-space: nowrap;
}

.entry-content a.dauo-phone:hover,
a.dauo-phone:hover {
	color: #fff;
	background: var(--dauo-ink);
	border-bottom-color: var(--dauo-amber);
}

/* The NAP block sits on sand, so its phone link needs its own treatment. */
.dauo-nap a.dauo-phone {
	color: var(--dauo-ink);
}

/* Bigger, calmer call button. It is the most important control on the site,
   so it gets a full-width tap target on phones instead of a cramped pill. */
.dauo-hero__actions {
	gap: 0.75rem;
}

.dauo-hero .dauo-btn {
	font-size: 1.08rem;
	padding: 1.05rem 1.8rem;
	letter-spacing: 0.01em;
}

@media (max-width: 560px) {
	.dauo-hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dauo-hero .dauo-btn {
		justify-content: center;
		width: 100%;
	}
}

/* ==========================================================================
   12. German compound words

   "Umzugsunternehmen" is 17 characters and does not fit a 375px screen at
   display size. Without help the browser breaks it mid-word: "Umzugsunternehm |
   en". With hyphens:auto and lang="de-DE" on <html> it breaks at real syllable
   boundaries instead: "Umzugs- | unternehmen".

   The lang attribute is what makes this work — set in inc/business.php. Without
   it the browser has no German hyphenation dictionary and falls back to the
   ugly break.
   ========================================================================== */

.dauo-hero h1,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* Slightly gentler display size on the narrowest phones, so hyphenation is the
   exception rather than every single line. */
@media (max-width: 420px) {
	.dauo-hero h1 {
		font-size: clamp(1.85rem, 1.2rem + 4vw, 2.4rem);
		max-width: 100%;
	}
}

/* ==========================================================================
   13. HEADER MENU — keeping the phone number on screen
   ==========================================================================

   Measured bug, 2026-08-08. With seven top-level items the menu ran 7px past
   the viewport at 1280px, and the search icon needed another ~40px. The two
   items pushed off the end were "Kontakt" and the phone number — which breaks
   Karim's rule 3: the number is visible in the header, always.

   Both automated checks passed while this was broken. prelaunch.py verifies
   that the number is present in the markup and that the sticky mobile bar
   exists; neither of those is the same as "a desktop visitor can see it".
   Same class of miss as the unreadable call button on the Offenbach site.

   The fix is horizontal padding, not fewer menu items: 12.5px -> 8px per side
   across seven items reclaims 63px, which clears the overflow with room to
   spare. Two long items were also moved out of the top level first
   ("Startseite", since the logo already links home, and "Umzug &
   Entrümpelung", which belongs under Leistungen anyway).

   Scoped to widths where the horizontal menu actually renders; below that
   Blocksy switches to the mobile drawer and this must not apply. */
@media (min-width: 1000px) {
	.ct-header [data-id="menu"] .menu > li > a {
		padding-left: 8px;
		padding-right: 8px;
	}
}

/* ==========================================================================
   14. HERO — closing the white strip above it
   ==========================================================================

   Measured 2026-08-08. Blocksy puts 60px of padding on top of
   .ct-container-full so page content does not butt against the header. Our
   hero is deliberately full-bleed and dark, so that padding rendered as a
   60px strip of empty light background on every single page, between the
   header and the hero. It read as a layout mistake, because it was one.

   Scoped with :has() so it only applies to pages that actually open with our
   hero. As of today that is every page, Impressum and Datenschutz included —
   checked, not assumed, after an earlier version of this comment claimed the
   legal pages had none. The selector stays conditional anyway: it is what
   keeps a future page without a hero from losing its top spacing.

   Browsers without :has() simply keep the old spacing — the page stays
   usable, it just keeps the strip. */
.ct-container-full:has(> article > .entry-content > .dauo-hero:first-child) {
	padding-top: 0;
}

/* ==========================================================================
   15. BRAND COLOUR — replacing Blocksy's leftover default blue
   ==========================================================================

   Found in the pre-launch inspection, 2026-08-08, by opening the mobile menu
   and looking at it. Blocksy's palette was never changed from the install
   default: --theme-palette-color-1/2 were still #2872fa / #1559ed. That blue
   surfaced on every active menu item, on desktop and mobile, next to our amber
   hero and amber call button. Nothing automated flags it — it is a brand
   defect, not a bug.

   This is NOT an invented brand colour. #d98324 is already the site's accent,
   used by --dauo-amber in the hero and the primary button. This only stops the
   theme chrome contradicting it.

   Why two ambers instead of one: measured contrast, not taste. No single amber
   clears 4.5:1 against both a white header and the near-black mobile panel:

       #d98324   2.91:1 on white   6.08:1 on #14191f
       #96591a   5.61:1 on white   3.15:1 on #14191f

   So the light-background value is the darker amber, and the dark panel gets
   the bright one back. Same lesson as the unreadable call button on the
   Offenbach site: measure the contrast, never eyeball it.

   Written as html:root, not :root. Blocksy prints its own palette into an
   inline <style> in the head, which loads AFTER this stylesheet — at equal
   specificity the later rule wins, so a plain :root here was simply ignored.
   Verified in the browser: the panel override below took effect while the
   :root one did not. html:root adds an element to the selector and wins on
   specificity regardless of source order, which is preferable to scattering
   !important through a theme we want to keep updatable. */
html:root {
	--theme-palette-color-1: #96591a;  /* links / active state on light backgrounds */
	--theme-palette-color-2: #7a4a0e;  /* hover — 7.46:1 on white */
	--theme-link-initial-color: #96591a;
	--theme-link-hover-color: #7a4a0e;
}

/* The offcanvas mobile panel is near-black, so the dark amber would fail there.
   Hand the bright brand amber back inside it. */
.ct-panel,
.ct-panel .ct-panel-content {
	--theme-palette-color-1: #d98324;
	--theme-palette-color-2: #d98324;
	--theme-link-initial-color: #d98324;
	--theme-link-hover-color: #d98324;
}