/*
 * FARCE Theme — Responsive Stylesheet + Layout Cleanup (v4)
 * Loaded AFTER all theme styles (header.php) so overrides win the cascade.
 * The theme is a fixed 970px RTL grid; this file makes it fluid & mobile-ready
 * WITHOUT touching any of the original style files or the desktop appearance.
 *
 * Breakpoints: 1100px (small desktop) → 900px (tablet) → 768px (large phone) → 520px (phone)
 */

/* =========================================================================
   SECTION A — GLOBAL (all widths)
   ========================================================================= */
img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; }

/* HEADER: the banner/logo image must never be cut at any screen size.
   !important is required to beat the inline style="max-width:970px". */
#header img,
#header a img { max-width: 100% !important; height: auto !important; }
#header, #masthead { max-width: 970px; }

/* Featured slider pagination bar: fixed-height row, buttons pinned to edges */
#paginate-featured-slider {
	clear: both;
	height: 32px;
	line-height: 30px;
	margin: 0 0 10px;
	padding: 0 6px;
	background: #fff;
	border-bottom: 2px solid #cd1713;
	overflow: hidden;
}
#paginate-featured-slider .prev {
	float: right;      /* RTL: "قبلی" pinned to the right edge */
	margin: 0 0 0 10px;
	padding: 2px 12px;
	font-weight: bold;
}
#paginate-featured-slider .next {
	float: left;       /* RTL: "بعدی" pinned to the left edge */
	margin: 0 10px 0 0;
	padding: 2px 12px;
	font-weight: bold;
}
#paginate-featured-slider .toc {
	display: inline-block;
	margin: 0 2px;
	padding: 2px 8px;
}
#paginate-innerpage-slider { overflow: hidden; }
#paginate-innerpage-slider ul li { float: right; }

/* Read-more / meta row: ALWAYS a clean row BELOW the text (never on top) */
#wrapper .featuredPostMeta {
	display: block;
	clear: both;
	padding-top: 6px;
	margin-top: 6px;
	border-top: 1px dotted #ddd;
	line-height: 1.5;
}
#wrapper .featuredPostMeta:after { content: ""; display: table; clear: both; }
#wrapper .featuredPostMeta a {
	display: inline-block;
	padding: 1px 8px;
	margin: 2px 0;
	border: 1px solid #e4c9c9;
	border-radius: 3px;
	background: #fdf7f7;
}
#wrapper .featuredPostMeta a:hover {
	background: #cd1713;
	border-color: #cd1713;
	color: #fff;
	text-decoration: none;
}
#wrapper .featuredPost:after { content: ""; display: table; clear: both; }
.featuredPost p, .post { overflow-wrap: break-word; word-wrap: break-word; }
.post img.alignleft, .post img.alignright { max-width: 45%; height: auto; }
.post table { max-width: 100%; }
.post pre, .post code { white-space: pre-wrap; overflow-wrap: break-word; }

/* FEATURED SLIDER: the slide excerpt + read-more row must never be clipped.
   The original fixed height (352px) cut the meta row off at the bottom. */
#featured-slider { height: 388px !important; }
#featured-slider .sliderPostPhoto { box-sizing: border-box; }
#featured-slider .sliderPostInfo h2.featuredTitle { word-wrap: break-word; }

/* =========================================================================
   SECTION B — PRIMARY BOTTOM TABS BOX: never cut, grows with its content.
   Original used absolutely-positioned children inside a collapsing box,
   which got clipped by the wrapper's overflow:hidden (the "cut box" bug).
   Converting the children to normal flow lets the box size itself.
   ========================================================================= */
#primaryBottomTabs { overflow: visible; }
#primaryBottomTabs_body {
	height: auto !important;   /* beat the IE height:203px hack */
	min-height: 220px;
	padding: 12px;
}
#primaryBottomTabs_body:after { content: ""; display: table; clear: both; }
#primaryBottomTabs_body .text {
	position: static;
	float: left;              /* same visual position as before (text left) */
	width: auto;
	max-width: 56%;
}
#primaryBottomTabs_body .text p { padding: 6px 0; }
#primaryBottomTabs_body .imgThumb {
	position: static;
	float: right;             /* same visual position as before (image right) */
	width: auto;
	max-width: 42%;
	height: auto;
	overflow: hidden;
}
#primaryBottomTabs_body .imgThumb img { max-width: 100%; height: auto; }
.trnsEmptyTab { padding: 6px 4px; color: #888; font-size: 12px; }

/* =========================================================================
   SECTION C — MEDIA BAR: title row + carousel buttons never overlap
   ========================================================================= */
#mediabar { padding-top: 0; }
#mediabar h2.widget_title {
	display: block;
	margin: 0;
	padding: 9px 12px 7px 90px; /* left padding reserves space for the two buttons */
	border-bottom: 2px solid #cd1713;
	background: #f5f5f5;
}
#mediabar #previous_button { top: 12px; right: auto; left: 38px; }
#mediabar #next_button     { top: 12px; right: auto; left: 12px; }
#mediabar .container { top: 46px; bottom: 10px; }
#mediabar .info {
	min-height: 78px;
	height: auto !important;
	height: 78px;
	padding-bottom: 24px; /* reserved room so the link never sits on the text */
}
#mediabar .info p.moreVideo a,
#mediabar .info p.morePhoto a {
	display: inline-block;
	padding: 2px 8px 2px 20px;
	background-color: #efefef;
	border: 1px solid #d5d5d5;
	border-radius: 3px;
	line-height: 1.4;
	white-space: nowrap;
}
#mediabar .info p.moreVideo a:hover,
#mediabar .info p.morePhoto a:hover {
	background-color: #e2e2e2;
	text-decoration: none;
}

/* =========================================================================
   SECTION D — ≤1100px : SMALL DESKTOPS (proportional columns)
   ========================================================================= */
@media only screen and (max-width: 1100px) {
	#wrapper, #header, #masthead, #navcats, #navpages, #footer {
		width: 97%;
		margin: 0 auto;
	}
	#topad { width: auto; max-width: 100%; text-align: center; }
	#header .banner { max-width: 44%; width: auto; box-sizing: border-box; }
	#header .banner img { max-width: 100% !important; height: auto; }

	/* Homepage: featured slider / middle column / right sidebar */
	#featuredContent   { width: 35%; box-sizing: border-box; }
	#midColPosts       { width: 30%; margin: 0 1.5%; box-sizing: border-box; }
	#primaryTopSidebar { width: 31%; box-sizing: border-box; }
	#featured-slider, .sliderPostPhoto { width: 100%; }
	#sidebarTabs_body  { width: auto; box-sizing: border-box; }

	/* Media bar */
	#mediabar { width: auto; box-sizing: border-box; }
	#mediabar .container { width: auto; }

	/* Primary bottom row */
	#primaryBottomSidebar { width: 32%; box-sizing: border-box; }
	#primaryBottomTabs    { width: 66%; box-sizing: border-box; }
	#primaryBottomTabs_body { width: auto; box-sizing: border-box; }

	/* Secondary content */
	#secondaryContentWrapper #leftBottomContent { width: 66%; box-sizing: border-box; }
	#secondaryContentWrapper #home_sidebar      { width: 32%; box-sizing: border-box; }
	.bottomBox, .bottomBox_wide, .bottomBox_narrow { width: auto; box-sizing: border-box; }
	.home_sidebarPosts { width: auto; box-sizing: border-box; }

	/* Inner pages: narrow sidebar / wide sidebar / content */
	#innerLeft     { width: 57% !important; margin: 0 1% 0 0; box-sizing: border-box; }
	#narrowSidebar { width: 14%; box-sizing: border-box; }
	#wideSidebar   { width: 26%; box-sizing: border-box; }
	#innerpage-slider { width: 100%; }
	#innerpage-slider img { width: 100% !important; height: auto !important; }
	#paginate-innerpage-slider ul { width: auto; }

	/* Footer */
	#footer { width: 97%; box-sizing: border-box; }
}

/* =========================================================================
   SECTION E — ≤900px : TABLETS (everything stacks; menus WRAP so nothing
   is ever cut off — the full menu and logo always fit the screen)
   ========================================================================= */
@media only screen and (max-width: 900px) {
	/* Header — full logo, fully visible */
	#header { height: auto; overflow: visible; }
	#logo { float: none; width: 100%; text-align: center; }
	#logo a { padding: 12px 10px; }
	#header .banner { float: none; width: 100%; max-width: 100%; text-align: center; padding: 10px 0; }
	#masthead { height: 8px; }

	/* MENUS: wrap instead of horizontal scroll — the entire menu is visible */
	#navcats, #navpages {
		height: auto;
		min-height: 0;
		overflow: visible;
		width: 97% !important;
	}
	#navcats ul, #navpages ul {
		float: none;
		width: 100%;
		white-space: normal;   /* override the nowrap scroll behaviour */
		text-align: center;
	}
	#navcats ul li, #navpages ul li {
		float: none;
		display: inline-block;
		vertical-align: top;
	}
	#navcats ul li a, #navpages ul li a { height: auto; padding: 9px 12px 7px; }
	#navcats ul li.first a { padding: 9px 12px 7px; }

	/* Homepage three columns stack */
	#featuredContent, #midColPosts, #primaryTopSidebar,
	#primaryBottomSidebar, #primaryBottomTabs,
	#secondaryContentWrapper #leftBottomContent, #secondaryContentWrapper #home_sidebar {
		float: none;
		width: 100% !important;
		margin: 0 0 12px 0;
	}
	#featured-slider { height: auto !important; min-height: 460px; }
	#featured-slider, .sliderPostPhoto, .sliderPostInfo { width: 100% !important; box-sizing: border-box; }
	#featured-slider .contentdiv { width: 100%; }
	/* Cap the slide photo so the excerpt + read-more row always fit below it */
	#featured-slider img {
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		max-height: 300px;
		object-fit: cover;
		object-position: center top;
	}
	#featured-slider .sliderPostPhoto { height: auto !important; min-height: 0; }

	/* Media bar: horizontal swipe carousel */
	#mediabar { height: auto; min-height: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	#mediabar .container { position: static; width: auto; overflow: visible; }
	#mediabar ul { width: auto; white-space: nowrap; }
	#mediabar li { float: none; display: inline-block; vertical-align: top; white-space: normal; }
	#mediabar #previous_button, #mediabar #next_button { display: none; }
	#mediabar h2.widget_title { padding-right: 12px; }

	/* Inner pages stack */
	#innerLeft, #narrowSidebar, #wideSidebar {
		float: none !important;
		width: 100% !important;
		margin: 0 0 12px 0;
		box-sizing: border-box;
	}
	#innerLeft[style] { width: 100% !important; }

	/* Search box fully visible */
	#search { float: none; width: 100%; margin: 4px 0; box-sizing: border-box; }
	#search form, #search fieldset { width: 100%; }
	#s { width: 85%; }

	/* Footer stacks */
	#footer_data, #footer_logo { float: none; width: 100%; text-align: center; padding: 8px 0; }
}

/* =========================================================================
   SECTION F — ≤768px : LARGE PHONES / SMALL TABLETS
   ========================================================================= */
@media only screen and (max-width: 768px) {
	html, body { overflow-x: hidden; }
	body { font-size: 14px; }

	/* Typography scale-down */
	.post h1, h1.singlePageTitle { font-size: 21px !important; letter-spacing: 0; }
	h2.postTitle  { font-size: 16px; }
	h2.widget_title { font-size: 19px; }
	h2.secondaryCTitle { font-size: 19px; }

	/* Comment form */
	#url, #email, #author { float: none; width: 96%; box-sizing: border-box; margin-bottom: 6px; }
	#respond textarea#commentText { width: 96%; box-sizing: border-box; }

	/* Comfortable tap targets */
	#navcats ul li a, #navpages ul li a { padding: 12px 14px 10px; }
	.featuredPostMeta a, li div.reply a,
	#mediabar .info p.morePhoto a, #mediabar .info p.moreVideo a {
		padding: 5px 12px;
		font-size: 13px;
	}

	/* Consistent vertical rhythm between homepage blocks */
	#primaryTopWrapper, #mediabar, #primaryBottom, #secondaryContentWrapper { margin-bottom: 16px; }
	.widget { margin-bottom: 14px; }
	.home_sidebarPosts, #sidebarTabs_body, #primaryBottomTabs_body { padding: 12px; }
}

/* =========================================================================
   SECTION G — ≤520px : PHONES
   ========================================================================= */
@media only screen and (max-width: 520px) {
	#wrapper { padding: 0 4px 6px; }
	#topad { display: none; }
	#masthead { display: none; }
	.home_sidebarPosts img { float: none; display: block; margin: 0 auto 6px; width: 100%; height: auto; }
	#mediabar li { width: 150px; }
	#footer { padding: 10px 6px; }
	.attachmentPage img { max-width: 100%; height: auto; }
}

/* =========================================================================
   SECTION H — COMPACT WIDGET LISTS & COMMENTS (restores original density)
   NOTE: these intentionally match the ORIGINAL theme spacing — the previous
   "beauty pass" made the sidebars and lists unnaturally tall.
   ========================================================================= */
.widget ul li {
	line-height: 18px;      /* original value */
	padding: 2px 0 2px 10px; /* original value */
}
.widget p { padding-top: 4px; padding-bottom: 4px; }
#sidebarTabs_body ol li { line-height: 1.5; padding: 2px 0; }
#primaryBottomTabs_body ul li { line-height: 1.5; padding: 2px 0; }
.home_sidebarPosts li { padding: 0 0 4px 0; margin: 0 0 4px 0; }

/* Comments: close to original density, lightly rounded */
ol.commentlist li {
	margin: 0 0 10px;   /* original */
	padding: 7px;       /* original */
	border-radius: 4px;
}
ol.commentlist li .comment-meta.commentmetadata {
	margin: 2px 0 6px;
	direction: ltr;           /* date-time reads left-to-right inside RTL page */
	text-align: right;
	unicode-bidi: embed;
}
li div.vcard img.avatar { border-radius: 50%; }
li div.reply a {
	display: inline-block;
	padding: 2px 10px;
	border: 1px solid #e4c9c9;
	border-radius: 3px;
	background: #fdf7f7;
}
li div.reply a:hover {
	background: #cd1713;
	border-color: #cd1713;
	color: #fff;
	text-decoration: none;
}
#url, #email, #author, #respond textarea#commentText { border-radius: 3px; }
#url:focus, #email:focus, #author:focus, #respond textarea#commentText:focus {
	border-color: #cd1713;
	outline: none;
}