/*
 Theme Name:   Listdo Child
 Theme URI:    http://wordpress.com
 Description:  Listdo Child Theme
 Author:       ApusTheme
 Author URI:   http://apusthemes.com
 Template:     listdo
 Version:      1.0.0
 Text Domain:  listdo-child
*/

/* =========================================
   3Best Blog Categories
========================================= */

.threebest-blog-categories {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}


/* Heading */

.threebest-category-heading {
    margin-bottom: 16px;
    color: #07183f;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}


/* Main wrapper */

.threebest-category-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}


/* Category list */

.threebest-category-list {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: 2px 0 6px;
}

.threebest-category-list::-webkit-scrollbar {
    display: none;
}


/* Category card */

.threebest-category-card {
    flex: 0 0 208px;
    min-height: 90px;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    padding: 14px 16px;

    background: #ffffff;
    border: 1px solid #e5e9f1;
    border-radius: 10px;

    text-decoration: none;

    box-shadow: 0 2px 7px rgba(20, 42, 80, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.threebest-category-card:hover {
    transform: translateY(-2px);
    border-color: #d3daf0;
    box-shadow: 0 5px 15px rgba(20, 42, 80, 0.10);
}


/* Icon */

.threebest-category-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;

    margin-right: 13px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef4ff;
    color: #1559db;
}


/* SVG */

.threebest-category-icon svg {
    width: 23px;
    height: 23px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Category text */

.threebest-category-info {
    min-width: 0;
}

.threebest-category-name {
    color: #07183f;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 700;

    white-space: normal;
}

.threebest-category-count {
    margin-top: 5px;

    color: #5f6b82;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 400;
}


/* =========================================
   Arrow Buttons
========================================= */

.threebest-category-arrow {
    width: 48px;
    height: 90px;
    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border: 1px solid #e5e9f1;
    border-radius: 10px;

    color: #1559db;

    cursor: pointer;

    box-shadow: 0 2px 7px rgba(20, 42, 80, 0.05);

    transition: all 0.2s ease;

    z-index: 2;
}

.threebest-category-arrow:hover {
    background: #f5f8ff;
    border-color: #cfd8ed;
}

.threebest-category-arrow span {
    font-size: 34px;
    line-height: 1;
    font-weight: 300;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .threebest-category-card {
        flex-basis: 200px;
    }

    .threebest-category-arrow {
        width: 44px;
        min-width: 44px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .threebest-category-heading {
        font-size: 18px;
        margin-bottom: 13px;
    }

    .threebest-category-wrapper {
        gap: 8px;
    }

    .threebest-category-list {
        gap: 10px;
    }

    .threebest-category-card {
        flex: 0 0 190px;
        min-height: 82px;
        padding: 12px;
    }

    .threebest-category-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-right: 10px;
    }

    .threebest-category-icon svg {
        width: 21px;
        height: 21px;
    }

    .threebest-category-name {
        font-size: 14px;
    }

    .threebest-category-count {
        font-size: 12px;
    }

    .threebest-category-arrow {
        display: none;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 480px) {

    .threebest-category-card {
        flex-basis: 180px;
    }

}





/* ==========================================================================
   3Best.com — elementor-global.css
   Site-wide rules that Elementor's own controls cannot express.

   Everything Elementor CAN do natively — spacing, typography, colour,
   background, border, radius, shadow, alignment, responsive values — is set on
   the elements themselves and is deliberately NOT repeated here.

   Load once, sitewide (Elementor → Custom Code, or wp_enqueue_style in the
   child theme). Order: global → components → pages.
   ========================================================================== */

/* --------------------------------------------------------------- tokens ---
   Mirrors the Elementor Global Colors so plain CSS can reach them too.
   Changing a Global Colour in Site Settings does not update these; keep the two
   in step, or switch these to var(--e-global-color-*) once the kit is imported. */
:root {
  --3b-primary: #1668e5;
  --3b-primary-600: #1155c4;
  --3b-primary-50: #eef5fe;
  --3b-primary-100: #dceafd;
  --3b-navy: #0b1e43;
  --3b-ink: #101b33;
  --3b-body: #55617a;
  --3b-muted: #7b8699;
  --3b-surface: #f5f7fb;
  --3b-surface-2: #eef2f9;
  --3b-line: #e4e9f2;
  --3b-success: #1fa85a;
  --3b-star: #f5a623;

  --3b-radius-card: 16px;
  --3b-radius-band: 20px;
  --3b-shadow-card-hover: 0 10px 28px rgba(16, 24, 40, 0.1);
}

/* ------------------------------------------------------------ base rules */

body {
  /* Wide comparison tables and the city carousel scroll inside their own
     wrappers; nothing should ever scroll the page sideways. */
  overflow-x: hidden;
}

::selection {
  background: rgba(22, 104, 229, 0.16);
}

/* Fluid display type.
   The original scales H1 between 32px and 40px with clamp(). Elementor's font
   size control holds one value per breakpoint, so the desktop values are set on
   the widgets and the smooth ramp is restored here. Remove this block if you
   prefer Elementor's stepped values to be the single source of truth. */
.hero-title .elementor-heading-title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3rem);
}

/* -------------------------------------------------------- focus & motion */

.elementor a:focus-visible,
.elementor button:focus-visible,
.elementor input:focus-visible,
.elementor select:focus-visible,
.elementor textarea:focus-visible,
.elementor .elementor-button:focus-visible {
  outline: 2px solid var(--3b-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .elementor *,
  .elementor *::before,
  .elementor *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------ flex grid width note ----
   Column widths use Elementor's `custom` slider unit (calc(25% - 12px) and
   similar), which needs Elementor 3.10+ — comfortably below the 3.16 that the
   flexbox container system itself requires, so no fallback is needed.

   Do NOT add a blanket `.e-con { --width: 100% }` here: custom CSS loads after
   Elementor's generated rules and has equal specificity, so it would silently
   reset every column width on the site. */

/* ------------------------------------------------------------- form base */

.elementor-field-group > label {
  font-weight: 600;
}

.elementor-field::placeholder {
  color: var(--3b-muted);
  opacity: 1;
}
/* ==========================================================================
   3Best.com — elementor-components.css
   Shared component rules. Every class here is applied through an Elementor
   element's "CSS Classes" field, so the hooks are visible and editable in the UI.

   Scope rule: only patterns Elementor has no control for live here — aspect
   ratios, hover motion, sticky behaviour, scroll containers, absolute overlays
   and cell borders. Colour, spacing and typography stay on the elements.
   ========================================================================== */

/* =========================================================== media boxes ==
   Elementor's Image widget can crop with object-fit, but a fixed aspect ratio
   on the wrapper is what keeps a grid of cards perfectly aligned. */

.media-box {
  position: relative;
  overflow: hidden;
}

.media-box > .elementor-widget-image,
.media-box .elementor-image,
.media-box figure {
  width: 100%;
  height: 100%;
  margin: 0;
}

.media-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-16x9  { aspect-ratio: 16 / 9; }
.ratio-4x3   { aspect-ratio: 4 / 3; }
.ratio-4x5   { aspect-ratio: 4 / 5; }
.ratio-1x1   { aspect-ratio: 1 / 1; }

.avatar,
.avatar-32 {
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
}
.avatar-32 { width: 32px; }
.avatar    { width: 40px; }

/* Play button centred over the provider video still. */
.video-thumb { position: relative; }
.video-thumb__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-thumb__play .elementor-icon {
  background: rgba(255, 255, 255, 0.92);
  color: var(--3b-primary);
  border-radius: 999px;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(11, 30, 67, 0.14);
}

/* "Featured" flag over an article thumbnail. */
.article-media { position: relative; }
.article-media .featured-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* ================================================================ cards ==
   Elementor has hover controls for colour and shadow but not for transform,
   so the lift lives here. */

.card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--3b-shadow-card-hover);
  border-color: #bbd6fb;
}

/* Arrow links nudge on hover — again, transform only. */
.link-arrow .elementor-button-icon {
  transition: transform 0.2s ease;
}
.link-arrow .elementor-button:hover .elementor-button-icon {
  transform: translateX(2px);
}

/* ========================================================== breadcrumbs ==
   The trail is one Text Editor; these style the separators and links. */

.breadcrumb p { margin: 0; }
.breadcrumb .sep {
  margin: 0 8px;
  color: var(--3b-muted);
}
.breadcrumb{background-color:transparent !important;}
.breadcrumb a { color: var(--3b-body); }
.breadcrumb a:hover { color: var(--3b-primary); }
.breadcrumb [aria-current='page'] {
  font-weight: 600;
  color: var(--3b-ink);
}

/* =============================================== comparison / data tables
   Elementor core has no table widget, so these are containers. The rules below
   supply only the cell borders and the horizontal scroll the design needs. */

.ctable-scroll { -webkit-overflow-scrolling: touch; }

.ctable-row { border-bottom: 1px solid var(--3b-line); }
.ctable-row:last-child { border-bottom: 0; }

.ctable-cell + .ctable-cell { border-left: 1px solid var(--3b-line); }
.ctable-cell--label { justify-content: center; }

.ctable-head { border-bottom: 1px solid var(--3b-line); }

.data-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-grid__row { border-bottom: 1px solid var(--3b-line); }
.data-grid__row:last-child { border-bottom: 0; }
.data-grid__row--head { position: sticky; top: 0; z-index: 1; }

/* Status and plan pills sit inside table cells and sidebars. */
.status-pill,
.plan-badge {
  border-radius: 999px;
  white-space: nowrap;
}

/* ============================================================ dashboard ==
   Rating distribution bars: a track container with a fill container inside.
   Widths are set per row on the fill element in Elementor. */

.star-bar__track {
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
}
.star-bar__fill {
  height: 100%;
  border-radius: 999px;
}

.chart-svg svg { width: 100%; height: auto; display: block; }

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* Count badges on the dashboard sidebar navigation. */
.dashboard-nav .elementor-icon-list-text { width: 100%; }
.dashboard-nav .nav-count {
  float: right;
  background: var(--3b-surface-2);
  color: var(--3b-body);
  border-radius: 4px;
  padding: 1px 7px;
  font-weight: 700;
}

/* ============================================================== header ===
   The CTA must never wrap, and the logo and utility cluster must not shrink
   when the navigation grows. */

.site-header .elementor-button,
.header-cta .elementor-button { white-space: nowrap; }

.site-logo,
.header-utility,
.app-account { flex-shrink: 0; }

.logo-mark .logo-3 { color: var(--3b-primary); }
.logo-mark .logo-com { font-weight: 500; }
.logo-mark--dark .logo-3 { color: #4e93f0; }

/* ============================================================== footer ===

   Elementor's Icon List gives each row a link; these remove the icon gutter for
   the bulletless footer and sitemap columns and add the hover colour. */

.footer-links .elementor-icon-list-icon,
.sitemap-group .elementor-icon-list-icon:empty { display: none; }

.footer-links .elementor-icon-list-item a:hover .elementor-icon-list-text { color: #fff; }
.site-footer--light .footer-links .elementor-icon-list-item a:hover .elementor-icon-list-text { color: var(--3b-primary); }

/* ============================================================= sidebars ==
   Sticky only where there is room for it. */

@media (min-width: 1024px) {
  .legal-sidebar,
  .guide-aside-left,
  .guide-aside-right {
    position: sticky;
    top: 96px;
    align-self: flex-start;
  }
}

/* ====================================================== scroll containers
   Chip strips and the city carousel scroll sideways without a visible bar,
   matching the original's `hide-scrollbar` utility. */

.cities-carousel,
.category-chips,
.search-chips,
.guide-toc,
.e-n-tabs-heading,
.data-grid,
.ctable-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cities-carousel::-webkit-scrollbar,
.category-chips::-webkit-scrollbar,
.search-chips::-webkit-scrollbar,
.guide-toc::-webkit-scrollbar,
.e-n-tabs-heading::-webkit-scrollbar,
.data-grid::-webkit-scrollbar,
.ctable-scroll::-webkit-scrollbar {
  display: none;
}

/* ================================================================ badges =*/

.badge-cat { white-space: nowrap; }
.badge-cat--pill { border-radius: 999px; }

.pill,
.toc-chip,
.search-chip,
.category-chip { white-space: nowrap; }

/* ============================================================== accents ==*/

.step-item--inline .elementor-widget-icon { flex: 0 0 auto; }

/* Overlapping cards (About mission card, careers note card) are positioned with
   Elementor margins rather than absolute coordinates, so they reflow correctly
   on small screens. Nothing needed here — kept as a note. */

/* ================================================= core-fallback forms ===
   Only used by the templates in templates/core-fallback/, where the Elementor
   Pro Form widget is replaced with plain markup for sites on Elementor free.
   Delete this block if you are on Pro. */

.core-form .cf-rows { display: flex; flex-wrap: wrap; gap: 14px; }
.core-form .cf-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 100%; }
.core-form .cf-col-65 { flex: 1 1 calc(65% - 7px); }
.core-form .cf-col-50 { flex: 1 1 calc(50% - 7px); }
.core-form .cf-col-33 { flex: 0 1 calc(33% - 7px); }
.core-form .cf-col-25 { flex: 0 1 calc(25% - 7px); }
.core-form label { font-size: 13px; font-weight: 600; color: var(--3b-ink); }
.core-form .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.core-form input,
.core-form select,
.core-form textarea {
  width: 100%; font: inherit; font-size: 13px; color: var(--3b-ink);
  background: #fff; border: 1px solid var(--3b-line); border-radius: 10px; padding: 12px 14px;
}
.core-form .cf-checks { display: flex; flex-direction: column; gap: 10px; }
.core-form .cf-check { display: flex; align-items: center; gap: 10px; }
.core-form .cf-check input { width: 16px; height: 16px; }
.core-form .cf-check label { font-weight: 400; color: var(--3b-body); }
.core-form .cf-submit { justify-content: flex-end; }
.core-form .cf-button {
  width: 100%; border: 0; border-radius: 10px; padding: 13px 20px;
  background: var(--3b-primary); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
}
.core-form .cf-button:hover { background: var(--3b-primary-600); }

/* ==========================================================================
   3Best.com — elementor-pages.css
   The small number of genuinely page-specific rules.

   Kept deliberately short: anything that appears on more than one page belongs
   in elementor-components.css instead. If this file starts growing, a component
   is being duplicated.
   ========================================================================== */

/* ------------------------------------------------------------- home page */

/* The hero photograph bleeds to the viewport edge behind a gradient scrim, both
   set with Elementor's Background and Background Overlay controls. On tablet and
   below the original drops the photo entirely so the copy keeps full contrast. */
@media (max-width: 1023px) {
  .page-home .hero-section,
  .listing-hero-section,
  .comparison-hero-section,
  .city-hero-section,
  .state-hero-section,
  .overview-hero-section {
    background-image: none !important;
  }
  .page-home .hero-section > .elementor-background-overlay,
  .listing-hero-section > .elementor-background-overlay,
  .comparison-hero-section > .elementor-background-overlay,
  .city-hero-section > .elementor-background-overlay,
  .state-hero-section > .elementor-background-overlay,
  .overview-hero-section > .elementor-background-overlay {
    display: none;
  }
}

/* --------------------------------------------------- provider dashboard */

/* The dashboard is an application screen rather than a marketing page: it keeps
   a grey canvas behind white panels. */
.dashboard-body { background: var(--3b-surface); }

/* Charts are placeholder SVGs pending a real charting library. */
.chart-card .chart-svg { min-height: 160px; }

/* ------------------------------------------------------------- FAQ page */

/* The help-topics card lifts over the navy hero. The offset is an Elementor
   margin; this only stops the shadow being clipped by the hero above it. */
.help-topics-card { position: relative; z-index: 2; }

/* ------------------------------------------------------- legal templates */

/* Terms and Privacy share one structure, so they share one rule set. */
.legal-item + .legal-item { border-top: 1px solid var(--3b-line); }