/*
Theme Name: Travelism
Theme URI: https://travelism.in
Author: Travelism
Author URI: https://travelism.in
Description: A premium, editorial WordPress theme for visa & travel consultancies. Built for Travelism — Surat's visa consultancy serving USA, UK, Canada, Australia, Europe and New Zealand applicants — with full Gutenberg block editor support, custom post types for services/testimonials/team, a reusable Visa Country page template, a built-in lead capture system with branded email notifications, and sitewide SEO + AI-agent (GEO) readiness built in. Every section is editable from the WordPress admin via Secure Custom Fields — no page builder required.
Version: 2.0.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Requires Plugins: secure-custom-fields
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: travelism
Tags: one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, sticky-post, threaded-comments, translation-ready, block-patterns, wide-blocks

Travelism WordPress Theme, Copyright 2026 Travelism.
Travelism is distributed under the terms of the GNU General Public License v2 or later.

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ============================================================
   Travelism — Design System
   (base tokens + reusable primitives; section layouts live in
   assets/css/sections.css, fonts in assets/css/fonts.css)
   ============================================================ */
:root {
  --ivory: #FAFAF7;
  --ivory-2: #F3F2EC;
  --ivory-3: #E8E6DE;
  --ink: #0E0E0C;
  --ink-2: #1A1A17;
  --muted: #6E6D66;
  --muted-2: #B8B7AF;
  --hair: #D9D7CE;
  --red: #DE1B26;
  --red-dark: #C8121D;
  --red-soft: #FBE4E5;

  --font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --maxw: 1360px;
  --gutter: 32px;
  --radius: 4px;
  --radius-lg: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-theme="dark"] {
  --ivory: #0B0B09;
  --ivory-2: #121210;
  --ivory-3: #1C1C19;
  --ink: #F6F5EF;
  --ink-2: #E8E7E1;
  --muted: #8F8E87;
  --muted-2: #5A5953;
  --hair: #2A2A26;
  --red-soft: #2A1113;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--ivory);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; }

/* Skip link (accessibility) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999999;
  background: var(--ink); color: var(--ivory); padding: 14px 22px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Typography */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(48px, 7vw, 112px); }
h2 { font-size: clamp(36px, 5vw, 72px); }
h3 { font-size: clamp(24px, 2.4vw, 36px); }
h4, h5, h6 { font-size: 20px; }

p { text-wrap: pretty; margin: 0; }

em, .accent { color: var(--red); font-style: italic; }

/* Layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sect { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.divider { height: 1px; background: var(--hair); width: 100%; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 56px; flex-wrap: wrap; gap: 24px;
}

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 20px 32px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.4s var(--ease);
  background: color-mix(in srgb, var(--ivory) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { padding: 14px 32px; border-bottom-color: var(--hair); }
.nav-logo { display: flex; align-items: baseline; gap: 8px; background: none; border: 0; padding: 0; }
.nav-logo img { max-height: 34px; width: auto; }
.nav-logo .mark { font-family: var(--font-serif); font-size: 26px; letter-spacing: -0.02em; color: var(--ink); }
.nav-logo .mark .dot { color: var(--red); }
.nav-logo .tag {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em;
  color: var(--muted); text-transform: uppercase; display: none;
}
@media (min-width: 900px) { .nav-logo .tag { display: inline; } }

.nav-links { display: none; gap: 36px; list-style: none; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a {
  font-size: 13px; color: var(--ink); padding: 6px 0; position: relative;
  transition: opacity 0.2s; display: inline-block; background: none; border: 0;
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav-links a:hover::after, .nav-links li.current-menu-item > a::after { transform: scaleX(1); }
.nav-links li.current-menu-item > a { color: var(--red); }

.nav-cta { display: none; }
@media (min-width: 900px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  width: 40px; height: 40px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px;
  background: none; border: 0;
}
@media (min-width: 900px) { .nav-burger { display: none; } }
.nav-burger span { width: 20px; height: 1px; background: var(--ink); transition: transform 0.3s, opacity 0.3s; display: block; }
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; background: var(--ivory); z-index: 99;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 40px; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.mobile-menu-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a { font-family: var(--font-serif); font-size: 48px; color: var(--ink); text-align: left; display: block; padding: 4px 0; }
.mobile-menu li.current-menu-item > a { color: var(--red); }
.mobile-menu .btn { margin-top: 24px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-size: 13px; letter-spacing: 0.02em;
  border-radius: 100px; border: 0; background: none; color: inherit;
  transition: all 0.3s var(--ease);
  position: relative; overflow: hidden;
  white-space: nowrap;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); transform: translateY(-1px); color: #fff; }
.btn-primary .arrow { transition: transform 0.3s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-ink { background: var(--ink); color: var(--ivory); }
.btn-ink:hover { background: var(--ink-2); transform: translateY(-1px); color: var(--ivory); }

.btn-dark-fill { background: rgba(255,255,255,0.06); color: #fff; }

.btn-sm { padding: 10px 16px; font-size: 12px; }
.btn-block { width: 100%; justify-content: center; }

/* Eyebrow label */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--muted); letter-spacing: 0.15em; text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--red); }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-2 { transition-delay: 0.08s; }
.reveal-3 { transition-delay: 0.16s; }
.reveal-4 { transition-delay: 0.24s; }
.reveal-5 { transition-delay: 0.32s; }
.no-motion .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Placeholder imagery (shown when no featured image is set) */
.ph {
  background: repeating-linear-gradient(135deg, var(--ivory-3) 0 1px, transparent 1px 8px), var(--ivory-2);
  border: 1px solid var(--hair);
  position: relative;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 12px; overflow: hidden;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
  background: var(--ivory); padding: 4px 8px; border: 1px solid var(--hair);
  position: relative; z-index: 1;
}

/* Marquee */
.marquee { overflow: hidden; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 22px 0; }
.marquee-track { display: flex; gap: 64px; white-space: nowrap; width: max-content; animation: marquee 40s linear infinite; }
.no-motion .marquee-track { animation: none; }
.marquee-item { font-family: var(--font-serif); font-size: 28px; color: var(--ink); display: inline-flex; align-items: center; gap: 64px; }
.marquee-item .sep { color: var(--red); font-size: 12px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Footer */
.footer { background: var(--ink); color: var(--ivory); padding: 80px 0 40px; margin-top: 80px; }
.footer a:hover { color: var(--red); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand .mark { font-family: var(--font-serif); font-size: 40px; color: #fff; }
.footer-brand .mark .dot { color: var(--red); }
.footer-brand p { margin-top: 20px; max-width: 360px; color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.6; }
.footer-contact-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.footer h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { font-size: 14px; color: rgba(255,255,255,0.85); transition: color 0.2s; }
.footer-address { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.6; }
.footer-hours { color: rgba(255,255,255,0.6); font-size: 13px; margin-top: 8px; display: block; }
.footer-meta { display: flex; justify-content: space-between; padding-top: 30px; font-size: 12px; color: rgba(255,255,255,0.5); flex-wrap: wrap; gap: 12px; }

/* Route / page transition */
.route { animation: routeIn 0.5s var(--ease); }
@keyframes routeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Cards */
.card { background: var(--ivory); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 36px; transition: all 0.3s var(--ease); position: relative; overflow: hidden; }
.card:hover { border-color: var(--ink); transform: translateY(-2px); }
.card-dark { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.card-eyebrow-num { color: var(--muted); }
.card-dark .card-eyebrow-num { color: rgba(255,255,255,0.5); }
.card-dark p { color: rgba(255,255,255,0.75); }

/* Grids */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) { .grid-5 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-5 { grid-template-columns: 1fr; } }

/* Stats */
.stat { border-top: 1px solid var(--hair); padding-top: 24px; }
.stat .num { font-family: var(--font-serif); font-size: clamp(64px, 8vw, 112px); line-height: 1; letter-spacing: -0.03em; }
.stat .num .plus { color: var(--red); }
.stat .label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px; }

/* Forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: transparent; border: none; border-bottom: 1px solid var(--hair);
  padding: 12px 0; outline: none; width: 100%; border-radius: 0;
  transition: border-color 0.25s var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--red); }
.field .field-error { border-color: var(--red) !important; }
.form-notice { padding: 14px 18px; border-radius: 8px; font-size: 13px; margin-top: 20px; }
.form-notice.error { background: var(--red-soft); color: var(--red-dark); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--hair); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }

/* WordPress core alignment helpers */
.alignwide { max-width: 1600px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; width: 100%; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption, .wp-block-image { max-width: 100%; }
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important; clip-path: none; color: #21759b; display: block; font-size: 14px;
  font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px;
  text-decoration: none; top: 5px; width: auto; z-index: 100000;
}