/*
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*/
header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: fixed;
  z-index: 98;
  box-sizing: border-box;
  background-color: white;
  padding: 10px 20px;
  width: 100%;
  height: auto;
  box-shadow: 0px 0px 5px black;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

header .mobile-nav-hamburger {
  display: none;
}

header .left, header .right {
  overflow: hidden;
  transition: 0.25s;
  -webkit-transition: 0.25s;
}

header .left {
  position: relative;
}

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

header .right form.search_form {
  float: right;
  display: inline-block;
  overflow: hidden;
  background-color: white;
  border: 2px solid #0067a5;
  padding: 3px 8px;
}

header .right form.search_form input {
  float: left;
  background-color: transparent;
  border: none;
  outline: none;
  color: #0067a5;
  width: 150px;
  font-size: 15px;
  font-family: 'News Cycle', sans-serif;
  line-height: 0.8;
}

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

header .right 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;
}

header .right 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;
}

header .right form.search_form button:hover:before {
  opacity: 0.8;
}

header .right form.search_form button:hover:after {
  opacity: 0.8;
}

.slider {
  width: 100%;
  height: 60vh;
  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 {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 1%;
  z-index: 97;
  margin: -80px 10% 20px 10%;
  width: 80%;
  height: auto;
}

nav .mobile-nav {
  display: none;
}

nav .bubble {
  background: #0067a5;
  overflow: hidden;
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  width: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble:hover {
  border-radius: 10px;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%, 0% 0%); /* https://tools.webdevpuneet.com/css-clip-path-generator/ */
}

nav .bubble .title {
  position: relative;
  hyphens: auto;
  padding-top: 100%;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble:hover .title {
  opacity: 0.8;
  padding-top: 80%;
}

nav .bubble .title div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  transform: translate(-50%, -45%);
  text-align: center;
  font-family: 'News Cycle', sans-serif;
  color: white;
  font-size: 9pt;
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble:hover .title div {
  transform: translate(-50%, -55%);
}

nav .bubble .title div img {
  display: block;
  width: 70%;
  margin: 10px auto;
  filter: brightness(0) invert(1);
  transition: 0.5s;
  -webkit-transition: 0.5s;
}

nav .bubble:hover .title div img {
  width: 60%;
}

nav .bubble .title div span {
  display: block;
  hyphens: auto;
  overflow: hidden;
  opacity: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  font-weight: 800;
  font-size: 12pt;
}

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: 10px 12px;
  background-color: transparent;
  color: white;
  text-decoration: none;
  font-family: 'News Cycle', sans-serif;
  font-weight: bold;
  hyphens: auto;
  border-top: 1px solid #005284;
  cursor: pointer;
}

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

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

/* Bakcend menu */
#adminmenu li ul.wp-submenu {
  margin: 0px;
}

/* 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;
}


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

/* 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: 50px;
}

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

/* 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: repeat(5, 1fr);
  gap: 30px;
}

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

article .news-container .news .item .ribbon {
  margin: 0;
  padding: 0;
  background: #e6f0f6;
  font-family: 'News Cycle', sans-serif;
  font-size: 10pt;
  color: #0067a5;
  padding: 3px 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: 13px;
}

/* Newsletter */
article .newsletter {
  display: block;
  position: relative;
  margin-left: -10vw;
  margin-right: -10vw;
  background: #0067a5;
  box-shadow: 0px 0px 20px #cce1ed;
  padding: 60px 40px;
  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: 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: 80% 20%;
}

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 {
  margin-left: 20px;
}

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

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

/* Footer */
footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 80%;
  padding: 30px 10% 30px 10%;
  background-color: #005284;
  box-shadow: 0px 0px 5px #cccccc;
  color: white;
  font-family: 'News Cycle', sans-serif;
}

footer a {
  color: white;
}

footer .right {
  text-align: right;
}