/*
 * GAIA-brand theming for the GeoNetwork <sextant-app> web component.
 *
 * This file is enqueued only when the [gaiadata_app] shortcode or the
 * Gaiadata Catalog block is rendered, so every rule below is implicitly
 * scoped to pages hosting the embed.
 *
 * The six accents below come from the active GAIA theme palette
 * (theme.json) via WordPress CSS custom properties to keep a single
 * source of truth:
 *   accent-1 #011E39 | accent-2 #173E63 | accent-3 #2D75B8
 *   accent-4 #4285F4 | accent-5 #E9F1F8 | accent-6 #F5F5F5
 */

/* ---------------------------------------------------------------------------
 * A. Neutralize the theme's homepage absolute header so it cannot overlay
 *    the embed. Reverts gaia-common.css `.home & { position:absolute; ... }`
 *    and the announcement-bar `top` override.
 * ------------------------------------------------------------------------- */
body.home .wp-site-blocks > header.wp-block-template-part,
body.home .wp-site-blocks > .wp-block-template-part.header,
.wp-site-blocks > header.wp-block-template-part {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	z-index: auto !important;
	color: var(--wp--preset--color--accent-1) !important;
}

/* ---------------------------------------------------------------------------
 * Uncomment this part when theme 1.2 is rollout
 * ------------------------------------------------------------------------- */
/* body.home.gaia-has-announcement .wp-site-blocks > header.wp-block-template-part {
	top: auto !important;
} */

/* If a hero/padded section compensated for the absolute header with a
 * top padding, undo that compensation now that the header is in-flow. */
.wp-site-blocks > main:first-of-type .gaia-hero-section,
.wp-site-blocks > main:first-of-type .main-page-hero {
	padding-top: 0 !important;
}

/* ---------------------------------------------------------------------------
 * B. Free the component from the remote stylesheet's full-screen trap and
 *    from the theme's 10px root font-size discrepancy. The GeoNetwork UI is
 *    entirely rem-based and sized for a 14px root, while the GAIA theme
 *    runs a 10px root, so it renders 30% smaller than designed. `rem` cannot
 *    be re-anchored locally, so scale the whole subtree with `zoom` (14/10)
 *    to repaint it exactly as the app was designed. The block-author height
 *    attribute (`height:...`) then actually controls the embed size.
 * ------------------------------------------------------------------------- */
sextant-app {
	display: block flex;
	min-height: auto !important;
	height: auto !important;
	position: relative !important;
	z-index: 0 !important;
	zoom: 1.4;
}

/* ---------------------------------------------------------------------------
 * C. GAIA brand remap.
 *    The component renders inside a shadow DOM but reads PrimeVue/Tailwind
 *    design tokens from inherited CSS custom properties, so declaring them
 *    on the host element retheme the whole UI.
 * ------------------------------------------------------------------------- */
sextant-app {
	--app-font-family-sans: var(--wp--preset--font-family--roboto);

	/* Primary brand (buttons, links, active nav, focus) */
	--p-primary-color: var(--wp--preset--color--accent-3);
	--p-primary-300: var(--wp--preset--color--tag);
	--p-primary-400: var(--wp--preset--color--accent-4);
	--p-primary-500: var(--wp--preset--color--accent-3);
	--p-primary-600: var(--wp--preset--color--accent-2);
	--p-primary-700: var(--wp--preset--color--accent-2);
	--p-primary-900: var(--wp--preset--color--accent-1);
	--p-primary-contrast-color: var(--wp--preset--color--base);

	/* Surfaces and text */
	--p-surface-0: var(--wp--preset--color--base);
	--p-surface-50: var(--wp--preset--color--accent-6);
	--p-surface-100: var(--wp--preset--color--accent-5);
	--p-surface-200: var(--wp--preset--color--tag-2);
	--p-surface-300: var(--wp--preset--color--tag-2);
	--p-text-color: var(--wp--preset--color--contrast);
	--p-text-muted-color: var(--wp--preset--color--grey);

	/* Focus ring */
	--p-focus-ring-color: var(--wp--preset--color--accent-4);

	/* Radii matching the theme's card/tag language */
	--p-border-radius-md: 0.75rem;
	--p-border-radius-lg: 1.25rem;
}