/* ------------------------------------------------------------------
   Travel DMC - destination page styling  ("cleaner / corporate" pass)
   Loaded only on pages whose slug ends in "-dmc".

   PRESENTATION ONLY. This file changes no markup, copy, links or heading
   levels, so nothing here can affect search rankings.

   Approach: the theme uses large full-bleed blocks of saturated brand
   cyan as section backgrounds. That reads consumer rather than trade.
   Here cyan is demoted to an accent (rules, borders, buttons) and the
   big surfaces become deep slate or near-white, which is what gives the
   corporate feel. Several theme values are inline styles, so a number of
   these rules need !important to win.

   Breakpoint note: this theme treats max-width 960 as "small viewport"
   (it swaps in the hamburger there), so mobile rules use 960, not 767.
   ------------------------------------------------------------------ */

:root{
  --tdmc-cyan:#00c2e5;
  --tdmc-navy:#102a3c;
  --tdmc-navy-2:#16394f;
  --tdmc-ink:#171c24;
  --tdmc-body:#4a5260;
  --tdmc-muted:#c3d3de;
  --tdmc-tint:#f6fbfd;
  --tdmc-neutral:#f4f8fa;
  --tdmc-rule:#e4edf2;
}

/* ==================================================================
   1. THE "WELCOME" BAND
   The page now opens with a dark hero (tdmc-hero.php), so this band no
   longer needs to carry the dark statement - two stacked dark blocks
   read as heavy and the two headlines say the same thing twice. It
   becomes a light section instead, giving the page an alternating
   rhythm: dark hero, light trust bar, light intro, cards, dark support
   band, light FAQ, dark closing CTA.
   ================================================================== */
.bg-colorskin{
  background-color:#ffffff !important;
  background-image:none !important;
  padding-top:56px !important;
  padding-bottom:48px !important;
}
.bg-colorskin .max-overlay{ display:none !important; }
.bg-colorskin .wpb_text_column h2,
.bg-colorskin .wpb_text_column h1{
  font-size:32px;
  line-height:1.25;
  font-weight:600;
  color:var(--tdmc-ink) !important;
  margin:0 0 8px;
  text-align:center;
}
.bg-colorskin .wpb_text_column h2 span,
.bg-colorskin .wpb_text_column h2 strong,
.bg-colorskin .wpb_text_column h2 a,
.bg-colorskin .wpb_text_column h1 span,
.bg-colorskin .wpb_text_column h1 strong,
.bg-colorskin .wpb_text_column h1 a{
  color:var(--tdmc-ink) !important;
  font-weight:600;
}
.bg-colorskin .wpb_text_column h2 a,
.bg-colorskin .wpb_text_column h1 a{
  text-decoration:none;
  border-bottom:2px solid rgba(0,194,229,.8);
}
.bg-colorskin .wpb_text_column h2::after,
.bg-colorskin .wpb_text_column h1::after{
  content:"";
  display:block;
  width:64px;
  height:3px;
  margin:18px auto 0;
  background:var(--tdmc-cyan);
  border-radius:2px;
}
.bg-colorskin .wpb_text_column p{
  max-width:74ch;
  margin-left:auto;
  margin-right:auto;
  text-align:left !important;
  font-size:15.5px;
  line-height:1.8;
  color:var(--tdmc-body) !important;
}
.bg-colorskin .wpb_text_column p span{ color:var(--tdmc-body) !important; }
.bg-colorskin .wpb_text_column p a{
  color:var(--tdmc-cyan-text) !important;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* the "15+ YEARS EXPERIENCE" / "24x7 SUPPORT" pair */
.bg-colorskin .icon-box1{
  border-left-color:var(--tdmc-cyan) !important;
}
.bg-colorskin .icon-box1 h4,
.bg-colorskin .icon-box1 h4 span{ color:var(--tdmc-ink) !important; }
.bg-colorskin .icon-box1 p,
.bg-colorskin .icon-box1 p span{ color:var(--tdmc-body) !important; }
.bg-colorskin .icon-box1 i,
.bg-colorskin .icon-box1 i:before{ color:var(--tdmc-cyan-text) !important; }

/* ==================================================================
   2. THE SECOND FULL-BLEED BAND  (tour cards + "24 Hours / 7 Days")
   This band was saturated cyan with white text over a photo. The white
   text is theme-level and the block was designed for a dark ground, so
   it stays dark - just changed from cyan to the same slate as the hero,
   and the busy photo behind it is dropped. Making this light would have
   left white text on near-white, which is what broke it first time.
   ================================================================== */
.blox.dark:not(.bg-colorskin){
  background-image:none !important;
  background-color:var(--tdmc-navy) !important;
  padding-top:56px !important;
  padding-bottom:56px !important;
}
.blox.dark:not(.bg-colorskin) .max-overlay{ display:none !important; }
.blox.dark:not(.bg-colorskin) h2,
.blox.dark:not(.bg-colorskin) h3,
.blox.dark:not(.bg-colorskin) h5,
.blox.dark:not(.bg-colorskin) h6{
  color:#fff !important;
}
.blox.dark:not(.bg-colorskin) h3{
  font-size:26px;
  font-weight:600;
}
/* body copy that sits directly on the slate, not inside a white card */
.blox.dark:not(.bg-colorskin) > .wpb_row p,
.blox.dark:not(.bg-colorskin) .wpb_text_column p{
  color:var(--tdmc-muted) !important;
}

/* ==================================================================
   3. TOUR CARDS  (article.icon-box22)
   The visible defect was staggering: images had no fixed height and the
   "View Details" buttons landed at different vertical positions. Fixed
   media ratio + flex column + auto margin on the button aligns them.
   ================================================================== */
article.icon-box22{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:410px;
  background:#fff;
  border:1px solid var(--tdmc-rule);
  border-radius:12px;
  overflow:hidden;
  padding:0 0 22px;
  box-shadow:0 1px 2px rgba(16,42,60,.04);
  transition:box-shadow .18s ease, transform .18s ease;
}
article.icon-box22:hover{
  box-shadow:0 10px 26px rgba(16,42,60,.10);
  transform:translateY(-2px);
}
article.icon-box22 > a:first-child{
  display:block;
  line-height:0;
}
article.icon-box22 img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  margin:0;
  border-radius:0;
}
article.icon-box22 h4,
.blox.dark:not(.bg-colorskin) article.icon-box22 h4{
  margin:20px 22px 8px;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  letter-spacing:.01em;
  text-align:left;
  color:var(--tdmc-ink) !important;
}
article.icon-box22 p,
.blox.dark:not(.bg-colorskin) article.icon-box22 p{
  margin:0 22px 18px;
  font-size:14.5px;
  line-height:1.65;
  text-align:left;
  color:var(--tdmc-body) !important;
}
article.icon-box22 .magicmore{
  margin:auto 22px 0;
  align-self:flex-start;
  padding:9px 18px;
  border:1px solid var(--tdmc-cyan);
  border-radius:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0b6f83 !important;
  background:#fff;
  transition:background .18s ease, color .18s ease;
}
article.icon-box22 .magicmore:hover{
  background:#0b6f83;
  border-color:#0b6f83;
  color:#fff !important;
}
/* solid CTA ("View All Activities"): white on cyan is only 2.1:1, so the
   fill is darkened to carry white text at AA. */
.blox a.button.theme-skin,
.blox a.button.theme-skin.rounded{
  background-color:#0b6f83 !important;
  border-color:#0b6f83 !important;
  color:#fff !important;
}
/* Equal-height cards across columns. The theme lays these out as floated
   Bootstrap columns, so each card sized itself independently and the rows
   staggered. Making the row a stretch flex container aligns them. */
.blox.brdr-b1e .vc_inner.vc_row-fluid,
.blox.dark:not(.bg-colorskin) .vc_inner.vc_row-fluid{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.blox.brdr-b1e .vc_inner.vc_row-fluid > .wpb_column,
.blox.dark:not(.bg-colorskin) .vc_inner.vc_row-fluid > .wpb_column{
  display:flex;
  float:none;
}
.blox.brdr-b1e .vc_inner .wpb_column > .vc_column-inner,
.blox.dark:not(.bg-colorskin) .vc_inner .wpb_column > .vc_column-inner{
  display:flex;
  width:100%;
}
.blox.brdr-b1e .vc_inner .wpb_column > .vc_column-inner > .wpb_wrapper,
.blox.dark:not(.bg-colorskin) .vc_inner .wpb_column > .vc_column-inner > .wpb_wrapper{
  display:flex;
  flex-direction:column;
  width:100%;
}
.blox.brdr-b1e .vc_inner article.icon-box22,
.blox.dark:not(.bg-colorskin) .vc_inner article.icon-box22{
  flex:1 1 auto;
}

/* The theme promotes one card per row with .w-featured, which offsets and
   enlarges it. In a uniform grid that reads as a misaligned card rather
   than a deliberate highlight, so the offset is removed and the emphasis
   is carried by a cyan border instead. */
article.icon-box22.w-featured{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 0 22px !important;
  transform:none !important;
  box-shadow:0 1px 2px rgba(16,42,60,.04);
  border-color:var(--tdmc-cyan);
}
article.icon-box22.w-featured:hover{
  box-shadow:0 10px 26px rgba(16,42,60,.10);
}

/* the theme inserts spacer rules between stacked cards */
.vc_inner .vertical-space1{
  margin:0 0 26px;
  border:0;
  height:0;
}

/* ==================================================================
   4. SECTION HEADINGS  ("Things To Do In ... !", "ABOUT Travel DMC")
   ================================================================== */
.blox h2,
.wpb_row h2.maxtitle,
.wpb_row .maxtitle h2{
  letter-spacing:.005em;
}

/* ==================================================================
   5. FAQ BLOCK
   Flat run of h2 then h3/p pairs, so each "card" is built from the pair:
   the h3 forms the top and the p that follows forms the bottom.
   ================================================================== */
.tdmc-faq-block{ padding-top:10px; padding-bottom:10px; }
.tdmc-faq-block h2{
  position:relative;
  margin:0 0 28px;
  padding-bottom:14px;
  font-size:32px;
  font-weight:600;
  color:var(--tdmc-ink);
  border-bottom:2px solid var(--tdmc-rule);
}
.tdmc-faq-block h2::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:74px; height:2px;
  background:var(--tdmc-cyan);
}
.tdmc-faq-block h3{
  margin:0;
  padding:20px 26px 8px;
  background:var(--tdmc-tint);
  border-left:3px solid var(--tdmc-cyan);
  border-radius:10px 10px 0 0;
  font-size:18px;
  font-weight:600;
  line-height:1.45;
  color:var(--tdmc-ink);
}
.tdmc-faq-block h3 + p{
  margin:0 0 14px;
  padding:0 26px 20px;
  background:var(--tdmc-tint);
  border-left:3px solid var(--tdmc-cyan);
  border-radius:0 0 10px 10px;
  font-size:15.5px;
  line-height:1.75;
  color:var(--tdmc-body);
}
.tdmc-faq-block h3 + p:last-child{ margin-bottom:0; }

/* ==================================================================
   6. SMALL VIEWPORTS  (theme's real breakpoint is 960)
   ================================================================== */
@media (max-width:960px){
  /* Cards stack one per row on small screens, so the height-equalising flex
     chain is not only pointless here, it constrained the card and clipped
     the copy inside it. Revert to normal flow and let each card size itself. */
  .blox.brdr-b1e .vc_inner.vc_row-fluid,
  .blox.dark:not(.bg-colorskin) .vc_inner.vc_row-fluid,
  .blox.brdr-b1e .vc_inner.vc_row-fluid > .wpb_column,
  .blox.dark:not(.bg-colorskin) .vc_inner.vc_row-fluid > .wpb_column,
  .blox.brdr-b1e .vc_inner .wpb_column > .vc_column-inner,
  .blox.dark:not(.bg-colorskin) .vc_inner .wpb_column > .vc_column-inner,
  .blox.brdr-b1e .vc_inner .wpb_column > .vc_column-inner > .wpb_wrapper,
  .blox.dark:not(.bg-colorskin) .vc_inner .wpb_column > .vc_column-inner > .wpb_wrapper{
    display:block;
  }
  article.icon-box22,
  .blox.brdr-b1e .vc_inner article.icon-box22,
  .blox.dark:not(.bg-colorskin) .vc_inner article.icon-box22{
    display:block;
    flex:none;
    height:auto;
    min-height:0;
    margin-bottom:20px;
  }
  /* button was pushed down by margin-top:auto in the flex layout */
  article.icon-box22 .magicmore{ margin:4px 22px 0; }
  /* 44px minimum touch target */
  a.magicmore,
  .blox a.button.theme-skin{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    font-size:12px !important;
  }

  .bg-colorskin{ padding-top:48px !important; padding-bottom:44px !important; }
  .bg-colorskin .wpb_text_column h2,
.bg-colorskin .wpb_text_column h1{ font-size:27px; }
  .bg-colorskin .wpb_text_column h2::after,
.bg-colorskin .wpb_text_column h1::after{ margin-top:16px; }
  .bg-colorskin .wpb_text_column p{ font-size:15px; line-height:1.75; }
  article.icon-box22{ min-height:0; }
  article.icon-box22 img{ height:200px; }
  .tdmc-faq-block h2{ font-size:25px; margin-bottom:22px; }
  .tdmc-faq-block h3{ font-size:17px; padding:16px 18px 8px; }
  .tdmc-faq-block h3 + p{ font-size:15px; padding:0 18px 16px; }
}

/* ==================================================================
   12. CARD DEAD SPACE
   The min-height:410px floor set earlier forced every card to that height
   even when a row's natural height was lower, leaving 85-108px of empty
   space above "View Details". Removing the floor lets the flex row
   equalise to its own tallest card, and clamping the title to two lines
   stops one long headline dragging a whole row taller.
   ================================================================== */
article.icon-box22{
  min-height:0;
}
article.icon-box22 h4{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.7em;          /* two lines at 1.35 line-height */
}
article.icon-box22 p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.3em;          /* two lines at 1.65 line-height */
}

/* ==================================================================
   13. PARTNER LOGO STRIP
   Logos were dropped in at their native sizes - heights ran from 66px to
   300px and widths from 250px to 375px, so nothing lined up. Each logo
   now sits in a fixed box and is scaled to fit inside it, which is how a
   logo wall is supposed to behave.
   ================================================================== */
.vc_col-sm-4 .wpb_single_image .vc_single_image-wrapper,
.wpb_single_image.vc_align_center .vc_single_image-wrapper{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:110px !important;
  width:100% !important;
}
.vc_col-sm-4 .wpb_single_image img{
  max-height:100%;
  max-width:210px;
  width:auto;
  height:auto;
  object-fit:contain;
  margin:0 auto;
}
.vc_col-sm-4 .wpb_single_image figure{
  margin:0;
}
@media (max-width:960px){
  .vc_col-sm-4 .wpb_single_image .vc_single_image-wrapper{ height:92px; }
  .vc_col-sm-4 .wpb_single_image img{ max-width:180px; }
}

/* ==================================================================
   14. TWO ALIGNMENT DEFECTS
   ================================================================== */

/* 14a. Dead space above the hero.
   The theme gives #main-content.container padding-top:96px to clear the
   absolutely-positioned header. On these pages the header ends at 151px
   and the container already starts at 231px, so the padding clears
   nothing and just pushes the hero down by ~96px. Trimmed to a normal
   section gap. Desktop only - the mobile header is in normal flow and
   its 35px is correct. */
@media (min-width:961px){
  /* header.css sets 96px at body.has-header-type11 #main-content.container,
     so this has to out-specify it rather than just repeat !important. The
     page title bar already sits between the absolute header and the
     container on these pages, so the clearance is not needed here. */
  body.tdmc-has-hero.has-header-type11 #main-content.container,
  body.tdmc-has-hero #main-content.container{
    padding-top:30px !important;
  }
}

/* 14b. The "15+ YEARS EXPERIENCE" / "24x7 CUSTOMER SUPPORT" boxes.
   The icon floats left. The paragraph has overflow:hidden so it forms a
   block formatting context and sits beside the float at x=175, but the
   h4 does not, so its box starts at the container edge and its text
   lands at ~165 - the heading and its own paragraph were about 10px out
   of line, which is the misalignment that keeps being visible. Giving
   the heading the same BFC lines the two up exactly. */
.icon-box1 h4,
.icon-box .icon-box1 h4{
  overflow:hidden;
  margin-top:0;
  line-height:1.35;
}
.icon-box1 i,
.icon-box1 i:before{
  color:var(--tdmc-cyan-text) !important;
}

/* 14c. THE STRAY LINE beside "15+ YEARS EXPERIENCE" / "24x7 CUSTOMER SUPPORT".
   Root cause, from the theme's own stylesheet:
       .icon-box1 i:after { content:""; width:3px; height:65%;
                            background:#83d3f0; position:absolute; margin-left:10px }
   It is 65% of the BOX height, not of the text, and .icon-box1 is
   height:100% - so when the two columns end up different heights the two
   dividers come out different lengths and overshoot their copy. The theme
   also puts a 75px bottom margin on the icon, which is what inflates the
   box past its content in the first place.
   The divider is decorative and adds nothing here, so it goes; the icon
   margin is brought back to something proportionate. */
.icon-box1 img:after,
.icon-box1 i:after{
  display:none !important;
  content:none !important;
}
.icon-box1 img,
.icon-box1 i{
  margin:0 18px 0 0 !important;
}
.icon-box1{
  padding:0 10px 0 0 !important;
  cursor:default !important;
}
/* the theme flips the whole box to solid cyan on hover, which is loud and
   drags the copy to white mid-read. A quiet tint is enough. */
.icon-box1:hover{ background:transparent !important; }
.icon-box1:hover h4,
#wrap .icon-box1:hover p,
#wrap .icon-box1:hover i:before{ color:inherit !important; }
#wrap .icon-box1:hover i:before{ color:var(--tdmc-cyan-text) !important; }