/*
Theme Name: LOSD Bilingual Direct Editing
Theme URI: https://losd.org
Author: Leaders Organization for Sustainable Development
Author URI: https://losd.org
Description: A bilingual (Arabic-root / English-mirror) classic PHP theme for the Leaders Organization for Sustainable Development, with a native "LOSD Website" admin control panel for direct, no-code editing of every public page in both languages.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: losd
*/

/* =========================================================================
   1. DESIGN TOKENS — LOSD brand palette, type, spacing
   Built RTL-first: Arabic is the root/default language and direction.
   All layout uses CSS logical properties so English (loaded via
   style-ltr.css) mirrors automatically without a hand-built LTR variant.
   ========================================================================= */
:root {
	/* Color */
	--losd-teal: #038d98;
	--losd-teal-shade-20: #027179;
	--losd-teal-shade-40: #025559;
	--losd-teal-shade-60: #01383d;
	--losd-teal-shade-80: #011c1e;
	--losd-teal-tint-20: #cce8ea;
	--losd-teal-tint-40: #9ad1d5;
	--losd-teal-tint-60: #67bac1;
	--losd-teal-tint-80: #35a3ad;

	--losd-gold: #e2a30a;
	--losd-gold-shade-20: #b58208;
	--losd-gold-shade-40: #886206;
	--losd-gold-shade-60: #5a4104;
	--losd-gold-shade-80: #2d2102;
	--losd-gold-tint-20: #f9ecce;
	--losd-gold-tint-40: #f3da9d;
	--losd-gold-tint-60: #eec86c;
	--losd-gold-tint-80: #e8b53b;

	--losd-charcoal: #16292b;
	--losd-offwhite: #faf8f4;
	--losd-border: #e7e2d8;
	--losd-white: #ffffff;

	/* Semantic aliases */
	--losd-color-bg: var(--losd-offwhite);
	--losd-color-surface: var(--losd-white);
	--losd-color-text: var(--losd-charcoal);
	--losd-color-text-muted: color-mix(in srgb, var(--losd-charcoal) 70%, var(--losd-offwhite));
	--losd-color-link: var(--losd-teal-shade-20);
	--losd-color-accent: var(--losd-gold);
	--losd-color-primary: var(--losd-teal);
	--losd-color-border: var(--losd-border);
	--losd-color-focus: var(--losd-teal);

	/* Type — Arabic default (root language) */
	--losd-font-display: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--losd-font-body: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
	--losd-font-weight-display: 800;
	--losd-font-weight-display-h2: 700;
	--losd-font-weight-body: 400;
	--losd-font-weight-body-strong: 500;
	--losd-body-line-height: 1.7;

	/* Fluid type scale (Arabic sizes; English overrides run ~15-20% smaller) */
	--losd-size-h1: clamp(2rem, 1.5rem + 2vw, 4rem);       /* 32–64px */
	--losd-size-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);  /* 24–40px */
	--losd-size-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);/* 20–28px */
	--losd-size-body: 1.25rem;   /* 20px */
	--losd-size-caption: 0.9375rem; /* 15px */

	/* Spacing scale */
	--losd-space-xs: 0.5rem;
	--losd-space-sm: 1rem;
	--losd-space-md: 1.5rem;
	--losd-space-lg: 2.5rem;
	--losd-space-xl: 4rem;
	--losd-space-2xl: 6rem;

	/* Layout */
	--losd-content-width: 1280px;
	--losd-gutter: 5rem;       /* 80px desktop */
	--losd-radius-card: 8px;
	--losd-radius-pill: 999px;

	/* Signature circular photo-frame component */
	--losd-frame-stroke: 10px;
	--losd-frame-stroke-sm: 6px;

	color-scheme: light;
}

@media (max-width: 1024px) {
	:root {
		--losd-gutter: 2.5rem; /* 40px tablet */
	}
}
@media (max-width: 375px), (max-width: 480px) {
	:root {
		--losd-gutter: 1.25rem; /* 20px mobile */
	}
}

/* =========================================================================
   2. RESET / BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--losd-color-bg);
	color: var(--losd-color-text);
	font-family: var(--losd-font-body);
	font-weight: var(--losd-font-weight-body);
	font-size: var(--losd-size-body);
	line-height: var(--losd-body-line-height);
	direction: rtl;
	text-align: start;
}
html[dir="ltr"] body { direction: ltr; }

img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--losd-font-display);
	font-weight: var(--losd-font-weight-display);
	line-height: 1.25;
	margin-block: 0 var(--losd-space-sm);
	color: var(--losd-color-text);
}
h1 { font-size: var(--losd-size-h1); font-weight: 800; }
h2 { font-size: var(--losd-size-h2); font-weight: 700; }
h3 { font-size: var(--losd-size-h3); font-weight: 700; }
p { margin-block: 0 var(--losd-space-sm); }
a { color: var(--losd-color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding-inline-start: 1.25em; }
button { font-family: inherit; }

/* Never italicize Arabic; mono/date islands stay LTR even inside RTL flow */
html[dir="rtl"] em, html[dir="rtl"] i { font-style: normal; }
.losd-ltr-island { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Visible focus ring on every interactive element — never removed */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
	outline: 3px solid var(--losd-color-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.screen-reader-text:focus {
	position: fixed; inset-inline-start: var(--losd-space-sm); top: var(--losd-space-sm);
	width: auto; height: auto; clip: auto; z-index: 100000;
	background: var(--losd-color-primary); color: var(--losd-white);
	padding: var(--losd-space-xs) var(--losd-space-sm); border-radius: 4px;
}

/* =========================================================================
   3. LAYOUT
   ========================================================================= */
.losd-container {
	max-width: var(--losd-content-width);
	margin-inline: auto;
	padding-inline: var(--losd-gutter);
}
.losd-section { padding-block: var(--losd-space-2xl); }
.losd-section--tight { padding-block: var(--losd-space-xl); }
.losd-section--surface { background: var(--losd-color-surface); }
.losd-section--dark { background: var(--losd-charcoal); color: var(--losd-offwhite); }
.losd-section--dark h1, .losd-section--dark h2, .losd-section--dark h3 { color: var(--losd-offwhite); }
.losd-eyebrow {
	display: inline-flex; align-items: center; gap: 0.4em;
	background: var(--losd-gold-tint-20); color: var(--losd-gold-shade-40);
	font-family: var(--losd-font-body); font-weight: 700; font-size: var(--losd-size-caption);
	letter-spacing: 0.04em; padding: 0.4em 1em; border-radius: var(--losd-radius-pill);
	margin-block-end: var(--losd-space-sm);
}

/* =========================================================================
   4. BUTTONS / PILLS / TAGS
   ========================================================================= */
.losd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	font-family: var(--losd-font-body); font-weight: 700; font-size: 1rem;
	padding: 0.85em 1.75em; border-radius: var(--losd-radius-pill);
	border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.losd-btn--primary { background: var(--losd-color-primary); color: var(--losd-white); }
.losd-btn--primary:hover { background: var(--losd-teal-shade-20); text-decoration: none; }
.losd-btn--outline { background: transparent; color: var(--losd-color-primary); border-color: var(--losd-color-primary); }
.losd-btn--outline:hover { background: var(--losd-teal-tint-20); text-decoration: none; }
.losd-btn[disabled], .losd-btn--disabled {
	background: var(--losd-border); color: var(--losd-color-text-muted); border-color: var(--losd-border);
	cursor: not-allowed; pointer-events: none;
}
.losd-tag {
	display: inline-flex; align-items: center; gap: 0.4em;
	background: var(--losd-teal-tint-20); color: var(--losd-teal-shade-40);
	font-size: var(--losd-size-caption); font-weight: 700; padding: 0.35em 0.9em; border-radius: var(--losd-radius-pill);
}
.losd-tag--gold { background: var(--losd-gold-tint-20); color: var(--losd-gold-shade-40); }
.losd-tag--muted { background: var(--losd-border); color: var(--losd-color-text-muted); }

/* =========================================================================
   5. SITE HEADER + NAVIGATION + LANGUAGE SWITCHER
   ========================================================================= */
.site-header {
	position: sticky; top: 0; z-index: 500;
	background: var(--losd-color-surface);
	border-block-end: 1px solid var(--losd-color-border);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--losd-space-md); padding-block: var(--losd-space-sm);
}
.site-branding { display: flex; align-items: center; gap: 0.75em; text-decoration: none; }
.site-branding img { height: 40px; width: auto; }
.site-branding__word { display: flex; flex-direction: column; line-height: 1.2; }
.site-branding__word strong { font-family: var(--losd-font-display); font-weight: 700; font-size: 0.95rem; color: var(--losd-color-text); }
.site-branding__word span { font-family: var(--losd-font-body); font-weight: 500; font-size: 0.7rem; color: var(--losd-color-text-muted); }

.primary-navigation { display: none; }
.primary-navigation ul { display: flex; align-items: center; gap: var(--losd-space-md); list-style: none; padding: 0; margin: 0; }
.primary-navigation a { color: var(--losd-color-text); font-weight: 500; }
.primary-navigation a[aria-current="page"] { color: var(--losd-color-primary); font-weight: 700; }
@media (min-width: 1025px) { .primary-navigation { display: block; } }

.site-header__actions { display: flex; align-items: center; gap: var(--losd-space-sm); }
.losd-lang-switch {
	display: inline-flex; align-items: center; border: 1px solid var(--losd-color-border);
	border-radius: var(--losd-radius-pill); padding: 0.3em 0.9em; font-weight: 700; font-size: 0.85rem;
	color: var(--losd-color-text); background: var(--losd-color-surface);
}
.losd-lang-switch:hover { background: var(--losd-teal-tint-20); text-decoration: none; }
.losd-menu-toggle {
	display: inline-flex; background: none; border: 1px solid var(--losd-color-border); border-radius: 8px;
	padding: 0.5em; cursor: pointer;
}
@media (min-width: 1025px) { .losd-menu-toggle { display: none; } }

.losd-mobile-nav { display: none; border-block-start: 1px solid var(--losd-color-border); padding: var(--losd-space-sm) 0; }
.losd-mobile-nav.is-open { display: block; }
.losd-mobile-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--losd-space-xs); }
@media (min-width: 1025px) { .losd-mobile-nav { display: none !important; } }

/* =========================================================================
   6. HERO
   ========================================================================= */
.losd-hero {
	padding-block: var(--losd-space-2xl);
	display: grid; gap: var(--losd-space-lg); align-items: center;
}
.losd-hero--home { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 1024px) { .losd-hero--home { grid-template-columns: 1fr; } .losd-hero--home .losd-hero__media { order: -1; } }
.losd-hero--interior { grid-template-columns: 1fr; padding-block: var(--losd-space-xl); text-align: start; }
.losd-hero__heading { max-width: 40ch; }
.losd-hero__description { max-width: 55ch; color: var(--losd-color-text-muted); font-size: 1.1rem; }
.losd-hero__actions { display: flex; flex-wrap: wrap; gap: var(--losd-space-sm); margin-block-start: var(--losd-space-md); }
.losd-hero__media { display: flex; justify-content: center; }

/* =========================================================================
   7. CIRCULAR PHOTO-FRAME + BANNER STRIP — signature motif
   "the logo's arc, applied to photos"
   ========================================================================= */
.losd-photo-frame {
	position: relative;
	display: inline-flex; flex-direction: column; align-items: center;
	width: fit-content;
}
.losd-photo-frame__circle {
	width: 260px; height: 260px; border-radius: 50%;
	border: var(--losd-frame-stroke) solid var(--losd-teal);
	overflow: hidden; background: var(--losd-border);
	display: flex; align-items: center; justify-content: center;
}
.losd-photo-frame__circle img { width: 100%; height: 100%; object-fit: cover; }
.losd-photo-frame__circle--placeholder { color: var(--losd-color-text-muted); font-size: 0.85rem; text-align: center; padding: var(--losd-space-sm); }
.losd-photo-frame__banner {
	margin-block-start: calc(var(--losd-frame-stroke) * -1);
	background: var(--losd-teal); color: var(--losd-offwhite);
	font-family: var(--losd-font-display); font-weight: 700; font-size: 0.85rem;
	padding: 0.5em 1.25em; border-radius: var(--losd-radius-pill);
	white-space: nowrap; z-index: 1;
}
.losd-photo-frame--sm .losd-photo-frame__circle { width: 190px; height: 190px; border-width: var(--losd-frame-stroke-sm); }
.losd-photo-frame--xs .losd-photo-frame__circle { width: 150px; height: 150px; border-width: var(--losd-frame-stroke-sm); }
.losd-photo-frame--xxs .losd-photo-frame__circle { width: 100px; height: 100px; border-width: var(--losd-frame-stroke-sm); }

/* =========================================================================
   8. STAT STRIP — dark bg, gold numerals (contrast-safe: gold only on dark)
   ========================================================================= */
.losd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--losd-space-lg); text-align: center; }
@media (max-width: 768px) { .losd-stats { grid-template-columns: 1fr; gap: var(--losd-space-md); } }
.losd-stat__value { font-family: var(--losd-font-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem); color: var(--losd-gold); display: block; }
.losd-stat__label { font-size: 1rem; color: var(--losd-offwhite); opacity: .9; }

/* =========================================================================
   9. CARD GRIDS — values, programs, governance, partners
   ========================================================================= */
.losd-grid { display: grid; gap: var(--losd-space-md); }
.losd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.losd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.losd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.losd-grid--6 { grid-template-columns: repeat(6, 1fr); align-items: center; }
@media (max-width: 1024px) { .losd-grid--3, .losd-grid--4 { grid-template-columns: repeat(2, 1fr); } .losd-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .losd-grid--2, .losd-grid--3, .losd-grid--4 { grid-template-columns: 1fr; } .losd-grid--6 { grid-template-columns: repeat(2, 1fr); } }

.losd-card {
	background: var(--losd-color-surface); border: 1px solid var(--losd-color-border);
	border-radius: var(--losd-radius-card); padding: var(--losd-space-md);
	display: flex; flex-direction: column; gap: 0.5em;
}
.losd-card--dashed { border-style: dashed; background: transparent; }
.losd-card__icon-badge {
	width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	font-family: var(--losd-font-display); font-weight: 700; font-size: 1.1rem;
	background: var(--losd-teal-tint-20); color: var(--losd-teal-shade-40); margin-block-end: 0.25em;
}
.losd-card:nth-child(even) .losd-card__icon-badge { background: var(--losd-gold-tint-20); color: var(--losd-gold-shade-40); }

.losd-value-card__desc { color: var(--losd-color-text-muted); font-size: 0.95rem; }

.losd-program-card, .losd-news-card { align-items: center; text-align: center; }
.losd-program-card__title { margin-block-start: var(--losd-space-sm); }

.losd-partner-tile { display: flex; align-items: center; justify-content: center; padding: var(--losd-space-sm); filter: grayscale(15%); }
.losd-partner-tile img { max-height: 64px; width: auto; }
.losd-partner-empty {
	grid-column: 1 / -1; text-align: center; padding: var(--losd-space-lg);
	border: 1px dashed var(--losd-color-border); border-radius: var(--losd-radius-card); color: var(--losd-color-text-muted);
}

/* =========================================================================
   10. GOVERNANCE
   ========================================================================= */
.losd-governance-group { margin-block-end: var(--losd-space-lg); }
.losd-governance-group__title { color: var(--losd-teal-shade-20); }
.losd-governance-card { text-align: center; }
.losd-governance-card__role { font-weight: 700; }
.losd-governance-card__name { color: var(--losd-color-text-muted); font-size: 0.95rem; }
.losd-governance-card__name--empty { font-style: normal; opacity: .6; }

/* =========================================================================
   11. FORUM EDITION SINGLE — agenda + gallery
   ========================================================================= */
.losd-back-link { display: inline-flex; align-items: center; gap: 0.4em; margin-block-end: var(--losd-space-md); font-weight: 700; }
.losd-agenda { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--losd-space-md); margin-block: var(--losd-space-lg); }
@media (max-width: 1024px) { .losd-agenda { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .losd-agenda { grid-template-columns: 1fr; } }
.losd-agenda__stage { border-inline-start: 3px solid var(--losd-teal); padding-inline-start: var(--losd-space-sm); }
.losd-agenda__stage h3 { font-size: 1rem; color: var(--losd-teal-shade-20); }
.losd-agenda__row { padding-block: var(--losd-space-xs); border-block-end: 1px solid var(--losd-color-border); }
.losd-agenda__row:last-child { border-block-end: 0; }
.losd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--losd-space-md); justify-items: center; margin-block-start: var(--losd-space-md); }

/* =========================================================================
   12. CTA BAND
   ========================================================================= */
.losd-cta-band { text-align: center; }
.losd-cta-band__actions { display: flex; justify-content: center; gap: var(--losd-space-sm); flex-wrap: wrap; margin-block-start: var(--losd-space-sm); }

/* =========================================================================
   13. MISSION / VISION / VALUES BLOCKS (About)
   ========================================================================= */
.losd-mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--losd-space-md); }
@media (max-width: 768px) { .losd-mv-grid { grid-template-columns: 1fr; } }
.losd-mv-card { border-radius: var(--losd-radius-card); padding: var(--losd-space-lg); }
.losd-mv-card--mission { background: var(--losd-teal); color: var(--losd-offwhite); }
.losd-mv-card--mission p { font-family: var(--losd-font-display); font-weight: 700; font-size: 1.15rem; }
.losd-mv-card--vision { background: var(--losd-color-surface); border: 1px solid var(--losd-color-border); }
.losd-mv-card__label { font-size: var(--losd-size-caption); text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-block-end: .5em; }

.losd-values-note { color: var(--losd-color-text-muted); font-size: 0.9rem; margin-block-start: var(--losd-space-sm); }

/* =========================================================================
   14. CONTACT
   ========================================================================= */
.losd-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--losd-space-lg); align-items: start; }
@media (max-width: 900px) { .losd-contact-grid { grid-template-columns: 1fr; } }
.losd-contact-method { display: flex; gap: var(--losd-space-sm); align-items: flex-start; padding-block: var(--losd-space-xs); }
.losd-contact-method__label { font-weight: 700; display: block; }
.losd-map-placeholder {
	background: var(--losd-border); border-radius: var(--losd-radius-card); min-height: 220px;
	display: flex; align-items: center; justify-content: center; color: var(--losd-color-text-muted); margin-block-start: var(--losd-space-sm);
}
.losd-form { display: flex; flex-direction: column; gap: var(--losd-space-sm); }
.losd-form label { font-weight: 700; display: block; margin-block-end: 0.35em; }
.losd-form input[type="text"], .losd-form input[type="email"], .losd-form input[type="tel"],
.losd-form select, .losd-form textarea {
	width: 100%; padding: 0.75em 1em; border: 1px solid var(--losd-color-border); border-radius: 6px;
	font-family: inherit; font-size: 1rem; background: var(--losd-color-surface); color: var(--losd-color-text);
}
.losd-form textarea { min-height: 140px; resize: vertical; }
.losd-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.losd-form-message { padding: var(--losd-space-sm); border-radius: 6px; margin-block-end: var(--losd-space-sm); }
.losd-form-message--success { background: var(--losd-teal-tint-20); color: var(--losd-teal-shade-40); }
.losd-form-message--error { background: var(--losd-gold-tint-20); color: var(--losd-gold-shade-60); }

/* =========================================================================
   15. FOOTER
   ========================================================================= */
.site-footer { background: var(--losd-charcoal); color: var(--losd-offwhite); padding-block: var(--losd-space-xl); }
.site-footer a { color: var(--losd-offwhite); }
.site-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--losd-space-lg); }
@media (max-width: 768px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__brand img { height: 44px; margin-block-end: var(--losd-space-sm); }
.site-footer__meta { color: var(--losd-offwhite); opacity: .75; font-size: 0.9rem; }
.site-footer__heading { font-family: var(--losd-font-display); font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: .04em; margin-block-end: var(--losd-space-sm); color: var(--losd-offwhite); }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5em; }
.site-footer__bottom { border-block-start: 1px solid rgba(255,255,255,.15); margin-block-start: var(--losd-space-lg); padding-block-start: var(--losd-space-md); text-align: center; font-size: 0.85rem; opacity: .75; }

/* =========================================================================
   16. NEWS / ARCHIVES / PAGINATION
   ========================================================================= */
.losd-pagination { display: flex; gap: 0.5em; justify-content: center; margin-block-start: var(--losd-space-lg); list-style: none; padding: 0; }
.losd-pagination a, .losd-pagination span { padding: 0.5em 0.9em; border: 1px solid var(--losd-color-border); border-radius: 6px; }
.losd-pagination .current { background: var(--losd-teal); color: var(--losd-white); border-color: var(--losd-teal); }

/* =========================================================================
   17. UTILITIES
   ========================================================================= */
.losd-empty-state { text-align: center; padding: var(--losd-space-xl); color: var(--losd-color-text-muted); }
.losd-draft-badge { display: inline-block; background: var(--losd-gold-tint-20); color: var(--losd-gold-shade-60); font-size: 0.75rem; font-weight: 700; padding: .25em .75em; border-radius: var(--losd-radius-pill); margin-inline-end: .5em; }