.rsf-slick-slider-blog {
    width: inherit;          /* TBD check if this can go away */
    /* height: 575px; */
    margin: 0 auto;
    padding: 0 0px 0 0px;
    /*background: #272727; */
}

.slick-list {
  height: inherit;
}


.slick-next {
  right: 2px;
  z-index: 1;
}
.slick-prev {
  left: 2px;
  z-index: 1;
}

.slick-track {
  height: inherit;   /* TBD: believe the content (img) is determining the size anyway */
  overflow: hidden;  /* probably not needed */
}


.slick-slide{
    height: calc(280px*1.5);
    width: 280px;  /* TBD can this be calculated? or that least responsive */
}

/* .slick-slide:last-child {
  border-right: 0;
} */


.rsf-slick-slide-blog {
  /* height: inherit;
  width: inherit; */
  height: calc(280px*7/5);
  width: 280px;  /* TBD can this be calculated? or that least responsive */
  /* padding-right: 10px;
  padding-left: 10px; */   /* had padding at first, then tried margin */
  margin: 0 5px;
  box-sizing: border-box;
  /* background: #272727; */ /* this would be the slide's background */
}

@media ( max-width: 800px ) {   /* 800px is the point at which the "burger" is being displayed per below */
.rsf-slick-slide-blog {
     height: calc(280px*1.5);
  }
}
  
.rsf-slick-slide-blog a {
  all: inherit;
  text-decoration: none;
}


/* is this needed at all, crossed out in the inspector */
.rsf-slick-slide-blog img {
  margin: 0;
  height: inherit;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--wp--preset--spacing--20); 
}

.rsf-slick-slide {
  height: inherit;
  width: inherit;
  padding-right: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  background: #272727;
}

.rsf-slick-slide img {
  margin: 0;
  height: inherit;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--wp--preset--spacing--20); 
}

.rsf-slick-image {
  margin: 0;
  height: inherit;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  box-sizing: border-box;
}

.rsf-slick-image img {
  margin: 0;
  height: inherit;
  width: inherit;
  max-width: 100%;
  object-fit: cover;
  border-radius: var(--wp--preset--spacing--20);
  
}

.rsf-slick-label {
  font-size: 1.6rem;        /* TODO 2 on desktop */
  font-weight: normal;
  line-height: 6rem;       /* */
  height: 6rem;            /* */
  
  /* color */
  background: rgba(0,0,0,0.50);         /* transparent black bg */
  color: --wp--preset--color--contrast; /* text color white #f9f9f9 */
  
  /* spacing */
  padding: 0 1rem;  /* padding left and right so text doesnt touch the image borders */
  margin: 0;

  /* position the label over the image */
  /* margin-top: -4rem; */ /* variant 1 */
  margin-top: -7rem;
  position:relative;  /* required to have label background in front of image */
  text-align: left;
  
  /* to match image, otherwise there will be black in the bottom corners */
  /* border-radius: var(--wp--preset--spacing--20); */ /* variant 1 */
  border-radius: 0;
  
  /* Don't wrap text and add ellipsis in case of overflow */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow:hidden;
}




/* this should go to a separate file */





.rsf-font-family {
	font-family: 'Figtree';
}




.rsf-block-pic {
  height: inherit; 
}
.rsf-block-pic img {
  height: inherit; 
  width: auto;
}

.wp-element-caption {
  position: relative;
  top: -40px;
}


/* 
 * This is a temporary solution for the mobile menu to look different from the desktop one
 * i.e. larger main menu items, and the sub menu one smaller. Note: only works, if style classes correctly
 * in the navigation menu!
 */

@media ( max-width: 800px ) {   /* 800px is the point at which the "burger" is being displayed per below */
  .rsf-menu-large {
    font-size: 1.2rem;
    font-weight: bold;
  }

  .rsf-menu-normal {
    font-size: 1.1rem;
    font-weight: normal;
  }
}
/* images */





/* ensure image caption is below the image, not over the bottom of it */
.rsf-img-caption {
  color: var(--wp--preset--color--contrast-2);
  margin-top: 4px;
  margin-bottom: 0px;
}



/* tables */
.rsf-table {
  width: 60%;
}
@media only screen and (max-width:600px) {
   .rsf-table {
    width: 100%;
  }
}
@media only screen and (max-width:800px) {
   .rsf-table {
    width: 80%;
  }
}

.rsf-table table  {
  /* border-collapse: collapse; */ /* already done in wp-block-table */
  /* outline: 4px; */
  /* border-color: red; */
  /* border-left: 2px; */
  /*border-style: solid; */
}

/* this didnt work, td somewhere still has border definition, so had to do it in the td section below */
/*
.rsf-table tr {
  border-top: 2px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 2px;
}
.rsf-table tr:last-child {
  border-bottom: 0px;
} */

.rsf-table td {
  border-top: 1px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px;
  border-style: solid;
  border-color: var(--wp--preset--color--contrast-2);
  vertical-align: top; /* make sure text is at top, not centered */
}



/* RSF Grid */

/* 
  +-----------------------------------------+
  |                rsf-grid                 |
  | +-----------------+ +-----------------+ |
  | |  rsf-grid-item  | |  rsf-grid-item  | |
  | |+----------------+ |+----------------+ |
  | ||                | ||                | |
  | ||      img       | ||      img       | |
  | ||                | ||                | |
  | |+----------------+ |+----------------+ |
  | || rsf-grid-label | || rsf-grid-label | |
  | |+----------------+ |+----------------+ |
  | +-----------------+ +-----------------+ |
  +-----------------------------------------+
*/



/* Grid to display images in 2 columns. The images have a label overay */
.rsf-grid {
  display: grid;
  grid-template-columns: repeat(2, calc( ((100% - 1rem) / 2)) );  /* -1 rem for the grid gap */
  grid-gap: 1rem;
  grid-template-rows: auto;
  margin: 0 0;
  padding: 0 0;
  min-width: 300px;  /* min width for grid, so images dont start overlapping */
  overflow: hidden;  /* hide if vp too small, no scroll bars. Should actually never happen anyway */
}

/* idea is that the entire item, consisting of <img> and <p> (for the label), is the href */
/* so text decorations to be set to none, so the label doesnt get underlining             */
.rsf-grid a {
  text-decoration: none;
}

.rsf-grid-item {
  display: grid;        /* so the div is the size of the content */
  position: relative;   /* needed for abolute positioning of the childs */
}

/* style for images */
/* correct ratio for all images to be ensured in html */
/* for example: <img style="aspect-ratio:3/4" ...>    */
.rsf-grid-item  img {
  margin: 0;  /* get rid of the margin white space btwn text and image */
  
  /* try to display entire image width and scale height */
  /* believe this is what wp-image-* does               */ 
  height: auto;
  max-width: 100%;
  border-radius: var(--wp--preset--spacing--20);
  object-fit: cover;
}

/****
 *  grid label 
 */
/* TBD this doesnt support label text wrapping over multiple lines, need alternative 
   for it. Not sure if possible this way, may need to separate label and have fixed 
   background element */
.rsf-grid-label {
  font-size: clamp(1.7rem, 8vw, 3.8rem);
  font-weight: normal;
  line-height: 8rem;       /* */
  height: 8rem;            /* */
  max-width: 100%;
  
  /* color */
  background: rgba(0,0,0,0.58);              /* transparent black bg */
  color: var(--wp--preset--color--contrast); /* text color white #f9f9f9 */
  
  /* spacing */
  padding: 0 1rem;  /* padding left and right so text doesnt touch the image borders */
  margin: 0;

  /* position the label over the image */
  position: absolute;              /* required to have label background in front of image */
  text-align: center;
  width: calc(100% - 2rem);       /* -2rem because of padding left and right 2*1rem */
  top: calc(50% - 4rem);          /* -4rem because height is 8rem */
  overflow: hidden;               /* needed so the text doesnt screw with grid size, which is supposed to stay fixed */
  text-overflow: ellipsis;
}

/* Smaller font, if on mobile devices */
/*@media only screen and (max-width:440px) {  /* trial and error to find that "Rennrad" will no longer fit at 440px */
 /*  .rsf-grid-label {
     font-size: 1.7rem;
  }
}  */ 




@media (min-width: 800px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
    width: 100%;
    position: relative;
    z-index: auto;
    background-color: inherit;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
    display: none;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
    left: 0;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none;
  }
}

@media (max-width: 799px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
}

/* is was a try to have the bg of every 2nd post with different background color */
/* did work, but the margins were off, didn have the time to fiddle with it and stopped */
/*.post:nth-of-type(2n) {
 background: var(--wp--preset--color--base-2); 
}*/




/****
 * Event Calendar
 *
 */
 
 /** 
 * Event calendar - Event List
 */
 .rsf-ec-list a {
	 text-decoration: none;
 }
 
.rsf-ec-list-element {
  display: flex;                        /* flex layout to have columns */
  gap: var(--wp--preset--spacing--10);  /* space between columns */
  padding: 0.5rem;
  background: var(--wp--preset--color--base-2);
  border-radius: var(--wp--preset--spacing--10);
}
/* space between the list elements, chose one */
.rsf-ec-list-element-normal-margin {
  margin-top: var(--wp--preset--spacing--10);
  margin-bottom: var(--wp--preset--spacing--10);
}
.rsf-ec-list-element-narrow-margin {
  margin-top: calc(0.4 * var(--wp--preset--spacing--10));
  margin-bottom: calc(0.4 * var(--wp--preset--spacing--10));
}


/** 
 * Event calendar - Date Tile
 */
.rsf-ec-date-tile {
  background: #315eb2;   /* the blue from the buttons */
  display: block;        /* stay on top and for the backgournd to show */
  padding: 0.8rem 1.0rem;  /* less padding on top and bottom than left and right, because font is narrow */
  border-radius: 0.5rem;
}
.rsf-ec-day {
  text-align: center;
  font-weight: bold;
  font-size: xx-large;
  line-height: calc(1em + clamp(1px, 1vw, 0.2em));
  font-family: 'Oswald', 'Futura PT W01 ExtraBold', var(--wp--preset--font-family--system-sans-serif);
}
.rsf-ec-month {
  text-align: center;
  font-weight: normal;
  font-size: medium;     /* bit smaller than regular */
  line-height: 1em;      /* not more than font */
  font-family: 'Ubuntu', var(--wp--preset--font-family--system-sans-serif);
}
.rsf-ec-weekday {
  text-align: center;
  font-weight: normal;
  font-size: medium;
  line-height: 1.1em;    /* little more to have space above to the day number */
  font-family: 'Ubuntu', var(--wp--preset--font-family--system-sans-serif);
}
/* Event calendar - event preview */
.rsf-ec-date-text {
  margin: 0.6em 0 0 0;
  line-height: 1.2em;
}
.rsf-ec-preview {    /* preview is the title */
  hyphens: auto;
  overflow: hidden;   /* on iphone hyphens wouldnt work unless adding this */
  margin: 0.2em 0;
  /* text-overflow: ellipsis; */   /* TBD improve to it wraps over two lines but then uses ellipsis */
}
.rsf-ec-preview h2 {    /* preview is the title */
  /* hyphens: auto; */
  font-family: 'Figtree', var(--wp--preset--font-family--system-sans-serif);
}