/*
Theme Name: Schule Büren
Author: Sven Waser
Author URI: https://www.sven-waser.ch
Description: Dieses WordPress-Theme wurde im Auftrag der Schule Büren von Sven Waser erstellt. Es beinhaltet einige zusätzliche Funktionen, welche der Einfachheit halber und der Lesbarkeit nicht in Plugins aufgeteilt wurden. Das Theme blockiert zudem alle Funktionen, welche für WordPress und diese Webseite nicht essenzielle sind, um das Backend nicht zu überladen und die Bearbeitung der Webseite möglichst zu vereinfachen.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Schule Büren

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* @import url('https://fonts.googleapis.com/css2?family=News+Cycle&display=swap'); */
@font-face {
  font-family: "News Cycle";
  src: url("font/NewsCycle-Regular.ttf") format("truetype");
}

* {
  margin: 0;
  padding: 0;
}

::selection {
  background-color: #0067a5;
  color: white;
}

body {
  height: auto;
  min-height: 100vh;
  font-size: 12pt;
  overflow-x: hidden;
}

/* Fonts */
article h1 {
  font-size: 3em;
  color: #0067a5;
}

article h2 {
  font-size: 2.75em;
  color: #0067a5;
}

article h3 {
  font-size: 2.5em;
  color: #0067a5;
}

article h4 {
  font-size: 2.25em;
  color: #0067a5;
}

article h5 {
  font-size: 2em;
  color: #0067a5;
}

article h6 {
  font-size: 1.75em;
  color: #0067a5;
}

article a {
  color: #0067a5;
}

/* WP */
article blockquote.wp-block-quote, #editor blockquote.wp-block-quote {
  border-left: 3px solid #0067a5;
  color: #0067a5;
  font-weight: 800;
  padding: 5px 10px;
  margin: 5px auto;
}

article blockquote.wp-block-quote cite, #editor blockquote.wp-block-quote cite {
  color: #4d95c0;
  font-size: 11pt;
}

article figure.wp-block-pullquote, #editor figure.wp-block-pullquote {
  border-top: 4px solid #0067a5;
  border-bottom: 4px solid #0067a5;
  margin: 5px auto;
}

article figure.wp-block-pullquote blockquote p, #editor figure.wp-block-pullquote blockquote p {
  color: #0067a5;
}

article figure.wp-block-pullquote blockquote cite, #editor figure.wp-block-pullquote blockquote cite {
  color: #4d95c0;
  font-size: 11pt;
}

 article a.wp-block-button__link, #editor a.wp-block-button__link {
  display: inline-block;
  background-color: #0067a5;
  color: white;
  border-radius: 5px;
  border: none;
  outline: none;
  padding: 12px 18px;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

article a.wp-block-button__link:hover, #editor a.wp-block-button__link:hover {
  opacity: 0.85;
}

article hr.wp-block-separator, #editor hr.wp-block-separator {
  color: #0067a5;
  margin: 10px 0px;
}

article ul, #editor ul {
  margin-left: 15px;
  color: #0067a5;
}

article ul li::marker, #editor ul li::marker {
  color: #0067a5;
}

article div.wp-block-file {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 5px;
}

article div.wp-block-file a {
  order: 2;
  text-decoration: none;
}

article div.wp-block-file a.wp-block-file__button {
  order: 1;
  margin: 0px 7.5px 0px 0px;
  background-color: transparent;
  padding: 0px;
  font-size: 9pt;
  line-height: 1;
  color: #0067a5;
}

article div.wp-block-file a.wp-block-file__button img {
  height: 10pt;
}

header {
  display: block;
  position: fixed;
  height: 60px !important;
  z-index: 98;
  box-sizing: border-box;
  background-color: white;
  padding: 10px 20px;
  width: 100%;
  box-shadow: 0px 0px 5px black;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

header .left {
  position: relative;
}

header .left .custom-logo {
  display: block;
  margin: 0px auto;
  height: 40px;
  width: auto;
}

header .right {
  display: none;
}

header .mobile-nav-hamburger {
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 98;
  height: 30px;
  width: 30px;
  cursor: pointer;
}

header .mobile-nav-hamburger span {
  display: block;
  height: 7px;
  width: 100%;
  background-color: #0067a5;
  border-radius: 5px;
}

header .mobile-nav-hamburger span:nth-child(2) {
  margin: 4.5px 0px;
}

.slider {
  width: 100%;
  height: 30vh;
  background-color: #80b3d2;
  position: relative;
}

.slider .slider-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: #80b3d2;
  background-size: cover;
  background-position: center center;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav {
  display: block;
  position: fixed;
  overflow: scroll;
  z-index: 97;
  top: 60px;
  left: 0;
  margin: 0px;
  margin-left: -100%;
  padding: 0px;
  width: 100%;
  height: calc(100vh - 60px);
  background-color: white;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .mobile-nav {
  display: block;
}

nav .mobile-nav form.search_form {
  display: block;
  overflow: hidden;
  background-color: white;
  border: 2px solid #0067a5;
  padding: 3px 8px;
  margin: 10px;
}

nav .mobile-nav form.search_form input {
  float: left;
  background-color: transparent;
  border: none;
  outline: none;
  color: #0067a5;
  width: calc(100% - 25px);;
  font-size: 15px;
  font-family: 'News Cycle', sans-serif;
  line-height: 0.8;
}

nav .mobile-nav form.search_form button {
  background-color: transparent;
  float: left;
  position: relative;
  border: none;
  outline: none;
  margin: 0px 5px;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

nav .mobile-nav form.search_form button:before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0px;
  width: 10px;
  height: 10px;
  border: 3px solid #0067a5;
  border-radius: 50%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .mobile-nav form.search_form button:after {
  content: "";
  display: block;
  position: absolute;
  top: 16px;
  left: 10px;
  width: 10px;
  height: 3px;
  background: #0067a5;
  transform: rotate(45deg);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .mobile-nav form.search_form button:hover:before {
  opacity: 0.8;
}

nav .mobile-nav form.search_form button:hover:after {
  opacity: 0.8;
}

nav .bubble {
  background: white;
  width: 100%;
  margin: 0px;
  clip-path: none !important;
  border-radius: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  border-bottom: 1px solid #e6e6e6;
}

nav .bubble:nth-child(2) {
  border-top: 1px solid #e6e6e6;
}

nav .bubble .title {
  position: inherit;
  hyphens: auto;
  padding: 10px;
  opacity: 0.9;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble .title div {
  display: flex;
  align-items: center;
  overflow: hidden;
  position: inherit;
  width: 100%;
  font-family: 'News Cycle', sans-serif;
  color: black;
  font-size: 12pt;
  font-weight: bold;
  transform: translate(0,0);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble .title div img {
  display: block;
  float: left;
  height: 12pt;
  width: auto;
  margin: 10px 15px 10px 10px;
  filter: grayscale(100%);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble:hover .title div img {
  height: 12pt;
  width: auto;
}

nav .bubble .title div span {
  display: block;
  hyphens: auto;
  overflow: hidden;
  float: left;
  opacity: 1;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble:hover .title div span {
  opacity: 1;
}

nav .bubble ul.menu {
  max-height: 0px;
  overflow: hidden;
  transition: 0.5s;
  -webkit-transition: 0.5;
}

nav .bubble:hover ul.menu {
  max-height: auto;
}

nav .bubble ul.menu a, nav .bubble ul.menu .menu-item-has-children li a {
  display: block;
  padding: 8px;
  padding-left: 12pt;
  color: black;
  text-decoration: none;
  font-family: 'News Cycle', sans-serif;
  font-size: 11pt;
  font-weight: normal;
  hyphens: auto;
  border-top: 1px solid  #f5f5f5;
}

nav .bubble ul.menu .menu-item-has-children a {
  background-color: #f8f8f8;
  padding: 4px 10px;
  cursor: text;
  font-weight: 800;
}

nav .bubble ul.menu li a:hover {
  background-color: #fafafa;
}

nav .bubble:hover {
  border-radius: 0px;
  clip-path: none !important;
}

nav .bubble:hover .title {
  opacity: 1;
  padding: 10px;
}

nav .bubble:hover .title div {
  transform: translate(0,0);
}

/* Article */
article {
  margin: 10px 20px 30px 20px;
  width: calc(100% - 40px);
  min-height: 70vh;
  font-family: 'News Cycle', sans-serif;
}

/* Search */
.search_result_container{
  margin: 5px 0px 15px 0px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6f0f6;
}

.search_result_container span.path_link {
  display: block;
  color: #80b3d2;
  font-size: 11pt;
  line-height: 1;
}

.search_result_container a.permalink {
  display: block;
  font-size: 14pt;
  color: #3385b7;
  text-decoration: none;
}

/* 404 */
article.error-404 .container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  font-family: 'News Cycle', sans-serif;
  font-weight: bolder;
  color: #005284;
}

article.error-404 .container .icon {
  display: inline-block;
  font-size: 30px;
}

article.error-404 .container .message {
  display: inline-block;
  font-size: 25px;
}

/* unsubscribe */
article.unsubscribe .container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  font-family: 'News Cycle', sans-serif;
}

article.unsubscribe .container .icon {
  display: inline-block;
  font-size: 50px;
}

article.unsubscribe .container .message {
  display: inline-block;
  font-size: 20px;
}

/* News */
article .news-container {
  padding: 40px 0px;
}

article .news-container .top-bar {
  text-align: right;
}

article .news-container .top-bar a {
  text-decoration: none;
  color: #333333;
}

article .news-container .news {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  gap: 30px;
  margin-left: -20px;
  width: 100%;
  overflow-x: scroll;
  padding: 20px;
}

article .news-container .news .item {
  position: relative;
  box-shadow: 0px 0px 20px #d9e9f2;
  border-radius: 5px;
  padding: 20px 25px 42px 25px;
  width: 200px;
  overflow: hidden;
}

article .news-container .news .item .ribbon {
  margin: 0;
  padding: 0;
  background: #e6f0f6;
  font-family: 'News Cycle', sans-serif;
  font-size: 8pt;
  color: #0067a5;
  padding: 2px 5px;
  position: absolute;
  top:0;
  right:0;
  transform: translateX(30%) translateY(0%) rotate(45deg);
  transform-origin: top left;
  user-select: none;
}

article .news-container .news .item .ribbon:before,
article .news-container .news .item .ribbon:after {
  content: '';
  position: absolute;
  top:0;
  margin: 0 -1px; /* tweak */
  width: 100%;
  height: 100%;
  background: #e6f0f6;
}

article .news-container .news .item .ribbon:before {
  right:100%;
}

article .news-container .news .item .ribbon:after {
  left:100%;
}

article .news-container .news .item .title {
  display: block;
  font-size: 14pt;
  font-weight: bold;
}

article .news-container .news .item .meta {
  display: block;
  font-size: 10pt;
  color: #999999;
}

article .news-container .news .item .content {
  display: block;
  margin: 10px 0px;
  font-size: 11pt;
}

article .news-container .news .item .readon {
  display: block;
  position: absolute;
  bottom: 20px;
  right: 25px;
  text-align: right;
}

article .news-container .news .item .readon a {
  text-decoration: none;
  color: #333333;
  font-size: 12px;
}

/* Newsletter */
article .newsletter {
  display: block;
  position: relative;
  margin-left: -20px;
  margin-right: -20px;
  background: #0067a5;
  box-shadow: 0px 0px 20px #cce1ed;
  padding: 60px 20px;
  color: white;
}

article .newsletter .response {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  padding: 10px 20px;
  border-radius: 5px;
  background: #3385b7;
  font-weight: bold;
}

article .newsletter .section {
  width: 80%;
  max-width: 450px;
  margin: 0px auto;
}

article .newsletter .section .info {
  margin-bottom: 20px;
}

article .newsletter .section .info .title {
  display: block;
  font-size: 24pt;
  line-height: 1;
  font-weight: bold;
}

article .newsletter .section .info .description {
  font-size: 10pt;
  color: #99c2db;
}

article .newsletter .section .form {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  max-width: 450px;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #3385b7;
}

article .newsletter .section .form input {
  border: none;
  outline: none;
  background-color: white;
  font-family: 'News Cycle', sans-serif;
  font-size: 14pt;
  padding: 8px 14px;
  width: 100%;
}

article .newsletter .section .form button {
  font-size: 14pt;
  padding: 8px 14px;
  border: none;
  outline: none;
  background-color: white;
  cursor: pointer;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

article .newsletter .section .form button:hover {
  background-color: #e6f0f6;
}

/* Single news */
article.single-news .title {
  font-size: 18pt;
  font-weight: bold;
}

article.single-news .meta {
  font-size: 10pt;
  color: #999999;
  margin-bottom: 10px;
}

/* Archive */
article.archive {
  display: grid;
  grid-template-columns: 1fr;
}

article.archive .post-list .page-title {
  font-size: 20pt;
}

article.archive .post-list .item {
  margin: 5px 0px 15px 0px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e6f0f6;
}

article.archive .post-list .item .path_link {
  display: block;
  color: #80b3d2;
  font-size: 11pt;
  line-height: 1;
  text-decoration: none;
}

article.archive .post-list .item .permalink {
  display: block;
  font-size: 14pt;
  color: #3385b7;
  text-decoration: none;
}

article.archive .post-list .paginate {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'News Cycle', sans-serif;
  text-decoration: none;
}

article.archive .post-list .paginate .page-numbers {
  display: block;
  font-family: 'News Cycle', sans-serif;
  font-size: 11pt;
  line-height: 1;
  color: #0067a5;
  text-decoration: none;
  font-weight: bold;
  padding: 4px;
  border-left: 2px solid #0067a5;
}

article.archive .post-list .paginate .page-numbers:nth-child(1) {
  border: none;
}

article.archive .post-list .paginate .current {
  background-color: #0067a5;
  color: white;
}

article.archive .sidebar li {
  list-style-type: none;
}

article.archive .sidebar li a {
  color: #0067a5;
  text-decoration: none;
}

/* Footer */
footer {
  display: block;
  box-sizing: border-box;
  padding: 30px;
  background-color: #005284;
  color: white;
  font-family: 'News Cycle', sans-serif;
  width: 100%;
}

footer a {
  color: white;
}

footer div {
  margin: 10px 0px;
}

footer .right {
  text-align: left;
}