/*
 * 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.
 */


/* Cormorant Garamond for all headings (public pages only) */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', serif;
}

/* Admin pages use Inter */
.admin-body h1, .admin-body h2, .admin-body h3,
.admin-body h4, .admin-body h5, .admin-body h6 {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

/* Import Dropzone CSS */
@import "https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.css";

/* Import FilePond CSS */
@import "https://cdn.jsdelivr.net/npm/filepond@4.31.4/dist/filepond.min.css";
@import "https://cdn.jsdelivr.net/npm/filepond-plugin-image-preview@4.6.12/dist/filepond-plugin-image-preview.min.css";

/* Import our custom dropzone styles */
/* @import "dropzone.css"; */

/* @import "../tailwind/application.css"; */

/* Import custom DaisyUI theme */
/* @import "daisy-theme.css"; */

/* ─── Navbar transparent ↔ scrolled states ─────────────────────────────── */

/* White bottom border on the inner container in transparent state */
nav[data-navbar-transparent-value="true"][data-scrolled="false"] .nav-inner {
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}

/* Logo switching: white logo when transparent, dark logo when scrolled */
.logo-dark { display: none; }
nav[data-scrolled="true"] .logo-white { display: none; }
nav[data-scrolled="true"] .logo-dark  { display: block; }

/* Transparent state (at top): links and icons are white */
nav[data-navbar-transparent-value="true"][data-scrolled="false"] .nav-link,
nav[data-navbar-transparent-value="true"][data-scrolled="false"] .nav-icon {
  color: rgba(255, 255, 255, 0.85);
  transition: color 300ms;
}
nav[data-navbar-transparent-value="true"][data-scrolled="false"] .nav-link:hover,
nav[data-navbar-transparent-value="true"][data-scrolled="false"] .nav-icon:hover {
  color: rgba(255, 255, 255, 1);
}

/* Scrolled state: links and icons turn primary (maroon) */
nav[data-navbar-transparent-value="true"][data-scrolled="true"] .nav-link,
nav[data-navbar-transparent-value="true"][data-scrolled="true"] .nav-icon {
  color: var(--color-primary);
  transition: color 300ms;
}
nav[data-navbar-transparent-value="true"][data-scrolled="true"] .nav-link:hover,
nav[data-navbar-transparent-value="true"][data-scrolled="true"] .nav-icon:hover {
  color: var(--color-primary);
  opacity: 0.75;
}


/* Softer shadow on scrolled navbar */
nav[data-scrolled="true"] {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08) !important;
}

/* Dropdown content always uses base content color, regardless of nav state */
nav .dropdown-content {
  color: var(--color-base-content);
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* ─── Hero search bar focus ─────────────────────────────────────────────────── */

/* Kill the global border/background from input.css — both resting and focused */
.hero-search-input,
.hero-search-input:focus {
  outline: none !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
  line-height: 1.25rem !important; /* match text-sm — prevent focus line-height jump */
}

/* Tint the whole cell when the input inside is focused */
.hero-search-cell:has(input:focus) {
  background-color: #f5f5f4;
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* Turbo Progress Bar */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(to right, #dc2626, #b91c1c);
  z-index: 9999;
}

/* Page Transition Animations */
.turbo-loading {
  opacity: 0.6;
  transition: opacity 150ms ease-out;
}

.turbo-loaded {
  animation: turbo-fade-in 200ms ease-in forwards;
}

@keyframes turbo-fade-in {
  from {
    opacity: 0.8;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}