/*
Theme Name: AnimeFN theme
Theme URI: https://animefn.com
Description: Theme for AnimeFN
Author: AnimeFN
Author URI: https://animefn.com
Template: galaxis
Version: 1.6.2
*/
@import url(fonts.css);
@import url(https://fonts.googleapis.com/css?family=Noto%20Sans%20Arabic);

/* add an extra bar at the bottom of header like old theme */
.site-header {
	border-bottom: solid #00a2e8 4px;
}

/* change color of read more box */
.more-link{
	background:black;
	float:left;
}



/* Fix the menu inversion mess I have made*/


.menu-toggle {
	left:auto!important;
	right: 18px;
}

#primary-menu li{
	text-align:right;
}

.main-navigation .menu>li {
	padding: 0 .8rem 0 2.5rem;
	margin-left: 0;
}

.primary-menu-container{
	direction:rtl;
}


/*
.top-navigation {
	background: linear-gradient(0deg, #166dd6 0%, #1257ab 100%);
	//display: flex;
	//flex-wrap: wrap;
	justify-content: right;
	//align-items: center;
	//line-height: 1.6em;
}
*/




/* Styles for the new extra 4th top navbar */
.main-navigation>.primary-menu-container{
	direction: rtl;
}

.top-navigation ul {
	color: #fff;
	list-style-type: none;
	margin: 0;
	padding-left: 10px;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: right;
}

.top-navigation li {
	padding: 0px 8px 0px 8px;
}

.top-navigation li  a:hover {
    color: #66ccff;
}
/* style for social menu */

#social-menu>li:hover{
	background:#00a2e8;
	color:white;
	border-radius:4px;
	
}


/* following works in customize css via UI or if we add !important */
#primary-menu >li a:hover{
	background:#00a2e8 !important;
	color:white !important;
	border-radius:4px !important;
	
	
}

#primary-menu >li{
	padding-right:0 !important;
	margin-left:0 !important;
	margin-right:0 !important;
}
.site-menu-content__wrap{
	padding-top:0px !important;
	padding-bottom:0px !important;
}

@media screen and (min-width: 1025px) {
	/*desktop only*/
	.main-navigation .menu {
	padding: 0 !important;
	margin: 0 !important;
}
	
	.main-navigation .menu>li {
		display: inline-block !important;
		padding: 0 !important;
		margin:0 !important;
	}
	.main-navigation .menu>li.menu-item-has-children {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
#primary-menu > li a {
	padding:12px 12px 12px 12px !important;
}
	
[dir="rtl"] .main-navigation .menu>li.menu-item-has-children>a+.menu-arrow-button {
		/*rtl:ignore*/
		right: -1rem !important;
		top:1rem !important;
	}
}


.main-navigation .menu>li.menu-item-has-children>a{
	padding-right:0 !important;
}

.main-navigation .menu>li.menu-item-has-children>a+.menu-arrow-button {
	top: .75rem !important;
	left: .5rem !important;
	right:auto !important;
}


/*******/
.custom-logo-link img{
	min-height:65px !important;
}






/*  */










/* Styles for the widgets */



.wp-block-group__inner-container h2{
	font-family:'NSA',sans-serif;
	/* background:#00a2e8; */
	background:#09adf4;
	padding:.7em;
	color:white;
	text-align:center;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
}

/* PUT THE FOLLOWING BLOCK IN CUSTOM CSS IN WP or add !important*/
.widget_block{
	padding:0!important;
	border:0px!important;
	
	border-top-left-radius:12px!important;
	border-top-right-radius:12px!important;
}

/* use class for all widget content (not for the title): .afn_inner_widget_content */
.wp-block-group__inner-container .afn_inner_widget_content {
	margin: 0;
	
	list-style-position: inside;
	padding:0 1.2em 1.2em ;
}

/* END syles for widgets */

/* Start: styles for extra widget below header */
#afn-below-header-widget-area{
	margin-right: 1.2em ;
	margin-left: 1.2em;
	justify-content: center;
}
@media screen and (min-width: 1010px) {
	#afn-below-header-widget-area{
		margin-right: 2em ;
		margin-left: 2em;
		
	}
}

@media screen and (min-width: 1330px) {
	#afn-below-header-widget-area{
		margin-right: 200px ;
		margin-left: 200px;
		
	}
}
/* END: styles for extra widget below header */


/* Some customizations for colors */

/* change color of date for posted on */
.entry-meta .entry-date{
	color: #ed7900 !important;
}
/* change add comment color */
a.text--secondary{
	color:#00a2e8!important;
}


/* to change color of social media logos */
/*   
html.wp-dark-mode-active .site-topbar .svg-icon{
    color:red;
} */
html.wp-dark-mode-active .site-topbar{
	/* background: black !important;; */
    background: linear-gradient(0deg, rgba(2,11,21,0.95) 0%, #166dd6 100%);
}

html.wp-dark-mode-active .site-menu-content {
    background-color: rgba(2,11,21,0.95);
}

html.wp-dark-mode-active .wp-block-group__inner-container h2 {
    background:#6ac2f5;
}

.site-topbar{
	background:#212121;
}





/* custom css for my custom content.php page */

/* Flex Container */
.entry-content-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    /* Prevent wrapping to keep thumbnail and content side by side */
    flex-wrap: nowrap;
    /* Optional: Adjust spacing as needed */
    gap: 2%; /* Replaces margin-inline-end for consistent spacing */
}

/* Thumbnail Section */
.post-thumbnail {
    flex: 0 0 30%; /* Fixed width for thumbnail */
    /* Use logical properties for RTL support */
    margin-inline-end: 2%; /* Space between thumbnail and content */
}

/* Ensure the image is responsive and doesn't exceed its container */
.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* Content Section */
.entry-content {
    flex: 1 1 auto; /* Allows content to grow and shrink as needed */
    /* Ensure text wraps within its container */
    word-wrap: break-word;
}

/* Handling Overflow for Long Words or URLs */
.entry-content {
    overflow-wrap: break-word;
	/* Optional: Add max-height with scroll for extremely long content */
	    /* max-height: 500px;
    overflow-y: auto; */

}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .entry-content-wrapper {
        flex-direction: column; /* Stack vertically on smaller screens */
    }

    .post-thumbnail {
        flex: 0 0 100%;
        margin-inline-end: 0;
        margin-bottom: 1em; /* Space below thumbnail */
    }

    .entry-content {
        flex: 1 1 100%;
    }
}