/* asuruonline.com base styles (theme geri). Moved here on 2026-11-16 from WordPress's Customizer → Additional CSS, where they sat
   outside version control and the deploy script (project audit UX-002, owner: "fix all"). Loaded before ao-refresh.css by the
   mu-plugin asuruonline-seo. The Customizer field is now empty; its old text is in clients/asuruonline/ct107/customizer-css-2026-11-16.css.
   Changes against the Customizer copy:
   - fonts self-hosted in the theme (were MV Waheed from dhivehi.mv and MV Faseyha from /fonts/), with font-display: swap, and
     declared under every name the CSS uses: "MV Faseyha" was never defined, so those texts fell back to the device's font;
   - the phone breakpoint is max-width 767.98px (was 768px, which with the desktop's min-width 768px hid the home page entirely
     on an upright iPad);
   - the Work Sans @import is gone: it came after other rules, so browsers ignored it (Work Sans never loaded; the system font shows). */
@font-face { font-family: 'mv waheed'; src: url(fonts/MV_Waheed.otf) format('opentype'); font-display: swap; }
@font-face { font-family: 'mv aaamu fk'; src: url(fonts/MV_Waheed.otf) format('opentype'); font-display: swap; }
@font-face { font-family: 'mv gfaseyha'; src: url(fonts/MVFaseyha.ttf) format('truetype'); font-display: swap; }
@font-face { font-family: 'mv faseyha'; src: url(fonts/MVFaseyha.ttf) format('truetype'); font-display: swap; }

/* Headings that keep the look of the element they replaced (2026-11-16, project audit UX-003: titles became <h1>/<h2>). Placed
   first so each element's own class below (.single-title, .bodu-title, .side-header…) still sets its size. */
.ao-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; font-family: inherit; color: inherit; }

body {
	margin: 0;
	padding: 0;
	background: #ffffff !important;
	color: #262626!important;
}

.container {
	width: auto !important;
}

.py-4 {
	padding: 10px 15px !important;
}

.pagination .px-4 {
	width: 100%;
}

.p-4 {
	padding: 0rem!important;
}

.mb-4 {
	margin-bottom: 12px !important;
}

.w-text {
	color: #fff;
}

blockquote {
	display: block;
	border-width: 2px 0;
	border-style: solid;
	border-color: #eee;
	padding: 20px 10px 0px 10px;
	margin: 1.5em 15px;
	position: relative;
}

blockquote p {
	font-family: mv waheed !important;
	font-size: 20px;
	text-align: right;
}

blockquote:before {
	content: '\201C';
	color: #9c211e !important;
	position: absolute;
	top: -0.14em;
	left: 92%;
	transform: translate(-50%, -50%);
	background: #fff;
	width: 3rem;
	height: 2rem;
	font: 6em/1.08em 'PT Sans', sans-serif !important;
	color: #666;
	text-align: center;
}

.e-text {
	font-family: 'Work Sans', sans-serif !important;
}

.aanmu {
	font-family: mv aaamu fk;
	font-weight: 300;
}

.wadde {
	font-family: mv waheed;
	font-weight: 300 !important;
}

.faseyha {
	font-family: mv gfaseyha;
	font-weight: 300;
}

.bodu-cat {
	background: #000000;
	width: fit-content;
	padding: 2px 15px;
	margin-bottom: 10px;
}

.pic {
	width: 100%;
}

@media only screen and (min-width: 768px) {
	.mobile1 {
		display: none;
	}
	
	.ethere-ad {
    width: 300px !important;
}

	.four-grid {
		display: grid;
		grid-template-columns: repeat(4,1fr);
		grid-gap: 20px;
	}

	.five-grid {
		display: grid;
		grid-template-columns: repeat(5,1fr);
		grid-gap: 20px;
	}

	.two-grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 20px;
	}

	.three-grid {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-gap: 20px;
	}

	.single-area {
		display: grid;
		grid-template-columns: repeat(14,minmax(0,1fr));
		grid-gap: 0px;
		gap: 20px;
	}

	.single-main {
		grid-column: span 10/span 10;
	}

	.sidebar {
		grid-column: span 4/span 4;
	}

	.single-half {
		display: grid;
		grid-template-columns: repeat(16,minmax(0,1fr));
		grid-gap: 0px;
		gap: 15px;
	}

	.single-article {
		grid-column: span 13/span 13;
	}

	.single-kuda {
		grid-column: span 3/span 3;
		text-align: center;
		padding-top: 30px;
	}

	.bodu-title {
		font-size: 36px;
		line-height: 1.9;
	}

	.bodu-sum {
		font-size: 17px;
		line-height: 2.2;
	}


	.block-img {
		height: 140px;
		object-fit: cover;
	}

	.post-blocks {
		margin-top: 25px;
	}

	.quick-pic {
		height: 170px;
		width: 170px;
		object-fit: cover;
		border-radius: 1000px;
	}

	.grid-img {
		height: 340px;
		object-fit: cover;
	}

	.grid-block-img {
		height: 120px;
		object-fit: cover;
	}

	.suruhee-block {
		height: 340px;
		text-align: center;
		color: #fff !important;
		display: flex;
		align-items: center;
		flex-direction: column;
		align-content: center;
		justify-content: flex-end;
	}

	.container {
		margin: 0;
		padding: 0;
		max-width: 1100px;
		margin-left: auto;
		margin-right: auto;
	}


	.share-btn {
		font-size: 28px;
		margin-top: 8px;
		color: grey;
	}

	.share-area {
		border-top: 1px solid whitesmoke;
		margin: 20px;
		display: flex;
		flex-direction: column;
	}

	.quick-title {
		font-size: 19px;
		text-align: center;
		padding: 10px 40px 0px 40px;
		line-height: 1.8;
	}

	.laptop {
		display: none;
	}

	.logo {
		height: 40px;
	}

	.header-top {
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0px;
	}


	.liner {
		border-top: 1px solid whitesmoke;
		margin: 25px 0px;
	}

	.front-header {
		display: flex;
		align-content: center;
		align-items: center;
		margin-bottom: 20px;
		justify-content: space-between;
	}


	.geryna {
		display: none;
	}

}



@media only screen and (max-width: 767.98px) {
	.lap {
		display: none;
	}

	.header-top {
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		padding: 6px 0px !important;
	}

	.four-grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 20px;
	}

	.logo {
		height: 35px;
	}

	.five-grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 15px;
	}

	.two-grid {
		display: grid;
		grid-template-columns: repeat(1,1fr);
		grid-gap: 10px;
	}

	.three-grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 15px;
	}


	.single-area {
		display: block;
		grid-template-columns: repeat(14,minmax(0,1fr));
		grid-gap: 0px;
		gap: 20px;
	}

	.single-main {

	}

	.sidebar {
		margin-top: 25px;
	}

	.single-half {
		display: block;
		grid-template-columns: repeat(16,minmax(0,1fr));
		grid-gap: 0px;
		gap: 15px;
	}

	.single-article {
	}

	.single-kuda {
		text-align: center;
		padding-top: 30px;
	}


	.bodu-title {
		font-size: 34px;
		line-height: 1.9;
	}

	.bodu-sum {
		font-size: 17px;
		line-height: 2.2;
		color: #717171;
	}


	.block-img {
		height: 120px;
		object-fit: cover;
	}

	.post-blocks {
		margin-top: 25px;
	}

	.quick-pic {
		height: 120px;
		width: 120px;
		object-fit: cover;
		border-radius: 1000px;
	}

	.grid-img {
		height: 220px;
		object-fit: cover;
	}

	.grid-block-img {
		height: 140px;
		object-fit: cover;
	}

	.suruhee-block {
		height: 220px;
		text-align: center;
		color: #fff !important;
		display: flex;
		align-items: center;
		flex-direction: column;
		align-content: center;
		justify-content: flex-end;
	}

	.container {
		padding: 0 !important;
		margin-left: 15px !important;
		margin-right: 15px !important;
	}


	.share-btn {
		font-size: 28px;
		margin: 20px 0px 0px 0px;
		color: grey;
	}

	.share-area {
		border-top: 1px solid whitesmoke;
		margin: 20px;
		border-top: 1px solid whitesmoke;
		display: flex;
		align-items: center;
		justify-content: center;
		align-content: center;
	}

	.quick-title {
		font-size: 19px;
		text-align: center;
		padding: 10px 5px 0px 5px;
		line-height: 1.8;
	}

	.mobile {
		display: none;
	}


	.liner {
		border-top: 1px solid whitesmoke;
		margin: 15px 0px;
	}

	.front-header {
		display: flex;
		align-content: center;
		align-items: center;
		margin-bottom: 10px;
		justify-content: space-between;
	}

}

.meta {
	color: #9e9e9e;
}

.block-title {
	font-size: 19px;
	padding-top: 5px;
}

.small-meta {
	font-size: 12px;
	padding-top: 5px;
}

.post-content {
	margin-top: 20px;
	color: #3A3B3C !important;
}


.adder {
	margin: 45px 0px 0px 0px;
}

.grid-big {
	font-size: 35px;
	line-height: 1.8;
}


.header-title {
	font-size: 32px;
	color: #000000;
}

#divide {
	border-right: 1px solid #9e9e9e;
	padding-right: 20px;
	padding-left: 15px;
}

.header-sub span {
	color: #9e9e9e;
	font-size: 20px;
}

header {
	margin-bottom: 35px;
}

.color-back {
	background: #5c0101 !important;
}

.header-left .fa {
	color: #fff;
	font-size: 27px;
	padding-right: 12px;
}

.header-left {
	display: flex;
	align-content: center;
	align-items: center;
}

.header-left span {
	font-family: 'Work Sans', sans-serif !important;
	direction: ltr;
	color: #fff;
	padding-right: 15px;
}

.header-thiri {
	background: #eee;
	padding: 10px 0px;
}

/* input[type=text]:focus { border: none !important; outline: none; } removed 2026-11-16 (audit UX-019): it hid the focus on every text field */

.down-area a {
	font-size: 20px;
	color: #fff;
	padding-left: 35px;
	text-decoration: none;
}

::selection {
	background: #000000;
	color: #fff;
}

.w-text a {
	color: #fff;
	text-decoration: none;
}

.block-title a, .grid-big a {
	color: #333;
	text-decoration: none;
}

.suruhee-title {
	color: #fff;
	font-size: 20px;
	padding: 15px 20px;
	text-align: center;
	line-height: 2;
	text-decoration: none;
}

.article-author-pic {
	height: 60px;
	width: 60px;
	border-radius: 100px;
	object-fit: cover;
	border: 3px solid #eee;
}

.single-author a {
	color: #333;
	text-decoration: none;
}

.single-author {
	margin: 5px 0px;
}

.single-title {
	font-size: 40px;
	margin: 30px 0px 20px 0px;
	line-height: 2;
}

footer {
	background: #33383e;
	padding: 45px;
	color: #69727e;
	font-family: 'Work Sans', sans-serif !important;
	font-size: 13px;
	line-height: 1.8;
	text-align: center;
}

.post-content {
	line-height: 2.2;
	font-size: 19px;
}


#respond {
	background-color: #f9f9f9;
	border: none!important;
	outline: none;
	border-radius: 10px!important;
	padding: 20px 20px 20px 20px;
}

.comment-input--field, .comment-input--field {
	width: 96% !important;
	border: 1px solid #f1f1f1!important;
	border-radius: 10px;
	font-family: Faseyha;
	text-align: right;
	direction: rtl;
	height: 100%;
	padding: 10px;
	font-family: mv faseyha;
	margin-bottom: 15px;
	font-size: 16px;
}

#submit {
	font-size: 14px;
	padding: 12px 20px 12px 20px!important;
	color: #333!important;
	border: 1px solid #333!important;
	border-radius: 25px!important;
	background: transparent;
	-webkit-appearance: button;
	font-weight: 500;
	font-family: 'Work Sans', sans-serif !important;
}

.comment {
	background-color: #fbfbfb;
	border: 1px solid #e9e9e9;
	border-radius: 10px;
	padding: 30px;
	margin-top: 20px;
}

.commentlist {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.comment-author {
	height: 50px;
	object-fit: cover;
	border-radius: 100px
}

.comment--header {
	display: flex;
	align-content: center;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.children {
	list-style: none;
	padding: 0px;
	margin: 20px 0px 0px 0px;
}

.comment--author {
	font-size: 18px;
	color: #333;
	text-decoration: none;
	font-style: normal !important;
}

.comment--author a {
	font-size: 18px;
	font-family: mv waheed;
	color: #333;
	text-decoration: none;
	font-style: normal !important;
}

.main-comment {
	color: #333;
	font-size: 18px;
	margin-bottom: 10px;
	font-family: 'Work Sans', sans-serif !important;
	font-weight: 500;
}

.e-title {
	font-family: 'Work Sans', sans-serif !important;
}

.small-meta {
	direction: rtl;
	text-align: right;
}

.menu-dhebai {
	display: flex;
	align-items: center;
	align-content: center;
	flex-direction: row;
	justify-content: space-between;
}

.search-field {
	border: 0px solid whitesmoke;
	padding: 2px 10px;
	border-radius: 6px;
	font-family: mv faseyha;
	width: 170px;
	color: #fff;
	background: #770c0c;
}


.mob .search-field {
	border: 1px solid whitesmoke;
	padding: 5px 10px;
	border-radius: 6px;
	font-family: mv faseyha;
	width: 100%;
	color: #333;
	background: #fff;
}

/* placeholder readable on the maroon header field and on white (2026-11-16, audit UX-021; grey was 2.9:1) */
.search-field::placeholder {
	color: rgba(255, 255, 255, .78) !important;
}
.mob .search-field::placeholder, .ao-searchbox input::placeholder {
	color: #6b6262 !important;
}

.breaking {
	background: #ba0204;
	padding: 20px 20px 20px 20px;
	margin-bottom: 20px;
}


.breaking-icon .fa {
	color: #ffca00 !important;
	animation: blinker 2s linear infinite;
}

.breaking-icon {
	display: inline;
	padding-top: 5px;
	padding-left: 10px;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

.breaking a {
	color: #fff;
	font-family: mv waheed;
	font-size: 19px;
	line-height: 1.8;
	text-decoration: none;
}

.breaking-title {
	display: inline;
}


.flex {
	direction: rtl;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #ddd;
}

.flex a {
	color: #9e9e9e!important;
}

.pag-num {
	font-family: 'Work Sans', sans-serif !important;
	font-size: 14px;
}

.pag-text {
	font-size: 17px;
}

.active1 {
	text-decoration: underline !important;
	color: #000 !important;
	font-weight: 700 !important;
}

.active1 a {
	font-weight: 700 !important;
	color: #000 !important;
}

.bodu-title a {
	color: #333;
	text-decoration: none;
}

/* lead summary: #6b6262 (5.6:1); grey was 3.9:1 and this later rule overrode the phone colour (2026-11-16, audit UX-021) */
.bodu-sum {
	color: #6b6262;
}

.bodu-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

.ad-title {
	font-size: 10px;
	color: grey;
	font-family: 'Work Sans', sans-serif !important;
	margin: 2px 0px 20px 0px !important;
	text-transform: uppercase;
}

.pic {
	border-radius: 4px;
}

.bodu-sum p {
	margin: 0px !important;
}

.header-logo a {
	display: flex;
}

.bi-filter-left {
	color: #fff;
	font-size: 30px;
}

.menu-item {
	color: #333;
	text-decoration: none;
}

.off-menu {
	text-align: center;
	margin-bottom: 20px;
	font-size: 20px;
}

.share-icon {
	height: 40px !important;
	margin: 0px 5px
}

.post-content img {
	border-radius: 4px;
}

.social-area {
	display: flex;
	margin-bottom: 15px;
}

.social-icon {
	height: 30px;
	width: 30px;
	border-radius: 100px;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin: 0px 5px;
	background: #fff !important;
}

.social-icon {
	color: #333 !important;
}

footer {
	flex-direction: column;
	display: flex;
	align-content: center;
	justify-content: center;
	align-items: center;

}

.header-title {
	text-decoration: none;
}

/* hover red, without !important (2026-11-16, audit UX-018): it turned the white links on maroon (menu, breaking bar, footer)
   dark red, almost unreadable; those keep their own colour now */
a:hover {
	color: #9c211e;
	transition: color .2s;
}

.ham-menu {
	margin-top: 5px !important;
}

.post-content .wp-caption img {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 100% !important;
	height: auto !important;
	width: 100%;
}

.wp-caption {
	width: 100% !important;
	background: #eee;
	border-radius: 5px
}

.wp-caption-text {
	font-size: 14px !important;
	padding: 2px 15px;
}

.featured-caption {
	font-size: 15px;
	font-family: mv faseyha;
	border-bottom: 2px solid #e4e4e4;
	padding: 6px 10px 8px 10px;
	color: grey;
}

.tag {
	direction: rtl;
	font-weight: 300;
	font-size: 15px;
	line-height: 2;
	padding: 4px 10px 6px 10px;
	margin-left: 10px;
	border-radius: 98px;
	width: fit-content;
	background:  #9c211e;
	display: inline;
		border: 2px solid #9c211e;
}

.tag:hover {
	direction: rtl;
	font-weight: 300;
	font-size: 15px;
	line-height: 2;
	padding: 4px 10px 6px 10px;
	margin-left: 10px;
	border-radius: 98px;
	width: fit-content;
	background:  #fff;
	display: inline;
	transition: 0.4s;
	border: 2px solid #9c211e;
}


.tag a {
	color: #fff;
	text-decoration: none;
}

.tag a:hover {
	color: #9c211e;
	text-decoration: none;
}

.title {
	color: #333;
	text-decoration: none;
}

.line-block {
	border-bottom: 1px solid whitesmoke;
	margin: 10px 0px 0px 0px;
	padding: 0px 5px 10px 5px;
}

.side-meta {
	margin-top: 6px;
}

.side-header {
	margin-top: 20px;
font-size: 20px;
	border-bottom: 2.5px solid #333;
	margin-bottom: 16px;
	padding-bottom: 4px;
}


.sidebar .sticker, .single-stick {
	position: sticky;
  top: 0;
}


.g.g-2 {
    margin-bottom: 20px !important;
}