/*
 * 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;
}

/* Keep at least 21rem per card before adding another column. A single card
   can shrink to the viewport width on phones; all nine features share one grid. */
.sesam-pages-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1.5rem;
}

.sesam-pages-feature-title {
  font-weight: bolder;
  font-size: medium;
}

/* Use the same compact spacing for all four sections. Scope the shared Edit
   fragment override to the landing page; reduce spacing further on phones. */
.sesam-pages-usecase-row,
.sesam-pages-usecase-row-last,
.sesam-pages-usecases .sesam-pages-feature-hero {
  padding: clamp(2rem, 6vw, 6rem) 0;
}

/* 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; }

/* 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;
}