/* ============================================================================
   travel-yatra.com — design system
   Palette sampled from the brand logo: navy #04264E, orange #F16B13.

   Contrast, measured (WCAG 2.1):
     navy   #04264E on white ......... 14.85:1   AAA
     orange #F16B13 on white .........  3.04:1   large text / fills ONLY
     white  #FEFEFE on navy .......... 14.85:1   AAA
     white  on --accent-ink #B44C08 ..  5.02:1   AA

   Rule: orange never carries body copy and never sits under white text at its
   brand value. --accent-ink is the darkened variant used for buttons, links
   and anything with a white label on it.

   Single file, no @import — an @import blocks rendering until it resolves.
   ========================================================================== */

:root {
  --navy:      #04264E;
  --navy-700:  #0A3568;
  --navy-500:  #17518F;

  --accent:      #F16B13;
  --accent-ink:  #B44C08;
  --accent-wash: #FDF0E5;

  --ground:   #F4F7FB;
  --surface:  #FFFFFF;
  --raised:   #FFFFFF;
  --ink:      #04264E;
  --body:     #4A5B72;
  --muted:    #6E7F95;
  --line:     #DCE5EF;
  --line-soft:#E9EFF6;

  --hero-ink:  #FFFFFF;
  --hero-body: #C9D8E9;

  --shadow-sm: 0 1px 2px rgba(4,38,78,.06), 0 2px 8px rgba(4,38,78,.05);
  --shadow:    0 2px 6px rgba(4,38,78,.07), 0 14px 34px rgba(4,38,78,.10);
  --shadow-lg: 0 4px 12px rgba(4,38,78,.09), 0 28px 64px rgba(4,38,78,.16);

  --display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --wrap-narrow: 760px;
  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-pill: 999px;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:5rem;
}

/* ---------- reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width:100%; overflow-x:hidden; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--display); color: var(--ink);
  line-height: 1.14; letter-spacing: -.022em;
  text-wrap: balance; margin: 0 0 var(--s4);
  font-weight: 700;
}
h1 { font-size: clamp(2.1rem, 3.6vw + 1rem, 3.4rem); }
h2 { font-size: clamp(1.7rem, 2.2vw + 1rem, 2.4rem); }
h3 { font-size: clamp(1.3rem, 1vw + 1.05rem, 1.6rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 var(--s4); }
ul, ol { margin: 0 0 var(--s4); padding-left: 1.25em; }
a { color: var(--navy-500); text-underline-offset: .18em; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}

/* WordPress requires these exact class names */
.screen-reader-text {
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.screen-reader-text:focus {
  position:static!important; width:auto; height:auto; clip:auto;
  background:var(--navy); color:#fff; padding:var(--s3) var(--s5);
}
.alignleft  { float:left;  margin:0 var(--s5) var(--s4) 0; }
.alignright { float:right; margin:0 0 var(--s4) var(--s5); }
.aligncenter{ margin-inline:auto; }
.alignwide, .alignfull { margin-inline:auto; }
.wp-caption { max-width:100%; }
.wp-caption-text, figcaption {
  font-size:.875rem; color:var(--muted); margin-top:var(--s2);
}
.sticky, .gallery-caption, .bypostauthor { }

.ty-skip {
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--navy); color:#fff; padding:var(--s3) var(--s5);
  border-radius:0 0 var(--r) 0; font-weight:600; text-decoration:none;
}
.ty-skip:focus { left:0; }

/* ---------- layout ---------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
.wrap--narrow { max-width:var(--wrap-narrow); }
.sec { padding-block:var(--s8); }
.sec--ground  { background:var(--ground); }
.sec--surface { background:var(--surface); }
.sec__head { max-width:40rem; margin-bottom:var(--s6); }
.sec__headrow {
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s5); flex-wrap:wrap; max-width:none;
}
.eyebrow {
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px;
}
.lede { color:var(--muted); font-size:17px; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:12px 22px; border-radius:var(--r-pill);
  border:2px solid transparent; text-decoration:none; cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--accent-ink); color:#fff; }
.btn--primary:hover { background:#9C4107; color:#fff; box-shadow:var(--shadow); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover { border-color:var(--ink); color:var(--ink); }
.btn--onhero { background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.32); }
.btn--onhero:hover { background:rgba(255,255,255,.18); color:#fff; }

/* ---------- header ---------- */
.hdr {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.90);
  backdrop-filter:saturate(1.7) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.hdr__in { display:flex; align-items:center; gap:28px; min-height:72px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.brand img { height:40px; width:auto; }
.brand__txt {
  font-family:var(--display); font-weight:700; font-size:20px;
  letter-spacing:-.03em; color:var(--ink); line-height:1;
}
.brand__txt i { font-style:normal; color:var(--accent-ink); }

.nav { margin-left:auto; }
.nav ul { display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.nav a {
  display:block; font-size:14.5px; font-weight:600; color:var(--ink);
  text-decoration:none; padding:9px 13px; border-radius:var(--r-sm);
}
.nav a:hover,
.nav .current-menu-item > a,
.nav .current_page_item > a { background:var(--accent-wash); color:var(--accent-ink); }
.nav .sub-menu {
  display:none; position:absolute; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:var(--s2); min-width:210px; flex-direction:column;
}
.nav li { position:relative; }
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { display:flex; }

.hdr__cta { flex:0 0 auto; }
.burger {
  display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:var(--r-sm); padding:9px 11px; color:var(--ink); cursor:pointer;
  /* 44px is the minimum comfortable touch target */
  min-width:44px; min-height:44px;
}
@media (max-width:940px) {
  .burger { display:block; }
  .hdr__cta { display:none; }
  .nav {
    position:absolute; left:0; right:0; top:100%;
    background:var(--surface); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg); padding:var(--s4) 24px; display:none;
  }
  .nav[data-open="true"] { display:block; }
  .nav ul { flex-direction:column; gap:2px; }
  .nav a { padding:12px; font-size:16px; }
  .nav .sub-menu { position:static; display:flex; border:0; box-shadow:none; padding-left:var(--s4); }
}

/* ---------- hero ---------- */
.hero { position:relative; background:var(--navy); overflow:hidden; }
.hero__grid { display:grid; align-items:stretch; }
@media (min-width:940px) { .hero__grid { grid-template-columns:1.02fr .98fr; } }
.hero__copy { padding:76px 0 96px; max-width:33rem; position:relative; z-index:2; }
.hero__eyebrow {
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:#FFB073; margin-bottom:20px;
}
.hero__eyebrow::before { content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; }
.hero h1 { color:var(--hero-ink); margin-bottom:20px; }
.hero h1 em { font-style:normal; color:#FF9B4D; }
.hero__lede { color:var(--hero-body); font-size:17.5px; max-width:30rem; margin-bottom:30px; }
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero__media { position:relative; min-height:340px; }
.hero__media img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--navy) 0%, rgba(4,38,78,.72) 22%, rgba(4,38,78,0) 62%);
}

/* On wide screens the photo bleeds to the viewport edge instead of stopping
   at the 1180px content wrapper, which left a navy gap on the right at large
   window sizes. The copy stays inside the wrapper and above the image. */
@media (min-width:940px) {
  .hero__grid { grid-template-columns:1fr; }
  .hero__copy { max-width:33rem; padding-block:92px 104px; }
  .hero__media {
    position:absolute; top:0; bottom:0; left:52%; right:0;
    width:auto; min-height:0; z-index:0;
  }
}
@media (min-width:1500px) { .hero__media { left:48%; } }
@media (max-width:939px) { .hero__media{min-height:260px} .hero__copy{padding-bottom:56px} }

/* ---------- interior page hero ----------
   Three shapes: with an image, with figures, or plain. The plain variant is
   deliberately shorter - the earlier single shape left the right half of
   every interior page empty. */
.phero { background:var(--navy); position:relative; overflow:hidden; }
.phero::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 84% 8%, rgba(241,107,19,.28), transparent 62%);
  pointer-events:none;
}
.phero__media { position:absolute; inset:0 0 0 auto; width:46%; }
.phero__media img { width:100%; height:100%; object-fit:cover; }
.phero__media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--navy) 0%, rgba(4,38,78,.82) 34%, rgba(4,38,78,.30) 100%);
}
@media (max-width:900px) { .phero__media { display:none; } }

.phero__in {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s7); flex-wrap:wrap;
}
/* Base padding first: templates that render .phero without a variant class
   were collapsing to the height of the heading alone. */
.phero__in { padding-block:var(--s7) var(--s6); }
.phero--split .phero__in { padding-block:var(--s8); }
.phero--plain .phero__in { padding-block:var(--s7) var(--s6); }

.phero__copy { max-width:38rem; }
.phero__eyebrow {
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#FFB073; margin-bottom:12px;
}
.phero h1 { color:#fff; margin-bottom:var(--s3); }
.phero p { color:var(--hero-body); font-size:17px; max-width:44rem; margin:0; }

/* figures, when there is no image to show */
.phero__stats { display:flex; gap:var(--s6); margin:0; flex-wrap:wrap; }
.phero__stats > div { min-width:96px; }
.phero__stats dt {
  font-family:var(--display); font-weight:700; font-size:30px; color:#fff;
  line-height:1; font-variant-numeric:tabular-nums;
}
.phero__stats dd { margin:8px 0 0; font-size:13px; color:#A9BED6; }
@media (max-width:760px) {
  .phero__stats { gap:var(--s5); }
  .phero__stats dt { font-size:24px; }
}

/* ---------- trust strip ---------- */
.seam { background:var(--ground); }
.trust {
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  margin-top:-38px; position:relative; z-index:3; box-shadow:var(--shadow);
}
/* Columns follow how many stats actually have data. A fixed 4-column grid
   left a blank cell whenever one was unavailable. */
@media (min-width:760px) {
  .trust { grid-template-columns:repeat(4,1fr); }
  .trust[data-count="1"] { grid-template-columns:1fr; }
  .trust[data-count="2"] { grid-template-columns:repeat(2,1fr); }
  .trust[data-count="3"] { grid-template-columns:repeat(3,1fr); }
}
.trust > div { background:var(--surface); padding:20px 22px; }
.trust dt {
  font-family:var(--display); font-size:25px; font-weight:700;
  color:var(--ink); line-height:1; font-variant-numeric:tabular-nums;
}
.trust dd { margin:6px 0 0; font-size:13.5px; color:var(--muted); }

/* ---------- cards ---------- */
.cards { display:grid; gap:22px; }
@media (min-width:660px)  { .cards { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px) { .cards { grid-template-columns:repeat(3,1fr); } }
.card {
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card__media { position:relative; aspect-ratio:4/3; background:var(--line-soft); }
.card__media img { width:100%; height:100%; object-fit:cover; }
.card__tag {
  position:absolute; left:14px; top:14px;
  background:var(--surface); color:var(--ink);
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--r-pill); box-shadow:var(--shadow-sm);
}
.card__body { padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.card h3 { font-size:18.5px; line-height:1.28; margin:0; }
.card h3 a { color:var(--ink); text-decoration:none; }
.card h3 a:hover { color:var(--accent-ink); }
.card__facts { display:flex; flex-wrap:wrap; gap:14px; font-size:13.5px; color:var(--muted); }
.card__facts span { display:inline-flex; align-items:center; gap:6px; }
.card__excerpt { font-size:14.5px; color:var(--muted); margin:0; }
.card__foot {
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line-soft);
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
}
.price {
  font-family:var(--display); font-weight:700; font-size:21px; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.price small { display:block; font-family:var(--sans); font-weight:500; font-size:12px;
               color:var(--muted); letter-spacing:.02em; }
.price--none { font-size:15px; font-weight:600; color:var(--muted); font-family:var(--sans); }
.card__link { font-size:14px; font-weight:600; color:var(--accent-ink); text-decoration:none; }
.card__link:hover { text-decoration:underline; }

/* ---------- mosaic ---------- */
.mosaic { display:grid; gap:16px; grid-template-columns:repeat(2,1fr); }
@media (min-width:860px) { .mosaic { grid-template-columns:repeat(4,1fr); grid-auto-rows:186px; } }
.tile {
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  display:block; text-decoration:none; min-height:168px; transition:transform .2s ease;
}
.tile:hover { transform:translateY(-3px); }
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,38,78,.86) 0%, rgba(4,38,78,.24) 48%, rgba(4,38,78,.06) 100%);
}
.tile__label { position:absolute; left:18px; right:18px; bottom:16px; z-index:2; }
.tile__label strong {
  display:block; font-family:var(--display); font-weight:600; font-size:18px;
  color:#fff; letter-spacing:-.01em;
}
.tile__label span { font-size:13px; color:#C4D5E8; }
@media (min-width:860px) { .tile--tall{grid-row:span 2} .tile--wide{grid-column:span 2} }

/* ---------- why ---------- */
.whys { display:grid; gap:20px; }
@media (min-width:700px) { .whys { grid-template-columns:repeat(3,1fr); } }
.why { padding:26px 24px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r); }
.why__ico {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent-ink); margin-bottom:16px;
}
.why h3 { font-size:17px; margin-bottom:8px; }
.why p { font-size:15px; color:var(--muted); margin:0; }

/* ---------- faq ---------- */
.faq { max-width:47rem; }
.faq details { border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary {
  cursor:pointer; list-style:none; padding:17px 34px 17px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
  content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%);
  font-size:24px; font-weight:500; color:var(--accent-ink); line-height:1;
}
.faq details[open] summary::after { content:"\2013"; }
.faq p { padding:0 34px 20px 0; color:var(--muted); font-size:15.5px; margin:0; }

/* ---------- cta band ---------- */
.band {
  background:var(--navy); border-radius:var(--r-lg); padding:46px 40px;
  display:flex; gap:30px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; position:relative; overflow:hidden;
}
.band::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(70% 130% at 88% 6%, rgba(241,107,19,.34), transparent 62%);
}
.band > * { position:relative; z-index:1; }
.band h2 { color:#fff; font-size:clamp(1.5rem,1.8vw + 1rem,2rem); margin-bottom:8px; }
.band p { color:var(--hero-body); font-size:16px; max-width:34rem; margin:0; }

/* ---------- prose ---------- */
.prose { max-width:70ch; }
.prose > * + * { margin-top:var(--s4); }
.prose h2 { margin-top:var(--s7); }
.prose h3 { margin-top:var(--s6); }
.prose img, .prose figure { border-radius:var(--r); }
.prose blockquote {
  margin:var(--s6) 0; padding:var(--s4) var(--s5);
  border-left:4px solid var(--accent); background:var(--accent-wash);
  border-radius:0 var(--r) var(--r) 0; color:var(--ink);
}
.prose table { width:100%; border-collapse:collapse; }
.prose :is(th,td) { padding:var(--s3); border:1px solid var(--line); text-align:left; }
.prose th { background:var(--accent-wash); color:var(--ink); font-family:var(--display); }
.tablewrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Editors paste wide tables into post content and WordPress adds no wrapper,
   so a single wide table used to push the whole page sideways on a phone.
   ty_wrap_tables() in inc/seo.php adds .tablewrap on output; this is the
   belt-and-braces fallback for content that bypasses that filter. */
@media (max-width:700px) {
  .prose > table { display:block; overflow-x:auto; white-space:nowrap; }
}

/* Long URLs, unbroken package codes and pasted links must never widen the
   page. Applied to text containers only, so layout grids are unaffected. */
.prose, .card__body, .ftr__blurb, .hero__lede, .lede, .faq p, .why p {
  overflow-wrap:anywhere; word-break:break-word;
}
.prose pre { overflow-x:auto; background:var(--navy); color:#DCE7F4; padding:var(--s4);
             border-radius:var(--r); font-size:14px; }

/* ---------- breadcrumbs ---------- */
.crumbs { font-size:13.5px; color:var(--muted); padding-block:var(--s4); }
.crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:.5em; padding:0; margin:0; }
.crumbs a { color:var(--muted); }
.crumbs a:hover { color:var(--ink); }

/* ---------- pagination ---------- */
/* the_posts_pagination() renders <nav class="pager"><div class="nav-links">,
   so the flex container has to be .nav-links - styling .pager alone left the
   page numbers stacked in a vertical column. */
.pager { margin-top:var(--s7); }
.pager .nav-links {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap; align-items:center;
}
.pager .screen-reader-text { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.pager .page-numbers {
  display:grid; place-items:center; min-width:44px; min-height:44px; padding:0 var(--s3);
  border:1px solid var(--line); border-radius:var(--r-sm);
  text-decoration:none; color:var(--ink); font-weight:600; background:var(--surface);
}
.pager .page-numbers.current { background:var(--navy); color:#fff; border-color:var(--navy); }
.pager .page-numbers:hover:not(.current) { border-color:var(--navy); }

/* ---------- footer ---------- */
.ftr { background:var(--navy); color:#B7C8DC; }
.ftr a { color:#B7C8DC; text-decoration:none; font-size:14.5px; }
.ftr a:hover { color:#fff; text-decoration:underline; }
.ftr__top { display:grid; gap:34px; padding-block:56px; }
/* auto-fit cannot be mixed with an fr track - the whole declaration is
   invalid and gets dropped, which collapsed this to a single column. */
@media (min-width:780px)  { .ftr__top { grid-template-columns:1.4fr 1fr 1fr; } }
@media (min-width:1000px) { .ftr__top { grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.ftr h3 {
  color:#fff; font-family:var(--sans); font-size:12.5px; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; margin-bottom:15px;
}
.ftr ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.ftr__mark { background:#fff; border-radius:var(--r); padding:12px 16px; display:inline-block; margin-bottom:16px; }
.ftr__mark img { height:48px; width:auto; }
.ftr__blurb { font-size:14.5px; color:#93A9C4; max-width:24rem; }
.ftr__bottom {
  border-top:1px solid rgba(255,255,255,.13); padding-block:20px;
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-size:13.5px; color:#8399B4;
}

/* ---------- search form ---------- */
.searchform { display:flex; gap:8px; max-width:32rem; }
.searchform input[type="search"] {
  flex:1; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-pill);
  font-family:var(--sans); font-size:15px; background:var(--surface); color:var(--ink);
}

/* ---------- 404 ---------- */
.oops { text-align:center; padding-block:var(--s9); max-width:36rem; margin-inline:auto; }
.oops__code {
  font-family:var(--display); font-size:clamp(4rem,12vw,7rem); font-weight:700;
  color:var(--accent-wash); line-height:1; margin-bottom:var(--s4);
}

/* ==========================================================================
   Single trip
   Replaces WP Travel Engine's default layout, which rendered the gallery as
   full-bleed images with no title, price or itinerary visible.
   ========================================================================== */

.trip__hero { position:relative; background:var(--navy); overflow:hidden; }
.trip__hero-media { position:absolute; inset:0; }
.trip__hero-media img { width:100%; height:100%; object-fit:cover; }
.trip__hero::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,38,78,.55) 0%, rgba(4,38,78,.86) 62%, var(--navy) 100%);
}
.trip__hero-in { position:relative; z-index:1; padding-block:var(--s8) var(--s7); }
.trip__hero h1 { color:#fff; max-width:22ch; margin-bottom:var(--s4); }

.trip__crumbs { font-size:13.5px; color:#A9BED6; margin-bottom:var(--s5); display:flex; gap:.5em; flex-wrap:wrap; }
.trip__crumbs a { color:#A9BED6; text-decoration:none; }
.trip__crumbs a:hover { color:#fff; text-decoration:underline; }

.trip__facts { list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0; }
.trip__facts li {
  font-size:13.5px; font-weight:600; color:#DCE8F5;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  padding:7px 14px; border-radius:var(--r-pill);
}

.trip__layout { display:grid; gap:var(--s6); padding-block:var(--s8); align-items:start; }
@media (min-width:1000px) { .trip__layout { grid-template-columns:minmax(0,1fr) 340px; gap:var(--s7); } }

.trip__block { margin-bottom:var(--s8); }
.trip__block > h2 { font-size:clamp(1.4rem,1.4vw + 1rem,1.9rem); margin-bottom:var(--s5); }

/* highlights */
.highlights { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
@media (min-width:700px) { .highlights { grid-template-columns:repeat(2,1fr); } }
.highlights li {
  position:relative; padding:12px 14px 12px 40px; font-size:15px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
}
.highlights li::before {
  content:""; position:absolute; left:14px; top:17px; width:14px; height:8px;
  border-left:2.5px solid var(--accent-ink); border-bottom:2.5px solid var(--accent-ink);
  transform:rotate(-45deg);
}

/* itinerary */
.itin { list-style:none; padding:0; margin:0; display:grid; gap:10px; counter-reset:day; }
.itin__day details {
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .16s ease;
}
.itin__day details[open] { border-color:var(--accent); }
.itin__day summary {
  cursor:pointer; list-style:none; display:flex; gap:14px; align-items:flex-start;
  padding:16px 44px 16px 18px; position:relative;
}
.itin__day summary::-webkit-details-marker { display:none; }
.itin__day summary::after {
  content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:22px; color:var(--accent-ink); line-height:1;
}
.itin__day details[open] summary::after { content:"\2013"; }
.itin__num {
  flex:0 0 auto; font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink);
  background:var(--accent-wash); padding:5px 10px; border-radius:var(--r-sm);
  white-space:nowrap;
}
.itin__title { font-family:var(--display); font-weight:600; font-size:16.5px; color:var(--ink); line-height:1.35; }
.itin__body { padding:0 18px 18px 18px; font-size:15px; }

/* inclusions */
.costs { display:grid; gap:var(--s5); }
@media (min-width:760px) { .costs { grid-template-columns:repeat(2,1fr); } }
.costs__col { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; }
.costs__col h3 { font-size:16px; margin-bottom:var(--s4); }
.costs__col ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.costs__col li { position:relative; padding-left:26px; font-size:14.5px; color:var(--body); }
.costs__col--in li::before {
  content:""; position:absolute; left:2px; top:7px; width:11px; height:6px;
  border-left:2px solid #1B8A5A; border-bottom:2px solid #1B8A5A; transform:rotate(-45deg);
}
.costs__col--out li::before {
  content:"\00d7"; position:absolute; left:4px; top:-1px; color:#B4443A; font-size:17px; font-weight:700;
}

/* booking card */
.trip__aside { position:relative; }
@media (min-width:1000px) { .trip__aside { position:sticky; top:96px; } }
.bookcard {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow);
}
.bookcard__from { font-size:13px; color:var(--muted); margin:0 0 2px; }
.bookcard__price {
  font-family:var(--display); font-weight:700; font-size:30px; color:var(--ink);
  line-height:1.1; margin:0 0 var(--s5); font-variant-numeric:tabular-nums;
}
.bookcard__price small { display:block; font-family:var(--sans); font-weight:500; font-size:12.5px; color:var(--muted); margin-top:4px; }
.bookcard__price--none { font-size:19px; color:var(--muted); }
.bookcard__facts { margin:0 0 var(--s5); display:grid; gap:10px; }
.bookcard__facts > div { display:flex; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
.bookcard__facts dt { font-size:13.5px; color:var(--muted); margin:0; }
.bookcard__facts dd { font-size:13.5px; font-weight:600; color:var(--ink); margin:0; text-align:right; }
.bookcard__cta { width:100%; }
.bookcard__call { margin:var(--s4) 0 0; font-size:13.5px; color:var(--muted); text-align:center; }
.bookcard__call a { color:var(--accent-ink); font-weight:600; }

/* WP Travel Engine / Contact Form 7 output, restyled to match the theme.
   The plugin ships its own blue buttons and boxy inputs. */
.trip__plugin input[type="text"],
.trip__plugin input[type="email"],
.trip__plugin input[type="tel"],
.trip__plugin input[type="number"],
.trip__plugin input[type="date"],
.trip__plugin select,
.trip__plugin textarea,
.prose input[type="text"], .prose input[type="email"], .prose input[type="tel"],
.prose select, .prose textarea {
  width:100%; padding:12px 14px; font-family:var(--sans); font-size:15px;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-sm);
}
.trip__plugin textarea, .prose textarea { min-height:120px; resize:vertical; }
.trip__plugin input:focus, .trip__plugin select:focus, .trip__plugin textarea:focus,
.prose input:focus, .prose select:focus, .prose textarea:focus {
  outline:3px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.trip__plugin input[type="submit"], .trip__plugin button[type="submit"],
.prose input[type="submit"], .wpcf7-submit {
  background:var(--accent-ink); color:#fff; border:0; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:15px;
  padding:13px 26px; border-radius:var(--r-pill); width:auto;
}
.trip__plugin input[type="submit"]:hover, .wpcf7-submit:hover { background:#9C4107; }
.trip__plugin label, .prose label { display:block; font-size:14px; font-weight:600;
  color:var(--ink); margin-bottom:6px; }
.trip__plugin form p, .prose form p { margin-bottom:var(--s4); }

/* Enquiry form: two columns on desktop, one on mobile. The plugin ships no
   layout of its own beyond stacked rows. */
.trip__plugin .wte_enquiry_contact_form { display:grid; gap:var(--s4); }
@media (min-width:700px) {
  .trip__plugin .wte_enquiry_contact_form { grid-template-columns:repeat(2,1fr); }
  .trip__plugin .enquiry-form-title,
  .trip__plugin .package-name-holder,
  .trip__plugin .row-repeater:has(textarea),
  .trip__plugin .subject-holder,
  .trip__plugin .message-holder { grid-column:1 / -1; }
}
.trip__plugin .row-repeater { min-width:0; }
.trip__plugin .enquiry-form-title { font-family:var(--display); font-size:1.35rem; color:var(--ink); margin:0 0 var(--s2); }
.trip__plugin .required { color:var(--accent-ink); }
.trip__plugin .wp-travel-engine-info { display:block; font-size:15px; color:var(--body); padding:12px 14px;
  background:var(--ground); border:1px solid var(--line); border-radius:var(--r-sm); }
.trip__plugin input[type="submit"] { justify-self:start; }

/* ---------- destinations grid ---------- */
.dests { display:grid; gap:20px; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); }
.dest {
  display:flex; flex-direction:column; text-decoration:none;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.dest:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.dest__media { position:relative; aspect-ratio:3/2; background:var(--navy-100, #E7EDF5); display:block; }
.dest__media img { width:100%; height:100%; object-fit:cover; }
.dest__media::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(4,38,78,.34) 0%, rgba(4,38,78,0) 55%);
}
.dest__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:5px; }
.dest__name { font-family:var(--display); font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.01em; }
.dest:hover .dest__name { color:var(--accent-ink); }
.dest__meta { font-size:13.5px; color:var(--muted); display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; }
.dest__from { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- numbered steps ---------- */
.steps { list-style:none; counter-reset:step; padding:0; margin:0; display:grid; gap:20px; }
@media (min-width:760px) { .steps { grid-template-columns:repeat(3,1fr); } }
.steps li {
  counter-increment:step; position:relative;
  background:var(--raised); border:1px solid var(--line);
  border-radius:var(--r); padding:52px 24px 24px;
}
.steps li::before {
  content:counter(step); position:absolute; top:22px; left:24px;
  width:30px; height:30px; border-radius:50%;
  background:var(--navy); color:#fff;
  font-family:var(--display); font-weight:700; font-size:14px;
  display:grid; place-items:center;
}
.steps h3 { font-size:17px; margin-bottom:8px; }
.steps p { font-size:15px; color:var(--muted); margin:0; }

/* ---------- share + whatsapp ---------- */
.btn--wa { background:#1DA851; color:#fff; }
.btn--wa:hover { background:#179144; color:#fff; }
.bookcard__wa { width:100%; margin-top:10px; }
.share { margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--line-soft); }
.share__label { display:block; font-size:12.5px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.share__btn {
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  color:var(--ink); background:var(--ground);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:8px 14px; margin:0 6px 6px 0; cursor:pointer; text-decoration:none;
  min-height:38px;
}
.share__btn:hover { border-color:var(--ink); color:var(--ink); }
.share__btn--wa { color:#12793B; border-color:#BDE5CC; background:#EFFAF3; }
.share__btn--wa:hover { border-color:#1DA851; color:#12793B; }
.share__btn.is-copied { border-color:#1DA851; color:#12793B; background:#EFFAF3; }