/*
Theme Name: Bricks Child
Theme URI: https://bricksbuilder.io/
Template: bricks
Author: Bricks
Author URI: https://bricksbuilder.io/
Description: Visual website builder for WordPress.
Version: 2.2.1771956537
Updated: 2026-02-24 18:08:57
*/


/* ============================================================
   TABLE OF CONTENTS
   ============================================================
   1.  CSS CUSTOM PROPERTIES (Root Variables & Responsive VW)
   2.  COMPONENTS
       2.1  Header & Navigation
       2.2  Footer
       2.3  Buttons
       2.4  Pagination
       2.5  Carousel / Splide
       2.6  Cards — Portrait Card
       2.7  Cards — Landscape Card
		--	Program _ card
       2.8  Category Links
       2.9  Gradient Line
       2.10 Season Navigation Dropdown
	   2.11 Editors Picks Posts
		2.12 Search Input
		2.13 Archive Pages
   3.  FEATURES
       3.1  Hero Slider (Home — #brxe-hnwcws)
       3.2  Hero Slider (Program Template — #brxe-txikdt)
       3.3  Sub-Slider
       3.4  Latest News Section (Home)
       3.5  Programs Feature
       3.6  Episode Feature
       3.7  News Feature
		3.7  Sport Feature
		3.8 Archive Page (programs, news, sports, mixed content)
   ============================================================ */


/* ============================================================
   1. CSS CUSTOM PROPERTIES
   Root Variables & Responsive Viewport Width Helpers
   ============================================================ */

:root {
    --sh-vw: 1px;
    --sh-vw-full: 100vw/320;
	--subslider-item-spring-easing: linear(
		0, 0.007, 0.026, 0.059 4.5%, 0.106 6.3%, 0.209 9.5%, 0.558 19.3%, 0.658,
		0.742, 0.812, 0.87, 0.918, 0.957, 0.986 41.6%, 1.007 45.3%, 1.021 49.4%,
		1.027 54% 60.9%, 1.007 83.2%, 1
	);
	--subslider-item-spring-duration: 0.833s;
}

/* Responsive --sh-vw breakpoints */
@media (min-width: 768px) {
    :root { --sh-vw: 100vw/768; }
}
@media (min-width: 1024px) {
    :root { --sh-vw: 100vw/1024; }
}
@media (min-width: 1280px) {
    :root { --sh-vw: 1px; }
}
@media (min-width: 1440px) {
    :root { --sh-vw: 100vw/1440; }
}

/* Responsive --sh-vw-full breakpoints */
@media (min-width: 768px) {
    :root { --sh-vw-full: 100vw/768; }
}
@media (min-width: 1024px) {
    :root { --sh-vw-full: 100vw/1024; }
}
@media (min-width: 1280px) {
    :root { --sh-vw-full: 100vw/1280; }
}
@media (min-width: 1440px) {
    :root { --sh-vw-full: 100vw/1440; }
}

figcaption {
	opacity: 0;
}


/* ============================================================
   2. COMPONENTS
   Reusable UI elements shared across multiple features/pages
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   2.0 	AlsouriyaForm
   ──────────────────────────────────────────────────────────── */
.alsouriya-form {
	box-shadow: 0px 8px 10px -6px rgba(0, 0, 0, 0.5), 0px 20px 25px -5px rgba(0, 0, 0, 0.5);
}

.alsouriya-form label {
	font-size: 1.8rem;
}

.alsouriya-form div.label span,
.alsouriya-form label span {
	background: linear-gradient(319.58deg, #484AFF -232.26%, #7500EE -17.1%, #B133B3 92.76%, #ED5CEF 225.52%);
	 -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* for better compatibility */
  background-clip: text;
  color: transparent;
	
	font-size: 2rem;
}

.alsouriya-form div.label,
.alsouriya-form label {
	margin-bottom: 1.6rem;
}

.alsouriya-form .options-wrapper input,
.alsouriya-form .options-wrapper label {
	margin:0;
}

.alsouriya-form .options-wrapper {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.alsouriya-form div.label {
	font-size: 1.8rem;
}

.alsouriya-form .options-wrapper li {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 1.45rem 1.8rem;
    background-color: rgba(19, 19, 20, 1);
    border: 1px solid rgba(193, 182, 214, 0.2);
    border-radius: 4px;
	align-items: center;
}

.alsouriya-form .options-wrapper li label {
	color: rgba(178, 177, 178, 1);
	font-size: 1.6rem !important;
	font-weight: 700;
}

.alsouriya-form .options-wrapper li:has(input[type="radio"]:checked) {
	border-color: rgba(117, 0, 238, 1);
	background-color: rgba(32, 16, 65, 1);
}

input[type="radio"] {
  appearance: none; /* remove default style */
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(193, 182, 214, 1);
  cursor: pointer;
  position: relative;
}

/* checked state */
/* inner dot */
input[type="radio"]::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(182.85deg, #484AFF -30.1%, #7500EE 20.01%, #7500EE 112.67%);
	outline: 3px solid var(--alsouria-secondary);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: 0.2s ease;
}

input[type="radio"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

.alsouriya-form .form-group.file label.choose-files {
  position: relative;
  background-color: rgba(19, 19, 20, 1);
  display: block;
  width: 100%;
  height: 136px;
		border-radius: 12px;
	border: 2px dashed rgba(193, 182, 214, 0.2);
}

.alsouriya-form .form-group.file label span {
	font-weight: 400;
	font-size: 12px;
	background: rgba(255, 255, 255, 0.6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.alsouriya-form .form-group.file label.choose-files::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: url("https://alsouriya.loop-media.co/wp-content/uploads/2026/04/svg_no_border.svg") no-repeat center;
  background-size: 100% 100%;
	
}

#brxe-qbxxni .form-group input:not([type="radio"]),
#brxe-qbxxni .form-group textarea {
	background-color: rgba(19, 19, 20, 1);
	border: 1px solid rgba(193, 182, 214, 0.2);
	border-radius: 4px;
}

#brxe-qbxxni button[type="submit"] {
	background: linear-gradient(182.85deg, #484AFF -30.1%, #7500EE 20.01%, #7500EE 112.67%);
	padding-top: 1.6rem;
	padding-bottom: 2.4rem;
	border-radius: 4px;
}
/* ────────────────────────────────────────────────────────────
   2.0 	POPUP
   ──────────────────────────────────────────────────────────── */
.brx-popup-content {
	background: transparent !important;
}

/* ────────────────────────────────────────────────────────────
   2.12 	Search Input
   ──────────────────────────────────────────────────────────── */

input[type=search]:focus {
    outline: none;
    border-color: var(--alsouria-mein);
    box-shadow: 0 0 0 2px rgba(100, 150, 255, 0.25);
}

/* ────────────────────────────────────────────────────────────
   2.13  Archive Pages
   ──────────────────────────────────────────────────────────── */
.dark-header #brx-header {
	background-color: var(--footer-bg) !important;
}

.dark-text {
	color: var(--black-900);
}

.space-top main {
	padding-top: 8rem;
}


/* ────────────────────────────────────────────────────────────
   2.1  Header & Navigation
   ──────────────────────────────────────────────────────────── */

/* Smooth color transition on nav links */
.header__nav-menu ul li a {
	transition: color var(--color-change-time), background var(--color-change-time);
}

/* Active / hover / focus state for nav links */
.header__nav-menu ul li a:hover,
.header__nav-menu ul li a:focus,
.header__nav-menu ul li a:active {
	color: var(--white) !important;
}

.brx-submenu-toggle button {
	margin-right: 0.8rem;
}

.sub-menu {
	left: 50%;
	transform: translatex(-50%);
	  box-shadow:
    	-4px 4px 8px 0px rgba(0, 0, 0, 0.25),
     	4px -4px 8px 0px rgba(0, 0, 0, 0.25);
}

#brxe-dba87d .bricks-nav-menu .sub-menu > li:first-child::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    top: 0;
    left: 0;
	background-image: linear-gradient(90deg, rgba(75, 24, 155, 0.1792) 0%, rgba(193, 182, 214, 0.56) 49.99%, rgba(32, 16, 65, 0.1792) 100%);
}

.bricks-nav-menu .sub-menu > li > a:hover {
	color: var(--alsouria-mein-50) !important;
	background-color: var(--strok-card);
}

header#brx-header > .brxe-container {
	backdrop-filter: blur(2px);
}


/* ────────────────────────────────────────────────────────────
   2.2  Footer
   ──────────────────────────────────────────────────────────── */

/* Wrap and center footer menu items */
.footer__menus .bricks-nav-menu {
	flex-wrap: wrap;
	justify-content: center;
}

/* Position the gradient line inside the footer form */
.footer__form .gradient-line {
	position: absolute;
	top: 39px;
	width: 100%;
	left: 0;
}

.footer__form input:focus {
    outline: none;
    border: 1px solid var(--alsouria-mein-50) !important;
    border-radius: 8px;
}

.footer__form button[type="submit"] {
	padding: 0.826rem 2.638rem;
	background: linear-gradient(182.85deg, #484AFF -30.1%, #7500EE 20.01%, #7500EE 112.67%);
	transform: skewx(-8deg);
	border-radius: 6.42px;
	overflow: hidden;
}

.footer__form button[type="submit"] > span {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--white);
	transform: skewx(8deg);
}

.footer__form button[type="submit"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--alsouria-mein);
  opacity: 0;
  transition: opacity var(--global-transition-time);
	z-index: -1;
}

.footer__form button[type="submit"]:hover::after {
	opacity: 1;
}

.footer__fast-links-column .footer__fast-links-block {
	column-gap: 9.6rem !important;
}

.footer__fast-links-column .footer__fast-links-block > a,
.footer__fast-links-column .footer__fast-links-block > span {
	white-space: nowrap;
	text-overflow: ellipsis;
	min-width: 0;
	transition: color var(--color-change-time); 
}

.footer__fast-links-column .footer__fast-links-block > a:hover,
.footer__fast-links-column .footer__fast-links-block > span:hover {
	color: var(--alsouria-mein-50);
}

.footer__fast-links-column .footer__fast-links-block > a[aria-current="page"] {
	color: var(--alsouria-mein-50);
}

.footer__social-media-icon p {
	display: flex;
	align-items: center;
	justify-content: center;
	transform: skewX(8deg);
}

/* ────────────────────────────────────────────────────────────
   2.3  Buttons
   ──────────────────────────────────────────────────────────── */

.brx-submenu-toggle.icon-right button {
	margin-left: 0 !important;
}

/* Ensure button paragraph content uses flex alignment */
.alsouriya-btn p {
	display: flex;
	align-items: center;
}

.main-btn {
	position: relative;
	overflow: hidden;
	transition: all var(--global-transition-time);
}

.main-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--alsouria-mein);
  opacity: 0;
  transition: opacity var(--global-transition-time);
	z-index: -1;
}

.main-btn:hover::after {
  opacity: 1;
}

.details-btn,
.share-btn,
.watch-btn {
	transition: border-color var(--color-change-time);
	box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.12), 0px 1px 4px 0px rgba(255, 255, 255, 0.3) inset;
}

.details-btn:hover,
.share-btn:hover,
.watch-btn:hover {
	border-color: var(--white) !important;
}

.details-btn.share-btn svg {
	transform: translate(-50%, -50%) skewx(8deg) !important;
}

.details-btn svg {
	transform: skewx(8deg) !important;
}

.share-btn svg,
.watch-btn svg {
	transform: translate(-50%, -50%) skewx(5deg) !important;
	top: 50%;
	left: 50%;
}

.share-btn .share-btn__share-links-btn svg {
	position: absolute;
	transform:  translate(-50%, -50%) skewx(3deg) !important;
}

.share-btn .share-btn__share-links {
    opacity: 0;
    transform: translateY(-90%);
    pointer-events: none;

    transition: opacity var(--global-transition-time), transform var(--global-transition-time);
}

.share-btn .share-btn__share-links.active {
    opacity: 1;
    transform: translateY(-100%);
    pointer-events: auto;
}

/* ────────────────────────────────────────────────────────────
   2.4  Pagination
   ──────────────────────────────────────────────────────────── */

/* Container: display items in a row */
.alsouria-pagination ul {
	display: flex;
	align-items: center;
}

/* Base style for each pagination item */
.alsouria-pagination li {
	transform: skewX(-6deg);
	height: 28.41px;
	width: 37.83px;
	background: rgba(255, 255, 255, 1);
	border-radius: 5.36px;
	font-size: 1.4rem;
	font-weight: 700;
	border: 1px solid transparent;
	transition: all var(--color-change-time);
	color: rgba(11, 1, 21, 1);
}

/* Next / Prev buttons — no skew, slightly larger */
.alsouria-pagination li:has(a.next, a.prev) {
	transform: skewX(0);
	height: 31px !important;
	width: 31px !important;
	color: rgba(11, 1, 21, 1) !important;
	background: rgba(255, 255, 255, 1);
}

/* Hover effect on regular page numbers only */
.alsouria-pagination li:not(:has(a.next, a.prev, span.current)):hover {
	background: rgba(178, 177, 178, 1) !important;
	border-color: transparent !important;
}

/* Counter-skew the inner link/span so text stays straight */
.alsouria-pagination li > a,
.alsouria-pagination li > span {
	transform: skewX(6deg);
}

/* Active / current page gets gradient highlight */
.alsouria-pagination li:has(span.current),
.alsouria-pagination li:has(a.current) {
	background: linear-gradient(182.85deg, #484AFF -30.1%, #7500EE 20.01%, #7500EE 112.67%);
	border-color: rgba(193, 182, 214, 0.32) !important;
	color: rgba(255, 255, 255, 1);
}

/* Show the prev button even when it has no href (disabled state) */
a.page-numbers.prev:not([href]),
span.page-numbers.prev {
    display: inline-flex !important;
    pointer-events: none;
    opacity: 0.5;
}


/* ────────────────────────────────────────────────────────────
   2.5  Carousel / Splide
   Show slides slightly outside the track for peek effect
   ──────────────────────────────────────────────────────────── */
.carousell-container,
.splide__track {
    overflow: visible !important;
    overflow-x: clip !important;
}

/* Carousel controls fade in on container hover */
.carousell-controles {
	opacity: 0;
	transition: opacity var(--global-transition-time);
	will-change: transform;
}

.carousell-container:hover .carousell-controles {
	opacity: 1;
}

/* ────────────────────────────────────────────────────────────
   2.6  Cards — Episode Card
   ──────────────────────────────────────────────────────────── */

.episode-card {
	transition: transform var(--global-transition-time);
}

.episode-card:hover {
	transform: scale(1.0566, 1.0672);
	z-index: 100;
}


/* ────────────────────────────────────────────────────────────
   2.6  Cards — Portrait Card
   ──────────────────────────────────────────────────────────── */

/* make first slid item origin right  */
.portrait-card.is-active .portrait-card__image,
.portrait-card.is-active .portrait-card__heading {
	transform-origin: right;
}

/* Slight scale on hover */
.portrait-card .portrait-card__image {
	transition: transform var(--global-transition-time);
}

@media (min-width: 477px) {
	.portrait-card.brxe-block:hover .portrait-card__image {
		transform: scale(1.1554, 1.1488);
		z-index: 101;
	}
}

/* Reveal card content overlay on hover */
.portrait-card .portrait-card__content {
	transition: opacity var(--global-transition-time);
	opacity: 0;
	will-change: opacity;
}

.portrait-card:hover .portrait-card__content {
	opacity: 1;
}

/* Heading color change on hover */
.portrait-card .portrait-card__heading {
	transition: color var(--color-change-time), transform var(--global-transition-time);
}

@media (min-width: 477px) {
	.portrait-card:hover .portrait-card__heading {
		color: var(--alsouria-mein-50) !important;
		transform: translatey(25px);
	}
}

@media (min-width: 477px) {
	.portrait-card.is-active:hover .portrait-card__heading {
		transform: translatey(25px) translateX(-15px);
	}
}
/* Icon sizing for archive portrait cards using responsive vw unit */
.archive-portrait-card .share-icon,
.archive-portrait-card .watch-icon {
	width: calc(44.90243911743164 * var(--sh-vw));
	height: calc(40.69283676147461 * var(--sh-vw));
}

/* Smaller font for category labels in archive portrait cards */
.archive-portrait-card .category-link p {
	font-size: 12.83px;
}


/* ────────────────────────────────────────────────────────────
   2.7  Cards — Landscape Card
   ──────────────────────────────────────────────────────────── */

/* Reveal landscape card content overlay on hover */

.landscape-card .landscape-card__image-wrapper {
	transition: transform var(--global-transition-time);
}

@media (min-width: 477px) {
	.landscape-card:hover .landscape-card__image-wrapper {
		transform: scale(1.132075, 1.103068);
		z-index: 5;
	}
}

.landscape-card .landscape-card__hover-content {
	transition: opacity var(--global-transition-time);
	will-change: opacity;
	opacity: 0;
}

.landscape-card:hover .landscape-card__hover-content {
	opacity: 1;
}

.landscape-card .landscape-card__heading {
	transition: color var(--color-change-time);
}

.landscape-card:hover .landscape-card__heading {
	color: var(--alsouria-mein-50) !important;
}

/* ────────────────────────────────────────────────────────────
   2.7  Cards — Program Card
   ──────────────────────────────────────────────────────────── */
.program-card__content {
	 transition: transform 0.3s ease;
}

@media (min-width: 477px) {
	.program-card__content:hover {
		transform: scale(1.155);
		z-index: 100;
	}
}

.program-card__desc {
	max-height: 0;
  overflow: hidden;
  opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

@media (min-width: 477px) {
	.program-card__content:hover .program-card__desc {
		opacity: 1;
		max-height: 300px;
		padding-top: 1.6rem !important;
		padding-bottom: 1.6rem !important;
	}
}

.program-card__heading {
	transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (min-width: 477px) {
	.program-card__content:hover + .program-card__heading {
		transform: translateY(0) !important;
		opacity: 0 !important;
	}
}

.program-section__programs-slider .programs-card.is-active .program-card__content {
	transform-origin: right;
}

.program-section__programs-slider .programs-card.is-active + .program-card__heading {
	transform-origin: right;
}


/* ────────────────────────────────────────────────────────────
   2.8  Category Links
   (shared across cards, post templates, etc.)
   ──────────────────────────────────────────────────────────── */

/* No standalone rules here yet — category link overrides
   are co-located with each card/feature that needs them. */


/* ────────────────────────────────────────────────────────────
   2.9  Gradient Line
   Decorative horizontal divider used in multiple sections
   ──────────────────────────────────────────────────────────── */

/* No standalone base rules — gradient-line behavior is
   defined per-feature where it is contextually used. */


/* ────────────────────────────────────────────────────────────
   2.10  Season Navigation Dropdown
   Reusable dropdown used on program & season pages
   ──────────────────────────────────────────────────────────── */

/* Wrapper */
.season-nav {
  position: relative;
  width: 100%;
}

/* Trigger button — shows currently selected season */
.season-current {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.8rem;
  background: var(--dark-bg);
  color: #FFFFFF99;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
}

/* Chevron icon inside the trigger */
.season-current .chevron {
  color: #FFFFFF99;
  font-size: 1.4rem;
  transition: transform 0.2s;
}

/* Rotate chevron when dropdown is open */
.season-current.open .chevron {
  transform: rotate(180deg);
}

/* Dropdown menu — hidden by default, shown with .open class */
.season-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  background: var(--dark-bg);
  border-radius: 4px;
  padding: 0.8rem 0;
  font-size: 1.4rem;
  gap: 0.8rem;
}

.season-menu.open {
  display: flex;
}

/* Individual season option links */
.season-option {
  display: block;
  padding: 0.4rem 0;
  text-align: center;
  color: #FFFFFF99;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.season-option:hover {
  background: var(--footer-bg);
}

/* ────────────────────────────────────────────────────────────
   2.11  Editor Picks Posts
   ──────────────────────────────────────────────────────────── */
.editor-picks-posts .editor-picks-posts__post-item:first-child	 {
	display: grid;
    grid-template-columns: calc(153 * var(--sh-vw)) 1fr;
    column-gap: 0.8rem;
}

.editor-picks-posts .editor-picks-posts__post-item:last-child .horizontal-line {
	display: none;
}

.editor-picks-posts .editor-picks-posts__post-item:last-child .brxe-post-title {
	margin-bottom: 0 !important;
}

/* ============================================================
   3. FEATURES
   Styles scoped to specific site features / sections
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   3.1  Hero Slider — Home Page (#brxe-hnwcws)
   ──────────────────────────────────────────────────────────── */

/* Animate slider content opacity and scale */
#brxe-hnwcws .slider-content {
  transition: opacity var(--global-transition-time), transform var(--global-transition-time);
  transform-origin: top right;
}

/* Animate background gradient overlay */
#brxe-hnwcws .slider__gradient-bg {
	transition: opacity var(--global-transition-time);
}

/* Restore content when user hovers while video plays */
#brxe-hnwcws .slider-content:hover {
	opacity: 1 !important;
  transform: scale(1) !important;
}

/* Dim content while a video is playing */
#brxe-hnwcws.is-video-playing .slider-content {
  opacity: 0.3;
  transform: scale(0.9);
}

/* Darken gradient overlay while video plays */
#brxe-hnwcws.is-video-playing .slider__gradient-bg {
	opacity: 0.8;
}

/* Hide YouTube end-screen overlay */
#brxe-hnwcws .ytp-pause-overlay {
	display: none !important;
}

/* Mute button — hidden until video starts playing */
.hero__mute-btn {
	opacity: 0;
	transition: all var(--global-transition-time);
	backdrop-filter: blur(7.291879653930664px);
}

.hero__mute-btn:hover {
	border-color: var(--white) !important;
}

/* Show mute button only when video is active */
.hero-section:has(#brxe-hnwcws.is-video-playing) .hero__mute-btn {
  opacity: 1;
  pointer-events: auto;
}


/* ────────────────────────────────────────────────────────────
   3.2  Hero Slider — Program Template (#brxe-txikdt)
   Same behaviour as the home hero but scoped to the program page
   ──────────────────────────────────────────────────────────── */

/* Animate slider content */
#brxe-txikdt .slider-content {
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform-origin: top right;
}

/* Animate gradient overlay */
#brxe-txikdt .slider__gradient-bg {
	transition: opacity var(--global-transition-time);
}

/* Restore content on hover during video playback */
#brxe-txikdt .slider-content:hover {
	opacity: 1 !important;
  transform: scale(1) !important;
}

/* Dim content while video plays */
#brxe-txikdt.is-video-playing .slider-content {
  opacity: 0.3;
  transform: scale(0.9);
}

/* Darken gradient overlay while video plays */
#brxe-txikdt.is-video-playing .slider__gradient-bg {
	opacity: 0.8;
}

/* Show mute button during video playback */
#brxe-txikdt.is-video-playing .hero__mute-btn {
  opacity: 1;
  pointer-events: auto;
}


/* ────────────────────────────────────────────────────────────
   3.3  Sub-Slider
   Thumbnail strip below the hero slider
   ──────────────────────────────────────────────────────────── */

/* Dim sub-slider while main hero video is playing */
.subslider {
  transition: opacity var(--global-transition-time);
}

.subslider.is-video-playing {
  opacity: 0.3;
}

/* Restore opacity when user hovers over the sub-slider */
.subslider.is-video-playing:hover {
  opacity: 1;
}

/* Spring-easing scale animation for sub-slider items */
.subslider-item {
	transition: transform var(--subslider-item-spring-duration) var(--subslider-item-spring-easing);
}

/* Animate the item heading background and text color */
.subslider-item .subslider-item__heading {
  transition: color var(--color-change-time), background var(--color-change-time);
}

/* Active and hover state for sub-slider item heading */
.subslider-item:hover .subslider-item__heading,
.subslider-item.is-active .subslider-item__heading {
  background-color: rgba(193, 182, 214, 0.88) !important;
  color: var(--black-900) !important;
}

/* Scale up and skew on hover for a dynamic feel */
.subslider-item:hover {
	transform: scale(1.1) skewX(-5deg) !important;
}

/* Placeholder for any additional active-state styles */
.subslider-item.is-active {
  /* active styles */
}


/* ────────────────────────────────────────────────────────────
   3.4  Latest News Section — Home Page
   ──────────────────────────────────────────────────────────── */

/* Heading color changes on news item hover */
.news-item__heading {
	transition: color var(--global-transition-time);
}

.news-item figure:before {
	z-index: 1;
}

.news-item {
	transition: transform var(--global-transition-time);
}

.news-item:hover {
	transform: scale(1.1355, 1.1816);
	z-index: 100;
}

.news-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}

.news-item:hover {
	transform: scale(1.05);
	z-index: 10;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}


.news-item:hover .news-item__heading {
	color: var(--alsouria-mein-50) !important;
}

/* Absolute-position the category badge inside the news item */
.news-item .category-link {
	position: absolute;
	right: 19px;
	top: 16.34px;
}

/* First news item spans two rows in the grid */
.news-grid .news-item:first-child {
	grid-row: 1 / 3 !important;
}

/* Larger heading for the featured (first) news item */
.news-grid .news-item:first-child .news-item__heading {
	font-size: 2.4rem;
	padding-left: 3.2rem;
	padding-right: 3.2rem;
	padding-bottom: 3.175rem;
}

/* Adjust category badge position for the featured item */
.news-grid .news-item:first-child .category-link {
	top: 24px;
	right: 24px;
}


/* ────────────────────────────────────────────────────────────
   3.5  Programs Feature
   Covers program archive, season navigation, and episode grid
   ──────────────────────────────────────────────────────────── */

/* Force dark header on the program archive page */
.post-type-archive-program #brx-header {
	background-color: var(--footer-bg) !important;
}

/* Season tab buttons — active state */
.season-btn.active {
	color: var(--white) !important;
	background-color: var(--alsouria-bg-category);
}

/* Gradient line inside season details accordion — hidden by default */
.season-details-secion .gradient-line {
	opacity: 0;
	margin-bottom: 1.6rem !important;
}

/* Show gradient line when the accordion is open */
.season-details-secion .brx-open .gradient-line {
	opacity: 1;
}

/* Grid layout for episodes within a season */
.season-details-secion .season-details-section__episode-grid {
	row-gap: 4.8rem;
	column-gap: 1.6rem;
}

/* Episode card watch/share icons — hidden until hover */
@media (min-width: 477px) {
	.episode-card .watch-btn,
	.episode-card .share-btn {
		transition: opacity var(--global-transition-time);
		opacity: 0;
	}
}

/* Center the watch icon over the card thumbnail */
@media (min-width: 477px) {
	.episode-video {
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		border:0;
		height: 100%;
		width: 100%;
		object-fit: contain;
	}
}

@media (max-width: 477px) {
	.episode-video {
		border:0;
		width: 100%;
		height: 250px;
	}
}


.episode-card .watch-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) skewX(-5deg);
	z-index: 3;
}

/* Reveal icons on episode card hover */
@media (min-width: 477px) {
	.episode-card:hover .watch-btn,
	.episode-card:hover .share-btn {
		opacity: 1;
	}
}

/* ────────────────────────────────────────────────────────────
   3.6  Episode Feature
   Styles for the single episode / video player page
   ──────────────────────────────────────────────────────────── */

/* Highlight active or hovered video card in the sidebar */
.episdoe_video-card:hover,
.episdoe_video-card.active {
	background-color: var(--dark-bg) !important;
}

/* Compact duration badge on video thumbnails */
.episdoe_video-card .video-duration {
	padding: 2px 4px !important;
	right: 8px;
	top: 8px;
	gap: 4px !important;
}

/* Small icon inside duration badge */
.episdoe_video-card .video-duration img {
	width: 12px !important;
	height: 12px !important;
}

/* Small font for duration text */
.episdoe_video-card .video-duration div {
	font-size: 1rem !important;
}

/* Sidebar scroll behavior — always scrollable vertically */
.videos-sidebar {
  overflow-x: hidden;
  overflow-y: scroll;
}

/* Thin custom scrollbar — Chrome, Edge, Safari */
.videos-sidebar::-webkit-scrollbar {
  width: 6px;
}

.videos-sidebar::-webkit-scrollbar-track {
  background: rgb(19, 19, 20);
  border-radius: 3px;
}

.videos-sidebar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 3px;
}

.videos-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

/* Thin custom scrollbar — Firefox */
.videos-sidebar {
  scrollbar-width: thin;
  scrollbar-color: #888 rgb(19, 19, 20);
}


/* ────────────────────────────────────────────────────────────
   3.7  News Feature
   Covers the news archive page and single post template
   ──────────────────────────────────────────────────────────── */

/* ── News Archive Page ── */

/* Default text color for the news page */
.news-page {
	color: var(--black-900);
}

/* Dark header on news archive pages */
.news-page #brx-header {
	background-color: var(--footer-bg) !important;
}

/* Separator after the first item in the second hero column */
.news-archive-hero-container .news-archive-hero-col-2 .news-archive-hero-news-item:first-child {
	padding-bottom: 2.4rem;
	border-bottom: 1px solid var(--strok-card);
	margin-bottom: 2.4rem;
}

/* Separator between items in the third hero column */
.news-archive-hero-container .news-archive-hero-col-3 .news-archive-hero-news-item:not(:last-child) {
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--strok-card);
	margin-bottom: 1.6rem;
}

.news-archive-hero-container .news-archive-hero-col-3 .news-archive-hero-news-item:last-child:has(.news-archive-hero-col-3__post-image-wrapper) {
	display: grid;
	grid-template-columns: calc(153 * var(--sh-vw)) 1fr;
	column-gap: 0.8rem;
} 
.news-archive-hero-container .news-archive-hero-col-3 .news-archive-hero-news-item:last-child:has(.news-archive-hero-col-3__post-image-wrapper) .news-archive-hero-col-3__post-image-wrapper {
	margin-bottom: 0;
}
.news-archive-hero-container .news-archive-hero-col-3 .news-archive-hero-news-item:last-child:has(.news-archive-hero-col-3__post-image-wrapper) .post-publish-date {
	grid-column: 2;
}
.news-archive-hero-container .news-archive-hero-col-3 .news-archive-hero-news-item:last-child:has(.news-archive-hero-col-3__post-image-wrapper) .brxe-post-title {
	font-size: 1.6rem;
}

/* Local news section — archive page link text color */
.news-archive-template__local-news-section .archive-page-link p {
	color: var(--black) !important;
}

/* Hide the horizontal line after the last post in the second column */
.news-archive-template__local-news-posts-second-column article:last-child .horizontal-line {
	display: none;
}

.news-archive-template__local-news-posts-second-column .news-archive-template__local-news-posts-second-column__post-item:nth-child(1) .news-archive-template__local-news-posts-second-column__post-item__heading,
.news-archive-template__local-news-posts-second-column .news-archive-template__local-news-posts-second-column__post-item:nth-child(2) .news-archive-template__local-news-posts-second-column__post-item__heading{
	font-size: 1.8rem !important;
}

/* First two world news items get full-width column layout */
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(1),
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(2) {
	margin-bottom: 0.8rem;
	padding: 0 !important;
}

/* Stack image and text vertically for first two world news items */
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(1) .news-archive-template__world-news-post-item__link,
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(2) .news-archive-template__world-news-post-item__link {
	flex-direction: column !important;
	align-items: start !important;
}

/* Full-width image for the featured world news items */
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(1) .news-archive-template__world-news-post-item__image,
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(2) .news-archive-template__world-news-post-item__image {
	flex-basis: auto !important;
	margin-bottom: 1.6rem !important;
}

/* Larger title for the featured world news items */
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(1) .news-archive-template__world-news-post-item__title,
.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:nth-child(2) .news-archive-template__world-news-post-item__title {
	font-size: 2.4rem !important;
}

.opinions-issues .opinions-issues__post-item:last-child .horizontal-line {
	display: none;
}

/* ── Single Post Template ── */

.mobile-share-links .post-page__social-media-icon p,
.post-page__social-media-icons .post-page__social-media-icon p {
	display: flex;
	align-items: center;
	justify-content: center;
	transform: skewX(5deg);
}


/* Default text color on post pages */
.post-template-default {
	color: var(--black-900);
}

/* Dark header on single post pages */
.post-template-default #brx-header {
	background-color: var(--footer-bg) !important;
}

/* Post heading layout — centered with spacing */
.post-template__heading {
	row-gap: 1.6rem !important;
	align-items: center !important;
}

.post-template__heading .category-link {
	text-align: center;
}

/* Typography controls label text */
.post-template__typography-controlls p {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--natural-500);
}

/* Larger font-size character inside typography controls */
.post-template__typography-controlls p span {
	font-size: 2.4rem;
	margin-left: 0.4rem;
}

/* Animated color change for post tag links */
.post-template__post-tags a {
	transition: color var(--global-transition-time);
}

.post-template__post-tags a:hover {
	color: var(--alsouria-mein);
}

/* ────────────────────────────────────────────────────────────
   3.8  Sport Feature
   Covers the Sport related comtent
   ──────────────────────────────────────────────────────────── */
.page-id-3493 #brx-header,
.category  #brx-header,
.tax-program_category #brx-header,
.post-type-archive-media #brx-header{
	background-color: var(--footer-bg) !important;
}

.sport-slider .sport-card.is-active .landscape-card__image-wrapper  {
	transform-origin: right;
}

.sport-slider .sport-card {
	width: calc(318 * var(--sh-vw)) !important;
}

/* ────────────────────────────────────────────────────────────
   3.8  Mix Content Feature
   Covers the Mixed Content related comtent
   ──────────────────────────────────────────────────────────── */
.mixed-content-sliter .mixed-card  {
	width: calc(436 * var(--sh-vw)) !important;
}

.mixed-content-sliter .mixed-card.is-active .landscape-card__image-wrapper {
	transform-origin: right;
}

/* ────────────────────────────────────────────────────────────
   3.9  parliament content Feature
   ──────────────────────────────────────────────────────────── */

.parliament-content {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.parliament-content.visible {
  opacity: 1;
  transform: translateY(-3rem);
  pointer-events: all;
}

.parliament-content.hidden {
  display: none;
}

/* ────────────────────────────────────────────────────────────
   3.10  Archive Page (programs, news, sports, mixed content)
   ──────────────────────────────────────────────────────────── */

.program-archive-link-item .gradient-line {
	margin: 0;
	opacity: 0;
}

/* Show gradient line for the currently active archive link */
.program-archive-link-item[aria-current="page"] .gradient-line {
	opacity: 1;
}

/* Highlight text of the current archive link */
.program-archive-link-item[aria-current="page"] p {
	color: var(--white) !important;
}

.archive-page__header-links .archive-page__link-item .gradient-line {
	margin: 0;
	opacity: 0;
}

.archive-page__header-links .archive-page__link-item.active .gradient-line {
	opacity: 1;
}

.archive-page__header-links .archive-page__link-item.active p {
	color: var(--white) !important;
}

/* ────────────────────────────────────────────────────────────
   3.10  Media
   ──────────────────────────────────────────────────────────── */
.media__control-btns .media__control-btn:not(.active) {
    opacity: 0.5;
    pointer-events: auto;
}

#brxe-razzlw,
#brxe-razzlw * {
  font-family: 'Almarai', sans-serif !important;
}

.mobileMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	transform: translateX(-100%);
  overflow-y: scroll; /* scroll instead of auto — forces scrollability */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain; /* prevents scroll chaining to body */
	transition: transform 0.3s ease;
}

.mobileMenu.is-open {
  transform: translateX(0);
}

/* IF SCREEN BIGGER THEN 477 */
@media (min-width: 477px) {
	.splide__pagination {
		display: none;
	}
	
	#brx-footer .subscribe-form {
		padding-top: 5.1rem;
	}
}

@media (max-width: 477px) {
	.details-btn {
		zoom: 0.85;
	}
	
	#brxe-hnwcws.is-video-playing .slider-content {
	  opacity: 1;
	  transform: scale(1);
	}
	
	.news-grid .news-item:not(:first-child) {
		display: none;
	}

	.news-grid .news-item:first-child .news-item__heading {
		font-size: 1.8rem !important;
	}
	
	#brxe-hnwcws .splide__pagination .splide__pagination__page {
		transform: skewX(-5deg);
	}
	
	#brxe-hrldgb {
		overflow-x: scroll;
	}
	
	.mobile-opinion-issue-container {
		overflow-x: scroll;
	}
	
	.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:not(:nth-child(1)):not(:nth-child(2)) a,
	.news-archive-template__world-news-posts .news-archive-template__world-news-post-item:not(:nth-child(1)):not(:nth-child(2)) > div{
		display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
	}

	#brxe-hgcudq {
		overflow-x: scroll !important;;
	}

	.brxe-xarnxs p {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	}
}