/* videoaction-theme/style.css */
/*
Theme Name: Video Action
Theme URI: https://videoaction.org
Description: Self-contained snapshot theme for videoaction.org. Freezes the prior Elementor-rendered output; no Elementor/Hello dependency.
Version: 1.0.0
Author: Route 7 Media
*/

/* ── Spotlight submenu (Elementor dropdown) ──────────────────────────
   Elementor's runtime supplied both the reveal behaviour AND the dropdown
   panel styling (position/background/width) — neither was in the captured
   stylesheets, so the revealed sub-menu rendered as an unstyled, near-
   invisible, clipped list. Restore the panel to match the live Elementor
   dropdown (light #f3f5f8 panel, black capitalized text) but size it to
   the content so the full label fits instead of overflowing a fixed
   156px box. Values mirror live videoaction.org computed styles. */

/* Selectors are rooted at #vafmenu (the nav widget wrapper) so they beat
   the captured Elementor rules that otherwise win: `#vafmenu a` (ID) zeroes
   the padding, and `.elementor-nav-menu--main .elementor-nav-menu ul` pins
   the panel to width:12em — which clipped the nowrap label. */

/* Reveal on hover (mouse) / focus-within (keyboard) */
#vafmenu .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
#vafmenu .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}

/* Desktop dropdown panel — absolutely positioned under the parent item,
   sized to its content so the full label fits */
#vafmenu .elementor-nav-menu--main .menu-item-has-children {
	position: relative;
}
#vafmenu .elementor-nav-menu--main .sub-menu {
	position: absolute;
	top: 100%;
	left: 15px;
	width: max-content;
	min-width: 156px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: #f3f5f8;
	z-index: 100;
}

/* Mobile burger nav: keep nested sub-menu items visible (in-flow) when open */
#vafmenu nav.elementor-nav-menu--dropdown .sub-menu {
	display: block;
}

/* Sub-item link — readable black text, capitalized, with breathing room */
#vafmenu .elementor-sub-item {
	display: block;
	color: #000;
	text-transform: capitalize;
	white-space: nowrap;
	padding: 8px 15px;
}
#vafmenu .elementor-sub-item:hover,
#vafmenu .elementor-sub-item:focus {
	background-color: #3f444b;
	color: #fff;
}

/* ── Work grid (/work/) — full-tile click target + readable captions ──
   The grid markup is a frozen Elementor HTML widget; pages.css carries
   several competing leftover blocks for it. These authoritative overrides
   (style.css loads last) make the WHOLE thumbnail clickable — not just the
   caption text — and give the hover caption padding so it isn't pinned to
   the bottom edge or clipped. */

/* Link covers the entire tile (was collapsing to the text only) */
.image-grid .image-item {
	position: relative;
}
.image-grid .image-item a {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;   /* caption sits at the bottom */
	width: 100%;
	height: 100%;
	padding: 0;
	opacity: 1;              /* link always covers the tile; only the caption fades in */
	z-index: 2;              /* above the hover darken overlay (.image-item::after) */
}

/* Caption bar: full width, breathing room, wraps instead of clipping */
.image-grid .image-item .hover-text {
	position: static;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 1rem;
	line-height: 1.3;
	white-space: normal;
	opacity: 0;
	transition: opacity 0.3s ease;
}
.image-grid .image-item:hover .hover-text {
	opacity: 1;
}