/* these are colours and fonts consistent with RCPCH branding guidelines - see github for info */

:root {
  --md-primary-fg-color: #3366cc;
  --md-accent-fg-color: #11a7f2;
  --rcpch-pink-color: #f18cc9;
}

/* FONTS & TYPESETTING */

.md-typeset h1 {
  font-weight: 700;
  font-size: 24pt;
  color: var(--md-accent-fg-color);
}

.md-typeset h2 {
  font-weight: 700;
  font-size: 16pt;
  color: #4d4d4d;
}

.md-typeset h3 {
  font-weight: 700;
  font-size: 13pt;
  color: #000000;
}

/* make the text bigger in the admonitions */
.md-typeset .admonition {
  font-size: 0.75rem;
}


/* HEADER & FOOTER */

/* make the header white with blue text */
.md-header {
  background-color: #ffffff;
  color: #0d0d58;
}

/* Switch off header hover behaviour */
.md-search__input:hover{
  background-color: var(--md-accent-fg-color);
}

.md-header__button:hover {
  opacity: inherit;
}

/* Make the footer a nice RCPCH blue */
.md-footer {
  background-color: var(--md-primary-fg-color);
}



/* NAVIGATION */

/* enlarges the font used for titles and navbar */
.md-header__title {
  font-size: 1rem;
  width: 100%;
}

.md-tabs__list {
  font-weight: 600;
}

/* enlarges the logo image */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 5rem !important;
  width: auto;
}

/* widens the page view */
.md-grid {
  max-width: 70rem;
}




/* MOBILE */

/* mobile  - make the header white with blue text */
.md-nav--primary .md-nav__title[for="__drawer"] {
  background-color: #ffffff;
  color: #0d0d58;
}

/* mobile - enlarges the logo image */
.md-nav__title .md-nav__button.md-logo img {
  width: 100px;
}




/* IMAGES */

.md-content img {
  border-radius: 0.2em;
  box-shadow: 0 0 0.2em 0 #777;
}

.md-content img.twemoji {
  border-radius: 0;
  box-shadow: 0 0 0 0 #777;
}

img[alt="doc-signature"] {
  width: 200px;
}

/* buttons styling */
button {
  text-align: center;
}

.md-typeset .md-button {
  margin: 0.2em;
}


/* HERO SECTION OF HOME PAGE */
.mdx-hero__content {
  background-color: #11a7f2;
  padding: 3em;
}

.mdx-hero__content.md-typeset>h1,
.mdx-hero__content.md-typeset>h2,
.mdx-hero__content.md-typeset>p {
  color: #ffffff;
}

.mdx-hero__content a.md-button:hover {
    background-color: var(--rcpch-pink-color);
    border-color: var(--rcpch-pink-color);
}

.latex img {
  -moz-box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px #ccc;
  box-shadow: 0px 0px 0px #ccc;
  border: none!important;
}

img {
  -moz-box-shadow: 0px 0px 0px #ccc;
  -webkit-box-shadow: 0px 0px 0px #ccc;
  box-shadow: 0px 0px 0px #ccc;
  border: none!important;
}