/**
 * Lucablox Base Styles
 *
 * ABEM-inspired naming: lb-{block}--{modifier}
 * Only CSS that cannot be achieved via theme.json.
 *
 * @package Lucablox
 */

/* ==========================================================================
   Block: Card (lb-card)
   Applied to: core/group
   ========================================================================== */

.wp-block-group.is-style-lb-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--lb--radius--lg);
}

/* Modifier: --raised */
.wp-block-group.is-style-lb-card--raised {
	background-color: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--lb--radius--lg);
	box-shadow: var(--wp--preset--shadow--lg);
}

/* ==========================================================================
   Block: Button variants (lb-btn)
   Applied to: core/button
   ========================================================================== */

/* Modifier: --pill */
.wp-block-button.is-style-lb-btn--pill .wp-block-button__link {
	border-radius: var(--wp--custom--lb--radius--full);
	padding: 0.625em 1.25em;
}

/* Modifier: --ghost */
.wp-block-button.is-style-lb-btn--ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--text);
	border: none;
	padding: 0.5em 0;
}

.wp-block-button.is-style-lb-btn--ghost .wp-block-button__link::after {
	content: " →";
	transition: transform var(--wp--custom--lb--transition);
	display: inline-block;
}

.wp-block-button.is-style-lb-btn--ghost .wp-block-button__link:hover {
	background-color: transparent;
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-lb-btn--ghost .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* ==========================================================================
   Block: Navigation (lb-nav)
   Applied to: core/navigation
   ========================================================================== */

.wp-block-navigation.is-style-lb-nav {
	gap: 0.5rem;
}

.wp-block-navigation.is-style-lb-nav .wp-block-navigation-item__content {
	padding: 0.375em 0.75em;
	border-radius: var(--wp--custom--lb--radius--sm);
	text-decoration: none;
	transition: background-color var(--wp--custom--lb--transition);
}

.wp-block-navigation.is-style-lb-nav .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface);
}

.wp-block-navigation.is-style-lb-nav .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Element: __submenu */
.wp-block-navigation.is-style-lb-nav .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--lb--radius--md);
	box-shadow: var(--wp--preset--shadow--lg);
	padding: 0.5rem;
	min-width: 200px;
}

.wp-block-navigation.is-style-lb-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5em 0.75em;
	border-radius: var(--wp--custom--lb--radius--sm);
}

/* ==========================================================================
   Block: Separator (lb-separator)
   Applied to: core/separator
   ========================================================================== */

/* Modifier: --hairline */
.wp-block-separator.is-style-lb-separator--hairline {
	height: 1px;
	border: 0;
	opacity: 1;
}

/* ==========================================================================
   Block: Image (lb-image)
   Applied to: core/image
   ========================================================================== */

/* Modifier: --rounded */
.wp-block-image.is-style-lb-image--rounded img {
	border-radius: var(--wp--custom--lb--radius--lg);
}

/* Fix: Ensure rounded (circle) images maintain aspect ratio */
.wp-block-image.is-style-rounded img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ==========================================================================
   Block: Columns (lb-columns)
   Applied to: core/columns
   ========================================================================== */

/* Modifier: --cards */
.wp-block-columns.is-style-lb-columns--cards > .wp-block-column {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--lb--radius--lg);
	padding: var(--wp--preset--spacing--lg);
}

/* ==========================================================================
   Utility: Focus Styles (Accessibility)
   Applied to frontend content and editor preview areas
   ========================================================================== */

.wp-site-blocks :focus-visible,
.editor-styles-wrapper :focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ==========================================================================
   Utility: Link Refinements
   ========================================================================== */

.entry-content a:not(.wp-block-button__link),
.wp-block-post-content a:not(.wp-block-button__link) {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--wp--custom--lb--transition);
}

.entry-content a:not(.wp-block-button__link):hover,
.wp-block-post-content a:not(.wp-block-button__link):hover {
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Utility: Site Logo
   ========================================================================== */

.lb-site-logo {
	margin: 0;
	line-height: 0;
	width: 160px;
}

.lb-site-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Utility: Avatar (lb-avatar)
   ========================================================================== */

.wp-block-image.lb-avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	overflow: hidden;
	flex: 0 0 auto;
}

.wp-block-image.lb-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	transform: scale(1.12);
	transform-origin: center;
}

/* ==========================================================================
   Utility: Avatar (lb-avatar)
   Usage: Add class "lb-avatar" to an Image block used as a profile/avatar.
   ========================================================================== */

.wp-block-image.lb-avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	overflow: hidden;
	flex: 0 0 auto;
}

.wp-block-image.lb-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 35%;
	transform: scale(1.12);
	display: block;
}

/* ==========================================================================
   Utility: Avatar (lb-avatar)
   Usage: Add class "lb-avatar" to an Image block used as a profile/avatar.
   ========================================================================== */

.wp-block-image.lb-avatar {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	overflow: hidden;
	flex: 0 0 auto;
}

.wp-block-image.lb-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: 50% 35%;
	transform: scale(1.12);
	display: block;
}

/* ==========================================================================
   Utility: Sticky Header (lb-sticky)
   Usage: Select "Header (Sticky)" template part in Site Editor,
   or apply the lb-sticky class to the outermost group in any header.
   ========================================================================== */

header:has(.lb-sticky),
body.lb-header-sticky header.wp-block-template-part {

	position: sticky;
	top: 0;
	z-index: 999;
	background-color: var(--wp--preset--color--bg);
}

@supports (backdrop-filter: blur(12px)) {
	header:has(.lb-sticky),
body.lb-header-sticky header.wp-block-template-part {

		background-color: color-mix(in srgb, var(--wp--preset--color--bg) 85%, transparent);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}
}

/* Ensure dark headers keep their own background when sticky */
header:has(.lb-sticky) .wp-block-group.has-text-background-color,
body.lb-header-sticky header.wp-block-template-part .wp-block-group.has-text-background-color {
	background-color: var(--wp--preset--color--text);
}

/* Logged-in admin bar offset (front end) */
body.admin-bar header:has(.lb-sticky),
body.admin-bar.lb-header-sticky header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* ==========================================================================
   Utility: Header Width
   Usage: Set in Appearance → Lucablox.
   ========================================================================== */

body.lb-header-width-full header.wp-block-template-part > .wp-block-group {
	max-width: none;
	width: 100%;
}

/* ==========================================================================
   Utility: Table Borders (Pricing tables)
   Normalize the header/body divider to the same 1px weight as other borders.
   ========================================================================== */

.wp-block-group.is-style-lb-card .wp-block-table thead th {
	border-bottom-width: 1px;
}

/* ==========================================================================
   Utility: Smooth Scrolling
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ==========================================================================
   Utility: Selection Highlight
   ========================================================================== */

::selection {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg);
}