---
---

//
// STAGING SCSS
//
// This is a staging area for changes to the core of the codeforamerica.org site that aren't part of the pattern library.
// These changes may eventually be rolled into the pattern library.
// Note: Some of these styles are fresh, and some rewrite existing pattern-portfolio behavior.
//
// Layouts served: *
//

// ##### MIXINS AND HELPERS #####
//
// These are little mixins used to make our lives easier.
//

// This mixin allows us to style input field placeholder text
@mixin placeholder-color($color) {
	&::-webkit-input-placeholder { /* WebKit browsers */
	    color:    $color;
	}
	&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	   color:    $color;
	   opacity:  1;
	}
	&::-moz-placeholder { /* Mozilla Firefox 19+ */
	   color:    $color;
	   opacity:  1;
	}
	&:-ms-input-placeholder { /* Internet Explorer 10+ */
	   color:    $color;
	}
}

// Colors
$color-red: #cf1b41;
$color-red-medium: #aa1c3a;
$color-blue: #399fd3;
$color-blue-light: #7ab5d6;
$color-blue-medium: #4298bb;
$color-blue-dark: #004b6a;
$color-gray: #6D6E71;
$color-gray-light: #e5e5e5;
$color-gray-medium: #999595;
$color-gray-dark: #444444;
$color-orange: #e87d2b;
$color-purple: #69579C;
$color-green: #00a175;
$color-yellow: #fedd44;
$color-black: rgba(0,0,0,0.7);


// ##### SMALL PATTERNS #####
//
// Small patterns that can be used in multiple places. These add or overwrite pattern-library functionality.
//

// .button-invert with .white is completely white
a.button-invert.white,
input[type="submit"].button-invert.white,
button.button-invert.white {
	// These importants are terrible. But the level of specificity on slab- and block- buttons is nearly impossible to overwrite.
	// This is a hack for now that will need to be fixed in a later version of the pattern-library.
	color: white !important;
	border-color: white !important;
	border-bottom: 1px solid white !important;
}

// ##### CHANGES TO GLOBAL FOOTER #####
//
// These styles adapt the .global-search area in the footer to become a mailing list signup.
// These pull from the origin .global-search class in the pattern library but change the name and styles for a new purpose.
//

/* Global Footer - main - border */

.global-footer {
	// Remove the border from the top of the global footer
	border-top: none;
	// Remove the top padding so our new signup box snaps to top
	// padding-top: 0;
}

.global-footer .search-global {
	// this margin is messing up things
	margin: 0;
}

nav.nav-footer {
	margin-top: 30px;
}

/* Global Footer - main - signup form */

.signup-global {
	margin: 32px 0;
	color: white;
}

.signup-global h4 {
	display: inline-block;
	color: white;
	margin-right: 16px;
	margin-top: 20px;
	margin-bottom: 20px;
}

.signup-global h4 i:before {
	margin-right: 10px;
	font-size: 24px;
}

.signup-global input[type="email"] {
	background-color: transparent;
	color: white;
	font-size: 14px;
	line-height: inherit;
	margin: 0;
	margin-bottom: 8px;
	height: 40px;
	padding: 0px 10px;
	text-transform: none;
	box-sizing: content-box;
	border-radius: 0px;
	width: 90%;
	border-color: white;
	border: 1px solid white;

	@include placeholder-color(white);
}

.signup-global input[type="email"]:focus {
	border-color: white;
	border-color: rgba(255, 255, 255, 0.5);
}

.signup-global input[type="submit"] {
	margin-bottom: 8px;
}

/* Global footer - layout (screens above 40em) */

@media all and (min-width: 40em) {
	.signup-global {
		margin-left: 0;
	}

	.signup-global input[type="email"] {
		width: 300px;
		margin-right: 8px;
	}
}

// ##### ADD MODAL STYLES #####
//
// We have no concept of a modal. Modals are useful for some basic actions (like showing confirm pages.)
// Borrowing styles from the Boostrap modal system here.
//

/* Modal */

// Modal container that holds the dialog box, adds tinted background
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1000;
	display: none;
	overflow: hidden;
	//-webkit-overflow-scrolling: touch;
	outline: 0;
	background-color: rgba(0,0,0,0.5);
}

// When the modal is active
body.modal-active {
	.js-container {
		height: 100vh;
		overflow: hidden;
	}

	.modal {
		overflow-x: hidden;
		overflow-y: scroll;
		display: block;
	}

	.modal .modal-dialog {
		position: relative;
		box-sizing: border-box;
		background-color: white;

		width: 90%;
		margin-left: 5%;
		margin-top: 25px;
		padding: 25px;
	}
	.modal .modal-exit {
		position: absolute;
		top: 10px;
		right: 15px;
		font-weight: bold;
		font-size: 20px;
	}
}

// Styles for desktop and up
@media all and (min-width: 40em) {
	body.modal-active .modal .modal-dialog {
		width: 70%;
		margin-left: 15%;
		margin-top: 100px;
		padding: 4%;
	}
}

// ##### MASTHEAD FIXES #####
//
// Shrink the size of the default masthead text
//

@media all and (min-width: 40em) {
	.masthead-l .page-title,
	.masthead-s .page-title {
		font-size: 57px;
	}
}

// ##### MASTHEAD-CUSTOM #####
//
// Introduces a custom masthead that is deeper than usual and holds text and calls-to-action.
//

// When global-header comes before mastead-custom, it gets this class
// Remove the margin so the masthead snaps to the bottom of the global-header
.global-header-custom {
  margin-bottom: 0;
}

.masthead.masthead-custom {

  // ## Basic layout

  // Set the color we'll fade the background into
  background-color: #004b6a;
  // Add some padding to the top and bottom
  padding-top: 30px;
  // Keep the text color white, even on mobile
  color: white;

  // ## The header image, held in the :before pseudo-class

  &:before {
    // Same min-height as our container
    min-height: 100%;
    background-size: cover;
    // Fade into the background color
    opacity: 0.3;
    // Don't hide it on mobile
    display: block;
  }

  // ## Typography

  .page-title {
    // Restyle the page header text
    font-size: 35px;
    line-height: 40px;
    letter-spacing: -1px;
    margin-top: 0;
    text-transform: none;
    // Keep the color white, even on mobile. Have to use here to override specificity.
    color: white;
  }

  .page-overline {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 3px;
  }

  .page-description {
    font-family: "Interstate", "Gotham A", "Gotham B", "Open Sans Regular", "Verdana", "Helvetica", "Arial";
    font-size: 16px;
    line-height: 26px;
    text-align: center;
  }

  p {
    // On small screens, core styles try to float .masthead p to the left. Don't do that.
    float: none;
  }

  // ## Submodule layout

  // This container holds the description
  .description {
    position: relative;
    z-index: 3;
    margin-top: 100px;
  }

  // This container holds the down arrow, inside of .description
  .arrow img {
    width: 30px;
    margin-bottom: 20px;
  }

  .arrow img:hover {
    opacity: 0.5;
    cursor: pointer;
  }

  // ## Styles for tablet and up

  @media all and (min-width: 40em) {
  // add responsive styles here
    .page-title {
      // Make the page title bigger
      font-size: 48px;
      line-height: 58px;
      letter-spacing: -1px;
    }

    .page-overline {
      // Make the overline a bit bigger
      font-size: 16px;
      letter-spacing: 4px;
    }

    .page-description {
      // Make the page description text bigger
      font-size: 20px;
      line-height: 35px;
    }

  }

}

// ##### CLEARFIX #####
//
// Adds a clearfix so parent containers don't collapse.
//

.layout-breve:after,
.layout-semibreve:after {
    content: "";
    display: table;
    clear: both;
 }

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

// ##### LAYOUT-WHOLE #####
//
// Adds a layout class that fills parent and clearfixes
//

@media all and (min-width: 40em) {
  .layout-whole {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    &:before,
    &:after {
      content: "";
      display: table;
      clear: both;
    }
  }
}

// ##### MARKER #####
//
// New version of badge that stands alone. Should be ported over to take the place of and
// become a more flexible version of badge.
//

%marker-icon {
  display: block;
  width: 65px;
  height: 65px;
  border-radius: 100%;
  // Default red, can be changed
  background-color: $color-red;
  // Default center align, can be changed
  margin-left: auto;
  margin-right: auto;
  &:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
  }
}

// Base of marker ... pick an icon
.marker-safety-justice {
  @extend %marker-icon;
  &:before {
    background-image: url('/media/images/icons/safety.png');
    padding-top: 5%;
    background-size: 55%;
  }
}
.marker-health {
  @extend %marker-icon;
  &:before {
    background-image: url('/media/images/icons/health.png');
    padding-top: 5%;
    background-size: 65%;
  }
}
.marker-economic-development {
  @extend %marker-icon;
  &:before {
    background-image: url('/media/images/icons/economic.png');
  }
}
.marker-civic-engagement {
  @extend %marker-icon;
  &:before {
    background-image: url('/media/images/icons/info.png');
  }
}

// Change the color. It's $medium-red by default.
.marker-blue { background-color: $color-red; }
.marker-blue { background-color: $color-blue; }
.marker-green { background-color: $color-green; }
.marker-orange { background-color: $color-orange; }
.marker-purple { background-color: $color-purple; }

// Change the size. It's 65px of the container by default.
.marker-big {
  width: 80px;
  height: 80px;
}

// Change the alignment. It's centered by default.
.marker-left {
  margin-left: 0;
  margin-right: 0;
}

// ##### MARKER #####
//
// Heading class is unwieldly. Let's condense it a bit.
//
.heading-tight {
  margin-bottom: 1em;
  padding-bottom: 0.1em;
}

// ##### CARD #####
//
// Nice, self-contained things that fit inside containers with a border and a
// white background.
//

.card {
	border: 1px solid $color-gray-light;
	padding: 1em;
	background-color: #fcfcfc;
	h5 {
    font-weight: 700;
    text-transform: none;
    font-size: 1.3em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
	}
}

.card img {
	width: 100%;
	max-width: 100%;
	margin: 0;
	// if browsers support calc
	width: calc(100% + 2em + 2px);
	max-width: calc(100% + 2em + 2px);
	margin-left: calc(-1em + -1px);
	margin-top: calc(-1em + -1px);
}

.card-inverse {
	border-color: white;
	background-color: transparent;
	color: white;
}

// ##### ICONS #####

i.symbol {
	display: block;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background-color: $color-gray-dark;
}

i.symbol-invert {
	background-color: transparent !important;
	border: 1px solid white;
	border-radius: 100%;
}

i.symbol-rocket {
	background-image: url('http://style.codeforamerica.org/style/images/badge-rocket.svg');
	background-size: 70%;
	background-position: 40% 70%;
	background-repeat: no-repeat;
	background-color: $color-orange;
}

i.symbol-glasses {
	background-image: url('http://style.codeforamerica.org/style/images/badge-glasses.svg');
	background-size: 85%;
	background-position: 55% 55%;
	background-repeat: no-repeat;
	background-color: $color-blue-dark;
}

i.symbol-gov {
	background-image: url('http://style.codeforamerica.org/style/images/badge-gov.svg');
	background-size: 55%;
	background-position: 50% 40%;
	background-repeat: no-repeat;
	background-color: $color-purple;
}

i.symbol-key {
	background-image: url('http://style.codeforamerica.org/style/images/badge-fellowship.svg');
	background-size: 40%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: $color-red-medium;
}

// ##### CHECKMARK LIST #####
//
// A list with classes .checkmark.list-no-bullets that has checkmark icons
//
ul.checkmark {
	padding-top: 0;
	margin-top: 0;
}
ul.checkmark li {
	text-indent: -2em;
	padding-left: 4em;
	line-height: 30px;
}
ul.checkmark li:before {
	font-family: 'ico-moon';
	content: "\e370";
	float: left;
	width: 2em;
}

// ##### PILL #####
//
// A grey-background pill with text in it indicating relatioship to a Focus Area.
// Used for government partner cards and people cards.
//
.focus-area-pill {
	display: inline-block;
	width: auto;
	background-color: #999595;
	color: white;
	font-weight: 400;
	font-family: "Interstate", "Gotham A", "Gotham B", "Open Sans Regular", "Verdana", "Helvetica", "Arial";
	font-size: 14px;
	line-height: 24px;
	padding: 0 6px;
}

// ##### BILLTWOBYFOUR #####
//
// Like a billboard. But not a big link. (Two by four. Board. Get it?)
//
.billtwobyfour,
li.billtwobyfour {
	background-color: #fff;
	border-radius: 5px;
	border-bottom: none;
	border: 1px solid #e5e5e5;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
	clear: none;
	display: block;
	margin: 0 0 18px;
	padding: 16px;
	text-align: center;
	box-sizing: border-box;
}
