/* ========================================
   PROFESSIONAL TYPOGRAPHY SYSTEM
   Using Inter font family throughout
   ======================================== */

/* ========================================
   1. FONT FAMILY IMPLEMENTATION
   ======================================== */

/* Root font family - Applied to all elements */
:root {
  --font-primary: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Apply Inter to ALL text elements */
* {
  font-family: var(--font-primary);
}

body,
html {
  font-family: var(--font-primary);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-dark, #2d3436);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Ensure all headings use Inter */
h1, h2, h3, h4, h5, h6,
.heading-primary,
.heading-secondary,
.section-title,
.card-title {
  font-family: var(--font-primary) !important;
}

/* Override any component-specific font families */
p, span, div, a, button, input, textarea, select, label,
.btn, .button, .link, .nav, .menu, .footer,
.card, .modal, .dropdown, .tooltip, .badge {
  font-family: var(--font-primary);
}

/* ========================================
   2. TYPOGRAPHY SCALE & HIERARCHY
   ======================================== */

/* Heading Styles - Professional hierarchy */
h1, .h1 {
  font-size: 3rem;          /* 48px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

h2, .h2 {
  font-size: 2.25rem;       /* 36px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

h3, .h3 {
  font-size: 1.875rem;      /* 30px */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

h4, .h4 {
  font-size: 1.5rem;        /* 24px */
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
  margin-bottom: 0.875rem;
}

h5, .h5 {
  font-size: 1.25rem;       /* 20px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

h6, .h6 {
  font-size: 1.125rem;      /* 18px */
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

/* Body Text Styles */
p, .body-text {
  font-size: 1rem;          /* 16px */
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

.lead {
  font-size: 1.25rem;       /* 20px */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.small, small {
  font-size: 0.875rem;      /* 14px */
  font-weight: 400;
  line-height: 1.5;
}

.xs {
  font-size: 0.75rem;       /* 12px */
  font-weight: 400;
  line-height: 1.5;
}

/* ========================================
   3. FONT WEIGHT SYSTEM
   ======================================== */

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

/* ========================================
   4. BUTTON & UI ELEMENT TYPOGRAPHY
   ======================================== */

button,
.btn,
.button {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.btn-large {
  font-size: 1.125rem;
  font-weight: 600;
}

.btn-small {
  font-size: 0.875rem;
  font-weight: 600;
}

/* ========================================
   5. LINK TYPOGRAPHY
   ======================================== */

a {
  font-family: var(--font-primary);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  text-decoration: underline;
}

/* Navigation Links */
nav a,
.nav-link {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ========================================
   6. FORM ELEMENT TYPOGRAPHY
   ======================================== */

input,
textarea,
select {
  font-family: var(--font-primary);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

label {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

::placeholder {
  font-family: var(--font-primary);
  font-weight: 400;
  opacity: 0.6;
}

/* ========================================
   7. MOBILE RESPONSIVE TYPOGRAPHY
   ======================================== */

@media (max-width: 768px) {
  html {
    font-size: 15px;
  }

  h1, .h1 {
    font-size: 2.25rem;     /* 36px at 15px base */
    line-height: 1.25;
  }

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

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

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

  h5, .h5 {
    font-size: 1.125rem;    /* 18px */
    line-height: 1.45;
  }

  h6, .h6 {
    font-size: 1rem;        /* 16px */
    line-height: 1.5;
  }

  .lead {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }

  h1, .h1 {
    font-size: 2rem;        /* 32px at 14px base */
  }

  h2, .h2 {
    font-size: 1.75rem;     /* 28px */
  }
}

/* ========================================
   8. SPECIAL TEXT STYLES
   ======================================== */

.display-1 {
  font-size: 4rem;          /* 64px */
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.display-2 {
  font-size: 3.5rem;        /* 56px */
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted, #718096);
}

.caption {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted, #718096);
}

.overline {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ========================================
   9. TEXT ALIGNMENT & UTILITIES
   ======================================== */

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

/* ========================================
   10. FONT FEATURE SETTINGS
   ======================================== */

/* Enable OpenType features for better typography */
body {
  font-feature-settings:
    "kern" 1,          /* Kerning */
    "liga" 1,          /* Standard ligatures */
    "clig" 1,          /* Contextual ligatures */
    "calt" 1;          /* Contextual alternates */
}

/* Tabular numbers for financial data */
.tabular-nums {
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Proportional oldstyle numbers for body text */
.oldstyle-nums {
  font-feature-settings: "onum" 1;
  font-variant-numeric: oldstyle-nums;
}

/* ========================================
   11. PRINT STYLES
   ======================================== */

@media print {
  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  h1 { font-size: 24pt; }
  h2 { font-size: 20pt; }
  h3 { font-size: 18pt; }
  h4 { font-size: 16pt; }
  h5 { font-size: 14pt; }
  h6 { font-size: 12pt; }
}

/* ========================================
   12. ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
  body {
    font-weight: 500;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
  }
}

/* ========================================
   13. REVIEWS FLOATING BUTTON TYPOGRAPHY
   ======================================== */

/* Reviews button - bottom-left corner */
.ta-floating-btn {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* 4.8 rating number */
.ta-floating-btn .rating {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

/* ========================================
   14. SOCIAL MEDIA SIDEBAR (right side)
   ======================================== */

.floating-social {
  gap: 12px !important;
}

.floating-social a {
  width: 48px !important;
  height: 48px !important;
}

.floating-social img {
  width: 20px !important;
  height: 20px !important;
}

/* ========================================
   15. GLOBAL SPACING & ALIGNMENT RULES
   ======================================== */

/* Card titles and descriptions: left-aligned within cards */
.hero-card-body h3,
.hero-card-body p {
  text-align: left !important;
}

/* Button text: centered within buttons */
.hero-card-btn,
.btn,
.button,
button,
.btn-cta,
.header-book-btn,
.btn-continue,
.pay-later-btn {
  text-align: center !important;
}

/* Consistent vertical rhythm for sections */
section {
  --section-gap: 1.5rem;
}

section h2 {
  margin-bottom: 1rem;
}

section h2 + p {
  margin-bottom: 2rem;
}

/* ========================================
   16. ACCESSIBILITY - CONTRAST & OPACITY
   ======================================== */

/* Body text on dark backgrounds: 85-90% opacity */
.hero-subtitle-modern,
.hero-card-body p,
.cta-section-modern p,
.footer-modern p,
.footer-tagline {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Preserve original golden/yellow price color */
.hero-card-price-tag .price-val {
  color: #f7b731 !important;
}

/* Trust strip on dark backgrounds: improved contrast */
.hero-trust-strip span {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Small text (under 14px): increase opacity to 90% min */
.hero-card-price-tag .from-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Ensure headings on dark backgrounds use pure white */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-card-body h3,
.cta-section-modern h2,
.footer-modern h4 {
  color: #ffffff !important;
}

/* ========================================
   17. HERO CARD FINAL QUALITY CHECKS
   ======================================== */

/* All three card titles: identical 26px */
.hero-card-body h3 {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

/* All three card descriptions: identical 14px */
.hero-card-body p {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.1px !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* All three CTA buttons: identical 16px */
.hero-card-btn {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  text-transform: none !important;
}

/* Card badge (rating): consistent */
.hero-card-badge {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Price tag: consistent */
.hero-card-price-tag .from-label {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.hero-card-price-tag .price-val {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: clamp(32px, 4vw, 42px) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Remove "EUR" text suffix from prices - ensure no EUR labels */
.hero-card-price-tag .price-val small,
.hero-card-price-tag .currency-label {
  display: none !important;
}

/* ========================================
   18. SECURITY BADGES TYPOGRAPHY
   ======================================== */

.security-badge {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.security-badge span {
  font-size: 13px !important;
  font-weight: 400 !important;
}

.security-badge i {
  font-size: 16px !important;
}

/* ========================================
   19. BOOKING CONFIRMATION OVERRIDE
   ======================================== */

/* Override inline Arial font in booking confirmation */
#booking-confirmation {
  font-family: 'Inter', 'InterVariable', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ========================================
   20. RESPONSIVE HERO CARD TYPOGRAPHY
   ======================================== */

@media (max-width: 768px) {
  .hero-card-body h3 {
    font-size: 20px !important;
  }

  .hero-card-body p {
    font-size: 13px !important;
  }

  .hero-card-btn {
    font-size: 14px !important;
  }

  .hero-card-badge {
    font-size: 12px !important;
  }
}

@media (max-width: 480px) {
  .hero-card-body h3 {
    font-size: 18px !important;
  }

  .hero-card-body p {
    font-size: 12px !important;
  }

  .hero-card-btn {
    font-size: 13px !important;
  }

  .floating-social a {
    width: 42px !important;
    height: 42px !important;
  }

  .floating-social img {
    width: 18px !important;
    height: 18px !important;
  }
}