/* ==========================================================================
   ASC branding v2 - indico 3.3 customization CSS.
   Served as /static/custom/css/asc.css; indico injects __custom.css AFTER
   main.css in <head>, so equal-specificity rules here win. No !important.
   Assets referenced below come from /static/custom/files/ (this repo's
   indico-prod/customization/files/, bind-mounted read-only at
   /opt/indico/custom inside the containers).
   ========================================================================== */

/* --- Palette ------------------------------------------------------------ */
:root {
    --asc-red:       #d62828;  /* ASC brand red - menu strip background */
    --asc-red-dark:  #90030C;  /* hover/active on the menu strip */
    --asc-red-light: #ECB7B7;  /* light accent variant of the brand red */
}

/* --- Typeface: Inter (self-hosted woff2, one file per weight/style) ----- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('/static/custom/files/inter-v19-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: url('/static/custom/files/inter-v19-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-500.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url('/static/custom/files/inter-v19-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-600.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('/static/custom/files/inter-v19-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    src: url('/static/custom/files/inter-v19-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-italic.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    src: url('/static/custom/files/inter-v19-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-700italic.woff2') format('woff2');
    font-display: swap;
}

/* Upstream: body { font-family: "Liberation Sans", sans-serif } */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* --- Header logo row -----------------------------------------------------
   header.html renders <div class="page-header"> wrapping the logo row
   (<a id="header-logo"><img class="header-logo">), the session bar and the
   #global-menu toolbar. Upstream paints the whole block blue (#007cac); v2
   keeps the logo row white and confines the red to the menu strip below. */
.page-header {
    background-color: white;
}

/* The ASC horizontal logo is 2661x528 px; upstream fixes the indico logo at
   60px height, which would make this one ~300px wide and blow the row.
   1.6rem is the operator's sizing call (2.2rem read slightly too big in the
   live preview); the ASC documentation site's own usage shows the wordmark
   still legible down to ~1.3rem, so this sits above that floor. */
.page-header img.header-logo {
    height: 1.6rem;
    width: auto;
    margin: 0.5rem 1.4rem;
}

/* #global-menu (the toolbar of top links inside the page-header): upstream
   rules all reference the menu/surface custom properties below, so re-scoping
   them here recolors links (white), hover/active background (dark red) and
   the menu surface itself without touching per-element selectors. */
#global-menu {
    background: var(--asc-red);
    --surface-inverse-color: var(--asc-red);
    --surface-highlight-inverse-color: var(--asc-red-dark);
    --menu-background-color: var(--asc-red);
    --menu-text-color: #fff;
    --menu-text-hover-color: #fff;
    --menu-background-hover-color: var(--asc-red-dark);
}

/* --- Login page logo -----------------------------------------------------
   auth/login_page.html renders <img class="header-logo"> (no inline height
   attribute) inside .centered-column-wrapper; upstream main.css forces
   height:100px, which lands this ~5:1 wordmark ~500px wide and spills the
   350px login column. Same selector as upstream: equal specificity, and
   this file loads after main.css, so the rule wins without !important. */
.login-page .middle .centered-column-wrapper .header-logo {
    max-width: 100%;
    height: auto;
}