// ----------------------------------------------------------------
//		Project Specific Extended HTML Stylings
// ----------------------------------------------------------------
body{background:darken($c-Brand-2, 7%)}

// Highlight Text Selection
::-moz-selection  {background:$c-Brand-1; color:$c-Light; text-shadow:none}
::selection       {background:$c-Brand-1; color:$c-Light; text-shadow:none}

// Full container for the entire page.  
.page{
  background:$c-BG;
  min-height:600px;

  @media (max-device-width:480px), screen and (max-width:800px){
    min-height:25px;
  }  
}

// Generic tag to wrap around content within sections to apply a max width to the interior content
// while allowing for larger sections to expand the whole page for BG purposes
.content{
	margin:0 auto;
	max-width:1200px;
	padding:$spacing*5;
	
	& > :last-child{
	  margin-bottom:0;	// kill any extra margin on the last element in the .content div
	}
}

// ----------------------------------------------------------------
//		Project Specific Link Stylings
// ----------------------------------------------------------------
a{   
	color:$c-Link;
	&:hover, &:active, &:focus{color:darken($c-Link, 15%)}
  &:visited{color:#A5424B}
//	&:visited{color:darken($c-Link, 30%)}
}
// example - :hover{color:darken($c-Link, 15%)}

// Outlines - kill or keep.  It's your project
:focus, a:focus, a:active, input[type="submit"]::-moz-focus-inner{outline:none}

.col-33, .col-40, .col-60{
  @media (max-device-width:480px), screen and (max-width:800px){
    float:none;
    width:100%;
  }
}

.header-Outro .col{
  @media (max-device-width:480px), screen and (max-width:800px){
    float:none;
    padding:0;
    width:100% !important;
  }
}

@import 'project-Header';		// Project Specific Header Styling
@import 'project-Main';			// Project Specific Main Content Area Styling
@import 'project-Footer';		// Project Specific Footer Styling

.alert-error {
   background-color:#d9820f; color:#fff;
}

.modal {
  &.fade.in {
    top: 20%;
  }
  form {
    margin-bottom: 0;
  }
  @include border-radius(8px);
  @include box-shadow($bs-Panel);
}
.modal-header {
  background: $c-Teal;
  padding: 12px 16px 9px 23px;
  @include border-radius(8px 8px 0px 0px);
  
  h3 {
    color: white;
    font-size: 1.6em;
  }
}
.modal-body {
  padding: 20px 23px 0 23px;
}
.modal-footer {
  border: 0;
  background: none;
  padding: 0 23px 19px 0;
}

.faq-assist {
  background: #f7f9fb;
  border: 1px solid #e2e6ea;
  border-radius: 6px;
  padding: 16px;
  margin: 12px 0 24px;
  h2 { margin-top: 0; }
}

.helper-text {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
}

.faq-suggestions {
  margin-top: 12px;
  border: 1px solid #e2e6ea;
  border-radius: 6px;
  padding: 12px;
  background: #fff;
}

.faq-suggestion {
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
  display: block;
  color: inherit;

  &:last-child { border-bottom: none; }

  h4 {
    margin: 0 0 6px;
    font-size: 16px;
  }

  .answer {
    font-size: 13px;
    color: #555;

    p { margin: 0 0 8px; }
  }
}

.contact-trigger { display: none; margin-top: 10px; }
.contact-form-block.is-hidden { display: none; }

.settings-tags {
  text-align: center;

  h2 {
    margin-bottom: 10px;
  }

  .tag-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    margin: 0 auto 25px auto;
    max-width: 780px;
    padding: 24px;
    text-align: left;
  }

  .tag-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .tag-pill {
    background: #eef4ff;
    border-radius: 999px;
    color: #2d4a8c;
    display: inline-block;
    font-size: 13px;
    padding: 6px 14px;
  }

  .tag-panel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    margin: 0 auto;
    max-width: 980px;
  }

  .tag-panel {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    display: flex;
    flex: 1 1 360px;
    flex-direction: column;
    min-height: 285px;
    padding: 24px;
    text-align: left;
  }

  .tag-panel h3 {
    margin-top: 0;
  }

  .tag-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
  }

  .tag-form .input-Area {
    width: 100%;
  }

  .tag-form .btn-Action {
    align-self: flex-start;
    margin-top: auto;
  }

  .tag-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .tag-chip {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #dfe6f5;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    gap: 6px;
    padding: 4px 12px 4px 8px;
  }

  .tag-chip input {
    margin: 0;
  }
}