/**
* The landing page. Bootstrap does the layout; this only brings in the
* colours of the app (src/styles/colors.js) and the few pieces it lacks.
*/

/* Variables */
:root {
  --tiddar-primary: #1B2A5E;
  --tiddar-accent: #D4A52C;
  --tiddar-dark: #141A33;
  --tiddar-background: #F5F7FB;
  --tiddar-tint: #E8EDF8;
  --tiddar-accent-tint: #FBF3DC;

  --bs-body-font-family: 'Noto Kufi Arabic', sans-serif;
  --bs-body-color: var(--tiddar-dark);
  --bs-body-bg: var(--tiddar-background);
  --bs-primary: #1B2A5E;
  --bs-primary-rgb: 27, 42, 94;
  --bs-secondary-rgb: 107, 114, 133;
  --bs-success-rgb: 46, 125, 62;
  --bs-link-color-rgb: 27, 42, 94;
  --bs-link-hover-color-rgb: 20, 26, 51;
  --bs-border-color: #E3E7F0;
}

/* Keeps the sticky navbar from covering a section's heading. */
html {
  scroll-padding-top: 80px;
}

/*
* Colours
*/
.text-accent { color: var(--tiddar-accent) !important; }
.bg-tint { background-color: var(--tiddar-tint) !important; }
.bg-accent-tint { background-color: var(--tiddar-accent-tint) !important; }

/*
* Buttons
*/
.btn-primary {
  --bs-btn-bg: var(--tiddar-primary);
  --bs-btn-border-color: var(--tiddar-primary);
  --bs-btn-hover-bg: var(--tiddar-dark);
  --bs-btn-hover-border-color: var(--tiddar-dark);
  --bs-btn-active-bg: var(--tiddar-dark);
  --bs-btn-active-border-color: var(--tiddar-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--tiddar-primary);
  --bs-btn-border-color: var(--tiddar-primary);
  --bs-btn-hover-bg: var(--tiddar-primary);
  --bs-btn-hover-border-color: var(--tiddar-primary);
  --bs-btn-active-bg: var(--tiddar-primary);
  --bs-btn-active-border-color: var(--tiddar-primary);
}

/* The green of the app's WhatsApp action. */
.btn-success {
  --bs-btn-bg: #2E7D3E;
  --bs-btn-border-color: #2E7D3E;
  --bs-btn-hover-bg: #256632;
  --bs-btn-hover-border-color: #256632;
  --bs-btn-active-bg: #256632;
  --bs-btn-active-border-color: #256632;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.25rem;
  border-radius: 14px;
  line-height: 1.3;
}
.store-btn .bi { font-size: 1.75rem; }
.store-btn small { font-size: .7rem; opacity: .8; }

/*
* Forms
*/
.form-control:focus,
.form-select:focus {
  border-color: #8D96B8;
  box-shadow: 0 0 0 .25rem rgba(27, 42, 94, .15);
}

/*
* Brand — the logo, drawn on a 3:1 canvas (assets/brand/logo.png).
*/
.brand-logo {
  display: block;
  height: 44px;
  width: auto;
}

/* Leaves room for the download button and the toggler on a phone. */
@media (max-width: 575.98px) {
  .navbar .brand-logo { height: 36px; }
}

/*
* Hero
*/
.hero {
  background: linear-gradient(180deg, var(--tiddar-tint) 0%, var(--tiddar-background) 100%);
}

/* A marker stroke under the words to land on. */
.highlight {
  color: var(--tiddar-primary);
  background: linear-gradient(transparent 62%, rgba(212, 165, 44, .35) 62%);
}

/*
* Phone frame around the app screenshot
*/
.phone {
  max-width: 300px;
  margin-inline: auto;
  padding: 10px;
  background: var(--tiddar-dark);
  border-radius: 46px;
  box-shadow: 0 40px 80px -30px rgba(27, 42, 94, .55);
}
.phone img { border-radius: 36px; }

/*
* Icon tiles — features, professions and steps.
*/
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}