/*
 * Copyright 2021 The Pigweed Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

/********** Top left logo & search bar ***********/

/* Make the "Pigweed" logo text. One day, this will be an image. */
.sidebar-brand {
  font-size: 2em;
  font-family: 'Inconsolata', monospace;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sidebar-brand-text {
  font-size: 2.5rem;
  text-align: center;
}

/********** Scrolling behavior ***********/

/*
 * All nodes across the site should scroll instantly. This rule is intentionally
 * broad and agressive. Context:
 * https://pigweed.dev/docs/style_guide.html#site-nav-scrolling
 */
* {
  scroll-behavior: auto !important;
}

/********** Focus behavior ***********/

/* (a11y) Provide clear visual indication that an element is focused:
 * https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
 *
 * This rule should be applied to all focusable HTML elements:
 * https://stackoverflow.com/a/1600194 */
a:focus, area:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--color-text-selection-background);
}

/********** General document coloring ***********/

/* Code blocks inside block quotes end up getting italicized. */
blockquote {
  font-style: normal;
}

.breadcrumbs {
  margin: 1.5rem 0 0 0;
  padding: 0;
}

.breadcrumb {
  display: inline-block;
  margin: 0;
  padding: 0;
}

/* Tweak the spacing of the page's H1 if it's preceded by breadcrumbs. */
.breadcrumbs ~ section h1 {
  margin-top: 1rem;
}

/* Update description list (dl) > description titles (dt) styles for autodoc */

/* Function signatures are gray */
dl.c>dt, dl.cpp>dt, dl.js>dt, dl.py>dt {
  border: none;
  border-left: 3px solid var(--color-api-function-border);
  background: var(--color-api-function-background);
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 0.5em;
  font-family: var(--font-stack--monospace);
}

/* Adjust indentation for all list types */
dl.class>dt, dl.enum-class>dt, dl.enum-struct>dt, dl.enum>dt, dl.exception>dt, dl.function>dt, dl.method>dt, dl.type>dt {
  padding-left: 3em;
  text-indent: -2.5em;
}

/* Class and describe signatures are blue */
dl.class>dt, dl.describe>dt {
  background: var(--color-api-class-background);
  color: var(--color-api-class-foreground);
  border: none;
  border-top: 3px solid var(--color-api-class-border);
  font-family: var(--font-stack--monospace);
}

/* Adjust .. describe:: block padding */
dl.describe>dt {
  display: table;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

/* Function signature unindent */
.sig {
    text-indent: 0em;
}

/* Remove blank space before/after function signature open/close parens. */
.sig > dl {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Make inline code standout more */
code.literal {
  border: 1px solid var(--color-inline-code-border);
}

/* Make sure text selection colors are readable */
::selection {
  color: var(--color-text-selection-foreground);
  background: var(--color-text-selection-background);
}


/* Make dark mode 'code-block:: :emphasize-lines:' background color readable. */
body[data-theme="dark"] .highlight .hll {
  background-color: var(--color-code-hll-background);
}

body[data-theme="light"] .highlight .hll {
  background-color: var(--color-code-hll-background);
}

/* Override pygments.css code block background color */
body[data-theme="dark"] .highlight {
  background-color: var(--color-code-background) !important;
}

/* Use normal mixed-case for h4, h5, and h6 */
h4, h5, h6 {
    text-transform: none;
}

:root {
  /* SVGs from: https://octicons-git-v2-primer.vercel.app/octicons/ */
  --icon--check-circle: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM0 8a8 8 0 1116 0A8 8 0 010 8zm11.78-1.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path></svg>');
  --icon--check-circle-fill: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 16A8 8 0 108 0a8 8 0 000 16zm3.78-9.72a.75.75 0 00-1.06-1.06L6.75 9.19 5.28 7.72a.75.75 0 00-1.06 1.06l2 2a.75.75 0 001.06 0l4.5-4.5z"></path></svg>');
}

.admonition.checkmark {
  border-color: var(--color-admonition-title--tip);
}
.admonition.checkmark > .admonition-title {
  background-color: var(--color-admonition-title-background--tip);
}
.admonition.checkmark > .admonition-title::before {
  background-color: var(--color-admonition-title--tip);
  -webkit-mask-image: var(--icon--check-circle-fill);
          mask-image: var(--icon--check-circle-fill);
}

/* Sub sections in breathe doxygen output.
   E.g 'Public Functions' or 'Public Static Functions' in a class. */
.breathe-sectiondef > p.breathe-sectiondef-title {
  font-weight: bold;
  font-size: var(--font-size--normal);
}

/* Indicate in-progress SEEDs */
a[href="seed/0000-index.html"] ~ ul > li > a.reference.external[href*="pigweed-review.googlesource.com"]::before {
  content: "🚧 ";
}

div.pw-main {
  display: flex;
  flex-direction: column;
}

div.pw-topnav {
  background-color: var(--color-background-primary);
  padding: 0 3em;
  width: 100%;
}

div.pw-topnav-inline {
  display: flex;
  flex-direction: row;
  padding: 1em 0 0 0;
}

div.pw-topnav-inline h1 {
  padding: 0;
  margin: 0;
}

.pw-topnav-title {
  font-size: 2.5em;
  font-weight: 700;
  line-height: 1.25;
  padding: 0;
  margin: 0;
}

.pw-topnav-subtitle {
  display: block;
  font-size: larger;
  font-weight: bold;
  margin: 0.75em 0 0.5em 0;
  padding: 0;
}

.pw-text-center-align {
    text-align: center
}

ul.pw-module-section-nav-group {
  display: flex;
  margin: 0 1em;
  padding: 0;
}

li.pw-module-section-nav-link {
  display: inline;
  list-style-type: none;
  margin: auto;
  padding: 0 1em;
}

li.pw-module-section-nav-link p {
  display: inline;
  font-size: large;
}

li.pw-module-section-nav-link p a {
  color: var(--color-section-button) !important;
}

li.pw-module-section-nav-link p a:hover {
  color: var(--color-section-button-hover) !important;
}

div.font-monospace {
  font-family: var(--font-stack--monospace);
}

/* Sales pitch pages like //pw_tokenizer/docs.rst use the feature grid as a
 * call-to-action to check out other docs in the set. The following CSS makes
 * the feature grid items stand out a bit more. */

.sales-pitch-cta-primary .sd-card-title {
  border-bottom: 3px solid var(--color-sidebar-brand-text);
  padding-bottom: 0.5rem;
}

.sales-pitch-cta-secondary .sd-card-title {
  border-bottom: 3px solid var(--color-sidebar-link-text);
  padding-bottom: 0.5rem;
}

/* Position the "skip to main content" anchor offscreen by default.
 * https://pwbug.dev/344643289 */
#skip {
  position: absolute;
  left: -1000%;
  top: -1000%;
  background-color: var(--color-background-primary);
}

/* Show the "skip to main content" anchor at the top-left of the viewport when
 * it's focused. */
#skip:focus {
  left: 10px;
  top: 10px;
  z-index: 1000;
}