/* -------------------------------------------------------------------------
 * DocLoop theme chrome
 * Tokens come from theme.json (--wp--preset--*).
 * Header is a floating rounded bar built from core Group + Site Logo + Navigation.
 * ---------------------------------------------------------------------- */

:root {
	--docloop-header-bg: var(--wp--preset--color--header);
	--docloop-accent: var(--wp--preset--color--accent);
	--docloop-fg: var(--wp--preset--color--foreground);
	--docloop-bg: var(--wp--preset--color--background);
}

html {
	background: var(--docloop-bg);
}

body {
	background: var(--docloop-bg);
	color: var(--docloop-fg);
}

a:focus-visible,
button:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--docloop-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
 * Global header
 * ---------------------------------------------------------------------- */

.docloop-header.wp-block-group {
	position: relative;
	z-index: 100;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	height: 106px;
	margin: 0;
	padding: 0 40px;
	background: #0d0d0d;
}

.admin-bar .docloop-header.wp-block-group {
	top: auto;
}

/*
 * Background, radius and padding are block attributes on the Header Bar group
 * so they stay editable in the Site Editor. Only the hairline stroke and the
 * 56px bar height from the design live here.
 */
.docloop-header__bar.wp-block-group {
	box-sizing: border-box;
	width: 100%;
	max-width: 1200px;
	min-height: 64px;
	margin-right: auto;
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.docloop-header .wp-block-site-logo {
	margin: 0;
	line-height: 0;
}

.docloop-header .wp-block-site-logo a {
	display: block;
	line-height: 0;
}

.docloop-header .wp-block-site-logo img {
	display: block;
	width: auto;
	height: 36px;
	max-width: 188px;
}

.docloop-header__nav.wp-block-navigation {
	gap: 32px;
}

.docloop-header__nav .wp-block-navigation-item__content {
	padding: 0;
	color: var(--docloop-fg);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	text-decoration: none;
}

.docloop-header__nav .wp-block-navigation-item__content:hover,
.docloop-header__nav .wp-block-navigation-item__content:focus,
.docloop-header__nav .current-menu-item > .wp-block-navigation-item__content,
.docloop-header__nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--docloop-accent);
}

.docloop-header__nav .wp-block-navigation__responsive-container-open,
.docloop-header__nav .wp-block-navigation__responsive-container-close {
	color: var(--docloop-fg);
}

.docloop-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--docloop-bg);
	padding: 24px;
}

.docloop-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.25rem;
	padding: 10px 0;
}

/* -------------------------------------------------------------------------
 * Global footer — intentionally empty for this step
 * ---------------------------------------------------------------------- */

.docloop-footer.wp-block-group {
	margin: 0;
	padding: 0;
	min-height: 0;
}

/* -------------------------------------------------------------------------
 * Main — keep content readable on the dark canvas until sections land
 * ---------------------------------------------------------------------- */

.docloop-main.wp-block-group {
	padding: var(--wp--preset--spacing--70) 40px;
}

/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 781px) {
	.docloop-header.wp-block-group {
		height: auto;
		min-height: 72px;
		padding: 12px 16px;
	}

	.admin-bar .docloop-header.wp-block-group {
		top: auto;
	}

	.docloop-header .wp-block-site-logo img {
		height: 28px;
		max-width: 140px;
	}

	.docloop-main.wp-block-group {
		padding: var(--wp--preset--spacing--60) 16px;
	}
}

@media (max-width: 479px) {
	.docloop-header.wp-block-group {
		padding: 12px;
	}
}