/*
 * Page-local styles for the marketing/static pages app (sesam_pages).
 *
 * All classes in this file use the `sesam-pages-` prefix to make it visible
 * at the call site that they are scoped to the marketing pages. Truly shared
 * helpers (color utilities, `.sesam-cursor-help`, `.sesam-switch`, etc.) live in
 * `static/css/components.css`. Promote a rule from here to components.css as
 * soon as a second app needs it.
 */

.btn-link {
  text-decoration: none !important;
}

/* Marketing nav uses a muted gray text color (overrides the global blue
   link color set in the central base.css for SESAM application pages). */
.nav-link {
  color: var(--sesam-gray-400) !important;
}

.nav-item .nav-link:hover {
  color: var(--sesam-blue) !important;
}

.dropdown .dropdown-menu {
  font-size: 0.85rem;
}

.dropdown-item {
  display: block;
  width: 100%;
  padding: 0.25rem 1.5rem;
  clear: both;
  font-weight: 400;
  color: var(--sesam-dropdown-item) !important;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: #2e2f37;
  text-decoration: none;
  background-color: var(--sesam-surface-muted);
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff !important;
  text-decoration: none;
  background-color: var(--sesam-blue);
}

.dropdown-item.disabled,
.dropdown-item:disabled {
  color: var(--sesam-gray-500);
  pointer-events: none;
  background-color: transparent;
}

.dropdown-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;
  border-top: 1px solid var(--sesam-surface-muted);
}

#footer {
  background-color: var(--sesam-dark-blue);
  padding-top: 30px;
  padding-bottom: 30px;
}

#footer a {
  color: white;
}

/* Feedback page: required-field hint below the form. */
.sesam-pages-feedback-required-hint {
  font-size: smaller;
  margin-bottom: 2rem;
}

/* Marketing-page-specific helpers ------------------------------------------ */

/* Pill in the marketing navbar around the SESAM logo. */
.sesam-pages-beta-badge {
  color: var(--sesam-blue);
  border: 1px solid var(--sesam-blue);
  font-size: 40%;
}

/* Header buttons (Login / Create account) on the marketing navbar use a
   tighter Bootstrap-3-style corner radius than the default BS5 button. */
.sesam-pages-navbar-btn { border-radius: 0.25rem; }

/* Hero ("jumbotron") block on the marketing landing page. */
.sesam-pages-hero {
  min-height: 500px;
  /* hero_image.jpg lives in the globally collected /static/img/ dir. */
  background-image:
    linear-gradient(rgba(19, 50, 77, 0.8), rgba(35, 91, 140, 0.5)),
    url("/static/img/hero_image.ce39824d857c.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.sesam-pages-hero-inner {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sesam-pages-hero-title {
  color: #F3F3F6;
  font-size: xx-large;
  font-weight: 800;
  margin-bottom: 1.5rem;
}
.sesam-pages-hero-cta {
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  padding: 1rem 1.2rem !important;
}

/* Section that lists feature cards. */
.sesam-pages-features-section {
  color: var(--sesam-marketing-blue);
  padding: 100px 0;
}
.sesam-pages-feature-title {
  font-weight: bolder;
  font-size: medium;
}

/* Inline chevron icon used in CTA buttons across the marketing pages. */
.sesam-pages-cta-chevron { margin-left: 10px; }

/* Build/Simulate/Analyze rows in the use-cases band. */
.sesam-pages-usecase-row { padding: 300px 0; }
.sesam-pages-usecase-row-last { padding-bottom: 300px; }

/* Metrics band (Scenarios built / Simulations performed / Users served). */
.sesam-pages-metrics { margin-top: 100px; }
.sesam-pages-metric-value { font-weight: 600; font-size: 2rem; }

/* "SESAM is for everyone" customer band with the dark-blue gradient card. */
.sesam-pages-customers-section { padding: 100px 0; }
.sesam-pages-customers-card {
  color: #fff;
  padding: 80px 40px;
  border-radius: 1rem;
  background: rgb(19, 50, 77);
  background: linear-gradient(227deg,
    rgba(19, 50, 77, 1) 0%,
    rgba(35, 91, 140, 1) 46%,
    rgba(0, 212, 255, 1) 100%);
}
.sesam-pages-customers-row { line-height: 1.8; }
.sesam-pages-customers-col { padding: 20px; }

/* Section title used on the customer band and the "Available plans" heading. */
.sesam-pages-section-title {
  font-weight: 600;
  font-size: 2rem !important;
  margin-bottom: 50px;
}

/* Logo image keeps original aspect ratio at a fixed height. */
.sesam-img-auto-width { width: auto; }

/* Outline plan card highlighted as the current plan on /plans. */
.sesam-pages-plans-card-current { border: 3px solid rgb(35, 91, 140); }

/* fa-stack badge centered inside a plan-card header. */
.sesam-pages-plans-card-stack { margin-top: 8px; }

/* Price suffix " / month|year " rendered next to the big plan amount. */
.sesam-pages-plans-price-suffix { font-size: 1rem; }

/* Custom yellow header for the "Enterprise / Custom" plan card. */
.sesam-pages-plans-enterprise-header { color: #F2D138; }

/* Feature card on the landing page (icon + title + body). */
.sesam-pages-feature-card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-shadow: 0.1rem 0.2em 0.3rem rgba(24, 21, 30, 0.12),
              inset 0 0 1px #70697d;
  padding: 36px;
  border-radius: 1rem;
  background-color: #F3F3F6;
  height: 100%;
}

/* Feature-card icon wrapper uses .h1 only for sizing; the icon color must
   follow the surrounding section color (text-primary) and not the global
   h1 heading color. */
.sesam-pages-feature-card .h1 {
  color: inherit;
}

/* Landing-page plan card with elevated shadow. */
.sesam-pages-plans-card {
  color: rgb(33, 37, 41);
  background: #fff;
  border-radius: 8px;
  box-shadow:
    0 8px 12px 1px rgba(29, 17, 51, 0.04),
    0 3px 16px 2px rgba(9, 32, 77, 0.12),
    0 5px 10px -3px rgba(29, 17, 51, 0.12);
  border-collapse: separate;
  margin-left: auto;
  margin-right: auto;
  max-width: 928px;
  width: 100%;
}

/* Feature list inside a plan card. */
ul.sesam-pages-plans-list {
  list-style-type: none;
  margin: 1.5em;
  padding: 0;
  text-align: justify;
}

ul.sesam-pages-plans-list > li:not(:last-child) {
  margin-bottom: 3px;
}

ul.sesam-pages-plans-list > li > .fas {
  margin-right: 1rem;
}

/* Large monthly/yearly price label inside a plan card. */
.sesam-pages-price {
  font-weight: bolder;
  font-size: 2rem;
}