/*
 * taxi.aw — Layer 4 tenant stylesheet
 *
 * Aruba Official Taxi Pricing (government tenant on `government` fork).
 *
 * Design system: Soft Structuralism × Editorial Luxury hybrid.
 * Mobile-first. Cream-tinted surfaces. Heraldic gold accent.
 *
 * Loaded automatically when present at r2/sites/<tenant>/styles.css
 * (Layer 4 — overrides preset Layer 3 + platform Layer 1).
 *
 * Design system version: 0.1 (Phase 2 spike — Task 162)
 * Display font: Fraunces (Google Fonts; production swap to PP Editorial
 *   New possible later if licensed)
 * Body font: Plus Jakarta Sans
 */

/* ─── Fonts ──────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,30..100&family=Plus+Jakarta+Sans:wght@300..800&display=swap');

/* ─── Custom design tokens (CSS variables) ──────────────────────────── */

:root {
  /* Typography */
  --font-display: 'Fraunces', 'Crimson Pro', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-numeric: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Type scale (mobile-first; desktop overrides via @media below) */
  --type-eyebrow: 11px;
  --type-caption: 13px;
  --type-body: 16px;
  --type-body-lg: 18px;
  --type-h3: 22px;
  --type-h2: 32px;
  --type-h1: 44px;
  --type-price: 56px;

  /* Tracking */
  --track-eyebrow: 0.2em;
  --track-tight: -0.01em;
  --track-tighter: -0.02em;
  --track-tightest: -0.03em;
  --track-numeric: -0.04em;

  /* Easing — haptic, no linear or ease-in-out anywhere */
  --ease-haptic: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Diffused, theme-aware shadows (never harsh black) */
  --shadow-card-soft: 0 24px 48px -12px rgba(30, 58, 95, 0.10);
  --shadow-card-rest: 0 8px 24px -6px rgba(30, 58, 95, 0.08);
  --shadow-inset-light: inset 0 1px 1px rgba(255, 255, 255, 0.5);

  /* Bezel radii (concentric — outer minus inner padding) */
  --radius-bezel-outer: 2rem;       /* 32px */
  --radius-bezel-pad: 0.5rem;       /* 8px (the gap between outer and inner) */
  --radius-bezel-inner: 1.5rem;     /* outer - pad */

  /* Noise overlay tuning */
  --noise-opacity: 0.025;
  --noise-blend: multiply;
}

@media (min-width: 768px) {
  :root {
    --type-h3: 28px;
    --type-h2: 44px;
    --type-h1: 72px;
    --type-price: 88px;
  }
}

/* Dark mode adjustments */
[data-theme='dark'] {
  --shadow-card-soft: 0 24px 48px -12px rgba(0, 0, 0, 0.4);
  --shadow-card-rest: 0 8px 24px -6px rgba(0, 0, 0, 0.3);
  --shadow-inset-light: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  --noise-opacity: 0.03;
  --noise-blend: screen;
}

/* ─── Body baseline ──────────────────────────────────────────────────── */

body {
  font-family: var(--font-body);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Plus Jakarta variants */
  font-size: var(--type-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--color-base-content);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Tactile noise overlay (fixed, pointer-events: none) ──────────── */
/* SVG fractal noise — ~600 bytes inlined as URL-encoded data URI */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: var(--noise-opacity);
  mix-blend-mode: var(--noise-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* ─── Display typography utilities ───────────────────────────────────── */

.tx-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--type-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--color-neutral);
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.tx-display-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h1);
  line-height: 1.05;
  letter-spacing: var(--track-tightest);
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
  color: var(--color-base-content);
}

.tx-display-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h2);
  line-height: 1.1;
  letter-spacing: var(--track-tighter);
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  color: var(--color-base-content);
}

.tx-display-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  color: var(--color-base-content);
}

.tx-price-display {
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: var(--type-price);
  line-height: 1;
  letter-spacing: var(--track-numeric);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
}

[data-theme='dark'] .tx-price-display {
  color: var(--color-accent);
}

.tx-caption {
  font-size: var(--type-caption);
  color: var(--color-neutral);
  letter-spacing: 0;
}

.tx-body-lg {
  font-size: var(--type-body-lg);
  line-height: 1.5;
}

/* ─── Double-bezel card (haptic depth) ───────────────────────────────── */
/* Outer shell + inner core — concentric radii, navy-tinted ring */

.tx-bezel-outer {
  background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-base-200));
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: var(--radius-bezel-outer);
  padding: var(--radius-bezel-pad);
  box-shadow: var(--shadow-card-rest);
  transition: box-shadow 600ms var(--ease-haptic);
}

.tx-bezel-outer:hover,
.tx-bezel-outer:focus-within {
  box-shadow: var(--shadow-card-soft);
}

.tx-bezel-inner {
  background-color: var(--color-base-100);
  border-radius: var(--radius-bezel-inner);
  padding: 1.5rem;
  box-shadow: var(--shadow-inset-light);
}

@media (min-width: 768px) {
  .tx-bezel-inner {
    padding: 2rem;
  }
}

/* ─── Primary CTA button — pill with nested arrow ────────────────────── */

.tx-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--type-body);
  letter-spacing: -0.01em;
  padding: 0.75rem 0.75rem 0.75rem 1.5rem;
  border-radius: 9999px;
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border: none;
  cursor: pointer;
  transition: transform 400ms var(--ease-haptic), background-color 400ms var(--ease-haptic);
  will-change: transform;
}

.tx-btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 88%, black);
}

.tx-btn-primary:active {
  transform: scale(0.98);
}

.tx-btn-primary .tx-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--color-primary-content) 15%, transparent);
  transition: transform 400ms var(--ease-haptic), background-color 400ms var(--ease-haptic);
}

.tx-btn-primary:hover .tx-btn-arrow {
  transform: translate(2px, -1px) scale(1.05);
  background-color: color-mix(in srgb, var(--color-primary-content) 22%, transparent);
}

/* ─── Floating glass header pill (sticky-only blur per perf rules) ──── */

.tx-header-pill {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--color-base-100) 70%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  box-shadow: var(--shadow-card-rest);
}

/* ─── Form controls ─────────────────────────────────────────────────── */
/* Mobile-friendly: touch targets ≥44px. Cream-on-cream surface depth. */

.tx-input,
.tx-select {
  width: 100%;
  min-height: 2.75rem; /* 44px touch target */
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: var(--type-body);
  background-color: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  border-radius: 0.875rem;
  color: var(--color-base-content);
  transition: border-color 300ms var(--ease-haptic), box-shadow 300ms var(--ease-haptic);
}

.tx-input:focus,
.tx-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* ─── Section padding rhythm ────────────────────────────────────────── */

.tx-section {
  padding: 4rem 1.25rem;          /* py-16 px-5 mobile */
}

@media (min-width: 768px) {
  .tx-section {
    padding: 8rem 2rem;            /* py-32 px-8 desktop */
  }
}

/* Hero section — generous top, minimal bottom. Use when the section directly
 * precedes a tight section (e.g., calculator card immediately below). */
.tx-hero {
  padding: 4rem 1.25rem 0.75rem;   /* mobile: 64 top, 12 bottom */
}

@media (min-width: 768px) {
  .tx-hero {
    padding: 8rem 2rem 2rem;       /* desktop: 128 top, 32 bottom */
  }
}

/* Tight section — minimal top, normal bottom. Use when the section directly
 * follows another section that already has bottom padding. Removes the
 * double-padding gap entirely. */
.tx-section-tight {
  padding: 0 1.25rem 4rem;         /* zero top, normal bottom */
}

@media (min-width: 768px) {
  .tx-section-tight {
    padding: 0 2rem 8rem;
  }
}

.tx-container-narrow {
  max-width: 48rem;                /* 768px */
  margin: 0 auto;
}

/* ─── How fares work — pricing rule grid ────────────────────────────── */

.tx-fares-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* When the grid is the immediate first content of its container (no eyebrow/
   heading above), drop the top margin so it hugs the previous section's
   bottom padding instead of double-spacing. Used on about/conditions where
   the section is purely the grid; home keeps its margin because grid is
   preceded by eyebrow + h2 + p. */
.tx-fares-grid:first-child {
  margin-top: 0;
}

/* Platform's content/prose component renders inside `<section class="content-prose">`
   with default padding-top: 3rem and padding-bottom: 3rem. Inside tx-section-tight
   that compounds with the section's own padding (which is already zeroed at top to
   meet the hero), producing visible double-spacing. Strip the inner prose padding
   so the section's own padding controls the gap. */
.tx-section-tight .content-prose {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  .tx-fares-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 3.5rem;
  }
}

.tx-fare-rule {
  background-color: var(--color-base-100);
  border: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius-bezel-inner);
  padding: 1.5rem;
  text-align: left;
  transition: border-color 400ms var(--ease-haptic),
              box-shadow 400ms var(--ease-haptic);
}

.tx-fare-rule:hover {
  border-color: color-mix(in srgb, var(--color-primary) 25%, transparent);
  box-shadow: var(--shadow-card-rest);
}

.tx-fare-rule__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-primary);
  font-family: var(--font-numeric);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 0.875rem;
}

.tx-fare-rule__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  font-variation-settings: 'opsz' 36, 'SOFT' 50;
  color: var(--color-base-content);
  margin: 0 0 0.5rem;
}

.tx-fare-rule__body {
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--color-neutral);
  margin: 0;
}

.tx-container-content {
  max-width: 64rem;                /* 1024px */
  margin: 0 auto;
}

/* ─── Scroll entry animation utilities ──────────────────────────────── */
/* Used by inline @keyframes triggered via IntersectionObserver in components */

/* Entry animations removed — were causing visible flicker on view-transition
   navigation (CSS race vs Astro client router). Classes preserved as no-ops
   so existing markup keeps working. */
.tx-fade-up,
.tx-stagger-1,
.tx-stagger-2,
.tx-stagger-3,
.tx-stagger-4 {
  animation: none;
}


/* ---------- Downloads page ---------- */

.tx-download-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}

.tx-download-card,
.tx-download-card:hover,
.tx-download-card:focus,
a.tx-download-card,
a.tx-download-card * {
  text-decoration: none !important;
}

.tx-download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-bezel-inner, 1rem);
  background: color-mix(in srgb, var(--color-base-100) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: inherit;
  transition: transform 250ms var(--ease-haptic), border-color 250ms var(--ease-haptic), box-shadow 250ms var(--ease-haptic);
}

.tx-download-card:hover,
.tx-download-card:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  box-shadow: var(--shadow-card-soft, 0 12px 40px -16px rgba(30, 58, 95, 0.25));
}

.tx-download-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.tx-download-card__kicker {
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-neutral);
  font-weight: 600;
}

.tx-download-card__title {
  font-family: var(--font-display, serif);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0;
  color: var(--color-primary);
}

.tx-download-card__meta {
  font-size: 0.95rem;
  color: var(--color-neutral);
  margin: 0;
}

.tx-download-card__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-content);
  font-size: 1.1rem;
}

/* Card with action buttons (instead of single anchor) */

.tx-download-card--actions {
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .tx-download-card--actions {
    flex-direction: row;
    align-items: center;
  }
}

.tx-download-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 0 0 auto;
}

@media (min-width: 480px) {
  .tx-download-card__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.tx-action-btn,
a.tx-action-btn,
button.tx-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-primary-content) !important;
  font-size: 0.95rem;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  text-decoration: none !important;
  white-space: nowrap;
  transition: transform 200ms var(--ease-haptic), background 200ms var(--ease-haptic);
}

.tx-action-btn:hover,
.tx-action-btn:focus-visible {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--color-primary) 88%, var(--color-accent) 12%);
}

.tx-action-btn:active {
  transform: translateY(0);
}

.tx-action-btn .tx-btn-arrow {
  font-size: 1rem;
  line-height: 1;
}

/* ---------- Print poster (hidden until window.print) ---------- */

.tx-print-poster {
  display: none;
}

@media print {
  /* Visibility-isolation pattern: hide everything, then reveal poster only */
  body * {
    visibility: hidden;
  }

  .tx-print-poster,
  .tx-print-poster * {
    visibility: visible;
  }

  .tx-print-poster {
    display: flex !important;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 0.5in;
    margin: 0;
  }

  .tx-print-poster__inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .tx-print-poster__qr {
    width: 6in;
    height: 6in;
    display: block;
  }

  .tx-print-poster__url {
    font-family: var(--font-display, serif);
    font-size: 2.25rem;
    letter-spacing: 0.04em;
    margin: 0;
    color: #000;
  }

  .tx-print-poster__caption {
    font-size: 1rem;
    color: #333;
    margin: 0;
    line-height: 1.4;
  }

  /* Page setup: portrait, no headers/footers (browser-controlled) */
  @page {
    size: letter portrait;
    margin: 0.5in;
  }
}