/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps.
 *
 * IMPORTANT:
 * - Don't @import other CSS files here (it causes runtime /assets/*.css requests -> 404).
 * - Load extra css files via stylesheet_link_tag in the layout instead.
 */

/* ==========================================================================
   Strabo Design Tokens
   Used via var(--token) in inline styles and partials.
   ========================================================================== */
:root {
  --ink:       #1a1814;   /* warm near-black: body text, headings */
  --parchment: #f5f0e8;   /* warm off-white: section backgrounds, hero */
  --cream:     #faf8f3;   /* lightest warm white: page base */
  --moss:      #2d4a3e;   /* deep green: CTAs, Plus, authority */
  --gold:      #b8860b;   /* warm gold: progress, completion, pull-quote accent */
  --rust:      #8b3a2a;   /* muted red: tension relationships */
  --steel:     #4a5568;   /* blue-grey: secondary text, metadata */
  --mist:      #e8e4dc;   /* warm light grey: borders, backgrounds */
}

/* ==========================================================================
   CRITICAL: Fallback styles in case Tailwind CDN fails to load
   These ensure the page is readable even without Tailwind
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

html, body {
  background-color: #fdfbf7;  /* matches Tailwind's bg-background */
  color: #111827;             /* matches Tailwind's text-foreground */
}

/* Prevent horizontal overflow on mobile (e.g. from wide content or SVGs) */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
  }
}

/* ==========================================================================
   Reusable UI: Pills & Step Badges
   Consistent shape, padding, and typography for labels, chips, and tags.

   Sizing & color defaults live in :where() (specificity 0) so any Tailwind
   utility class can override them.  Variant modifiers (.pill--active, etc.)
   use doubled specificity (.pill.pill--active) to stay authoritative.
   ========================================================================== */

/* Pill — structural base (normal specificity, always applied) */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 9999px;
  border-style: solid;
  border-width: 1px;
  line-height: 1;
}

/* Pill — default sizing & colors (zero specificity → Tailwind utilities win) */
:where(.pill) {
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;         /* py-1 px-3 */
  font-size: 0.875rem;              /* text-sm   */
  font-weight: 500;                 /* font-medium */
  border-color: #e5e7eb;            /* border    */
  background-color: #ffffff;        /* card      */
  color: #374151;                   /* slate-700 */
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Pill — active (Strabo accent green) */
.pill.pill--active {
  border-color: #166534;
  background-color: #166534;
  color: #f9fafb;
}

/* Pill — muted */
.pill.pill--muted {
  border-color: #e5e7eb;
  background-color: #f9fafb;
  color: #6b7280;
}

/* Step badge — structural base */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-style: solid;
  border-width: 1px;
  line-height: 1;
  flex-shrink: 0;
}

/* Step badge — default sizing (zero specificity) */
:where(.step-badge) {
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-color: transparent;
}

/* Step badge — active (Strabo accent green) */
.step-badge.step-badge--active {
  border-color: #166534;
  background-color: #166534;
  color: #f9fafb;
}

/* Step badge — neutral (outlined) */
.step-badge.step-badge--neutral {
  border-color: #d1d5db;
  background-color: #ffffff;
  color: #6b7280;
}

/* Animations */
@keyframes slow-tilt {
  0% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}
.animate-tilt {
  animation: slow-tilt 6s ease-in-out infinite;
  transform-origin: 50% 50%;
}

/* Slightly smoother hover transitions for linked era elements */
.timeline-era-pill,
.timeline-era-lane,
.timeline-era-card {
  transition: opacity 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.timeline-era-pill:hover {
  transform: translateY(-1px);
  max-width: 260px;
}

/* Era background wrapper ensures correct stacking */
.era-bg-wrap {
  position: relative;
}

/* Era background image layer */
.era-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.35;              /* increased slightly */
  filter: saturate(0.9) contrast(1.05);
}

/* Ensure page content sits above the background */
.era-page {
  position: relative;
  z-index: 1;
}

/* Era pages: keep content surfaces opaque so background image never shows through */
.era-page .bg-card {
  background-color: rgba(255, 255, 255, 0.96);
}

.era-page .bg-background {
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.era-page [class*="bg-background/40"],
.era-page [class*="bg-background/50"] {
  background-color: rgba(255, 255, 255, 0.88);
}

.era-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.25) 100%
  );
}

/* ==========================================================================
   Journey bar height token
   Used by the FAB (#ai-chat-widget) and mobile spacer calculations so the
   sticky bar never overlaps content or floating buttons.
   48px = py-2 (8px) + button-py-2 (8px) + text-xs (16px) + py-2 (8px).
   Desktop value is not used (FAB uses Tailwind's bottom-20 on sm+).
   ========================================================================== */
:root {
  --continue-bar-h: 48px;
}

/* ==========================================================================
   MOBILE UX UPGRADES — strictly mobile-only (max-width: 639px)
   Tested pages: /countries/:id (hero, journey bar, FAB), /explore (atlas)
   Desktop/tablet layout is UNCHANGED by every rule in this block.
   ========================================================================== */

/* ── A. Journey bar: FAB clearance ──
   Raise the Ask Strabo bubble above the fixed journey bar on mobile.
   Uses the CSS custom property + iOS safe-area inset so the bubble
   never overlaps the bar on notched/home-bar iPhones.
   The Tailwind `bottom-20` class is overridden here for mobile only;
   the ID selector (#id specificity = 1,0,0) beats the Tailwind class (0,1,0). */
@media (max-width: 639px) {
  #ai-chat-widget {
    bottom: calc(var(--continue-bar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  /* Constrain the expanded panel so it never overflows the viewport on small screens. */
  #ai-chat-widget [data-ai-chat-widget-target="panel"] {
    max-height: 55vh;
  }
}

/* ── B. Timeline scroll-fade hint ──
   The fade is applied to a NON-SCROLLING wrapper (.timeline-scroll-wrapper)
   that sits OUTSIDE the overflow-x-auto card. This avoids the iOS bug where
   adding position:relative to an overflow:auto element breaks touch-scroll.
   The wrapper's ::after floats above the scrollable card's visible area. */
@media (max-width: 639px) {
  .timeline-scroll-wrapper {
    position: relative;
  }
  .timeline-scroll-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.90));
    pointer-events: none;
    z-index: 5;
    border-radius: 0 1rem 1rem 0;
  }
}

/* ── B2. Mobile touch-scroll fix ──
   iOS Safari can prevent horizontal touch-scroll on overflow:auto children
   when the body has overflow-x:hidden. Adding touch-action:pan-x explicitly
   tells the browser that this element owns horizontal panning gestures. */
@media (max-width: 639px) {
  .mobile-scroll-x {
    touch-action: pan-x;
  }
}

/* ── C. Country hero pull-quote ──
   Tighten the italic pull-quote on narrow viewports so it doesn't
   run too long or crowd the stats below it. */
@media (max-width: 639px) {
  .hero-pull-quote {
    font-size: 0.85rem;
    line-height: 1.6;
  }
}

/* ── D. Anchor scroll offset ──
   Prevent section headings from being hidden behind the sticky nav bar
   when a user taps an in-page anchor link. Only relevant on mobile
   where the fixed journey bar is tallest. */
@media (max-width: 639px) {
  [id]:target {
    scroll-margin-top: 16px;
    scroll-margin-bottom: calc(var(--continue-bar-h) + env(safe-area-inset-bottom, 0px) + 8px);
  }
}

/* ==========================================================================
   MOBILE-ONLY: iOS Safari fixes & mobile UX improvements
   Scoped to max-width: 639px to match Tailwind's sm: breakpoint boundary.
   Nothing below affects screens >= 640px (tablet/desktop).
   ========================================================================== */

/* --- iOS 100vh fix ---
   On iOS Safari, 100vh includes the URL bar area. Use 100dvh where supported,
   with a -webkit-fill-available fallback for older iOS. */
@supports (-webkit-touch-callout: none) {
  body.mobile-vh-fix {
    min-height: -webkit-fill-available;
  }
}
@supports (min-height: 100dvh) {
  body.mobile-vh-fix {
    min-height: 100dvh;
  }
}

/* --- Safe-area inset handling ---
   Padding for notch / Dynamic Island / home indicator.
   Only applies when viewport-fit=cover is set (which we now do). */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 639px) {
    .safe-header {
      padding-top: env(safe-area-inset-top);
    }
    .safe-bottom {
      padding-bottom: env(safe-area-inset-bottom);
    }
    .safe-sides {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

/* Safe-area utilities that work on all screen sizes (for sticky footers/CTAs) */
@supports (padding: env(safe-area-inset-bottom)) {
  .pb-safe {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
  .pt-safe {
    padding-top: max(0px, env(safe-area-inset-top));
  }
  .mb-safe {
    margin-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Prevent iOS input zoom ---
   iOS Safari zooms the page when a focused input has font-size < 16px.
   Force 16px on mobile inputs/selects/textareas, then reset at sm:. */
@media (max-width: 639px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* --- Horizontal scroll fade hint ---
   Subtle gradient overlay on right edge to signal scrollable content. */
@media (max-width: 639px) {
  .scroll-hint-wrapper {
    position: relative;
  }
  .scroll-hint-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, rgba(253, 251, 247, 0.9));
    pointer-events: none;
    z-index: 5;
    border-radius: 0 1rem 1rem 0;
  }
}

/* --- Momentum scrolling for horizontal scroll areas --- */
@media (max-width: 639px) {
  .mobile-scroll-x {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  .mobile-scroll-x::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
}

/* --- Scrollbar hide utility (works on all screen sizes) --- */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;             /* Chrome, Safari and Opera */
}

/* --- Line clamping for consistent card heights --- */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   Blog prose: clean, readable typography for long-form blog content.
   Designed for comfortable reading at ~720px max width.
   ========================================================================== */
.blog-prose {
  font-size: 1.125rem;         /* 18px */
  line-height: 1.75;           /* ~31.5px */
  color: #1f2937;              /* gray-800 */
}

.blog-prose p {
  margin-bottom: 1.5em;
}

.blog-prose h2 {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  color: #111827;
  line-height: 1.3;
}

.blog-prose h3 {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2em;
  margin-bottom: 0.5em;
  color: #111827;
  line-height: 1.4;
}

.blog-prose a {
  color: #166534;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 150ms ease;
}

.blog-prose a:hover {
  color: #14532d;
}

.blog-prose strong {
  font-weight: 600;
  color: #111827;
}

.blog-prose em {
  font-style: italic;
}

.blog-prose blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1.25em;
  margin: 1.5em 0;
  color: #4b5563;
  font-style: italic;
}

.blog-prose ul, .blog-prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.blog-prose ul {
  list-style-type: disc;
}

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

.blog-prose li {
  margin-bottom: 0.5em;
}

.blog-prose code {
  font-size: 0.875em;
  background-color: #f3f4f6;
  border-radius: 0.25rem;
  padding: 0.125em 0.375em;
  color: #1f2937;
}

.blog-prose pre {
  background-color: #1f2937;
  color: #e5e7eb;
  border-radius: 0.5rem;
  padding: 1.25em;
  overflow-x: auto;
  margin-bottom: 1.5em;
  font-size: 0.875rem;
  line-height: 1.6;
}

.blog-prose pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.blog-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1.5em 0;
}

.blog-prose hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 2.5em 0;
}

/* Blog hero video: fade in on load */
.blog-video-hero {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.blog-video-hero.is-loaded {
  opacity: 1;
}

/* ==========================================================================
   Book card: subtle lift on hover to signal interactivity
   ========================================================================== */
.book-card {
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.11);
}

/* ==========================================================================
   Explore page: region highlight / mute states
   Applied dynamically via Stimulus when an era is selected.
   ========================================================================== */
.explore-region--highlighted {
  border-left: 3px solid #166534;
  background-color: rgba(22, 101, 52, 0.03);
  transition: all 200ms ease;
}

.explore-region--muted {
  opacity: 0.55;
  transition: all 200ms ease;
}

.explore-region--muted:hover {
  opacity: 0.85;
}