/**
 *
 * Styles for specific node types and content fields.
 *
 * Selectors should be structured for specific content types, content fields,
 * and page elements attached to specific content types.
 *
 * Example selectors:
 *
 *   body.page-node .field--name-field-subsections {}
 *   body.page-node-type-like-you-patient-story .field--name-field-like-you-story-sections {}
 *   body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area {}
 *
 */

/** 
 * BEGIN: Specific Node Styling
 */
body.path-frontpage #block-b5aamds25-local-tasks {
  display:none;
}

/**
 * BEGIN: Field specific styling
 */
body.page-node .field--name-field-subsections .panel-group .panel-default {
  border-top: 1px solid var(--color-primary-xlt);
  border-right: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  /* Reset box shadows from .panel */
  box-shadow: none;
  -webkit-box-shadow: none;
}
body.page-node .field--name-field-subsections .panel-group .panel-default:last-child {
  border-bottom: 1px solid var(--color-primary-xlt);
}

body.page-node .field--name-field-subsections .panel-group .panel-default > .panel-heading + .panel-collapse > .panel-body {
  border-top: none;
}
body.page-node .field--name-field-subsections .panel-heading {
  padding-top:  var(--size-md);
  padding-bottom: 0;
  margin-bottom:  var(--size-sm);
  background-color: var(--color-white);
}

body.page-node .field--name-field-subsections .panel-heading a {
  font-family: var(--font-light-family); font-weight: var(--font-light-weight); font-style: var(--font-light-style);
  font-size: var(--size-lg);
  line-height: var(--size-lg-lh);
  color: var(--color-primary);
  text-decoration: none;
}
body.page-node .field--name-field-subsections .panel-heading a:hover {
  background-color: var(--color-alt1);
}
body.page-node .field--name-field-subsections .panel-heading a .glyphicon {
  float: left;
  color: var(--color-primary-xlt);
}
body.page-node .field--name-field-subsections .panel-heading a .glyphicon:hover {
  background-color: var(--color-alt1);
}
/** END **/

/**
 * BEGIN: Styling for 'Sectioned page'
 */
/* Toolkit items inside accordions need some tweaks */
body.page-node-type-sectioned-page .accordion-body .toolkit-item {
  border-bottom: var(--size-border-sm) solid var(--color-grey-lt);
}

body.page-node-type-sectioned-page .accordion-body .toolkit-item img.float-start {
  margin-bottom: 2em;
  margin-right: 1em;
}
body.page-node-type-sectioned-page .accordion-body .toolkit-item p {
  font-size: var(--size-md);
  line-height: var(--size-md-lh);
}
/** END **/


/**
 * BEGIN: Webform nodes
 */
body.page-node-type-webform .webform-client-form div.help-block {
  font-size: var(--size-sm);
  line-height: var(--size-sm-lh);
}
/* body.page-node-type-webform form>fieldset>legend {} */

/* Forms that are not necessarily webform nodes */
form.webform-submission-form fieldset.webform-type-fieldset {
  margin-bottom: var(--size-md);
  background-color: var(--color-white);
  border: 1px solid var(--color-grey-lt);
  border-radius: var(--size-border-md);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

form.webform-submission-form fieldset.webform-type-fieldset>legend {
  color: var(--color-grey-xdk);
  background-color: var(--color-grey);

  border-color: var(--color-grey);
  border-radius: var(--size-border-md) var(--size-border-md) 0 0;

  margin-bottom: var(--size-md);
  padding: var(--size-border-md) var(--size-border-lg);

  font-family: var(--font-light-family); font-weight: var(--font-light-weight); font-style: var(--font-light-style);
  font-size: var(--size-md-alt1);
  line-height: var(--size-md-alt1-lh);
}

form.webform-submission-form fieldset.webform-type-fieldset>.fieldset-wrapper {
  padding: 0 var(--size-border-md);
}

form.webform-submission-form .webform-flex--container {
  margin: 0 var(--size-sm) 0 8px
}

form.webform-submission-form .webform-flexbox .webform-flexbox {
margin: 0;
}

form.webform-submission-form .form-item {
  margin-top: var(--size-md);
  margin-bottom: var(--size-xs);
}

form.webform-submission-form .form-checkboxes .form-item, 
form.webform-submission-form .form-radios .form-item {
  margin-top: var(--size-xs);
  margin-bottom: var(--size-xs);
}

form.webform-submission-form fieldset .webform-element-description {
  font-size: var(--size-sm-alt1);
  line-height: var(--size-sm-alt1-lh);
}
/** Gatekeeper specific styles **/
/* Grey out the form for known visitors */
form.webform-submission-form.gatekeeper-known {
  opacity: 0.5;
}
/** END **/

/**
 * BEGIN: Spotlight Clinical Trials
 *
 * See also: blocks.css::#block-aamdsif-blocks-clinical-trial-spotlight
 */
body.page-node-type-clinical-trial .block-page-title-block h1 {
  color: var(--color-white);
  background-color: var(--color-secondary);
  padding: var(--size-xxl);

  font-family: var(--font-light-family); font-weight: var(--font-light-weight); font-style: var(--font-light-style);
  font-size: var(--size-lg-alt1);
  line-height: var(--size-xl-lh);
  font-weight: 600;
}
@media screen and (max-width: 767.98px) /* MD */ {
  body.page-node-type-clinical-trial .block-page-title-block h1 {
    font-size: var(--size-md-alt1);
    line-height: var(--size-lg-lh);
    font-weight: 200;
    padding: var(--size-xl);
  }
}
body.page-node-type-clinical-trial .row-2 h3 {
  margin-top: 0;
}
body.page-node-type-clinical-trial .field--name-field-status,
body.page-node-type-clinical-trial .field--name-field-inclusion-criteria {
  margin-top: 1em;
  border-top: 1px solid var(--color-grey-mdk);
  padding-top: 1em;
}
body.page-node-type-clinical-trial p.intro {
  margin-top: 0;
  border-top: 4px solid var(--color-primary-xlt);
}
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-status,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-diseases,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-diseases ul>li,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-associated-drug,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-phase,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-gender,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-age-group,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-accepts-healthy-volunteers,
body.page-node-type-clinical-trial article.node--type-clinical-trial .field--name-field-ct2id {
  font-size: var(--size-md);
  line-height: var(--size-md-lh);
}

body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area {
  font-size: var(--size-md);
  line-height: var(--size-md-lh);
}

/* Add background color only to "inner" container */
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area .webform-inner {
  padding: var(--size-md-alt1);
  color: var(--color-white);
  background-color: var(--color-primary);
}
body.page-node-type-clinical-trial.context--content-clinical-trial-nih-trial .spotlight-clinical-trial .webform-area .webform-inner {
  background-color: var(--color-primary-xxlt);
}

body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area h1,
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area h2,
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area h3,
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area h4 {
  color: var(--color-grey-lt);
}
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area h3 {
  font-family: var(--font-bold-family); font-weight: var(--font-bold-weight); font-style: var(--font-bold-style);
  font-size: var(--size-lg);
  line-height: var(--size-lg-lh);
}
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area a {
  color: var(--color-grey-mdk);
}
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area a:hover {
  color: var(--color-grey-dk);
}
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area #edit-disclaimer--2 p {
  font-size: var(--size-sm);
  line-height: var(--size-sm-lh);
  padding-left:0;
  padding-right:0;
}

/* Style the submit button more like .btn-default */
body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area .btn {
  color: var(--color-primary, black);
  background-color: var(--color-primary-inv, white);
  border-color: var(--color-primary, black);
}

body.page-node-type-clinical-trial .spotlight-clinical-trial .webform-area .btn:hover {
  color: var(--color-primary-inv, white);
  background-color: var(--color-primary, black);
  border-color: var(--color-primary-inv, white);
}

/* Webforms on "Academic" trials appear at the bottom of the node and need some extra styling */
body.page-node-type-clinical-trial article.node--type-clinical-trial .webform-area-no-spotlight form {
  margin-top: 1em;
  /* border-top: var(--size-border-xs) solid var(--color-grey-mdk);
  border-bottom: var(--size-border-xs) solid var(--color-grey-mdk);*/
  margin-bottom: 1em;
  padding: var(--size-lg);

  box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);
    -moz-box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);
    -webkit-box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);
    -o-box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);

}

body.page-node-type-clinical-trial .main-container .alert-block {
  display: none;
}

/** END **/

/**
 * Begin: Conference Events
 */
body.page-node-type-conference-event #region-content .field--name-field-link .btn {
  margin-top: var(--size-margin-sm);
}
body.page-node-type-conference-event #region-content .field-name-body {
  margin-top: var(--size-margin-sm);
  padding-top: var(--size-margin-sm);
  border-top: var(--size-border-sm) solid var(--color-primary);
}

/** END **/

/**
 * Begin: Articles
 */
body.page-node-type-article #region-content .field--name-field-file-attachments .table-responsive {
  margin-top: 1em;
  background-color: var(--color-alt1);
  padding: var(--size-xs);
}
body.page-node-type-article #region-content .field--name-field-file-attachments .table-responsive .table > thead th {
  background-color: var(--color-alt1);
}

/** END **/

/**
 * Begin: Webinars
 */
body.page-node-type-webinar #region-content article.node .field--name-body {
  margin-top: var(--size-sm);
  padding-top: var(--size-sm);
  border-top: 1px solid var(--color-grey-lt);
}
/** END **/

/**
 * Begin: Downloadables
 */
body.page-node-type-downloadable #region-content article.node .field--name-field-teaser-image {
  float: left;
  margin-right: var(--size-md);
  margin-bottom: var(--size-lg);
}
/* Teasers in views */
article.node--type-downloadable.node--view-mode-teaser .field--name-field-teaser-image {
  float: left;
  margin-right: var(--size-md);
  margin-bottom: var(--size-lg);
}

/** END **/

/**
 * Issue: Link fields can only be turned into buttons (with .btn class)
 * cannot be edited directly, but need to be wrapped in a span.btn.
 * This mostly works, but needs to adjustments as it is outside the normal
 * Bootstrap use case.
 */
body.page-node #region-content .field-type-link-field span.btn.btn-primary a,
body.page-node #region-content .field-type-link-field span.btn.btn-primary a:visited {
  color: var(--color-primary-inv);
}
body.page-node #region-content .field-type-link-field span.btn.btn-primary:hover a {
  color: var(--color-secondary);
}
/** END **/

/**
 * Automagical responsive YT videos embedded via oembed
 */
#region-content .field--name-field-media-oembed-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
#region-content .media-oembed-content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/* Field-specific styling */
#region-content article.node .field--name-field-full-video {
  margin-bottom: var(--size-md);
  box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);
    -moz-box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);
    -webkit-box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);
    -o-box-shadow: var(--shadow-box-a), var(--shadow-box-b), var(--shadow-box-c);
}
/** END **/