/**
 * Laxmiloka Account Navigator — front-end styles.
 *
 * Everything is driven by the custom properties on .lan, so a theme can restyle
 * the widget without touching selectors.
 */

.lan {
	--lan-muted: rgba( 0, 0, 0, 0.6 );
	--lan-gap: 2rem;

	/* Menu pills. Elementor globals, with the kit's values as fallbacks so the
	   widget still looks right outside an Elementor context. */
	--lan-pill-radius: 8px;
	--lan-pill-bg: var( --e-global-color-06c0358, #e8e8e2 );        /* Dark Sand */
	--lan-pill-bg-active: var( --e-global-color-ca61f6c, #ff6900 ); /* Accent Orange */
	--lan-pill-text: inherit;
	/*
	 * White on #FF6900 is only 2.9:1 — below the 4.5:1 AA floor for body text.
	 * The kit's near-black reaches 6.1:1 on the same orange, so the active pill
	 * keeps dark text. Swap this one line for #fff if the look matters more.
	 */
	--lan-pill-text-active: var( --e-global-color-primary, #1a1c18 );
	--lan-fade-in: 220ms;

	display: block;
	width: 100%;
}

/* --------------------------------------------------------------------- *
 *  Menu
 * --------------------------------------------------------------------- */

.lan__menu {
	/* Long menus scroll sideways instead of wrapping into a second row. */
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

/* Plain divs, so nothing here has to fight a theme's list styling. */
.lan__list {
	display: flex;
        flex-direction: row;
        justify-content: center;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.lan__item {
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

.lan__link {
	display: block;
	padding: 0.4em 1.25em;
	border: 0;
	border-radius: var( --lan-pill-radius );
	font: inherit;
	line-height: 1.3;
	white-space: nowrap;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

/*
 * Themes reach links through selectors like `.entry-content a`, which outranks
 * a single class — that is enough to repaint the pill in the theme's link blue
 * and put the underline back. So the properties themes fight over are doubled
 * to match that specificity, across every link state. The one !important is
 * confined to text-decoration, which themes set with the most force.
 */
.lan .lan__link,
.lan .lan__link:hover,
.lan .lan__link:focus,
.lan .lan__link:visited,
.lan .lan__link:active {
	background: var( --lan-pill-bg );
	color: var( --lan-pill-text );
	text-decoration: none !important;
	box-shadow: none;
}

.lan__link:hover,
.lan__link:focus-visible {
	/* Darken whichever pill colour is underneath, resting or active. */
	filter: brightness( 0.95 );
}

/*
 * Drawn *inside* the pill: the menu is a horizontal scroller with
 * overflow-y: hidden, so an outset ring would be clipped on the first and last
 * items. currentColor keeps it visible on both the sand and the orange.
 */
.lan__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}

/* One notch above the doubled base rule, so the active pill wins outright
   rather than relying on source order. */
.lan .lan__link.is-active,
.lan .lan__link.is-active:hover,
.lan .lan__link.is-active:focus,
.lan .lan__link.is-active:visited {
	
	color: var( --lan-pill-bg-active );
	font-weight: 600;
}

/* --------------------------------------------------------------------- *
 *  Administrator debug strip
 *
 *  Sits between the menu and the panel. Reads as a utility band rather than
 *  page content, so it is not mistaken for something a visitor should see.
 * --------------------------------------------------------------------- */

.lan__debug {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-top: 1rem;
	padding: 0.625rem 1rem;
	border-radius: 8px;
	background: var( --e-global-color-a661103, #f4f4f0 );
	font-size: 0.8125rem;
	line-height: 1.4;
}

.lan__debug-badge {
	flex: 0 0 auto;
	padding: 0.125rem 0.5rem;
	border-radius: 4px;
	background: rgba( 0, 0, 0, 0.08 );
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lan__debug-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 1.25rem;
	margin: 0;
	padding: 0;
}

.lan__debug-row {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
	margin: 0;
}

.lan__debug-label {
	margin: 0;
	color: var( --lan-muted );
	font-weight: 400;
}

.lan__debug-label::after {
	content: ':';
}

.lan__debug-value {
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 600;
	/* Long enough to select cleanly, short enough not to break the row. */
	word-break: break-all;
}

/* --------------------------------------------------------------------- *
 *  Panel
 * --------------------------------------------------------------------- */

/*
 * The container holds every panel at once and shows one. Its min-height stops
 * the page jumping between panels of different lengths.
 */
.lan__panel {
	position: relative;
	min-height: 80vh;
	padding-top: var( --lan-gap );
	outline: none;
}

/*
 * Closed panels are display:none rather than hidden by opacity or off-screen
 * positioning. They are real, fully rendered documents — several of them — and
 * anything short of display:none leaves their images loading, their layout
 * being computed and their content reachable by find-in-page and by a screen
 * reader walking a panel the visitor cannot see.
 */
.lan__layout {
	display: none;
}

/*
 * Paired with the `hidden` attribute the markup also carries, so the closed
 * state survives this stylesheet not arriving at all. The two are bound to the
 * same state entry and cannot disagree.
 */
.lan__layout.is-open {
	display: block;
	animation: lan-panel-in var( --lan-fade-in ) ease both;
}

@keyframes lan-panel-in {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
}

/* The layout lives on the inner wrapper: the outer element carries the
   directives and is what switches between none and block. */
.lan__inner--split {
	display: grid;
	/* 40% / 60% of the space left once the gap is taken out. */
	grid-template-columns: 4fr 6fr;
	gap: var( --lan-gap );
	align-items: start;
}

/*
 * Only ever on while a panel's *first* data fetch is in flight — the panel is
 * showing but has nothing in it yet. Revalidating a panel that already has
 * content is silent, because dimming something readable to announce that it is
 * about to be marginally more current is a worse experience than saying
 * nothing.
 */
.lan__layout.is-busy .lan__content {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 120ms ease;
}

/*
 * A first fetch that never arrived. The panel is empty and no amount of waiting
 * will fill it, so say so rather than showing a blank column.
 *
 * The attribute sits on .lan__content, not on the .lan__layout wrapper, and it
 * has to: attr() reads only from the element its pseudo-element belongs to, so
 * `.lan__layout[data-lan-failed] .lan__content::before` would resolve attr() on
 * .lan__content, find nothing there, and render an empty string — a failed
 * panel that looks exactly like a blank one.
 */
.lan__content[data-lan-failed]::before {
	content: attr( data-lan-failed );
	display: block;
	padding: 1rem 0;
	opacity: 0.7;
}

/* Shown when a panel's shortcode has no provider registered. Deliberately
   understated — it is an admin problem, and the visitor can do nothing. */
.lan-notice {
	margin: 0;
	padding: 1rem 0;
	opacity: 0.7;
}

/* Administrator-only detail under the bland visitor line. */
.lan-notice--admin {
	padding: 0.75rem 1rem;
	border-radius: 8px;
	background: rgba( 204, 51, 51, 0.08 );
	opacity: 1;
	font-size: 0.85rem;
	line-height: 1.5;
}

.lan__aside {
	min-width: 0;
}

.lan__aside-title {
	margin: 0 0 0.75rem;
	font-size: 1.35rem;
	line-height: 1.25;
}

.lan__instruction {
	color: var( --lan-muted );
	line-height: 1.6;
}

.lan__instruction > :first-child {
	margin-top: 0;
}

.lan__instruction > :last-child {
	margin-bottom: 0;
}

.lan__content {
	min-width: 0;
}

@media ( max-width: 860px ) {
	.lan {
		--lan-gap: 1.5rem;
	}

	.lan__inner--split {
		grid-template-columns: 1fr;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.lan__link {
		transition: none;
	}

	/* The panel switch is instant anyway; drop the movement and the fade with
	   it rather than animating something that has nothing to cover. */
	.lan__layout.is-open {
		animation: none;
	}
}