/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Alata&family=Poppins:wght@100;200;300;500;600;700;900&family=Roboto+Slab:wght@100;300;400;600;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20,400,0..1,200');

/* Custom CSS for public pages - extends Tailwind CSS */
/* All theme variables (colors, fonts) are defined in app/assets/tailwind/application.css */

/* Custom component classes use Tailwind CSS variables directly */
.btn-primary {
  padding: 0.75rem 1.5rem;
  background-color: var(--color-primary);
  color: white;
  font-weight: 600;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
}

.btn-secondary {
  padding: 0.75rem 1.5rem;
  background-color: white;
  color: var(--color-primary);
  font-weight: 600;
  border-radius: 0.5rem;
  border: 2px solid var(--color-primary);
  transition: background-color 0.2s;
}

.btn-secondary:hover {
  background-color: #f9fafb;
}

.btn-cta {
    padding: 0.75rem 1.5rem;
    background-color: var(--color-primary);
    color: black;
    font-weight: 600;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    border: 2px solid var(--color-primary-dark);
}

.btn-cta:hover {
    background-color: var(--color-primary-dark);
}


.section-heading {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--color-gray-900);
  margin-bottom: 1rem;
  font-family: var(--font-family-heading);
}

@media (min-width: 768px) {
  .section-heading {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .section-heading {
    font-size: 3.75rem;
  }
}

.section-subheading {
  font-size: 1.25rem;
  color: var(--color-gray-600);
  margin-bottom: 2rem;
  font-family: var(--font-family-body);
}

@media (min-width: 768px) {
  .section-subheading {
    font-size: 1.5rem;
  }
}

.card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}

.card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Utility classes */
.complementary-blue {
  color: var(--color-complementary-blue);
}

.bg-complementary-blue {
  background-color: var(--color-complementary-blue);
}

.bg-complementary-blue-dark {
  background-color: var(--color-complementary-blue-dark);
}

.complementary-green {
  color: var(--color-complementary-green);
}

.bg-complementary-green {
  background-color: var(--color-complementary-green);
}

/* Legacy aliases for backwards compatibility */
.trust-blue {
  color: var(--color-complementary-blue);
}

.bg-trust-blue {
  background-color: var(--color-complementary-blue);
}

.bg-trust-blue-dark {
  background-color: var(--color-complementary-blue-dark);
}

.health-green {
  color: var(--color-complementary-green);
}

.bg-health-green {
  background-color: var(--color-complementary-green);
}

/* Global styles for public pages */
body.public {
  font-family: var(--font-family-body);
  color: var(--color-gray-900);
  background-color: white;
  line-height: 1.6;
}

body.public h1,
body.public h2,
body.public h3,
body.public h4 {
  font-family: var(--font-family-heading);
  font-weight: 700;
}

body.public p {
  font-family: var(--font-family-paragraph);
}

/* Material Symbols Sharp icons */
.material-symbols {
  font-family: 'Material Symbols Sharp';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* =================================================================
   HERO SECTION & SCROLL ANIMATIONS
   ================================================================= */

/* Hero section with gradient bubbles background */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 600px;
}

/* Gradient bubble decorations (Planfy style) */
.gradient-bubble {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

.gradient-bubble-1 {
  top: -10%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-complementary-blue) 100%);
}

.gradient-bubble-2 {
  bottom: -15%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, var(--color-complementary-blue) 0%, var(--color-complementary-green) 100%);
}

.gradient-bubble-3 {
  bottom: 10%;
  right: 15%;
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, var(--color-complementary-green) 0%, var(--color-primary-light) 100%);
}

/* =================================================================
   KEYFRAME ANIMATIONS
   ================================================================= */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRightLong {
  from {
    opacity: 0;
    transform: translateX(120px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* =================================================================
   SCROLL REVEAL ANIMATIONS
   ================================================================= */

/* Initial hidden state for elements that will be revealed on scroll */
.scroll-reveal {
  opacity: 0;
  transition: none;
}

/* When element becomes visible, trigger animation */
.scroll-reveal.revealed {
  opacity: 1;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation variants */
.scroll-reveal.fade-up.revealed {
  animation-name: fadeInUp;
}

.scroll-reveal.fade-left.revealed {
  animation-name: fadeInLeft;
}

.scroll-reveal.fade-right.revealed {
  animation-name: fadeInRight;
}

.scroll-reveal.fade-right-long.revealed {
  animation-name: fadeInRightLong;
}

.scroll-reveal.scale-in.revealed {
  animation-name: scaleIn;
}

/* Staggered animation delays */
.scroll-reveal.delay-100 { animation-delay: 0.1s; }
.scroll-reveal.delay-200 { animation-delay: 0.2s; }
.scroll-reveal.delay-300 { animation-delay: 0.3s; }
.scroll-reveal.delay-400 { animation-delay: 0.4s; }
.scroll-reveal.delay-600 { animation-delay: 0.6s; }
.scroll-reveal.delay-800 { animation-delay: 0.8s; }
.scroll-reveal.delay-1000 { animation-delay: 1.0s; }
.scroll-reveal.delay-1200 { animation-delay: 1.2s; }
.scroll-reveal.delay-1400 { animation-delay: 1.4s; }
.scroll-reveal.delay-1600 { animation-delay: 1.6s; }
.scroll-reveal.delay-1800 { animation-delay: 1.8s; }

/* =================================================================
   HERO SPECIFIC ANIMATIONS
   ================================================================= */

/* Hero loads immediately (no scroll required) */
.hero-animate {
  opacity: 0;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-animate.fade-up {
  animation-name: fadeInUp;
}

.hero-animate.fade-left {
  animation-name: fadeInLeft;
}

.hero-animate.scale-in {
  animation-name: scaleIn;
}

/* =================================================================
   HOVER EFFECTS
   ================================================================= */

/* Enhanced button hover effects */
.btn-primary {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px -5px rgba(81, 218, 207, 0.4);
}

.btn-secondary:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px -2px rgba(81, 161, 218, 0.3);
}

/* Card hover effects */
.card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* =================================================================
   TESTIMONIAL CAROUSEL ANIMATIONS
   ================================================================= */

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.slide-in-right {
  animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =================================================================
   ACCESSIBILITY: Respect prefers-reduced-motion
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .hero-animate,
  .btn-primary,
  .btn-secondary,
  .card {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .gradient-bubble {
    animation: none !important;
  }

  .slide-in-right,
  .slide-out-left {
    animation: none !important;
  }
}

/* =================================================================
   BACK TO TOP BUTTON
   ================================================================= */

.back-to-top-button {
  position: fixed;
  right: 2vw;
  bottom: 2vw;
  width: 5vw;
  height: 5vw;
  background-color: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25vw 0.5vw rgba(0, 0, 0, 0.3);
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transform: translateY(2vw);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top-button.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top-button:hover {
  background-color: var(--color-primary-dark);
}

.back-to-top-button svg {
  width: 3vw;
  height: 3vw;
}

@media (max-width: 768px) {
  .back-to-top-button {
    width: 10vw;
    height: 10vw;
    right: 4vw;
    bottom: 4vw;
  }

  .back-to-top-button svg {
    width: 5vw;
    height: 5vw;
  }
}

/* =================================================================
   PROSE - LEGAL DOCUMENT TYPOGRAPHY
   ================================================================= */

/* Professional typography for legal documents (privacy, terms, etc.) */
.prose {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 300;
  line-height: 1.9;
  letter-spacing: 0.015em;
  color: #374151;
}

/* Headings in prose */
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-weight: 600;
  line-height: 1.4;
  margin-top: 2em;
  margin-bottom: 1em;
  color: #111827;
}

.prose h4 {
  font-size: 1.125rem;
  margin-top: 1.5em;
  margin-bottom: 0.75em;
}

/* Paragraphs */
.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

/* Strong text */
.prose strong {
  font-weight: 600;
  color: #111827;
}

/* Links */
.prose a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s;
}

.prose a:hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}

/* Ordered lists */
.prose ol {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.75em;
}

.prose ol > li {
  padding-left: 0.5em;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Nested ordered lists */
.prose ol ol {
  list-style-type: lower-alpha;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose ol ol ol {
  list-style-type: lower-roman;
}

.prose ol ol ol ol {
  list-style-type: decimal;
}

/* Unordered lists */
.prose ul {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.75em;
}

.prose ul > li {
  padding-left: 0.5em;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Nested unordered lists */
.prose ul ul {
  list-style-type: circle;
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

.prose ul ul ul {
  list-style-type: square;
}

/* Mix nested lists (ul in ol, ol in ul) */
.prose ol ul,
.prose ul ol {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* List item spacing */
.prose li > p {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}

/* Code blocks in prose */
.prose code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.875em;
  background-color: #f3f4f6;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-weight: 400;
}