/*
  Fellowship Church × PrayerLoft
  Refined custom CSS — Bootstrap 4 compatible

  Goal:
  - Match Fellowship's editorial website aesthetic
  - Warm off-white background
  - Blacker display typography
  - Helvetica UI/body typography
  - Minimal intervention in PrayerLoft's layout/components
  - Avoid the "everything becomes a pill/card" look

  IMPORTANT:
  Replace BLACKER_FONT_URL with a PUBLIC HTTPS URL to Fellowship's
  licensed Blacker .woff2 webfont file.
*/

@font-face {
  font-family: "Blacker";
  src: url("BLACKER_FONT_URL") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --fc-bg: #f4f3ef;
  --fc-surface: #ffffff;
  --fc-ink: #111111;
  --fc-muted: #66635f;
  --fc-line: #d8d5ce;
  --fc-olive: #68704d;
  --fc-olive-soft: #e4e4da;
  --fc-tan: #a67852;
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
  background: var(--fc-bg) !important;
  color: var(--fc-ink) !important;
}

body,
p,
li,
label,
input,
textarea,
select,
button,
.btn,
.nav-link,
.dropdown-item,
.form-control,
.custom-select,
table {
  font-family: Helvetica, Arial, sans-serif !important;
}

body {
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   DISPLAY TYPE — closer to Fellowship's site
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
.display-1,
.display-2,
.display-3,
.display-4,
.card-title,
.modal-title {
  font-family: "Blacker", Georgia, "Times New Roman", serif !important;
  color: var(--fc-ink) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em;
}

h1 {
  font-size: 2.7rem;
  line-height: 1.05;
}

h2 {
  font-size: 2.15rem;
  line-height: 1.1;
}

h3 {
  font-size: 1.65rem;
  line-height: 1.15;
}

/* =========================================================
   HEADER / NAV
   Keep PrayerLoft's structure; only make it feel Fellowship-ish
   ========================================================= */

.navbar,
nav.navbar {
  background: var(--fc-bg) !important;
  border-bottom: 1px solid var(--fc-line) !important;
  box-shadow: none !important;
}

.navbar-brand {
  color: var(--fc-ink) !important;
  font-family: Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

.navbar a,
.nav-link {
  color: var(--fc-ink) !important;
}

.navbar a:hover,
.nav-link:hover {
  color: var(--fc-muted) !important;
}


/* Make Bootstrap's hamburger visible against the warm background */
.navbar-toggler {
  border: 0 !important;
  padding: 0.35rem 0.45rem !important;
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler:focus {
  outline: none !important;
  box-shadow: none !important;
}

.navbar-toggler-icon {
  width: 32px !important;
  height: 32px !important;
  background-size: 30px 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath stroke='%23111111' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.6' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  opacity: 1 !important;
}

/* Covers themes that render the hamburger with spans/pseudo-elements */
.navbar-toggler span,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
  color: var(--fc-ink) !important;
  border-color: var(--fc-ink) !important;
}

/* =========================================================
   PAGE SPACING
   ========================================================= */

.container,
.container-fluid {
  max-width: 1180px;
}

main,
.main-content,
.content {
  padding-top: 28px;
  padding-bottom: 48px;
}

/* =========================================================
   CARDS / PANELS
   IMPORTANT: restrained treatment — no oversized rounding
   ========================================================= */

.card,
.panel,
.list-group-item {
  background: var(--fc-surface) !important;
  border: 1px solid var(--fc-line) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.card-header,
.card-footer,
.panel-heading,
.panel-footer {
  background: transparent !important;
  border-color: var(--fc-line) !important;
}

.card-body,
.panel-body {
  padding: 22px !important;
}

/* =========================================================
   BUTTONS
   Fellowship-style tan pill buttons
   ========================================================= */

.btn {
  font-family: Helvetica, Arial, sans-serif !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: opacity 140ms ease, transform 140ms ease !important;
}

.btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Main Fellowship button color */
.btn-primary,
.btn-success,
.btn-info,
.btn-secondary,
.btn-dark,
.btn-light {
  background: var(--fc-tan) !important;
  border-color: var(--fc-tan) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-secondary:hover,
.btn-dark:hover,
.btn-light:hover {
  background: var(--fc-tan) !important;
  border-color: var(--fc-tan) !important;
  color: #ffffff !important;
}

/* Keep destructive actions visually distinct */
.btn-danger {
  border-radius: 999px !important;
}

/* Outline buttons keep the same pill shape */
.btn-outline-primary,
.btn-outline-secondary {
  background: transparent !important;
  color: var(--fc-tan) !important;
  border: 1px solid var(--fc-tan) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--fc-tan) !important;
  color: #ffffff !important;
}

/* Bootstrap block buttons will naturally become the wide
   Fellowship-style button shown on the website. */
.btn-block {
  width: 100% !important;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
  background: #fff !important;
  color: var(--fc-ink) !important;
  border: 1px solid #c9c6bf !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--fc-ink) !important;
  box-shadow: 0 0 0 2px rgba(17,17,17,0.06) !important;
}

/* =========================================================
   LINKS / MUTED TEXT
   ========================================================= */

a {
  color: var(--fc-ink);
}

a:hover {
  color: var(--fc-olive);
}

.text-muted,
small,
.small {
  color: var(--fc-muted) !important;
}

/* =========================================================
   ALERTS
   Soft olive treatment inspired by Fellowship's palette
   ========================================================= */

.alert {
  border-radius: 3px !important;
  box-shadow: none !important;
}

.alert-success,
.alert-info {
  color: var(--fc-ink) !important;
  background: var(--fc-olive-soft) !important;
  border-color: #c9c9b7 !important;
}

/* =========================================================
   BADGES / SMALL ACCENTS
   ========================================================= */

.badge-primary,
.badge-success,
.bg-primary,
.bg-success {
  background: var(--fc-olive) !important;
}

/* =========================================================
   BLOCKQUOTES / SCRIPTURE
   Editorial serif treatment
   ========================================================= */

blockquote,
.blockquote {
  font-family: "Blacker", Georgia, "Times New Roman", serif !important;
  color: var(--fc-ink) !important;
  background: transparent !important;
  border-left: 1px solid var(--fc-ink) !important;
  border-radius: 0 !important;
  padding: 6px 0 6px 22px !important;
  font-size: 1.4rem;
  line-height: 1.4;
}

/* =========================================================
   MODALS
   ========================================================= */

.modal-content {
  background: var(--fc-bg) !important;
  border: 1px solid var(--fc-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.12) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--fc-line) !important;
}

/* =========================================================
   TABLES
   ========================================================= */

.table {
  color: var(--fc-ink) !important;
}

.table td,
.table th {
  border-color: var(--fc-line) !important;
}

/* =========================================================
   KIOSK-SAFE LARGE SCREEN TUNING
   Intentionally subtle; avoids guessing PrayerLoft-specific classes.
   ========================================================= */

@media (min-width: 1200px) {
  body {
    font-size: 17px;
  }

  .card-body,
  .panel-body {
    padding: 26px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {
  .container,
  .container-fluid {
    padding-left: 18px;
    padding-right: 18px;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2 {
    font-size: 1.85rem;
  }
}