/* ==========================================================================
   Onirik — global responsive safety net (loads site-wide, all pages)
   Purpose: guarantee no horizontal page scroll on any device / screen size,
   and harden a few overflow edge-cases. Kept intentionally minimal so it
   never fights the NasaTheme layout — it only clips stray overflow.
   ========================================================================== */

/* 1. Kill horizontal page scroll on every viewport.
      `clip` (not `hidden`) does NOT create a scroll container, so it never
      breaks position:sticky headers/menus. `hidden` first as an old-Safari
      fallback; `clip` wins where supported. */
html,
body {
	overflow-x: hidden;
	overflow-x: clip;
	max-width: 100%;
}

/* 2. NasaTheme product carousels lay every slide out in a single row and only
      clip once the slick JS initialises. Before init (page load, or a carousel
      still below the fold) that row overflows and the whole page can be swiped
      sideways. Clip the track so there is never a flash of horizontal scroll. */
.ns-type-carousel,
.ns-type-carousel .slick-list,
.nasa-sc.products.ns-type-carousel {
	overflow-x: hidden;
}

/* 3. Embedded media never forces the page wider than the screen. */
iframe,
video {
	max-width: 100%;
}

/* 4. Main navigation hover affordance — top-level menu titles were static
      black with no reaction, so they did not read as clickable. Add a colour
      shift + animated underline on hover / keyboard focus. */
#site-navigation > li.menu-item > a {
	transition: color .18s ease;
}

#site-navigation > li.menu-item:hover > a,
#site-navigation > li.menu-item > a:hover,
#site-navigation > li.menu-item > a:focus-visible {
	color: #a6785a;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

/* 5. Product carousels site-wide (Bestsellers, Chef's Pick, Related Products,
      etc.): the theme's slick arrows are tiny, light-grey and — critically —
      hidden by default (opacity/visibility), only revealed on hover. On touch
      devices there is no hover, so they never appear. Force them visible by
      default and restyle them as clear white circles with a dark chevron,
      centred on the carousel sides. (Only rendered when items overflow.) */
.nasa-slick-slider.products .nasa-nav-arrow.slick-arrow {
	position: absolute;
	top: 33%;
	transform: translateY(-50%);
	z-index: 5;
	width: 38px;
	height: 38px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	border-radius: 50%;
	box-shadow: 0 3px 12px rgba(40, 30, 20, .22);
	color: #1a1a1a !important;   /* SVG uses currentColor */
	opacity: 1 !important;       /* override theme hover-only reveal */
	visibility: visible !important;
	transition: background .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.nasa-slick-slider.products .nasa-nav-arrow.slick-prev { left: 6px; right: auto; }
.nasa-slick-slider.products .nasa-nav-arrow.slick-next { right: 6px; left: auto; }

.nasa-slick-slider.products .nasa-nav-arrow.slick-arrow svg {
	width: 17px;
	height: 17px;
}

/* Hide an arrow only when it can't scroll further, so a visible arrow always
   means "more this way". */
.nasa-slick-slider.products .nasa-nav-arrow.slick-arrow.slick-disabled {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
}