/* The Booker Tea: theme layer on top of Hello Elementor and Elementor.
   Elementor Site Settings hold the global colors and fonts; these tokens
   mirror them so CSS written here and in Elementor's Custom CSS stays in step. */

/* 1. Color tokens: evergreen and persimmon (all text pairings checked against WCAG 2.1 AA) */
:root {
	--bt-paper: #F8F5EF;          /* page background */
	--bt-surface: #FFFFFF;        /* cards, alternating sections */
	--bt-ink: #1E2623;            /* body text, 14.2:1 on paper */
	--bt-muted: #4A534F;          /* secondary text, 7.3:1 on paper */
	--bt-line: #E4DED3;           /* dividers, card borders */
	--bt-field-border: #8C877D;   /* form field borders, 3.6:1 on white */

	--bt-primary: #1F4D43;        /* evergreen: buttons, dark bands, 8.8:1 with paper */
	--bt-on-primary: #F8F5EF;     /* text on evergreen */
	--bt-on-primary-accent: #F4A585; /* links and focus on evergreen, 4.8:1 */

	--bt-accent: #E2643F;         /* persimmon: decoration and type 24px+ only, 3.2:1 */
	--bt-link: #A8401F;           /* links and small accent text, 5.7:1 on paper */

	--bt-en-bg: #FBD9C9;
	--bt-en-text: #8A3517;        /* 6.1:1 on --bt-en-bg */
	--bt-de-bg: #CFE6DC;
	--bt-de-text: #1B5446;        /* 6.7:1 on --bt-de-bg */

	--bt-focus: var(--bt-link);
	--bt-focus-on-dark: var(--bt-on-primary-accent);
}

/* 2. Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
	outline: 3px solid var(--bt-focus);
	outline-offset: 3px;
}

/* Add the CSS class "bt-on-dark" (Elementor: Advanced > CSS Classes) to any
   dark container, such as the footer, so the focus ring stays visible there. */
.bt-on-dark a:focus-visible,
.bt-on-dark button:focus-visible,
.bt-on-dark input:focus-visible,
.bt-on-dark select:focus-visible,
.bt-on-dark textarea:focus-visible,
.bt-on-dark summary:focus-visible {
	outline-color: var(--bt-focus-on-dark);
}

/* Elements that only receive focus from the skip link do not need a ring. */
[tabindex="-1"]:focus {
	outline: none;
}

/* 3. Skip link (Hello prints it; this restyles it to match the site) */
.skip-link.screen-reader-text:focus {
	background-color: var(--bt-primary);
	color: var(--bt-on-primary);
	font-weight: 600;
	font-size: 1rem;
	padding: 12px 20px;
	left: 16px;
	top: 16px;
	text-decoration: none;
	outline: 3px solid var(--bt-focus-on-dark);
	outline-offset: 2px;
}

/* 4. German line breaking: WPML sets lang="de" on German pages */
:lang(de) :is(p, li, dd, blockquote, figcaption, h3, h4, h5, h6, .elementor-widget-text-editor) {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 8 4 4;
}

:lang(de) :is(h1, h2, .elementor-heading-title) {
	overflow-wrap: break-word;
}

/* 5. Language badges
   Give the badge element the class "bt-badge". Inside a Loop Grid, the color
   follows the post's group category automatically. Outside a loop, add
   "bt-badge--en" or "bt-badge--de". If your category slugs differ from the
   ones below, change the selectors to match. */
.bt-badge {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
	padding: 2px 10px;
	border-radius: 999px;
	background-color: var(--bt-line);
	color: var(--bt-primary);
}

.bt-badge a {
	color: inherit;
	text-decoration: none;
}

.bt-badge--en,
:is([class*="category-english-group"], [class*="category-englische-gruppe"]) .bt-badge {
	background-color: var(--bt-en-bg);
	color: var(--bt-en-text);
}

.bt-badge--de,
:is([class*="category-german-group"], [class*="category-deutsche-gruppe"]) .bt-badge {
	background-color: var(--bt-de-bg);
	color: var(--bt-de-text);
}

/* 6. Book covers: add the class "bt-cover" to a cover image widget */
.bt-cover img {
	aspect-ratio: 2 / 3;
	object-fit: cover;
	width: 100%;
	height: auto;
	box-shadow: 0 1px 3px rgba(44, 44, 42, 0.18);
}

/* 7. Reduced motion: switch off entrance animations and smooth scrolling */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.elementor-invisible {
		visibility: visible !important;
	}
}

/* 8. Numbered steps (How to join)
   Put a normal numbered list in a Text Editor widget and give the widget the
   class "bt-steps". Each item gets a round number; bold the first line of each
   item for its heading. */
.bt-steps ol {
	list-style: none;
	counter-reset: bt-step;
	margin: 0;
	padding: 0;
}

.bt-steps ol > li {
	counter-increment: bt-step;
	position: relative;
	padding: 24px 0 24px 72px;
	border-top: 1px solid var(--bt-line);
	min-height: 48px;
}

.bt-steps ol > li:last-child {
	border-bottom: 1px solid var(--bt-line);
}

.bt-steps ol > li::before {
	content: counter(bt-step);
	position: absolute;
	left: 0;
	top: 24px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--bt-primary);
	color: var(--bt-on-primary);
	font-family: "Playfair Display", Georgia, serif;
	font-size: 1.375rem;
	line-height: 48px;
	text-align: center;
}

.bt-steps ol > li > strong:first-child {
	display: block;
	font-size: 1.25rem;
	margin-bottom: 4px;
}

@media (max-width: 640px) {
	.bt-steps ol > li {
		padding-left: 60px;
	}

	.bt-steps ol > li::before {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 1.125rem;
	}
}

/* 9. Copyable text box (the one-line Band introduction): class "bt-copybox" */
.bt-copybox {
	background-color: var(--bt-paper);
	border: 1px solid var(--bt-line);
	border-radius: 4px;
	padding: 16px 18px;
}