/*
Theme Name: Deltakon
Description: Child theme of Twenty Twenty-Five for Deltakon (Arabic RTL + English). Brand colours, self-hosted fonts and RTL rules.
Template: twentytwentyfive
Version: 1.3.8
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deltakon
*/

/* English (LTR): Karla 400 for body and headings. Arabic keeps IBM Plex Sans Arabic (headings) + Tajawal (body). */
html[lang^="en"] body,
html[lang^="en"] :is(h1, h2, h3, h4, h5, h6, .wp-block-heading, .wp-block-site-title, .wp-block-post-title) {
	font-family: var(--wp--preset--font-family--karla);
	font-weight: 400;
}

/* Arabic (RTL) */
html[dir="rtl"] body {
	letter-spacing: 0;
	word-spacing: normal;
	text-align: start;
}
html[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, p, li, .wp-block-heading) {
	letter-spacing: 0;
}
/* Slanted Arabic looks broken; keep emphasis non-italic in Arabic */
html[lang^="ar"] :is(em, i, cite) {
	font-style: normal;
}
/* Lists: logical padding so bullets sit on the reading side in both directions */
:is(ul, ol).wp-block-list,
.entry-content :is(ul, ol) {
	padding-inline-start: 1.5em;
	padding-inline-end: 0;
}
/* Service cards (3 per row): never narrower than 300px, wrap to the next row instead of shrinking */
/* (the "body" prefix raises specificity above core's columns rules, which WordPress prints later in the page) */
@media (min-width: 782px) {
	body .wp-block-columns.dk-cards {
		flex-wrap: wrap !important; /* core sets nowrap !important from 782px */
		justify-content: center;
		gap: 2rem;
	}
	body .wp-block-columns.dk-cards > .wp-block-column {
		flex: 0 1 calc((100% - 4rem) / 3);
		min-width: 300px;
	}
}
/* Big image under the hero (first image of a content section, stacked layout): at most 900px wide, centred,
   height automatic, never enlarged past its own size (no blur), never cropped */
.dk-section > .wp-block-image {
	text-align: center;
}
.dk-section > .wp-block-image img {
	width: auto;
	max-width: min(100%, 900px);
	height: auto;
}
/* Gallery (1.3.3): fixed SQUARE (1:1) frames filled by the photo (object-fit cover, no empty space), small gaps; clicking opens the
   core lightbox (set per image in the page markup) which shows the whole photo. 3 columns on desktop, 2 at <=1024px.
   WordPress sets gallery widths and object-fit with very high specificity, hence the !important. */
body .wp-block-gallery.dk-gallery {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}
body .wp-block-gallery.dk-gallery > .wp-block-image {
	position: relative;
	display: block !important;
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 1 / 1;
	background: #F1F9F4;
	overflow: hidden;
}
body .wp-block-gallery.dk-gallery > .wp-block-image img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	flex: none !important;
	object-fit: cover !important;
	cursor: zoom-in;
}
@media (max-width: 1024px) {
	body .wp-block-gallery.dk-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px;
	}
}
/* page 93 (irrigation): the tall control-panel photo, 460px wide, centred, natural ratio */
body.page-id-93 .dk-section > .wp-block-image img {
	width: 460px;
	max-width: 100%;
	height: auto;
}
.dk-reading {
	text-align: start;
}
/* Gallery captions and buttons follow the reading direction */
.wp-block-gallery figcaption,
.wp-block-button__link {
	text-align: center;
}

/* ===== Header (parts/header.html): sticky white bar, thin green line, logo / menu / language + call button ===== */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #FFFFFF;
	border-bottom: 2px solid var(--wp--preset--color--accent-1);
}
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 46px;
	}
}
.dk-header__bar {
	padding: 10px 24px;
	gap: 1.5rem;
}
.dk-header__logo img {
	display: block;
	height: auto;
	max-width: 100%;
}
.dk-nav {
	flex: 1 1 auto;
	font-family: var(--wp--preset--font-family--ibm-plex-sans-arabic);
	font-weight: 600;
}
html[lang^="en"] .dk-nav {
	font-family: var(--wp--preset--font-family--karla);
	font-weight: 400;
}
.dk-nav a,
.dk-nav .wp-block-navigation-item__content {
	color: #000000;
	text-decoration: none;
}
.dk-nav a:hover,
.dk-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-2);
}
.dk-header__actions {
	gap: 1rem;
	flex: 0 0 auto;
}
.dk-header__actions .wp-block-polylang-language-switcher {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	gap: .75rem;
}
.dk-header__actions .wp-block-polylang-language-switcher a {
	color: #000000;
	text-decoration: none;
	font-size: .95rem;
}
/* "Call us" button: same look as the old Wuilt buttons (Primary, small, radius 20) */
.dk-call {
	display: inline-block;
	background: var(--wp--preset--color--accent-2);
	color: #FFFFFF;
	border-radius: 20px;
	padding: 8px 20px;
	font-size: .95rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}
.dk-call:hover {
	background: var(--wp--preset--color--accent-1);
	color: #000000;
}
@media (max-width: 600px) {
	.dk-header__bar {
		padding: 8px 14px;
		gap: .75rem;
	}
	.dk-call {
		padding: 6px 14px;
		font-size: .85rem;
	}
}

/* ===== Footer (parts/footer.html): white, thin green line on top, 3 columns + bottom bar ===== */
.dk-footer {
	background: #FFFFFF;
	color: #000000;
	border-top: 2px solid var(--wp--preset--color--accent-1);
	padding: 3rem 24px 1.5rem;
}
.dk-footer__top {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
}
@media (max-width: 781px) {
	.dk-footer__top {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}
.dk-footer__title {
	margin: 0 0 .75rem;
	font-size: 1.1rem;
	color: var(--wp--preset--color--accent-2);
}
.dk-footer__col > * + .dk-footer__title {
	margin-top: 1.5rem;
}
.dk-footer :is(.dk-contact, .dk-hours, .dk-links, .dk-social) {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dk-footer :is(.dk-contact__item, .dk-hours__item, .dk-links__item) {
	margin: 0 0 .5rem;
}
.dk-contact__label,
.dk-hours__days {
	color: var(--wp--preset--color--accent-4);
}
.dk-contact__label::after {
	content: ":";
}
.dk-hours__item {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.dk-footer a {
	text-decoration: none;
}
.dk-footer a:hover {
	text-decoration: underline;
}
.dk-social {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.dk-footer .dk-social__link {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--accent-2);
	border-radius: 20px;
	padding: 4px 14px;
	font-size: .9rem;
	line-height: 1.5;
	text-decoration: none;
}
.dk-footer .dk-social__link:hover {
	background: var(--wp--preset--color--accent-2);
	color: #FFFFFF;
	text-decoration: none;
}
.dk-footer__bottom {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid #E5E5E5;
	gap: 1rem;
}
.dk-footer__logo img {
	display: block;
	height: auto;
	max-width: 100%;
}
.dk-copyright {
	margin: 0;
	font-size: .9rem;
	color: var(--wp--preset--color--accent-4);
}
.dk-hours__range {
	display: inline-block;
	direction: ltr;
	unicode-bidi: isolate;
}

/* ===== 1.3.0 reading typography (page content only; the hero/cover is left alone) =====
   Body text 20px desktop / 18px phone, line-height 1.8. Headings, the intro paragraph under a heading and the
   cards are centred at every width. Long paragraphs and lists stay start-aligned (right in RTL) in a column
   of at most 800px. */
body .entry-content :is(p, li):not(.dk-hero *) {
	font-size: 20px;
	line-height: 1.8;
}
@media (max-width: 600px) {
	body .entry-content :is(p, li):not(.dk-hero *) {
		font-size: 18px;
	}
}
body .entry-content :is(h1, h2, h3, h4, h5, h6):not(.dk-hero *) {
	text-align: center;
}
/* intro paragraph right under a heading */
body .entry-content .wp-block-heading + p:not(.dk-hero *):not(.dk-reading *) {
	text-align: center;
	max-width: 800px;
	margin-inline: auto;
}
/* long text: start-aligned, comfortable measure, column centred on the page */
body .entry-content .dk-reading {
	max-width: 800px;
	margin-inline: auto;
}
body .entry-content :is(.dk-reading p:not(.has-text-align-center), .dk-reading ul, .dk-reading ol, .dk-reading li) {
	text-align: start;
}
body .entry-content .dk-section > p:not(.wp-block-heading + p),
body .entry-content .dk-section > :is(ul, ol) {
	text-align: start;
	max-width: 800px;
	margin-inline: auto;
}
/* cards: everything centred */
body .entry-content .dk-cards .wp-block-column {
	text-align: center;
}
body .entry-content .dk-cards :is(h1, h2, h3, h4, h5, h6, p, li) {
	text-align: center;
}
body .entry-content .dk-cards ul {
	padding-inline: 0;
	list-style-position: inside;
}
body .entry-content .dk-cards .wp-block-image img {
	margin-inline: auto;
}
/* footer centred on phones and small tablets */
@media (max-width: 781px) {
	.dk-footer,
	.dk-footer__col {
		text-align: center;
	}
	.dk-footer .dk-hours__item,
	.dk-footer .dk-social,
	.dk-footer__bottom {
		justify-content: center;
	}
	.dk-footer__bottom {
		flex-direction: column;
	}
	.dk-footer__logo {
		margin-inline: auto;
	}
}

/* ===== 1.3.2: service cards = equal-height row, fixed 4:3 image, text + button centred, button pinned to the card bottom ===== */
body .wp-block-columns.dk-cards {
	align-items: stretch !important;
}
body .wp-block-columns.dk-cards > .wp-block-column {
	align-self: stretch !important;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.dk-cards > .wp-block-column > .wp-block-image {
	width: 100%;
	margin: 0;
}
/* same gap under the image slot / placeholder in every card (core's flow margins differ for a pseudo-element) */
.dk-cards > .wp-block-column > :is(h1, h2, h3, h4, h5, h6) {
	margin-top: 1rem;
}
.dk-cards > .wp-block-column > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 100% 100%; /* keep the bottom-right corner (the Deltakon stamp) when a photo is cropped to 4:3 */
}
/* a card without a photo keeps the same slot (light-green tile) so titles line up and the card has the same height */
.dk-cards > .wp-block-column:not(:has(> .wp-block-image))::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #F1F9F4;
}
.dk-cards > .wp-block-column > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1rem;
	justify-content: center;
}

/* ===== 1.3.1: WhatsApp footer label duplicate + header stays one row (601-900px) ===== */
/* The WhatsApp row printed the label and the link with the same word ("واتساب واتساب"): keep only the link. */
.dk-contact__item--whatsapp .dk-contact__label {
	display: none;
}
.dk-header__logo {
	flex: 0 0 auto;
}
.dk-nav .wp-block-navigation__container {
	flex-wrap: nowrap;
}
@media (max-width: 900px) {
	.dk-header__bar {
		gap: 1rem;
	}
	.dk-nav .wp-block-navigation__container {
		gap: 1rem;
	}
	.dk-nav a,
	.dk-nav .wp-block-navigation-item__content {
		font-size: .95rem;
		padding-inline: 0;
	}
	.dk-header__actions {
		gap: .5rem;
	}
}
@media (max-width: 700px) {
	.dk-header__bar {
		padding-inline: 12px;
		gap: .6rem;
	}
	.dk-header__logo img {
		width: 150px;
	}
	.dk-nav .wp-block-navigation__container {
		gap: .65rem;
	}
	.dk-nav a,
	.dk-nav .wp-block-navigation-item__content {
		font-size: .88rem;
	}
	.dk-call {
		padding: 6px 12px;
		font-size: .88rem;
	}
}

/* ===== 1.3.4: language switcher shows BOTH languages (current one green + bold) + header stays one row ===== */
/* Polylang prints the switcher as a div (pll-layout-vertical) with a ul > li list inside: put the list in a row. */
.dk-header__actions .wp-block-polylang-language-switcher ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dk-header__actions .wp-block-polylang-language-switcher li {
	margin: 0;
	white-space: nowrap;
}
.dk-header__actions .wp-block-polylang-language-switcher .current-lang a {
	color: var(--wp--preset--color--accent-2);
	font-weight: 700;
}
/* The fallback menu (5 page links now, 3 levels later) cannot fit next to the logo, the switcher and the call button below 1280px:
   use the same hamburger as on phones (core only switches below 600px) so the bar stays ONE row at every width. */
@media (min-width: 600px) and (max-width: 1279px) {
	body .dk-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	body .dk-nav .wp-block-navigation__responsive-container-open {
		display: flex;
	}
	.dk-nav {
		flex: 0 0 auto;
	}
}
/* Phones: the second language item needs room, so tighten the side padding and the gaps (logo and call button keep their size). */
@media (max-width: 599px) {
	.dk-header.has-global-padding {
		padding-inline: 10px;
	}
	.dk-header__bar {
		padding-inline: 4px;
		gap: .4rem;
	}
	.dk-header__actions {
		gap: .4rem;
	}
	.dk-header__actions .wp-block-polylang-language-switcher ul {
		gap: .4rem;
	}
	.dk-header__actions .wp-block-polylang-language-switcher a {
		font-size: .8rem;
	}
}
/* Very narrow phones (360px class): the bar is still 34px too wide with both languages, so the logo gets smaller here only. */
@media (max-width: 389px) {
	.dk-header__logo img {
		width: 120px;
	}
}

/* ===== 1.3.6 ===== */
/* .dk-img-medium (class on a core/image block): large portrait photo shown medium-sized: at most 760px wide, centred, 4:3 frame filled by the photo
   (object-fit cover, focus 35% from the top), never enlarged past its own width (width:auto + max-width), same logic on phones (frame shrinks with the column). */
body .entry-content .dk-section > .wp-block-image.dk-img-medium {
	max-width: 760px;
	margin-inline: auto;
}
body .entry-content .dk-section > .wp-block-image.dk-img-medium img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 35%;
	margin-inline: auto;
}
/* Services table on phones: smaller type and cell padding so it needs less width (it still scrolls sideways inside its own frame if it does not fit) */
@media (max-width: 600px) {
	body .entry-content .wp-block-table table {
		font-size: 13px;
	}
	body .entry-content .wp-block-table :is(td, th) {
		padding: 0.4em 0.2em;
	}
}

body .wp-block-cover.dk-hero {
	min-height: clamp(380px, 32vw, 500px) !important;
}
body .wp-block-cover.dk-hero > .wp-block-cover__image-background {
	object-position: var(--dk-hero-pos, 50% 55%);
}

@media (max-width: 600px) {
	body.page-id-2303 .wp-block-cover.dk-hero,
	body.page-id-2304 .wp-block-cover.dk-hero {
		min-height: 130px !important;
	}
}