/*
 * Superior Homes Videos - frontend styles.
 * Every selector is scoped under .shk-videos / .shk-videos-modal so this
 * sheet can never leak into Elementor or the rest of the site. Colors,
 * type and radius read the child-theme design tokens with fallbacks
 * matching the current live values, so the component still looks right
 * if tokens.css changes or is not yet loaded.
 */

.shk-videos {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
.shk-videos *,
.shk-videos *::before,
.shk-videos *::after {
	box-sizing: border-box;
}
.shk-videos .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* ---------- Tabs ---------- */
.shk-videos__tabs-wrap {
	position: relative;
	margin: 0 0 28px;
	border-bottom: 1px solid rgba(31, 31, 31, 0.08);
}
.shk-videos__tabs {
	display: flex;
	gap: 32px;
	overflow-x: auto;
	overflow-y: hidden;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 1px;
	scroll-behavior: smooth;
}
.shk-videos__tabs::-webkit-scrollbar {
	display: none;
}

/* ---------- Tab-strip scroll arrows ---------- */
/* Hidden by default (see [hidden] rule below) and shown only by JS once it
 * confirms the strip actually overflows in that direction — a mouse/touch
 * user who can already see every tab never gets a dead-looking button, and
 * a no-JS visitor never gets a button that does nothing. Positioned as a
 * fading overlay rather than reserving fixed layout space so the arrows
 * work identically on mobile and desktop without a separate breakpoint.
 * Mirrored from superior-homes-gallery-tabs' identical tab strip. */
.shk-videos__tabs-arrow.shk-videos__tabs-arrow {
	position: absolute;
	top: 0;
	bottom: 9px;
	z-index: 2;
	display: flex;
	align-items: center;
	width: 40px;
	appearance: none;
	border: 0;
	padding: 0 6px;
	color: var(--color-accent, #f28c28);
	cursor: pointer;
}
.shk-videos__tabs-arrow[hidden] {
	display: none;
}
.shk-videos__tabs-arrow--prev.shk-videos__tabs-arrow--prev {
	left: -6px;
	justify-content: flex-start;
	background: linear-gradient(to right, var(--color-bg, #fff) 55%, transparent);
}
.shk-videos__tabs-arrow--next.shk-videos__tabs-arrow--next {
	right: -6px;
	justify-content: flex-end;
	background: linear-gradient(to left, var(--color-bg, #fff) 55%, transparent);
}
.shk-videos__tabs-arrow.shk-videos__tabs-arrow:hover,
.shk-videos__tabs-arrow.shk-videos__tabs-arrow:focus,
.shk-videos__tabs-arrow.shk-videos__tabs-arrow:focus-visible {
	background-color: transparent;
	color: var(--color-text, #1f1f1f);
}
.shk-videos__tabs-arrow.shk-videos__tabs-arrow:focus {
	outline: none;
}
.shk-videos__tabs-arrow.shk-videos__tabs-arrow:focus-visible {
	outline: 2px solid var(--color-accent, #f28c28);
	outline-offset: 2px;
	border-radius: var(--radius-sm, 4px);
}
/* Doubled class (.shk-videos__tab.shk-videos__tab etc.) is deliberate,
 * not a typo: Elementor sites commonly ship a global Kit rule like
 * ".elementor-kit-N button { background-color: ...; border-radius: 20px; }"
 * on <body>, which has higher specificity (class+element, 0-1-1) than a
 * plain ".shk-videos__tab" (0-1-0) and would otherwise paint every tab
 * button as an orange pill regardless of stylesheet load order. Doubling
 * the class raises us to 0-2-0 so this always wins without !important. */
.shk-videos__tab.shk-videos__tab {
	position: relative;
	flex: 0 0 auto;
	appearance: none;
	/* Hello Elementor's reset.css sets a background-color on every
	 * button:hover/:focus; without an explicit override here that leaks
	 * straight through since this rule never otherwise touches
	 * background. Pin it to transparent in every state below. */
	background-color: transparent;
	border: 0;
	margin: 0;
	padding: 0 0 12px;
	color: var(--color-text, #1f1f1f);
	font: var(--text-h3, 400 28px/32px var(--font-heading, "Oswald", sans-serif));
	font-family: var(--font-heading, "Oswald", sans-serif);
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}
/* The active/hover indicator is a full-width pseudo-element rather than
 * a border, so its width is never at the mercy of the button's own box
 * model (padding, inherited border resets, etc.) — it always spans
 * exactly edge-to-edge under the tab label. */
.shk-videos__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: transparent;
}
/* :focus (not just :focus-visible) is deliberate: a mouse click that
 * focuses a <button> matches :focus but usually does NOT match
 * :focus-visible in Chrome, while the Elementor Kit rule this whole file
 * is defending against targets plain :focus — so :focus-visible alone
 * left a gap a mouse click could still fall through. */
.shk-videos__tab.shk-videos__tab:hover,
.shk-videos__tab.shk-videos__tab:focus,
.shk-videos__tab.shk-videos__tab:focus-visible {
	background-color: transparent;
	color: var(--color-accent, #f28c28);
}
.shk-videos__tab:hover::after,
.shk-videos__tab:focus::after,
.shk-videos__tab:focus-visible::after,
.shk-videos__tab.is-active::after {
	background-color: var(--color-accent, #f28c28);
}
.shk-videos__tab.shk-videos__tab.is-active {
	background-color: transparent;
	color: var(--color-accent, #f28c28);
	font-weight: 400;
}
/* Safari draws its own native blue focus ring off plain :focus, not
 * :focus-visible — so a mouse click that focuses this tab (which matches
 * :focus in every browser, same as the background-color rule above) left
 * Safari's default ring fully visible, since nothing had told Safari to
 * suppress it outside the :focus-visible rule below. Chrome/Firefox never
 * showed this because their native ring is already gated on
 * :focus-visible, same as ours — only Safari ties it to :focus. */
.shk-videos__tab.shk-videos__tab:focus {
	outline: none;
}
.shk-videos__tab.shk-videos__tab:focus-visible {
	outline: 2px solid var(--color-accent, #f28c28);
	outline-offset: 3px;
	border-radius: var(--radius-sm, 4px);
}

/* ---------- Grid ---------- */
.shk-videos__grid {
	display: grid;
	grid-template-columns: repeat(var(--shk-videos-columns-mobile, 1), minmax(0, 1fr));
	gap: 28px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 600px) {
	.shk-videos__grid {
		grid-template-columns: repeat(var(--shk-videos-columns-tablet, 2), minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.shk-videos__grid {
		grid-template-columns: repeat(var(--shk-videos-columns, 4), minmax(0, 1fr));
		gap: 36px 28px;
	}
}
.shk-videos__item {
	margin: 0;
	list-style: none;
}
.shk-videos__item[hidden] {
	display: none;
}

/* ---------- Card ---------- */
/* Doubled class here too — see the .shk-videos__tab comment above. This
 * card is a <button>, so it's just as exposed to a global Elementor Kit
 * "button { background-color: ...; border-radius: 20px; }" rule, which
 * would otherwise show up as an orange pill behind the thumbnail/title. */
.shk-videos-card.shk-videos-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-width: 0;
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	color: inherit;
	font: inherit;
	/* Chrome's UA stylesheet sets white-space:pre on <button>, which the
	 * title/description spans below would otherwise inherit — silently
	 * disabling wrapping and letting long titles overflow into the next
	 * card instead of wrapping onto a second line. */
	white-space: normal;
	cursor: pointer;
}
/* Same Hello Elementor button:hover/:focus background leak as the tabs
 * above — this card is a <button> too, so it needs the same override.
 * :focus (not just :focus-visible) is deliberate — see the tab comment. */
.shk-videos-card.shk-videos-card:hover,
.shk-videos-card.shk-videos-card:focus,
.shk-videos-card.shk-videos-card:focus-visible {
	background-color: transparent;
}
.shk-videos-card--unavailable {
	cursor: default;
}
/* Same Safari native-ring-on-:focus gap as the tabs above — see that
 * comment. This is the rule a report of an unstyled blue rounded-rect
 * box around a video card traces back to: Safari's own ring, not
 * anything this plugin was drawing on purpose. */
.shk-videos-card.shk-videos-card:focus {
	outline: none;
}
.shk-videos-card.shk-videos-card:focus-visible {
	outline: 2px solid var(--color-accent, #f28c28);
	outline-offset: 4px;
	border-radius: var(--radius-sm, 4px);
}
.shk-videos-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius-sm, 4px);
	background: #e5e5e5;
}
/* Doubled class: Elementor's own frontend.min.css ships ".elementor img {
 * height: auto; max-width: 100%; }" — one class + one element, which beats
 * a plain ".shk-videos-card__image" (one class) on specificity alone, no
 * !important needed. That let it win the height property here: the <img>
 * rendered at its natural 4:3 aspect instead of stretching to the card's
 * 16:9 box, so it overflowed the bottom of the (overflow:hidden) media box
 * and got clipped there instead of being centered and cover-cropped. Since
 * the <img> stayed top-aligned, YouTube's hqdefault.jpg — itself letterboxed
 * with black bars top and bottom for a 16:9 video padded into its 4:3
 * canvas — showed its top bar untouched, which is the black strip the
 * client reported. Confirmed live via computed styles on
 * wereconsulting.com/shk/videos/. */
.shk-videos-card__image.shk-videos-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.25s ease;
}
.shk-videos-card__image[data-shk-video-thumbnail].is-fallback {
	display: none;
}
.shk-videos-card:hover .shk-videos-card__image {
	transform: scale(1.03);
}
.shk-videos-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: #e5e5e5;
}
.shk-videos-card__placeholder::before,
.shk-videos-card__media.is-fallback::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #e5e5e5
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='28' height='28' fill='none' stroke='%23999' stroke-width='1.5'%3E%3Crect x='2' y='5' width='15' height='14' rx='2'/%3E%3Cpath d='M17 9.5 22 6v12l-5-3.5'/%3E%3C/svg%3E")
		center/28px no-repeat;
}
.shk-videos-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.shk-videos-card__unavailable-label {
	position: absolute;
	inset: auto 0 0 0;
	padding: 6px 10px;
	background: rgba(0, 0, 0, 0.55);
	color: var(--color-white, #fff);
	font-size: 12px;
	text-align: center;
}
.shk-videos-card__title {
	display: block;
	margin-top: 16px;
	color: var(--color-text, #1f1f1f);
	font: var(--text-h5, 400 20px/24px var(--font-heading, "Oswald", sans-serif));
	font-family: var(--font-heading, "Oswald", sans-serif);
}
.shk-videos-card__description {
	display: block;
	margin-top: 8px;
	color: var(--color-muted, #777);
	font: var(--text-body, 300 16px/20px var(--font-body, "Lato", sans-serif));
	font-family: var(--font-body, "Lato", sans-serif);
}

/* ---------- Empty state ---------- */
.shk-videos-empty {
	padding: 16px 20px;
	border: 1px dashed rgba(31, 31, 31, 0.25);
	border-radius: var(--radius-sm, 4px);
	color: var(--color-muted, #777);
	font-family: var(--font-body, "Lato", sans-serif);
	font-size: 14px;
}

/* ---------- Modal ---------- */
html.shk-videos-dialog-open {
	overflow: hidden;
}
.shk-videos-modal {
	/* Local custom properties, scoped to the modal only, so a theme (or a
	 * future Customizer/Elementor control) can restyle the popup by
	 * setting these on .shk-videos-modal or an ancestor — without editing
	 * this file. Every rule below reads from these instead of the literal
	 * value directly. */
	--shk-modal-radius: var(--radius-sm, 4px);
	--shk-modal-overlay: rgba(15, 15, 15, 0.85);
	--shk-modal-close-bg: rgba(0, 0, 0, 0.55);
	--shk-modal-close-color: var(--color-accent, #f28c28);
	box-sizing: border-box;
	width: min(960px, 92vw);
	max-height: 88vh;
	padding: 0;
	border: 0;
	border-radius: var(--shk-modal-radius);
	background: #000;
	color: var(--color-white, #fff);
	/* Chrome's UA stylesheet gives <dialog> overflow:auto by default, which
	 * would clip anything positioned outside its border box — so the close
	 * button below lives inside the dialog bounds, overlaid on the frame,
	 * rather than floating above it. */
	overflow: visible;
}
.shk-videos-modal::backdrop {
	background: var(--shk-modal-overlay, rgba(15, 15, 15, 0.85));
}
.shk-videos-modal[open] {
	display: block;
}
.shk-videos-modal__inner {
	position: relative;
}
/* Doubled class again — see the .shk-videos__tab comment above. Without
 * it, a global Elementor Kit button rule turns this circular X into an
 * orange 20px-radius pill sized to the button's own 36x36 box. */
.shk-videos-modal__close.shk-videos-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	/* This was missing, which was a real (non-Elementor) bug: the theme's
	 * own default button padding (8px 16px) was inherited unopposed,
	 * leaving only 36-16-16=4px of content width for the 20px X icon —
	 * squeezing it down to an unrecognizable 4px-wide sliver. Every other
	 * button rule in this file sets padding:0 explicitly; this one didn't. */
	padding: 0;
	appearance: none;
	background: var(--shk-modal-close-bg, rgba(0, 0, 0, 0.55));
	border: 0;
	border-radius: 50%;
	color: var(--shk-modal-close-color, var(--color-accent, #f28c28));
	cursor: pointer;
}
/* Deliberately no hover/focus color change — the X stays the accent color
 * and the circle stays the same dark backdrop in every state. This still
 * has to be reasserted on :hover/:focus/:focus-visible (not left to the
 * base rule alone), because those are exactly the states where the
 * Elementor Kit "button" rule this file defends against would otherwise
 * win: :focus (not just :focus-visible) matters because this button is
 * auto-focused the instant the dialog opens via a mouse click, which
 * matches :focus but not :focus-visible in Chrome. See the tab comment
 * further up for the general explanation of the doubled-class approach. */
.shk-videos-modal__close.shk-videos-modal__close:hover,
.shk-videos-modal__close.shk-videos-modal__close:focus,
.shk-videos-modal__close.shk-videos-modal__close:focus-visible {
	background-color: var(--shk-modal-close-bg, rgba(0, 0, 0, 0.55));
	color: var(--shk-modal-close-color, var(--color-accent, #f28c28));
	/* The Elementor Kit rule sets its own border-radius on :hover/:focus
	 * too, not just on the base state — so border-radius has to be
	 * reasserted here as well, or a focused/hovered circle would keep
	 * losing just this one property back to a 20px pill corner even
	 * though background-color and color above are correctly protected. */
	border-radius: 50%;
}
/* Outline is a keyboard-focus affordance, not a "hover effect" — it only
 * ever shows for :focus-visible (real keyboard focus), never for the
 * mouse-click auto-focus above, so it's kept for accessibility. The
 * explicit :focus reset is the Safari-native-ring gap described on the
 * tab and card rules above — this button is auto-focused on every open
 * (a :focus match in every browser), so it's the most likely of the
 * three to actually show Safari's ring in practice. */
.shk-videos-modal__close.shk-videos-modal__close:focus {
	outline: none;
}
.shk-videos-modal__close.shk-videos-modal__close:focus-visible {
	outline: 2px solid var(--color-accent, #f28c28);
	outline-offset: 2px;
}
.shk-videos-modal__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	/* The dialog itself is overflow:visible (so the close button can hang
	 * outside its bounds — see the comment on .shk-videos-modal above),
	 * which means ITS border-radius never actually clips the video. Round
	 * and clip the frame itself instead, so the video's corners match. */
	border-radius: var(--shk-modal-radius);
	overflow: hidden;
}
.shk-videos-modal__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}