/* ------------------------------------------------------------------
   Travel DMC - site-wide UI polish
   Loaded on every front-end page, after header.css.

   PRESENTATION ONLY. No markup, copy, links or heading levels are changed
   by this file, so none of it can affect search rankings.

   The through-line: the brand cyan #00c2e5 measures 2.13:1 on white, well
   under the 4.5:1 needed for text. It stays the brand colour for fills,
   logos and graphics; anywhere it carries *text* it is swapped for a
   darkened variant that reads as the same colour but passes AA.

   Measured on white:  #00c2e5 = 2.13:1   #0b6f83 = 5.81:1
                       #9aa0a8 = 2.64:1   #6b7280 = 4.83:1
   Breakpoint is 960 (this theme's real mobile switch), not 767.
   ------------------------------------------------------------------ */

:root{
  --tdmc-cyan:#00c2e5;        /* fills, graphics, logo - never text on white */
  --tdmc-cyan-text:#0b6f83;   /* cyan that carries text        5.81:1 */
  --tdmc-cyan-deep:#0a5d6e;   /* hover / pressed               7.49:1 */
  --tdmc-meta:#6b7280;        /* muted meta text               4.83:1 */
}

/* ==================================================================
   1. CYAN USED AS TEXT
   ================================================================== */
a.magicmore,
.blog1-header-wrap a,
h6.blog-author a,
h6.blog-date a,
h6.blog-cat a,
ul.tabset.tabs > li.active > a,
article.icon-box22.w-featured > h4,
article.icon-box22.w-featured > h4 > strong,
#header .menu-item.current-menu-item > a,
#header .menu-item.current-menu-ancestor > a,
#header .menu-item.current_page_item > a,
#header .menu-item.current-menu-parent > a{
  color:var(--tdmc-cyan-text) !important;
}
a.magicmore:hover,
.blog1-header-wrap a:hover,
ul.tabset.tabs > li.active > a:hover{
  color:var(--tdmc-cyan-deep) !important;
}

/* ==================================================================
   2. MUTED META TEXT
   ================================================================== */
h6.blog-author,
h6.blog-cat,
h6.blog-date,
span.tab-date{
  color:var(--tdmc-meta) !important;
}

/* ==================================================================
   3. WHITE TEXT ON A CYAN FILL
   White on #00c2e5 is 2.13:1. Darkening the fill to #0b6f83 takes the
   same white text to 5.81:1 without changing the shape of the button.
   ================================================================== */
a.topbar-btn,
a.readmore,
.blog1 a.readmore{
  background-color:var(--tdmc-cyan-text) !important;
  border-color:var(--tdmc-cyan-text) !important;
  color:#fff !important;
}
a.topbar-btn:hover,
a.readmore:hover{
  background-color:var(--tdmc-cyan-deep) !important;
  border-color:var(--tdmc-cyan-deep) !important;
  color:#fff !important;
}

/* ==================================================================
   4. LEGIBLE TEXT FLOOR
   10px and 11px runs sit below a comfortable reading size, especially
   the topbar contact details which are the primary conversion path.
   Nudged up modestly so the topbar's fixed height still holds.
   ================================================================== */
.top-links h6 a,
.top-links h6,
.top-links .tdmc-wa-pill span{
  font-size:12px !important;
}
.phones-components h6 span strong,
.phones-components h6 strong{
  font-size:12.5px !important;
}
a.readmore,
a.magicmore,
ul.tabset.tabs > li > a,
span.tab-date{
  font-size:12px !important;
  letter-spacing:.04em;
}

/* ==================================================================
   5. FOOTER WIDGETS WERE CLIPPING THEIR LAST LINE
   Both text widgets carried a fixed height a few pixels shorter than
   their content, cutting "All DMC Destinations" and "Chat on WhatsApp".
   ================================================================== */
.widget_text.widget,
.col-md-3 > .widget_text.widget{
  height:auto !important;
  overflow:visible !important;
}

/* ==================================================================
   6. TOUCH TARGETS  (mobile only - 44px minimum)
   Plain inline links are deliberately left alone; only controls that
   read as buttons are enlarged.
   ================================================================== */
@media (max-width:960px){
  a.topbar-btn,
  a.readmore,
  a.magicmore,
  button.footer-subscribe-submit{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  a.topbar-btn{ padding-top:0; padding-bottom:0; }
}

/* ==================================================================
   7. FOOTER BODY COPY  (4.32:1 -> AA) and the subscribe bar
   ================================================================== */
.footbot p,
.footer-in p,
.footer-in .widget p{
  color:#b6bcc6 !important;
}
.footer-subscribe-bar,
.footer-subscribe-bar h6{
  color:#fff !important;
}
.footer-subscribe-bar{
  background-color:var(--tdmc-cyan-text) !important;
}
button.footer-subscribe-submit{
  background-color:#0c5f3f !important;
  border-color:#0c5f3f !important;
  color:#fff !important;
}

/* ==================================================================
   8. WHATSAPP PILL / FAB  (white on #25d366 is 1.98:1)
   ================================================================== */
.tdmc-wa-pill{
  background-color:#128c4a !important;
  color:#fff !important;
}
.tdmc-wa-pill:hover{ background-color:#0f7a40 !important; }

/* ==================================================================
   9. FOCUS VISIBILITY  (keyboard users had no visible focus ring)
   ================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid var(--tdmc-cyan-text);
  outline-offset:2px;
  border-radius:3px;
}

/* ==================================================================
   10. SECOND PASS - selectors the first pass missed, plus one
       regression it introduced.
   ================================================================== */

/* 10a. Active/current nav item. The theme marks it on the <li> and the
   markup sits outside #header, so the earlier #header-scoped rule never
   matched. */
.menu-item.current > a,
.menu-item.current-menu-item > a,
.menu-item.current-menu-ancestor > a,
.menu-item.current-menu-parent > a,
.menu-item.current_page_item > a{
  color:var(--tdmc-cyan-text) !important;
}

/* 10b. REGRESSION FIX. Pass 1 darkened every .magicmore for white
   backgrounds, but the icon-box9 support cards sit on the dark slate
   band, where a dark link is now *worse* (2.55:1). Those go light.
   Cards inside that band are white panels, so they keep the dark link. */
.blox.dark .icon-box9 .magicmore,
.blox.dark .icon-box9 h4,
.blox.dark .icon-box9 p{
  color:#fff !important;
}
.blox.dark .icon-box9 .magicmore{
  border-color:rgba(255,255,255,.65) !important;
}
.blox.dark .icon-box9 .magicmore:hover{
  background:#fff !important;
  color:var(--tdmc-navy,#102a3c) !important;
}

/* 10c. WhatsApp. #25d366 carries white text at only 1.98:1. #0f7a43 is
   5.41:1 and still reads as WhatsApp green. The pill colour comes from a
   variable in header.css; the footer link carries an inline style, so it
   needs !important to override. */
:root{ --tdmc-wa:#0f7a43; --tdmc-wa-dark:#0b5f34; }
#wrap .top-bar .tdmc-wa-pill,
.tdmc-wa-pill,
.tdmc-wa-fab{
  background-color:#0f7a43 !important;
  color:#fff !important;
}
#wrap .top-bar .tdmc-wa-pill:hover,
.tdmc-wa-pill:hover,
.tdmc-wa-fab:hover{ background-color:#0b5f34 !important; }
.widget a[href*="wa.me"],
.widget a[href*="whatsapp"],
footer a[href*="wa.me"],
footer a[href*="whatsapp"]{
  background:#0f7a43 !important;
  color:#fff !important;
}

/* 10d. Header contact strip - the real selector is .components, not
   .phones-components. */
.components h6 strong,
.components h6 span strong,
.components h6 a{
  font-size:12.5px !important;
}

/* 10e. Blog "Show N more" control (3.41:1) and pagination (2.46:1). */
button.tdmc-showmore,
.tdmc-showmore{
  color:var(--tdmc-cyan-text) !important;
  border-color:var(--tdmc-cyan-text) !important;
}
.wp-pagenavi span.pages,
.wp-pagenavi a,
.wp-pagenavi span{
  color:#5f6672 !important;
}
.wp-pagenavi span.current{
  background-color:var(--tdmc-cyan-text) !important;
  color:#fff !important;
  border-color:var(--tdmc-cyan-text) !important;
}

/* 10f. The active nav item is set in header.css at
   "#wrap #header.w-header-type-11 #nav > li.current > a" with !important,
   which outranks a plain .menu-item rule. Matching that specificity here
   wins because polish.css is enqueued after header.css. Underline accent
   keeps the brand cyan; only the text darkens. */
#wrap #header #nav > li.current > a,
#wrap #header #nav > li.current-menu-item > a,
#wrap #header #nav > li.current-menu-ancestor > a,
#wrap #header.w-header-type-11 #nav > li.current > a,
#wrap #header.w-header-type-11 #nav > li.current-menu-item > a,
#wrap #header.w-header-type-11 #nav > li.current-menu-ancestor > a,
#wrap #header.w-header-type-11 #nav > li:hover > a{
  color:var(--tdmc-cyan-text) !important;
}

/* 10g. Dropdown submenus sit on a dark panel (#242424), where the darkened
   cyan is now the wrong direction (2.67:1). Submenu items get the light
   brand tint instead, which reads as the same colour family. */
#wrap #header #nav ul li > a,
#wrap #header #nav ul li.current > a,
#wrap #header #nav ul li:hover > a,
#wrap #header.w-header-type-11 #nav ul li.current > a,
#wrap #header.w-header-type-11 #nav ul li:hover > a{
  color:#7fe2f7 !important;
}
#wrap #header #nav ul li > a{ color:#e9eef2 !important; }
#wrap #header #nav ul li.current > a,
#wrap #header #nav ul li:hover > a{ color:#7fe2f7 !important; }

/* 10h. Default link colour. The theme sets "a, a:visited { color:#0099ff }"
   which is only 3:1 on white, so every body link in every article fails.
   Replacing it with the brand dark cyan (5.81:1 on white, 5.35:1 on the
   section tint) fixes links site-wide in one rule. No !important needed:
   same specificity as the theme rule, and polish.css loads later. */
a,
a:visited{
  color:var(--tdmc-cyan-text);
}
a:hover,
a:focus{
  color:var(--tdmc-cyan-deep);
}

/* 10i. The responsive menu panel (#responavwrap) is a fixed dark overlay,
   so the darkened cyan is the wrong direction there. */
#responavwrap a,
#responav li > a{
  color:#e9eef2 !important;
}
#responav li.current > a,
#responav li.current-menu-item > a,
#responav li.current-menu-ancestor > a,
#responav li:hover > a,
#responavwrap a:hover{
  color:#7fe2f7 !important;
}

/* ==================================================================
   11. FINAL PASS
   ================================================================== */

/* 11a. The destinations hub hero band is white text on flat cyan
   (2.13:1). Same treatment as the DMC pages: slate ground, cyan kept
   as the accent rule. */
section.tdmc-hero-band,
.tdmc-hero-band{
  background-color:#102a3c !important;
  background-image:linear-gradient(180deg,#16394f 0%,#102a3c 100%) !important;
}
.tdmc-hero-band h1,
.tdmc-hero-band h2,
.tdmc-hero-band strong{ color:#fff !important; }
.tdmc-hero-band p,
.tdmc-hero-band li{ color:#c3d3de !important; }
.tdmc-hero-band a{ color:#7fe2f7 !important; }

/* 11b. Mid-greys that miss AA on white: #808080 is 3.95:1 and #a0a0a0
   is 2.61:1. Both go to a grey that clears it with room to spare. */
article.icon-box p,
article.icon-box9 p,
.icon-box p{
  color:#4a5260 !important;
}
.blog-post p.post-date,
p.post-date,
.tab-meta span{
  color:#5b6470 !important;
}

/* 11c. Blog meta was 11px and is the first thing a reader scans to judge
   freshness, so it goes to 12.5px and a grey that holds on the tinted
   card as well as on white. */
h6.blog-date,
h6.blog-comments,
h6.blog-author,
h6.blog-cat,
h6.blog-date a,
h6.blog-cat a{
  font-size:12.5px !important;
  color:#5b6470 !important;
}
h6.blog-date a,
h6.blog-cat a,
h6.blog-author a{
  color:var(--tdmc-cyan-text) !important;
}

/* 11d. Recent-posts widget dates were #a0a0a0 (2.61:1). */
.rec-post p,
.rec-post span,
.widget .rec-post p{
  color:#5b6470 !important;
}

/* ==================================================================
   12. CARD COMPONENT  (article.icon-box22) - SITE-WIDE
   These cards appear on the homepage as well as the destination pages,
   but the styling had only been applied on "-dmc" pages, so the homepage
   kept the theme's raw layout: images at native size, tops not aligned,
   and 101-167px of dead space between image and heading. A component
   should look the same everywhere, so the rules live here now.
   dmc.css loads after this and repeats the same values - no conflict.
   ================================================================== */
:root{
  --tdmc-ink:#171c24;
  --tdmc-body:#4a5260;
  --tdmc-rule:#e4edf2;
}
article.icon-box22{
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  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;
  padding:0;
}
article.icon-box22 h4{
  margin:20px 22px 8px;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  text-align:left;
  color:var(--tdmc-ink) !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.7em;
}
article.icon-box22 p{
  margin:0 22px 18px;
  font-size:14.5px;
  line-height:1.65;
  text-align:left;
  color:var(--tdmc-body) !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.3em;
}
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;
  background:#fff;
}
article.icon-box22.w-featured{
  margin-top:0 !important;
  margin-bottom:0 !important;
  padding:0 0 22px !important;
  transform:none !important;
  border-color:var(--tdmc-cyan);
  box-shadow:0 1px 2px rgba(16,42,60,.04);
}

/* equal-height rows wherever these cards appear */
.vc_row-fluid:has(article.icon-box22),
.wpb_row:has(article.icon-box22){
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
.vc_row-fluid:has(article.icon-box22) > .wpb_column,
.wpb_row:has(article.icon-box22) > .wpb_column{ display:flex; float:none; }
.vc_row-fluid:has(article.icon-box22) .wpb_column > .vc_column-inner,
.wpb_row:has(article.icon-box22) .wpb_column > .vc_column-inner{ display:flex; width:100%; }
.vc_row-fluid:has(article.icon-box22) .wpb_column > .vc_column-inner > .wpb_wrapper,
.wpb_row:has(article.icon-box22) .wpb_column > .vc_column-inner > .wpb_wrapper{
  display:flex; flex-direction:column; width:100%;
}
.vc_row-fluid:has(article.icon-box22) article.icon-box22,
.wpb_row:has(article.icon-box22) article.icon-box22{ flex:1 1 auto; }

@media (max-width:960px){
  .vc_row-fluid:has(article.icon-box22),
  .wpb_row:has(article.icon-box22),
  .vc_row-fluid:has(article.icon-box22) > .wpb_column,
  .wpb_row:has(article.icon-box22) > .wpb_column,
  .vc_row-fluid:has(article.icon-box22) .wpb_column > .vc_column-inner,
  .wpb_row:has(article.icon-box22) .wpb_column > .vc_column-inner,
  .vc_row-fluid:has(article.icon-box22) .wpb_column > .vc_column-inner > .wpb_wrapper,
  .wpb_row:has(article.icon-box22) .wpb_column > .vc_column-inner > .wpb_wrapper{ display:block; }
  article.icon-box22{ display:block; flex:none; height:auto; margin-bottom:20px; }
  article.icon-box22 .magicmore{ margin:4px 22px 0; }
  article.icon-box22 img{ height:200px; }
}