/*
  TODO refactor: use BEM naming convention
 */

/* common styles ============================================================== */
body {
    color: var(--text-color);
}

/* nav bar ======================================================================== */

.form-control-garden { /* copied from bootstrap's form-control, then modified */
    background-color: transparent; /* #fff */
    padding: 0px 0px;  /* originally 6px 12px; but this destroys the layout */
    border: 0px; /* solid #ccc; */
}
.form-control-garden:focus {
  outline: 0;
}

/* modified bootstrap styles (only colors) */
.navbar-default {
  background-color: var(--background-color-a);
  border-color: var(--spacer);
}
.navbar-default .navbar-nav > li > a {
  color: var(--muted-text-color);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: var(--text-color);
}

/*
.navbar {
  unsolved problem with border: 1px solid transparent;
}
*/
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
  border-color: var(--spacer);
}

.menu_separator {
  color: var(--muted-text-color);
}
.menu_separator.hidden-xs {
  padding-right: 25px;
}
.menu_separator.visible-xs {
  padding-bottom: 20px;
}

/* section "intro" ============================================================== */

/* the size of the XS image and the position of image on canvas is from playing around with the window size */
.intro-header {
    background: rgba(0, 0, 0, 0.5) var(--intro-header-background-image) no-repeat no-repeat center center;
}
.theme-dark .intro-header {
    background-blend-mode: darken;
}

/* content area ================================================================== */
/* vertical alignment for images: flex model is appropriate. we override the float approach of bootstrap */
@media (min-width: 768px) {
    .dd-lg-flex-box {
        display: flex;
        align-items: center;
    }
    .dd-lg-flex-box .dd-lg-flex-item {
        float:none !important;
        flex:1;
        max-width: 50%; /* for FF */  
    }
}

.theme-dark .peek {
    filter:invert(1) brightness(170%);;
}

/* footer ===================================================================== */

.text-muted {
  color: var(--muted-text-color);
}

footer a {
	color: var(--text-color);
}

table.seasons td,th {
    padding-right: 30px;
}

table.seasons td {
    font-weight: 400;
}
/* language toggle ==================================================================== */
body.eng-standard .eng-simple {
   display: None;
}
body.eng-simple .eng-standard {
   display: None;
}


/* theme "life" ===================================================================== */

/* fonts */
.theme-pop .area1L { font-family: 'Caveat'; }
.theme-pop .area1R { font-family: 'Satisfy'; }
.theme-pop .area2L { font-family: 'Parisienne'; }
.theme-pop .area2R { font-family: 'Allura'; }
.theme-pop .area3L { font-family: 'Calligraffitti'; }
.theme-pop .area3R { font-family: 'Oooh Baby'; }
.theme-pop .area4L { font-family: 'Jim Nightshade'; }
.theme-pop .area4R { font-family: 'Princess Sofia'; }

/* background gradients - using the some LGBTQI+ colors */
.theme-pop .area1 { /* light and dark violet */
    color: red important!;
    background: repeating-linear-gradient(
      45deg,
      #ffadff80,
      #ffadff80 10px,
      #ffbeff80 10px,
      #ffbeff80 20px
    );
}
.theme-pop .area2 { /* red and pink */
    background: repeating-linear-gradient(
      to right,
      #ff97f080,
      #ff97f080 10px,
      #ff936180 10px,
      #ff936180 20px
    );
}
.theme-pop .area3 { /* orange and yellow */
    background: repeating-linear-gradient(
      -55deg,
      #ffcc4180,
      #ffcc4180 10px,
      #daed0080 10px,
      #daed0080 20px
    );
}
.theme-pop .area4 { /* lavender and light blue */
    background: repeating-radial-gradient(
      circle,
      #ffbbff80,
      #ffbbff80 10px,
      #9febff80 10px,
      #9febff80 20px
    );
}
.theme-pop .area5 { /* white and green */
    background: repeating-linear-gradient(
      45deg,
      #77ff6080,
      #77ff6080 10px,
      #ffffff80 10px,
      #ffffff80 20px
    );
}