/* AtLost Brand Styles - Wild & Free */

/* ==========================================================================
   Color Palette
   ========================================================================== */

:root {
  /* Primary Colors */
  --color-coral: #EA5739;
  --color-coral-light: #FDE8E3;
  --color-coral-medium-light: #F9BFB3;
  --color-coral-medium-dark: #D94827;
  --color-coral-dark: #C73E25;
  --color-coral-hover: #F26749;

  --color-blue: #1E49A9;
  --color-blue-light: #E6EEF9;
  --color-blue-medium-light: #A3BFE8;
  --color-blue-medium-dark: #163A8A;
  --color-blue-dark: #0F2B6B;
  --color-blue-hover: #2B5BBD;

  --color-beige: #E8E0D5;
  --color-beige-light: #FCFAF7;
  --color-beige-medium-light: #F4EFE7;
  --color-beige-medium-dark: #DED7CC;
  --color-beige-dark: #D4CEC3;

  /* Magic Purple - for trusted connections */
  --color-magic-purple: #8B5CF6;
  --color-magic-purple-light: #F3EEFF;
  --color-magic-purple-medium: #C4B5FD;
  --color-magic-purple-dark: #7C3AED;

  /* Saturated Earth Palette - Accent Colors */
  --color-gold: #D4A017;
  --color-gold-light: rgba(212,160,23,0.15);
  --color-gold-glow: rgba(212,160,23,0.4);

  --color-sage: #5A9B4A;
  --color-sage-light: rgba(90,155,74,0.15);
  --color-sage-dark: #4A8A3A;

  --color-sunset: #E8692D;

  --color-rose: #D4847A;
  --color-rose-light: rgba(212,132,122,0.15);

  --color-saddle: #6B4423;
  --color-dust: #D4C4B0;

  --color-electric: #FFE135;
  --color-electric-glow: rgba(255,225,53,0.5);

  /* Neutral Colors */
  --color-text-primary: #262626;
  --color-text-secondary: #525252;
  --color-text-tertiary: #6B4423;

  /* Semantic Aliases */
  --color-success: var(--color-sage);
  --color-upcoming: var(--color-sunset);
  --color-achievement: var(--color-gold);
  --color-reflection: var(--color-rose);
  --color-error: var(--color-coral-dark);
  --color-disabled: var(--color-dust);

  /* Font Families */
  --font-heading: 'Fraunces', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-handwritten: 'Kavivanar', cursive;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
  font-family: var(--font-body);
  color: var(--color-text-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.heading {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--color-blue);
}

h1, .heading-1 {
  font-size: 2.25rem; /* 36px */
  line-height: 1.2;
}

h2, .heading-2 {
  font-size: 1.875rem; /* 30px */
  line-height: 1.3;
}

h3, .heading-3 {
  font-size: 1.5rem; /* 24px */
  line-height: 1.4;
}

h4, .heading-4 {
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
}

/* Handwritten / Accent Text */
.handwritten,
.accent-text {
  font-family: var(--font-handwritten);
  font-style: italic;
  transform: rotate(-1deg);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Base Button */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border: none;
}

/* Primary Button (Coral) */
.btn-primary {
  background-color: var(--color-coral);
  color: white;
  box-shadow: 0 4px 0 0 var(--color-coral-medium-dark);
}

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

.btn-primary:active {
  box-shadow: 0 2px 0 0 var(--color-coral-medium-dark);
  transform: translateY(2px);
}

/* Secondary Button (Blue) */
.btn-secondary {
  background-color: var(--color-blue);
  color: white;
  box-shadow: 0 4px 0 0 var(--color-blue-medium-dark);
}

.btn-secondary:hover {
  background-color: var(--color-blue-hover);
}

.btn-secondary:active {
  box-shadow: 0 2px 0 0 var(--color-blue-medium-dark);
  transform: translateY(2px);
}

/* Tertiary Button (Light Blue) */
.btn-tertiary {
  background-color: var(--color-blue-medium-light);
  color: var(--color-blue);
  box-shadow: 0 4px 0 0 #8AAFE0;
}

.btn-tertiary:hover {
  background-color: #B5CDEC;
}

.btn-tertiary:active {
  box-shadow: 0 2px 0 0 #8AAFE0;
  transform: translateY(2px);
}

/* Button Sizes */
.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1.125rem;
}

/* Rounded Buttons */
.btn-rounded {
  border-radius: 9999px;
}

/* ==========================================================================
   Text Links / Text Buttons
   ========================================================================== */

/* Primary Text Link (Coral) */
.link-primary,
.btn-text-primary {
  color: var(--color-coral);
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.link-primary:hover,
.btn-text-primary:hover {
  color: var(--color-coral-medium-dark);
  text-decoration: underline;
}

.link-primary:active,
.btn-text-primary:active {
  transform: translateY(1px);
}

/* Secondary Text Link (Blue) */
.link-secondary,
.btn-text-secondary {
  color: var(--color-blue);
  font-weight: 400;
  transition: all 0.2s ease;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
}

.btn-text-secondary {
  padding: 0.5rem 1rem;
}

.link-secondary:hover,
.btn-text-secondary:hover {
  color: var(--color-blue-medium-dark);
  text-decoration: underline;
}

.link-secondary:active,
.btn-text-secondary:active {
  transform: translateY(1px);
}

/* Tertiary Text Link (Light Blue) */
.link-tertiary,
.btn-text-tertiary {
  color: var(--color-blue-medium-light);
  font-weight: 500;
  transition: all 0.2s ease;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.link-tertiary:hover,
.btn-text-tertiary:hover {
  color: #8AAFE0;
  text-decoration: underline;
}

.link-tertiary:active,
.btn-text-tertiary:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Background Colors
   ========================================================================== */

.bg-primary {
  background-color: var(--color-beige-medium-light);
}

.bg-secondary {
  background-color: white;
}

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

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

/* ==========================================================================
   Cards & Containers
   ========================================================================== */

.card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

/* ==========================================================================
   Badges & Pills
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}

.badge-coral {
  background-color: var(--color-coral);
  color: white;
}

.badge-blue {
  background-color: var(--color-blue);
  color: white;
}

.badge-coral-light {
  background-color: rgba(234, 87, 57, 0.2);
  color: var(--color-text-primary);
}

.badge-blue-light {
  background-color: rgba(30, 73, 169, 0.2);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Price brackets ($–$$$$$)
   ========================================================================== */

.price-bracket {
  display: inline-flex;
  align-items: center;
  gap: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  background-color: var(--color-beige-medium-light);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  cursor: help;
}

.price-bracket__on {
  color: var(--color-coral);
}

.price-bracket__off {
  color: rgba(38, 38, 38, 0.22);
}

.price-bracket--tbd {
  background-color: var(--color-beige);
  color: var(--color-text-secondary);
  font-weight: 600;
}

/* Toggle pills for the discovery price filter */
.price-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  border: 1px solid var(--color-beige-dark);
  background-color: white;
  color: var(--color-text-secondary);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.price-pill:hover {
  border-color: var(--color-coral);
  color: var(--color-coral);
}

.price-pill--on,
.price-pill--on:hover {
  background-color: var(--color-coral);
  border-color: var(--color-coral);
  color: white;
}

/* Hover explainer bubble for price brackets (see price_tooltip_controller) */
.price-tooltip-bubble {
  position: fixed;
  z-index: 9999;
  transform: translateX(-50%);
  max-width: 260px;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background-color: var(--color-text-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.price-tooltip-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-text-primary);
}

.price-tooltip-bubble--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--color-text-primary);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.text-coral {
  color: var(--color-coral);
}

.text-blue {
  color: var(--color-blue);
}

.text-secondary {
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Avatar / Profile Images
   ========================================================================== */

.avatar {
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background-color: var(--color-coral);
  color: white;
}

.avatar-sm {
  width: 2rem;
  height: 2rem;
  font-size: 0.875rem;
}

.avatar-md {
  width: 3rem;
  height: 3rem;
  font-size: 1.25rem;
}

.avatar-lg {
  width: 5rem;
  height: 5rem;
  font-size: 2rem;
}

/* ==========================================================================
   Trusted Connections - Magical Purple Styling
   ========================================================================== */

.trusted-connections-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: linear-gradient(135deg, var(--color-magic-purple-light) 0%, #EDE9FE 100%);
  border: 1.5px solid var(--color-magic-purple-medium);
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-magic-purple-dark);
  box-shadow: 0 1px 3px 0 rgba(139, 92, 246, 0.1), 0 0 0 1px rgba(139, 92, 246, 0.05);
  transition: all 0.2s ease;
}

.trusted-connections-badge:hover {
  box-shadow: 0 2px 6px 0 rgba(139, 92, 246, 0.15), 0 0 0 1px rgba(139, 92, 246, 0.1);
  transform: translateY(-1px);
}

.trusted-connections-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-magic-purple);
  animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

.card-magic {
  background: linear-gradient(135deg, #FEFCFF 0%, var(--color-magic-purple-light) 100%);
  border-left: 4px solid var(--color-magic-purple);
  box-shadow: 0 4px 6px -1px rgba(139, 92, 246, 0.1), 0 2px 4px -1px rgba(139, 92, 246, 0.06);
}

/* ==========================================================================
   List Experience Hover Styles
   ========================================================================== */

.list-experience-item {
  transition: background-color 0.2s ease;
}

.list-experience-item:hover {
  background-color: var(--color-beige-medium-light);
}

.list-experience-item:hover .list-experience-title {
  text-decoration: underline;
}

/* ==========================================================================
   Card State Variants
   ========================================================================== */

.card-reflection {
  background-color: var(--color-rose-light);
  border-left: 5px solid var(--color-rose);
}

.card-active {
  background-color: var(--color-coral-light);
  border: 1px solid var(--color-coral);
}

.card-achievement {
  background-color: var(--color-gold-light);
  border: 1px solid var(--color-gold);
  box-shadow: 0 0 12px var(--color-gold-glow);
}

.card-major-achievement {
  background-color: var(--color-text-primary);
  border: 2px solid var(--color-electric);
  box-shadow: 0 0 20px var(--color-electric-glow);
  color: white;
}

/* ==========================================================================
   Ghost Button
   ========================================================================== */

.btn-ghost {
  background-color: transparent;
  color: var(--color-blue);
  border: 2px solid var(--color-blue);
  box-shadow: none;
}

.btn-ghost:hover {
  background-color: var(--color-blue-light);
}

.btn-ghost:active {
  transform: translateY(1px);
}

/* ==========================================================================
   Brand Utility Classes
   ========================================================================== */

/* Star colors */
.star-filled {
  color: var(--color-gold);
}

.star-empty {
  color: var(--color-dust);
}

/* Text colors */
.text-success {
  color: var(--color-sage);
}

.text-gold {
  color: var(--color-gold);
}

.text-sunset {
  color: var(--color-sunset);
}

.text-rose-brand {
  color: var(--color-rose);
}

.text-saddle {
  color: var(--color-saddle);
}

.text-tertiary {
  color: var(--color-text-tertiary);
}

/* Review sentiment backgrounds */
.bg-positive-review {
  background-color: var(--color-sage-light);
  color: var(--color-sage-dark);
}

.bg-negative-review {
  background-color: rgba(232,105,45,0.12);
  color: #8B3A0F;
}

.bg-headsup-review {
  background-color: rgba(212, 160, 23, 0.15);
  color: #6B4423;
}

/* Flash message colors */
.flash-success {
  background-color: var(--color-sage);
  color: white;
}

.flash-error {
  background-color: var(--color-coral-dark);
  color: white;
}

/* ==========================================================================
   Serif Text Treatments (Fraunces)
   ========================================================================== */

/* Fraunces italic for emotional/featured text */
.text-serif-emphasis {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
}

/* Fraunces weight 300 for elegant headlines */
.text-serif-light {
  font-family: var(--font-heading);
  font-weight: 300;
}

/* Fraunces weight 400 for big numbers / stats */
.text-serif-bold {
  font-family: var(--font-heading);
  font-weight: 400;
}

/* Uppercase small-caps for eyebrow labels */
.text-eyebrow {
  font-family: var(--font-body);
  font-variant: small-caps;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ==========================================================================
   Achievement Glow Animation
   ========================================================================== */

@keyframes achievement-glow {
  0%, 100% {
    box-shadow: 0 0 8px var(--color-gold-glow);
  }
  50% {
    box-shadow: 0 0 20px var(--color-gold-glow), 0 0 40px rgba(212,160,23,0.2);
  }
}

.achievement-glow {
  animation: achievement-glow 2s ease-in-out infinite;
}