/**
 * tripsora-blog-theme.css
 * ─────────────────────────────────────────────────────────────────
 * Drop this AFTER the blog template's existing <style> block (or
 * @import it last) to fully override the orange/navy palette with
 * the Tripsora landing-page design system.
 *
 * What changes
 *   • Fonts       → Fraunces (display) + Outfit (body)
 *   • Primary     → Deep Teal  #0F4C5C  (was orange #FF6B35)
 *   • Accent      → Amber      #F4A261  (was coral  #F77F00)
 *   • Background  → Warm Cream #FAF8F4  (was plain white/gray)
 *   • Text        → Ink family from landing page
 *   • Gradients   → Teal ↔ Amber  (was sunset / ocean)
 *   • Shadows     → Teal-tinted (matches landing page)
 *   • Radius      → matches landing-page token set
 * ─────────────────────────────────────────────────────────────────
 */

/* ── 1. GOOGLE FONTS ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;0,9..144,900;1,9..144,400;1,9..144,600;1,9..144,700&family=Outfit:wght@300;400;500;600;700&display=swap');

/* ── 2. DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* Brand */
  --primary-color:   #0F4C5C;   /* teal          */
  --primary-dark:    #0d3f4e;   /* teal-hover    */
  --primary-light:   #1a6476;   /* teal-soft     */

  /* Accent */
  --accent-amber:    #F4A261;   /* amber         */
  --accent-amber-dk: #c97d3f;   /* amber dark    */
  --accent-coral:    #F4A261;   /* re-mapped     */
  --accent-sand:     #F4A261;
  --accent-turquoise:#1a8fa8;   /* teal-light    */
  --accent-mint:     #27ae6e;   /* green         */

  /* Secondary palette */
  --secondary-color: #0F4C5C;
  --secondary-light: #1a6476;

  /* Text */
  --text-primary:   #0D2B33;   /* ink           */
  --text-secondary: #2e4f58;   /* ink-mid       */
  --text-light:     #5a7f8a;   /* ink-soft      */

  /* Surfaces */
  --background:     #FAF8F4;   /* cream         */
  --background-alt: #f0f9fb;   /* teal-50       */
  --surface:        #ffffff;
  --border:         #ddeaed;   /* line          */
  --border-light:   #eaf3f5;   /* line-light    */

  /* Shadows — teal-tinted like landing page */
  --shadow-sm:  0 1px 4px  rgba(15,76,92,.07);
  --shadow:     0 2px 12px rgba(15,76,92,.09);
  --shadow-lg:  0 6px 28px rgba(15,76,92,.12);
  --shadow-xl:  0 16px 56px rgba(15,76,92,.16);

  /* Radius */
  --radius:     10px;   /* --r-sm  */
  --radius-lg:  16px;   /* --r-md  */
  --radius-xl:  20px;   /* --r-lg  */

  /* Gradients */
  --gradient-sunset:   linear-gradient(135deg, #0F4C5C 0%, #1a8fa8 100%);
  --gradient-ocean:    linear-gradient(135deg, #0F4C5C 0%, #157a90 100%);
  --gradient-tropical: linear-gradient(135deg, #1a8fa8 0%, #27ae6e 100%);
  --gradient-amber:    linear-gradient(135deg, #F4A261 0%, #e8894a 100%);
}

/* ── 3. BASE ─────────────────────────────────────────────────── */
body {
  font-family: 'Outfit', sans-serif !important;
  background: var(--background) !important;
  color: var(--text-primary) !important;
}

/* ── 4. DISPLAY FONT → Fraunces ──────────────────────────────── */
h1, h2, h3, h4,
.article-title,
.page-title h2,
.article-content h2,
.article-content h3,
.comments-title,
.comment-form-title,
.comment-success h4,
.social-share h3,
.image-gallery h3,
.brand-name,
.nav-title {
  font-family: 'Fraunces', serif !important;
}

/* ── 5. NAVBAR ───────────────────────────────────────────────── */
.main-navbar {
  background: rgba(255,255,255,.93) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.brand-name {
  background: none !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
  letter-spacing: -.02em !important;
}

.nav-link { color: var(--text-secondary) !important; }
.nav-link:hover { color: var(--primary-color) !important; }
.nav-link::after { background: var(--gradient-amber) !important; }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* ── 6. HERO / VIDEO HEADER ──────────────────────────────────── */
.video-overlay {
  background: linear-gradient(110deg,
    rgba(8,24,30,.80) 0%,
    rgba(15,76,92,.60) 45%,
    rgba(8,24,30,.28) 100%) !important;
}

.header-content h1 {
  font-family: 'Fraunces', serif !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

.cta-primary {
  background: #fff !important;
  color: var(--primary-color) !important;
  box-shadow: 0 8px 24px rgba(15,76,92,.30) !important;
}
.cta-primary:hover {
  background: #f0f9fb !important;
  box-shadow: 0 16px 40px rgba(15,76,92,.40) !important;
}

.cta-secondary {
  border-color: rgba(255,255,255,.55) !important;
}
.cta-secondary:hover {
  background: #fff !important;
  color: var(--primary-color) !important;
}

/* ── 7. PAGE TITLE (list page) ───────────────────────────────── */
.page-title h2 {
  background: var(--gradient-sunset) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 8. ARTICLE CARDS ────────────────────────────────────────── */
.article-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

.article-card::before { background: var(--gradient-sunset) !important; }
.article-card:nth-child(3n+1)::before { background: var(--gradient-sunset) !important; }
.article-card:nth-child(3n+2)::before { background: var(--gradient-ocean)  !important; }
.article-card:nth-child(3n+3)::before { background: var(--gradient-tropical) !important; }

.article-card:hover {
  border-color: var(--primary-light) !important;
  box-shadow: var(--shadow-xl) !important;
}

.article-title { color: var(--text-primary) !important; }
.article-card:hover .article-title { color: var(--primary-color) !important; }
.article-summary { color: var(--text-secondary) !important; }

.article-meta { background: linear-gradient(180deg, transparent 0%, var(--background) 100%) !important; }
.article-meta a { color: var(--primary-color) !important; }
.article-meta a:hover { color: var(--primary-dark) !important; }

/* ── 9. TAGS ─────────────────────────────────────────────────── */
.tag {
  background: rgba(15,76,92,.08) !important;
  color: var(--primary-color) !important;
  border-color: rgba(15,76,92,.20) !important;
}
.tag:hover {
  background: var(--gradient-sunset) !important;
  color: #fff !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 4px 12px rgba(15,76,92,.25) !important;
}

/* ── 10. PAGINATION ──────────────────────────────────────────── */
.pagination-container {
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
}

.pagination-btn {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  font-family: 'Outfit', sans-serif !important;
}
.pagination-btn:hover {
  background: var(--gradient-sunset) !important;
  color: #fff !important;
  border-color: var(--primary-color) !important;
  box-shadow: 0 8px 20px rgba(15,76,92,.30) !important;
}

/* ── 11. SEARCH BOX ──────────────────────────────────────────── */
.search-box:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 4px rgba(15,76,92,.12), var(--shadow) !important;
}
.clear-search {
  background: var(--primary-color) !important;
}
.clear-search:hover { background: var(--primary-dark) !important; }

/* ── 12. ARTICLE PAGE ────────────────────────────────────────── */
.article-title {
  background: var(--gradient-sunset) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

.article-summary {
  background: linear-gradient(135deg,
    rgba(15,76,92,.05) 0%,
    rgba(26,144,168,.05) 100%) !important;
  border-left-color: var(--primary-color) !important;
  color: var(--text-secondary) !important;
}

.article-content h2 {
  border-bottom-color: var(--primary-color) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
.article-content h2::after {
  background: var(--gradient-tropical) !important;
}
.article-content h3 { color: var(--primary-color) !important; }

.article-content p:first-of-type::first-letter {
  background: var(--gradient-sunset) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 13. ARTICLE NAVIGATION ──────────────────────────────────── */
.nav-item {
  background: linear-gradient(135deg, var(--surface), var(--background-alt)) !important;
  border-color: var(--border-light) !important;
}
.nav-item:hover {
  border-color: var(--primary-color) !important;
  box-shadow: var(--shadow-lg) !important;
}
.nav-item:hover .nav-title { color: var(--primary-color) !important; }

.nav-previous .nav-direction { color: var(--accent-turquoise) !important; }
.nav-next     .nav-direction { color: var(--accent-amber)     !important; }

/* ── 14. HERO IMAGE ──────────────────────────────────────────── */
.hero-image { box-shadow: var(--shadow-lg) !important; }
.image-attribution a { color: var(--accent-turquoise) !important; }

/* ── 15. IMAGE GALLERY ───────────────────────────────────────── */
.image-gallery {
  background: linear-gradient(135deg,
    rgba(15,76,92,.03) 0%,
    rgba(26,144,168,.03) 100%) !important;
}
.image-gallery h3 {
  background: var(--gradient-sunset) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 16. SOCIAL SHARE ────────────────────────────────────────── */
.social-share { background: var(--background-alt) !important; }

/* ── 17. COMMENTS ────────────────────────────────────────────── */
.comments-title {
  background: var(--gradient-ocean) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.comment-item:hover { border-color: var(--primary-color) !important; }

.author-avatar {
  background: var(--gradient-sunset) !important;
}

/* ── 18. COMMENT FORM ────────────────────────────────────────── */
.comment-form-container {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(15,76,92,.15) !important;
}

.form-notice {
  background: rgba(15,76,92,.06) !important;
  border-left-color: var(--primary-color) !important;
}

.comment-submit-btn {
  background: var(--gradient-sunset) !important;
  font-family: 'Outfit', sans-serif !important;
}
.comment-submit-btn:hover {
  box-shadow: 0 8px 20px rgba(15,76,92,.35) !important;
}

.success-icon { background: var(--gradient-sunset) !important; }

/* ── 19. eSIM PROMO CARDS ────────────────────────────────────── */
.esim-offer-blog {
  background: rgba(15,76,92,.07) !important;
  border-color: rgba(15,76,92,.25) !important;
}
.esim-offer-blog div[style*="color: #10b981"] {
  color: var(--primary-color) !important;
}
.esim-offer-blog a {
  background: var(--gradient-sunset) !important;
  box-shadow: 0 4px 12px rgba(15,76,92,.25) !important;
}

/* ── 20. FOOTER ──────────────────────────────────────────────── */
.container-fluid.bg-dark a { color: rgba(255,255,255,.5) !important; }
.container-fluid.bg-dark a:hover { color: #fff !important; }
h1.text-primary { color: var(--accent-amber) !important; }
.btn-outline-primary {
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
}
.btn-outline-primary:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* ── 21. SCROLL INDICATOR ────────────────────────────────────── */
.scroll-indicator i { color: var(--accent-amber) !important; }

/* ── 22. HIGHLIGHT (search) ──────────────────────────────────── */
span.highlight {
  background: rgba(244,162,97,.30) !important;
  color: var(--primary-dark) !important;
  border-radius: 3px;
  padding: 0 2px;
}

/* ── 23. PEXELS CREDIT ───────────────────────────────────────── */
.pexels-credit a { color: var(--primary-color) !important; }

/* ── 24. MOBILE NAV ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-menu {
    background: var(--surface) !important;
  }
  .nav-menu li {
    border-bottom-color: var(--border-light) !important;
  }
}

/* ── 25. SMOOTH TRANSITIONS (global) ────────────────────────── */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(.16,1,.3,1) !important;
}