/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 /* app/assets/stylesheets/application.css */
 
 .manrope-regular {
   font-family: "Manrope", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
 }
 
 .manrope-semi {
   font-family: "Manrope", sans-serif;
   font-optical-sizing: auto;
   font-weight: 500;
   font-style: normal;
 }
 
 .manrope-bold {
   font-family: "Manrope", sans-serif;
   font-optical-sizing: auto;
   font-weight: 800;
   font-style: normal;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: "Manrope", sans-serif;
 }
 
 /* ============================================
    CUSTOM COMPONENTS (Updated with pastel colors)
    ============================================ */
 
 /* Buttons */
 .btn-primary {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1rem;
   border: 1px solid transparent;
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 7px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #ffffff !important;
   background-color: #3d8fc0 !important; /* primary-600 */
   transition: background-color 0.2s;
 }
 
 .btn-primary:hover {
   background-color: #2a76a5 !important; /* primary-700 */
 }
 
 .btn-primary:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-color: #5fa6d1 !important; /* primary-500 */
   box-shadow: 0 0 0 2px var(--tw-ring-color);
 }
 
 .btn-secondary {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1rem;
   border: 1px solid #e6e1d8; /* secondary-300 */
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 7px;
   color: #655f54 !important; /* secondary-700 */
   background-color: #ffffff !important;
   transition: background-color 0.2s;
 }
 
 .btn-secondary:hover {
   background-color: #f9f7f4 !important; /* secondary-100 */
 }
 
 .btn-secondary:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-color: #5fa6d1 !important;
   box-shadow: 0 0 0 2px var(--tw-ring-color);
 }
 
 .btn-danger {
   display: inline-flex;
   align-items: center;
   padding: 0.5rem 1rem;
   border: 1px solid transparent;
   font-size: 0.875rem;
   font-weight: 500;
   border-radius: 7px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   color: #ffffff !important;
   background-color: #d49a7d !important; /* warm-500 */
   transition: background-color 0.2s;
 }
 
 .btn-danger:hover {
   background-color: #c08565 !important;
 }
 
 .btn-danger:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-color: #d49a7d !important;
   box-shadow: 0 0 0 2px var(--tw-ring-color);
 }
 
 /* Forms */
 .form-input,
 .form-select,
 .form-textarea {
   display: block;
   width: 100%;
   border-radius: 7px;
   border: 1px solid #e6e1d8 !important; /* secondary-300 */
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   font-size: 0.875rem;
 }
 
 .form-input:focus,
 .form-select:focus,
 .form-textarea:focus {
   border-color: #5fa6d1 !important; /* primary-500 */
   --tw-ring-color: #5fa6d1 !important;
   box-shadow: 0 0 0 1px var(--tw-ring-color);
 }
 
 .form-checkbox {
   height: 1rem;
   width: 1rem;
   border-radius: 0.25rem;
   border: 1px solid #e6e1d8 !important; /* secondary-300 */
   color: #5fa6d1 !important; /* primary-500 */
 }
 
 .form-checkbox:focus {
   --tw-ring-color: #5fa6d1 !important;
   box-shadow: 0 0 0 1px var(--tw-ring-color);
 }
 
 /* Navigation */
 /* .nav-link {
   display: inline-flex;
   align-items: center;
   padding: 0.25rem 0.25rem 0.5rem;
   border-bottom-width: 2px;
   border-color: transparent;
   font-size: 0.875rem;
   font-weight: 500;
 } */
 
 .nav-link-active {
   border-color: #5fa6d1 !important; /* primary-500 */
   color: #33302b !important; /* secondary-900 */
 }
 
 .nav-link-inactive {
   border-color: transparent;
   color: #a9a295 !important; /* secondary-500 */
 }
 
 .nav-link-inactive:hover {
   border-color: #e6e1d8 !important; /* secondary-300 */
   color: #847b6d !important; /* secondary-600 */
 }
 
 /* Cards */
 .card {
   background-color: #ffffff;
   border-radius: 7px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   border: 1px solid #f2efe9 !important; /* secondary-200 */
 }
 
 .card-header {
   padding: 1rem 1.5rem;
   border-bottom: 1px solid #f2efe9 !important; /* secondary-200 */
 }
 
 .card-body {
   padding: 1rem 1.5rem;
 }
 
 .card-footer {
   padding: 1rem 1.5rem;
   border-top: 1px solid #f2efe9 !important; /* secondary-200 */
   background-color: #f9f7f4 !important; /* secondary-100 */
   border-bottom-left-radius: 7px;
   border-bottom-right-radius: 7px;
 }
 
 /* Alerts */
 .alert-success {
   border-radius: 0.375rem;
   background-color: #e8f2ee !important; /* accent-100 */
   padding: 1rem;
 }
 
 .alert-error {
   border-radius: 0.375rem;
   background-color: #fbece6 !important; /* warm-100 */
   padding: 1rem;
 }
 
 .alert-warning {
   border-radius: 0.375rem;
   background-color: #fdf6e3 !important;
   padding: 1rem;
 }
 
 .alert-info {
   border-radius: 0.375rem;
   background-color: #f0f7fc !important; /* primary-100 */
   padding: 1rem;
 }
 
 /* Badges */
 .badge {
   display: inline-flex;
   align-items: center;
   padding: 0.125rem 0.625rem;
   border-radius: 9999px;
   font-size: 0.75rem;
   font-weight: 500;
 }
 
 .badge-primary {
   background-color: #f0f7fc !important; /* primary-100 */
   color: #2a76a5 !important; /* primary-700 */
 }
 
 .badge-secondary {
   background-color: #f9f7f4 !important; /* secondary-100 */
   color: #655f54 !important; /* secondary-700 */
 }
 
 .badge-success {
   background-color: #e8f2ee !important; /* accent-100 */
   color: #4d8a72 !important; /* accent-600 */
 }
 
 .badge-warning {
   background-color: #fdf6e3 !important;
   color: #b7791f !important;
 }
 
 .badge-danger {
   background-color: #fbece6 !important; /* warm-100 */
   color: #b5654a !important;
 }
 
 /* Table */
 .table-container {
   overflow-x: auto;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
   border-radius: 7px;
 }
 
 .table {
   min-width: 100%;
   border-collapse: collapse;
 }
 
 .table-header {
   background-color: #f9f7f4 !important; /* secondary-100 */
 }
 
 .table-header-cell {
   padding: 0.75rem 0.75rem;
   text-align: left;
   font-size: 0.875rem;
   font-weight: 600;
   color: #33302b !important; /* secondary-900 */
 }
 
 .table-row {
   background-color: #ffffff;
 }
 
 .table-row:hover {
   background-color: #f9f7f4 !important; /* secondary-100 */
 }
 
 .table-cell {
   white-space: nowrap;
   padding: 1rem 0.75rem;
   font-size: 0.875rem;
   color: #33302b !important; /* secondary-900 */
 }
 
 /* Layout */
 .container {
   max-width: 80rem;
   margin-left: auto;
   margin-right: auto;
   padding-left: 1rem;
   padding-right: 1rem;
 }
 
 @media (min-width: 640px) {
   .container {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
   }
 }
 
 @media (min-width: 1024px) {
   .container {
     padding-left: 2rem;
     padding-right: 2rem;
   }
 }
 
 .page-header {
   background-color: #ffffff;
   border-radius: 7px;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   padding: 1.5rem;
   margin-bottom: 2rem;
 }
 
 .page-title {
   font-size: 1.875rem;
   font-weight: 700;
   color: #33302b !important; /* secondary-900 */
   margin-bottom: 0.5rem;
 }
 
 .page-subtitle {
   color: #847b6d !important; /* secondary-600 */
   margin-bottom: 1.5rem;
 }
 
 /* ============================================
    COLOR OVERRIDES (for direct Tailwind classes)
    ============================================ */
 
 /* Primary colors (replacing blues) */
 .bg-blue-50 { background-color: #f8fbfe !important; }
 .text-blue-50 { color: #f8fbfe !important; }
 .border-blue-50 { border-color: #f8fbfe !important; }
 
 .bg-blue-100 { background-color: #f0f7fc !important; }
 .text-blue-100 { color: #f0f7fc !important; }
 .border-blue-100 { border-color: #f0f7fc !important; }
 
 .bg-blue-200 { background-color: #e1f0f9 !important; }
 .text-blue-200 { color: #e1f0f9 !important; }
 .border-blue-200 { border-color: #e1f0f9 !important; }
 
 .bg-blue-300 { background-color: #b8d9ed !important; }
 .text-blue-300 { color: #b8d9ed !important; }
 .border-blue-300 { border-color: #b8d9ed !important; }
 
 .bg-blue-400 { background-color: #8fc2e1 !important; }
 .text-blue-400 { color: #8fc2e1 !important; }
 .border-blue-400 { border-color: #8fc2e1 !important; }
 
 .bg-blue-500 { background-color: #5fa6d1 !important; }
 .text-blue-500 { color: #5fa6d1 !important; }
 .border-blue-500 { border-color: #5fa6d1 !important; }
 
 .bg-blue-600 { background-color: #3d8fc0 !important; }
 .text-blue-600 { color: #3d8fc0 !important; }
 .border-blue-600 { border-color: #3d8fc0 !important; }
 
 .bg-blue-700 { background-color: #2a76a5 !important; }
 .text-blue-700 { color: #2a76a5 !important; }
 .border-blue-700 { border-color: #2a76a5 !important; }
 
 /* Secondary colors (replacing grays) */
 .bg-gray-50 { background-color: #fcfbf9 !important; }
 .text-gray-50 { color: #fcfbf9 !important; }
 .border-gray-50 { border-color: #fcfbf9 !important; }
 
 .bg-gray-100 { background-color: #f9f7f4 !important; }
 .text-gray-100 { color: #f9f7f4 !important; }
 .border-gray-100 { border-color: #f9f7f4 !important; }
 
 .bg-gray-200 { background-color: #f2efe9 !important; }
 .text-gray-200 { color: #f2efe9 !important; }
 .border-gray-200 { border-color: #f2efe9 !important; }
 
 .bg-gray-300 { background-color: #e6e1d8 !important; }
 .text-gray-300 { color: #e6e1d8 !important; }
 .border-gray-300 { border-color: #e6e1d8 !important; }
 
 .bg-gray-400 { background-color: #d4cec2 !important; }
 .text-gray-400 { color: #d4cec2 !important; }
 .border-gray-400 { border-color: #d4cec2 !important; }
 
 .bg-gray-500 { background-color: #a9a295 !important; }
 .text-gray-500 { color: #a9a295 !important; }
 .border-gray-500 { border-color: #a9a295 !important; }
 
 .bg-gray-600 { background-color: #746c60 !important; }
 .text-gray-600 { color: #746c60 !important; }
 .border-gray-600 { border-color: #746c60 !important; }
 
 .bg-gray-700 { background-color: #655f54 !important; }
 .text-gray-700 { color: #655f54 !important; }
 .border-gray-700 { border-color: #655f54 !important; }
 
 .bg-gray-800 { background-color: #4a453d !important; }
 .text-gray-800 { color: #4a453d !important; }
 .border-gray-800 { border-color: #4a453d !important; }
 
 .bg-gray-900 { background-color: #33302b !important; }
 .text-gray-900 { color: #33302b !important; }
 .border-gray-900 { border-color: #33302b !important; }
 
 /* Accent colors (replacing greens) */
 .bg-green-50 { background-color: #f5f9f7 !important; }
 .text-green-50 { color: #f5f9f7 !important; }
 .border-green-50 { border-color: #f5f9f7 !important; }
 
 .bg-green-100 { background-color: #e8f2ee !important; }
 .text-green-100 { color: #e8f2ee !important; }
 .border-green-100 { border-color: #e8f2ee !important; }
 
 .bg-green-500 { background-color: #5fa68a !important; }
 .text-green-500 { color: #5fa68a !important; }
 .border-green-500 { border-color: #5fa68a !important; }
 
 .bg-green-600 { background-color: #4d8a72 !important; }
 .text-green-600 { color: #4d8a72 !important; }
 .border-green-600 { border-color: #4d8a72 !important; }
 
 /* Warm colors (replacing reds/oranges for accents) */
 .bg-red-50 { background-color: #fdf8f5 !important; }
 .text-red-50 { color: #fdf8f5 !important; }
 .border-red-50 { border-color: #fdf8f5 !important; }
 
 .bg-red-100 { background-color: #fbece6 !important; }
 .text-red-100 { color: #fbece6 !important; }
 .border-red-100 { border-color: #fbece6 !important; }
 
 .bg-red-500 { background-color: #d49a7d !important; }
 .text-red-500 { color: #d49a7d !important; }
 .border-red-500 { border-color: #d49a7d !important; }
 
 /* Indigo replacements (using primary colors) */
 .bg-indigo-600 { background-color: #3d8fc0 !important; }
 .text-indigo-600 { color: #3d8fc0 !important; }
 .border-indigo-600 { border-color: #3d8fc0 !important; }
 
 .bg-indigo-700 { background-color: #2a76a5 !important; }
 .text-indigo-700 { color: #2a76a5 !important; }
 .border-indigo-700 { border-color: #2a76a5 !important; }
 
 /* Gradient overrides */
 .bg-gradient-to-r.from-blue-600.to-indigo-700 {
   background-image: linear-gradient(to right, #3d8fc0, #2a76a5) !important;
 }
 
 .bg-gradient-to-br.from-blue-600.to-indigo-700 {
   background-image: linear-gradient(to bottom right, #3d8fc0, #2a76a5) !important;
 }
 
 /* Hover states */
 .hover\:bg-blue-50:hover { background-color: #f0f7fc !important; }
 .hover\:bg-blue-700:hover { background-color: #2a76a5 !important; }
 .hover\:bg-gray-50:hover { background-color: #f9f7f4 !important; }
 .hover\:border-gray-300:hover { border-color: #e6e1d8 !important; }
 .hover\:text-gray-700:hover { color: #655f54 !important; }
 .hover\:text-blue-800:hover { color: #2a5c7e !important; }
 
 /* Focus states */
 .focus\:ring-blue-500:focus { --tw-ring-color: #5fa6d1 !important; }
 .focus\:ring-red-500:focus { --tw-ring-color: #d49a7d !important; }
 .focus\:border-blue-500:focus { border-color: #5fa6d1 !important; }
 
 /* ============================================
    REST OF YOUR EXISTING STYLES (Keep these as-is)
    ============================================ */
 
 /* [Keep all your existing styles below - pagy, blog-post-body, map-control, prose, etc.] */
 
.pagy {
   --B: 1;
   --H: 0;
   --S: 0;
   --L: 50;
   --A: 1;
   --spacing: 0.125rem;
   --padding: 0.75rem;
   --rounding: 1.75rem;
   --border-width: 0rem;
   --font-size: 0.875rem;
   --font-weight: 600;
   --line-height: 1.75;
 
   --text:               hsla(var(--H) var(--S) calc(var(--L) - (25 * var(--B))) / var(--A));
   --text-hover:         hsla(var(--H) var(--S) calc(var(--L) - (30 * var(--B))) / var(--A));
   --text-current:       hsla(var(--H) var(--S) calc(100 * (var(--B) + 1)) / var(--A));
   --background:         hsla(var(--H) var(--S) calc(var(--L) + (30 * var(--B))) / var(--A));
   --background-hover:   hsla(var(--H) var(--S) calc(var(--L) + (20 * var(--B))) / var(--A));
   --background-current: hsla(var(--H) var(--S) var(--L) / var(--A));
   --background-input:   hsla(var(--H) var(--S) calc(var(--L) + (45 * var(--B))) / var(--A));
 
   color: var(--text);
   font-size: var(--font-size);
   line-height: var(--line-height);
   font-weight: var(--font-weight);
   display: flex;
 }
 
 .pagy > :not([hidden]) ~ :not([hidden]) {
   margin-left: calc(var(--spacing) * (1 - var(--space-reverse, 0)));
   margin-right: calc(var(--spacing) * var(--space-reverse, 0));
 }
 
 .rtl .pagy > :not([hidden]) ~ :not([hidden]) {
   --space-reverse: 1;
 }
 
 .pagy a:not([role="separator"]) { /* all but gaps */
   display: block;
   text-decoration: none;
   background-color: var(--background);
   padding: calc(var(--padding) / 3) var(--padding);
   border: var(--border-width) solid var(--background-current);
   border-radius: var(--rounding);
   color: inherit;
 }
 
 .pagy a[href]:hover { /* all links on hover */
   background-color: var(--background-hover);
   color: var(--text-hover)
 }
 
 .pagy a:not([href]) { /* all but links */
   cursor: default;
 }
 
 .pagy a[role="link"]:not([aria-current]) { /* disabled links */
   opacity: .6;
 }
 
 .pagy a[aria-current] {  /* current page */
   background-color: var(--background-current);
   color: var(--text-current);
   border-color: var(--text);
 }
 
 .pagy label {
   white-space: nowrap;
   display: inline-block;
   border: var(--border-width) solid var(--background-current);
   border-radius: var(--rounding);
   background-color: var(--background);
   padding: calc((var(--padding) / 3) - var(--border-width)) var(--padding);
 }
 
 .pagy label input {
   all: unset;
   border: var(--border-width) solid var(--background-current);
   border-radius: calc(var(--rounding) / 2) !important;
   background-color: var(--background-input);
 }
 
 .nav-link {
   @apply inline-flex items-center border-b-2 border-transparent px-1 pt-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700;
 }
 
 .nav-link-active {
   @apply border-blue-500 text-gray-900;
 }
 
 .blog-post-body{
   h1{
     font-size:var(--text-4xl);
     line-height:var(--tw-leading,var(--text-4xl--line-height));
     --tw-font-weight:var(--font-weight-extrabold);
     font-weight:var(--font-weight-extrabold);
     margin-bottom: calc(var(--spacing)*6);
   }
   
   h2{
     font-size: var(--text-3xl);
     line-height: var(--tw-leading,var(--text-3xl--line-height));
     margin-top: calc(var(--spacing)*4);
     margin-bottom: calc(var(--spacing)*4);
     --tw-font-weight:var(--font-weight-extrabold);
     font-weight:var(--font-weight-extrabold);
   }
   
   h3{
     font-size: var(--text-xl);
     line-height: var(--tw-leading,var(--text-xl--line-height));
     margin-top: calc(var(--spacing)*3);
     margin-bottom: calc(var(--spacing)*3);
        --tw-font-weight:var(--font-weight-extrabold);
        font-weight:var(--font-weight-extrabold);
   }
   
   p{
     /* font-size: var(--text-xl); */
     line-height: var(--tw-leading,var(--text-xl--line-height));
     margin-top: calc(var(--spacing)*2);
   }
   
   a{
     color: var(--color-blue-800);
     text-decoration: underline;
   }
 }
 
 .blog-post-body .prose {
   line-height: 1.75;
 }
 
 .blog-post-body .prose p {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
 }
 
 .blog-post-body .prose h2 {
   font-size: 1.875em;
   font-weight: 700;
   margin-top: 2em;
   margin-bottom: 1em;
 }
 
 .blog-post-body .prose h3 {
   font-size: 1.5em;
   font-weight: 600;
   margin-top: 1.5em;
   margin-bottom: 0.75em;
 }
 
 .blog-post-body .prose ul {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
   padding-left: 1.625em;
 }
 
 .blog-post-body .prose li {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
 /* Map controls */
 .map-control {
   background: white;
   border: 1px solid #ccc;
   border-radius: 4px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.3);
   margin: 10px;
 }
 
 .zoom-control button {
   display: block;
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   border: none;
   background: white;
   cursor: pointer;
   font-size: 18px;
   font-weight: bold;
 }
 
 .zoom-control button:hover {
   background: #f5f5f5;
 }
 
 .zoom-control button:first-child {
   border-bottom: 1px solid #ccc;
 }
 
 /* Fullscreen mode */
 #funeral-homes-map:fullscreen {
   height: 100vh !important;
 }
 
 /* Info window styles */
 .gm-style .gm-style-iw-c {
   padding: 0 !important;
   border-radius: 8px !important;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
 }
 
 .gm-style .gm-style-iw-t::after {
   background: white !important;
 }
 
 /* Hide default POI labels */
 .gm-style .gm-style-iw + div {
   display: none !important;
 }
 
 /* Loading animation */
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 
 .animate-spin {
   animation: spin 1s linear infinite;
 }
 
 .prose {
   color: #374151;
 }
 
 .prose h1, .prose h2, .prose h3, .prose h4 {
   color: #111827;
   font-weight: 700;
   margin-top: 2em;
   margin-bottom: 1em;
 }
 
 .prose h1 {
   font-size: 2.25rem;
   line-height: 2.5rem;
 }
 
 .prose h2 {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
 .city-funeral-homes-section h3,
 .city-funeral-homes-section h4,
 .quote-cta h3,
 .prose > article > section:first-child h2:first-child{
    margin-top: 0;
  }
 
 .prose h3 {
   font-size: 1.5rem;
   line-height: 2rem;
 }
 
 .prose p {
   margin-top: 1.25em;
   margin-bottom: 1.25em;
   line-height: 1.75;
 }
 
 .prose ul {
   list-style-type: disc;
   padding-left: 1.625em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
 }
 
 .prose ol {
   list-style-type: decimal;
   padding-left: 1.625em;
   margin-top: 1.25em;
   margin-bottom: 1.25em;
 }
 
 .prose li {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
 }
 
 .prose a {
   color: #2563eb;
   text-decoration: underline;
   font-weight: 500;
 }
 
 .prose a:hover {
   color: #1d4ed8;
 }
 
 .prose strong {
   font-weight: 700;
 }
 
 .prose blockquote {
   font-weight: 500;
   font-style: italic;
   color: #6b7280;
   border-left-width: 0.25rem;
   border-left-color: #e5e7eb;
   quotes: "\201C""\201D""\2018""\2019";
   margin-top: 1.6em;
   margin-bottom: 1.6em;
   padding-left: 1em;
 }
 
 .city-funeral-homes-section a.text-white,
 .prose .quote-cta a{
   color: #fff;
   text-decoration: none;
 }