/* Extras for the static Green Gardens site (loaded after main.css). */

/* ---------- Header: logo | centred links | icons + language ---------- */
.site-header {
	display: grid; grid-template-columns: 1fr auto 1fr; justify-content: normal; gap: 24px;
}
.site-logo { position: relative; z-index: 2; justify-self: start; }
.site-logo img { height: 46px; width: auto; display: block; }
.site-logo .logo-green { display: none; }
.site-header.is-solid .logo-white { display: none; }
.site-header.is-solid .logo-green { display: block; }
.menu-open .site-header .logo-white,
.menu-open .site-header.is-solid .logo-white { display: block; }
.menu-open .site-header .logo-green,
.menu-open .site-header.is-solid .logo-green { display: none; }
.site-footer__logo-img { height: 56px; width: auto; margin-bottom: 16px; }

.site-nav__list a.is-current::after { transform: scaleX(1); }

.site-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }

/* Social + location icons (header and footer) */
.social { display: flex; align-items: center; gap: 2px; }
.social a {
	display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.social a:hover { background: rgba(255, 255, 255, .2); }
.site-header.is-solid .social a:hover { background: var(--c-tint); color: var(--c-accent); }
.social svg { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Language switch: a circle that says "Ar" or "En" */
.lang-switch {
	display: grid; place-items: center; flex: none; width: 38px; height: 38px;
	border: 1.5px solid currentColor; border-radius: 50%;
	font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: 0;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.site-header:not(.is-solid) .lang-switch:hover { background: #fff; color: var(--c-accent); border-color: #fff; }
.site-header.is-solid .lang-switch:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

/* Small screens: links + icons move into the full-screen menu */
@media (max-width: 1240px) {
	.site-header { display: flex; justify-content: space-between; }
	.site-actions { display: none; }
	.menu-open .site-actions {
		display: flex; flex-direction: column; align-items: center; gap: 22px;
		position: fixed; inset-inline: 0; bottom: 8vh; z-index: 3; color: #fff;
	}
	.menu-open .social { flex-wrap: wrap; justify-content: center; max-width: 360px; gap: 6px; }
	.menu-open .social a { width: 42px; height: 42px; }
	.menu-open .social a:hover,
	.menu-open .site-header.is-solid .social a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
	.menu-open .site-header .lang-switch:hover,
	.menu-open .site-header.is-solid .lang-switch:hover { background: #fff; color: var(--c-accent-dark); border-color: #fff; }
}

/* Full-screen menu: Arabic links as large as the English ones; tighter spacing on short phones */
@media (max-width: 1240px) {
	html[lang="ar"] .site-nav__list { font-size: 20px; }
}
@media (max-width: 1240px) and (max-height: 700px) {
	.site-nav__list, html[lang="ar"] .site-nav__list { font-size: 17px; gap: 10px; }
	.menu-open .site-actions { bottom: 3vh; gap: 14px; }
	.menu-open .social a { width: 38px; height: 38px; }
}

/* ---------- Hero / partners ---------- */
.hero__actions { margin: 30px 0 0; }
html[dir="rtl"] .hero__scroll { right: auto; left: 28px; }
.hero__actions .btn { padding: 16px 40px; font-size: 15px; }
.hero { background: var(--c-accent-dark) url("../images/banners/banner-1.webp") center / cover no-repeat; }

.partners { background: var(--c-accent); }
.partners .section__label { color: rgba(255, 255, 255, .8); }
.partners .section__title { color: #fff; }
.marquee { direction: ltr; }
.partners .marquee__logo {
	width: 210px; height: 110px; padding: 18px 26px; overflow: hidden;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 12px;
}
.partners .marquee__logo img { width: auto; height: auto; max-width: 150px; max-height: 64px; object-fit: contain; }
@media (max-width: 640px) {
	.partners .marquee__logo { width: 160px; height: 90px; padding: 12px 16px; }
	.partners .marquee__logo img { max-width: 110px; max-height: 52px; }
}

/* ---------- Works ---------- */
button.chip { background: none; font: inherit; font-size: 13px; color: inherit; cursor: pointer; }
button.chip:hover, button.chip.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.work-card[hidden] { display: none; }
/* Home page shows four cards in one row on wide screens */
@media (min-width: 1001px) { .works__grid--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

/* ---------- Certificates ---------- */
.cert-card .cert-icon { width: 44px; height: 44px; fill: var(--c-accent); display: block; margin-bottom: 16px; }
.cert-card h3 { font-size: 22px; margin-bottom: 6px; }

/* ---------- Inner-page building blocks ---------- */
.section--compact { padding: clamp(40px, 6vw, 80px) 0; }
.lead { font-size: 18px; max-width: 720px; margin-bottom: 0; }
.section__title--sm { font-size: clamp(22px, 3vw, 30px); margin-bottom: 28px; }
.feature-card--plain:hover { transform: none; border-color: var(--c-line); box-shadow: none; }
.features__grid--4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
.features__grid--flush { margin-bottom: 0; }
@media (max-width: 1000px) { .features__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px) { .features__grid--flush { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .features__grid--4 { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; border-top: 1px solid var(--c-line); margin: 0; }
.facts dt, .facts dd { margin: 0; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.facts dt { font-weight: 600; color: var(--c-ink); }
.facts a { text-decoration: underline; text-underline-offset: 3px; }
.checklist { display: grid; gap: 12px; margin-top: 24px; }
.checklist li { padding-inline-start: 28px; position: relative; }
.checklist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 14px; height: 2px; background: var(--c-accent); }
.actions { margin-top: 32px; }

/* ---------- Contact form ---------- */
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--c-ink); }
.form input, .form textarea {
	width: 100%; padding: 12px 14px; font: inherit; color: var(--c-text);
	border: 1px solid var(--c-line); border-radius: 10px; background: #fff;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.form textarea { min-height: 160px; resize: vertical; }
.form button { justify-self: start; cursor: pointer; }
.crumb a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Footer ---------- */
.site-footer__grid { align-items: center; }
.site-footer address a { text-decoration: underline; text-underline-offset: 3px; }
.social--footer { flex-wrap: wrap; gap: 10px; }
.social--footer a { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .35); }
.social--footer a:hover { background: #fff; color: var(--c-accent-dark); border-color: #fff; }
.social--footer svg { width: 19px; height: 19px; }

/* ---------- Arabic (right-to-left) ---------- */
html[lang="ar"] {
	--font-sans: "Tajawal", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-serif: "Amiri", "Playfair Display", Georgia, serif;
}
html[lang="ar"] body { font-size: 17px; line-height: 1.95; }
/* letter-spacing breaks Arabic letter joining, so switch it off everywhere */
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] .section__label { font-size: 14px; text-transform: none; }
html[lang="ar"] .hero__eyebrow { font-size: 15px; text-transform: none; }
html[lang="ar"] .hero__title { line-height: 1.45; }
html[lang="ar"] .section__title, html[lang="ar"] .page-head__title { line-height: 1.5; }
html[lang="ar"] .site-nav__list { font-size: 15px; }
html[lang="ar"] .btn { font-size: 15px; }

/* ---------- Works: cards, detail page, gallery, lightbox ---------- */
.work-card__body p {
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.work-card__loc, .work-meta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-muted); margin: 0 0 10px; }
.work-meta { font-size: 15px; margin-bottom: 20px; }
.pin { width: 15px; height: 15px; fill: var(--c-accent); flex: none; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.tags li { font-size: 12px; padding: 5px 12px; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-accent); background: #fff; }
.container--narrow { max-width: 820px; }
.entry p { font-size: 17px; line-height: 1.9; }
.gallery { columns: 3 280px; column-gap: 16px; }
.gallery__item { display: block; margin: 0 0 16px; break-inside: avoid; border-radius: 10px; overflow: hidden; }
.gallery__item img { width: 100%; height: auto; display: block; transition: transform .4s var(--ease); }
.gallery__item:hover img { transform: scale(1.03); }
.work-soon { margin: 0; text-align: center; }
.work-soon img { width: 100%; height: auto; border-radius: 10px; display: block; }
.work-soon figcaption { margin-top: 12px; color: var(--c-muted); font-size: 14px; }
#works-empty { text-align: center; color: var(--c-muted); margin-top: 32px; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(10, 20, 17, .92); display: grid; place-items: center; padding: 56px 16px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.lightbox__btn { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; font-size: 28px; line-height: 1; cursor: pointer; }
.lightbox__btn:hover { background: rgba(255,255,255,.28); }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 14px; top: 50%; transform: translateY(-50%); }

.notice { padding: 14px 18px; margin-bottom: 24px; border-radius: 10px; background: var(--c-tint); border: 1px solid var(--c-accent); color: var(--c-accent-dark); }