/*
 * 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 organising styles into separate files for maintainability.
 */

/* Smooth scroll behavior for anchor links (honors reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* iOS-native Swipe Actions */
[data-controller~="swipe"] {
  touch-action: pan-y; /* Allow vertical scrolling but handle horizontal swipes */
  user-select: none; /* Prevent text selection during swipe */
  -webkit-user-select: none;
}

[data-swipe-target="content"] {
  will-change: transform; /* Optimize for smooth animations */
  backface-visibility: hidden; /* Prevent flickering on iOS */
  -webkit-backface-visibility: hidden;
}

[data-swipe-target="actions"] {
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Swipe state classes */
.swipe-open [data-swipe-target="content"] {
  /* Content is swiped left when actions are revealed */
}

.swipe-open [data-swipe-target="actions"] {
  opacity: 1 !important;
}


/* Smooth momentum scrolling for iOS */
@supports (-webkit-overflow-scrolling: touch) {
  [data-controller~="swipe"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* Turbo Progress Bar - Hidden for cleaner iOS native experience */
.turbo-progress-bar {
  visibility: hidden;
}

/* Hide bridged web elements when native bridge is available */
/* When Hotwire Native bridge is present, these elements are replaced by native UI */
[data-bridge-components~="subscription"][data-controller~="native-subscription"] {
  display: none;
}

/* Hide web add button when the native bridge component is active */
html[data-bridge-components~="add-button"] [data-controller~="add-button"] {
  display: none !important;
}

/* Adjust page layout for native app - remove floating button padding */
html[data-bridge-platform] main.pt-20 {
  padding-top: calc(var(--native-top-chrome, 0px) + 1rem) !important;
}

/* Hide page header title in native app (shown in navbar instead) */
html[data-bridge-platform] [data-page-header-title] {
  display: none !important;
}

/* Date input calendar icon positioning */
input[type="date"] {
  position: relative;
}

/* Position calendar icon on far right for WebKit browsers */
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 0.75rem; /* Match px-3 padding */
  cursor: pointer;
}

/* --- CSP-safe helpers --- */

/* Clip-path shapes for marketing blobs (replaces inline styles) */
.clip-blob-default {
  clip-path: polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%);
}

.clip-blob-hex {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.clip-blob-cta {
  clip-path: polygon(20% 10%, 35% 5%, 50% 15%, 65% 8%, 80% 18%, 88% 35%, 92% 52%, 85% 68%, 78% 82%, 65% 90%, 50% 95%, 35% 88%, 20% 92%, 12% 78%, 8% 60%, 5% 42%, 10% 25%);
}

.clip-blob-contact {
  clip-path: polygon(74.1% 56.1%, 100% 38.6%, 97.5% 73.3%, 85.5% 100%, 80.7% 98.2%, 72.5% 67.7%, 60.2% 37.8%, 52.4% 32.2%, 47.5% 41.9%, 45.2% 65.8%, 27.5% 23.5%, 0.1% 35.4%, 17.9% 0.1%, 27.6% 23.5%, 76.1% 2.6%, 74.1% 56.1%);
}

.clip-blob-terms {
  clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%);
}

/* Body scroll lock helper for modals/menus */
body.body-locked {
  overflow: hidden;
}

/* Shared native checkbox styling with explicit white check mark */
.app-checkbox {
  -webkit-appearance: none;
  appearance: none;
  background-origin: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 75% 75%;
}

.app-checkbox:checked {
  background-color: var(--color-sky-500);
  border-color: var(--color-sky-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.5 4.5 6.5 10.5 3.5 7.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.app-checkbox:focus-visible {
  outline: 2px solid var(--color-sky-500);
  outline-offset: 2px;
}

@media (hover: hover) {
  .app-checkbox:hover:checked {
    background-color: var(--color-sky-600);
    border-color: var(--color-sky-600);
  }
}

@media (prefers-color-scheme: dark) {
  .app-checkbox:checked {
    background-color: var(--color-sky-400);
    border-color: var(--color-sky-400);
  }

  .app-checkbox:focus-visible {
    outline-color: var(--color-sky-400);
  }
}

@media (prefers-color-scheme: dark) and (hover: hover) {
  .app-checkbox:hover:checked {
    background-color: var(--color-sky-500);
    border-color: var(--color-sky-500);
  }
}

/* Fade-out animation for auto-dismiss elements */
.fade-out {
  transition: opacity 300ms ease-out;
  opacity: 0;
}