/* IJ sticky contact rail — values taken from StickyActions.tsx:

     item     w-14 (56px), hover w-64 / w-72 / w-56, rounded-l-xl, shadow-lg,
              overflow-hidden, transition-all duration-300 ease-out
     iconbox  w-14 h-14 flex-shrink-0, icon w-6 h-6
     label    pr-4 whitespace-nowrap, opacity-0 -> 100 over 300ms
     title    text-sm font-medium        sub  text-xs at 80% opacity
     gold     bg-primary / text-primary-foreground
     card     bg-card, border border-border/50, text-foreground,
              hover bg-primary/5 + text-primary

   The open width is a native Elementor slider control, so it is set per tab
   through --ij-rail-open rather than hard-coded here. */

/* The element+class selectors below are deliberate: Elementor's kit styles links
   as `.elementor-widget-… a`, which outranks a bare class and was overriding the
   tab's text colour and shadow. */
.ij-rail__item,
.elementor-widget-ij-rail a.ij-rail__item {
	--ij-rail-accent: #a9955b;
	--ij-rail-tab: 56px;
	--ij-rail-open: 256px;
	--ij-rail-text: #575757;
	--ij-rail-line: rgba(224, 224, 224, 0.5);

	display: flex;
	align-items: center;
	flex-shrink: 0;
	box-sizing: border-box;
	width: var(--ij-rail-tab);
	height: var(--ij-rail-tab);
	overflow: hidden;
	border-radius: 12px 0 0 12px;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
	text-decoration: none;
	transition: width 0.3s ease-out, background-color 0.3s ease-out, color 0.3s ease-out;
}

/* Must outrank the base rule above, which carries the element+class selector. */
.ij-rail__item:hover,
.ij-rail__item:focus-visible,
.elementor-widget-ij-rail a.ij-rail__item:hover,
.elementor-widget-ij-rail a.ij-rail__item:focus-visible {
	width: var(--ij-rail-open);
}

.ij-rail__item:focus-visible {
	outline: 2px solid var(--ij-rail-accent);
	outline-offset: 2px;
}

.ij-rail__iconbox {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--ij-rail-tab);
	width: var(--ij-rail-tab);
	height: var(--ij-rail-tab);
}

.ij-rail__iconbox svg {
	display: block;
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.ij-rail__label {
	padding-right: 16px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ij-rail__item:hover .ij-rail__label,
.ij-rail__item:focus-visible .ij-rail__label {
	opacity: 1;
}

.ij-rail__title {
	display: block;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: inherit;
}

.ij-rail__sub {
	display: block;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
}

/* ---------------------------------------------------------------- variants */

.ij-rail__item--gold,
.elementor-widget-ij-rail a.ij-rail__item--gold {
	background-color: var(--ij-rail-accent);
	color: #fff;
	border: 0;
}

.ij-rail__item--gold:hover,
.elementor-widget-ij-rail a.ij-rail__item--gold:hover {
	color: #fff;
}

.ij-rail__item--gold .ij-rail__sub {
	color: rgba(255, 255, 255, 0.8);
}

.ij-rail__item--card,
.elementor-widget-ij-rail a.ij-rail__item--card {
	background-color: #fff;
	border: 1px solid var(--ij-rail-line);
	color: var(--ij-rail-text);
}

.ij-rail__item--card .ij-rail__sub {
	color: #737373;
}

.ij-rail__item--card:hover,
.ij-rail__item--card:focus-visible,
.elementor-widget-ij-rail a.ij-rail__item--card:hover,
.elementor-widget-ij-rail a.ij-rail__item--card:focus-visible {
	background-color: rgba(169, 149, 91, 0.05);
	color: var(--ij-rail-accent);
}

/* The widget wrapper must not clip or stretch the tab as it grows leftwards.
   Do NOT make .elementor-widget-container a flex container: the tab would
   become a flex item with flex-shrink:1 inside a 56px box and collapse straight
   back to its closed width on hover. The rail already right-aligns its children
   through align-items:flex-end. */
.elementor-widget-ij-rail {
	width: auto !important;
	max-width: none !important;
}

.elementor-widget-ij-rail .elementor-widget-container {
	display: block;
	text-align: right;
}

/* Honour reduced-motion: the label still appears, it just does not slide. */
@media (prefers-reduced-motion: reduce) {
	.ij-rail__item,
	.ij-rail__label {
		transition: none;
	}
}