/* Simplicity style for sharkdance.org */

:root {

  /* ######################################################################################## */
  /* ##                  Content: Text Colors                                              ## */
  /* ######################################################################################## */

  --main-text-color: #534f4f;          /* ## content text is displayed in this color       ## */
  --main-text-faded-color: #807f7f;    /* ## less important text, e.g. lastModified        ## */
  --link-color: #c1b2ba;
  --infobox-border-color: #8c6e7e;     /* ## for infoboxes. ( <div class="infobox"> )      ## */
  --quote-mark-color: #c4c6c8;         /* ## for nice large block quotes...                ## */
  --quote-cite-color: #777474;         /* ## ...and for the author of the block quote      ## */

  /* --image-border-width: 0px; */           /* ## border for stand-out images. '0' to disable.  ## */


  /* ######################################################################################## */
  /* ##              Header and Footer Elements                                            ## */
  /* ######################################################################################## */

  /* ###############################    A p p e a r a n c e   ############################### */

  /* ## Logo left of Home text. To disable, comment out this line.                         ## */
  /* ## The Home button will then acquire the same shape as the other buttons.             ## */
  /* --home-bg-image: url('/.simplicity-content/.skeleton/favicon.svg'); */
  --home-bg-image: url('/.simplicity/.skeleton/media/simplicity-logo.svg');
  --home-bg-image-width: 4em;          /* ## adjust this if your logo is not square        ## */
  --nav-border-radius: 1em;            /* ## shape of buttons. Use 'none' for rectangle.   ## */


  /* #############################  H i d e   E l e m e n t s   ############################# */

  /* ## Uncomment to hide header.                                                          ## */
  /* ## Before doing so, please disable all elements from the header in the config file.   ## */
  /* --show-header: var(--no); */
  /* ## Uncomment to hide contactinfo in footer.                                           ## */
  /* --show-contactinfo: var(--no); */ /* ## this is not needed anymore - remove ## */


  /* ######################################################################################## */
  /* ##                      Typography                                                    ## */
  /* ######################################################################################## */
  /* ## Note that you also need corresponding '@font-face' rules for all styles            ## */
  /* ## (bold, italic, bold + italic) to be able to use a font.                            ## */
  --main-font: "URWPalladioL"; /* used for your content */
  /* ## This font should have small capitals, and be defined as such in '@font-face' rule. ## */
  --main-font-sc: "TeXPalladioL-SC";
  /* ## Font used for header buttons and navigation menus.                                 ## */
  --header-font: var(--main-font-sc);


  /* ######################################################################################## */
  /* ##               Background: Images and Colors                                        ## */
  /* ######################################################################################## */

  /* ## To not use a background image, set 'bg-image'                                      ## */
  /* ## and 'body-bg-filter' (see "Advanced Background Tweaks", below) to 'none'           ## */
  --main-bg-color: #4d77ae;            /* ## main background color                         ## */
  --main-contrast-color: #ec9292;      /* ## needs to contrast well with 'main-bg-color'   ## */
  --header-bg-color: #4d77ae;          /* ## try a shade of 'main-bg-color'                ## */
  --content-bg-color: #fff;         /* ## Try '#00000040' for beautiful contrast        ## */
  --bg-image: none;
    --bg-size: cover;                /* ## try 100vmax or 100vmin.                       ## */
    --bg-position-y: 0rem;             /* ## image offset. Try +(-?) ~50%.                 ## */
    --bg-repeat: no-repeat;            /* ## try 'repeat' if image is smaller than window  ## */
  --content-bg-image: var(--body-bg-image);   /* ## normally same as body, or none         ## */

  /* ## Image to use for the fade-in intro. Set to 'none' to use only color for intro.     ## */
  --intro-bg-image: url('/.simplicity/.skeleton/media/simplicity-logo.svg');

  /* ## Note: See "Advanced Background Tweaks" below for more control over                 ## */
  /* ## background images or to specify distinct header and footer images.                 ## */


  /* ######################################################################################## */
  /* ##                  Navigation Menu: Colors                                           ## */
  /* ######################################################################################## */

  /* ## Navigation menu color. Usually same as 'header-bg-color'.                          ## */
  --nav-menu-bg-color: var(--header-bg-color);
  --nav-menuitem-text-color: #c899d9;                 /* ## header buttons and menu items  ## */
  --nav-link-empty-color: #c8c8c8;                    /* ## empty, disabled menu items     ## */
  --nav-link-checkmark-color: var(--link-color);      /* ## tick in language menu          ## */
  --nav-selected-highlight-color: #ee82ee;            /* ## open menus without focus       ## */
  --nav-text-shadow-color: black;                     /* ## set to 'none' for no shadow    ## */


  /* ######################################################################################## */
  /* ##             Advanced Background Tweaks                                             ## */
  /* ######################################################################################## */

  /* ## These filters and gradients are combined with the background image and color.      ## */
  --header-bg-gradient: none;
  --body-bg-gradient: none;
  --body-bg-filter: none;

  /* ## Here the images are combined with the gradients and filter.                        ## */
  /* ## To disable filters and gradients, remove the gradient part from these two lines.   ## */
  --body-bg-image-with-gradient: var(--bg-image), var(--body-bg-gradient);
  --header-bg-image-with-gradient: var(--bg-image), var(--header-bg-gradient);

  /* ## Here you can specify separat0e images and colors for the header and footer.         ## */
  --header-bg-image: var(--header-bg-image-with-gradient);
  --body-bg-image: var(--body-bg-image-with-gradient);
  --footer-bg-image: var(--header-bg-image-with-gradient);
  --footer-bg-color: var(--header-bg-color); /* by default, same as header for harmony */

}

:root {
  --main-contrast-color: #270000;
  --header-bg-color: var(--sharkdance-logo-bg-color);
  --main-bg-color: var(--sharkdance-logo-bg-color);
  --content-bg-color: #e6d6e3;
  /* --bg-image: url('/.simplicity-content/backgrounds/09.jpg'); */
  --home-bg-image: url('/.simplicity-content/.skeleton/sharkdance-fin-only-transparent.svg');
  --intro-bg-image: url('/.simplicity-content/logo/sharkdance-mentoring-joy.svg');
  /* --nav-border-radius: 49% 52% 24% 75% / 68% 55% 45% 31%; */ /* fancy-shape borders */
  --image-border-width: 0px;  
  --link-color: var(--sharkdance-logo-bg-color);
  --header-text-color: #cacaca;
  --header-link-color: var(--heaver-link-color);
  /* --footer-text-color: var; */
  --footer-link-color: var(--heaver-link-color);
}

/* sharkdance print design */
:root {
  --sharkdance-logo-bg-color: #74506e;
  --sharkdance-logo-shark-color: #8c6e7e;
}

.mainMenu {
  border-radius: 0px;
}

.mainMenu {
  border-block-end-style: solid;
  border-block-end-color: var(--sharkdance-logo-shark-color);
  border-block-end-width: 1px;
}

.breadCrumbs {
  border-inline-start-style: solid;
  border-inline-end-style: solid;
  border-block-start-style: none;
  border-block-end-style: solid;
  border-color: var(--sharkdance-logo-shark-color);
  border-width: 1px;
  /* border-radius: 0px; */
}

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

/* fixme: this should be automatic from --main-bg-color... */
input[type="text"], textarea {
  background-color: hsl(312.6, 21.8%, 82.9%);
}

@font-face {
  font-family: "JanLippunerScript-Regular";
  src:  url("/.simplicity-content/.skeleton/font/JanLippunerScript-Regular.woff2") format("woff2");
}

@font-feature-values 'JanLippunerScript-Regular' {
    @styleset { styleset01: 1; }
}

.signatureJan {
  display: inline;
  font-family: "JanLippunerScript-Regular";
  font-synthesis: none;
  font-size: 1.6em;
}

.signatureJanBeforeFirstP {
  display: inline;
  letter-spacing: -0.15em; /* fix kerning */
}

.signatureJanSS01 {
  display: inline;
  font-variant-alternates: styleset(styleset01); /* for second p */
  font-feature-settings: 'ss01'; /* temp fix for some browsers */
  letter-spacing: -0.034em; /* fix kerning */
}

.errorNotfoundPlayerToggle {
  font-family: 'JanLippunerScript-Regular';
}

.sharkdanceWaveWithShark {
  min-height: 4em;
  user-select: none;
  margin-inline-start: -2.3em; /* same as #pageFooter */
  margin-inline-end: -2.3em;
}

@media screen and ( min-width: 1280px ) {
  .sharkdanceWaveWithShark {
    width: 100vw; /* avoid tiny gap between viewport edge and margin */
  }
}

#pageFooter .sharkdanceWaveWithShark + * {
  margin-block-start: 2.3em; /* in case there is footer content, give it some space */
}

@media print {
  #pageFooter .sharkdanceWaveWithShark {
    display: block;
    filter: saturate( 0% ); /* print in greyscale */
    width: 100%; /* needed to make margins work properly */
    margin-inline-start: 0em;
    margin-inline-end: 0em;
  }
}