/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Bricks Child Theme for Skiclub Hirschberg Langen
 Author:       Daniel Brunner | andersch Marketing und Design GmbH
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

@import 'tokens-and-classes.css';

/*
------------------------
Mini Reset
------------------------
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p, h1, h2, h3, h4, h5, h6, figure, blockquote {
  margin: 0;
}

/*
------------------------
Typography
------------------------
*/
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  src: url('./assets/fonts/montserrat/montserrat-v31-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  src: url('./assets/fonts/montserrat/montserrat-v31-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  src: url('./assets/fonts/lora/lora-v37-latin-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-display: swap;
  font-family: 'Lora';
  src: url('./assets/fonts/lora/lora-v37-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

.site-wrapper {
  max-width: var(--site-max-width);
  margin-inline: auto;
  overflow: clip;
}

html {
  font-size: 100%;
  background-color: var(--html-background-color);
  padding-top: 9rem; /* Due to sticky header (position fixed) */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);

  max-width: var(--site-max-width);
  margin-inline: auto;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
  font-family: 'Lora', serif;
  line-height: var(--heading-line-height);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
}

h1, .h1, .h1 * {
  font-size: var(--heading-h1);
}

h2, .h2, .h2 * {
  font-size: var(--heading-h2);
}

h3, .h3, .h3 * {
  font-size: var(--heading-h3);
}

h4, .h4, .h4 * {
  font-size: var(--heading-h4);
}

strong {
  font-weight: var(--font-weight-bold);
}

label {
  color: inherit;
}

/* Flow Spacing */
.flow > * + * {
  margin-top: var(--flow-s);
}

.flow-m > * + * {
  margin-top: var(--flow-m);
}

/* Prose for longer list texts with hierarchy: imprint, GDPR statement, blog articles, etc. */
.prose > * + * {
  /* Base setup */
  margin-top: var(--flow-s);
}

/* Small margin before a heading if not starting */
.prose > :is(h1, h2, h3, h4):not(:first-child) {
  margin-top: var(--flow-heading-space);
}

/* Small margin after a heading */
.prose > :is(h1, h2, h3, h4) + :where(*) {
  margin-top: var(--space-xs);
}

/* Inline Links */
main a {
  transition: all var(--transition-duration) ease;
  color: var(--color-secondary);
  font-weight: var(--font-weight-bold);
}

main a:hover {
  color: var(--color-primary);
}

/*
------------------------
Gutenberg Stylings
------------------------
*/

/* Re-enable list styling in rich text an single posts */
.single main ul, .single main ol {
  margin-block-start: var(--space-s);
  margin-block-end: var(--space-s);
  padding-inline-start: var(--space-m);
}

.single main ul {
  list-style: disc;
}

.single main ul ::marker {
  color: var(--color-primary);
}

.single main ol {
  list-style: decimal;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: var(--gap);
}

/*
------------------------
Layout
------------------------
*/
.brxe-container {
  width: var(--container-width);
}

.brxe-section {
  padding: var(--section-padding-y) var(--section-padding-x);
}

/*
------------------------
Header
------------------------
*/
.brxe-nav-nested .menu-item a:not(.brxe-button) {
  transition: color var(--transition-duration) ease, background-color var(--transition-duration) ease;
}

.brxe-nav-nested .menu-item a:hover {
  color: var(--color-primary);
}

/* Fix for active bleeding into button */
#brx-header .brx-nav-nested-items > li > [aria-current="page"].brxe-button {
  color: var(--white);
}

/*
------------------------
Button
------------------------
*/
.brxe-button {
  font-weight: var(--font-weight-bold);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--text-l);
  color: var(--white);
  font-size: var(--text-button);
  border: 1px solid transparent;
  transition: all var(--transition-duration) ease;
}

.brxe-button:hover {
  background-color: var(--color-primary);
  color: var(--white);
  cursor: pointer;
}

.brxe-button:focus {
  background-color: var(--color-primary);
  outline: 2px solid var(--color-primary);
}

.brxe-button.bricks-background-primary:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.brxe-button.bricks-background-primary:focus {
  outline: 2px solid var(--color-secondary);
}

.brxe-button.bricks-background-secondary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.brxe-button.bricks-background-secondary:focus {
  outline: 2px solid var(--color-primary);
}

.brxe-button.outline.bricks-color-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.brxe-button.outline.bricks-color-primary:hover {
  color: var(--white);
}

.brxe-button.outline.bricks-color-primary.is-active {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--white);
}

/*
------------------------
Footer
------------------------
*/

footer .brxe-text a {
  border-bottom-width: 0;
}

footer a {
  transition: all var(--transition-duration) ease;
}

footer a:hover {
  color: var(--color-primary);
}

/* On mobile just one background */
footer {
  overflow: hidden;
  position: relative;
  background-color: var(--color-secondary);
}

footer > .brxe-section {
  position: relative;
  color: var(--footer-color-default);
}

/* Above our split design */
@media (min-width: 767px) {
  footer {
    --background-left-width: calc((100% - var(--container-width)) / 2 + var(--container-width) * 0.55);
  }

  footer::before {
    content: "";
    left: 0;
    right: var(--background-left-width);
    width: 100%;
    top: 0;
    bottom: 0;
    position: absolute;
    background-color: var(--background-color-dark);
  }

  footer::after {
    content: "";
    left: var(--background-left-width);
    width: 100%;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background-color: var(--color-secondary);
  }

  footer > .brxe-section a:hover {
    position: relative;
    color: var(--footer-color-hover);
  }

}

/*
------------------------
Misc
------------------------
*/

main .brxe-section:not(#hero) img {
  transition: transform var(--transition-duration) ease;
}

main .brxe-section:not(#hero) img:hover {
  transform: scale(1.05);
}

/* Minimal breakpoint adjustments for Racing Kids & Vereinsmeister Chronik grids */
@media (max-width: 767px) {
  .chronik-grid {
    word-wrap: anywhere;
    gap: var(--space-s) !important;
  }

  /* Align images at the end */
  .chronik-grid img {
    margin-top: auto;
  }
}

/*
------------------------
News list
------------------------
*/
.brxe-posts.news-list .content-wrapper {
  border: 1px solid var(--border-color-light);
  padding: var(--space-s);
}

/* No border top for news with images */
.brxe-posts.news-list .image-wrapper + .content-wrapper {
  border-top: none;
}

/* Reset border bottom for no results */
.brxe-posts .bricks-posts-no-results .content-wrapper {
  border: none;
}

/* Shift-effect for news list on home */
@media (min-width: 767px) {
  .brxe-posts.news-list.is-home {
    --offset: 7rem;
    overflow: visible;
  }

  /* Disable stretching when Going Layout: Grid in Bricks */
  .brxe-posts.news-list.is-home .content-wrapper {
    height: auto;
  }

  .brxe-posts.news-list.is-home .repeater-item:nth-child(2) {
    transform: translateY(calc(-1 * var(--offset)));
  }

  .brxe-posts.news-list.is-home .repeater-item:nth-child(3) {
    transform: translateY(calc(-2 * var(--offset)));
  }
}

/* Imagely / Next gen Gallery remove margins */
.ngg-galleryoverview {
  margin: 0;
}

/* BEGIN News list stuffing author, date and category into one row */
.brxe-posts.news-list .content-wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: var(--space-xs);

  /* So possible point pattern isn't bleeding into our news content */
  background-color: var(--html-background-color);
}

/* Title and excerpt full length */
.brxe-posts.news-list .content-wrapper > :nth-child(1),
.brxe-posts.news-list .content-wrapper > :nth-child(4) {
  grid-column: 1 / -1;
}

/* Date, category */
.brxe-posts.news-list .content-wrapper > :nth-child(2),
.brxe-posts.news-list .content-wrapper > :nth-child(3) {
  grid-row: 2;
}

.brxe-posts.news-list .content-wrapper > :nth-child(2)::after {
  content: "|";
  margin-inline: var(--space-xs);
}

/* END News list stuffing author, date and category into one row */

/* Pagination */
.bricks-pagination .page-numbers {
  list-style: none;
}

.bricks-pagination .page-numbers.current {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-primary);
}

/* BEGIN Post prev/next navigation (also for Veranstaltungen) */
.brxe-post-navigation .label {
  font-size: var(--body-font-size);
  font-weight: normal;
}

.brxe-post-navigation .title {
  font-size: var(--body-font-size);
  color: var(--link-color-default);
}

.brxe-post-navigation .content:hover .title {
  color: var(--link-color-hover);
}

.brxe-post-navigation .image {
  display: none;
}
/* END Post prev/next navigation (also for Veranstaltungen) */

/*
------------------------
Search results
------------------------
*/
.search-result-table {

}

/*
------------------------
Fluent form
------------------------
*/

html .frm-fluent-form .ff-t-container {
  gap: var(--space-m);
}

html .fluentform .ff-el-group {
  margin-bottom: var(--space-m);
}

html .fluentform .ff-el-group.ff_submit_btn_wrapper {
  margin-bottom: 0;
}

html .ff-message-success {
  border: none;
  padding: 0;
  box-shadow: none;
}

/*
------------------------
Brevo Newsletter sign up
------------------------
*/

/* Everything below overrides Brevo form defaults */
footer .sib-form {
  padding: 0;
  font-family: inherit;
}

footer #sib-container {
  padding: 0;
}

footer .sib-form .entry__error {
  background-color: transparent !important;
  color: var(--color-primary) !important;
  font-family: inherit !important;
  font-size: var(--text-s) !important;
}

footer .sib-form-container a {
  text-decoration: none;
  color: inherit;
  font-weight: var(--font-weight-bold);
  transition: all var(--transition-duration) ease;
}

footer .sib-form-container a:hover {
  color: var(--color-primary);
}

footer .sib-form-block {
  padding: 0;
}

footer .sib-form-block:not(:last-of-type) {
  margin-top: var(--space-s);
}

footer .sib-form .entry__field {
  border-radius: 2rem;
  margin: 0;
  background-color: transparent;
  border-color: var(--white);
}

footer .sib-form .input:first-child,
.sib-form .input__affix:first-child {
  padding: 0 var(--space-s);
}

footer .sib-form .input::placeholder {
  color: var(--white);
}

footer .entry__choice {
  margin-bottom: 0;
  font-family: inherit;
}

footer .sib-form .entry__specification {
  color: var(--white);
}

footer .sib-form .entry__error + .entry__specification {
  margin-top: var(--space-xs);
}

footer .sib-form-block__button {
  display: flex;
  margin-top: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

footer .sib-form-block__button:focus {
  color: var(--white);
}