/* ==========================================================================
   Perfect Streamer — brand styling (Perfect Soft brand book, bb/).
   The file is generated; edit the brand part at the bottom, section BRAND STYLES.

   Type:    Roboto — matching pstreamer.tv (the same Roboto, body 300 light,
            headings 500 medium). Apache-2.0, self-hosted in static/fonts/roboto/
            (see LICENSE.txt). Latin + Cyrillic.
   Colours: Dark Blue #2a21db (primary), Bright Red #ff392b (accent).
   Device:  a diagonal/horizontal blue-to-red gradient plus thin rules.

   Wiring: conf.py -> html_css_files = ['brand.css'] (loads after alabaster.css
   and before custom.css). font_family/head_font_family and the link and sidebar
   colours are set in html_theme_options.
   ========================================================================== */

/* -------- @font-face: Roboto (self-hosted, split by subset) --------------- */

/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/roboto/roboto-cyrillic-300-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto/roboto-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto/roboto-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto/roboto-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/roboto/roboto-cyrillic-900-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto/roboto-cyrillic-400-italic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto/roboto-cyrillic-700-italic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext-900-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-ext-700-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-900-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/roboto/roboto-latin-700-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   BRAND STYLES — the brand layer on top of the alabaster theme
   ========================================================================== */

:root {
  --ps-blue: #2a21db;       /* PANTONE Dark Blue C  */
  --ps-red:  #ff392b;       /* PANTONE Bright Red C */
  --ps-blue-dark: #1d16a0;  /* darkened blue for hover states and borders */
  --ps-gradient: linear-gradient(90deg, var(--ps-blue) 0%, var(--ps-red) 100%);
}

/* The pstreamer.tv look: body copy in Roboto Light (300). */
div.body { font-weight: 300; }

/* The brand gradient bar across the top of the page (as on the brand-book cover). */
body {
  border-top: 4px solid var(--ps-blue);
  border-image: var(--ps-gradient) 1;
}

/* Headings: brand blue, Roboto Medium (500) — as on pstreamer.tv. */
div.body h1, div.body h2, div.body h3,
div.body h4, div.body h5, div.body h6 {
  color: var(--ps-blue);
  font-weight: 500;
  letter-spacing: -0.01em;
}
div.body h1 { font-weight: 700; }

/* h1 — the brand gradient underline (an echo of the logo). */
div.body h1 {
  border-bottom: 3px solid var(--ps-blue);
  border-image: var(--ps-gradient) 1;
  padding-bottom: 0.25em;
  margin-bottom: 0.7em;
}

/* The ¶ anchor link next to a heading — brand red on hover. */
a.headerlink { color: transparent; }
h1:hover > a.headerlink, h2:hover > a.headerlink,
h3:hover > a.headerlink, h4:hover > a.headerlink,
h5:hover > a.headerlink, h6:hover > a.headerlink { color: var(--ps-red); }

/* Horizontal rules — the brand gradient line. */
div.body hr {
  border: 0;
  height: 3px;
  background: var(--ps-gradient);
}

/* Links: brand-red underline on hover (the colour itself comes from the theme). */
div.body a, div.body a:visited { text-decoration-color: rgba(42,33,219,0.35); }
div.body a:hover { text-decoration-color: var(--ps-red); }

/* Sidebar: the logo/title and the headings in brand blue. */
div.sphinxsidebar h1.logo a,
div.sphinxsidebar h3, div.sphinxsidebar h4 { color: var(--ps-blue); }
div.sphinxsidebar hr {
  border: 0; height: 2px; background: var(--ps-gradient); opacity: 0.85;
}

/* The language switcher under the logo — compact and in the brand colour. */
.language-switcher a { color: var(--ps-blue); font-weight: 500; }
.language-switcher a:hover { color: var(--ps-red); }

/* Tables: the header row in brand blue (like the brand book's accent blocks). */
table.docutils thead th,
table.docutils th.head {
  background: var(--ps-blue);
  color: #fff;
  border-color: var(--ps-blue);
}
table.docutils thead th a,
table.docutils thead th a:visited { color: #fff; }

/* Notes (note/tip/seealso) — a brand-blue accent on the left.
   Warnings (warning/danger/caution) are deliberately left alone: the brand red
   must not stand in for the semantics of danger. */
div.note, div.tip, div.hint, div.seealso, div.important {
  border-left: 3px solid var(--ps-blue);
}

/* Inline literals / code — a light brand-coloured border. */
code.literal, span.pre {
  border: 1px solid rgba(42,33,219,0.12);
}

/* Text selection — brand blue. */
::selection { background: var(--ps-blue); color: #fff; }
::-moz-selection { background: var(--ps-blue); color: #fff; }

/* The relbar navigation links — brand blue. */
div.related a { color: var(--ps-blue); }
div.related a:hover { color: var(--ps-red); }

/* The relbar contains its own float (nav#rellinks float:right). Without this,
   when a long "next section" link wraps onto two lines, .related collapses to the
   height of one line, the second line spills out of it and — in the narrow
   (mobile) layout — runs into the gradient sidebar below, blending into the blue
   part of the gradient. flow-root establishes a BFC and contains the float. */
div.related { display: flow-root; }

/* Narrow (mobile) layout: the sidebar in the brand gradient. */
@media screen and (max-width: 875px) {
  div.sphinxsidebar {
    background: var(--ps-gradient);
  }
  div.sphinxsidebar h1.logo a,
  div.sphinxsidebar h3, div.sphinxsidebar h4,
  div.sphinxsidebar a, div.sphinxsidebar p,
  .language-switcher a { color: #fff; }
  div.sphinxsidebar hr { background: rgba(255,255,255,0.6); }
}