/*
================================================================================
Commentpress Modern Child Theme Styles
================================================================================
AUTHOR: Christian Wach <needle@haystack.co.uk>
--------------------------------------------------------------------------------
NOTES

The Theme Customizer in Wordpress 3.4 allows quite a lot of changes to be made,
but child themes allow much more to be done. Add styles to this file to override
the style that the parent theme applies.

--------------------------------------------------------------------------------
*/

:root {
  --raki-header-height: 46px;
  --raki-navigation-width: 290px;
  --raki-sidebar-width: 26%;
  --raki-content-width: calc(100% - 26% - var(--raki-navigation-width));

  --raki-color-turquoise: #312783;
  --raki-color-orange: #e84030;
  --raki-color-neutral-medium: #4b5665;
  --raki-color-neutral-medium-dimmed: #838e9d;
  --raki-color-neutral-dark: #192738;
  --raki-color-neutral-light: #dae2e5;

  --raki-font-size-hero: 2.5rem;
  --raki-font-size-large: 1.5rem;
  --raki-font-size-base: 18px;
}

/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v34-latin-regular.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+ */
      url("../fonts/open-sans-v34-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/open-sans-v34-latin-italic.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+ */
      url("../fonts/open-sans-v34-latin-italic.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/open-sans-v34-latin-700.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+ */
      url("../fonts/open-sans-v34-latin-700.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/open-sans-v34-latin-700italic.woff2") format("woff2"),
    /* Chrome 36+, Opera 23+, Firefox 39+ */
      url("../fonts/open-sans-v34-latin-700italic.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
  font-size: var(--raki-font-size-base) !important;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Open Sans";
  text-transform: none;
}

html,
#container,
.sidebar_contents_wrapper,
#toc_sidebar .sidebar_minimiser ul#toc_list {
  background-color: #fff !important;
}

/* SITE HEADER */

.raki-header {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
  height: var(--raki-header-height) !important;
  box-shadow: none !important;
}

.raki-header__logo {
  display: inline-block;
  margin-top: 0.7em;
  fill: var(--raki-color-orange);
}
.site-header__one-line-logo {
  display: block;
  height: auto;
  width: 200px;
}

.raki-header__title-wrapper {
  padding-top: 0.7em !important;
}
@media (min-width: 1201px) {
  .raki-header__title-wrapper {
    padding-left: 180px !important;
  }
}
@media (max-width: 660px) {
  .raki-header__description {
    display: none;
  }
}
@media (min-width: 661px) {
  .raki-header__description {
    display: inline;
  }
}

.raki-header__title-wrapper a {
  color: var(--raki-color-turquoise) !important;
}

.raki-header__title-wrapper,
.raki-header__title {
  display: inline-block;
  vertical-align: top;
}

.raki-header__title h1 {
  margin-top: 0 !important;
  line-height: 1;
  letter-spacing: initial !important;
}
@media (max-width: 600px) {
  #title h1 {
    line-height: 1;
  }
}

.raki-header__title h1 {
  font-size: var(--raki-font-size-base) !important;
  font-weight: 700;
  font-family: "Open Sans" !important;
  padding: 0 !important;
}

#content_container {
  margin-top: var(--raki-header-height) !important;
}

#navigation {
  top: var(--raki-header-height) !important;
}

/* SIDEBARS */

#sidebar {
  top: 46px !important;
}

.sidebar_contents_wrapper {
  overflow-y: auto !important;
  height: calc(100vh - 45px) !important;
}

@media (min-width: 600px) {
  .sidebar_contents_wrapper {
    height: calc(100vh - 65px) !important;
  }
}

#sidebar_frontpage_inner {
  padding: 1em 2em;
  background-color: var(--raki-color-neutral-light) !important;
}
#sidebar_frontpage_inner a {
  color: var(--raki-color-orange);
}
#sidebar_frontpage_inner .username {
  color: var(--raki-color-turquoise);
}
#sidebar_frontpage_inner h4 {
  text-transform: none !important;
  color: var(--raki-color-turquoise);
  margin-top: 0.4em;
  font-weight: 400;
}
#sidebar_frontpage_inner p + h4 {
  margin-top: 2em;
}
.raki-sidebar-widget-area {
  margin-top: 2em;
}

.sidebar_header {
  color: #fff !important;
  background-color: var(--raki-color-orange) !important;
}

#toc_sidebar .sidebar_minimiser ul li a,
#toc_sidebar .paragraph_wrapper {
  background-color: var(--raki-color-neutral-light) !important;
}

#toc_sidebar .sidebar_minimiser ul li.current_page_item a,
#toc_sidebar .sidebar_minimiser ul li a:hover {
  background-color: #fff !important;
  color: var(--raki-color-orange) !important;
}

#toc_sidebar .sidebar_minimiser ul#nav li.active_page > a,
#toc_sidebar .sidebar_minimiser ul#nav li.active_page > a:active,
#toc_sidebar .sidebar_minimiser ul#toc_list li.current_page_ancestor > a,
#toc_sidebar .sidebar_minimiser ul#toc_list li.current_page_ancestor > a:active,
#toc_sidebar .sidebar_minimiser ul#toc_list li.current_page_item > a,
#toc_sidebar .sidebar_minimiser ul#toc_list li.current_page_item > a:active,
#toc_sidebar .sidebar_minimiser ul li a {
  font-size: var(--raki-font-size-medium) !important;
  padding: 0.5em 1.9em;
}

ul#sidebar_tabs {
  background-color: var(--raki-color-turquoise) !important;
}
ul#sidebar_tabs li a {
  color: var(--raki-color-neutral-dark) !important;
  background-color: var(--raki-color-neutral-light) !important;
}
ul#sidebar_tabs li a:hover {
  color: #fff !important;
  background-color: var(--raki-color-orange) !important;
}
ul#sidebar_tabs li a.active-tab {
  color: #fff !important;
  background-color: var(--raki-color-turquoise) !important;
}
/* N Kommentare auf Absatz 3 */
.comments_container > h3 {
  background-color: var(--raki-color-neutral-light) !important;
}
.comments_container > h3 a,
.comments_container > h3 a:active,
.comments_container > h3 > span {
  color: var(--raki-color-neutral-dark) !important;
  text-transform: none !important;
}
/* headings whose comment form is currently open. */
.comments_container > h3 a:focus {
  background-color: var(--raki-color-neutral-light) !important;
}
.paragraph_wrapper {
  background-color: var(--raki-color-neutral-light) !important;
}
#respond_title {
  color: var(--raki-color-orange) !important;
}

/* Content */

#page_wrapper,
.outer-shadow-fifteen-px,
.page_wrapper {
  box-shadow: none !important;
  margin-bottom: 2em;
}
.page_navigation {
  margin-top: -2em;
}
.running_header_bottom {
  margin-bottom: -1em;
  text-transform: none !important;
  color: var(--raki-color-neutral-medium);
}

#content,
.content {
  padding-top: 0;
}

#content a:hover {
  text-decoration: underline;
}

#content a {
  color: var(--raki-color-turquoise);
  text-decoration: none;
}

@media (max-width: 600px) {
  .search_result h3,
  h2.post_title {
    font-size: 1.5em;
    line-height: 1.4 !important;
    margin-top: 3em;
    hyphens: auto;
  }
}

.post_title a {
  background: var(--raki-color-turquoise);
  padding: 8px;
  color: #fff !important;
  font-size: var(--raki-font-size-hero) !important;
  display: inline-block;
  text-transform: none !important;
}

.wp-block-heading {
  text-transform: none !important;
}

.selected_para {
  color: var(--raki-color-orange) !important;
}

.no_comments a.comment_block_permalink {
  color: var(--raki-color-neutral-medium-dimmed) !important;
}

.page_navigation ul li.alignleft a,
.page_nav_lower .page_navigation ul li.alignleft a,
.page_navigation ul li.alignright a,
.page_nav_lower .page_navigation ul li.alignright a {
  background-image: url(../images/nav/page-curl-top-left.png) !important;
}
.page_navigation ul li.alignright {
  transform: rotate(180deg);
}

/* CTA Button */
.btn-cta {
  background-color: var(--raki-color-turquoise);
  color: #fff !important;
  padding: 1.2rem;
  font-size: 1.3rem;
  width: 100%;
  display: block;
  text-align: center;
}
.btn-cta:hover {
  background-color: var(--raki-color-orange);
  color: #fff;
  text-decoration: none !important;
}

/* DSGVO Panel */
.emphasis {
  margin: 0 -2rem;
  padding: 1rem 2rem;
  color: white;
  background-color: var(--raki-color-turquoise);
}

/* Fußnoten */
a[role="doc-noteref"] {
  font-size: 14px;
  vertical-align: super;
}

/* Compensating for the fixed header */
a[role="doc-backlink"]:before,
a[role="doc-noteref"]:before {
  content: "";
  display: inline-block;
  position: relative;
  width: 1px;
  height: 5em;
  margin-top: -5em;
}

.post > footer {
  font-size: 14px;
}
.post > footer li > * {
  vertical-align: text-top;
}

a[role="doc-backlink"] {
  padding: 0.2em 0.6em;
}
#content .post > footer li a[role="doc-backlink"]:hover {
  color: var(--raki-color-orange);
}
#content .post > footer li a[role="doc-backlink"] + a,
#content .post > footer li a[role="doc-backlink"] + span {
  hyphens: auto;
  width: calc(100% - 35px);
  display: inline-block;
  overflow-wrap: break-word;
}
#content .post > footer li:target,
#content a[role="doc-noteref"]:target {
  background-color: var(--raki-color-neutral-light);
}
#content .post > footer li:target a,
#content a[role="doc-noteref"]:target {
  color: var(--raki-color-neutral-dark);
}

@media (min-width: 1201px) {
  #navigation {
    width: var(--raki-navigation-width) !important;
  }
  #footer,
  .active-menu #content_container,
  .active-sidebar #content_container,
  #content_container {
    left: var(--raki-navigation-width) !important;
  }

  #wrapper,
  #footer {
    width: var(--raki-content-width) !important;
  }

  #sidebar {
    width: var(--raki-sidebar-width) !important;
  }
}

/* Footer */

#footer_inner {
  background-color: var(--raki-color-neutral-light) !important;
  font-size: var(--raki-font-size-base) !important;
}