/*
Theme Name: JOTHEME
Description: JOTHEME block theme — a from-scratch WordPress block theme (theme.json + block templates), built as a successor to the classic "joetheme" theme in this repo.
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: jotheme
*/

/* Mobile-first overflow guard: with real page/menu content (long titles,
   emoji, a 15-item nav) it's easy for one element to force page-wide
   horizontal scroll on narrow viewports. Belt-and-suspenders regardless of
   the specific culprit. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
p {
	overflow-wrap: break-word;
}

/* Motion & hover polish */
a,
.wp-element-button,
.wp-block-button__link,
.btn,
.nav-link {
	transition: color 200ms ease, background-color 200ms ease, box-shadow 200ms ease, transform 150ms ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.btn:hover,
.btn:focus-visible {
	transform: translateY(-1px);
}

/* Double-ring focus indicator: background colors across this palette range
   from very light (strong-yellow) to very dark (light-black), so no single
   ring color clears 3:1 (WCAG 1.4.11) everywhere — pairing a light and a
   dark ring means one of the two always contrasts against what's behind it. */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px #242424;
	border-radius: 4px;
}

/* Bootstrap button color variants, theme.json-driven (single source of
   truth stays theme.json — these read its generated CSS custom properties
   instead of hardcoding hex a second time). */
.btn-terracotta {
	background-color: var(--wp--preset--color--terracotta);
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--strong-white);
}

.btn-terracotta:hover,
.btn-terracotta:focus-visible {
	background-color: #a3380a;
	border-color: #a3380a;
	color: var(--wp--preset--color--strong-white);
	box-shadow: 0 4px 14px rgba(194, 65, 12, 0.25);
}

.btn-gold {
	background-color: var(--wp--preset--color--strong-yellow);
	border-color: var(--wp--preset--color--strong-yellow);
	color: var(--wp--preset--color--very-dark-black);
}

.btn-gold:hover,
.btn-gold:focus-visible {
	background-color: #dba700;
	border-color: #dba700;
	color: var(--wp--preset--color--very-dark-black);
	box-shadow: 0 4px 14px rgba(247, 189, 0, 0.35);
}

.btn-outline-terracotta {
	background-color: transparent;
	border-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--terracotta);
}

.btn-outline-terracotta:hover,
.btn-outline-terracotta:focus-visible {
	background-color: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--strong-white);
}

/* Bootstrap navbar (mobile-first, burger below `lg`, see functions.php /
   patterns/bootstrap-nav.php for the markup) */
.navbar {
	padding-top: 16px;
	padding-bottom: 16px;
	background-color: var(--wp--preset--color--strong-white);
	box-shadow: 0 2px 10px rgba(36, 36, 36, 0.08);
}

.navbar-brand img {
	height: 44px;
	width: auto;
}

/* With ~15 top-level items, Bootstrap's default nowrap navbar-nav overflows
   the viewport at `lg` (page-wide horizontal scroll) — let items wrap to a
   second line instead. */
@media (min-width: 992px) {
	.navbar-nav {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: 4px;
	}
}

.navbar-nav .nav-link {
	color: var(--wp--preset--color--light-black);
	font-weight: 500;
	padding-top: 8px;
	padding-bottom: 8px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
	color: var(--wp--preset--color--terracotta);
}

.navbar-nav .dropdown-menu {
	border: none;
	border-radius: 10px;
	box-shadow: 0 12px 28px rgba(36, 36, 36, 0.14);
	padding: 8px;
	/* Single column, deliberately (2026-07-25: a 2-column mega-grid made
	   long real titles — e.g. "Geschlechtsidentität & Geschlechtsdysphorie"
	   — cramped and hard to read). Fixed width + wrapping instead of
	   Bootstrap's default nowrap, so long titles break onto a second line
	   instead of stretching the panel or overflowing it. */
	width: 300px;
}

.navbar-nav .dropdown-header {
	padding: 8px 12px 4px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

.navbar-nav .dropdown-item {
	border-radius: 6px;
	padding: 8px 12px;
	white-space: normal;
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item.active {
	background-color: rgba(194, 65, 12, 0.08);
	color: var(--wp--preset--color--terracotta);
}

.jo-dropdown-icon {
	flex: none;
	display: inline-flex;
	color: var(--wp--preset--color--terracotta);
}

.jo-dropdown-icon svg {
	width: 18px;
	height: 18px;
}

/* Inline Lucide icons swapped into page-content headings for the s.w.org
   emoji-CDN <img> icons that migrated content used (see cleanup-content.php,
   ROADMAP.md 2026-07-25) — self-hosted, no external emoji request per
   heading. Sized to sit on the text baseline next to a heading. */
.jo-content-icon {
	display: inline-flex;
	vertical-align: -0.2em;
	color: var(--wp--preset--color--terracotta);
}

.jo-content-icon svg {
	width: 1.1em;
	height: 1.1em;
}

@media (min-width: 992px) {
	.navbar-nav .dropdown:hover > .dropdown-menu {
		display: block;
	}
}

.navbar-toggler {
	border: none;
}

/* Suppresses Bootstrap's own default focus box-shadow only for
   mouse/pointer focus, scoped with :not(:focus-visible) instead of
   !important so it can never clobber the accessible double-ring focus
   style above, which targets :focus-visible specifically. */
.navbar-toggler:focus:not(:focus-visible) {
	box-shadow: none;
}

/* Footer nav (legal links) */
.jo-footer-nav .nav-link {
	color: var(--wp--preset--color--very-light-gray);
}

.jo-footer-nav .nav-link:hover,
.jo-footer-nav .nav-link:focus-visible {
	color: var(--wp--preset--color--terracotta);
}

/* !important is the standard a11y pattern here: it must win over any
   component-level transition/animation rule, regardless of specificity. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}