/* ==========================================================================
   Editorial Board Manager — frontend-base.css
   Shared variables, page chrome, pill colours, photo + social icon styles.
   Loaded for every frontend template; per-template CSS layers grid/layout
   on top of these primitives.
   ========================================================================== */

:root {
    --ebm-primary: #1e3a5f;
    --ebm-primary-hover: #16304f;
    --ebm-primary-light: #f0f4f8;

    --ebm-text: #1a2332;
    --ebm-text-secondary: #4b5563;
    --ebm-text-muted: #6b7280;
    --ebm-text-light: #9ca3af;

    --ebm-bg: #ffffff;
    --ebm-bg-alt: #f9fafb;
    --ebm-bg-page: #f4f5f7;

    --ebm-border: #e5e7eb;
    --ebm-border-strong: #d1d5db;

    --ebm-success: #16a34a;
    --ebm-warning: #ca8a04;
    --ebm-danger:  #dc2626;
}

/* ==========================================================================
   Page chrome — theme-neutral by design
   ==========================================================================
   The plugin used to ship its own card chrome (white background, shadow,
   border-radius, 40px padding) on `.ebm-page`.  That looked great on
   Nivo but FORCED the same card aesthetic onto every other theme
   (Default, Bootstrap3, JournalPlus, ...) where the convention may be
   flat content with no card at all.  The principle now is: the plugin
   should reflect each theme's own visual language, NOT impose its own
   chrome.
   The layout achieves that with a multi-class wrapper strategy — every
   wrapper carries BOTH our own `.ebm-*` class (for plugin-internal
   targeting) and the host theme's equivalent class (`.nivo-page-card`,
   `.pkp_structure_main`, etc.).  When the theme styles its own class
   the chrome appears automatically; when it doesn't, the layout stays
   flat — matching whatever the theme does on its other inner pages.
   The only properties this stylesheet still sets on `.ebm-page` are
   purely structural (margin/padding for spacing rhythm) — no
   background, no border, no shadow, no border-radius.
   ========================================================================== */

/* Outer wrapper — vertical breathing room around the editorial board.
   Nivo's `.nivo-page-wrapper` already supplies `padding: 60px 0` so on
   Nivo this rule is inert; on other themes it gives us some
   top/bottom space before the content begins. */
.ebm-page-wrapper {
    padding: 24px 0;
}

/* Container — max-width safety net.  When the host theme provides its
   own constraint (Nivo via `.nivo-container`, PKP base via
   `.pkp_structure_main`, Bootstrap themes via `.container`) the
   theme's max-width wins because of higher specificity or `!important`;
   when it doesn't, ours keeps the editorial board legible.
   Horizontal padding ensures we never touch the viewport edge on small
   screens regardless of the theme. */
.ebm-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* Main column — purely structural.  Nivo's `.nivo-page-main` lives
   inside a `.nivo-page-layout` grid; we omit the layout grid here so
   this is just the main slot. */
.ebm-page-main {
    min-width: 0;
}

/* Page "card" — INTENTIONALLY no background, no border, no shadow.
   The host theme's co-class (e.g. `.nivo-page-card`) decides whether
   this is a white card with shadow, a flat content area, a borderless
   slot, etc.  We only set the basics that every theme needs but
   shouldn't have to know about (typography baseline, text color
   variable so child elements can pick it up). */
.ebm-page {
    color: var(--ebm-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.5;
}

/* Page header — centered, with the title sitting above an optional
   intro paragraph.  Centering is a layout choice (not a visual chrome
   choice) so it's safe to set here regardless of theme. */
.ebm-page-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* Title — keep typography minimal so themes that style their own
   page-title class (e.g. `.nivo-page-title`) win for font / size /
   weight.  We only set spacing here. */
.ebm-page-title {
    margin: 0 0 8px;
    line-height: 1.2;
}

.ebm-page-intro {
    font-size: 14px;
    color: var(--ebm-text-muted);
    max-width: 720px;
    margin: 0 auto;            /* centered together with the title */
}

/* ==========================================================================
   Dark-mode text safety net
   ==========================================================================
   When the active theme paints the outer `.ebm-page` (a.k.a.
   `.nivo-page-card`) dark in dark mode, it typically also forces a light
   text colour on the card with `!important`.  That light colour is then
   INHERITED by every descendant — including our editor cards, which
   keep their explicit white backgrounds.  White text on white card =
   invisible (the "Ahmet Yilmaz okunmuyor" bug).
   Setting an explicit `color` on each template wrapper breaks that
   inheritance: the wrapper's own colour now applies to itself, and
   its descendants inherit the dark text from there instead of from the
   page-card ancestor.  No `!important` is needed because we're not
   trying to override the host rule on the page-card itself — only to
   plant a fresh inheritance root one level down.
   ========================================================================== */
.ebm-page .ebm-hierarchical,
.ebm-page .ebm-atlas,
.ebm-page .ebm-magazine,
.ebm-page .ebm-sectioned,
.ebm-page .ebm-compact,
.ebm-page .ebm-table {
    color: var(--ebm-text);
}

/* Pills ------------------------------------------------------------------- */

.ebm-pill {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
    background: var(--ebm-primary);
    color: #fff;
}

.ebm-pill-small { font-size: 9px; padding: 1px 6px; }

.ebm-pill-amber  { background: #fef3c7; color: #92400e; }
.ebm-pill-pink   { background: #fce7f3; color: #9d174d; }
.ebm-pill-purple { background: #ddd6fe; color: #5b21b6; }
.ebm-pill-green  { background: #d1fae5; color: #065f46; }
.ebm-pill-indigo { background: #e0e7ff; color: #3730a3; }
.ebm-pill-orange { background: #fed7aa; color: #9a3412; }
.ebm-pill-cyan   { background: #cffafe; color: #155e75; }
.ebm-pill-rose   { background: #ffe4e6; color: #9f1239; }

/* Cards ------------------------------------------------------------------- */

.ebm-card {
    display: flex;
    gap: 16px;
    padding: 1.25rem;
    border: 1px solid var(--ebm-border);
    border-radius: 8px;
    background: var(--ebm-bg);
    transition: border-color 0.12s ease;
}

.ebm-card:hover {
    border-color: var(--ebm-border-strong);
}

.ebm-card-photo-wrap {
    flex-shrink: 0;
}

.ebm-card-photo,
.ebm-card-photo--initials,
.ebm-card-photo--icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ebm-card-photo--initials {
    background: var(--ebm-primary-light);
    color: var(--ebm-primary);
    font-weight: 500;
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.ebm-card-photo--icon {
    background: var(--ebm-bg-alt);
    color: var(--ebm-text-light);
}

.ebm-card-body { flex: 1; min-width: 0; }

.ebm-card-name {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
    color: var(--ebm-text);
}

.ebm-card-role {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 10px;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 500;
}

.ebm-card-affiliation {
    font-size: 12px;
    color: var(--ebm-text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}

.ebm-card-country {
    white-space: nowrap;
}

/* Social links ------------------------------------------------------------ */

.ebm-card-links {
    display: flex;
    flex-wrap: wrap;        /* lets the icon strip break to a second row
                               when the card is narrower than the icons fit
                               (mobile, or cards with 6–8 academic links) */
    gap: 10px 12px;         /* row-gap × column-gap — tighter row stacking */
    color: var(--ebm-text-light);
    align-items: center;
}

.ebm-link {
    color: inherit;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.12s ease, transform 0.12s ease;
    text-decoration: none;
}

.ebm-link:hover {
    opacity: 0.75;
}

.ebm-link svg { display: block; }

/* Belt-and-suspenders mobile guard for the icon strip.
 *
 * The base `.ebm-card-links` rule already sets `flex-wrap: wrap`, but
 * some host themes inject their own `.ebm-card-links` rules at higher
 * specificity and override it. This media query re-applies wrap with
 * the strongest reasonable specificity (.ebm-page descendant + the
 * class) at every viewport ≤ 640 px so customer themes can't accidentally
 * pin the strip back to a single overflowing row on phones. Also
 * tightens the column gap on narrow screens where every pixel counts. */
@media (max-width: 640px) {
    .ebm-page .ebm-card-links {
        flex-wrap: wrap !important;
        gap: 8px 8px !important;
        justify-content: flex-start;
    }
    .ebm-page .ebm-card-links .ebm-link {
        flex: 0 0 auto;
    }
}

/* Frontend-only resets to insulate from theme conflicts ------------------- */

.ebm-page ul, .ebm-page ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ebm-page a { text-decoration: none; }
.ebm-page img { max-width: 100%; height: auto; display: block; }