/* Typography Strategy
--------------------------------------------------
This project primarily relies on Bootstrap 5.3.3 for its base typography.
Global font family, font sizes, line heights, and heading styles are
inherited from Bootstrap's defaults.

Custom styles in this file should generally avoid overriding these core
Bootstrap typographic elements unless for very specific, localized components.
The aim is to maintain consistency through Bootstrap's established scheme.
Refer to Bootstrap documentation for details on its typographic scale
and native font stack.
-------------------------------------------------- */
/* Sticky footer styles
-------------------------------------------------- */
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.container {
  flex: 1 0 auto;
  max-width: 960px;
  width: 100%;
  padding: 20px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  flex-shrink: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

/* Enhanced footer styles for dark/light mode */
.footer {
  flex-shrink: 0;
  width: 100%;
}

/* Dark mode */
html[data-bs-theme="dark"] .footer {
  background-color: #212529 !important;
}

html[data-bs-theme="dark"] .footer-text {
  color: rgba(255, 255, 255, 0.75) !important;
}

html[data-bs-theme="dark"] .footer-container {
  background-color: #212529 !important;
}

/* Light mode */
html[data-bs-theme="light"] .footer {
  background-color: #f5f5f5 !important;
}

html[data-bs-theme="light"] .footer-text {
  color: #6c757d !important;
}

html[data-bs-theme="light"] .footer-container {
  background-color: #f5f5f5 !important;
}

/* Basic styling for loading indicator */
.htmx-indicator{
    display: none;
    opacity: 0;
    transition: opacity 200ms ease-in;
}
.htmx-request .htmx-indicator{
    display: inline;
    opacity: 1;
}
.htmx-request.htmx-indicator{
    display: inline;
    opacity: 1;
}
.clickable-item {
  cursor: pointer;
}

[data-bs-theme="light"] .clickable-item:hover {
  background-color: #f8f9fa;
  transform: translateX(5px);
  transition: all 0.2s ease;
}

[data-bs-theme="dark"] .clickable-item:hover {
  background-color: #2b3035;
  color: #fff;
  transform: translateX(5px);
  transition: all 0.2s ease;
}

.arrow-icon {
  transition: transform 0.3s ease;
  font-size: 1.2em;
  color: #6c757d;
}

.expanded .arrow-icon {
  transform: rotate(90deg) !important;
  color: #0d6efd !important;
}

/* Markdown rendered content styling */
.card-text h1,
.card-text h2,
.card-text h3,
.card-text h4,
.card-text h5,
.card-text h6 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.card-text h1 { font-size: 1.75rem; }
.card-text h2 { font-size: 1.5rem; }
.card-text h3 { font-size: 1.25rem; }

.card-text p {
  margin-bottom: 0.75rem;
}

.card-text ul,
.card-text ol {
  margin-bottom: 0.75rem;
  padding-left: 2rem;
}

.card-text li {
  margin-bottom: 0.25rem;
}

.card-text code {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  border-radius: 0.25rem;
}

.card-text pre {
  padding: 0.75rem;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
}

.card-text blockquote {
  padding: 0.5rem 1rem;
  margin: 0.75rem 0;
  border-left: 0.25rem solid;
  border-radius: 0.25rem;
}

[data-bs-theme="light"] .card-text code {
  background-color: #f8f9fa;
  color: #d63384;
}

[data-bs-theme="dark"] .card-text code {
  background-color: #2b3035;
  color: #ff79c6;
}

[data-bs-theme="light"] .card-text pre {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

[data-bs-theme="dark"] .card-text pre {
  background-color: #2b3035;
  border: 1px solid #495057;
}

[data-bs-theme="light"] .card-text blockquote {
  background-color: #f8f9fa;
  border-left-color: #0d6efd;
}

[data-bs-theme="dark"] .card-text blockquote {
  background-color: #2b3035;
  border-left-color: #0d6efd;
}

/* Mobile-optimized toast positioning
   Note: !important flags are necessary here to override Bootstrap's
   .position-fixed .top-0 .end-0 utility classes from _base.html
   for mobile-specific positioning (full-width, avoiding phone notches) */
@media (max-width: 576px) {
  #htmx-toast-container {
    top: 10px !important;
    right: 10px !important;
    left: 10px !important;
    max-width: calc(100vw - 20px);
  }

  #htmx-toast-container .toast {
    width: 100%;
  }
}

/* Touch target size improvements for mobile (44x44px minimum per iOS HIG) */
@media (max-width: 768px) {
  .btn,
  .nav-link,
  .dropdown-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .btn-sm {
    min-height: 38px;
    padding: 0.375rem 0.75rem;
  }

  /* Increase spacing between interactive elements */
  .btn + .btn {
    margin-left: 8px;
  }

  /* Ensure clickable list items have adequate height */
  .list-group-item.clickable-item,
  .expandable-toggle {
    min-height: 44px;
    padding: 12px 16px;
  }

  /* Better touch targets for badges that are clickable */
  a.badge {
    padding: 0.5em 0.75em;
  }
}