/*
Theme Name: borosenv2
Theme URI: https://borosen.de/
Author: jottpeo
Author URI: https://borosen.de/
Description: 
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starter-block-theme-v2
Tags: Block Editor Patterns, Site Editor

/*  Smoot Scroll */
html {
  scroll-behavior: smooth;
}

/*  Automatische Silbentrennung  */
body {
	hyphens: auto;
}

/* Footer auch bei kurzem Inhalt unten haben */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height:  calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}

main {
	flex-grow: 1;
}

/*  Reduced motion prefs  */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Hintergrundbild */
body {
    background-image: url('assets/background.png'); /* Pfad zum Bild relativ zur CSS-Datei */
    background-repeat: repeat; /* Bild wiederholen */
}

/* Schriftart */
@font-face {
  font-family: 'Gilroy';
  src: url('./assets/fonts/Gilroy-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gilroy';
  src: url('./assets/fonts/Gilroy-ExtraBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

strong, b {
  font-weight: 800;
}

/* Markierungsfarben */
.nomark,
.nojq,
.wp-block-site-logo,
.site-header,
.no-mark,
.wp-block-post-navigation-link,
.wp-block-query-pagination,
.borosen-spieldaten-container,
.borosen-slider-wrapper {
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer/Edge */
  user-select: none;         /* Standard */
}

*::selection {
  background-color: var(--wp--preset--color--hellgelb-hover) !important;
  color: var(--wp--preset--color--soft-schwarz) !important;
}

*::-moz-selection {
  background-color: var(--wp--preset--color--hellgelb-hover) !important;
  color: var(--wp--preset--color--soft-schwarz) !important;
}

/*  Navigation Block Breakpoint. Credit: https://wpdocs.io/ */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: block !important;
}

body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none !important;
}

/* Change the width to the breakpoint of the Nav */
@media (min-width: 888px) {
  body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
  }
}
/* end nav break point */

/* Nicley wrapped headlines */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* I've no idea why when you add a backgroud colour to a column, WP by default adds padding to it... so weird - this get's rid of that */
:where(.wp-block-columns.has-background) {
  padding: initial;
}

/* Pull Quote */
.wp-block-pullquote blockquote {
  display: grid;
  gap: 20px;
}

.wp-block-pullquote cite {
  font-size: 80%;
  font-weight: 300;
}

.wp-block-search__button {
  box-shadow: none;
  border: 1px solid var(--wp--preset--color--soft-schwarz);
  border-radius: 25px;
  color: var(--wp--preset--color--warmweiss);
  font-weight: 800;
}

/* Comments */
.comment-form-cookies-consent {
  font-size: 14px;
  line-height: 2;
}

/* Keep our titles link the off black color */
.wp-block-post-title :where(a) {
  color: var(--wp--preset--color--soft-schwarz);
}

/* Button hover state  - core button block still does not have this and I can't figure out how to do it in theme.json! */
.wp-block-button__link,
a {
  transition: 0.3s;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
#commentform .form-submit.wp-block-button input:hover {
  background: var(--wp--preset--color--warmweiss);
  color: var(--wp--preset--color--soft-schwarz);
}

.wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--warmweiss);
  color: var(--wp--preset--color--soft-schwarz);
  border-color: var(--wp--preset--color--soft-schwarz);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--soft-schwarz);
  color: var(--wp--preset--color--warmweiss);
  border-color: var(--wp--preset--color--soft-schwarz);
}

/* a:hover:not(.wp-block-site-title a, .wp-block-button__link.wp-element-button) {
  text-decoration: underline !important;
}
*/

/* Bento Box Query Loop */
/* Anordnung */
.bento-loop {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

.bento-loop li:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2 !important;
}

.bento-loop li:nth-child(2) {
    grid-area: 1 / 2 / 2 / 4 !important;
}

.bento-loop li:nth-child(3) {
    grid-area: 2 / 2 / 3 / 3 !important;
}

.bento-loop li:nth-child(4) {
    grid-area: 2 / 3 / 3 / 4 !important;
}

.bento-loop li:nth-child(5) {
    grid-area: 3 / 1 / 4 / 3 !important;
}

.bento-loop li:nth-child(6) {
    grid-area: 3 / 3 / 4 / 4 !important;
}

.bento-loop li {
    min-height: 280px;
}

/* Kacheln klickbar machen  */
.bento-loop a::before {
 position: absolute;
 width: 1000%; /* Ausfüllen der gesamten Kachel  */
 height: 1000%; /* Ausfüllen der gesamten Kachel  */
 top: 0;
 left: 0;
 content: " ";
 overflow: hidden; /* Wichtig, damit 1000% abgeschnitten werden  */
}

.bento-loop a:hover {
    text-decoration: none !important;
}

/* Hover Farbwechsel  */
.bento-loop .wp-block-cover:hover span {
    background: var(--wp--preset--color--bvb-gelb) !important;
}

.bento-loop .wp-block-cover span {
    transition: .5s;
}

/* Responsivität  */
@media (max-width: 850px) {
	.bento-loop {
		display: grid;
		grid-template-columns: repeat(2, 1fr) !important;
		grid-template-rows: repeat(4, 1fr) !important;
		grid-column-gap: 15px;
		grid-row-gap: 15px;
	}

	.bento-loop li:nth-child(1) {
		grid-area: 1 / 1 / 3 / 2 !important;
	}

	.bento-loop li:nth-child(2) {
		grid-area: 1 / 2 / 2 / 3 !important;
	}

	.bento-loop li:nth-child(3) {
		grid-area: 2 / 2 / 3 / 3 !important;
	}

	.bento-loop li:nth-child(4) {
		grid-area: 3 / 1 / 4 / 3 !important;
	}

	.bento-loop li:nth-child(5) {
		grid-area: 4 / 1 / 5 / 2 !important;
	}

	.bento-loop li:nth-child(6) {
		grid-area: 4 / 2 / 5 / 3 !important;
	}

	.bento-loop li {
		min-height: 280px;
	}
}

@media (max-width: 600px) {
    .bento-loop {
        display: flex !important;
        flex-direction: column;
    }

    .bento-loop li {
        min-height: auto;
    }

    .bento-loop .wp-block-cover {
        min-height: 300px !important;
    }
	.has-global-padding {
		padding-right: 10px !important;
		padding-left: 10px !important;
	}
}

/* Bilder automatisch mit 25px Radius */
.wp-block-image img {
  border-radius: 25px;
}

/* Schatten */
.schatten {
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.15),   /* sichtbarere erste Ebene */
    0 8px 12px rgba(0, 0, 0, 0.1);   /* tiefere, weichere Ebene */
}