/* =========================================================
   IDOHL Lab site stylesheet
   ---------------------------------------------------------
   Pasted into the Lab site's CSS Editor in Omeka S (served at
   /css-editor) and loaded after the Lively theme on every Lab
   page. Pages carry their own styles under a
   .idohl-<page>-page wrapper; this file holds the shared
   tokens, the Omeka shell overrides, the global element
   defaults, and the home page and item page rules.
   ========================================================= */

/* --- Fonts ----------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* --- Tokens (mobile first; spacing and type step up at 768px) */
:root {
    /* Typography */
    --font-primary: "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-secondary: "Instrument Serif", Georgia, serif;

    /* Colours */
    --color-bg: #f7f5f2;
    --color-bg-card: #ffffff;
    --color-text-primary: #141413;
    --color-text-secondary: #4a4a4a;
    --color-text-muted: #6b6b6b;
    --color-accent-purple: #983bfe;
    --color-accent-blue: #004b6e;
    --color-border: #e5e5e5;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Container and side gutters (the home page uses these too) */
    --container-max: 1600px;
    --side-space-mobile: var(--space-lg);
    --side-space-tablet: var(--space-lg);
    --side-space-desktop: var(--space-xl);
    --side-space-xl: var(--space-2xl);

    /* Type scale */
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* Motion */
    --animation-fast: 0.2s;
    --animation-base: 0.3s;
    --animation-slow: 0.6s;
    --animation-slower: 6s;

    /* Touch target and corner radii */
    --touch-target: 44px;
    --radius-sm: 0.375rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
}

@media (min-width: 768px) {
    :root {
        --space-xs: 0.5rem;
        --space-sm: 1rem;
        --space-md: 1.5rem;
        --space-lg: 2rem;
        --space-xl: 3rem;
        --space-2xl: 4rem;
        --space-3xl: 6rem;
        --space-4xl: 8rem;

        --text-sm: 1rem;
        --text-base: 1.125rem;
        --text-lg: 1.25rem;
        --text-xl: 1.5rem;
        --text-2xl: 2rem;
        --text-3xl: 2.5rem;
        --text-4xl: 3rem;
        --text-5xl: 4rem;
    }
}

/* --- Base ------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Pin the layout width to the viewport: clip horizontal overflow at
       the root (the body rule below does not cover the html box) and
       always reserve the scrollbar gutter, so the theme header renders
       at the same width on short pages (no scrollbar) and long ones. */
    overflow-x: clip;
    scrollbar-gutter: stable;
}

::selection {
    background-color: rgba(228, 114, 91, 0.25);
    color: var(--color-text-primary);
}

::-moz-selection {
    background-color: rgba(228, 114, 91, 0.25);
    color: var(--color-text-primary);
}

/* --- Omeka shell ----------------------------------------- */
body,
.wrap {
    width: 100%;
    overflow-x: hidden;
    /* Reserve the gutter here too, in case the theme makes body the
       scroll container (overflow-x: hidden computes overflow-y to auto). */
    scrollbar-gutter: stable;
}

/* the theme pads and narrows the content area; pages run full width */
#content,
main,
#main {
    width: 100%;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Container: side gutters never smaller than the device's safe area */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: max(var(--side-space-mobile), env(safe-area-inset-left));
    padding-right: max(var(--side-space-mobile), env(safe-area-inset-right));
}

@media (min-width: 768px) {
    .container {
        padding-left: max(var(--side-space-tablet), env(safe-area-inset-left));
        padding-right: max(var(--side-space-tablet), env(safe-area-inset-right));
    }
}

@media (min-width: 1200px) {
    .container {
        padding-left: max(var(--side-space-desktop), env(safe-area-inset-left));
        padding-right: max(var(--side-space-desktop), env(safe-area-inset-right));
    }
}

@media (min-width: 1920px) {
    .container {
        padding-left: max(var(--side-space-xl), env(safe-area-inset-left));
        padding-right: max(var(--side-space-xl), env(safe-area-inset-right));
    }
}

/* --- Typography ------------------------------------------ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    line-height: 1.2;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--space-md);
    word-wrap: break-word;
}

h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    margin-top: var(--space-sm);
    animation: fadeInUp var(--animation-slow) ease-out;
}

h2 {
    font-size: var(--text-2xl);
}

h3 {
    font-size: var(--text-xl);
}

p {
    margin-top: 0;
    margin-bottom: var(--space-lg);
    font-size: 1.05rem;
}

/* --- Animations ------------------------------------------ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.float-animation {
    animation: float var(--animation-slower) ease-in-out infinite;
}

/* --- Home page: hero ------------------------------------- */
.hero {
    padding: var(--space-2xl) 0 var(--space-xl);
    background-color: var(--color-bg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .hero {
        padding: var(--space-4xl) 0 var(--space-3xl);
        text-align: left;
    }
}

.hero h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
    animation: fadeInUp var(--animation-slow) ease-out;
}

@media (min-width: 768px) {
    .hero h1 {
        font-size: var(--text-5xl);
    }
}

.hero .tagline {
    font-size: var(--text-lg);
    font-family: var(--font-secondary);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-xl);
    animation: fadeInUp var(--animation-slow) ease-out 0.2s both;
}

.hero-graphic {
    position: absolute;
    right: var(--side-space-desktop);
    top: 50%;
    transform: translateY(-50%);
    width: 400px;
    height: 300px;
    opacity: 0.9;
    animation: fadeIn var(--animation-slow) ease-out 0.4s both;
}

@media (min-width: 1400px) {
    .hero-graphic {
        width: 500px;
        height: 400px;
    }
}

/* --- Buttons --------------------------------------------- */
button,
.button {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    font-weight: 500;
    padding: var(--space-sm) var(--space-lg);
    min-height: var(--touch-target);
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: manipulation;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    overflow: hidden;
}

/* --- Home page: cards grid ------------------------------- */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 768px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xl);
    }
}

@media (min-width: 1200px) {
    .cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1600px) {
    .cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --- Links: accent colour and a purple bar on hover ------- */
a {
    color: var(--color-accent-blue);
    text-decoration: none;
    position: relative;
    transition: color var(--animation-fast) ease;
}

a:not(.btn):not(.button)::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-accent-purple);
    transition: width var(--animation-base) ease;
}

a:not(.btn):not(.button):hover::after {
    width: 100%;
}

/* --- Home page: mission ---------------------------------- */
.mission {
    padding: var(--space-4xl) 0;
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}

/* --- Large screens --------------------------------------- */
@media (min-width: 1400px) {
    body {
        font-size: 1.125rem;
    }

    h1 {
        font-size: var(--text-5xl);
    }

    h2 {
        font-size: var(--text-3xl);
    }

    h3 {
        font-size: var(--text-2xl);
    }
}

/* --- Focus ----------------------------------------------- */
*:focus-visible {
    outline: 2px solid var(--color-accent-blue);
    outline-offset: 2px;
    transition: outline-offset var(--animation-fast) ease;
}

*:focus-visible:hover {
    outline-offset: 4px;
}

/* --- Small screens and reduced motion -------------------- */
@media (max-width: 768px) {
    .hero-graphic {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* --- Section separators ---------------------------------- */
section:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Home page: footer ----------------------------------- */
.footer {
    padding: var(--space-3xl) 0;
    text-align: center;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
}

.footer h2 {
    font-size: var(--text-3xl);
    font-weight: 600;
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.footer p {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xl);
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: var(--color-text-secondary);
}

/* Partner logos: !important throughout to hold against the theme */
.footer .partner-logos,
.footer .container .partner-logos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-xl) !important;
    margin-top: var(--space-3xl) !important;
    padding-top: var(--space-xl) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow: visible !important;
}

.footer .partner-logos .partner-logos-label {
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: var(--color-text-muted) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.footer .partner-logos .partner-logos-images {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-lg) !important;
    overflow: visible !important;
}

.footer .partner-logos .partner-logos-images img {
    height: 38px !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    aspect-ratio: auto !important;
    opacity: 0.45;
    transition: opacity 0.4s ease;
    filter: grayscale(20%);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer .partner-logos .partner-logos-images img:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .footer .partner-logos,
    .footer .container .partner-logos {
        flex-direction: column !important;
        gap: var(--space-sm) !important;
    }

    .footer .partner-logos .partner-logos-images img {
        height: 30px !important;
    }
}

/* --- Home page: cards section ---------------------------- */
.cards-section {
    padding: var(--space-3xl) 0;
    background-color: var(--color-bg);
}

.cards-intro {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.cards-intro h2 {
    font-size: var(--text-3xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
    letter-spacing: -0.02em;
}

.cards-intro .subtitle {
    font-size: var(--text-xl);
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* --- Text utilities -------------------------------------- */
.text-grey {
    color: #999999;
}

/* --- Item pages: metadata ---------------------------------- */
body.item.resource.show h1 {
    text-align: left;
    color: var(--color-text-primary);
    font-size: var(--text-4xl);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
    font-weight: 700;
    position: relative;
    padding-bottom: var(--space-md);
}

body.item.resource.show h1::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-blue));
    border-radius: 2px;
}

@media (min-width: 768px) {
    body.item.resource.show h1 {
        font-size: var(--text-5xl);
    }
}

/* metadata block as a card */
body.item.resource.show .metadata {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
    body.item.resource.show .metadata {
        padding: var(--space-2xl);
    }
}

body.item.resource.show .metadata dl {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: 0;
}

/* one property row */
body.item.resource.show .metadata .property {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
    transition: transform var(--animation-fast) ease;
}

body.item.resource.show .metadata .property:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

body.item.resource.show .metadata .property:hover {
    transform: translateX(4px);
}

/* property label */
body.item.resource.show .metadata .property dt {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
    margin-bottom: var(--space-xs);
    font-family: var(--font-primary);
}

/* property value */
body.item.resource.show .metadata .property dd.value {
    margin: 0 0 var(--space-xs) 0;
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.6;
}

/* links to other resources, shown as badges */
body.item.resource.show .metadata .property dd.value a {
    color: var(--color-accent-purple);
    font-weight: 500;
    text-decoration: none;
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(152, 59, 254, 0.06);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(152, 59, 254, 0.1);
    transition: all var(--animation-fast) ease;
    word-break: break-word;
}

/* no purple hover bar on the badges */
body.item.resource.show .metadata .property dd.value a::after {
    display: none;
}

body.item.resource.show .metadata .property dd.value a:hover {
    background: rgba(152, 59, 254, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(152, 59, 254, 0.15);
}

/* thumbnail inside a badge */
body.item.resource.show .metadata .property dd.value a img {
    height: 1.4em;
    width: auto;
    border-radius: 2px;
    margin-right: var(--space-xs);
}

/* external URI links */
body.item.resource.show .metadata .property dd.value.uri a {
    background: rgba(0, 75, 110, 0.06);
    color: var(--color-accent-blue);
    border: 1px solid rgba(0, 75, 110, 0.1);
}

body.item.resource.show .metadata .property dd.value.uri a:hover {
    background: rgba(0, 75, 110, 0.12);
    box-shadow: 0 2px 8px rgba(0, 75, 110, 0.15);
}

/* --- Theme header: top navigation -------------------------
   The Lively theme gives each top-level menu link
   `margin: 30px 5px; font-weight: 700`, so the links sit about
   10px apart and read heavy. This file loads after the theme, so
   these rules win. Only the horizontal margins and the weight
   change: the 30px vertical margin (which centres the links in
   the fixed bar) and the link padding (including the right
   padding for the Projects chevron) stay. The rules match the
   desktop menu only; the mobile drawer
   (#menu-drawer .menu-container) is untouched. */
.main-header .main-navigation .navigation > li > a {
    margin-left: 13px !important; /* was 5px: about 26px between links */
    margin-right: 13px !important;
    font-weight: 500 !important; /* was 700 */
}

/* the current page's link stays a touch heavier (it also keeps the
   theme's pill border via .active) */
.main-header .main-navigation .navigation > li.active > a {
    font-weight: 600 !important;
}