/*
Theme Name:  Alia Child (dubizzle Egypt)
Description: dubizzle Egypt blog on Alia. Presentation only; site-wide behaviour lives in mu-plugins.
Template:    alia
Version:     1.0.0
Text Domain: alia-child
*/

/* ---- Type and layout as on bayutsa: Lato (Alia, local), Droid Kufi for Arabic, 1170px container ---- */
@font-face {
	font-family: Arabic-DroidKufi;
	src: url(assets/fonts/DroidKufi-Regular.ttf) format('truetype');
	font-display: swap;
}
body.rtl, body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6, body.rtl .title {
	font-family: Arabic-DroidKufi, Tahoma, sans-serif;
}
h1, h2, h3, h4, h5, h6, .title { font-weight: normal; }
.main_content_area { margin-top: 0; }
/* Alia: 880px until the 1170px site width kicks in; fluid in between, like bayutsa. */
@media (min-width: 911px) and (max-width: 1169px) {
	.container { width: auto; margin-left: 20px; margin-right: 20px; }
}

/* ---- Header as on bayutsa (measured at 1440px): 59px top bar with the marks and the language
   link, then a 49px row with the category menu and search. ---- */
.header_nav_wrapper { border-bottom: 1px solid #eee; }
.dz-top-bar { padding: 5px 0; border-bottom: 1px solid #eee; }
.dz-top-bar .container { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.dz-top-bar .container { position: relative; }
.dz-main-logo, .dz-blog-mark { line-height: 0; }
.dz-main-logo img, .dz-blog-mark img { display: block; width: auto; max-width: none; }
.dz-main-logo img { height: 38px; }
/* The blog logo centred like bayutsa's "my bayut"; one line, so a little shorter than the dubizzle logo. */
.dz-blog-mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.dz-blog-mark img { height: 34px; }
.dz-lang { color: #525252; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; }
.dz-lang:hover { color: #e00000; }
.dz-lang[lang="ar"], .dz-lang-item a[lang="ar"] { font-family: Arabic-DroidKufi, Tahoma, sans-serif; letter-spacing: 0; }
.dz-lang[lang="en"], .dz-lang-item a[lang="en"] { font-family: Lato, sans-serif; }

.dz-nav-row { display: flex; align-items: center; justify-content: space-between; min-height: 49px; }
/* Alia's clearfix pseudo-elements would otherwise be flex items and take the edges. */
.dz-top-bar .container::before, .dz-top-bar .container::after, .dz-nav-row::before, .dz-nav-row::after { content: none; }
.dz-nav-row .main_menu { display: block; float: none; margin: 0; }
.dz-nav-row .header_controls { float: none; margin: 0; }
.dz-nav-row .main_menu .menu_mark_circle, .dz-nav-row .main_menu .dz-lang-item { display: none !important; }
.dz-nav-row ul.navbar > li { margin: 0; margin-inline-start: 5px; border-bottom: 5px solid transparent; }
.dz-nav-row ul.navbar > li:first-child { margin-inline-start: 0; }
.dz-nav-row ul.navbar > li > a { padding: 10px 12px 5px; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; color: #525252; }
.dz-nav-row ul.navbar > li:hover,
.dz-nav-row ul.navbar > li.current-menu-item,
.dz-nav-row ul.navbar > li.current-menu-parent,
.dz-nav-row ul.navbar > li.current-post-ancestor,
.dz-nav-row ul.navbar > li.current-category-ancestor { border-bottom-color: #e00000; }
.dz-nav-row ul.navbar > li:hover > a,
.dz-nav-row ul.navbar > li.current-menu-item > a,
.dz-nav-row ul.navbar > li.current-menu-parent > a,
.dz-nav-row ul.navbar > li.current-post-ancestor > a,
.dz-nav-row ul.navbar > li.current-category-ancestor > a { color: #e00000; }
.dz-nav-row .header_search i { font-size: 15px; }

/* Phones/tablets: one row (marks, then search and menu on top of the bar); the language
   switch lives in the slide-out menu there, as Alia's mobile menu includes it. */
@media (max-width: 910px) {
	.header_nav { position: relative; }
	.dz-lang, .dz-nav-row .main_menu { display: none; }
	.header_nav .dz-nav-row { position: absolute; top: 0; left: auto; right: auto; inset-inline-end: 15px; width: auto; min-height: 59px; padding: 0; justify-content: flex-end; }
	.dz-top-bar .container { justify-content: flex-start; }
	.dz-main-logo img { height: 28px; }
	/* Phones: the mark sits beside the logo again, with the divider as a border. */
	.dz-blog-mark { position: static; transform: none; margin-inline-start: 8px; padding-inline-start: 8px; border-inline-start: 1.5px solid rgba(23, 25, 28, .28); }
	.dz-blog-mark img { height: 24px; }
}

/* ---- Homepage ---- */
.dz-home-hero { margin-top: 30px; }

/* ---- Cards: a space between category links, no comment counts (comments are hidden) ---- */
.meta_item_category span { margin-inline-end: 4px; }
.post_comments_link, .meta_item_comments, .blog_post_control_item .comments_icon { display: none; }

/* ---- Footer: the red band from Salient, full width; columns come from mu-plugins/footer-links.php ---- */
#colophon.site_footer { width: auto; max-width: none; margin: 40px 0 0; padding: 50px 0 0; background: #e00000; color: #fff; }
#colophon.site_footer > .footer_sidebars_container,
#colophon.site_footer > .footer_credits { width: 1170px; max-width: calc(100% - 40px); margin-left: auto; margin-right: auto; }
#colophon, #colophon .footer_widgets_container, #colophon .widget { text-align: start; }
#colophon a, #colophon .widget h4, #colophon .footer_credits { color: #fff; }
#colophon a:hover { opacity: .75; }
#colophon .dz-footer-col h4 { font-size: 20px; line-height: 1.3; font-weight: 700; margin-bottom: 16px; }
#colophon .dz-footer-col ul { list-style: none; margin: 0; padding: 0; }
#colophon .dz-footer-col li { margin: 0 0 10px; }
#colophon .dz-footer-social { display: flex; flex-wrap: wrap; gap: 12px; }
#colophon .dz-footer-social li { margin: 0; }
#colophon .dz-footer-social a {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border: 1px solid currentColor; border-radius: 50%;
}
#colophon .dz-footer-logo { display: flex; align-items: center; margin-bottom: 24px; }
#colophon .dz-footer-logo img { display: block; width: auto; max-width: none; height: 40px; margin: 0; }
#colophon .dz-footer-logo a + a { margin-inline-start: 12px; padding-inline-start: 12px; border-inline-start: 1.5px solid rgba(255, 255, 255, .5); }
#colophon .dz-footer-logo a + a img { height: 32px; }
#colophon .footer_credits { border-top: 1px solid rgba(255, 255, 255, .2); padding: 20px 0; }

/* ---- Category banner (from Salient) above the title ---- */
.dz-archive-banner { margin: 30px 0 20px; border-radius: 8px; overflow: hidden; line-height: 0; }
.dz-archive-banner img { width: 100%; height: auto; aspect-ratio: 1870 / 770; object-fit: cover; }

/* ---- Article sidebar lists ---- */
.dz-side-posts ul { list-style: none; margin: 0; padding: 0; }
.dz-side-posts li { margin: 0 0 14px; }
.dz-side-posts a { display: flex; gap: 12px; align-items: center; color: #002f34; font-weight: 700; line-height: 1.35; }
.dz-side-posts img { width: 72px; height: 72px; flex: none; object-fit: cover; border-radius: 6px; }

/* ---- On top of the bayutsa rules (assets/css/bayutsa-base.css) ---- */
/* bayutsa gives each sidebar widget title its own coloured bar; here they're all dubizzle red. */
/* bayutsa colours the category pill per category; one red pill here. */
/* Article hero at bayutsa's 1170x508 on desktop, whatever the image's shape (Salient also cropped it). */
@media (min-width: 911px) {
	.featured-single-post .post_banner img { width: 100%; height: 508px; object-fit: cover; }
}
.dz-share { display: flex; gap: 10px; margin: 20px 0; }
.dz-share a {
	display: flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%; background: #f2f2f2; color: #222;
}
.dz-share a:hover { background: #e00000; color: #fff; }

/* ---- Fixes after comparing with bayut.sa (values measured there at 1440px) ---- */
/* bayutsa resets its 1170px container below 1170px; that rule shared a line with its newsletter
   and was left out of the port, so restore it (phones overflowed). */
@media (max-width: 910px) { .container { width: 100%; } }

/* Left-aligned, as bayutsa ends up; some ported rules centre these. */
.grid_list .post_body, .post_related .two_coloumns_list, .archive_header .section_title,
.navigation.pagination, .default_widgets_container .widget_container .widget_title { text-align: start; }

/* Cards */
.grid_list .post_title, .grid_list .post_title a { font-size: 23px; line-height: 1.35; letter-spacing: .4px; color: #000; font-weight: 700; }
.grid_list .post_title { margin: 0 0 10px; }
.grid_list .entry-summary { font-size: 14px; line-height: 1.8; letter-spacing: .1px; color: #737373; }
.blog-reading-time { font-size: 12px; line-height: 23px; color: #222; text-transform: uppercase; letter-spacing: .3px; }
.header-featured-trending-posts .homepage-featured-posts .blog-reading-time { font-size: 12px; line-height: 14px; }
.blog-published-date,
.blog_post_container .post_meta_info .blog-published-date { font-size: 12px; line-height: 23px; font-weight: 500; color: #222; }

/* One theme-red pill for every category, everywhere (bayutsa colours them per category). */
.post_meta_item.meta_item_category a[rel="category tag"],
.header-featured-trending-posts .homepage-featured-posts .post-category-wrapper a[rel="category tag"] {
	background-color: #e00000 !important; color: #fff !important;
	padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 18px;
	letter-spacing: .6px; text-transform: uppercase;
}

/* Sidebar titles ("Most Read", "Recently Posted"): bayutsa's rule makes them white, meant for its
   coloured bars; dark text with a red underline here. */
.default_widgets_container .widget_container .widget_title {
	background: none; color: #222; font-size: 16px; font-weight: 700; line-height: 1.4;
	padding: 0 0 10px; margin-bottom: 16px; border-bottom: 2px solid #e00000;
}
.default_widgets_container .widget_container .widget_title span { color: inherit; }

/* Card geometry as on bayut.sa: 30px gutters, 375x289 image with 12px corners, 18px under it,
   30px between rows, titles and meta aligned to the start (right in Arabic). */
.grid_list .grid_col { padding: 0 15px; }
.grid_list .grid_col > article { margin: 0 0 30px; }
.grid_list .post_banner { margin: 0 0 18px; border-radius: 12px; overflow: hidden; }
.grid_list .post_banner img { display: block; width: 100%; height: auto; aspect-ratio: 375 / 289; object-fit: cover; border-radius: 12px; }
.grid_list .post_header, .grid_list .post_title, .grid_list .post_meta_info,
.sidebar_post_content_col .grid_list .post_title { text-align: start; }
.grid_list .post_meta_info { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
/* Pills sit side by side with a 6px gap; Alia's ", " separator between them is hidden. */
.post_meta_item.meta_item_category { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.post_meta_item.meta_item_category > span { display: none !important; }

/* Preferred-source card as on bayutsa (measured): 18px/600 copy on 28px lines, 50px Google mark,
   24px-high wordmark middle-aligned; the ratio is fixed so Smush's placeholder can't stretch it. */
.preferred-source-card .preferred-source-card__text { font-size: 18px; line-height: 28px; font-weight: 600; }
.preferred-source-card .preferred-source-card__brand {
	height: 24px !important; width: auto !important; max-width: none !important;
	aspect-ratio: 120 / 38; object-fit: contain; display: inline-block; position: static;
	vertical-align: baseline; /* the letters end at the image's bottom edge, so they sit on the text baseline */
}
.preferred-source-card .preferred-source-card__icon img { width: 50px !important; height: 50px !important; max-width: none !important; }

/* Without masonry, start every row cleanly so a taller card can't push the next one sideways. */
.grid_list_2_col > .grid_col:nth-child(2n+1) { clear: both; }

/* Category pills on every tile: the same 16px from the image's side and bottom. */
/* Pills sit in the same grid cell as the image, 16px from its side and bottom, so the inset is
   measured from the image whatever side padding Alia gives the box (0, 12 or 20px by layout/width). */
.grid_list .post_banner, .two_coloumns_list .post_banner { position: relative; display: grid; }
.grid_list .post_banner > a, .two_coloumns_list .post_banner > a { grid-area: 1 / 1; display: block; }
.grid_list .post_banner > .post_meta_wrap,
.two_coloumns_list .post_banner > .post_meta_wrap {
	position: static; grid-area: 1 / 1; align-self: end; justify-self: start; margin: 0 16px 16px; z-index: 1;
}
/* Flex rows, so no line box adds space under the pills; Alia's clearfix pseudo-elements would
   become flex items and push the pills in, so they go. */
.post_banner .post_meta_wrap .post_meta_container, .post_banner .post_meta_wrap .post_meta_row,
.header-featured-trending-posts .post-category-wrapper .post_meta_container,
.header-featured-trending-posts .post-category-wrapper .post_meta_row { display: flex; align-items: center; margin: 0; padding: 0; float: none; }
.post_banner .post_meta_wrap .clearfix::before, .post_banner .post_meta_wrap .clearfix::after,
.header-featured-trending-posts .post-category-wrapper .clearfix::before,
.header-featured-trending-posts .post-category-wrapper .clearfix::after { content: none; }
/* Reading time on Featured / Trending tiles: centred on the pills. */
.header-featured-trending-posts .homepage-featured-posts .post-category-wrapper .blog-reading-time { float: none; margin: 0; align-self: center; }

/* Featured / Trending tiles: title and pills 20px from the side and the bottom. */
.header-featured-trending-posts .homepage-featured-posts .featured-post-content,
.header-featured-trending-posts .homepage-featured-posts.featured-section .featured-post-content { bottom: 0; padding: 0 20px 20px; }
.header-featured-trending-posts .homepage-featured-posts .post-category-wrapper { flex-wrap: wrap; gap: 6px 10px; }
.header-featured-trending-posts .homepage-featured-posts .post_meta_container { margin: 0; }
.header-featured-trending-posts .homepage-featured-posts .blog-reading-time { white-space: nowrap; }
/* The two small Trending tiles: smaller type so two categories and the reading time fit on a line. */
.trending-post-sub-section .featured-post .post-title { font-size: 18px; line-height: 1.3; }
.trending-post-sub-section .post_meta_item.meta_item_category a[rel="category tag"] { font-size: 10px; line-height: 14px; padding: 3px 6px; letter-spacing: .4px; }
.trending-post-sub-section .blog-reading-time { font-size: 11px; line-height: 14px; }
.trending-post-sub-section .featured-post-content { padding: 0 16px 16px; }

/* Featured slider: small round dots at the bottom centre; the title, pills and reading time sit
   above them (20px from the side, 40px from the bottom). */
.header-featured-trending-posts .featured-section .owl-theme .owl-nav.disabled + .owl-dots,
.header-featured-trending-posts .featured-section .owl-theme .owl-dots {
	position: absolute; top: auto; bottom: 14px; left: 0; right: 0; width: 100%; margin: 0; line-height: 0; text-align: center;
}
.header-featured-trending-posts .featured-section .owl-theme .owl-dots .owl-dot span {
	width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: rgba(255, 255, 255, .5);
}
.header-featured-trending-posts .featured-section .owl-theme .owl-dots .owl-dot.active span,
.header-featured-trending-posts .featured-section .owl-theme .owl-dots .owl-dot:hover span { background: #fff; }
.header-featured-trending-posts .homepage-featured-posts.featured-section .featured-post-content { padding-bottom: 40px; }

/* Alia's 6px dot before list titles (bayutsa removes it in some lists only). */
.two_coloumns_list .post_title a::before, .two_coloumns_list .post_title a::after { content: none; display: none; }

/* Article banner: title on its own line, then pills and reading time centred on one row
   (bayutsa floats them with a 6px offset, which left the reading time low). */
.featured-single-post .single_post_body.overlay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.featured-single-post .single_post_body .post_header { flex: 0 0 100%; }
.featured-single-post .single_post_body .post_meta_container,
.featured-single-post .single_post_body .post_meta_row { display: flex; align-items: center; float: none; margin: 0; padding: 0; }
.featured-single-post .single_post_body .clearfix::before,
.featured-single-post .single_post_body .clearfix::after { content: none; }
.featured-single-post .single_post_body .blog-reading-time { float: none; margin: 0; line-height: 1.2; }

/* bayutsa floats the reading time with a 6px offset in Arabic banners and in related posts;
   keep it on the same centre line as the pills and the date. */
body.rtl .featured-single-post .single_post_body .blog-reading-time,
.post_related .blog-reading-time, body.rtl .post_related .blog-reading-time,
.post_related .post_meta_container, body.rtl .post_related .post_meta_container { float: none; margin: 0; }

/* Comments stay hidden, as under Salient (Additional CSS hid .comments-section). Closing them for
   real is still an open decision. */
.single .comment_container, .single #comments, .single #respond { display: none; }