@charset "UTF-8";
/* ============================================
   Color Palette - RemnantLife Branding
   ============================================ */
/* ============================================
   Bulma is-primary override — bulma.min.css ships its own compiled
   turquoise for is-primary, which $accent-color does not reach on its own
   ============================================ */
.button.is-primary {
  background-color: #c1502e;
  border-color: transparent;
}
.button.is-primary:hover, .button.is-primary:focus, .button.is-primary:active {
  background-color: #a63f22;
}

/* ============================================
   Alpine.js — hide [x-cloak] elements until Alpine initializes
   ============================================ */
[x-cloak] {
  display: none !important;
}

/* ============================================
   Landing Page Hero Section
   ============================================ */
#landing-hero {
  min-height: 100vh;
  width: 100%;
  background-color: #363636;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-outline-accent {
  background-color: transparent;
  color: #c1502e;
  border: 4px solid #c1502e;
  min-width: 44px;
  min-height: 44px;
  transition: all 0.2s ease-in-out;
}
.button-outline-accent:hover, .button-outline-accent:focus {
  background-color: #5a5a5a;
  color: #c1502e;
  border-color: #c1502e;
}
.button-outline-accent:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: 2px;
}

/* ============================================
   Brand Typography - DM Serif Text Font
   ============================================ */
#hero-text-landing-page,
#navbar-brand-name,
.title.is-2 {
  font-family: "DM Serif Text", serif;
}

/* ============================================
   Sticky Footer Layout
   ============================================ */
/* Ensure body takes full viewport height with flex layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area expands to fill available space */
#main-content {
  flex: 1 0 auto;
  padding-top: 3.25rem; /* Account for fixed navbar */
}

/* Footer stays at bottom */
footer {
  flex-shrink: 0;
}

/* Adjust body padding when player is active */
body.body-player-active {
  padding-bottom: 160px; /* Height of player on desktop */
}
@media screen and (max-width: 768px) {
  body.body-player-active {
    padding-bottom: 200px; /* Height of player on mobile */
  }
}

/* ============================================
   Teaching Card (borderless list-style sermon card)
   ============================================ */
.teaching-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.teaching-card__category {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #c1502e;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.teaching-card__title {
  font-family: "DM Serif Text", serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #363636;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}

.search-filter-heading {
  font-family: "DM Serif Text", serif;
}

.teaching-card__preacher {
  color: #7a7a7a;
  font-size: 0.9rem;
  margin: 0;
}

.teaching-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
}

.teaching-card__play {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
  min-width: 44px;
  padding: 0.25rem 0.5rem;
}
.teaching-card__play .icon {
  color: #363636;
  font-size: 1.5rem;
}
.teaching-card__play:hover .icon, .teaching-card__play:focus-visible .icon, .teaching-card__play.is-playing .icon {
  color: #c1502e;
}

.teaching-card__duration {
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a7a7a;
}

.teaching-card__download {
  color: #909090;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.teaching-card__download:hover, .teaching-card__download:focus-visible {
  color: #c1502e;
}

.teaching-card.is-playing {
  border-color: #c1502e;
  background-color: rgba(193, 80, 46, 0.05);
}

.teaching-card:hover {
  background-color: #f5f5f5;
}

/* ============================================
   Pagination — numbered circles + first/last/prev/next icon buttons
   ============================================ */
.pagination {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

.pagination-list {
  flex-wrap: wrap;
}

/* Numbered page circles */
.pagination-circle {
  min-height: 2.75rem;
  min-width: 2.75rem;
  border-radius: 50%;
  background-color: #f2ece4;
  color: #363636;
  border: none;
  transition: all 0.2s ease-in-out;
}
.pagination-circle:hover, .pagination-circle:focus {
  background-color: #c1502e;
  color: #ffffff;
}
.pagination-circle:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: 2px;
}
.pagination-circle.is-current {
  background-color: #c1502e;
  color: #ffffff;
  cursor: default;
}
.pagination-circle.is-current:focus-visible {
  outline: 2px solid #a63f22;
  outline-offset: 2px;
}

/* First/Previous/Next/Last icon buttons */
.pagination-first,
.pagination-previous,
.pagination-next,
.pagination-last {
  min-height: 2.75rem;
  min-width: 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #363636;
  color: #ffffff;
  border: none;
  transition: all 0.2s ease-in-out;
}
.pagination-first:hover, .pagination-first:focus,
.pagination-previous:hover,
.pagination-previous:focus,
.pagination-next:hover,
.pagination-next:focus,
.pagination-last:hover,
.pagination-last:focus {
  background-color: #5a5a5a;
  color: #c1502e;
}
.pagination-first:focus-visible,
.pagination-previous:focus-visible,
.pagination-next:focus-visible,
.pagination-last:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: 2px;
}

/* Mobile: keep the circles tight but tappable */
@media screen and (max-width: 768px) {
  .pagination-circle,
  .pagination-first,
  .pagination-previous,
  .pagination-next,
  .pagination-last {
    min-height: 2.75rem;
    min-width: 2.75rem;
    font-size: 0.875rem;
  }
  .pagination-first,
  .pagination-previous,
  .pagination-next,
  .pagination-last {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
  }
}
/* Form button touch targets */
form .button {
  min-height: 44px;
  min-width: 44px;
}

/* Ensure select elements match button height */
.select select {
  min-height: 44px;
  height: 44px;
}

/* Ensure select wrapper also respects the height */
.select.is-fullwidth select {
  width: 100%;
}

/* ============================================
   Select Dropdown Brand Color Override
   ============================================ */
/* Override Bulma's blue focus border with dark grey to match site branding */
.select select:focus,
.select select.is-focused,
.select select:active {
  border-color: #363636 !important;
  box-shadow: 0 0 0 0.125em rgba(54, 54, 54, 0.25) !important;
}

/* Override Bulma's blue chevron with dark grey */
.select:not(.is-multiple):not(.is-loading)::after {
  border-color: #363636 !important;
}

/* Ensure hover state also uses dark grey */
.select:hover::after {
  border-color: #363636 !important;
}

/* ============================================
   Responsive Filter Layout
   ============================================ */
/* Mobile-first: Stack filter elements vertically on small screens */
.field.has-addons-responsive {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Dropdown control takes full width on mobile */
.field.has-addons-responsive .control.is-expanded {
  width: 100%;
}

/* Button controls sit in a row below dropdown on mobile */
.field.has-addons-responsive .control:not(.is-expanded) {
  flex: 1;
}

/* Container for buttons on mobile */
.field.has-addons-responsive .filter-buttons-mobile {
  display: flex;
  gap: 0.5rem;
}

.field.has-addons-responsive .filter-buttons-mobile .control {
  flex: 1;
}

.field.has-addons-responsive .filter-buttons-mobile .button {
  width: 100%;
}

/* Tablet and Desktop: Switch to inline layout (like has-addons) */
@media screen and (min-width: 769px) {
  .field.has-addons-responsive {
    flex-direction: row;
    gap: 0;
    align-items: stretch;
  }
  .field.has-addons-responsive .control.is-expanded {
    flex-grow: 1;
    width: auto;
  }
  .field.has-addons-responsive .control:not(.is-expanded) {
    flex-grow: 0;
    flex-shrink: 0;
  }
  /* Remove mobile button container behavior */
  .field.has-addons-responsive .filter-buttons-mobile {
    display: contents; /* Flatten the wrapper */
  }
  .field.has-addons-responsive .filter-buttons-mobile .button {
    width: auto;
  }
  /* Replicate has-addons border styling for desktop */
  .field.has-addons-responsive .control.is-expanded {
    margin-right: -1px;
  }
  .field.has-addons-responsive .filter-buttons-mobile .control {
    margin-right: -1px;
  }
  .field.has-addons-responsive .filter-buttons-mobile .control:last-child {
    margin-right: 0;
  }
  /* Dropdown: Remove right border radius to connect with button */
  .field.has-addons-responsive .control.is-expanded .select select {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* First button in wrapper: Remove left border radius to connect with dropdown */
  .field.has-addons-responsive .filter-buttons-mobile .control:first-child .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  /* First button when not alone: Also remove right border radius to connect with next button */
  .field.has-addons-responsive .filter-buttons-mobile .control:first-child:not(:only-child) .button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* Last button in wrapper when multiple buttons exist: Remove left border radius */
  .field.has-addons-responsive .filter-buttons-mobile .control:last-child:not(:only-child) .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}
/* ============================================
   Navbar Hover State Override
   ============================================ */
/* Override Bulma's poor contrast dark navbar hover */
.navbar.has-background-dark .navbar-end .navbar-item:hover,
.navbar.has-background-dark .navbar-end .navbar-item:focus {
  background-color: #5a5a5a;
  color: #c1502e !important;
  transition: all 0.2s ease-in-out;
}

/* Ensure focus state has visible outline for keyboard navigation */
.navbar.has-background-dark .navbar-end .navbar-item:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: -2px;
}

/* ============================================
   Navbar Dropdown Styling
   ============================================ */
/* Dropdown background to match dark navbar theme */
.navbar.has-background-dark .navbar-dropdown {
  background-color: #363636;
  border-top: 1px solid #5a5a5a;
}

/* Ensure navbar-link has dark background to match other navbar items */
.navbar.has-background-dark .navbar-link {
  background-color: #363636;
}

/* Navbar-link hover state matches other navbar items */
.navbar.has-background-dark .navbar-link:hover {
  background-color: #5a5a5a;
  color: #c1502e !important;
  transition: all 0.2s ease-in-out;
}

/* Keep "More" highlighted when dropdown is active/open */
.navbar.has-background-dark .navbar-item.has-dropdown.is-active .navbar-link,
.navbar.has-background-dark .navbar-item.has-dropdown:hover .navbar-link {
  background-color: #5a5a5a;
  color: #c1502e !important;
}

/* Dropdown arrow in accent color for visual affordance */
.navbar.has-background-dark .navbar-link::after {
  border-color: #c1502e;
}

/* On hover and when active, keep arrow turquoise */
.navbar.has-background-dark .navbar-link:hover::after,
.navbar.has-background-dark .navbar-item.has-dropdown.is-active .navbar-link::after,
.navbar.has-background-dark .navbar-item.has-dropdown:hover .navbar-link::after {
  border-color: #c1502e;
}

/* Ensure navbar-link has focus visible state */
.navbar.has-background-dark .navbar-link:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: -2px;
}

/* Dropdown items inherit same hover/focus styles as navbar items */
.navbar.has-background-dark .navbar-dropdown .navbar-item:hover,
.navbar.has-background-dark .navbar-dropdown .navbar-item:focus {
  background-color: #5a5a5a;
  color: #c1502e !important;
  transition: all 0.2s ease-in-out;
}

/* Dropdown items focus visible state */
.navbar.has-background-dark .navbar-dropdown .navbar-item:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: -2px;
}

/* ============================================
   Navbar Dropdown Responsive (Mobile)
   ============================================ */
/* On mobile (within burger menu), improve visual hierarchy */
@media screen and (max-width: 1023px) {
  .navbar-menu .navbar-item.has-dropdown {
    /* Show "More" as a section label (non-interactive) */
  }
  .navbar-menu .navbar-item.has-dropdown .navbar-link {
    display: block;
    cursor: default;
    pointer-events: none;
    /* Hide the dropdown arrow on mobile */
  }
  .navbar-menu .navbar-item.has-dropdown .navbar-link::after {
    display: none;
  }
  .navbar-menu .navbar-item.has-dropdown {
    /* Show dropdown items with visual grouping */
  }
  .navbar-menu .navbar-item.has-dropdown .navbar-dropdown {
    display: block;
    background-color: transparent;
    box-shadow: none;
    border-top: none;
    padding-left: 0;
    /* Indent child items with accent color border */
  }
  .navbar-menu .navbar-item.has-dropdown .navbar-dropdown .navbar-item {
    padding-left: 1.5rem;
    border-left: 3px solid #c1502e;
    margin-left: 0.75rem;
  }
}
/* ============================================
   Global Audio Player
   ============================================ */
#global-audio-player {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 2px solid #e8e8e8;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  padding: 1.5rem 1.5rem;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
  min-height: 160px;
}
#global-audio-player.is-active {
  transform: translateY(0);
}
#global-audio-player .player-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#global-audio-player .player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}
#global-audio-player .player-header .player-actions {
  display: flex;
  gap: 0.75rem;
}
#global-audio-player .player-main {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
#global-audio-player .player-buttons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
#global-audio-player .player-progress {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
#global-audio-player .player-track-info {
  flex: 1;
  min-width: 200px;
}
#global-audio-player .player-track-info .track-title {
  font-weight: 600;
  font-size: 1rem;
  color: #363636;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#global-audio-player .player-track-info .track-meta {
  font-size: 0.75rem;
  color: #7a7a7a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#global-audio-player .player-volume {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 140px;
}
#global-audio-player .player-btn {
  background: transparent;
  border: none;
  color: #5a5a5a;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}
#global-audio-player .player-btn:hover {
  color: #363636;
  background-color: rgba(144, 144, 144, 0.1);
}
#global-audio-player .player-btn:focus {
  outline: 2px solid #363636;
  outline-offset: 2px;
}
#global-audio-player .player-btn.is-primary {
  color: #363636;
  font-size: 1.5rem;
}
#global-audio-player .player-btn.is-primary:hover, #global-audio-player .player-btn.is-primary.is-active {
  color: #5a5a5a;
}
#global-audio-player .progress-bar {
  position: relative;
  height: 6px;
  background-color: #363636;
  border-radius: 3px;
  cursor: pointer;
  overflow: visible;
}
#global-audio-player .progress-bar .progress-fill {
  height: 100%;
  background-color: #c1502e;
  border-radius: 3px;
  position: relative;
  transition: width 0.1s linear;
}
#global-audio-player .progress-bar .progress-fill .progress-handle {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: #c1502e;
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#global-audio-player .progress-bar .progress-fill .progress-handle:active {
  cursor: grabbing;
}
#global-audio-player .progress-time {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #7a7a7a;
  margin-top: 0.5rem;
}
#global-audio-player .volume-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  --volume-fill: 100%;
  background: linear-gradient(to right, #c1502e 0%, #c1502e var(--volume-fill), #363636 var(--volume-fill), #363636 100%);
  border-radius: 2px;
  outline: none;
}
#global-audio-player .volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  background: #c1502e;
  border-radius: 50%;
  cursor: pointer;
}
#global-audio-player .volume-slider::-webkit-slider-thumb:hover {
  background: #a63f22;
}
#global-audio-player .volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: #c1502e;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}
#global-audio-player .volume-slider::-moz-range-thumb:hover {
  background: #a63f22;
}
#global-audio-player .volume-slider::-moz-range-progress {
  background: #c1502e;
  border-radius: 2px;
}
#global-audio-player .volume-slider:focus {
  outline: 2px solid #c1502e;
  outline-offset: 2px;
}
#global-audio-player .buffering-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: rgba(54, 54, 54, 0.05);
  border-radius: 4px;
  margin-top: 0.5rem;
}
#global-audio-player .buffering-indicator .buffering-spinner {
  color: #c1502e;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
#global-audio-player .buffering-indicator .buffering-text {
  color: #7a7a7a;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ============================================
   Responsive Adjustments for Audio Player
   ============================================ */
@media screen and (max-width: 768px) {
  #global-audio-player {
    padding: 1rem 1rem;
    min-height: 200px;
  }
  #global-audio-player .player-main {
    flex-direction: column;
    align-items: stretch;
  }
  #global-audio-player .player-progress {
    gap: 0.5rem;
  }
  #global-audio-player .player-buttons {
    justify-content: center;
  }
  #global-audio-player .player-track-info {
    text-align: center;
    order: -1;
  }
  #global-audio-player .player-track-info .track-title {
    font-size: 1rem;
  }
  #global-audio-player .player-track-info .track-meta {
    font-size: 0.75rem;
  }
  #global-audio-player .player-volume {
    order: 3;
  }
  #global-audio-player .player-btn {
    min-width: 40px;
    min-height: 40px;
    font-size: 1rem;
  }
  #global-audio-player .player-btn.is-primary {
    font-size: 1.3rem;
  }
}
@media screen and (min-width: 769px) and (max-width: 1023px) {
  #global-audio-player {
    padding: 1.5rem 1.5rem;
    min-height: 160px;
  }
  #global-audio-player .player-main {
    gap: 1rem;
  }
  #global-audio-player .player-btn {
    min-width: 42px;
    min-height: 42px;
    font-size: 1.05rem;
  }
  #global-audio-player .player-btn.is-primary {
    font-size: 1.4rem;
  }
}
/* ============================================
   Resource Card Styling
   ============================================ */
/* Thumbnail styling */
.resource-thumbnail {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

/* Mobile-only: Center resource buttons and text */
@media screen and (max-width: 768px) {
  .resource-card .box > div {
    display: block !important;
    text-align: center;
  }
  .resource-card .buttons {
    display: flex !important;
    justify-content: center !important;
    margin-top: 1rem;
  }
  .resource-card h3,
  .resource-card p {
    text-align: center;
  }
  .resource-thumbnail {
    margin: 0 auto 1rem auto;
  }
}
/* Tablet and up: Horizontal layout with right-aligned, vertically-centered button */
@media screen and (min-width: 769px) {
  .resource-card .is-flex-tablet {
    display: flex !important;
    align-items: center !important;
  }
  .resource-card .buttons {
    margin-left: auto;
  }
}
/* Resource download button styling */
.resource-card .button.has-background-grey-dark {
  min-height: 44px;
  min-width: 44px;
}
.resource-card .button.has-background-grey-dark:hover, .resource-card .button.has-background-grey-dark:focus {
  color: #c1502e !important;
  background-color: #363636;
}
.resource-card .button.has-background-grey-dark:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: 2px;
}

/* ============================================
   Suggested Links Card Styling
   ============================================ */
/* Card hover effect */
.suggested-link-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.suggested-link-card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

/* Ensure card content area grows to fill card */
.suggested-link-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Image placeholder styling for links without images */
.suggested-link-placeholder {
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.suggested-link-placeholder i {
  color: #5a5a5a;
  margin-top: 2rem;
}

/* Suggested link card footer button styling */
.suggested-link-card .card-footer-item {
  min-height: 44px;
  transition: all 0.2s ease-in-out;
  color: #363636;
}
.suggested-link-card .card-footer-item:hover, .suggested-link-card .card-footer-item:focus {
  background-color: #363636;
  color: #c1502e !important;
}
.suggested-link-card .card-footer-item:focus-visible {
  outline: 2px solid #c1502e;
  outline-offset: -2px;
}

/* Category tag styling */
.suggested-link-card .tag {
  margin-top: 0.5rem;
}

/* Ensure consistent image aspect ratio */
.suggested-link-card .card-image img {
  object-fit: cover;
}

/* ============================================
   Contact Form
   ============================================ */
.box {
  background-color: #fafafa;
  border: 1px solid #e8e8e8;
}

input[type=text],
input[type=email],
select,
textarea {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  padding: 0.5em 0.75em;
  width: 100%;
  font-size: 1rem;
}

textarea {
  min-height: 150px;
  resize: vertical;
}

input[type=text]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
  border-color: #363636;
  outline: none;
}

/*# sourceMappingURL=main.css.f444829f0622.map */