/* =====================================================================
   Applied Biosignals — Website 2026
   Template stylesheet (proposal)

   Design goals
   - Modern, but conservative and serious (audience: scientists)
   - Front page (index): company presentation
   - Inner pages (focus): reads like a scientific article, not a sales page

   Colour system is derived from the existing brand:
     brand blue ...... #006391   (logo, headings, links)
     background ...... #f3f2f2   (legacy page background)
   ===================================================================== */

:root {
    /* Brand */
    --brand:        #006391;   /* primary brand blue            */
    --brand-dark:   #004c6e;   /* darker blue (gradients, hover) */
    --brand-darker: #00374f;   /* deepest blue (footer)          */
    --brand-tint:   #e7eef3;   /* very light blue (panels)       */
    --brand-tint-2: #d3e0e8;   /* light blue (borders/dividers)  */

    /* Neutrals */
    --bg:        #f3f2f2;      /* page background                 */
    --surface:   #ffffff;      /* cards / content surfaces        */
    --ink:       #1f2a30;      /* main body text (soft black)     */
    --ink-soft:  #4a5860;      /* secondary text                  */
    --line:      #e0e4e7;      /* hairline borders                */

    /* Accent — used sparingly, kept restrained for a serious tone */
    --accent:      #b8860b;    /* muted gold, calls-to-action only */
    --accent-soft: #f0e6cc;

    /* Type */
    --font-ui:   "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-read: Georgia, "Times New Roman", "Source Serif 4", serif;

    /* Metrics */
    --maxw:     1240px;   /* outer content width        */
    --measure:  70ch;     /* readable line length (text only) */
    --radius:   6px;
    --shadow:   0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
    --shadow-sm:0 1px 3px rgba(0,0,0,.08);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4 { color: var(--brand); font-weight: 600; line-height: 1.25; }

.container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
}

.section { padding: 64px 0; }
.section--tint { background: var(--brand-tint); }
.section--white { background: var(--surface); }

.eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ink-soft);
    margin: 0 0 10px;
}

/* =====================================================================
   Top bar / navigation
   ===================================================================== */
.topbar {
    background: var(--brand);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 50;
}

.topbar__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.brand img { height: 34px; width: auto; }
.brand__name { font-size: 1.12rem; letter-spacing: .01em; }
.brand__name small { display: block; font-size: .62rem; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase; opacity: .8; }

/* ABS electrode mark (5 electrodes, no surrounding circle), white on the blue bar */
.brand__logo { height: 38px; width: auto; display: block; flex: none; }

/* Right-hand group: navigation + language selector */
.topbar__right { display: flex; align-items: center; gap: 26px; }

.nav { display: flex; gap: 26px; }
.nav a {
    color: #fff;
    text-decoration: none;
    font-size: .96rem;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: rgba(255,255,255,.85); color: #fff; }

/* ---------- Language selector ---------- */
.langsel { display: flex; align-items: center; gap: 4px; flex: none; }
.langsel a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 3px 7px;
    border-radius: 3px;
    line-height: 1;
}
.langsel a:hover { color: #fff; }
.langsel a[aria-current="true"] {
    color: #fff;
    background: rgba(255,255,255,.16);
}

/* ---------- Announcement bar (optional, for occasional notices) ---------- */
.announce {
    background: var(--accent-soft);
    color: #5a4a12;
    border-bottom: 1px solid #e4d8b8;
    font-size: .9rem;
}
.announce__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 9px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.announce__tag {
    background: var(--accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    flex: none;
}
.announce a { color: #5a4a12; font-weight: 600; }

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: .96rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: #fff; color: var(--brand); }
.btn--primary:hover { background: var(--brand-tint); color: var(--brand-dark); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--ghost:hover { background: rgba(255,255,255,.12); color:#fff; }
.btn--solid { background: var(--brand); color: #fff; }
.btn--solid:hover { background: var(--brand-dark); color:#fff; }

/* =====================================================================
   Hero (front page) — variant A: SVG biosignal wave, no photo needed
   ===================================================================== */
.hero {
    position: relative;
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 60%, var(--brand-darker) 100%);
    color: #fff;
    overflow: hidden;
}
.hero__wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .35;
    pointer-events: none;
}
.hero__inner {
    position: relative;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 62px 28px 66px;
}
.hero__text { max-width: 640px; }
.hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4.2vw, 3rem);
    font-weight: 600;
    margin: 0 0 18px;
    line-height: 1.15;
}
.hero p {
    font-size: 1.18rem;
    line-height: 1.55;
    color: rgba(255,255,255,.92);
    margin: 0 0 28px;
    max-width: 56ch;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero — variant B: photograph */
.hero--photo {
    background: var(--brand-darker);
}
.hero--photo .hero__inner {
    background-image: linear-gradient(90deg, rgba(0,55,79,.78) 0%, rgba(0,55,79,.35) 70%, rgba(0,55,79,.15) 100%),
                      url("../../img/header5.jpg");
    background-size: cover;
    background-position: center;
    border-radius: 0;
}

/* =====================================================================
   Front page: focus-area cards
   ===================================================================== */
.section__head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section__head h2 { font-size: 1.75rem; margin: 0 0 12px; }
.section__head p { color: var(--ink-soft); margin: 0; font-size: 1.05rem; }

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
}
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.card__icon {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--brand-tint);
    margin-bottom: 16px;
}
.card__icon svg { width: 24px; height: 24px; stroke: var(--brand); fill: none; stroke-width: 1.7; }
.card h3 { margin: 0 0 10px; font-size: 1.15rem; }
.card p { margin: 0 0 14px; color: var(--ink-soft); font-size: .98rem; }
.card a.more { font-weight: 600; text-decoration: none; font-size: .95rem; }
.card a.more::after { content: " \203A"; }

/* Highlight band (e.g. Polybench) */
.highlight {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: center;
}
.highlight__media img {
    border-radius: var(--radius);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    background: #fff;
}
.highlight h2 { font-size: 1.7rem; margin: 0 0 14px; }
.highlight p { color: var(--ink-soft); margin: 0 0 18px; }

/* =====================================================================
   Inner page (focus) — scientific-article layout
   ===================================================================== */
.subhead {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.breadcrumb {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px 28px;
    font-size: .85rem;
    color: var(--ink-soft);
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb span { color: var(--brand); }

.article-wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 28px 28px 72px;
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr) 208px;
    gap: 34px;
    align-items: start;
}

/* Sidebar
   Sticky, but if the content is taller than the viewport it scrolls on its own
   instead of forcing the whole article to be scrolled to reach the lower links.
   Short lists show no scrollbar and behave exactly as a plain sticky block. */
.sidebar {
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 84px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;   /* keep the scrollbar clear of the text */
}
.sidebar__block { margin-bottom: 34px; }
.sidebar h4 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ink-soft);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar li { margin: 0 0 8px; }
.sidebar a {
    text-decoration: none;
    color: var(--brand);
    font-size: .94rem;
    display: block;
    padding: 2px 0;
}
.sidebar a:hover { text-decoration: underline; }
.sidebar p { font-size: .9rem; color: var(--ink-soft); margin: 0 0 6px; }

/* Article body — the "paper" */
.article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 48px clamp(26px, 3.2vw, 48px);
    box-shadow: var(--shadow-sm);
}
.article__meta {
    font-size: .82rem;
    color: var(--ink-soft);
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
/* Alternative to .article__meta for reference-manual pages: a short summary
   line. Smaller, not capitalised, takes less vertical space. Use one OR the
   other above the <h1>, depending on the page. */
.article__summary {
    font-size: .92rem;
    color: var(--ink-soft);
    margin: 0 0 6px;
    line-height: 1.45;
}
.article h1 {
    font-family: var(--font-read);
    font-weight: 600;
    font-size: clamp(1.7rem, 3.2vw, 2.3rem);
    line-height: 1.2;
    margin: 0 0 8px;
    color: var(--brand);
}
.article__byline {
    color: var(--ink-soft);
    font-size: .82rem;
    margin: 0 0 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}

/* Readable serif body. Text keeps a comfortable measure, but figures, callouts
   and tables use the FULL column width so technical images are not cramped. */
.article__body { font-family: var(--font-read); }
.article__body > p,
.article__body > h2,
.article__body > h3,
.article__body > ul,
.article__body > ol,
.article__body > .references { max-width: var(--measure); }
.article__body p { margin: 0 0 1.25em; line-height: 1.72; }
.article__body h2 {
    font-family: var(--font-ui);
    font-size: 1.3rem;
    margin: 2em 0 .6em;
    padding-top: .3em;
}
.article__body h3 {
    font-family: var(--font-ui);
    font-size: 1.08rem;
    margin: 1.6em 0 .5em;
}
.article__body ul, .article__body ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.article__body li { margin-bottom: .5em; line-height: 1.65; }
.article__body a { color: var(--brand); }

/* Lead paragraph — set apart from the body so the opening summary reads as a
   distinct, slightly emphasised introduction (without looking like marketing). */
.lead {
    font-size: 1.2rem;
    line-height: 1.6;
    font-weight: 500;
    color: var(--brand-dark);
    margin-bottom: 1.4em;
}

/* Figure with caption — like a paper */
figure { margin: 2em 0; }
figure img {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    margin: 0 auto;
}
figcaption {
    font-family: var(--font-ui);
    font-size: .85rem;
    color: var(--ink-soft);
    margin-top: 10px;
    line-height: 1.5;
}
figcaption b { color: var(--brand); }

/* Key-points / callout box */
.callout {
    font-family: var(--font-ui);
    background: var(--brand-tint);
    border-left: 4px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 20px 24px;
    margin: 2em 0;
}
.callout h4 { margin: 0 0 10px; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.callout ul { margin: 0; padding-left: 1.1em; }
.callout li { font-size: .96rem; }

/* References */
.references {
    font-family: var(--font-ui);
    margin-top: 3em;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.references h2 { font-size: 1.05rem; margin: 0 0 14px; }
.references ol { font-size: .9rem; color: var(--ink-soft); padding-left: 1.4em; }
.references li { margin-bottom: .6em; }

/* ---------- Right column: optional side notes / hints (for manuals) ---------- */
.notes {
    font-family: var(--font-ui);
    position: sticky;
    top: 84px;
    max-height: calc(100vh - 84px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 6px;
}
.note {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 14px 16px;
    margin-bottom: 18px;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.note__label {
    display: block;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 6px;
}
.note p { margin: 0 0 .6em; }
.note p:last-child { margin-bottom: 0; }
.note a { color: var(--brand); }

/* Variants */
.note--tip  { border-left-color: #2e7d32; }
.note--tip  .note__label { color: #2e7d32; }
.note--warn { border-left-color: var(--accent); }
.note--warn .note__label { color: #8a6308; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer { background: var(--brand-darker); color: #cdd9e0; }
.footer__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 52px 28px 28px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.footer h4 { color: #fff; font-size: .95rem; margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer a { color: #cdd9e0; text-decoration: none; font-size: .92rem; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__brand img { height: 88px; margin-bottom: 16px; }
.footer__brand p { font-size: .9rem; line-height: 1.6; margin: 0; }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.14);
    margin-top: 8px;
}
.footer__bottom-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 18px 28px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .82rem;
    color: #9fb2bd;
}
.footer__bottom-inner a { color: #9fb2bd; }

/* =====================================================================
   Responsive
   ===================================================================== */
/* Tablet: drop the right notes column under the article as a row of cards */
@media (max-width: 1080px) {
    .article-wrap { grid-template-columns: 200px minmax(0, 1fr); gap: 36px; }
    .notes {
        grid-column: 1 / -1;
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }
    .note { flex: 1 1 240px; margin-bottom: 0; }
}

@media (max-width: 900px) {
    .article-wrap { grid-template-columns: 1fr; gap: 28px; }
    .sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; order: 2; }
    .article { order: 1; }
    .notes   { order: 3; }
    .highlight { grid-template-columns: 1fr; gap: 28px; }
    .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .nav { display: none; }            /* replace with a menu button when wired up */
    .hero__inner { padding: 64px 24px 72px; }
    .section { padding: 48px 0; }
    .footer__inner { grid-template-columns: 1fr; gap: 28px; }
}