/* ============================================================
   TRAVEL WITH NUPUR — MASTER STYLES
   Canonical design-system stylesheet, enqueued site-wide.
   Source of truth: twn-page-template.html
   Any new page fragment (Custom HTML block) should use ONLY
   classes defined in this file — no inline <style> blocks.
   ============================================================ */

/* ------------------------------------------------------------
   1. COLOR / TYPE TOKENS
   ------------------------------------------------------------ */
:root{
  --navy: #17294b;
  --ink: #1b2338;
  --cream: #f5f7f3;
  --paper: #ffffff;
  --gold: #c6a24a;
  --muted: #95a0ae;
  --line: rgba(23,41,75,.14);

  --font-display: "Zen Old Mincho", Georgia, serif;
  --font-body: "Zen Kaku Gothic New", system-ui, sans-serif;

  --maxw: 1120px;
}

/* ------------------------------------------------------------
   2. BASE ELEMENTS
   ------------------------------------------------------------ */
.page *{ box-sizing:border-box; }
.page{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.page a{ color:inherit; text-decoration:none; }
.page h1,.page h2,.page h3{
  font-family:var(--font-display); font-weight:500; color:var(--navy);
  line-height:1.15; margin:0 0 .5em;
}
.page h1{ font-size:clamp(2.2rem,5vw,3.4rem); }
.page h2{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.page h3{ font-size:1.25rem; }
.page p{ margin:0 0 1em; }
.page em{ font-style:italic; color:var(--gold); }
.page .container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.page .btn{
  display:inline-block; font-family:var(--font-body); font-weight:300; font-size:14px;
  color:var(--navy); border:2px solid var(--navy); border-radius:22px;
  padding:8px 18px; transition:background .18s,color .18s; cursor:pointer;
}
.page .btn:hover{ background:var(--navy); color:var(--cream); }
.page .btn--solid{ background:var(--navy); color:var(--cream); }
.page .btn--solid:hover{ background:transparent; color:var(--navy); }
.page .eyebrow{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}
.page .lead{ font-size:1.05rem; max-width:60ch; }

/* ------------------------------------------------------------
   3. HEADER (global — matches twn-page-template.html)
   ------------------------------------------------------------ */
.site-header{
  background:var(--cream) !important;
  /* Hello Elementor's own theme CSS reuses the class name ".site-header"
     for its native header widget — these !important overrides ensure our
     branded header always wins regardless of stylesheet load order. */
  max-width:none !important; width:auto !important;
  padding:0 !important; margin:0 !important;
  display:block !important;
}
.site-header .nav{
  max-width:var(--maxw); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; gap:28px;
}
.brand{ display:flex; align-items:center; gap:12px; margin-right:auto; }
.brand__badge{
  width:34px; height:34px; border-radius:10px; border:2px solid var(--navy);
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:16px; color:var(--navy);
}
.brand__name{ font-family:var(--font-display); font-weight:500; font-size:17px; color:var(--navy); line-height:1.05; }
.brand__tag{ font-family:var(--font-body); font-weight:300; font-size:11px; letter-spacing:.5px; color:var(--muted); }
.nav__links{ display:flex; align-items:center; gap:26px; }
.nav__links a{ font-size:14px; font-weight:300; color:var(--ink); position:relative; text-decoration:none; }
.nav__links a:hover{ color:var(--navy); }
.nav__links a[aria-current="page"]{ color:var(--navy); }
.nav__links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold);
}

@media (max-width:720px){
  .site-header .nav{ flex-wrap:wrap; gap:14px 20px; }
  .nav__links{ order:3; width:100%; gap:18px; flex-wrap:wrap; }
  .brand{ margin-right:0; }
  .brand + .btn{ margin-left:auto; }
}

/* ------------------------------------------------------------
   4. FOOTER (global — matches twn-page-template.html)
   ------------------------------------------------------------ */
.site-footer{
  background:var(--cream) !important; color:var(--ink) !important;
  padding:56px 0 30px !important; margin:0 !important;
  max-width:none !important; width:auto !important;
  display:block !important;
}
.footer__grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px;
  padding-bottom:34px; border-bottom:1px solid var(--line);
}
.footer__brand{ font-family:var(--font-display); font-weight:400; font-size:22px; color:var(--navy); margin:0 0 10px; }
.footer__blurb{ font-size:14px; max-width:34ch; color:var(--ink); }
.footer__col h4{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin:2px 0 14px;
}
.footer__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.footer__col a{ font-size:14px; font-weight:300; color:var(--ink); text-decoration:none; }
.footer__col a:hover{ color:var(--navy); }
.footer__base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; font-size:12px; color:var(--muted);
}
@media (max-width:720px){
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brandwrap{ grid-column:1 / -1; }
}

/* ------------------------------------------------------------
   5. JOURNAL PAGE COMPONENTS
   ------------------------------------------------------------ */
.journal-hero{ padding:80px 0 46px; }
.journal-hero h1{ max-width:16ch; }
.journal-hero .lead{ color:var(--ink); }
.journal-stats{
  display:flex; gap:44px; flex-wrap:wrap; margin-top:30px;
  padding-top:26px; border-top:1px solid var(--line);
}
.stat__n{ font-family:var(--font-display); font-weight:500; font-size:1.7rem; color:var(--navy); line-height:1; }
.stat__l{
  display:block; margin-top:6px;
  font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted);
}

.journal-year{ padding:0 0 58px; }
.year-head{ display:flex; align-items:baseline; gap:22px; margin:0 0 34px; }
.year-head__y{
  font-family:var(--font-display); font-weight:500; line-height:1;
  font-size:clamp(1.9rem,4vw,2.6rem); color:var(--navy);
}
.year-head__rule{ flex:1; height:1px; background:var(--line); align-self:center; }
.year-head__count{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}

.journal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:38px 30px; }

.entry{ display:block; color:inherit; text-decoration:none; }
.entry__img{
  aspect-ratio:4/3; border-radius:14px; overflow:hidden; margin:0 0 16px;
  background:linear-gradient(135deg,#e9ede6,#dbe1e8);
  box-shadow:0 1px 0 var(--line);
}
.entry__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s ease;
}
.entry:hover .entry__img img{ transform:scale(1.05); }
.entry__meta{
  font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px;
}
.entry__country{
  font-family:var(--font-display); font-weight:500; font-size:1.3rem; color:var(--navy);
  margin:0 0 8px; transition:color .18s;
}
.entry:hover .entry__country{ color:var(--gold); }
.entry__note{ font-size:14px; line-height:1.6; color:var(--ink); margin:0; max-width:42ch; }

@media (max-width:900px){ .journal-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .journal-grid{ grid-template-columns:1fr; gap:32px; } }

/* ------------------------------------------------------------
   6. BLOG INDEX PAGE COMPONENTS
   ------------------------------------------------------------ */
.blog-intro{ max-width:720px; margin-bottom:40px; }

.filters{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 52px; }
.filters__label{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted); margin-right:6px;
}
.chip{
  font-family:var(--font-body); font-weight:400; font-size:13px; color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:20px;
  padding:7px 15px; cursor:pointer; transition:background .16s,color .16s,border-color .16s;
}
.chip:hover{ border-color:var(--navy); }
.chip.is-active{ background:var(--navy); color:var(--cream); border-color:var(--navy); }

/* Shared cover tile (placeholder art; swap for a real <img> per post) */
.tile{ position:relative; display:block; overflow:hidden;
  background:linear-gradient(135deg,var(--g1,#17294b),var(--g2,#2a3f6b)); }
.tile::before{ content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 22px); }
/* When a .tile holds a real <img> (photo placed instead of the gradient
   placeholder), suppress the decorative diagonal-line overlay above —
   it was only meant to texture the empty gradient background and reads
   as stray white lines across an actual photo. */
.tile:has(img)::before{ display:none; }
.tile__icon{ position:absolute; inset:0; display:grid; place-items:center; }
.tile__icon svg{ width:44px; height:44px; color:rgba(245,247,243,.40); }
.tile__cat{
  position:absolute; left:16px; bottom:14px;
  font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:rgba(245,247,243,.88);
}
/* per-theme gradients (harmonious, all in-palette) */
.m--mindset   { --g1:#17294b; --g2:#2c4272; }
.m--logistics { --g1:#17294b; --g2:#3a4a64; }
.m--money     { --g1:#1e2f52; --g2:#8a6f34; }
.m--tools     { --g1:#132339; --g2:#234a5e; }
.m--reflection{ --g1:#1b2338; --g2:#514255; }
.m--outdoors  { --g1:#17294b; --g2:#2e4a45; }
.m--wellbeing { --g1:#2a3a54; --g2:#586279; }
.m--safety    { --g1:#132339; --g2:#3a3550; }

/* Featured (lead) post */
.featured{
  display:grid; grid-template-columns:1.08fr .92fr; gap:0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  margin-bottom:60px; background:var(--paper);
}
.featured .tile{ height:100%; min-height:360px; }
.featured__body{ padding:46px 44px; display:flex; flex-direction:column; justify-content:center; }
.featured__body .eyebrow{ margin-bottom:12px; }
.featured__body h2{ margin-bottom:.4em; }
.featured__body .note{ font-size:1.02rem; max-width:46ch; color:var(--ink); }

/* Post grid */
.section-label{
  font-family:var(--font-body); font-weight:500; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:16px; margin-bottom:30px; border-bottom:1px solid var(--line);
}
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:38px 30px; }
@media (max-width:900px){ .posts{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .posts{ grid-template-columns:1fr; } }

.card{
  display:flex; flex-direction:column; background:var(--paper);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(23,41,75,.10); }
.card .tile{ aspect-ratio:3/2; }
.card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:9px; flex:1; }
.card__title{ font-size:1.18rem; margin:0; }
.card__note{ font-size:14px; color:var(--ink); margin:0; flex:1; }
.readlink{ margin-top:6px; font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--navy); }
.readlink .arw{ color:var(--gold); }
.card:hover .readlink{ color:var(--gold); }

.no-results{ display:none; color:var(--muted); font-size:14px; padding:20px 0; }

@media (max-width:760px){
  .featured{ grid-template-columns:1fr; }
  .featured .tile{ min-height:220px; }
  .featured__body{ padding:34px 28px; }
}

/* ------------------------------------------------------------
   7. BOOKING / SESSION FORM COMPONENTS
   ------------------------------------------------------------ */
.bk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:860px){ .bk-grid{ grid-template-columns:1fr; } }
.bk-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:32px; }
.bk-card h2{ margin:0 0 4px; }
.bk-sub,.bk-note{ color:var(--muted); font-size:14px; margin:0 0 24px; }

.page label{ display:block; font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.3px; color:var(--ink); margin:20px 0 7px; }
.page form>label:first-of-type{ margin-top:0; }
.page input[type="text"],.page input[type="email"]{
  width:100%; padding:12px 14px; font-size:15px; font-family:var(--font-body); font-weight:300;
  color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px;
  transition:border-color .15s,box-shadow .15s;
}
.page input[type="text"]:focus,.page input[type="email"]:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(23,41,75,.12);
}

.page fieldset{ border:0; padding:0; margin:20px 0 0; }
.page legend{ font-family:var(--font-body); font-weight:500; font-size:13px; letter-spacing:.3px; padding:0; margin-bottom:9px; }
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:420px){ .choices{ grid-template-columns:1fr; } }
.choice{
  position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
  height:54px; border:1px solid var(--line); border-radius:10px; padding:12px; cursor:pointer;
  font-size:14px; color:var(--ink); transition:border-color .15s,background .15s;
}
.choice:hover{ border-color:var(--navy); }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice .t{ font-weight:400; }
.choice:has(input:checked){ border-color:var(--navy); background:var(--cream); }
.choice:has(input:checked) .t{ color:var(--navy); font-weight:500; }

.consent{ display:flex; gap:10px; align-items:flex-start; margin:24px 0 0; font-size:13px; color:var(--muted); }
.consent input{ margin-top:3px; }
.consent a{ color:var(--navy); text-decoration:underline; }

.bk-submit{ width:100%; text-align:center; margin-top:24px; padding:13px 18px; font-size:15px; border-radius:26px; }
.bk-msg{ margin-top:14px; font-size:14px; padding:12px 14px; border-radius:10px; display:none; }
.bk-msg.show{ display:block; }
.bk-msg.err{ background:#fbeceb; color:#8a1c14; }
.bk-msg.ok{ background:var(--cream); color:var(--navy); }

.hp{ position:absolute; left:-9999px; }
.calendly-inline-widget{ min-width:320px; height:640px; }

/* ------------------------------------------------------------
   8. POST-SPECIFIC FIXES (blog posts vs. Pages)
   ------------------------------------------------------------
   Blog POSTS use Hello Elementor's "Default template," which renders
   the theme's own header, footer, and post-title block around post
   content — unlike Pages, which use the elementor_canvas template and
   render nothing extra. Every post's content block still needs the
   full branded header/hero/footer baked in (same as a Page); the rules
   below hide the theme's duplicate chrome and patch two knock-on CSS
   collisions that only show up on posts.
   ------------------------------------------------------------ */

/* Hello Elementor's theme.css sets ".page-content a { text-decoration: underline }"
   and loads AFTER this stylesheet, so on posts (wrapped in .page-content) it
   silently overrides the ".page a { text-decoration: none }" rule above. Pages
   aren't wrapped in .page-content, so they never hit this. */
.page a,
.page-content a {
  text-decoration: none !important;
}
.nav__links a,
.footer__col a,
.entry__note a,
.card__note a {
  text-decoration: none !important;
  color: inherit !important;
}
.brand__name,
.brand__tag {
  text-decoration: none !important;
}

/* Accent/em text color: gold on Pages (.page em, matches the base rule in
   section 2 above), deep green + bold on Posts (.page-content em) for
   readability. .page-content em is declared after .page em so it wins the
   cascade tie on posts, where both selectors match (post content is a .page
   nested inside .page-content). Pages never have a .page-content ancestor,
   so they simply keep gold. */
.page-content em {
  color: #1F4A33 !important;
  font-weight: 700 !important;
}

/* Hide the theme's own auto header/footer/post-title chrome on posts only. */
body.single-post > header.site-header.dynamic-header,
body.single-post > footer.site-footer.dynamic-footer,
body.single-post .page-header {
  display: none !important;
}

/* ------------------------------------------------------------
   NOTE FOR FUTURE PAGES:
   As new page types are built, append their component classes
   below this line rather than embedding <style> blocks in the
   page content itself. This keeps master-styles.css the single
   source of truth referenced in global-context.md.
   ------------------------------------------------------------ */