/* newsletter-podlet */

/*

    #PANEL

    Standardized themable grouping element

    Markup example:
    <div class="panel"></div>

    .panel.panel--banana.panel--is-clickable


*/

/*
$panel
    margin: 16px 16px 32px 16px
    +bp(min480)
        margin: 16px

$panel-bleed
    margin: 16px 0 48px 0  // content on white gets 64 visual vertical px of white, colored bg needs a little more to look balanced
    +bp(min480)
        margin: 16px

$panel-colored
    padding: 16px
*/

.panel {
  margin: 16px 16px 32px 16px;
}

@media (min-width: 480px) {
  .panel {
    margin: 16px;
  }
}

.panel--bleed {
  margin: 16px 0 48px 0;
}

@media (max-width: 479px) {
  .panel--bleed {
    border-radius: 0 !important;
  }
}

@media (min-width: 480px) {
  .panel--bleed {
    margin: 16px;
  }
}

.panel--bordered,
.panel--success,
.panel--warning,
.panel--error,
.panel--info,
.panel--tips,
.panel--new,
.panel--bright,
.panel--neutral {
  padding: 16px;
}

.panel--kill-last-margin *:last-child {
  margin-bottom: 0 !important;
}

.panel {
  display: block;
  word-wrap: break-word;
  border-radius: 8px;
  border-color: #c3ccd9;
}

.panel--is-clickable:hover,
.panel--is-clickable:focus {
  background-color: #f1f9ff;
  cursor: pointer;
}

@media (min-width: 480px) {
  .panel--is-roomy {
    padding: 64px;
  }
}

.panel--bordered {
  border-width: 2px;
  border-style: solid;
}

.panel--success {
  background-color: #ccffec;
}

.panel--success:focus.panel--is-clickable,
.panel--success:hover.panel--is-clickable {
  outline-color: #70ffca;
}

.panel--warning {
  background-color: #fff5cb;
}

.panel--warning:focus.panel--is-clickable,
.panel--warning:hover.panel--is-clickable {
  outline-color: #ffe36f;
}

.panel--error {
  background-color: #ffefef;
}

.panel--error:focus.panel--is-clickable,
.panel--error:hover.panel--is-clickable {
  outline-color: #ff8c8c;
}

.panel--info {
  background-color: #f1f9ff;
}

.panel--info:focus.panel--is-clickable,
.panel--info:hover.panel--is-clickable {
  outline-color: #8eceff;
}

.panel--tips {
  background-color: #b6f0ff;
}

.panel--tips:focus.panel--is-clickable,
.panel--tips:hover.panel--is-clickable {
  outline-color: #5fdeff;
}

.panel--bright {
  background-color: #fff;
}

.panel--bright:focus.panel--is-clickable,
.panel--bright:hover.panel--is-clickable {
  outline-color: #ccc;
}

.panel--new {
  background-color: #ccffec;
  border: 2px solid #2ee69f;
}

.panel--new:focus.panel--is-clickable,
.panel--new:hover.panel--is-clickable {
  outline-color: #18c582;
}

.panel--neutral {
  background-color: #f6f8fb;
}

.heading--long {
    display: none;
}

.panel--newsletter a {
    display: block;
    margin-top: 8px;
}

@media only screen and (min-width: 450px) {
    .heading--long {
        display: inherit;
    }

    .heading--short {
        display: none;
    }
}

@media only screen and (min-width: 769px) {
    .panel--newsletter a {
        display: inline-block;
        margin: 0;
    }
}