/**
 * FORGE Common CSS
 * Shared styles for TRNT Travel tools
 *
 * @version 1.0.0
 * CDN: https://cdn.jsdelivr.net/gh/damon-ui/forge@main/css/forge-common.css
 */

/* ===========================================
   1. CSS Variables
   =========================================== */
:root {
  --trnt-bg: #EBE3DA;
  --trnt-accent: #3D3732;
  --trnt-secondary: #83644D;
  --trnt-secondary2: #AD845B;
  --trnt-border: #90867C;
  --trnt-link: #5EA9D8;

  /* Button palette - Earth tones (approved Nov 28, 2025) */
  --btn-primary: #3D3732;
  --btn-secondary: #AD845B;
  --btn-create: #6B8E6B;
  --btn-danger: #C4756E;
  --btn-special: #8B7093;
}

/* ===========================================
   2. Base Body Styles
   =========================================== */
body {
  background: var(--trnt-bg);
  color: #1f2937;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Sticky toolbar content padding */
body.has-sticky-toolbar {
  padding-bottom: 80px;
}

/* Override for elements that manage their own padding */
body.has-sticky-toolbar #mainContent {
  padding-bottom: 80px;
}

/* ===========================================
   3. Utility Classes
   =========================================== */
.shadow-soft {
  box-shadow: 0 10px 20px rgba(0,0,0,.06), 0 6px 6px rgba(0,0,0,.04);
}

/* ===========================================
   4. Editable Field Styles
   =========================================== */
.editable {
  cursor: pointer;
  padding: 2px 4px;
  margin: -2px -4px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.editable:hover {
  background-color: rgba(59, 130, 246, 0.1);
  outline: 2px solid rgba(59, 130, 246, 0.3);
}

.editable.editing {
  background-color: #fef9c3 !important;
  outline: 2px solid #3b82f6 !important;
}

.editable-input {
  background-color: #fef9c3;
  border: 2px solid #3b82f6;
  border-radius: 4px;
  padding: 4px 8px;
  font: inherit;
  color: inherit;
}

.editable-textarea {
  background-color: #fef9c3;
  border: 2px solid #3b82f6;
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  color: inherit;
  width: 100%;
  min-height: 80px;
  resize: vertical;
}

/* ===========================================
   5. Section Card Styles
   =========================================== */
.section-card {
  background: white;
  border-radius: 12px;
  border: 1px solid var(--trnt-border);
  overflow: hidden;
  margin-bottom: 16px;
}

.section-header {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.section-header:hover {
  background-color: #f9fafb;
}

.section-content {
  padding: 0 24px 24px;
  border-top: 1px solid #e5e7eb;
}

.section-content.collapsed {
  display: none;
}

/* ===========================================
   6. Modal Styles
   =========================================== */
.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}

.modal-backdrop.active {
  display: flex;
}

.modal-content {
  background: white;
  border-radius: 16px;
  max-width: 400px;
  width: 100%;
  padding: 24px;
  max-height: 90vh;
  overflow-y: auto;
}

/* ===========================================
   7. Loading Spinner
   =========================================== */
.loading-spinner {
  border: 3px solid #e5e7eb;
  border-top-color: var(--trnt-accent);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===========================================
   8. List Item Styles
   =========================================== */
.list-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  list-style: none;
}

.list-item-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Parent containers that hold list-items - reset list styles */
#highlightsList,
#inclusionsList,
#exclusionsList,
#importantInfoList {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* ===========================================
   9. Hero Section Styles
   =========================================== */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3), transparent);
}

.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
}

/* ===========================================
   10. Standard Button Styles
   =========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background: var(--btn-primary); color: white; }
.btn-secondary { background: var(--btn-secondary); color: white; }
.btn-create { background: var(--btn-create); color: white; }
.btn-danger { background: var(--btn-danger); color: white; }
.btn-special { background: var(--btn-special); color: white; }
.btn-outline { background: white; border: 1px solid var(--trnt-border); color: var(--trnt-accent); }

/* ===========================================
   11. Print/PDF Base Styles
   =========================================== */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  body { background: white !important; }

  /* Hide Squarespace chrome */
  header, .header, .Header,
  footer, .footer, .Footer,
  .header-announcement-bar-wrapper,
  .site-header, .site-footer,
  [data-section-id].header,
  [data-section-id].footer { display: none !important; }

  /* Hide common tool elements */
  .modal-backdrop, .toast, #toast-container, #forge-toast-container, .forge-banner { display: none !important; }

  /* Hide admin headers and PDF buttons (shared across tools) */
  #adminHeader, .pdf-download-section, .image-overlay { display: none !important; }

  /* Remove Squarespace wrapper padding */
  .content-wrapper, .page-section, .sqs-layout {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Reset mobile full-width hacks (shared pattern) */
  #mainContent, #mainContainer {
    position: static !important;
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .hero-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    border-radius: 0.5rem !important;
  }
}

/* ===== Unsplash Image Search ===== */
.unsplash-search-container { margin-top: 0.5rem; }
.unsplash-search-input { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.unsplash-search-input input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--trnt-border); border-radius: 0.5rem; font-size: 0.875rem; }
.unsplash-search-input button { padding: 0.5rem 1rem; background: var(--trnt-accent); color: white; border: none; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.unsplash-search-input button:hover { opacity: 0.9; }
.unsplash-search-input button:disabled { opacity: 0.6; cursor: not-allowed; }
.unsplash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-height: 280px; overflow-y: auto; padding: 0.25rem; }
.unsplash-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.375rem; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; }
.unsplash-grid img:hover { transform: scale(1.03); border-color: var(--trnt-accent); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.unsplash-loading { text-align: center; padding: 2rem; color: #6b7280; }
.unsplash-loading .spinner { width: 1.5rem; height: 1.5rem; border: 2px solid #e5e7eb; border-top-color: var(--trnt-accent); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 0.5rem; }
.unsplash-credit { font-size: 0.65rem; color: #9ca3af; text-align: center; margin-top: 0.5rem; }
.unsplash-credit a { color: #6b7280; }

/* ===== Form Elements ===== */
.form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--trnt-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.form-input:focus {
  outline: none;
  border-color: var(--trnt-link);
  box-shadow: 0 0 0 3px rgba(94, 169, 216, 0.2);
}

.form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--trnt-secondary);
  margin-bottom: 0.25rem;
}

.form-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--trnt-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: white;
}

/* ===========================================
   12. Sticky Toolbar (TRN-199)
   =========================================== */
.forge-sticky-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid var(--trnt-border);
  box-shadow: 0 -4px 6px rgba(0,0,0,0.07);
  padding: 12px 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Toolbar buttons */
.forge-sticky-toolbar .toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  white-space: nowrap;
}

.forge-sticky-toolbar .toolbar-btn:hover {
  opacity: 0.9;
}

.forge-sticky-toolbar .toolbar-btn:active {
  transform: scale(0.98);
}

.forge-sticky-toolbar .toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Button color variants */
.forge-sticky-toolbar .toolbar-btn-save {
  background: var(--btn-create);
  color: white;
}

.forge-sticky-toolbar .toolbar-btn-secondary {
  background: var(--btn-secondary);
  color: white;
}

.forge-sticky-toolbar .toolbar-btn-primary {
  background: var(--btn-primary);
  color: white;
}

.forge-sticky-toolbar .toolbar-btn-special {
  background: var(--btn-special);
  color: white;
}

.forge-sticky-toolbar .toolbar-btn-danger {
  background: var(--btn-danger);
  color: white;
}

.forge-sticky-toolbar .toolbar-btn-outline {
  background: white;
  border: 1px solid var(--trnt-border);
  color: var(--trnt-accent);
}

.forge-sticky-toolbar .toolbar-btn-outline:hover {
  background: #f9fafb;
}

/* Divider for visual grouping */
.forge-sticky-toolbar .toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--trnt-border);
  margin: 0 4px;
}

/* Status indicator (e.g., "Unsaved changes") */
.forge-sticky-toolbar .toolbar-status {
  font-size: 13px;
  color: var(--trnt-secondary);
  margin-right: 8px;
}

.forge-sticky-toolbar .toolbar-status.has-changes {
  color: #d97706;
  font-weight: 500;
}

/* Hide Back to Admin in embed mode */
body.embed-mode .toolbar-btn-back {
  display: none !important;
}

/* Ensure content doesn't get hidden behind sticky toolbar */
.has-sticky-toolbar {
  padding-bottom: 70px !important;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .forge-sticky-toolbar {
    padding: 10px 12px;
    gap: 6px;
  }

  .forge-sticky-toolbar .toolbar-btn {
    padding: 7px 10px;
    font-size: 12px;
  }

  .forge-sticky-toolbar .toolbar-divider {
    display: none;
  }

  .forge-sticky-toolbar .toolbar-status {
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
  }
}

/* Print: hide sticky toolbar */
@media print {
  .forge-sticky-toolbar {
    display: none !important;
  }

  .has-sticky-toolbar {
    padding-bottom: 0 !important;
  }
}

/* ===========================================
   13. TRN-201: Fix for Tall Iframes (Embed Mode)
   =========================================== */
body.embed-mode {
  position: relative;
}

body.embed-mode .modal-backdrop {
  position: absolute !important;
  height: 100% !important;
  inset: 0 !important;
  align-items: flex-start;
}

/* ===========================================
   14. Loading Overlay Styles (v3.2.23)
   =========================================== */
.forge-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.forge-loading-overlay.hidden {
  display: none;
}