/* ==========================================================================
   HashimAlRujaib-V1 — Main Stylesheet
   Brand: Hashim Al-Rujaib · Strategic Marketing Consultant
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
	/* Brand Colors */
	--color-army-green: #4b7c59;
	--color-onyx: #151515;
	--color-sand: #c9b89a;
	--color-white: #ffffff;
	--color-charcoal: #2c2d2c;

	/* Derived / Utility Colors */
	--color-army-green-light: #5e9a6f;
	--color-army-green-dark: #3a6146;
	--color-sand-light: #d9cdb5;
	--color-sand-dark: #b0a07e;
	--color-gray-100: #f7f6f2;
	--color-gray-200: #eceae4;
	--color-gray-300: #d4d3cd;
	--color-gray-400: #a8a8a0;
	--color-gray-500: #6b6b65;
	--color-error: #c0392b;
	--color-success: #27ae60;

	/* Typography */
	--font-heading: 'Freight Display', Georgia, serif;
	--font-body: 'Lora', Georgia, serif;
	--font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-arabic: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Font Weights */
	--fw-regular: 400;
	--fw-semibold: 600;
	--fw-bold: 700;
	--fw-heading: 500;

	/* Spacing Scale (8px base) */
	--space-xs: 0.25rem;   /* 4px */
	--space-sm: 0.5rem;    /* 8px */
	--space-md: 1rem;      /* 16px */
	--space-lg: 1.5rem;    /* 24px */
	--space-xl: 2rem;      /* 32px */
	--space-2xl: 2.5rem;   /* 40px */
	--space-3xl: 3rem;     /* 48px */
	--space-4xl: 4rem;     /* 64px */

	/* Layout */
	--max-width: 1280px;
	--container-padding: var(--space-2xl);

	/* Border Radius */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-full: 9999px;

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(21, 21, 21, 0.06);
	--shadow-md: 0 4px 12px rgba(21, 21, 21, 0.08);
	--shadow-lg: 0 8px 24px rgba(21, 21, 21, 0.12);
}

html[dir="rtl"] {
	--font-heading: 'Rubik', Georgia, serif;
	--font-body: 'Rubik', Georgia, serif;
	--font-ui: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-arabic: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


.har-reel-item > iframe {
    min-width: 100% !important;
}

/* ==========================================================================
   HAR Course Player
   Dark-skin cinematic player for the enrolled student view (single-course.php)
   ========================================================================== */

/* ── Video protection: block right-click & selection inside the stage ── */
.har-video-stage {
	user-select: none;
	-webkit-user-select: none;
}

.har-video-protect {
	position: relative;
}

/* Transparent pointer-events overlay to block right-click context menu
   on embedded iframes (browser security prevents JS listeners on iframe). */
.har-video-protect::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Transparent — it sits over the iframe and swallows right-click */
	pointer-events: all;
	/* Does NOT block normal play controls (clicks fall through to iframe via same-origin JS hooks in Plyr) */
	cursor: default;
}

/* Remove the overlay when a native <video> is present so Plyr controls still work */
.har-video-protect:has(video)::after {
	display: none;
}

/* ── Plyr dark skin overrides to match army-green brand ── */
:root {
	--plyr-color-main: #4b7c59;
	--plyr-video-control-color: rgba(255, 255, 255, 0.8);
	--plyr-video-control-color-hover: #ffffff;
	--plyr-video-control-background-hover: rgba(75, 124, 89, 0.8);
	--plyr-control-icon-size: 14px;
	--plyr-font-family: 'Montserrat', -apple-system, sans-serif;
	--plyr-font-size-base: 12px;
	--plyr-video-background: #0d0e0f;
	--plyr-control-radius: 6px;
	--plyr-range-fill-background: #4b7c59;
	--plyr-range-thumb-background: #ffffff;
	--plyr-range-thumb-height: 12px;
	--plyr-range-thumb-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* Make Plyr fill the mount container */
#har-player-mount,
#har-player-mount .plyr,
#har-player-mount .plyr--video {
	width: 100%;
	height: 100%;
}

#har-player-mount .plyr--video .plyr__video-wrapper {
	height: 100%;
}

/*
 * Plyr embed wrapper adds its own padding-top (aspect-ratio trick) for
 * YouTube/Vimeo iframes. Our outer container already sets the height via
 * padding-top:56.25%, so the inner .plyr__video-embed padding doubles the
 * space and pushes the video down, leaving a black gap at the top.
 * Override: remove the inner padding and let the iframe fill 100%.
 */
#har-player-mount .plyr__video-embed {
	padding-top: 0 !important;
	height: 100%;
	position: relative;
}
#har-player-mount .plyr__video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ── Sidebar scrollbar ── */
.har-lesson-sidebar::-webkit-scrollbar {
	width: 4px;
}
.har-lesson-sidebar::-webkit-scrollbar-track {
	background: transparent;
}
.har-lesson-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 2px;
}
.har-lesson-sidebar::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.2);
}

/* ── Suppress print/save keyboard shortcut hints in browsers ── */
@media print {
	.har-course-player {
		display: none !important;
	}
}