// These are extensions of the bootstrap v4 classes.
// to support djaoapp templates.

// XXX `$navbar-height` used to be defined
// in Bootstrap3 (it is not in Bootstrap4). We redefine it here use it stick the
// footer at the bottom of the screen when a page is less that screen height.
$navbar-height: max($nav-link-height, $navbar-brand-height) + $navbar-padding-y * 2;
$footer-height: 150px;
$plan-footer-height: 70px;

// variables specific to djaoapp used for code examples
//$example-title-bg: rgb(62, 68, 88);
//$example-title-color: rgb(105, 115, 134);
//$example-bg: #222527;
//$example-color: rgb(105, 115, 134);
$example-bg: rgb(247, 250, 252);
$example-color: rgb(105, 115, 134);
$example-title-color: rgb(105, 115, 134);
$example-title-bg: rgb(227, 232, 238);
$jumbotron-shadow-start-color: #000;
$jumbotron-shadow-end-color: #eee;

// variables specific to djaoapp used for code examples
$example-title-bg-dark: rgb(79, 86, 107);
$example-title-color-dark: rgb(147, 156, 171);
//$example-bg-dark: rgb(143, 153, 166);
//$example-color-dark: rgb(45, 49, 68);
$example-bg-dark: rgb(18, 20, 28);
$example-color-dark: rgb(193, 193, 193);
$jumbotron-shadow-start-color-dark: $jumbotron-shadow-end-color;
$jumbotron-shadow-end-color-dark: $jumbotron-shadow-start-color;

:root,
[data-bs-theme="light"] {
    --example-title-bg: #{$example-title-bg};
    --example-title-color: #{$example-title-color};
    --example-bg: #{$example-bg};
    --example-color: #{$example-color};
    --jumbotron-shadow-start-color: #{$jumbotron-shadow-start-color};
    --jumbotron-shadow-end-color: #{$jumbotron-shadow-end-color};
}

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    color-scheme: dark;

    --example-title-bg: #{$example-title-bg-dark};
    --example-title-color: #{$example-title-color-dark};
    --example-bg: #{$example-bg-dark};
    --example-color: #{$example-color-dark};
    --jumbotron-shadow-start-color: #{$jumbotron-shadow-start-color-dark};
    --jumbotron-shadow-end-color: #{$jumbotron-shadow-end-color-dark};
  }
}

/* used only in templates/base.html */
html, body {
  height: 100%;
}

body{
  min-width:100%;
}

#wrap{
  width: 100%;
  min-height: 100%;
}

/*
  Unless the font-size for #main and .footer match, using ``em`` metrics will
  create bottom and overlap margins that have different heights, hence
  sticking the footer to the bottom while introducing a "border" above it.
*/
#main {
  min-height: 100%;
  padding-bottom: $footer-height; /* must be in pixel (see comment abolve) */
}

// top menubar (requires `bg-primary` as background)
.navbar.bg-primary .navbar-brand,
.navbar.bg-primary .nav-link {
  color: $white;
}

.navbar.bg-primary .navbar-brand:hover,
.navbar.bg-primary .navbar-brand:focus,
.navbar.bg-primary .nav-link:hover,
.navbar.bg-primary .nav-link:focus {
  color: map-get($theme-colors, "primary");
  background-color: $white;
}

.footer {
  position: relative;
  height: $footer-height;         /* must be in pixel (see comment abolve) */
  bottom: 0;
  margin: -$footer-height 0 0 0;
  padding: 20px 0;
  clear:both;
  text-align:center;
  font-size: 12px;
  flex-shrink: 0;
  color: #FFF;
  background-color: map-get($theme-colors, "primary");
  width: 100%;
}

.footer a {
  color: #FFFFFF;
}

.footer a i {
  font-size: 24px;
}

.footer-links {
  margin-bottom: 10px;
}

.footer-links a {
  margin: 0 5px;
  font-size: 14px;
}

.footer-links a i {
  font-size: 24px;
}

/* -- end of css found only in templates/base.html */


.leaderboard.jumbotron {
  background: map-get($theme-colors, "primary");
  color: #fff;
}

.site-landing {
  padding: 35px 0;
}

@include media-breakpoint-up(sm) {
  .site-landing .portrait-and-quote {
    display: flex;
    align-items: center;
  }
}

.site-feedback {
  margin-top: 20px;
  background: #FAFAFA;
  padding: 40px 0;
}

.site-feedback blockquote {
  color: #444;
  border: none;
}

.site-feedback blockquote p {
  font-size: 22px;
}

.site-feedback blockquote footer {
  color: #777;
  font-style: italic;
}

.site-about,
.site-partner {
  background: #FFF;
  color: #444;
  padding: 40px 0;
}

.site-about {
  background: #FAFAFA;
  margin-bottom: 20px;
}


// Help blocks about DjaoDjin
// --------------------------
.about-us
{
  background: #c6dcef;
  color: $black;
  padding: 30px 20px;
  border-radius: 3px;
  text-align: left;
}

.about-us a {
  color: $link-color;
}

.about-us>div
{
  margin-bottom: 0;
}

.about-us p
{
  padding-top: 10px;
  line-height: 1.6em;
}

.about-us header
{
  font-size: 18px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.about-us dt
{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.about-us dl
{
    margin: 0;
}

.about-us dd
{
    font-style: normal;
}

.about-us dd a
{
    display: block;
    margin-top: 10px;
}

// API docs
// --------
.faq-list li
{
    margin: 10px 0;
    font-size: 15px;
}

.faq-list > li
{
    margin: 20px 0;
}

.faq-list
{
    box-shadow: 3px 3px var(--jumbotron-shadow-start-color) 0.5em 0.5em var(--jumbotron-shadow-end-color);
    border-radius: 3px;
}

.faq-list,
.faq-list ul
{
    padding: 0;
    text-align: left !important;
    margin-top: 30px;
}

.faq-list-container h3
{
    text-align: center;
    margin-bottom: 40px !important;
}

.faq-list li
{
    margin: 10px 0;
    font-size: 15px;
    list-style: none;
}

.faq-list > li
{
    margin: 20px 0;
    font-size: 20px;
    padding: 25px 30px 10px;
}

.faq-list > li:last-child
{
    padding-left: 30px;
}

.faq-list ul li
{
    margin: 15px 0 !important;
}


// Login page
// ----------

.btn-google-plus {
  color: #fff;
  background-color: #dd4b39;
  border-color: rgba(0,0,0,.2);
}

.btn-twitter {
  color: #fff;
  background-color: #4099FF;
  border-color: rgba(0,0,0,.2);
}

.btn-github {
  color: #fff;
  background-color: #444;
  border-color: rgba(0,0,0,.2);
}

// Cart/Checkout
// -------------

.remove-cart-item {
  font-size: 0.8rem;
  color: grey;
  text-transform: lowercase;
}


// Somewhat generic classes
// Used to display pricing plans
.btn-block {
  display: block;
  width: 100%;
}

.center { /* XXX better to use bootstrap .center-block instead? */
  float: none;
  margin-left: auto;
  margin-right: auto;
}

.collapsible {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

.page-header {
  text-align: center;
}

.page-header:after {
  background: map-get($theme-colors, "primary");
  content: "";
  position: relative;
  height: 3px;
  width: 100px;
  display: block;
  text-align: center;
  margin: 13px auto;
  -webkit-border-radius: 5em;
  -moz-border-radius: 5em;
  -ms-border-radius: 5em;
  -o-border-radius: 5em;
  border-radius: 5em;
}

// These are used in accounts/*.html templates
// --------
.flex-vertical-middle {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - (#{$navbar-height} + #{$footer-height}));
}

// Pricing plans (templates/saas/pricing.html, templates/saas/plan_short.html)
// --------
.plan {
}

.plan-short {
  min-height:100%;
  padding-left: 5px;
  padding-right: 5px;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #eee;
  box-shadow: 0px 0px 20px #eee;
  border-radius: 7px;
}

.plan-short:hover {
  cursor: pointer;
  background-color: tint-color(map-get($theme-colors, "primary"), 75%);
}

.plan-footer {
  text-align: center;
}


.plan-pricing {
  color: map-get($theme-colors, "primary");
  text-align: center !important;
}

.plan-pricing h2 {
  font-size: 36px;
}

.plan-desc ul {
  list-style: none;
}

.plan-desc li:before {
  font-family: 'FontAwesome';
  content: "\f058";
  margin: 0 18px 0 -15px;
  color: steelblue;
}

// Code samples and API documentation
// ----------------------------------
.param-indent-1 {
  border-left: 1px solid #ddd;
  padding-left: 5px;
}

.param-indent-2 {
  border-left: 3px solid #ddd;
  padding-left: 5px;
}

.param-indent-3 {
  border-left: 6px solid #ddd;
  padding-left: 5px;
}

.param-indent-4 {
  border-left: 9px solid #ddd;
  padding-left: 5px;
}

a.header-anchor {
  opacity: 0;
}
a.header-anchor:hover{
  opacity: 1.0;
}

.example {
    color: var(--example-color);
    background-color: var(--example-bg);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 0px 1px;
    margin-bottom: 12px;
}

@include media-breakpoint-up(md) {

  .col-example {
      color: var(--example-color);
      background-color: var(--example-bg);
  }

  .col-example > .example {
    border-radius: 0;
    box-shadow: none;
  }

}

.example-title {
  color: var(--example-title-color);
  background-color: var(--example-title-bg);
  text-transform: uppercase;
  padding: 10px 12px;
  font-size: $badge-font-size;
  font-weight: 500;
}

.example-body {
  padding: 12px 20px;
}

pre.code{
  background-color:inherit;
  color:inherit;
  margin:0;
  font-size: $font-size-sm;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  text-align: left;
  word-spacing: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

.code.json .name {
  color: #c1ef65;
}

.code.json .literal.string {
  color: #d0d0d0;
}

.code.json .literal.number {
  color: #77bcd7;
}

.code.json .keyword {
  color: #ebde68;
}

.param-list-header {
    color: var(--bs-body-secondary-color);
    border-bottom: 1px solid rgba(38, 50, 56, 0.3);
    margin: 3em 0 1em 0;
    font-weight: normal;
    text-transform: uppercase;
}

.param-name {
    display: table-cell;
    width: 25%;
    vertical-align: top;
    padding-top: 10px;
    padding-bottom: 10px;
}

.param-type {
    margin: 25px 0 5px 0;
    text-transform: capitalize;
}

.param-required {
  display: inline-block;
  padding: $badge-padding-y $badge-padding-x;
  padding-right: .6em;
  padding-left: .6em;
  font-size: $badge-font-size;
  font-weight: $badge-font-weight;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  color: red;
  border: 1px solid red;
  background-color: transparent;
  @include border-radius(10rem);

  // Empty badges collapse automatically
  &:empty {
    display: none;
  }

}

.params-wrap {
    display: table;
    width: 100%;
}

.param {
    display: table-row;
}

.param-info {
    display: table-cell;
    width: 75%;
    padding-top: 10px;
    padding-left: 5px;
    box-sizing: border-box;
}

.param-builtin {
    border-bottom: 1px solid #9fb4be;
    padding-bottom: 10px;
}


.password-toggle {
  position: absolute;
  top: 15%;
  right: 10px;
  cursor: pointer;
}

// Fix for FOUC
html {
  visibility: visible !important;
  opacity: 1 !important;
}
