/*
 * Sky Vista override — REV93.
 *
 * The purchased Ainex theme's own `.post-details-wrapper .blog-text ul`
 * rule (main.css) is built for a SHORT icon-prefixed checklist widget:
 * `columns: 2` + `li { display: flex; ... }`, meant for 4-6 short items
 * like "Fast turnaround / Free consultation" laid out two-across.
 *
 * Every REAL <ul> this site renders through that same wrapper — the
 * single blog post body (post.blade.php) and every service-details page's
 * body copy (service-details.blade.php, docs/service-copy-rev58.md) — is
 * genuine multi-line editorial list content, not a short checklist. The
 * theme's checklist layout forces those <li> into a 2-column flex grid
 * that was never sized for wrapped paragraph text, so the real content
 * renders as garbled, overlapping text (found live on the
 * "website-cost-for-small-business" post — a numbered pricing-tier list).
 *
 * `.post-details-wrapper .blog-text` is used ONLY in post.blade.php and
 * service-details.blade.php on this site — there is no legitimate
 * short-checklist usage of this exact selector to preserve, so this file
 * overrides it outright rather than trying to distinguish "short
 * checklist" from "real list" content at render time.
 *
 * Loaded AFTER main.css in storefront/ainex/head.blade.php so this wins
 * the tie (identical selector specificity, later source order).
 */
.post-details-wrapper .blog-text ul {
  columns: auto;
  list-style: disc;
  padding-left: 1.5em;
}

/*
 * REV128 — service-details pages (service-copy-rev58.md) prefix each
 * real <li> with a `<span class="li-check-badge"><i class="tji-check-2">`
 * icon, matching the theme's own reference demo (Adnan: "does not match
 * any of the color schemes in terms of bullet points"). The generic
 * `ul li span { display:inline; ... }` reset two rules below still
 * applies to plain rich-text <span> wrappers (blog posts) — this class
 * is scoped ONLY to the icon badge so it doesn't collide with that reset.
 * `list-style: none` here (overriding `disc` above, later in cascade,
 * same file) removes the double-marker look (browser dot + icon) once a
 * real checkmark icon is present; blog posts have no `.li-check-badge`
 * span so they still show nothing extra, `disc` above already covers
 * their plain bullets.
 */
.post-details-wrapper .blog-text ul:has(.li-check-badge) {
  list-style: none;
  padding-left: 0;
}
.post-details-wrapper .blog-text ul li span.li-check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  font-size: 11px;
  line-height: 1;
  margin-right: 10px;
  vertical-align: middle;
  color: var(--tj-color-common-white);
  background: var(--tj-color-theme-primary);
  border-radius: 50%;
}

.post-details-wrapper .blog-text ul li {
  display: list-item;
  align-items: normal;
  column-gap: normal;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  margin-bottom: 0.5em;
}

/*
 * The theme also turns every <span> inside these <li> into a 20x20px
 * circular icon badge (`ul li span { width:20px; height:20px;
 * border-radius:50%; ... }`) — meant for a checkmark/number icon glyph.
 * Real editorial content wraps ordinary sentences in <span
 * style="font-weight:400;"> (rich-editor output), so whole paragraphs of
 * real text were being squeezed into that tiny circular box, which is the
 * actual cause of the garbled/overlapping render (not just the ul/li
 * columns+flex above).
 */
.post-details-wrapper .blog-text ul li span {
  display: inline;
  align-items: normal;
  justify-content: normal;
  width: auto;
  height: auto;
  flex: none;
  font-size: inherit;
  line-height: inherit;
  margin-top: 0;
  font-weight: inherit;
  color: inherit;
  background: none;
  border-radius: 0;
}

/*
 * Home hero headline — REV 122.
 *
 * The Ainex theme's `.tj-slider-item .slider-content .slider-title` rule
 * (main.css, 112px base, down to 50px at the smallest breakpoint) was
 * built for a short 2-4 word slogan inside a 730px-max column. Home-03's
 * real copy is a full sentence ("One partner for business, marketing, and
 * technology — not five vendors."). At the theme's original sizes that
 * sentence wraps one or two words per line and overflows the viewport
 * (reported by Adnan: "the text is way too large... I cannot read the
 * text"). `.tj-slider-item` is used ONLY on the home hero on this site
 * (confirmed via grep — no other page shares this selector), so this
 * overrides it outright rather than adding a new scoping class.
 *
 * Sizes below are roughly 45-50% of the theme's originals at every
 * existing breakpoint, chosen so the sentence wraps to 2-3 lines inside
 * the same 730px column instead of one word per line.
 */
.tj-slider-item .slider-content .slider-title {
  font-size: 52px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 46px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 36px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 32px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tj-slider-item .slider-content .slider-title {
    font-size: 26px;
  }
}

/*
 * Sky Vista override — team card title contrast (REV 207, row 5).
 * The theme lays name + designation directly over the photo with
 * --tj-color-text-body-3 grey, which vanishes on the light-purple
 * duotone portraits (/our-team, home team block). A top scrim in the
 * theme's own bg token plus a lighter designation colour restores contrast.
 */
.team-item .team-content {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--tj-color-theme-bg) 88%, transparent) 0%, color-mix(in srgb, var(--tj-color-theme-bg) 55%, transparent) 60%, transparent 100%);
  padding-bottom: 45px;
}
.team-item .designation {
  color: color-mix(in srgb, var(--tj-color-common-white) 85%, transparent);
}

/* Row 8 (2026-09-27): the primary nav grew to 8 items (Pricing + FAQ). On the
   generic Page layout at 992-1199px the menu otherwise butts against the logo
   and the Search button, so give it breathing room on both sides. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-area .header-wrapper .menu-area { margin-inline: 10px; }
  .header-area .header-wrapper .tj-primary-btn { white-space: nowrap; }
}

/* Row 11 (2026-09-27): client logos. Home (swiper) and About (grid) now share
   the same .client-logo tile. The theme never sized the <img>, so tall logos
   overflowed the 195x74 tile: the swiper's overflow:hidden clipped them on
   home, and on About they spilled out. Fit every logo inside its tile. */
.client-logo {
  padding: 10px 14px;
  overflow: hidden;
}
.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Row 12 (2026-09-27): /faq left panel was empty gradient art. The art stays
   as the backdrop; a contact card sits on its lower half. Desktop keeps the
   panel sticky beside the long accordion. */
.sv-faq-help { display: flex; }
.sv-faq-help > img { position: absolute; inset: 0; z-index: 0; }
.sv-faq-help-card {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 40px 36px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
}
.sv-faq-help-title { margin: 0; font-size: 30px; color: var(--tj-color-common-white); }
.sv-faq-help-text { margin: 0 0 8px; color: color-mix(in srgb, var(--tj-color-common-white) 80%, transparent); }
.sv-faq-help-phone { color: var(--tj-color-common-white); font-weight: 500; }
.sv-faq-help-phone:hover { color: var(--tj-color-theme-primary); }
@media (min-width: 992px) {
  .sv-faq-help { position: sticky; top: 120px; min-height: 740px; }
}
@media (max-width: 991.98px) {
  .sv-faq-help { margin-bottom: 40px; }
  .sv-faq-help-card { min-height: 0; padding: 32px 24px; }
}

/* Home testimonial carousel: main.js now shows one WHOLE card below 768px,
   so the theme's -15px right bleed (built for its 1.15-card peek) only
   pushes that card off the screen edge. Keep it inside the gutter. */
@media (max-width: 575px) {
  .testimonial-wrapper-2 { margin-right: 0; }
}

/* Footer offices (USA + East Africa), under the footer blurb in column 1. */
.footer-offices { display: grid; gap: 16px; margin: -10px 0 30px; max-width: 280px; }
.footer-office { display: flex; gap: 10px; align-items: flex-start; }
.footer-office > i { font-size: 18px; line-height: 1.5; color: var(--tj-color-theme-primary); flex: none; }
.footer-office__label { margin: 0 0 2px; font-size: 15px; color: var(--tj-color-common-white); }
.footer-office address { margin: 0; font-style: normal; line-height: 1.6; color: var(--tj-color-text-body); }

/* ── Review doc "Skyvista Site Improvements" (2026-09-28) ───────────────── */

/* Cards were the same near-black as the page. Re-point the theme's own card
   token inside each card, so every notch/tab the theme paints with
   --tj-color-theme-bg (Learn More tab, category tag) follows the lifted
   colour instead of leaving dark cut-outs. */
:root { --sv-card-bg: color-mix(in srgb, var(--tj-color-theme-bg) 55%, var(--tj-color-border-1)); }
.service-item.style-2,
.tj-post-item.sv-post-card,
.contact-item.style-2,
.sv-product-card { --tj-color-theme-bg: var(--sv-card-bg); }
.contact-item.style-2,
.sv-product-card,
.tj-post-item.sv-post-card { border: 1px solid color-mix(in srgb, var(--tj-color-border-1) 70%, var(--tj-color-common-white) 8%); }

/* Home hero: description and CTA stacked, the button on its own line and on one line. */
.tj-slider-item .slider-content .sv-hero-aside { display: flex; flex-direction: column; align-items: flex-start; }
.tj-slider-item .slider-content .sv-hero-aside .slider-desc { margin-bottom: 22px; }
.tj-slider-item .slider-content .sv-hero-btn-row .btn-text { white-space: nowrap; }
@media (min-width: 992px) {
  .tj-slider-item .slider-content .sv-hero-aside { max-width: 380px; }
  .tj-slider-item .slider-content .sv-hero-aside .slider-desc { max-width: none; }
}

/* Home "What We've Built": equal-height stacked cards. */
.tj-project-section-3 .row.row-gap-4 > [class*="col-"] { display: flex; }
.sv-product-card { display: flex; flex-direction: column; width: 100%; padding: 28px 30px 30px; }
.sv-product-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; margin-bottom: 20px; }
.sv-product-card__logo { height: 48px; width: auto; max-width: 200px; object-fit: contain; }
.sv-product-card__tag { flex: none; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tj-color-theme-primary); border: 1px solid color-mix(in srgb, var(--tj-color-theme-primary) 45%, transparent); border-radius: 50px; padding: 4px 12px; }
.sv-product-card__name { margin: 0 0 8px; font-size: 24px; }
.sv-product-card__copy { margin: 0; font-size: 17px; line-height: 1.6; color: var(--tj-color-white-2); }

/* Blog list: 2-up card grid like /services/; images shown whole, not cropped to 410px. */
.sv-post-grid > [class*="col-"] { display: flex; }
.tj-post-item.sv-post-card { display: flex; flex-direction: column; width: 100%; margin-bottom: 0; }
.sv-post-card .tj-post-thumb { height: auto; aspect-ratio: 16 / 9; background: var(--tj-color-theme-dark); }
.sv-post-card .tj-post-thumb img { object-fit: contain; }
.sv-post-card .tj-post-content { display: flex; flex-direction: column; flex: 1; padding: 20px 10px 8px; }
.sv-post-card .tj-post-meta { font-size: 14px; }
.sv-post-card__title { font-size: 22px; line-height: 1.35; }
.sv-post-card .desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
.sv-post-card .tj-post-btn { margin-top: auto; padding-top: 18px; }
/* The post page: featured image whole, not cropped. */
.post-details-wrapper .blog-images img { height: auto; object-fit: contain; }

/* Service pages: clear heading hierarchy, readable body, a touch of colour. */
.sv-service-body > .title { font-size: 40px; line-height: 1.2; margin: 30px 0 18px; }
.sv-service-body .blog-text p { font-size: 17px; line-height: 1.75; color: var(--tj-color-white-2); margin-bottom: 18px; }
.sv-service-body .blog-text h2,
.sv-service-body .blog-text h3 { font-size: 28px; line-height: 1.3; margin: 40px 0 14px; padding-left: 16px; border-left: 4px solid var(--tj-color-theme-primary); }
.sv-service-body .blog-text h4 { font-size: 21px; margin: 28px 0 10px; color: var(--tj-color-theme-primary); }
.sv-service-body .blog-text ul { margin: 6px 0 22px; padding: 20px 24px; background: var(--sv-card-bg); border-radius: 12px; }
.sv-service-body .blog-text li { font-size: 16px; }
.sv-service-body .blog-text strong { color: var(--tj-color-common-white); }
@media (max-width: 767px) {
  .sv-service-body > .title { font-size: 30px; }
  .sv-service-body .blog-text h2, .sv-service-body .blog-text h3 { font-size: 23px; }
}

/* Service cards (/services/ grid + home carousel): same height in a row. A
   one-line description made its card shorter than its neighbours; the image
   and Learn More tab now sit at the bottom of every card. */
/* Grid columns only (/services/ uses .row-gap-4). NOT every .row: on home the
   carousel and its "View More" button sit in plain col-12s, and making those
   flex collapsed the Swiper to zero width. */
.tj-service-section-2 .row.row-gap-4 > [class*="col-"] { display: flex; }
.tj-service-section-2 .service-slider .swiper-slide { height: auto; display: flex; }
.service-item.style-2 { display: flex; flex-direction: column; width: 100%; }
.service-item.style-2 .service-inner { display: flex; flex-direction: column; flex: 1; }
.service-item.style-2 .service-img { margin-top: auto; }

/* Home "Recent Blogs": show each post's image whole. The theme crops to a
   fixed 340px box, which cut the headline off every text-bearing graphic. */
.tj-blog-section-3 .blog-item .blog-thumb { height: auto; aspect-ratio: 16 / 9; background: var(--tj-color-theme-dark); }
.tj-blog-section-3 .blog-item .blog-thumb img { object-fit: contain; }

/* Service pages "How We Work With You": the theme centres the three step
   cards vertically, so different text lengths staggered them. Top-align and
   stretch them to one height. */
.details-content-box { align-items: stretch; }

/* Contact page: all info cards the same height. */
.sv-contact-cards > [class*="col-"] { display: flex; }
.sv-contact-cards .contact-item.style-2 { width: 100%; }

/* Blog post body: headings and list spacing as on the old site. Measured on
   skyvistaconsulting.com/website-cost-…/ (1440 and 390): H2 30px / 42px line,
   margin 20px 0 10px; each <ul> margin 0 (the migrated posts split one list
   into several <ul>s, and the theme's 50px ul margin opened gaps inside it).
   Theme gave the H2 48px with no top margin. Post page only (.sv-prose here
   sits on the post body; other .sv-prose uses are outside .post-details-wrapper). */
.post-details-wrapper .blog-text.sv-prose h2 { font-size: 30px; line-height: 42px; margin: 20px 0 10px; }
.post-details-wrapper .blog-text.sv-prose ul { margin-bottom: 0; }
/* The theme zeroes the last item's margin; keep it so split lists read as one. */
.post-details-wrapper .blog-text.sv-prose ul li:last-child { margin-bottom: 0.5em; }