/* Site overrides — loaded after the flex-it theme CSS.
   Keep customisations here so the vendor main-LTR.css stays pristine. */

/* Brand font: Poppins (overrides the theme's Jost via its own CSS variable). */
:root {
  --ltr-main-font-f: "Poppins", "sans-serif";
  /* Brand accent (assets/brand): primary blue #0574FE replaces the theme's
     default #09aff4. Both forms must stay in sync — the theme uses the -rgb
     variant for rgba() tints. */
  --clr-main: #0574FE;
  --clr-main-rgb: 5, 116, 254;
}

/* Brand logo (assets/logo-light.png / logo-dark.png, from the brand kit).
   Reuses the theme's light-logo / dark-logo swap: white lockup on the
   dark/sticky header, dark lockup in light mode. */
.header-basic .header-logo .logo-img {
  max-width: 220px;
  max-height: 44px;
  width: auto;
  height: auto;
}
.brand-logo:hover .logo-img, .footer-logo:hover .footer-logo-img { opacity: .9; }
.footer-logo { display: inline-block; max-width: none; margin-bottom: 1rem; }
.footer-logo .footer-logo-img { width: 220px; max-width: 60vw; height: auto; }
@media (max-width: 575px) {
  .header-basic .header-logo .logo-img { max-width: 172px; }
  .footer-logo .footer-logo-img { width: 190px; }
}

/* Accessibility: skip-to-content link (visible on focus). */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 2000;
  padding: .6rem 1rem;
  background: #0b0f17;
  color: #fff;
  border-radius: 0 0 .35rem 0;
}
.skip-link:focus { left: 0; }

/* Respect reduced-motion: reveal on-scroll (.wow) content without animation. */
@media (prefers-reduced-motion: reduce) {
  .wow { visibility: visible !important; opacity: 1 !important; animation: none !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------------------
   Dark sections (.has-dark-bg) are ALWAYS dark, in both light and dark mode.
   The theme only forces the section heading light, so in light mode our other
   content (paragraphs, lists, tables, links) rendered dark-on-dark. Force all of
   it light here, give the transparent .box cards a subtle background, and fix the
   outlined heading + links.
--------------------------------------------------------------------------- */
/* NB: table cells are handled separately below ("Tables in dark contexts") —
   they follow Bootstrap's --bs-table-* variables, not these prose rules. */
.has-dark-bg,
.has-dark-bg p, .has-dark-bg li, .has-dark-bg strong, .has-dark-bg small,
.has-dark-bg h1, .has-dark-bg h2, .has-dark-bg h3, .has-dark-bg h4,
.has-dark-bg .title, .has-dark-bg .subtitle,
.has-dark-bg .service-title, .has-dark-bg .service-text,
.has-dark-bg .text-muted {
  color: #e8eefb !important;
}
.has-dark-bg .pre-title,
.has-dark-bg .icon { color: var(--clr-main) !important; }
.has-dark-bg a:not(.btn-solid):not(.btn-outline) { color: #7cc9ff !important; }
.has-dark-bg .hollow-text { -webkit-text-stroke-color: #e8eefb !important; }
.has-dark-bg .box { background: rgba(255, 255, 255, .05); border-radius: 12px; }

/* ---------------------------------------------------------------------------
   Tables in dark contexts (dark theme, and always-dark .has-dark-bg sections).
   Bootstrap defaults tables to --bs-table-bg: var(--bs-body-bg), which rendered
   them as large white panels inside the dark design. Make them transparent with
   light text so they sit on the section/card background instead. Light-mode
   pages outside .has-dark-bg keep the default light table.
--------------------------------------------------------------------------- */
body.dark-theme .table,
.has-dark-bg .table {
  --bs-table-bg: transparent;
  --bs-table-color: #e8eefb;
  --bs-table-border-color: rgba(255, 255, 255, .16);
  --bs-table-striped-color: #e8eefb;
  --bs-table-striped-bg: rgba(255, 255, 255, .04);
  --bs-table-hover-color: #fff;
  --bs-table-hover-bg: rgba(255, 255, 255, .06);
  color: #e8eefb;
}
body.dark-theme .table thead th,
.has-dark-bg .table thead th { color: #fff; }

/* Legal / policy pages: readable prose column. */
.legal-content { max-width: 880px; margin: 0 auto; }
.legal-content h2 { margin-top: 2.25rem; margin-bottom: .75rem; }
.legal-content h3 { margin-top: 1.5rem; margin-bottom: .5rem; }
.legal-content ul { padding-left: 1.25rem; }
.legal-content li { margin-bottom: .4rem; }
.legal-content table th, .legal-content table td { padding: .5rem .75rem; vertical-align: top; }
.legal-updated { opacity: .7; font-size: .9rem; }

/* ---------------------------------------------------------------------------
   CTA button groups + mobile spacing polish
   The theme only styles `.page-hero .cta-links-area`; our custom CTA bands use a
   bare `.cta-links-area`, which had no flex/gap (buttons touched). Give it real
   spacing, and on phones stack the buttons full-width so nothing overflows.
--------------------------------------------------------------------------- */
.cta-links-area {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  align-items: center;
}
.cta-links-area.justify-content-center { justify-content: center; }

/* The header is position:fixed (90px). Inner pages have no tall hero to sit under
   it, so give the first section generous top clearance. The `.mega-section` on the
   selector raises specificity so the theme's mobile padding can't override it. */
.page-title-section.mega-section,
.inner-page.mega-section { padding-top: 10rem; }

@media (max-width: 767px) {
  /* Keep clear space between the fixed 90px navbar and the page title on phones. */
  .page-title-section.mega-section,
  .inner-page.mega-section { padding-top: 9.5rem; }
  /* Tighter, more even vertical rhythm on mobile. */
  .sec-heading { margin-bottom: 1.75rem; }
  .cta-band .sec-heading { margin-bottom: 1.25rem; }
  /* A little more breathing room from the screen edges. */
  .container { padding-left: 1.15rem; padding-right: 1.15rem; }
  /* Trim the hero's oversized bottom padding on small screens. */
  .page-hero { padding-bottom: 2.5rem; }
  .page-hero .hero-text-area { margin-top: 1.25rem; }
}

@media (max-width: 575px) {
  /* Stack CTAs full-width — tappable, tidy, and never overflowing. */
  .cta-links-area,
  .page-hero .cta-links-area {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
    width: 100%;
  }
  .cta-links-area > .btn-solid,
  .cta-links-area > .btn-outline,
  .cta-links-area > .cta-link,
  .page-hero .cta-links-area > .cta-link {
    width: 100%;
    margin-right: 0;
  }
}

/* Nothing may create sideways scroll on phones — clip any decorative bleed
   (particles, tilt transforms, hollow display text). */
html, body { overflow-x: hidden; overflow-x: clip; }

/* Mobile header: breathing room for logo + toggler + mode switch now that the
   (non-functional) search button is gone. */
@media (max-width: 575px) {
  .header-basic .controls-box .control { margin-right: .65rem; }
  .header-basic .controls-box .menu-toggler > span { width: 26px; }
}
/* Phones/tablets: the theme forces the hero to min-height 100vh, which leaves a
   large blank band under the hero content once the columns stack. Let it size
   to its content instead (the fixed 90px header still gets cleared). */
@media (max-width: 991px) {
  .page-hero {
    min-height: 0;
    padding-top: 120px;
    padding-bottom: 3rem;
  }
}

/* ---------------------------------------------------------------------------
   Guide-rate tables on phones: stack each row into a card (label/value pairs)
   instead of forcing a horizontal scroll that clips the last columns.
--------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .rates-table thead { display: none; }
  .rates-table,
  .rates-table tbody,
  .rates-table tr,
  .rates-table td { display: block; width: 100%; }
  .rates-table tr {
    padding: .35rem .95rem;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: 10px;
    margin-bottom: .85rem;
  }
  .rates-table tr:last-child { margin-bottom: 0; }
  .rates-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .5rem 0;
    border: 0 !important;
    text-align: right;
  }
  .rates-table td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
  }
  /* First cell (the service name) acts as the card title. */
  .rates-table td:first-child {
    display: block;
    text-align: left;
    font-weight: 700;
    border-bottom: 1px solid rgba(128, 128, 128, .3) !important;
  }
  .rates-table td:first-child::before { content: none; }
}