/* ------------------------------------------------------------------
   Travel DMC - article kit
   Loaded by tdmc-article-kit.php only on posts/pages whose content uses
   an "ak-" component, and scoped to body.tdmc-ak, so no other page on the
   site changes.

   Base typography touches only the DIRECT children of the content root
   (Gutenberg paragraphs, headings, lists, images). Everything the
   mu-plugins add around the content (hero, trust bar, interlink grid,
   closing CTA, author box) sits inside its own wrapper and is untouched.

   Colours are the site's measured tokens (see polish.css):
     ink #171c24 · body #4a5260 (7.9:1) · link #0b6f83 (5.8:1)
     muted #5f6b7a (5.4:1) · navy #102a3c · rule #e4edf2
   Breakpoint is 960, this theme's real mobile switch.
   ------------------------------------------------------------------ */

body.tdmc-ak{
  --ak-ink:#171c24;
  --ak-body:#4a5260;
  --ak-muted:#5f6b7a;
  --ak-link:#0b6f83;
  --ak-link-deep:#0a5d6e;
  --ak-cyan:#00c2e5;
  --ak-navy:#102a3c;
  --ak-navy-2:#16394f;
  --ak-rule:#e4edf2;
  --ak-tint:#f6fbfd;
  --ak-neutral:#f4f8fa;
  --ak-chip:#e6f7fb;
}

/* ==================================================================
   1. BASE TYPOGRAPHY (direct children of the content root only)
   The root selector contains an ID, so these rules skip any element
   carrying an "ak-" class; otherwise they would out-rank the components.
   ================================================================== */
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > :is(p, ul, ol):not([class*="ak-"]){
  font-size:16px;
  line-height:1.75;
  color:var(--ak-body);
  margin:0 0 18px;
}
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > :is(ul, ol):not([class*="ak-"]){
  padding-left:22px;
}
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > :is(ul, ol):not([class*="ak-"]) li{
  margin:0 0 8px;
}
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > h2{
  font-size:28px;
  line-height:1.3;
  font-weight:600;
  color:var(--ak-ink);
  margin:46px 0 14px;
  scroll-margin-top:110px;
  text-wrap:pretty;
}
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > h3{
  font-size:20px;
  line-height:1.4;
  font-weight:600;
  color:var(--ak-ink);
  margin:30px 0 8px;
  scroll-margin-top:110px;
}
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > :is(p, ul, ol, h2, h3) a,
body.tdmc-ak [class^="ak-"] a:not(.ak-btn){
  color:var(--ak-link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > :is(p, ul, ol) a:hover,
body.tdmc-ak [class^="ak-"] a:not(.ak-btn):hover{
  color:var(--ak-link-deep);
}
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) strong{
  color:var(--ak-ink);
  font-weight:600;
}

/* Reading measure. Posts sit in a ~850px column already, so this only
   applies on full-width pages (1140px), where 16px text would otherwise run
   to ~140 characters a line. Tables and card grids stay full width. */
body.tdmc-ak #main-content > .row-wrapper-x > :is(p, ul, ol, h2, h3, figure, .ak-answer, .ak-toc, .ak-note, .ak-faq, .ak-cta, .ak-sources, .ak-steps, .ak-checks){
  max-width:820px;
}

/* WPBakery pages carry kit content in a raw-HTML element wrapped in .ak-flow
   (raw HTML skips WPBakery's wpautop pass, which would strip the classes off
   <p class="ak-..."> elements). It gets the same base typography as above. */
body.tdmc-ak .ak-flow > :is(p, ul, ol, h2, h3, .ak-answer, .ak-toc, .ak-note, .ak-faq, .ak-sources, .ak-steps, .ak-checks){
  max-width:820px;
}
body.tdmc-ak .ak-flow > :first-child{ margin-top:0; }
body.tdmc-ak .ak-flow{ padding:10px 0 20px; }
body.tdmc-ak .ak-flow > p.ak-credit{
  margin:22px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--ak-muted);
}

/* images */
body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > figure.wp-block-image{
  margin:30px 0;
}
body.tdmc-ak figure.wp-block-image img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}
body.tdmc-ak figure.wp-block-image figcaption{
  margin:9px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--ak-muted);
  text-align:left;
}
body.tdmc-ak figure.wp-block-image figcaption a{ color:var(--ak-muted); }

/* ==================================================================
   2. "LAST CHECKED" LINE + SHORT-ANSWER BOX
   ================================================================== */
.ak-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 10px;
  margin:0 0 18px;
  font-size:13.5px;
  line-height:1.55;
  color:var(--ak-muted);
}
.ak-meta b{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:var(--ak-chip);
  color:var(--ak-link);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}

.ak-answer{
  margin:0 0 30px;
  padding:20px 24px;
  background:var(--ak-tint);
  border:1px solid var(--ak-rule);
  border-left:4px solid var(--ak-cyan);
  border-radius:12px;
}
.ak-label{
  display:block;
  margin:0 0 8px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ak-link);
}
.ak-answer p{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.7;
  color:#2b3340;
}
.ak-answer p:last-child{ margin:0; }

/* ==================================================================
   3. JUMP LINKS
   ================================================================== */
.ak-toc{
  margin:28px 0 8px;
  padding:18px 24px 14px;
  background:#fff;
  border:1px solid var(--ak-rule);
  border-radius:12px;
}
.ak-toc ol{
  columns:2;
  column-gap:36px;
  margin:0;
  padding:0 0 0 20px;
}
.ak-toc li{
  margin:0 0 7px;
  font-size:15px;
  line-height:1.5;
  color:var(--ak-muted);
  break-inside:avoid;
}

/* ==================================================================
   4. DATA TABLES (stack into labelled cards on phones)
   ================================================================== */
.ak-table-wrap{
  margin:24px 0 30px;
  border:1px solid var(--ak-rule);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.ak-table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  border:0;
}
.ak-table th{
  background:var(--ak-navy);
  color:#fff;
  text-align:left;
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  padding:13px 16px;
  border:0;
}
.ak-table td{
  padding:13px 16px;
  border:0;
  border-top:1px solid var(--ak-rule);
  vertical-align:top;
  font-size:15px;
  line-height:1.6;
  color:var(--ak-body);
  background:#fff;
}
.ak-table tbody tr:nth-child(even) td{ background:#f8fbfc; }
.ak-table td:first-child{
  font-weight:600;
  color:var(--ak-ink);
}
.ak-table tr.ak-hl td{ background:var(--ak-tint); }

/* ==================================================================
   5. CALLOUT
   ================================================================== */
.ak-note{
  margin:24px 0 28px;
  padding:18px 22px;
  border-radius:12px;
  background:var(--ak-neutral);
  border:1px solid var(--ak-rule);
}
.ak-note p{
  margin:0 0 8px;
  font-size:15.5px;
  line-height:1.7;
  color:var(--ak-body);
}
.ak-note p:last-child{ margin:0; }
.ak-note--warn{
  background:#fff8eb;
  border-color:#f1d7a3;
}
.ak-note--warn .ak-label{ color:#8a5300; }

/* ==================================================================
   6. TWO-COLUMN INTRO + "AT A GLANCE" CARD
   ================================================================== */
.ak-grid2{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:40px;
  align-items:start;
  margin:6px 0 10px;
}
.ak-grid2 h2{
  margin:0 0 14px;
  font-size:28px;
  line-height:1.3;
  font-weight:600;
  color:var(--ak-ink);
}
.ak-grid2 p{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.75;
  color:var(--ak-body);
}
.ak-side{
  padding:22px 24px 8px;
  background:var(--ak-neutral);
  border:1px solid var(--ak-rule);
  border-radius:12px;
}
.ak-side h3{
  margin:0 0 14px;
  font-size:17px;
  font-weight:600;
  color:var(--ak-ink);
}
.ak-side dl{ margin:0; }
.ak-side dt{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ak-muted);
}
.ak-side dd{
  margin:3px 0 14px;
  font-size:15px;
  line-height:1.55;
  color:var(--ak-ink);
}

/* ==================================================================
   7. ROUTE CARDS
   ================================================================== */
.ak-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:22px 0 30px;
}
.ak-card{
  display:flex;
  flex-direction:column;
  padding:22px 22px 18px;
  background:#fff;
  border:1px solid var(--ak-rule);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(16,42,60,.04);
}
.ak-card__tag{
  align-self:flex-start;
  padding:4px 11px;
  border-radius:999px;
  background:var(--ak-chip);
  color:var(--ak-link);
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
}
.ak-card h3{
  margin:12px 0 10px;
  font-size:19px;
  line-height:1.35;
  font-weight:600;
  color:var(--ak-ink);
}
/* Stops render as a small vertical timeline: a ring per stop joined by a
   rule. Inline chips wrapped mid-route in a 3-up card and left an arrow
   dangling at the line end, so the arrows (<i>, decorative) are hidden and
   only kept for no-CSS readers. */
.ak-card p.ak-route{
  display:flex;
  flex-direction:column;
  margin:0 0 14px;
  padding:4px 0 0;
}
.ak-route i{ display:none; }
.ak-route span{
  position:relative;
  display:block;
  padding:5px 0 5px 24px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.45;
  color:var(--ak-ink);
}
.ak-route span::before{
  content:"";
  position:absolute;
  left:2px;
  top:50%;
  width:10px;
  height:10px;
  margin-top:-5px;
  box-sizing:border-box;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--ak-cyan);
}
.ak-route span:first-of-type::before,
.ak-route span:last-of-type::before{
  background:var(--ak-cyan);
}
.ak-route span:not(:last-of-type)::after{
  content:"";
  position:absolute;
  left:6px;
  top:calc(50% + 7px);
  width:2px;
  height:calc(100% - 14px);
  background:#cfe3ea;
}
.ak-card p{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--ak-body);
}
.ak-card__foot{
  margin-top:auto !important;
  padding-top:12px;
  border-top:1px solid var(--ak-rule);
  font-size:13.5px !important;
  color:var(--ak-muted) !important;
}

/* ==================================================================
   8. NUMBERED STEPS + CHECKLIST
   ================================================================== */
.ak-steps{
  list-style:none;
  counter-reset:ak;
  margin:20px 0 28px;
  padding:0;
}
.ak-steps li{
  position:relative;
  counter-increment:ak;
  margin:0 0 18px;
  padding:0 0 0 48px;
  font-size:16px;
  line-height:1.7;
  color:var(--ak-body);
}
.ak-steps li::before{
  content:counter(ak);
  position:absolute;
  left:0;
  top:0;
  width:31px;
  height:31px;
  border-radius:50%;
  background:var(--ak-navy);
  color:#fff;
  font-size:14px;
  font-weight:600;
  line-height:31px;
  text-align:center;
}
.ak-steps li strong{ display:block; color:var(--ak-ink); font-weight:600; }

.ak-checks{
  list-style:none;
  margin:18px 0 26px;
  padding:0;
}
.ak-checks li{
  position:relative;
  margin:0 0 12px;
  padding:0 0 0 32px;
  font-size:16px;
  line-height:1.7;
  color:var(--ak-body);
}
.ak-checks li::before{
  content:"\2713";
  position:absolute;
  left:0;
  top:3px;
  width:21px;
  height:21px;
  border-radius:50%;
  background:var(--ak-chip);
  color:var(--ak-link);
  font-size:12px;
  font-weight:700;
  line-height:21px;
  text-align:center;
}

/* ==================================================================
   9. FAQ CARDS (same look as the destination-page FAQ block)
   ================================================================== */
.ak-faq{ margin:8px 0 10px; }
.ak-faq h3{
  margin:0;
  padding:20px 26px 8px;
  background:var(--ak-tint);
  border-left:3px solid var(--ak-cyan);
  border-radius:10px 10px 0 0;
  font-size:18px;
  font-weight:600;
  line-height:1.45;
  color:var(--ak-ink);
}
.ak-faq h3 + p{
  margin:0 0 14px;
  padding:0 26px 20px;
  background:var(--ak-tint);
  border-left:3px solid var(--ak-cyan);
  border-radius:0 0 10px 10px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--ak-body);
}

/* ==================================================================
   10. CLOSING CTA (posts; destination pages already get tdmc-close)
   ================================================================== */
.ak-cta{
  margin:40px 0 20px;
  padding:34px 36px;
  border-radius:14px;
  background:linear-gradient(180deg,var(--ak-navy-2) 0%,var(--ak-navy) 100%);
}
.ak-cta h2{
  margin:0 0 10px !important;
  font-size:25px !important;
  line-height:1.3;
  font-weight:600;
  color:#fff !important;
}
.ak-cta p{
  margin:0 0 20px;
  font-size:15.5px;
  line-height:1.7;
  color:#c3d3de;
}
.ak-cta__btns{ display:flex; flex-wrap:wrap; gap:12px; }
.ak-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 26px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  text-decoration:none !important;
  transition:background .18s ease;
}
.ak-btn--solid{ background:var(--ak-cyan); color:#062430 !important; }
.ak-btn--solid:hover{ background:#00d4fa; color:#062430 !important; }
.ak-btn--ghost{ background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.55); }
.ak-btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff !important; }

/* ==================================================================
   11. SOURCES
   ================================================================== */
.ak-sources{
  margin:34px 0 10px;
  padding:18px 0 0;
  border-top:1px solid var(--ak-rule);
}
.ak-sources ol{ margin:0; padding:0 0 0 20px; }
.ak-sources li{
  margin:0 0 6px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ak-muted);
}
.ak-sources a{ color:var(--ak-link); word-break:break-word; }

/* ==================================================================
   12. SMALL VIEWPORTS
   ================================================================== */
@media (max-width:960px){
  body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > :is(p, ul, ol):not([class*="ak-"]){ font-size:15.5px; }
  body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > h2,
  .ak-grid2 h2{ font-size:24px; margin-top:38px; }
  .ak-grid2 h2{ margin-top:0; }
  body.tdmc-ak :is(article.blog-single-post > .post, #main-content > .row-wrapper-x, .ak-flow) > h3{ font-size:18.5px; }
  .ak-grid2{ grid-template-columns:1fr; gap:24px; }
  .ak-cards{ grid-template-columns:1fr; gap:14px; }
  .ak-toc ol{ columns:1; }
  .ak-answer{ padding:18px 18px; }
  .ak-cta{ padding:26px 20px; }
  .ak-cta__btns{ flex-direction:column; }
  .ak-btn{ width:100%; }
  .ak-faq h3{ font-size:17px; padding:16px 18px 8px; }
  .ak-faq h3 + p{ font-size:15px; padding:0 18px 16px; }
  /* inline (not inline-block) so a long entry wraps beside its number */
  .ak-toc li{ margin:0 0 12px; line-height:1.6; }
}

/* tables become one labelled card per row */
@media (max-width:680px){
  .ak-table-wrap{ border:0; border-radius:0; background:transparent; overflow:visible; }
  .ak-table, .ak-table tbody, .ak-table tr, .ak-table td{ display:block; width:100%; }
  .ak-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .ak-table tr{
    margin:0 0 12px;
    border:1px solid var(--ak-rule);
    border-radius:12px;
    overflow:hidden;
    background:#fff;
  }
  .ak-table tbody tr:nth-child(even) td,
  .ak-table td{ background:#fff; }
  .ak-table td{ border-top:1px solid var(--ak-rule); padding:10px 14px; font-size:15px; }
  .ak-table td:first-child{
    border-top:0;
    background:var(--ak-neutral) !important;
    font-size:15.5px;
  }
  .ak-table td[data-label]:not(:first-child)::before{
    content:attr(data-label);
    display:block;
    margin:0 0 2px;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--ak-muted);
  }
}