/*
 * Small fixes on top of the theme's original styles (loaded after style.css).
 * The original design is unchanged.
 */

/* Decorative shapes (hexagons, carousel arrows, clouds) stick out past the screen
   edge and made pages scroll sideways on phones. Clip them at the page edge. */
/* Set on html (applies to the browser window); on body it would not clip elements
   positioned against the page root, and would make body its own scroll container. */
html {
	overflow-x: hidden;
}
@supports (overflow-x: clip) {
	html {
		overflow-x: clip;
	}
}

/* Images never wider than their column (mainly matters on phones). */
.armaghan-fallback img,
.internal .container img {
	max-width: 100%;
	height: auto;
}

/* ---- Fallback template (index.php): posts, archives, search, 404 ---- */
.armaghan-fallback__body {
	padding: 40px 0 60px;
	direction: rtl;
	text-align: right;
}
.armaghan-fallback__title {
	font-size: 26px;
	line-height: 1.6;
	margin: 0 0 16px;
	color: #222;
}
.armaghan-fallback__meta {
	color: #888;
	font-size: 13px;
	margin: 0 0 16px;
}
.armaghan-fallback__thumb {
	margin: 0 0 24px;
}
.armaghan-fallback__thumb img {
	border-radius: 6px;
}
.armaghan-fallback__content {
	font-size: 15px;
	line-height: 2;
	color: #333;
}
.armaghan-fallback__list {
	display: grid;
	gap: 24px;
	margin-top: 8px;
}
.armaghan-fallback__item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 20px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
}
.armaghan-fallback__item-thumb {
	flex: 0 0 220px;
}
.armaghan-fallback__item-thumb img {
	border-radius: 6px;
}
.armaghan-fallback__item h2 {
	font-size: 19px;
	margin: 0 0 8px;
	line-height: 1.6;
}
.armaghan-fallback__item h2 a {
	color: #222;
}
.armaghan-fallback__item p {
	margin: 0 0 6px;
	line-height: 1.9;
	color: #555;
}
.armaghan-fallback .pagination,
.armaghan-fallback .nav-links {
	margin-top: 30px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.armaghan-fallback .nav-links .page-numbers {
	padding: 6px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #333;
}
.armaghan-fallback .nav-links .page-numbers.current {
	background: #1e5aa0;
	border-color: #1e5aa0;
	color: #fff;
}
.armaghan-fallback__empty {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.armaghan-fallback__empty p {
	line-height: 2;
	color: #555;
}
.armaghan-fallback .search-form {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 20px 0;
}
.armaghan-fallback .search-form label {
	flex: 1 1 auto;
	max-width: 420px;
	margin: 0;
}
.armaghan-fallback .search-form .search-field {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.armaghan-fallback .search-form .search-submit,
.armaghan-fallback__button {
	display: inline-block;
	padding: 8px 20px;
	border: 0;
	border-radius: 4px;
	background: #1e5aa0;
	color: #fff;
}
.armaghan-fallback__button:hover,
.armaghan-fallback__button:focus {
	color: #fff;
	opacity: 0.9;
}

@media (max-width: 600px) {
	.armaghan-fallback__body {
		padding: 24px 0 40px;
	}
	.armaghan-fallback__title {
		font-size: 21px;
	}
	.armaghan-fallback__item {
		flex-direction: column;
	}
	.armaghan-fallback__item-thumb {
		flex-basis: auto;
	}
}

/* Phones: the two panel-login links in the header had a 98px column, so they broke
   one word per line and spilled over the banner. The logo column is hidden at this
   width, so give the links that space and keep each one on a single line. */
@media (max-width: 767px) {
	#header #menu {
		width: 58.333%;
	}
	#header #menu .btn-search {
		width: auto;
		height: auto;
		padding-top: 6px;
	}
	#header #menu .btn-search a {
		display: block;
		white-space: nowrap;
		font-size: 12px;
		line-height: 22px;
	}
}