/* Colours of the site: from the olive tree and the land of Palestine.
   Dark «ليل الزيتون» is the default; light «حجر ونهار» when <html data-theme="light"> (the switch
   next to the search button, remembered in the browser). Every text colour passes WCAG AA. */

:root {
    --color-bg: #14130e;            /* olive-wood night */
    --color-surface: #1f1d16;       /* old olive bark */
    --color-raised: #26231b;
    --color-primary: #a9b56e;       /* olive leaf */
    --color-primary-dim: #6f7a3c;   /* green olive */
    --color-accent: #d07a4f;        /* terra rossa */
    --color-oil: #d6b656;           /* new olive oil */
    --color-soil: #d07a4f;          /* terra rossa */
    --color-text-main: #efe8d8;     /* limestone */
    --color-text-muted: #b3aa94;
    --color-text-strong: #fffaf0;
    --color-on-primary: #14130e;
    --color-warning: #e0a650;

    --color-line-faint: rgba(239, 232, 216, 0.06);
    --color-line: rgba(239, 232, 216, 0.1);
    --color-line-strong: rgba(239, 232, 216, 0.2);
    --color-line-bold: rgba(239, 232, 216, 0.32);
    --color-tint-faint: rgba(239, 232, 216, 0.02);
    --color-tint: rgba(239, 232, 216, 0.05);
    --color-tint-strong: rgba(239, 232, 216, 0.1);
    --color-nav: rgba(20, 19, 14, 0.92);
    --color-nav-solid: rgba(20, 19, 14, 0.98);
    --color-panel: rgba(31, 29, 22, 0.98);
    --color-ghost: rgba(0, 0, 0, 0.3);
    --color-input: rgba(0, 0, 0, 0.25);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --color-bg: #f6f1e5;            /* Jerusalem limestone */
    --color-surface: #fffcf4;       /* lime-washed wall */
    --color-raised: #ece4d2;
    --color-primary: #55632a;       /* deep olive leaf */
    --color-primary-dim: #8a9a5b;   /* silver-green olive */
    --color-accent: #9a4426;
    --color-oil: #7f6210;           /* olive oil, darkened for reading */
    --color-soil: #9a4426;          /* terra rossa */
    --color-text-main: #2a2a1f;     /* olive bark */
    --color-text-muted: #5f5a4a;
    --color-text-strong: #14130e;
    --color-on-primary: #fffcf4;
    --color-warning: #9a5a10;

    --color-line-faint: rgba(42, 42, 31, 0.08);
    --color-line: rgba(42, 42, 31, 0.13);
    --color-line-strong: rgba(42, 42, 31, 0.22);
    --color-line-bold: rgba(42, 42, 31, 0.35);
    --color-tint-faint: rgba(42, 42, 31, 0.02);
    --color-tint: rgba(42, 42, 31, 0.05);
    --color-tint-strong: rgba(42, 42, 31, 0.09);
    --color-nav: rgba(246, 241, 229, 0.94);
    --color-nav-solid: rgba(246, 241, 229, 0.99);
    --color-panel: rgba(255, 252, 244, 0.99);
    --color-ghost: rgba(255, 252, 244, 0.6);
    --color-input: #fffcf4;
    /* "light dark": the page still declares it supports dark, so phone browsers with an automatic
       dark mode (Samsung Internet, Chrome) leave its colours alone */
    color-scheme: light dark;
}

/* Surfaces that stay dark in both modes (Hamza's photo, video stills, the reader, the
   photo viewer, the section cards): they take the dark colours wherever they are */
:root[data-theme="light"] .home2-hero,
:root[data-theme="light"] .archive-section-card,
:root[data-theme="light"] .home2-pick-big,
:root[data-theme="light"] .reader-overlay,
:root[data-theme="light"] #photo-lightbox {
    --color-bg: #14130e;
    --color-surface: #1f1d16;
    --color-primary: #a9b56e;
    --color-oil: #d6b656;
    --color-text-main: #efe8d8;
    --color-text-muted: #cfc6b0;
    --color-text-strong: #fffaf0;
    --color-on-primary: #14130e;
    --color-line: rgba(239, 232, 216, 0.1);
    --color-line-strong: rgba(239, 232, 216, 0.25);
    --color-line-bold: rgba(239, 232, 216, 0.4);
    --color-tint: rgba(239, 232, 216, 0.05);
    --color-tint-strong: rgba(239, 232, 216, 0.1);
    --color-ghost: rgba(0, 0, 0, 0.3);
    color: var(--color-text-main);
}

.archive-section-card {
    background: #14130e;
}

/* The light page fades into the photo of the opening */
:root[data-theme="light"] .home2-hero {
    background: linear-gradient(to bottom, rgba(20, 19, 14, 0.35), rgba(20, 19, 14, 0.78) 78%, var(--page-bg-light, #f6f1e5));
}

/* Meaning in the colours: numbers in olive oil, places in red soil, topics in olive */
.home2-stats strong {
    color: var(--color-oil);
}

.home2-tagline,
.home2-hero-quote {
    color: var(--color-oil);
}

.home2-facts span {
    border-color: var(--color-oil);
    color: var(--color-oil);
}

.home2-pick small,
.home2-pick-caption small,
.archive-section-body i {
    color: var(--color-oil);
}

.subject-chip-place {
    color: var(--color-soil);
    border-color: var(--color-soil);
    background: color-mix(in srgb, var(--color-soil) 7%, transparent);
}

.subject-chip-place:hover,
.subject-chip-place:focus-visible {
    background: color-mix(in srgb, var(--color-soil) 16%, transparent);
}

.home2-quote {
    border-right-color: var(--color-soil);
}

.home2-contribute {
    border-right-color: var(--color-oil);
}

.home2-alt {
    background: var(--color-raised);
}

:root:not([data-theme="light"]) .home2-alt {
    background: var(--color-surface);
}

.home2-social a {
    background: var(--color-surface);
    color: var(--color-text-main);
}

.home2-social a i {
    color: var(--color-primary);
}

/* The biography's links keep their brand colours: lighter shades on dark, darker on light, so they stay readable */
#about a[style*="255, 0, 0"] { color: #ff6b6b !important; }
#about a[style*="225, 48, 108"] { color: #f0739d !important; }
#about a[style*="24, 119, 242"] { color: #6ea8fe !important; }
#about a[style*="255, 152, 0"] { color: #ffb547 !important; }
#about a[style*="76, 175, 80"] { color: #7cc57f !important; }
:root[data-theme="light"] #about a[style*="255, 0, 0"] { color: #c00000 !important; }
:root[data-theme="light"] #about a[style*="225, 48, 108"] { color: #b0174c !important; }
:root[data-theme="light"] #about a[style*="24, 119, 242"] { color: #0f5bc4 !important; }
:root[data-theme="light"] #about a[style*="255, 152, 0"] { color: #8f5200 !important; }
:root[data-theme="light"] #about a[style*="76, 175, 80"] { color: #2e6b31 !important; }

/* The awards' organisation lines were in the faint olive */
#about .awards-list span {
    color: var(--color-text-muted) !important;
}

/* The about photos had a dark offset frame */
:root[data-theme="light"] .about-image img {
    box-shadow: 12px 12px 0 var(--color-raised);
}

/* Light mode: the grain over the page is dark, not light */
:root[data-theme="light"] body::after {
    filter: invert(1);
    opacity: 0.05;
}

/* Keyboard users see where they are */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-oil);
    outline-offset: 2px;
}

/* The theme switch and the search button: olive like the menu button, on a solid circle */
.theme-switch,
.nav-tools .nav-search-btn {
    color: var(--color-primary);
    background: var(--color-surface);
    border: 1.5px solid color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.theme-switch:hover,
.nav-tools .nav-search-btn:hover {
    color: var(--color-text-strong);
    border-color: var(--color-primary);
}

.theme-switch {
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-tools .nav-search-btn {
    margin: 0;
}

/* What shows until the scripts draw the page (and what search engines read) */
.seo-intro {
    max-width: 900px;
    margin: 0 auto;
    padding: 140px 20px 60px;
    line-height: 1.9;
}

.seo-intro h1 {
    font-size: 1.8rem;
    color: var(--color-oil);
}

.seo-intro ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding: 0;
    list-style: none;
}

/* The index of the archive's plain pages, under every page */
.site-index {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    padding: 14px 16px 22px;
    font-size: 0.85rem;
    border-top: 1px solid var(--color-line);
}

.site-index a {
    color: var(--color-text-muted);
    text-decoration: none;
}

.site-index a:hover {
    color: var(--color-primary);
}