// Elements
//
// Extend Bulma basic HTML elements in `.content` blocks. It includes color classes.
//
// .is-blue - color
// .is-marine - color
// .is-berry - color
// .is-cinnamon - color
// .is-dark - color
// .is-grey - color
// .is-dandelion - color
//
// Styleguide: Base.Elements

.content {
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    &.is-blue {
      color: $blue;
    }
    &.is-marine {
      color: $marine;
    }
    &.is-berry {
      color: $berry;
    }
    &.is-cinnamon {
      color: $cinnamon;
    }
    &.is-dark {
      color: $dark;
    }
    &.is-grey {
      color: $grey;
    }
    &.is-dandelion {
      color: $dandelion;
    }
  }
}

p {
  label {
    font-variant-caps: all-small-caps;
  }
  label::after {
    content: ':';
  }
}

// Links


a {
  font-weight: bold;
  padding: $link-hover-padding;
  margin: -$link-hover-padding;
  &:hover {
    color: $link-hover;
    background-color: $link-hover-background;
  }
  &:focus {
    color: $link-focus;
    background-color: $link-hover-background;
  }
  &:active {
    color: $link-active;
    background-color: $link-hover-background;
  }
}

// Rule
//
// Adds big border
//
// Styleguide: Base.Elements.Rule

%bigborder {
  border-top: 4px solid $blue-dark;
}

hr {
  @extend %bigborder;
}


// Titles
//
// Extends Bulma `.title` and `.subtitle` classes
//
// .is-compact - remove margins and spacing
//
// Styleguide: Base.Elements.Titles

.is-compact {
  &.subtitle,
  &.title {
    margin-bottom: 0;
  }
}


// Byline
//
// Styleguide: Base.Elements.Byline

.byline {
  color: $blue-light;
  a {
    &:hover {
      color: $blue;
      text-decoration: underline;
    }
  }
}

// Give a special hover style for the logo

.navbar-brand a.navbar-item {
  &:focus,
  &:hover {
    color: $dandelion-light;
  }
}

.light-header .navbar-brand a.navbar-item {
  &:focus,
  &:hover {
    color: $dandelion-light;
    background: inherit;
  }
}

// Ensure embedded media is responsive

iframe {
  width: 100%;
}

// No spacing on main heading to avoid gap at top of page

a#main-content {
  margin: 0;
  padding: 0;
}

// Positioning witchcraft to allow editing in the presence of heroes

@mixin localfloaters {
  position: absolute;
  z-index: 999;
  padding-top: 1rem;
  ul li a {
    color: white;
  }
}

// Logged in users need a nice view of the edit tabs

.gin--horizontal-toolbar {

  .section:has(#block-agarica-local-tasks) {
    padding-block: 0;
  }

  &:has(.hero-project) {
    #navbar {
      background-color: transparent;
    }
    .hero {
      margin-top: -8rem;
    }

    section:has(#block-agarica-local-tasks) {
      @include localfloaters();
    }
  }

  &:has([data-history-node-id]):has(.hero-main){
    article[data-history-node-id] {
      margin-top: 4rem;
    }
    .section:has(#block-agarica-local-tasks) {
      @include localfloaters();
    }
  }
}